@wordpress/nux 9.48.0 → 10.0.0

package/build-module/store/selectors.mjs

@@ -1,37 +1,12 @@
 // packages/nux/src/store/selectors.js
-import { createSelector } from "@wordpress/data";
-var getAssociatedGuide = createSelector(
-  (state, tipId) => {
-    for (const tipIds of state.guides) {
-      if (tipIds.includes(tipId)) {
-        const nonDismissedTips = tipIds.filter(
-          (tId) => !Object.keys(
-            state.preferences.dismissedTips
-          ).includes(tId)
-        );
-        const [currentTipId = null, nextTipId = null] = nonDismissedTips;
-        return { tipIds, currentTipId, nextTipId };
-      }
-    }
-    return null;
-  },
-  (state) => [state.guides, state.preferences.dismissedTips]
-);
-function isTipVisible(state, tipId) {
-  if (!state.preferences.areTipsEnabled) {
-    return false;
-  }
-  if (state.preferences.dismissedTips?.hasOwnProperty(tipId)) {
-    return false;
-  }
-  const associatedGuide = getAssociatedGuide(state, tipId);
-  if (associatedGuide && associatedGuide.currentTipId !== tipId) {
-    return false;
-  }
-  return true;
+function getAssociatedGuide() {
+  return null;
 }
-function areTipsEnabled(state) {
-  return state.preferences.areTipsEnabled;
+function isTipVisible() {
+  return false;
+}
+function areTipsEnabled() {
+  return false;
 }
 export {
   areTipsEnabled,

package/build-module/store/selectors.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/store/selectors.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSelector } from '@wordpress/data';\n\n/**\n * An object containing information about a guide.\n *\n * @typedef {Object} NUXGuideInfo\n * @property {string[]} tipIds       Which tips the guide contains.\n * @property {?string}  currentTipId The guide's currently showing tip.\n * @property {?string}  nextTipId    The guide's next tip to show.\n */\n\n/**\n * Returns an object describing the guide, if any, that the given tip is a part\n * of.\n *\n * @param {Object} state Global application state.\n * @param {string} tipId The tip to query.\n *\n * @return {?NUXGuideInfo} Information about the associated guide.\n */\nexport const getAssociatedGuide = createSelector(\n\t( state, tipId ) => {\n\t\tfor ( const tipIds of state.guides ) {\n\t\t\tif ( tipIds.includes( tipId ) ) {\n\t\t\t\tconst nonDismissedTips = tipIds.filter(\n\t\t\t\t\t( tId ) =>\n\t\t\t\t\t\t! Object.keys(\n\t\t\t\t\t\t\tstate.preferences.dismissedTips\n\t\t\t\t\t\t).includes( tId )\n\t\t\t\t);\n\t\t\t\tconst [ currentTipId = null, nextTipId = null ] =\n\t\t\t\t\tnonDismissedTips;\n\t\t\t\treturn { tipIds, currentTipId, nextTipId };\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t},\n\t( state ) => [ state.guides, state.preferences.dismissedTips ]\n);\n\n/**\n * Determines whether or not the given tip is showing. Tips are hidden if they\n * are disabled, have been dismissed, or are not the current tip in any\n * guide that they have been added to.\n *\n * @param {Object} state Global application state.\n * @param {string} tipId The tip to query.\n *\n * @return {boolean} Whether or not the given tip is showing.\n */\nexport function isTipVisible( state, tipId ) {\n\tif ( ! state.preferences.areTipsEnabled ) {\n\t\treturn false;\n\t}\n\n\tif ( state.preferences.dismissedTips?.hasOwnProperty( tipId ) ) {\n\t\treturn false;\n\t}\n\n\tconst associatedGuide = getAssociatedGuide( state, tipId );\n\tif ( associatedGuide && associatedGuide.currentTipId !== tipId ) {\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n\n/**\n * Returns whether or not tips are globally enabled.\n *\n * @param {Object} state Global application state.\n *\n * @return {boolean} Whether tips are globally enabled.\n */\nexport function areTipsEnabled( state ) {\n\treturn state.preferences.areTipsEnabled;\n}\n"],
-  "mappings": ";AAGA,SAAS,sBAAsB;AAoBxB,IAAM,qBAAqB;AAAA,EACjC,CAAE,OAAO,UAAW;AACnB,eAAY,UAAU,MAAM,QAAS;AACpC,UAAK,OAAO,SAAU,KAAM,GAAI;AAC/B,cAAM,mBAAmB,OAAO;AAAA,UAC/B,CAAE,QACD,CAAE,OAAO;AAAA,YACR,MAAM,YAAY;AAAA,UACnB,EAAE,SAAU,GAAI;AAAA,QAClB;AACA,cAAM,CAAE,eAAe,MAAM,YAAY,IAAK,IAC7C;AACD,eAAO,EAAE,QAAQ,cAAc,UAAU;AAAA,MAC1C;AAAA,IACD;AAEA,WAAO;AAAA,EACR;AAAA,EACA,CAAE,UAAW,CAAE,MAAM,QAAQ,MAAM,YAAY,aAAc;AAC9D;AAYO,SAAS,aAAc,OAAO,OAAQ;AAC5C,MAAK,CAAE,MAAM,YAAY,gBAAiB;AACzC,WAAO;AAAA,EACR;AAEA,MAAK,MAAM,YAAY,eAAe,eAAgB,KAAM,GAAI;AAC/D,WAAO;AAAA,EACR;AAEA,QAAM,kBAAkB,mBAAoB,OAAO,KAAM;AACzD,MAAK,mBAAmB,gBAAgB,iBAAiB,OAAQ;AAChE,WAAO;AAAA,EACR;AAEA,SAAO;AACR;AASO,SAAS,eAAgB,OAAQ;AACvC,SAAO,MAAM,YAAY;AAC1B;",
+  "sourcesContent": ["/**\n * An object containing information about a guide.\n *\n * @typedef {Object} NUXGuideInfo\n * @property {string[]} tipIds       Which tips the guide contains.\n * @property {?string}  currentTipId The guide's currently showing tip.\n * @property {?string}  nextTipId    The guide's next tip to show.\n */\n\n/**\n * Returns null because the deprecated NUX package no longer displays guides.\n *\n * @return {null} No associated guide.\n */\nexport function getAssociatedGuide() {\n\treturn null;\n}\n\n/**\n * Returns false because the deprecated NUX package no longer displays tips.\n *\n * @return {boolean} Whether or not the given tip is showing.\n */\nexport function isTipVisible() {\n\treturn false;\n}\n\n/**\n * Returns false because the deprecated NUX package no longer displays tips.\n *\n * @return {boolean} Whether tips are globally enabled.\n */\nexport function areTipsEnabled() {\n\treturn false;\n}\n"],
+  "mappings": ";AAcO,SAAS,qBAAqB;AACpC,SAAO;AACR;AAOO,SAAS,eAAe;AAC9B,SAAO;AACR;AAOO,SAAS,iBAAiB;AAChC,SAAO;AACR;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -1,186 +1,4 @@
 /**
- * Breakpoints & Media Queries
- */
-/**
- * Typography
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Breakpoint mixins
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-/**
- * Creates a checkerboard pattern background to indicate transparency.
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
- */
-.nux-dot-tip::before, .nux-dot-tip::after {
-  border-radius: 100%;
-  content: " ";
-  pointer-events: none;
-  position: absolute;
-}
-.nux-dot-tip::before {
-  background: rgba(0, 115, 156, 0.9);
-  opacity: 0.9;
-  height: 24px;
-  right: -12px;
-  top: -12px;
-  transform: scale(0.3333333333);
-  width: 24px;
-}
-@media not (prefers-reduced-motion) {
-  .nux-dot-tip::before {
-    animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
-  }
-}
-.nux-dot-tip::after {
-  background: #00739c;
-  height: 8px;
-  right: -4px;
-  top: -4px;
-  width: 8px;
-}
-@keyframes nux-pulse {
-  100% {
-    background: rgba(0, 115, 156, 0);
-    transform: scale(1);
-  }
-}
-.nux-dot-tip .components-popover__content {
-  width: 350px;
-  padding: 20px 18px;
-}
-@media (min-width: 600px) {
-  .nux-dot-tip .components-popover__content {
-    width: 450px;
-  }
-}
-.nux-dot-tip .components-popover__content .nux-dot-tip__disable {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.nux-dot-tip[data-y-axis=top] {
-  margin-top: -4px;
-}
-.nux-dot-tip[data-y-axis=bottom] {
-  margin-top: 4px;
-}
-.nux-dot-tip[data-y-axis=middle][data-y-axis=left] {
-  margin-right: -4px;
-}
-.nux-dot-tip[data-y-axis=middle][data-y-axis=right] {
-  margin-right: 4px;
-}
-.nux-dot-tip[data-y-axis=top] .components-popover__content {
-  margin-bottom: 20px;
-}
-.nux-dot-tip[data-y-axis=bottom] .components-popover__content {
-  margin-top: 20px;
-}
-.nux-dot-tip[data-y-axis=middle][data-y-axis=left] .components-popover__content {
-  margin-left: 20px;
-}
-.nux-dot-tip[data-y-axis=middle][data-y-axis=right] .components-popover__content {
-  margin-right: 20px;
-}
-.nux-dot-tip[data-y-axis=left], .nux-dot-tip[data-y-axis=center], .nux-dot-tip[data-y-axis=right] {
-  z-index: 1000001;
-}
-@media (max-width: 600px) {
-  .nux-dot-tip[data-y-axis=left] .components-popover__content, .nux-dot-tip[data-y-axis=center] .components-popover__content, .nux-dot-tip[data-y-axis=right] .components-popover__content {
-    align-self: end;
-    right: 5px;
-    margin: 20px 0 0 0;
-    max-width: none !important;
-    position: fixed;
-    left: 5px;
-    width: auto;
-  }
-}
-.nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content {
-  margin-left: 0;
-}
-.nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content {
-  margin-right: 0;
-}
-.nux-dot-tip.components-popover.interface-more-menu-dropdown__content:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content {
-  margin-left: -12px;
-}
-.nux-dot-tip.components-popover.interface-more-menu-dropdown__content:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content {
-  margin-right: -12px;
-}
+ * Intentionally no styles.
+ * This entry point is kept so existing @wordpress/nux style imports continue to resolve.
+ */

package/build-style/style.css

@@ -1,190 +1,4 @@
 /**
- * Breakpoints & Media Queries
- */
-/**
- * Typography
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Breakpoint mixins
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-/**
- * Creates a checkerboard pattern background to indicate transparency.
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
- */
-.nux-dot-tip::before, .nux-dot-tip::after {
-  border-radius: 100%;
-  content: " ";
-  pointer-events: none;
-  position: absolute;
-}
-.nux-dot-tip::before {
-  background: rgba(0, 115, 156, 0.9);
-  opacity: 0.9;
-  height: 24px;
-  left: -12px;
-  top: -12px;
-  transform: scale(0.3333333333);
-  width: 24px;
-}
-@media not (prefers-reduced-motion) {
-  .nux-dot-tip::before {
-    animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
-  }
-}
-.nux-dot-tip::after {
-  background: #00739c;
-  height: 8px;
-  left: -4px;
-  top: -4px;
-  width: 8px;
-}
-@keyframes nux-pulse {
-  100% {
-    background: rgba(0, 115, 156, 0);
-    transform: scale(1);
-  }
-}
-.nux-dot-tip .components-popover__content {
-  width: 350px;
-  padding: 20px 18px;
-}
-@media (min-width: 600px) {
-  .nux-dot-tip .components-popover__content {
-    width: 450px;
-  }
-}
-.nux-dot-tip .components-popover__content .nux-dot-tip__disable {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.nux-dot-tip[data-y-axis=top] {
-  margin-top: -4px;
-}
-.nux-dot-tip[data-y-axis=bottom] {
-  margin-top: 4px;
-}
-.nux-dot-tip[data-y-axis=middle][data-y-axis=left] {
-  margin-left: -4px;
-}
-.nux-dot-tip[data-y-axis=middle][data-y-axis=right] {
-  margin-left: 4px;
-}
-.nux-dot-tip[data-y-axis=top] .components-popover__content {
-  margin-bottom: 20px;
-}
-.nux-dot-tip[data-y-axis=bottom] .components-popover__content {
-  margin-top: 20px;
-}
-.nux-dot-tip[data-y-axis=middle][data-y-axis=left] .components-popover__content {
-  margin-right: 20px;
-}
-.nux-dot-tip[data-y-axis=middle][data-y-axis=right] .components-popover__content {
-  margin-left: 20px;
-}
-.nux-dot-tip[data-y-axis=left], .nux-dot-tip[data-y-axis=center], .nux-dot-tip[data-y-axis=right] {
-  z-index: 1000001;
-}
-@media (max-width: 600px) {
-  .nux-dot-tip[data-y-axis=left] .components-popover__content, .nux-dot-tip[data-y-axis=center] .components-popover__content, .nux-dot-tip[data-y-axis=right] .components-popover__content {
-    align-self: end;
-    left: 5px;
-    margin: 20px 0 0 0;
-    max-width: none !important;
-    position: fixed;
-    right: 5px;
-    width: auto;
-  }
-}
-.nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content {
-  /*!rtl:ignore*/
-  margin-left: 0;
-}
-.nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content {
-  /*!rtl:ignore*/
-  margin-right: 0;
-}
-.nux-dot-tip.components-popover.interface-more-menu-dropdown__content:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content {
-  /*!rtl:ignore*/
-  margin-left: -12px;
-}
-.nux-dot-tip.components-popover.interface-more-menu-dropdown__content:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content {
-  /*!rtl:ignore*/
-  margin-right: -12px;
-}
+ * Intentionally no styles.
+ * This entry point is kept so existing @wordpress/nux style imports continue to resolve.
+ */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@wordpress/nux",
-	"version": "9.48.0",
-	"description": "NUX (New User eXperience) module for WordPress.",
+	"version": "10.0.0",
+	"description": "Deprecated no-op NUX (New User eXperience) compatibility module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
 	"keywords": [
@@ -40,7 +40,6 @@
 		"./package.json": "./package.json",
 		"./build-style/": "./build-style/"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"sideEffects": [
 		"build-style/**",
@@ -53,14 +52,13 @@
 		"build-module/store/index.mjs"
 	],
 	"dependencies": {
-		"@wordpress/base-styles": "^9.1.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
 		"@wordpress/data": "^10.48.0",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/icons": "^13.3.0"
+		"@wordpress/deprecated": "^4.48.0"
+	},
+	"devDependencies": {
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -69,5 +67,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "6da950697117f477a720a1f3adf1eaf860e0d488"
 }

package/src/components/dot-tip/README.md

@@ -1,38 +1,6 @@
 # DotTip
 
-`DotTip` is a React component that renders a single _tip_ on the screen. The tip will point to the React element that `DotTip` is nested within. Each tip is uniquely identified by a string passed to `tipId`.
+`DotTip` is deprecated and kept only as a no-op compatibility component. It always renders `null`.
 
-## Usage
+New code should use `Guide` from `@wordpress/components` to show user guides.
 
-```jsx
-<button onClick={ ... }>
-	Add to Cart
-	<DotTip tipId="acme/add-to-cart">
-		Click here to add the product to your shopping cart.
-	</DotTip>
-</button>
-}
-```
-
-## Props
-
-The component accepts the following props:
-
-### tipId
-
-A string that uniquely identifies the tip. Identifiers should be prefixed with the name of the plugin, followed by a `/`. For example, `acme/add-to-cart`.
-
--   Type: `string`
--   Required: Yes
-
-### position
-
-The direction in which the popover should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"middle"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
-
--   Type: `String`
--   Required: No
--   Default: `"middle right"`
-
-### children
-
-Any React element or elements can be passed as children. They will be rendered within the tip bubble.

package/src/components/dot-tip/index.js

@@ -1,98 +1,10 @@
 /**
- * WordPress dependencies
+ * Deprecated no-op DotTip component.
+ *
+ * @return {null} Nothing.
  */
-import { compose } from '@wordpress/compose';
-import { Popover, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { useCallback, useRef } from '@wordpress/element';
-import { close } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as nuxStore } from '../../store';
-
-function onClick( event ) {
-	// Tips are often nested within buttons. We stop propagation so that clicking
-	// on a tip doesn't result in the button being clicked.
-	event.stopPropagation();
-}
-
-export function DotTip( {
-	position = 'middle right',
-	children,
-	isVisible,
-	hasNextTip,
-	onDismiss,
-	onDisable,
-} ) {
-	const anchorParent = useRef( null );
-	const onFocusOutsideCallback = useCallback(
-		( event ) => {
-			if ( ! anchorParent.current ) {
-				return;
-			}
-			if ( anchorParent.current.contains( event.relatedTarget ) ) {
-				return;
-			}
-			onDisable();
-		},
-		[ onDisable, anchorParent ]
-	);
-	if ( ! isVisible ) {
-		return null;
-	}
-
-	return (
-		<Popover
-			className="nux-dot-tip"
-			position={ position }
-			focusOnMount
-			role="dialog"
-			aria-label={ __( 'Editor tips' ) }
-			onClick={ onClick }
-			onFocusOutside={ onFocusOutsideCallback }
-		>
-			<p>{ children }</p>
-			<p>
-				<Button
-					__next40pxDefaultSize
-					variant="link"
-					onClick={ onDismiss }
-				>
-					{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
-				</Button>
-			</p>
-			<Button
-				size="small"
-				className="nux-dot-tip__disable"
-				icon={ close }
-				label={ __( 'Disable tips' ) }
-				onClick={ onDisable }
-			/>
-		</Popover>
-	);
+export function DotTip() {
+	return null;
 }
 
-export default compose(
-	withSelect( ( select, { tipId } ) => {
-		const { isTipVisible, getAssociatedGuide } = select( nuxStore );
-		const associatedGuide = getAssociatedGuide( tipId );
-		return {
-			isVisible: isTipVisible( tipId ),
-			hasNextTip: !! ( associatedGuide && associatedGuide.nextTipId ),
-		};
-	} ),
-	withDispatch( ( dispatch, { tipId } ) => {
-		const { dismissTip, disableTips } = dispatch( nuxStore );
-		return {
-			onDismiss() {
-				dismissTip( tipId );
-			},
-			onDisable() {
-				disableTips();
-			},
-		};
-	} )
-)( DotTip );
+export default DotTip;