@wordpress/components 29.1.1 → 29.2.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 29.2.0 (2025-01-15)
+
+### Internal
+
+-   `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).
+
+### Bug Fixes
+
+-   `CircularOptionPicker`, `ColorPalette`: Fix usage of tooltip in the Circular option picker. ([#68602](https://github.com/WordPress/gutenberg/pull/68602)).
+-   `InputControl`: Ensures email and url inputs have consistent LTR alignment in RTL languages ([#68188](https://github.com/WordPress/gutenberg/pull/68188)).
+
 ## 29.1.0 (2025-01-02)
 
 ### Enhancements
@@ -10,6 +21,8 @@
 -   `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)).
 -   `Heading`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
 -   `Text`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
+-   `Heading`: Revert text contrast fix for dark mode with optimizeReadabilityFor ([#68472](https://github.com/WordPress/gutenberg/pull/68472)).
+-   `Text`: Revert text contrast fix for dark mode with optimizeReadabilityFor ([#68472](https://github.com/WordPress/gutenberg/pull/68472)).
 
 ### Deprecations
 
@@ -179,7 +192,7 @@
 
 -   `Tabs`: remove internal custom logic ([#66097](https://github.com/WordPress/gutenberg/pull/66097)).
 -   `Tabs`: add props to control active tab item ([#66223](https://github.com/WordPress/gutenberg/pull/66223)).
--   `Tabs`: restore vertical alignent for tabs content ([#66215](https://github.com/WordPress/gutenberg/pull/66215)).
+-   `Tabs`: restore vertical alignment for tabs content ([#66215](https://github.com/WordPress/gutenberg/pull/66215)).
 -   `Tabs`: fix indicator animation ([#66198](https://github.com/WordPress/gutenberg/pull/66198)).
 -   `Tabs`: update indicator more reactively ([#66207](https://github.com/WordPress/gutenberg/pull/66207)).
 -   `Tabs` and `TabPanel`: Fix arrow key navigation in RTL ([#66201](https://github.com/WordPress/gutenberg/pull/66201)).
@@ -515,7 +528,7 @@
 -   `Tabs`: Vertical Tabs should be 40px min height. ([#63446](https://github.com/WordPress/gutenberg/pull/63446)).
 -   `ColorPicker`: Use `minimal` variant for `SelectControl` ([#63676](https://github.com/WordPress/gutenberg/pull/63676)).
 -   `Tabs`: keep full opacity of focus ring and remove hover styles on disabled tabs ([#63754](https://github.com/WordPress/gutenberg/pull/63754)).
--   `Placeholder`: Remove unnecssary `placeholder-style` Sass mixin ([#63885](https://github.com/WordPress/gutenberg/pull/63885)).
+-   `Placeholder`: Remove unnecessary `placeholder-style` Sass mixin ([#63885](https://github.com/WordPress/gutenberg/pull/63885)).
 
 ### Documentation
 
@@ -1582,7 +1595,7 @@
 
 -   `TabPanel`: support manual tab activation ([#46004](https://github.com/WordPress/gutenberg/pull/46004)).
 -   `TabPanel`: support disabled prop for tab buttons ([#46471](https://github.com/WordPress/gutenberg/pull/46471)).
--   `BaseControl`: Add `useBaseControlProps` hook to help generate id-releated props ([#46170](https://github.com/WordPress/gutenberg/pull/46170)).
+-   `BaseControl`: Add `useBaseControlProps` hook to help generate id-related props ([#46170](https://github.com/WordPress/gutenberg/pull/46170)).
 
 ### Bug Fixes
 
@@ -1605,8 +1618,8 @@
 -   `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201)).
 -   `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681).
 -   Lighten the border color on control components ([#46252](https://github.com/WordPress/gutenberg/pull/46252)).
--   `Popover`: Prevent unnecessary paint when scrolling by using transform instead of top/left positionning ([#46187](https://github.com/WordPress/gutenberg/pull/46187)).
--   `CircularOptionPicker`: Prevent unecessary paint on hover ([#46197](https://github.com/WordPress/gutenberg/pull/46197)).
+-   `Popover`: Prevent unnecessary paint when scrolling by using transform instead of top/left positioning ([#46187](https://github.com/WordPress/gutenberg/pull/46187)).
+-   `CircularOptionPicker`: Prevent unnecessary paint on hover ([#46197](https://github.com/WordPress/gutenberg/pull/46197)).
 
 ### Experimental
 
@@ -2452,7 +2465,7 @@
 
 ### Bug Fixes
 
--   Improve accessibility and visibility in `ColorPallete` ([#36925](https://github.com/WordPress/gutenberg/pull/36925))
+-   Improve accessibility and visibility in `ColorPalette` ([#36925](https://github.com/WordPress/gutenberg/pull/36925))
 
 ## 19.1.3 (2021-12-06)
 

package/CONTRIBUTING.md

@@ -411,7 +411,7 @@ export default MyComponent;
 
 On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
 
-<!-- TODO: add to the previous paragraph once the composision section gets added to this document.
+<!-- TODO: add to the previous paragraph once the compositions section gets added to this document.
 (more details about polymorphism can be found above in the "Components composition" section). -->
 
 ## Styling
@@ -550,7 +550,7 @@ export function useCardBody( props ) {
 	// Read any derived registered prop from the Context System in the `CardBody` namespace.
 	// If a `CardBody` component is rendered as a child of a `Card` component, the value of
 	// the `size` prop will be the one set by the parent `Card` component via the Context
-	// System (unless the prop gets explicitely set on the `CardBody` component).
+	// System (unless the prop gets explicitly set on the `CardBody` component).
 	const { size = 'medium', ...otherDerivedProps } = useContextSystem(
 		props,
 		'CardBody'
@@ -759,13 +759,13 @@ function NewComponentImplementation( props ) {
 
 In case that is not possible (eg. too difficult to reconciliate new and legacy implementations, or impossible to preserve backward compatibility), then the legacy implementation can stay as-is.
 
-In any case, extra attention should be payed to legacy component families made of two or more subcomponents. It is possible, in fact, that the a legacy subcomponent is used as a parent / child of a subcomponent from the new version (this can happen, for example, when Gutenberg allows third party developers to inject React components via Slot/Fill). To avoid incompatibility issues and unexpected behavior, there should be some code in the components warning when the above scenario happens — or even better, aliasing to the correct version of the component.
+In any case, extra attention should be paid to legacy component families made of two or more subcomponents. It is possible, in fact, that the a legacy subcomponent is used as a parent / child of a subcomponent from the new version (this can happen, for example, when Gutenberg allows third party developers to inject React components via Slot/Fill). To avoid incompatibility issues and unexpected behavior, there should be some code in the components warning when the above scenario happens — or even better, aliasing to the correct version of the component.
 
 ##### Naming
 
 When it comes to naming the newly added component, there are two options.
 
-If there is a good reason for it, pick a new name for the component. For example, some legacy components have names that don't correspond to the corrent name of UI widget that they implement (for example, `TabPanel` should be called `Tabs`, and `Modal` should be called `Dialog`).
+If there is a good reason for it, pick a new name for the component. For example, some legacy components have names that don't correspond to the current name of UI widget that they implement (for example, `TabPanel` should be called `Tabs`, and `Modal` should be called `Dialog`).
 
 Alternatively, version the component name. For example, the new version of `Component` could be called `ComponentV2`. This also applies for namespaced subcomponents (ie. `ComponentV2.SubComponent`).
 

package/README.md

@@ -33,7 +33,7 @@ In non-WordPress projects, link to the `build-style/style.css` file directly, it
 
 By default, the `Popover` component will render within an extra element appended to the body of the document.
 
-If you want to precisely contol where the popovers render, you will need to use the `Popover.Slot` component.
+If you want to precisely control where the popovers render, you will need to use the `Popover.Slot` component.
 
 The following example illustrates how you can wrap a component using a
 `Popover` and have those popovers render to a single location in the DOM.

package/build/badge/index.js

@@ -21,36 +21,40 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
+/**
+ * Returns an icon based on the badge context.
+ *
+ * @return The corresponding icon for the provided context.
+ */function contextBasedIcon(intent = 'default') {
+  switch (intent) {
+    case 'info':
+      return _icons.info;
+    case 'success':
+      return _icons.published;
+    case 'warning':
+      return _icons.caution;
+    case 'error':
+      return _icons.error;
+    default:
+      return null;
+  }
+}
 function Badge({
   className,
   intent = 'default',
   children,
   ...props
 }) {
-  /**
-   * Returns an icon based on the badge context.
-   *
-   * @return The corresponding icon for the provided context.
-   */
-  function contextBasedIcon() {
-    switch (intent) {
-      case 'info':
-        return _icons.info;
-      case 'success':
-        return _icons.published;
-      case 'warning':
-        return _icons.caution;
-      case 'error':
-        return _icons.error;
-      default:
-        return null;
-    }
-  }
+  const icon = contextBasedIcon(intent);
+  const hasIcon = !!icon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-    className: (0, _clsx.default)('components-badge', `is-${intent}`, intent !== 'default' && 'has-icon', className),
+    className: (0, _clsx.default)('components-badge', className, {
+      [`is-${intent}`]: intent,
+      'has-icon': hasIcon
+    }),
     ...props,
-    children: [intent !== 'default' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
-      icon: contextBasedIcon(),
+    children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+      icon: icon,
       size: 16,
       fill: "currentColor",
       className: "components-badge__icon"

package/build/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_icon","_jsxRuntime","Badge","className","intent","children","props","contextBasedIcon","info","published","caution","error","jsxs","clsx","jsx","default","icon","size","fill","_default","exports"],"sources":["@wordpress/components/src/badge/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { info, caution, error, published } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { BadgeProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Icon from '../icon';\n\nfunction Badge( {\n\tclassName,\n\tintent = 'default',\n\tchildren,\n\t...props\n}: WordPressComponentProps< BadgeProps, 'span', false > ) {\n\t/**\n\t * Returns an icon based on the badge context.\n\t *\n\t * @return The corresponding icon for the provided context.\n\t */\n\tfunction contextBasedIcon() {\n\t\tswitch ( intent ) {\n\t\t\tcase 'info':\n\t\t\t\treturn info;\n\t\t\tcase 'success':\n\t\t\t\treturn published;\n\t\t\tcase 'warning':\n\t\t\t\treturn caution;\n\t\t\tcase 'error':\n\t\t\t\treturn error;\n\t\t\tdefault:\n\t\t\t\treturn null;\n\t\t}\n\t}\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-badge',\n\t\t\t\t`is-${ intent }`,\n\t\t\t\tintent !== 'default' && 'has-icon',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ intent !== 'default' && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ contextBasedIcon() }\n\t\t\t\t\tsize={ 16 }\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tclassName=\"components-badge__icon\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<span className=\"components-badge__content\">{ children }</span>\n\t\t</span>\n\t);\n}\n\nexport default Badge;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAOA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA2B,IAAAG,WAAA,GAAAH,OAAA;AAf3B;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASI,KAAKA,CAAE;EACfC,SAAS;EACTC,MAAM,GAAG,SAAS;EAClBC,QAAQ;EACR,GAAGC;AACkD,CAAC,EAAG;EACzD;AACD;AACA;AACA;AACA;EACC,SAASC,gBAAgBA,CAAA,EAAG;IAC3B,QAASH,MAAM;MACd,KAAK,MAAM;QACV,OAAOI,WAAI;MACZ,KAAK,SAAS;QACb,OAAOC,gBAAS;MACjB,KAAK,SAAS;QACb,OAAOC,cAAO;MACf,KAAK,OAAO;QACX,OAAOC,YAAK;MACb;QACC,OAAO,IAAI;IACb;EACD;EAEA,oBACC,IAAAV,WAAA,CAAAW,IAAA;IACCT,SAAS,EAAG,IAAAU,aAAI,EACf,kBAAkB,EAClB,MAAOT,MAAM,EAAG,EAChBA,MAAM,KAAK,SAAS,IAAI,UAAU,EAClCD,SACD,CAAG;IAAA,GACEG,KAAK;IAAAD,QAAA,GAERD,MAAM,KAAK,SAAS,iBACrB,IAAAH,WAAA,CAAAa,GAAA,EAACd,KAAA,CAAAe,OAAI;MACJC,IAAI,EAAGT,gBAAgB,CAAC,CAAG;MAC3BU,IAAI,EAAG,EAAI;MACXC,IAAI,EAAC,cAAc;MACnBf,SAAS,EAAC;IAAwB,CAClC,CACD,eACD,IAAAF,WAAA,CAAAa,GAAA;MAAMX,SAAS,EAAC,2BAA2B;MAAAE,QAAA,EAAGA;IAAQ,CAAQ,CAAC;EAAA,CAC1D,CAAC;AAET;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAL,OAAA,GAEcb,KAAK","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_icon","_jsxRuntime","contextBasedIcon","intent","info","published","caution","error","Badge","className","children","props","icon","hasIcon","jsxs","clsx","jsx","default","size","fill","_default","exports"],"sources":["@wordpress/components/src/badge/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { info, caution, error, published } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { BadgeProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Icon from '../icon';\n\n/**\n * Returns an icon based on the badge context.\n *\n * @return The corresponding icon for the provided context.\n */\nfunction contextBasedIcon( intent: BadgeProps[ 'intent' ] = 'default' ) {\n\tswitch ( intent ) {\n\t\tcase 'info':\n\t\t\treturn info;\n\t\tcase 'success':\n\t\t\treturn published;\n\t\tcase 'warning':\n\t\t\treturn caution;\n\t\tcase 'error':\n\t\t\treturn error;\n\t\tdefault:\n\t\t\treturn null;\n\t}\n}\n\nfunction Badge( {\n\tclassName,\n\tintent = 'default',\n\tchildren,\n\t...props\n}: WordPressComponentProps< BadgeProps, 'span', false > ) {\n\tconst icon = contextBasedIcon( intent );\n\tconst hasIcon = !! icon;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx( 'components-badge', className, {\n\t\t\t\t[ `is-${ intent }` ]: intent,\n\t\t\t\t'has-icon': hasIcon,\n\t\t\t} ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ hasIcon && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tsize={ 16 }\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tclassName=\"components-badge__icon\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<span className=\"components-badge__content\">{ children }</span>\n\t\t</span>\n\t);\n}\n\nexport default Badge;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAOA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA2B,IAAAG,WAAA,GAAAH,OAAA;AAf3B;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,GACA,SAASI,gBAAgBA,CAAEC,MAA8B,GAAG,SAAS,EAAG;EACvE,QAASA,MAAM;IACd,KAAK,MAAM;MACV,OAAOC,WAAI;IACZ,KAAK,SAAS;MACb,OAAOC,gBAAS;IACjB,KAAK,SAAS;MACb,OAAOC,cAAO;IACf,KAAK,OAAO;MACX,OAAOC,YAAK;IACb;MACC,OAAO,IAAI;EACb;AACD;AAEA,SAASC,KAAKA,CAAE;EACfC,SAAS;EACTN,MAAM,GAAG,SAAS;EAClBO,QAAQ;EACR,GAAGC;AACkD,CAAC,EAAG;EACzD,MAAMC,IAAI,GAAGV,gBAAgB,CAAEC,MAAO,CAAC;EACvC,MAAMU,OAAO,GAAG,CAAC,CAAED,IAAI;EAEvB,oBACC,IAAAX,WAAA,CAAAa,IAAA;IACCL,SAAS,EAAG,IAAAM,aAAI,EAAE,kBAAkB,EAAEN,SAAS,EAAE;MAChD,CAAE,MAAON,MAAM,EAAG,GAAIA,MAAM;MAC5B,UAAU,EAAEU;IACb,CAAE,CAAG;IAAA,GACAF,KAAK;IAAAD,QAAA,GAERG,OAAO,iBACR,IAAAZ,WAAA,CAAAe,GAAA,EAAChB,KAAA,CAAAiB,OAAI;MACJL,IAAI,EAAGA,IAAM;MACbM,IAAI,EAAG,EAAI;MACXC,IAAI,EAAC,cAAc;MACnBV,SAAS,EAAC;IAAwB,CAClC,CACD,eACD,IAAAR,WAAA,CAAAe,GAAA;MAAMP,SAAS,EAAC,2BAA2B;MAAAC,QAAA,EAAGA;IAAQ,CAAQ,CAAC;EAAA,CAC1D,CAAC;AAET;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEcT,KAAK","ignoreList":[]}

package/build/circular-option-picker/circular-option-picker-option.js

@@ -12,7 +12,6 @@ var _icons = require("@wordpress/icons");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
 var _button = _interopRequireDefault(require("../button"));
 var _composite = require("../composite");
-var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -29,12 +28,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 function UnforwardedOptionAsButton(props, forwardedRef) {
   const {
     isPressed,
+    label,
     ...additionalProps
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
     ...additionalProps,
     "aria-pressed": isPressed,
-    ref: forwardedRef
+    ref: forwardedRef,
+    label: label
   });
 }
 const OptionAsButton = (0, _element.forwardRef)(UnforwardedOptionAsButton);
@@ -42,6 +43,7 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   const {
     id,
     isSelected,
+    label,
     ...additionalProps
   } = props;
   const {
@@ -61,7 +63,8 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
       ...additionalProps,
       role: "option",
       "aria-selected": !!isSelected,
-      ref: forwardedRef
+      ref: forwardedRef,
+      label: label
     }),
     id: id
   });
@@ -88,17 +91,16 @@ function Option({
   const isListbox = setActiveId !== undefined;
   const optionControl = isListbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsOption, {
     ...commonProps,
+    label: tooltipText,
     isSelected: isSelected
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsButton, {
     ...commonProps,
+    label: tooltipText,
     isPressed: isSelected
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _clsx.default)(className, 'components-circular-option-picker__option-wrapper'),
-    children: [tooltipText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
-      text: tooltipText,
-      children: optionControl
-    }) : optionControl, isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+    children: [optionControl, isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
       icon: _icons.check,
       ...selectedIconProps
     })]

package/build/circular-option-picker/circular-option-picker-option.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","useContext","CircularOptionPickerContext","useEffect","window","setTimeout","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useInstanceId","commonProps","__next40pxDefaultSize","isListbox","undefined","optionControl","jsxs","clsx","children","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, setActiveId } = useContext( CircularOptionPickerContext );\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t__next40pxDefaultSize: true,\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption { ...commonProps } isSelected={ isSelected } />\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","label","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","useContext","CircularOptionPickerContext","useEffect","window","setTimeout","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useInstanceId","commonProps","__next40pxDefaultSize","isListbox","undefined","optionControl","jsxs","clsx","children","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t\tlabel?: string;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, label, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t\tlabel={ label }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tlabel?: string;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, label, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, setActiveId } = useContext( CircularOptionPickerContext );\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t__next40pxDefaultSize: true,\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tlabel={ tooltipText }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton\n\t\t\t{ ...commonProps }\n\t\t\tlabel={ tooltipText }\n\t\t\tisPressed={ isSelected }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ optionControl }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/circular-option-picker/circular-option-picker.js

@@ -51,7 +51,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * 						style={ { backgroundColor: color, color } }
  * 						isSelected={ index === currentColor }
  * 						onClick={ () => setCurrentColor( index ) }
- * 						aria-label={ name }
  * 					/>
  * 				);
  * 			} ) }

package/build/circular-option-picker/circular-option-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_element","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","activeId","setActiveId","useState","undefined","contextValue","useMemo","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","focusLoop","rtl","isRTL","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst [ activeId, setActiveId ] = useState< string | null | undefined >(\n\t\tundefined\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t\tactiveId,\n\t\t\tsetActiveId,\n\t\t} ),\n\t\t[ baseId, activeId, setActiveId ]\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tfocusLoop={ loop }\n\t\t\t\t\trtl={ isRTL() }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tactiveId={ activeId }\n\t\t\t\t\tsetActiveId={ setActiveId }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t} ),\n\t\t[ baseId ]\n\t);\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ clsx( 'components-circular-option-picker', className ) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_element","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","activeId","setActiveId","useState","undefined","contextValue","useMemo","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","focusLoop","rtl","isRTL","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst [ activeId, setActiveId ] = useState< string | null | undefined >(\n\t\tundefined\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t\tactiveId,\n\t\t\tsetActiveId,\n\t\t} ),\n\t\t[ baseId, activeId, setActiveId ]\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tfocusLoop={ loop }\n\t\t\t\t\trtl={ isRTL() }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tactiveId={ activeId }\n\t\t\t\t\tsetActiveId={ setActiveId }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t} ),\n\t\t[ baseId ]\n\t);\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ clsx( 'components-circular-option-picker', className ) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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","ignoreList":[]}

package/build/color-palette/index.js

@@ -64,12 +64,7 @@ function SinglePalette({
           backgroundColor: color,
           color
         },
-        onClick: isSelected ? clearColor : () => onChange(color, index),
-        "aria-label": name ?
-        // translators: %s: The name of the color e.g: "vivid red".
-        (0, _i18n.sprintf)((0, _i18n.__)('Color: %s'), name) :
-        // translators: %s: color hex code e.g: "#f00".
-        (0, _i18n.sprintf)((0, _i18n.__)('Color code: %s'), color)
+        onClick: isSelected ? clearColor : () => onChange(color, index)
       }, `${color}-${index}`);
     });
   }, [colors, value, onChange, clearColor]);

package/build/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_clsx","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","_jsxRuntime","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","jsx","default","Option","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","children","colorPalette","id","jsxs","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","accessibleWhenDisabled","disabled","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","clsx","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction\n\t\t\tonClick={ clearColor }\n\t\t\taccessibleWhenDisabled\n\t\t\tdisabled={ ! value }\n\t\t>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_clsx","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","_jsxRuntime","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","jsx","default","Option","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","children","colorPalette","id","jsxs","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","accessibleWhenDisabled","disabled","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","clsx","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction\n\t\t\tonClick={ clearColor }\n\t\t\taccessibleWhenDisabled\n\t\t\tdisabled={ ! value }\n\t\t>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}

package/build/font-size-picker/index.native.js

@@ -118,7 +118,7 @@ function FontSizePicker({
             })
           })
         }, "default"), fontSizes.map((item, index) => {
-          // Only display a choice that we can currenly select.
+          // Only display a choice that we can currently select.
           if (!parseFloat(item.sizePx)) {
             return null;
           }

package/build/font-size-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_native","_element","_icons","_i18n","_getPxFromCssUnit","_interopRequireDefault","_unitControl","_interopRequireWildcard","_style","_bottomSheet","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DEFAULT_FONT_SIZE","FontSizePicker","fontSizes","disableCustomFontSizes","onChange","value","selectedValue","_fontSizes$find","showSubSheet","setShowSubSheet","useState","navigation","useNavigation","height","width","useWindowDimensions","cssUnitOptions","fontSize","selectedPxValue","getPxFromCssUnit","onChangeValue","goBack","selectedOption","find","option","sizePx","name","openSubSheet","navigate","BottomSheet","SubSheet","screenName","label","__","units","useCustomUnits","availableUnits","accessibilityLabel","sprintf","jsx","navigationButton","Cell","separatorType","_x","onPress","accessibilityRole","accessibilityHint","children","Icon","icon","chevronRight","showSheet","jsxs","Fragment","NavBar","BackButton","Heading","View","style","styles","customActionButton","undefined","leftAlign","check","map","item","index","parseFloat","subLabel","min","max","step","nextSize","_default","exports"],"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, useWindowDimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport styles from './style.scss';\nimport BottomSheet from '../mobile/bottom-sheet';\n\nconst DEFAULT_FONT_SIZE = 16;\n\nfunction FontSizePicker( {\n\tfontSizes = [],\n\tdisableCustomFontSizes = false,\n\tonChange,\n\tvalue: selectedValue,\n} ) {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst { height, width } = useWindowDimensions();\n\tconst cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };\n\t// We need to always convert to px units because the selected value\n\t// could be coming from the web where it could be stored as a different unit.\n\tconst selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = fontSizes.find(\n\t\t( option ) => option.sizePx === selectedPxValue\n\t) ?? { name: 'Custom' };\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\tconst label = __( 'Font Size' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],\n\t} );\n\n\tconst accessibilityLabel = sprintf(\n\t\t// translators: %s: Font size name e.g. Small\n\t\t__( 'Font Size, %s' ),\n\t\tselectedOption.name\n\t);\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px\n\t\t\t\t\t\t\t\t\t_x( '%1$s (%2$s)', 'font size' ),\n\t\t\t\t\t\t\t\t\tselectedOption.name,\n\t\t\t\t\t\t\t\t\tselectedPxValue\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'Default' )\n\t\t\t\t\t}\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. \"Button width\"\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.name\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles[ 'components-font-size-picker' ] }>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\tonPress={ onChangeValue( undefined ) }\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tkey=\"default\"\n\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\taccessibilityLabel={ __( 'Selected: Default' ) }\n\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t'Double tap to select default font size'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t{ selectedValue === undefined && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t{ fontSizes.map( ( item, index ) => {\n\t\t\t\t\t\t// Only display a choice that we can currenly select.\n\t\t\t\t\t\tif ( ! parseFloat( item.sizePx ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\t\tlabel={ item.name }\n\t\t\t\t\t\t\t\tsubLabel={ item.sizePx }\n\t\t\t\t\t\t\t\tonPress={ onChangeValue( item.sizePx ) }\n\t\t\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\titem.sizePx === selectedValue\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: The selected option.\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\titem.name\n\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t: item.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t\t\t'Double tap to select font size'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t\t\t{ item.sizePx === selectedPxValue && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 200 }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( nextSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n}\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_native","_element","_icons","_i18n","_getPxFromCssUnit","_interopRequireDefault","_unitControl","_interopRequireWildcard","_style","_bottomSheet","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DEFAULT_FONT_SIZE","FontSizePicker","fontSizes","disableCustomFontSizes","onChange","value","selectedValue","_fontSizes$find","showSubSheet","setShowSubSheet","useState","navigation","useNavigation","height","width","useWindowDimensions","cssUnitOptions","fontSize","selectedPxValue","getPxFromCssUnit","onChangeValue","goBack","selectedOption","find","option","sizePx","name","openSubSheet","navigate","BottomSheet","SubSheet","screenName","label","__","units","useCustomUnits","availableUnits","accessibilityLabel","sprintf","jsx","navigationButton","Cell","separatorType","_x","onPress","accessibilityRole","accessibilityHint","children","Icon","icon","chevronRight","showSheet","jsxs","Fragment","NavBar","BackButton","Heading","View","style","styles","customActionButton","undefined","leftAlign","check","map","item","index","parseFloat","subLabel","min","max","step","nextSize","_default","exports"],"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, useWindowDimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport styles from './style.scss';\nimport BottomSheet from '../mobile/bottom-sheet';\n\nconst DEFAULT_FONT_SIZE = 16;\n\nfunction FontSizePicker( {\n\tfontSizes = [],\n\tdisableCustomFontSizes = false,\n\tonChange,\n\tvalue: selectedValue,\n} ) {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst { height, width } = useWindowDimensions();\n\tconst cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };\n\t// We need to always convert to px units because the selected value\n\t// could be coming from the web where it could be stored as a different unit.\n\tconst selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = fontSizes.find(\n\t\t( option ) => option.sizePx === selectedPxValue\n\t) ?? { name: 'Custom' };\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\tconst label = __( 'Font Size' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],\n\t} );\n\n\tconst accessibilityLabel = sprintf(\n\t\t// translators: %s: Font size name e.g. Small\n\t\t__( 'Font Size, %s' ),\n\t\tselectedOption.name\n\t);\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px\n\t\t\t\t\t\t\t\t\t_x( '%1$s (%2$s)', 'font size' ),\n\t\t\t\t\t\t\t\t\tselectedOption.name,\n\t\t\t\t\t\t\t\t\tselectedPxValue\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'Default' )\n\t\t\t\t\t}\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. \"Button width\"\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.name\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles[ 'components-font-size-picker' ] }>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\tonPress={ onChangeValue( undefined ) }\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tkey=\"default\"\n\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\taccessibilityLabel={ __( 'Selected: Default' ) }\n\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t'Double tap to select default font size'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t{ selectedValue === undefined && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t{ fontSizes.map( ( item, index ) => {\n\t\t\t\t\t\t// Only display a choice that we can currently select.\n\t\t\t\t\t\tif ( ! parseFloat( item.sizePx ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\t\tlabel={ item.name }\n\t\t\t\t\t\t\t\tsubLabel={ item.sizePx }\n\t\t\t\t\t\t\t\tonPress={ onChangeValue( item.sizePx ) }\n\t\t\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\titem.sizePx === selectedValue\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: The selected option.\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\titem.name\n\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t: item.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t\t\t'Double tap to select font size'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t\t\t{ item.sizePx === selectedPxValue && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 200 }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( nextSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n}\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}

package/build/higher-order/with-focus-return/index.js

@@ -34,7 +34,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *                describing the component and the
  *                focus return characteristics.
  *
- * @return Higher Order Component with the focus restauration behaviour.
+ * @return Higher Order Component with the focus restoration behaviour.
  */
 var _default = exports.default = (0, _compose.createHigherOrderComponent)(
 // @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types

package/build/higher-order/with-focus-return/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_deprecated","_interopRequireDefault","_jsxRuntime","isComponentLike","object","Component","_default","exports","default","createHigherOrderComponent","options","HoC","onFocusReturn","WrappedComponent","WithFocusReturn","props","ref","useFocusReturn","jsx","children","Provider","deprecated","since","hint"],"sources":["@wordpress/components/src/higher-order/with-focus-return/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Returns true if the given object is component-like. An object is component-\n * like if it is an instance of wp.element.Component, or is a function.\n *\n * @param object Object to test.\n *\n * @return Whether object is component-like.\n */\nfunction isComponentLike( object: any ): object is React.ComponentType {\n\treturn object instanceof Component || typeof object === 'function';\n}\n\ntype Props = {\n\tonFocusReturn?: () => void;\n};\n\n/**\n * Higher Order Component used to be used to wrap disposable elements like\n * sidebars, modals, dropdowns. When mounting the wrapped component, we track a\n * reference to the current active element so we know where to restore focus\n * when the component is unmounted.\n *\n * @param options The component to be enhanced with\n *                focus return behavior, or an object\n *                describing the component and the\n *                focus return characteristics.\n *\n * @return Higher Order Component with the focus restauration behaviour.\n */\nexport default createHigherOrderComponent(\n\t// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types\n\t( options: React.ComponentType | Record< string, unknown > ) => {\n\t\tconst HoC =\n\t\t\t( { onFocusReturn }: Props = {} ) =>\n\t\t\t( WrappedComponent: React.ComponentType ) => {\n\t\t\t\tconst WithFocusReturn = (\n\t\t\t\t\tprops: Record< string, unknown >\n\t\t\t\t) => {\n\t\t\t\t\tconst ref = useFocusReturn( onFocusReturn );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div ref={ ref }>\n\t\t\t\t\t\t\t<WrappedComponent { ...props } />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t};\n\n\t\t\t\treturn WithFocusReturn;\n\t\t\t};\n\n\t\tif ( isComponentLike( options ) ) {\n\t\t\tconst WrappedComponent = options;\n\t\t\treturn HoC()( WrappedComponent );\n\t\t}\n\n\t\treturn HoC( options );\n\t},\n\t'withFocusReturn'\n);\n\nexport const Provider = ( { children }: { children: React.ReactNode } ) => {\n\tdeprecated( 'wp.components.FocusReturnProvider component', {\n\t\tsince: '5.7',\n\t\thint: 'This provider is not used anymore. You can just remove it from your codebase',\n\t} );\n\n\treturn children;\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAL/C;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,SAASK,eAAeA,CAAEC,MAAW,EAAkC;EACtE,OAAOA,MAAM,YAAYC,kBAAS,IAAI,OAAOD,MAAM,KAAK,UAAU;AACnE;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZA,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAae,IAAAC,mCAA0B;AACxC;AACEC,OAAwD,IAAM;EAC/D,MAAMC,GAAG,GACRA,CAAE;IAAEC;EAAqB,CAAC,GAAG,CAAC,CAAC,KAC7BC,gBAAqC,IAAM;IAC5C,MAAMC,eAAe,GACpBC,KAAgC,IAC5B;MACJ,MAAMC,GAAG,GAAG,IAAAC,uBAAc,EAAEL,aAAc,CAAC;MAC3C,oBACC,IAAAV,WAAA,CAAAgB,GAAA;QAAKF,GAAG,EAAGA,GAAK;QAAAG,QAAA,eACf,IAAAjB,WAAA,CAAAgB,GAAA,EAACL,gBAAgB;UAAA,GAAME;QAAK,CAAI;MAAC,CAC7B,CAAC;IAER,CAAC;IAED,OAAOD,eAAe;EACvB,CAAC;EAEF,IAAKX,eAAe,CAAEO,OAAQ,CAAC,EAAG;IACjC,MAAMG,gBAAgB,GAAGH,OAAO;IAChC,OAAOC,GAAG,CAAC,CAAC,CAAEE,gBAAiB,CAAC;EACjC;EAEA,OAAOF,GAAG,CAAED,OAAQ,CAAC;AACtB,CAAC,EACD,iBACD,CAAC;AAEM,MAAMU,QAAQ,GAAGA,CAAE;EAAED;AAAwC,CAAC,KAAM;EAC1E,IAAAE,mBAAU,EAAE,6CAA6C,EAAE;IAC1DC,KAAK,EAAE,KAAK;IACZC,IAAI,EAAE;EACP,CAAE,CAAC;EAEH,OAAOJ,QAAQ;AAChB,CAAC;AAACZ,OAAA,CAAAa,QAAA,GAAAA,QAAA","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_deprecated","_interopRequireDefault","_jsxRuntime","isComponentLike","object","Component","_default","exports","default","createHigherOrderComponent","options","HoC","onFocusReturn","WrappedComponent","WithFocusReturn","props","ref","useFocusReturn","jsx","children","Provider","deprecated","since","hint"],"sources":["@wordpress/components/src/higher-order/with-focus-return/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Returns true if the given object is component-like. An object is component-\n * like if it is an instance of wp.element.Component, or is a function.\n *\n * @param object Object to test.\n *\n * @return Whether object is component-like.\n */\nfunction isComponentLike( object: any ): object is React.ComponentType {\n\treturn object instanceof Component || typeof object === 'function';\n}\n\ntype Props = {\n\tonFocusReturn?: () => void;\n};\n\n/**\n * Higher Order Component used to be used to wrap disposable elements like\n * sidebars, modals, dropdowns. When mounting the wrapped component, we track a\n * reference to the current active element so we know where to restore focus\n * when the component is unmounted.\n *\n * @param options The component to be enhanced with\n *                focus return behavior, or an object\n *                describing the component and the\n *                focus return characteristics.\n *\n * @return Higher Order Component with the focus restoration behaviour.\n */\nexport default createHigherOrderComponent(\n\t// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types\n\t( options: React.ComponentType | Record< string, unknown > ) => {\n\t\tconst HoC =\n\t\t\t( { onFocusReturn }: Props = {} ) =>\n\t\t\t( WrappedComponent: React.ComponentType ) => {\n\t\t\t\tconst WithFocusReturn = (\n\t\t\t\t\tprops: Record< string, unknown >\n\t\t\t\t) => {\n\t\t\t\t\tconst ref = useFocusReturn( onFocusReturn );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div ref={ ref }>\n\t\t\t\t\t\t\t<WrappedComponent { ...props } />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t};\n\n\t\t\t\treturn WithFocusReturn;\n\t\t\t};\n\n\t\tif ( isComponentLike( options ) ) {\n\t\t\tconst WrappedComponent = options;\n\t\t\treturn HoC()( WrappedComponent );\n\t\t}\n\n\t\treturn HoC( options );\n\t},\n\t'withFocusReturn'\n);\n\nexport const Provider = ( { children }: { children: React.ReactNode } ) => {\n\tdeprecated( 'wp.components.FocusReturnProvider component', {\n\t\tsince: '5.7',\n\t\thint: 'This provider is not used anymore. You can just remove it from your codebase',\n\t} );\n\n\treturn children;\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAL/C;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,SAASK,eAAeA,CAAEC,MAAW,EAAkC;EACtE,OAAOA,MAAM,YAAYC,kBAAS,IAAI,OAAOD,MAAM,KAAK,UAAU;AACnE;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZA,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAae,IAAAC,mCAA0B;AACxC;AACEC,OAAwD,IAAM;EAC/D,MAAMC,GAAG,GACRA,CAAE;IAAEC;EAAqB,CAAC,GAAG,CAAC,CAAC,KAC7BC,gBAAqC,IAAM;IAC5C,MAAMC,eAAe,GACpBC,KAAgC,IAC5B;MACJ,MAAMC,GAAG,GAAG,IAAAC,uBAAc,EAAEL,aAAc,CAAC;MAC3C,oBACC,IAAAV,WAAA,CAAAgB,GAAA;QAAKF,GAAG,EAAGA,GAAK;QAAAG,QAAA,eACf,IAAAjB,WAAA,CAAAgB,GAAA,EAACL,gBAAgB;UAAA,GAAME;QAAK,CAAI;MAAC,CAC7B,CAAC;IAER,CAAC;IAED,OAAOD,eAAe;EACvB,CAAC;EAEF,IAAKX,eAAe,CAAEO,OAAQ,CAAC,EAAG;IACjC,MAAMG,gBAAgB,GAAGH,OAAO;IAChC,OAAOC,GAAG,CAAC,CAAC,CAAEE,gBAAiB,CAAC;EACjC;EAEA,OAAOF,GAAG,CAAED,OAAQ,CAAC;AACtB,CAAC,EACD,iBACD,CAAC;AAEM,MAAMU,QAAQ,GAAGA,CAAE;EAAED;AAAwC,CAAC,KAAM;EAC1E,IAAAE,mBAAU,EAAE,6CAA6C,EAAE;IAC1DC,KAAK,EAAE,KAAK;IACZC,IAAI,EAAE;EACP,CAAE,CAAC;EAEH,OAAOJ,QAAQ;AAChB,CAAC;AAACZ,OAAA,CAAAa,QAAA,GAAAA,QAAA","ignoreList":[]}