Merge branch 'development' into feat/track

assets/apps/components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@neve-wp/components",
-    "version": "0.0.52",
+    "version": "0.0.54",
     "description": "Neve React Components",
     "author": "themeisle <[email protected]>",
     "license": "GPL-2.0-or-later",

assets/apps/components/src/Common/DropdownFix.js

@@ -28,7 +28,10 @@ function useObservableState(initialState, onStateChange) {
 }
 
 /**
- * This monitors all events across opened popver components
+ * This monitors all events across opened popover components
+ *
+ * @param {any} ref - The ref of the popover component.
+ * @param {any} callback - The callback function to execute.
  */
 function useOutsideClickHook(ref, callback) {
 	useEffect(() => {

assets/apps/components/src/Common/icons.js

@@ -1,5 +1,49 @@
 const getIcons = (size) => {
 	return {
+		'apple-music': (
+			<svg
+				width={size}
+				height={size}
+				version="1.1"
+				id="Artwork"
+				xmlns="http://www.w3.org/2000/svg"
+				x="0px"
+				y="0px"
+				viewBox="0 0 73 73"
+				style={{ enableBackground: 'new 0 0 73 73' }}
+				xmlSpace="preserve"
+			>
+				<g id="Layer_5"></g>
+				<g>
+					<g>
+						<path
+							className="st0"
+							style={{ fillRule: 'evenodd', clipRule: 'evenodd' }}
+							d="M72,19.94c0-0.72-0.01-1.45-0.03-2.17c-0.04-1.58-0.14-3.17-0.42-4.73c-0.28-1.58-0.75-3.06-1.48-4.5
+						c-0.72-1.41-1.66-2.71-2.78-3.83c-1.12-1.12-2.42-2.06-3.83-2.78c-1.44-0.73-2.91-1.2-4.49-1.48c-1.56-0.28-3.15-0.37-4.73-0.42
+						C53.51,0.02,52.78,0.01,52.06,0c-0.86,0-1.72,0-2.58,0H22.52c-0.86,0-1.72,0-2.58,0c-0.72,0-1.45,0.01-2.17,0.03
+						c-1.58,0.04-3.17,0.14-4.73,0.42C11.46,0.74,9.98,1.2,8.55,1.94C7.13,2.66,5.84,3.6,4.72,4.72S2.65,7.13,1.93,8.55
+						c-0.73,1.44-1.2,2.91-1.48,4.5c-0.28,1.56-0.37,3.15-0.42,4.73C0.02,18.5,0.01,19.22,0,19.94c0,0.86,0,1.72,0,2.58v26.95
+						c0,0.86,0,1.72,0,2.58c0,0.72,0.01,1.45,0.03,2.17c0.04,1.58,0.14,3.17,0.42,4.73c0.28,1.58,0.75,3.06,1.48,4.5
+						c0.72,1.41,1.66,2.71,2.78,3.83s2.42,2.06,3.83,2.78c1.44,0.73,2.91,1.2,4.49,1.48c1.56,0.28,3.15,0.37,4.73,0.42
+						c0.72,0.02,1.45,0.03,2.17,0.03c0.86,0.01,1.72,0,2.58,0h26.95c0.86,0,1.72,0,2.58,0c0.72,0,1.45-0.01,2.17-0.03
+						c1.58-0.04,3.17-0.14,4.73-0.42c1.58-0.28,3.06-0.75,4.49-1.48c1.41-0.72,2.71-1.66,3.83-2.78c1.12-1.12,2.06-2.41,2.78-3.83
+						c0.73-1.44,1.2-2.91,1.48-4.5c0.28-1.56,0.37-3.15,0.42-4.73c0.02-0.72,0.03-1.45,0.03-2.17c0.01-0.86,0-1.72,0-2.58V22.52
+						C72,21.66,72,20.8,72,19.94z M52.71,46.85c0,0.91-0.01,1.74-0.2,2.65c-0.19,0.89-0.53,1.72-1.05,2.47
+						c-0.52,0.75-1.19,1.36-1.97,1.82c-0.79,0.47-1.62,0.73-2.5,0.91c-1.66,0.33-2.79,0.41-3.86,0.2c-1.03-0.21-1.9-0.68-2.6-1.32
+						c-1.03-0.95-1.68-2.23-1.82-3.56c-0.16-1.57,0.36-3.24,1.53-4.48c0.59-0.62,1.34-1.11,2.34-1.5c1.04-0.4,2.19-0.65,3.96-1
+						c0.47-0.09,0.93-0.19,1.4-0.28c0.61-0.12,1.14-0.28,1.56-0.8c0.43-0.52,0.43-1.16,0.43-1.78V24.32c0-1.21-0.54-1.54-1.7-1.32
+						c-0.83,0.16-18.62,3.75-18.62,3.75c-1,0.24-1.36,0.57-1.36,1.82v23.23c0,0.91-0.05,1.74-0.24,2.65c-0.19,0.89-0.53,1.72-1.05,2.47
+						c-0.52,0.75-1.19,1.36-1.97,1.82c-0.79,0.47-1.62,0.74-2.5,0.92c-1.66,0.33-2.79,0.41-3.86,0.2c-1.03-0.21-1.9-0.69-2.6-1.33
+						c-1.03-0.95-1.63-2.23-1.78-3.56c-0.16-1.57,0.31-3.24,1.49-4.48c0.59-0.62,1.34-1.11,2.34-1.5c1.04-0.4,2.19-0.65,3.96-1
+						c0.47-0.09,0.93-0.19,1.4-0.28c0.61-0.12,1.14-0.28,1.56-0.8c0.42-0.52,0.47-1.13,0.47-1.75c0-4.92,0-26.78,0-26.78
+						c0-0.36,0.03-0.6,0.05-0.72c0.09-0.56,0.31-1.05,0.72-1.39c0.34-0.28,0.78-0.48,1.33-0.6l0.01,0L49,11.33
+						c0.19-0.04,1.73-0.31,1.91-0.33c1.16-0.1,1.81,0.66,1.81,1.89L52.71,46.85L52.71,46.85z"
+						/>
+					</g>
+				</g>
+			</svg>
+		),
 		'behance-square': (
 			<svg
 				width={size}
@@ -615,6 +659,20 @@ const getIcons = (size) => {
 				<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z" />
 			</svg>
 		),
+		'twitter-x': (
+			<svg
+				width={size}
+				height={size}
+				viewBox="0 0 1200 1227"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+					fill="inherit"
+				/>
+			</svg>
+		),
 		'vimeo-square': (
 			<svg
 				width={size}

assets/apps/components/src/Common/svg.js

@@ -608,9 +608,9 @@ const SVG = {
 			viewBox="3 3 18 18"
 		>
 			<path
-				fill-rule="evenodd"
+				fillRule="evenodd"
 				d="M5 11a6 6 0 1 1 12 0a6 6 0 0 1-12 0zm6-8a8 8 0 1 0 4.906 14.32l3.387 3.387a1 1 0 0 0 1.414-1.414l-3.387-3.387A8 8 0 0 0 11 3zm0 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8z"
-				clip-rule="evenodd"
+				clipRule="evenodd"
 			/>
 		</svg>
 	),

assets/apps/customizer-controls/src/builder/scss/_rows.scss

@@ -81,10 +81,25 @@
 }
 
 .row.sidebar .row-inner {
-  width: 200px;
+  width: 210px;
 
   .droppable-wrap {
 	height: 100%;
+
+	max-height: 170px;
+	overflow-x: hidden;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #D9D9D9;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: #888;
+	}
   }
 
   .droppable {
@@ -189,6 +204,13 @@
   &:hover, &.has-popover {
 	.open-popover {
 	  opacity: .25;
-	}
+	}	
   }
 }
+
+/**
+ * Fix for the popover not being visible when it is inside a container with overflow.
+ */
+.rows-wrapper .vertical-rows .droppable-wrap.has-popover > .components-popover {
+	position: fixed !important;
+}

assets/apps/dashboard/src/dashboard.js

@@ -1,12 +1,14 @@
-import './style.scss';
-import App from './Components/App';
 import { registerStore } from '@wordpress/data';
 import { render } from '@wordpress/element';
 
+import './style.scss';
+import App from './Components/App';
+
 import actions from './store/actions';
 import reducer from './store/reducer';
 import selectors from './store/selectors';
 import './utils/module-observer';
+import './utils/survey';
 
 registerStore('neve-dashboard', {
 	reducer,

assets/apps/dashboard/src/scss/_general.scss

@@ -3,7 +3,9 @@
 }
 
 .container {
+  width: auto;
   padding: 0 15px;
+
   &.content {
 	padding-top: 20px;
   }

assets/apps/dashboard/src/utils/survey.js

@@ -0,0 +1,43 @@
+/**
+ * This file is used to initialize the FormBricks survey.
+ */
+import formbricks from '@formbricks/js';
+
+/**
+ * Take the number of days since install and convert it to a category for NPS user profile.
+ *
+ * @param {number} number - Number to convert.
+ * @param {number} scale - Scale to use.
+ * @return {number} - Converted number.
+ */
+const convertToCategory = (number, scale = 1) => {
+	const normalizedNumber = Math.round(number / scale);
+	if (0 === normalizedNumber || 1 === normalizedNumber) {
+		return 0;
+	} else if (1 < normalizedNumber && 8 > normalizedNumber) {
+		return 7;
+	} else if (8 <= normalizedNumber && 31 > normalizedNumber) {
+		return 30;
+	} else if (30 < normalizedNumber && 90 > normalizedNumber) {
+		return 90;
+	} else if (90 > normalizedNumber) {
+		return 91;
+	}
+};
+
+if ('undefined' !== typeof window && 'undefined' !== typeof window.neveDash) {
+	formbricks.init({
+		environmentId: 'clr0ply35522h8up0bay2de4y',
+		apiHost: 'https://app.formbricks.com',
+		userId:
+			'neve_' +
+			(window.neveDash?.license?.key ??
+				window.neveDash?.rootUrl?.replace(/[^\w\d]*/g, '')),
+		attributes: {
+			plan: window.neveDash?.license?.type ?? 'free',
+			days_since_install: convertToCategory(
+				window.neveDash.daysSinceInstall
+			),
+		},
+	});
+}

assets/js/src/frontend/hgf.js

@@ -38,16 +38,15 @@ const toggleAria = (elements, add = true) => {
  * @param {boolean} skipSidebar
  */
 HFG.prototype.init = function (skipSidebar = false) {
+	const doc = window.document;
 	if (skipSidebar === false) {
-		const closeButtons = document.querySelectorAll(closeNavSelector);
+		const closeButtons = doc.querySelectorAll(closeNavSelector);
 		addEvent(closeButtons, 'click', () => {
 			this.toggleMenuSidebar(false);
 		});
 	}
 
-	const menuMobileToggleButtons = document.querySelectorAll(
-		'.menu-mobile-toggle'
-	);
+	const menuMobileToggleButtons = doc.querySelectorAll('.menu-mobile-toggle');
 	addEvent(menuMobileToggleButtons, 'click', (event) => {
 		this.toggleMenuSidebar(
 			!event.target.parentElement.classList.contains('is-active'),
@@ -58,7 +57,7 @@ HFG.prototype.init = function (skipSidebar = false) {
 	/**
 	 * When click to outside of menu sidebar.
 	 */
-	const overlay = document.querySelector('.header-menu-sidebar-overlay');
+	const overlay = doc.querySelector('.header-menu-sidebar-overlay');
 	if (overlay) {
 		addEvent(
 			overlay,
@@ -77,36 +76,37 @@ HFG.prototype.init = function (skipSidebar = false) {
  * @param {Element} target
  */
 HFG.prototype.toggleMenuSidebar = function (toggle, target = null) {
+	const doc = window.document;
 	const TOGGLE_CLASS_CONTAINER = '.menu-mobile-toggle';
-	const buttonsContainer = document.querySelectorAll(TOGGLE_CLASS_CONTAINER);
-	removeClass(document.body, sidebarClasses[1]);
+	const buttonsContainer = doc.querySelectorAll(TOGGLE_CLASS_CONTAINER);
+	removeClass(doc.body, sidebarClasses[1]);
 
 	/**
 	 * Elements to apply aria-hidden on
 	 */
-	const ariaShowOnToggle = document.querySelectorAll(
+	const ariaShowOnToggle = doc.querySelectorAll(
 		'#header-menu-sidebar, .hfg-ov'
 	);
-	const ariaHideOnToggle = document.querySelectorAll(
+	const ariaHideOnToggle = doc.querySelectorAll(
 		'.neve-skip-link, #content, .scroll-to-top, #site-footer, .header--row'
 	);
 
 	if (
 		(!NeveProperties.isCustomize &&
-			document.body.classList.contains(sidebarClasses[0])) ||
+			doc.body.classList.contains(sidebarClasses[0])) ||
 		toggle === false
 	) {
-		const navClickaway = document.querySelector('.nav-clickaway-overlay');
+		const navClickaway = doc.querySelector('.nav-clickaway-overlay');
 		if (navClickaway !== null) {
 			navClickaway.parentNode.removeChild(navClickaway);
 		}
-		addClass(document.body, sidebarClasses[1]);
-		removeClass(document.body, sidebarClasses[0]);
+		addClass(doc.body, sidebarClasses[1]);
+		removeClass(doc.body, sidebarClasses[0]);
 		removeClass(buttonsContainer, sidebarClasses[2]);
 		// Remove the hiding class after 1 second.
 		setTimeout(
 			function () {
-				removeClass(document.body, sidebarClasses[1]);
+				removeClass(doc.body, sidebarClasses[1]);
 			}.bind(this),
 			1000
 		);
@@ -117,17 +117,15 @@ HFG.prototype.toggleMenuSidebar = function (toggle, target = null) {
 		toggleAria(ariaHideOnToggle, false);
 		toggleAria(ariaShowOnToggle);
 		// Remove focus trap when closing.
-		document.dispatchEvent(new CustomEvent(NV_FOCUS_TRAP_END));
+		doc.dispatchEvent(new CustomEvent(NV_FOCUS_TRAP_END));
 	} else {
-		addClass(document.body, sidebarClasses[0]);
+		addClass(doc.body, sidebarClasses[0]);
 		addClass(buttonsContainer, sidebarClasses[2]);
 		if (target) {
-			document.dispatchEvent(
+			doc.dispatchEvent(
 				new CustomEvent(NV_FOCUS_TRAP_START, {
 					detail: {
-						container: document.getElementById(
-							'header-menu-sidebar'
-						),
+						container: doc.getElementById('header-menu-sidebar'),
 						close: closeNavSelector,
 						firstFocus: closeNavSelector + ',.menu-item a',
 						backFocus: target,

assets/js/src/frontend/navigation.js

@@ -29,14 +29,16 @@ export const initNavigation = () => {
  */
 export const repositionDropdowns = () => {
 	const { isRTL } = NeveProperties;
-	const dropDowns =
-		document.querySelectorAll('.sub-menu, .minimal .nv-nav-search') || [];
+	const dropDowns = document.querySelectorAll(
+		'.sub-menu, .minimal .nv-nav-search'
+	);
 
 	if (dropDowns.length === 0) return;
 
 	const windowWidth = window.innerWidth;
+
 	dropDowns.forEach((dropDown) => {
-		const bounding = dropDown.getBoundingClientRect(),
+		let bounding = dropDown.getBoundingClientRect(),
 			rightDist = bounding.left;
 
 		if (rightDist < 0) {
@@ -48,6 +50,19 @@ export const repositionDropdowns = () => {
 			dropDown.style.right = isRTL ? 0 : '100%';
 			dropDown.style.left = 'auto';
 		}
+
+		// Recalculate bounding after we've made adjustments.
+		bounding = dropDown.getBoundingClientRect();
+		rightDist = bounding.left;
+
+		if (rightDist < 0 || rightDist + bounding.width >= windowWidth) {
+			// Calculate how much should we offset the dropdown to make it fit.
+			dropDown.style.transform =
+				'translateX(' +
+				(isRTL ? '-' : '') +
+				(Math.abs(rightDist) + 20) +
+				'px)';
+		}
 	});
 	if (typeof menuCalcEvent !== 'undefined') {
 		window.dispatchEvent(menuCalcEvent);
@@ -171,15 +186,16 @@ function startFocusTrap(event) {
  * Handle searches.
  */
 function handleSearch() {
-	const navSearch = document.querySelectorAll('.nv-nav-search') || [],
-		navItem = document.querySelectorAll('.menu-item-nav-search') || [],
-		close = document.querySelectorAll('.close-responsive-search') || [];
+	const doc = window.document;
+	const navSearch = doc.querySelectorAll('.nv-nav-search') || [],
+		navItem = doc.querySelectorAll('.menu-item-nav-search') || [],
+		close = doc.querySelectorAll('.close-responsive-search') || [];
 	addEvent(navItem, 'click', (e, searchItem) => {
 		e.preventDefault();
 		e.stopPropagation();
 		toggleClass(searchItem, strings[1]);
 		createNavOverlay(searchItem, strings[1]);
-		document.dispatchEvent(
+		doc.dispatchEvent(
 			new CustomEvent(NV_FOCUS_TRAP_START, {
 				detail: {
 					container: searchItem.querySelector('.nv-nav-search'),
@@ -196,7 +212,7 @@ function handleSearch() {
 	addEvent(close, 'click', (e) => {
 		e.preventDefault();
 		removeClass(navItem, strings[1]);
-		const overlay = document.querySelector(`.${strings[2]}`);
+		const overlay = doc.querySelector(`.${strings[2]}`);
 		if (overlay === null) {
 			return;
 		}

inc/admin/dashboard/main.php

@@ -383,6 +383,8 @@ private function get_localization() {
 			'canInstallPlugins'       => current_user_can( 'install_plugins' ),
 			'canActivatePlugins'      => current_user_can( 'activate_plugins' ),
 			'deal'                    => ! defined( 'NEVE_PRO_VERSION' ) ? $offer->get_localized_data() : array(),
+			'rootUrl'                 => get_site_url(),
+			'daysSinceInstall'        => round( ( time() - get_option( 'neve_install', 0 ) ) / DAY_IN_SECONDS ),
 		];
 
 		if ( defined( 'NEVE_PRO_PATH' ) ) {