@wordpress/components 27.5.0 → 28.0.0

package/CHANGELOG.md

@@ -2,25 +2,74 @@
 
 ## Unreleased
 
+## 28.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+### Enhancements
+
+-   `Tabs`: Animate indicator ([#60560](https://github.com/WordPress/gutenberg/pull/60560)).
+-   `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)).
+-   `ProgressBar`: Expose as public API ([#61062](https://github.com/WordPress/gutenberg/pull/61062)).
+-   `ProgressBar`: Simplify default width implementation and make it more easily overridable ([#61976](https://github.com/WordPress/gutenberg/pull/61976)).
+
+### Bug Fixes
+
+-   `Autocomplete`: Stabilize rendering of autocomplete items ([#61877](https://github.com/WordPress/gutenberg/pull/61877)).
+-   `TabPanel`: Make the the focus styles consistent with `Tabs`. ([#61317](https://github.com/WordPress/gutenberg/pull/61317)).
+-   `InputControl`: Fixed z-index issue where slider dots appeared in front of the Appearance dropdown. ([#61937](https://github.com/WordPress/gutenberg/pull/61937))
+
+### Internal
+
+-   Remove `reduceMotion` util ([#61963](https://github.com/WordPress/gutenberg/pull/61963)).
+-   Add type support for CSS Custom Properties ([#61872](https://github.com/WordPress/gutenberg/pull/61872)).
+-   Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   `Tooltip`: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)).
+-   `CustomSelectControlV2`: Use `InputBase` for styling ([#60261](https://github.com/WordPress/gutenberg/pull/60261)).
+
+## 27.6.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+-   Upgrade `@use-gesture/react` package to `^10.3.1` ([#61503](https://github.com/WordPress/gutenberg/pull/61503)).
+-   Upgrade `framer-motion` package to version `^11.1.9` ([#61572](https://github.com/WordPress/gutenberg/pull/61572)).
+
+### Enhancements
+
+-   `FontSizePicker`: Add `vw` and `vh` units to the default units in the font size picker ([#60507](<(https://github.com/WordPress/gutenberg/pull/60607)>).
+-   `PaletteEdit`: Use consistent spacing and metrics. ([#61368](https://github.com/WordPress/gutenberg/pull/61368)).
+-   `FormTokenField`: Hide label when not defined ([#61336](https://github.com/WordPress/gutenberg/pull/61336)).
+-   `ComboboxControl`: supports disabled items ([#61294](https://github.com/WordPress/gutenberg/pull/61294)).
+-   Upgraded the @types/react and @types/react-dom packages ([#60796](https://github.com/WordPress/gutenberg/pull/60796)).
+-   `Placeholder`: Tweak placeholder style ([#61590](https://github.com/WordPress/gutenberg/pull/61590)).
+
+### Bug Fix
+
+-   `ToolsPanel`: Fix sticking “Reset” option ([#60621](https://github.com/WordPress/gutenberg/pull/60621)).
+-   Fix an issue where types used a synthetic default import ([#61679](https://github.com/WordPress/gutenberg/pull/61679)).
+
 ## 27.5.0 (2024-05-02)
 
 ### Enhancements
 
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
 -   `InputControl`: Add a password visibility toggle story ([#60898](https://github.com/WordPress/gutenberg/pull/60898)).
 -   `View`: Fix prop types ([#60919](https://github.com/WordPress/gutenberg/pull/60919)).
 -   `Placeholder`: Unify appearance across. ([#59275](https://github.com/WordPress/gutenberg/pull/59275)).
 -   `Toolbar`: Adjust top toolbar to use same metrics as block toolbar ([#61126](https://github.com/WordPress/gutenberg/pull/61126)).
+-   `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)).
+-   `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)).
 
 ### Bug Fix
 
+-   `BaseControl`, `InputControl`: Remove usage of aria-details from InputControl and BaseControl ([#61203](https://github.com/WordPress/gutenberg/pull/61203)).
 -   `SlotFill`: fixed missing `getServerSnapshot` parameter in slot map ([#60943](https://github.com/WordPress/gutenberg/pull/60943)).
 -   `Panel`: Fix issue with collapsing panel header ([#61319](https://github.com/WordPress/gutenberg/pull/61319)).
 
-### Enhancements
-
--   `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)).
--   `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)).
-
 ### Internal
 
 -   `FontSizerPicker`: Improve docs for default units ([#60996](https://github.com/WordPress/gutenberg/pull/60996)).

package/build/alignment-matrix-control/cell.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Cell;
-var _react = require("react");
 var _v = require("../composite/v2");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _visuallyHidden = require("../visually-hidden");
 var _utils = require("./utils");
 var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
  */
@@ -26,17 +26,21 @@ function Cell({
   ...props
 }) {
   const tooltipText = _utils.ALIGNMENT_LABEL[value];
-  return (0, _react.createElement)(_tooltip.default, {
-    text: tooltipText
-  }, (0, _react.createElement)(_v.CompositeItem, {
-    id: id,
-    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Cell, {
-      ...props,
-      role: "gridcell"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+    text: tooltipText,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_v.CompositeItem, {
+      id: id,
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Cell, {
+        ...props,
+        role: "gridcell"
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+        children: value
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Point, {
+        isActive: isActive,
+        role: "presentation"
+      })]
     })
-  }, (0, _react.createElement)(_visuallyHidden.VisuallyHidden, null, value), (0, _react.createElement)(_alignmentMatrixControlStyles.Point, {
-    isActive: isActive,
-    role: "presentation"
-  })));
+  });
 }
 //# sourceMappingURL=cell.js.map

package/build/alignment-matrix-control/cell.js.map

@@ -1 +1 @@
-{"version":3,"names":["_v","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_alignmentMatrixControlStyles","Cell","id","isActive","value","props","tooltipText","ALIGNMENT_LABEL","_react","createElement","default","text","CompositeItem","render","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,EAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AAXA;AACA;AACA;;AAKA;AACA;AACA;;AASe,SAASM,IAAIA,CAAE;EAC7BC,EAAE;EACFC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGC,sBAAe,CAAEH,KAAK,CAAE;EAE5C,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACb,QAAA,CAAAc,OAAO;IAACC,IAAI,EAAGL;EAAa,GAC5B,IAAAE,MAAA,CAAAC,aAAA,EAACf,EAAA,CAAAkB,aAAa;IACbV,EAAE,EAAGA,EAAI;IACTW,MAAM,EAAG,IAAAL,MAAA,CAAAC,aAAA,EAACT,6BAAA,CAAAC,IAAQ;MAAA,GAAMI,KAAK;MAAGS,IAAI,EAAC;IAAU,CAAE;EAAG,GAKpD,IAAAN,MAAA,CAAAC,aAAA,EAACX,eAAA,CAAAiB,cAAc,QAAGX,KAAuB,CAAC,EAC1C,IAAAI,MAAA,CAAAC,aAAA,EAACT,6BAAA,CAAAgB,KAAK;IAACb,QAAQ,EAAGA,QAAU;IAACW,IAAI,EAAC;EAAc,CAAE,CACpC,CACP,CAAC;AAEZ","ignoreList":[]}
+{"version":3,"names":["_v","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_alignmentMatrixControlStyles","_jsxRuntime","Cell","id","isActive","value","props","tooltipText","ALIGNMENT_LABEL","jsx","default","text","children","jsxs","CompositeItem","render","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,EAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AAGkD,IAAAM,WAAA,GAAAN,OAAA;AAdlD;AACA;AACA;;AAKA;AACA;AACA;;AASe,SAASO,IAAIA,CAAE;EAC7BC,EAAE;EACFC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGC,sBAAe,CAAEH,KAAK,CAAE;EAE5C,oBACC,IAAAJ,WAAA,CAAAQ,GAAA,EAACb,QAAA,CAAAc,OAAO;IAACC,IAAI,EAAGJ,WAAa;IAAAK,QAAA,eAC5B,IAAAX,WAAA,CAAAY,IAAA,EAACnB,EAAA,CAAAoB,aAAa;MACbX,EAAE,EAAGA,EAAI;MACTY,MAAM,eAAG,IAAAd,WAAA,CAAAQ,GAAA,EAACT,6BAAA,CAAAE,IAAQ;QAAA,GAAMI,KAAK;QAAGU,IAAI,EAAC;MAAU,CAAE,CAAG;MAAAJ,QAAA,gBAKpD,IAAAX,WAAA,CAAAQ,GAAA,EAACX,eAAA,CAAAmB,cAAc;QAAAL,QAAA,EAAGP;MAAK,CAAkB,CAAC,eAC1C,IAAAJ,WAAA,CAAAQ,GAAA,EAACT,6BAAA,CAAAkB,KAAK;QAACd,QAAQ,EAAGA,QAAU;QAACY,IAAI,EAAC;MAAc,CAAE,CAAC;IAAA,CACrC;EAAC,CACR,CAAC;AAEZ","ignoreList":[]}

package/build/alignment-matrix-control/icon.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("./utils");
 var _alignmentMatrixControlIconStyles = require("./styles/alignment-matrix-control-icon-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -28,25 +28,26 @@ function AlignmentMatrixControlIcon({
 }) {
   const alignIndex = (0, _utils.getAlignmentIndex)(value);
   const scale = (size / BASE_SIZE).toFixed(2);
-  const classes = (0, _classnames.default)('component-alignment-matrix-control-icon', className);
+  const classes = (0, _clsx.default)('component-alignment-matrix-control-icon', className);
   const styles = {
     ...style,
     transform: `scale(${scale})`
   };
-  return (0, _react.createElement)(_alignmentMatrixControlIconStyles.Root, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Root, {
     ...props,
     className: classes,
     disablePointerEvents: disablePointerEvents,
     role: "presentation",
-    style: styles
-  }, _utils.ALIGNMENTS.map((align, index) => {
-    const isActive = alignIndex === index;
-    return (0, _react.createElement)(_alignmentMatrixControlIconStyles.Cell, {
-      key: align
-    }, (0, _react.createElement)(_alignmentMatrixControlIconStyles.Point, {
-      isActive: isActive
-    }));
-  }));
+    style: styles,
+    children: _utils.ALIGNMENTS.map((align, index) => {
+      const isActive = alignIndex === index;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Cell, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Point, {
+          isActive: isActive
+        })
+      }, align);
+    })
+  });
 }
 var _default = exports.default = AlignmentMatrixControlIcon;
 //# sourceMappingURL=icon.js.map

package/build/alignment-matrix-control/icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_utils","_alignmentMatrixControlIconStyles","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","getAlignmentIndex","scale","toFixed","classes","classnames","styles","transform","_react","createElement","Root","role","ALIGNMENTS","map","align","index","isActive","Cell","key","Point","_default","exports","default"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst BASE_SIZE = 24;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iCAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAUA,MAAMG,SAAS,GAAG,EAAE;AAEpB,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI,GAAGJ,SAAS;EAChBK,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAC7E,MAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAAEH,KAAM,CAAC;EAC7C,MAAMI,KAAK,GAAG,CAAEN,IAAI,GAAGJ,SAAS,EAAGW,OAAO,CAAE,CAAE,CAAC;EAE/C,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EACzB,yCAAyC,EACzCX,SACD,CAAC;EAED,MAAMY,MAAM,GAAG;IACd,GAAGT,KAAK;IACRU,SAAS,EAAG,SAASL,KAAO;EAC7B,CAAC;EAED,OACC,IAAAM,MAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAAmB,IAAI;IAAA,GACCX,KAAK;IACVL,SAAS,EAAGU,OAAS;IACrBT,oBAAoB,EAAGA,oBAAsB;IAC7CgB,IAAI,EAAC,cAAc;IACnBd,KAAK,EAAGS;EAAQ,GAEdM,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IACrC,MAAMC,QAAQ,GAAGhB,UAAU,KAAKe,KAAK;IAErC,OACC,IAAAP,MAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAA0B,IAAI;MAACC,GAAG,EAAGJ;IAAO,GAClB,IAAAN,MAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAA4B,KAAK;MAACH,QAAQ,EAAGA;IAAU,CAAE,CACzB,CAAC;EAET,CAAE,CACG,CAAC;AAET;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc7B,0BAA0B","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_utils","_alignmentMatrixControlIconStyles","_jsxRuntime","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","getAlignmentIndex","scale","toFixed","classes","clsx","styles","transform","jsx","Root","role","children","ALIGNMENTS","map","align","index","isActive","Cell","Point","_default","exports","default"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst BASE_SIZE = 24;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = clsx(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iCAAA,GAAAF,OAAA;AAIuD,IAAAG,WAAA,GAAAH,OAAA;AAbvD;AACA;AACA;;AAGA;AACA;AACA;;AAUA,MAAMI,SAAS,GAAG,EAAE;AAEpB,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI,GAAGJ,SAAS;EAChBK,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAC7E,MAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAAEH,KAAM,CAAC;EAC7C,MAAMI,KAAK,GAAG,CAAEN,IAAI,GAAGJ,SAAS,EAAGW,OAAO,CAAE,CAAE,CAAC;EAE/C,MAAMC,OAAO,GAAG,IAAAC,aAAI,EACnB,yCAAyC,EACzCX,SACD,CAAC;EAED,MAAMY,MAAM,GAAG;IACd,GAAGT,KAAK;IACRU,SAAS,EAAG,SAASL,KAAO;EAC7B,CAAC;EAED,oBACC,IAAAX,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAAmB,IAAI;IAAA,GACCV,KAAK;IACVL,SAAS,EAAGU,OAAS;IACrBT,oBAAoB,EAAGA,oBAAsB;IAC7Ce,IAAI,EAAC,cAAc;IACnBb,KAAK,EAAGS,MAAQ;IAAAK,QAAA,EAEdC,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,QAAQ,GAAGhB,UAAU,KAAKe,KAAK;MAErC,oBACC,IAAAxB,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAA2B,IAAI;QAAAN,QAAA,eACJ,IAAApB,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAA4B,KAAK;UAACF,QAAQ,EAAGA;QAAU,CAAE;MAAC,GADpBF,KAEN,CAAC;IAET,CAAE;EAAC,CACE,CAAC;AAET;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc5B,0BAA0B","ignoreList":[]}

package/build/alignment-matrix-control/index.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AlignmentMatrixControl = AlignmentMatrixControl;
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
 var _cell = _interopRequireDefault(require("./cell"));
@@ -15,6 +14,7 @@ var _v = require("../composite/v2");
 var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-styles");
 var _icon = _interopRequireDefault(require("./icon"));
 var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -70,32 +70,32 @@ function AlignmentMatrixControl({
     rtl: (0, _i18n.isRTL)()
   });
   const activeId = compositeStore.useState('activeId');
-  const classes = (0, _classnames.default)('component-alignment-matrix-control', className);
-  return (0, _react.createElement)(_v.Composite, {
+  const classes = (0, _clsx.default)('component-alignment-matrix-control', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_v.Composite, {
     store: compositeStore,
-    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Root, {
+    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Root, {
       ...props,
       "aria-label": label,
       className: classes,
       id: baseId,
       role: "grid",
       size: width
-    })
-  }, _utils.GRID.map((cells, index) => (0, _react.createElement)(_v.CompositeRow, {
-    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Row, {
-      role: "row"
     }),
-    key: index
-  }, cells.map(cell => {
-    const cellId = (0, _utils.getItemId)(baseId, cell);
-    const isActive = cellId === activeId;
-    return (0, _react.createElement)(_cell.default, {
-      id: cellId,
-      isActive: isActive,
-      key: cell,
-      value: cell
-    });
-  }))));
+    children: _utils.GRID.map((cells, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_v.CompositeRow, {
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Row, {
+        role: "row"
+      }),
+      children: cells.map(cell => {
+        const cellId = (0, _utils.getItemId)(baseId, cell);
+        const isActive = cellId === activeId;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
+          id: cellId,
+          isActive: isActive,
+          value: cell
+        }, cell);
+      })
+    }, index))
+  });
 }
 AlignmentMatrixControl.Icon = _icon.default;
 var _default = exports.default = AlignmentMatrixControl;

package/build/alignment-matrix-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_compose","_cell","_v","_alignmentMatrixControlStyles","_icon","_utils","AlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","compositeStore","useCompositeStore","defaultActiveId","getItemId","activeId","setActiveId","nextActiveId","nextValue","getItemValue","rtl","isRTL","useState","classes","classnames","_react","createElement","Composite","store","render","Root","role","size","GRID","map","cells","index","CompositeRow","Row","key","cell","cellId","isActive","default","Icon","AlignmentMatrixControlIcon","_default","exports"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeRow, useCompositeStore } from '../composite/v2';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst compositeStore = useCompositeStore( {\n\t\tdefaultActiveId: getItemId( baseId, defaultValue ),\n\t\tactiveId: getItemId( baseId, value ),\n\t\tsetActiveId: ( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trender={\n\t\t\t\t<Root\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeRow render={ <Row role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = cellId === activeId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\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</CompositeRow>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_compose","_cell","_v","_alignmentMatrixControlStyles","_icon","_utils","_jsxRuntime","AlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","compositeStore","useCompositeStore","defaultActiveId","getItemId","activeId","setActiveId","nextActiveId","nextValue","getItemValue","rtl","isRTL","useState","classes","clsx","jsx","Composite","store","render","Root","role","size","children","GRID","map","cells","index","CompositeRow","Row","cell","cellId","isActive","default","Icon","AlignmentMatrixControlIcon","_default","exports"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeRow, useCompositeStore } from '../composite/v2';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst compositeStore = useCompositeStore( {\n\t\tdefaultActiveId: getItemId( baseId, defaultValue ),\n\t\tactiveId: getItemId( baseId, value ),\n\t\tsetActiveId: ( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tconst classes = clsx( 'component-alignment-matrix-control', className );\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trender={\n\t\t\t\t<Root\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeRow render={ <Row role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = cellId === activeId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\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</CompositeRow>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":"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","ignoreList":[]}

package/build/angle-picker-control/angle-circle.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _anglePickerControlStyles = require("./styles/angle-picker-control-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -74,20 +74,22 @@ function AngleCircle({
       previousCursorValue.current = undefined;
     }
   }, [isDragging]);
-  return (0, _react.createElement)(_anglePickerControlStyles.CircleRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_anglePickerControlStyles.CircleRoot, {
     ref: angleCircleRef,
     onMouseDown: startDrag,
     className: "components-angle-picker-control__angle-circle",
-    ...props
-  }, (0, _react.createElement)(_anglePickerControlStyles.CircleIndicatorWrapper, {
-    style: value ? {
-      transform: `rotate(${value}deg)`
-    } : undefined,
-    className: "components-angle-picker-control__angle-circle-indicator-wrapper",
-    tabIndex: -1
-  }, (0, _react.createElement)(_anglePickerControlStyles.CircleIndicator, {
-    className: "components-angle-picker-control__angle-circle-indicator"
-  })));
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_anglePickerControlStyles.CircleIndicatorWrapper, {
+      style: value ? {
+        transform: `rotate(${value}deg)`
+      } : undefined,
+      className: "components-angle-picker-control__angle-circle-indicator-wrapper",
+      tabIndex: -1,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_anglePickerControlStyles.CircleIndicator, {
+        className: "components-angle-picker-control__angle-circle-indicator"
+      })
+    })
+  });
 }
 function getAngle(centerX, centerY, pointX, pointY) {
   const y = pointY - centerY;

package/build/angle-picker-control/angle-circle.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_anglePickerControlStyles","AngleCircle","value","onChange","props","angleCircleRef","useRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","useDragging","onDragStart","onDragMove","onDragEnd","useEffect","document","body","style","cursor","_react","createElement","CircleRoot","ref","onMouseDown","className","CircleIndicatorWrapper","transform","tabIndex","CircleIndicator","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI","_default","exports","default"],"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_anglePickerControlStyles","_jsxRuntime","AngleCircle","value","onChange","props","angleCircleRef","useRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","useDragging","onDragStart","onDragMove","onDragEnd","useEffect","document","body","style","cursor","jsx","CircleRoot","ref","onMouseDown","className","children","CircleIndicatorWrapper","transform","tabIndex","CircleIndicator","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI","_default","exports","default"],"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,yBAAA,GAAAF,OAAA;AAI8C,IAAAG,WAAA,GAAAH,OAAA;AAb9C;AACA;AACA;;AAIA;AACA;AACA;;AAgBA,SAASI,WAAWA,CAAE;EACrBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACgD,CAAC,EAAG;EACvD,MAAMC,cAAc,GAAG,IAAAC,eAAM,EAA2B,IAAK,CAAC;EAC9D,MAAMC,iBAAiB,GAAG,IAAAD,eAAM,EAAyC,CAAC;EAC1E,MAAME,mBAAmB,GAAG,IAAAF,eAAM,EAAoC,CAAC;EAEvE,MAAMG,oBAAoB,GAAGA,CAAA,KAAM;IAClC,IAAKJ,cAAc,CAACK,OAAO,KAAK,IAAI,EAAG;MACtC;IACD;IAEA,MAAMC,IAAI,GAAGN,cAAc,CAACK,OAAO,CAACE,qBAAqB,CAAC,CAAC;IAC3DL,iBAAiB,CAACG,OAAO,GAAG;MAC3BG,CAAC,EAAEF,IAAI,CAACE,CAAC,GAAGF,IAAI,CAACG,KAAK,GAAG,CAAC;MAC1BC,CAAC,EAAEJ,IAAI,CAACI,CAAC,GAAGJ,IAAI,CAACK,MAAM,GAAG;IAC3B,CAAC;EACF,CAAC;EAED,MAAMC,qBAAqB,GAAKC,KAA+B,IAAM;IACpE,IAAKA,KAAK,KAAKC,SAAS,EAAG;MAC1B;IACD;;IAEA;IACA;IACAD,KAAK,CAACE,cAAc,CAAC,CAAC;IACtB;IACEF,KAAK,CAACG,MAAM,EAA6BC,KAAK,CAAC,CAAC;IAElD,IACCf,iBAAiB,CAACG,OAAO,KAAKS,SAAS,IACvChB,QAAQ,KAAKgB,SAAS,EACrB;MACD,MAAM;QAAEN,CAAC,EAAEU,OAAO;QAAER,CAAC,EAAES;MAAQ,CAAC,GAAGjB,iBAAiB,CAACG,OAAO;MAC5DP,QAAQ,CACPsB,QAAQ,CAAEF,OAAO,EAAEC,OAAO,EAAEN,KAAK,CAACQ,OAAO,EAAER,KAAK,CAACS,OAAQ,CAC1D,CAAC;IACF;EACD,CAAC;EAED,MAAM;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAG,IAAAC,kCAAW,EAAE;IAC9CC,WAAW,EAAIb,KAAK,IAAM;MACzBT,oBAAoB,CAAC,CAAC;MACtBQ,qBAAqB,CAAEC,KAAM,CAAC;IAC/B,CAAC;IACDc,UAAU,EAAEf,qBAAqB;IACjCgB,SAAS,EAAEhB;EACZ,CAAE,CAAC;EAEH,IAAAiB,kBAAS,EAAE,MAAM;IAChB,IAAKL,UAAU,EAAG;MACjB,IAAKrB,mBAAmB,CAACE,OAAO,KAAKS,SAAS,EAAG;QAChDX,mBAAmB,CAACE,OAAO,GAAGyB,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM;MACzD;MACAH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,UAAU;IACxC,CAAC,MAAM;MACNH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG9B,mBAAmB,CAACE,OAAO,IAAI,EAAE;MAC9DF,mBAAmB,CAACE,OAAO,GAAGS,SAAS;IACxC;EACD,CAAC,EAAE,CAAEU,UAAU,CAAG,CAAC;EAEnB,oBACC,IAAA7B,WAAA,CAAAuC,GAAA,EAACxC,yBAAA,CAAAyC,UAAU;IACVC,GAAG,EAAGpC,cAAgB;IACtBqC,WAAW,EAAGd,SAAW;IACzBe,SAAS,EAAC,+CAA+C;IAAA,GACpDvC,KAAK;IAAAwC,QAAA,eAEV,IAAA5C,WAAA,CAAAuC,GAAA,EAACxC,yBAAA,CAAA8C,sBAAsB;MACtBR,KAAK,EACJnC,KAAK,GAAG;QAAE4C,SAAS,EAAG,UAAU5C,KAAO;MAAM,CAAC,GAAGiB,SACjD;MACDwB,SAAS,EAAC,iEAAiE;MAC3EI,QAAQ,EAAG,CAAC,CAAG;MAAAH,QAAA,eAEf,IAAA5C,WAAA,CAAAuC,GAAA,EAACxC,yBAAA,CAAAiD,eAAe;QAACL,SAAS,EAAC;MAAyD,CAAE;IAAC,CAChE;EAAC,CACd,CAAC;AAEf;AAEA,SAASlB,QAAQA,CAChBF,OAAe,EACfC,OAAe,EACfyB,MAAc,EACdC,MAAc,EACb;EACD,MAAMnC,CAAC,GAAGmC,MAAM,GAAG1B,OAAO;EAC1B,MAAMX,CAAC,GAAGoC,MAAM,GAAG1B,OAAO;EAE1B,MAAM4B,cAAc,GAAGC,IAAI,CAACC,KAAK,CAAEtC,CAAC,EAAEF,CAAE,CAAC;EACzC,MAAMyC,UAAU,GAAGF,IAAI,CAACG,KAAK,CAAEJ,cAAc,IAAK,GAAG,GAAGC,IAAI,CAACI,EAAE,CAAG,CAAC,GAAG,EAAE;EACxE,IAAKF,UAAU,GAAG,CAAC,EAAG;IACrB,OAAO,GAAG,GAAGA,UAAU;EACxB;EACA,OAAOA,UAAU;AAClB;AAAC,IAAAG,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc1D,WAAW","ignoreList":[]}

package/build/angle-picker-control/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.AnglePickerControl = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _flex = require("../flex");
@@ -14,6 +13,7 @@ var _spacer = require("../spacer");
 var _numberControl = _interopRequireDefault(require("../number-control"));
 var _angleCircle = _interopRequireDefault(require("./angle-circle"));
 var _anglePickerControlStyles = require("./styles/angle-picker-control-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -41,34 +41,40 @@ function UnforwardedAnglePickerControl(props, ref) {
     const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
     onChange(inputValue);
   };
-  const classes = (0, _classnames.default)('components-angle-picker-control', className);
-  const unitText = (0, _react.createElement)(_anglePickerControlStyles.UnitText, null, "\xB0");
+  const classes = (0, _clsx.default)('components-angle-picker-control', className);
+  const unitText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_anglePickerControlStyles.UnitText, {
+    children: "\xB0"
+  });
   const [prefixedUnitText, suffixedUnitText] = (0, _i18n.isRTL)() ? [unitText, null] : [null, unitText];
-  return (0, _react.createElement)(_flex.Flex, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_flex.Flex, {
     ...restProps,
     ref: ref,
     className: classes,
-    gap: 2
-  }, (0, _react.createElement)(_flex.FlexBlock, null, (0, _react.createElement)(_numberControl.default, {
-    label: label,
-    className: "components-angle-picker-control__input-field",
-    max: 360,
-    min: 0,
-    onChange: handleOnNumberChange,
-    size: "__unstable-large",
-    step: "1",
-    value: value,
-    spinControls: "none",
-    prefix: prefixedUnitText,
-    suffix: suffixedUnitText
-  })), (0, _react.createElement)(_spacer.Spacer, {
-    marginBottom: "1",
-    marginTop: "auto"
-  }, (0, _react.createElement)(_angleCircle.default, {
-    "aria-hidden": "true",
-    value: value,
-    onChange: onChange
-  })));
+    gap: 2,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexBlock, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_numberControl.default, {
+        label: label,
+        className: "components-angle-picker-control__input-field",
+        max: 360,
+        min: 0,
+        onChange: handleOnNumberChange,
+        size: "__unstable-large",
+        step: "1",
+        value: value,
+        spinControls: "none",
+        prefix: prefixedUnitText,
+        suffix: suffixedUnitText
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
+      marginBottom: "1",
+      marginTop: "auto",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_angleCircle.default, {
+        "aria-hidden": "true",
+        value: value,
+        onChange: onChange
+      })
+    })]
+  });
 }
 
 /**

package/build/angle-picker-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_i18n","_flex","_spacer","_numberControl","_angleCircle","_anglePickerControlStyles","UnforwardedAnglePickerControl","props","ref","className","label","__","onChange","value","restProps","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","classnames","unitText","_react","createElement","UnitText","prefixedUnitText","suffixedUnitText","isRTL","Flex","gap","FlexBlock","default","max","min","size","step","spinControls","prefix","suffix","Spacer","marginBottom","marginTop","AnglePickerControl","exports","forwardRef","_default"],"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Flex, FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { UnitText } from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\tconst unitText = <UnitText>°</UnitText>;\n\tconst [ prefixedUnitText, suffixedUnitText ] = isRTL()\n\t\t? [ unitText, null ]\n\t\t: [ null, unitText ];\n\n\treturn (\n\t\t<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tprefix={ prefixedUnitText }\n\t\t\t\t\tsuffix={ suffixedUnitText }\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<Spacer marginBottom=\"1\" marginTop=\"auto\">\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t</Flex>\n\t);\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *     </>\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );\n\nexport default AnglePickerControl;\n"],"mappings":";;;;;;;;AAIA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,YAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,yBAAA,GAAAP,OAAA;AAnBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAUA,SAASQ,6BAA6BA,CACrCC,KAAgE,EAChEC,GAAwB,EACvB;EACD,MAAM;IACLC,SAAS;IACTC,KAAK,GAAG,IAAAC,QAAE,EAAE,OAAQ,CAAC;IACrBC,QAAQ;IACRC,KAAK;IACL,GAAGC;EACJ,CAAC,GAAGP,KAAK;EAET,MAAMQ,oBAAoB,GAAKC,gBAAoC,IAAM;IACxE,IAAKJ,QAAQ,KAAKK,SAAS,EAAG;MAC7B;IACD;IAEA,MAAMC,UAAU,GACfF,gBAAgB,KAAKC,SAAS,IAAID,gBAAgB,KAAK,EAAE,GACtDG,QAAQ,CAAEH,gBAAgB,EAAE,EAAG,CAAC,GAChC,CAAC;IACLJ,QAAQ,CAAEM,UAAW,CAAC;EACvB,CAAC;EAED,MAAME,OAAO,GAAG,IAAAC,mBAAU,EAAE,iCAAiC,EAAEZ,SAAU,CAAC;EAE1E,MAAMa,QAAQ,GAAG,IAAAC,MAAA,CAAAC,aAAA,EAACnB,yBAAA,CAAAoB,QAAQ,QAAC,MAAW,CAAC;EACvC,MAAM,CAAEC,gBAAgB,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,WAAK,EAAC,CAAC,GACnD,CAAEN,QAAQ,EAAE,IAAI,CAAE,GAClB,CAAE,IAAI,EAAEA,QAAQ,CAAE;EAErB,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACvB,KAAA,CAAA4B,IAAI;IAAA,GAAMf,SAAS;IAAGN,GAAG,EAAGA,GAAK;IAACC,SAAS,EAAGW,OAAS;IAACU,GAAG,EAAG;EAAG,GACjE,IAAAP,MAAA,CAAAC,aAAA,EAACvB,KAAA,CAAA8B,SAAS,QACT,IAAAR,MAAA,CAAAC,aAAA,EAACrB,cAAA,CAAA6B,OAAa;IACbtB,KAAK,EAAGA,KAAO;IACfD,SAAS,EAAC,8CAA8C;IACxDwB,GAAG,EAAG,GAAK;IACXC,GAAG,EAAG,CAAG;IACTtB,QAAQ,EAAGG,oBAAsB;IACjCoB,IAAI,EAAC,kBAAkB;IACvBC,IAAI,EAAC,GAAG;IACRvB,KAAK,EAAGA,KAAO;IACfwB,YAAY,EAAC,MAAM;IACnBC,MAAM,EAAGZ,gBAAkB;IAC3Ba,MAAM,EAAGZ;EAAkB,CAC3B,CACS,CAAC,EACZ,IAAAJ,MAAA,CAAAC,aAAA,EAACtB,OAAA,CAAAsC,MAAM;IAACC,YAAY,EAAC,GAAG;IAACC,SAAS,EAAC;EAAM,GACxC,IAAAnB,MAAA,CAAAC,aAAA,EAACpB,YAAA,CAAA4B,OAAW;IACX,eAAY,MAAM;IAClBnB,KAAK,EAAGA,KAAO;IACfD,QAAQ,EAAGA;EAAU,CACrB,CACM,CACH,CAAC;AAET;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM+B,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,IAAAE,mBAAU,EAAEvC,6BAA8B,CAAC;AAAC,IAAAwC,QAAA,GAAAF,OAAA,CAAAZ,OAAA,GAE/DW,kBAAkB","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_i18n","_flex","_spacer","_numberControl","_angleCircle","_anglePickerControlStyles","_jsxRuntime","UnforwardedAnglePickerControl","props","ref","className","label","__","onChange","value","restProps","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","clsx","unitText","jsx","UnitText","children","prefixedUnitText","suffixedUnitText","isRTL","jsxs","Flex","gap","FlexBlock","default","max","min","size","step","spinControls","prefix","suffix","Spacer","marginBottom","marginTop","AnglePickerControl","exports","forwardRef","_default"],"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Flex, FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { UnitText } from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = clsx( 'components-angle-picker-control', className );\n\n\tconst unitText = <UnitText>°</UnitText>;\n\tconst [ prefixedUnitText, suffixedUnitText ] = isRTL()\n\t\t? [ unitText, null ]\n\t\t: [ null, unitText ];\n\n\treturn (\n\t\t<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tprefix={ prefixedUnitText }\n\t\t\t\t\tsuffix={ suffixedUnitText }\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<Spacer marginBottom=\"1\" marginTop=\"auto\">\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t</Flex>\n\t);\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *     </>\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );\n\nexport default AnglePickerControl;\n"],"mappings":"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","ignoreList":[]}

package/build/animate/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Animate = Animate;
 exports.default = void 0;
 exports.getAnimateClassName = getAnimateClassName;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 /**
  * External dependencies
  */
@@ -31,7 +31,7 @@ function getDefaultOrigin(type) {
  */
 function getAnimateClassName(options) {
   if (options.type === 'loading') {
-    return (0, _classnames.default)('components-animate__loading');
+    return 'components-animate__loading';
   }
   const {
     type,
@@ -39,13 +39,13 @@ function getAnimateClassName(options) {
   } = options;
   if (type === 'appear') {
     const [yAxis, xAxis = 'center'] = origin.split(' ');
-    return (0, _classnames.default)('components-animate__appear', {
+    return (0, _clsx.default)('components-animate__appear', {
       ['is-from-' + xAxis]: xAxis !== 'center',
       ['is-from-' + yAxis]: yAxis !== 'middle'
     });
   }
   if (type === 'slide-in') {
-    return (0, _classnames.default)('components-animate__slide-in', 'is-from-' + origin);
+    return (0, _clsx.default)('components-animate__slide-in', 'is-from-' + origin);
   }
   return undefined;
 }

package/build/animate/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","getDefaultOrigin","type","getAnimateClassName","options","classnames","origin","yAxis","xAxis","split","undefined","Animate","children","className","_default","exports","default"],"sources":["@wordpress/components/src/animate/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport type { AnimateProps, GetAnimateOptions } from './types';\n\n/**\n * @param type The animation type\n * @return Default origin\n */\nfunction getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {\n\treturn type === 'appear' ? 'top' : 'left';\n}\n\n/**\n * @param options\n *\n * @return ClassName that applies the animations\n */\nexport function getAnimateClassName( options: GetAnimateOptions ) {\n\tif ( options.type === 'loading' ) {\n\t\treturn classnames( 'components-animate__loading' );\n\t}\n\n\tconst { type, origin = getDefaultOrigin( type ) } = options;\n\n\tif ( type === 'appear' ) {\n\t\tconst [ yAxis, xAxis = 'center' ] = origin.split( ' ' );\n\t\treturn classnames( 'components-animate__appear', {\n\t\t\t[ 'is-from-' + xAxis ]: xAxis !== 'center',\n\t\t\t[ 'is-from-' + yAxis ]: yAxis !== 'middle',\n\t\t} );\n\t}\n\n\tif ( type === 'slide-in' ) {\n\t\treturn classnames(\n\t\t\t'components-animate__slide-in',\n\t\t\t'is-from-' + origin\n\t\t);\n\t}\n\n\treturn undefined;\n}\n\n/**\n * Simple interface to introduce animations to components.\n *\n * ```jsx\n * import { Animate, Notice } from '@wordpress/components';\n *\n * const MyAnimatedNotice = () => (\n * \t<Animate type=\"slide-in\" options={ { origin: 'top' } }>\n * \t\t{ ( { className } ) => (\n * \t\t\t<Notice className={ className } status=\"success\">\n * \t\t\t\t<p>Animation finished.</p>\n * \t\t\t</Notice>\n * \t\t) }\n * \t</Animate>\n * );\n * ```\n */\nexport function Animate( { type, options = {}, children }: AnimateProps ) {\n\treturn children( {\n\t\tclassName: getAnimateClassName( {\n\t\t\ttype,\n\t\t\t...options,\n\t\t} as GetAnimateOptions ),\n\t} );\n}\n\nexport default Animate;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAEC,IAAkC,EAAG;EAC/D,OAAOA,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,MAAM;AAC1C;;AAEA;AACA;AACA;AACA;AACA;AACO,SAASC,mBAAmBA,CAAEC,OAA0B,EAAG;EACjE,IAAKA,OAAO,CAACF,IAAI,KAAK,SAAS,EAAG;IACjC,OAAO,IAAAG,mBAAU,EAAE,6BAA8B,CAAC;EACnD;EAEA,MAAM;IAAEH,IAAI;IAAEI,MAAM,GAAGL,gBAAgB,CAAEC,IAAK;EAAE,CAAC,GAAGE,OAAO;EAE3D,IAAKF,IAAI,KAAK,QAAQ,EAAG;IACxB,MAAM,CAAEK,KAAK,EAAEC,KAAK,GAAG,QAAQ,CAAE,GAAGF,MAAM,CAACG,KAAK,CAAE,GAAI,CAAC;IACvD,OAAO,IAAAJ,mBAAU,EAAE,4BAA4B,EAAE;MAChD,CAAE,UAAU,GAAGG,KAAK,GAAIA,KAAK,KAAK,QAAQ;MAC1C,CAAE,UAAU,GAAGD,KAAK,GAAIA,KAAK,KAAK;IACnC,CAAE,CAAC;EACJ;EAEA,IAAKL,IAAI,KAAK,UAAU,EAAG;IAC1B,OAAO,IAAAG,mBAAU,EAChB,8BAA8B,EAC9B,UAAU,GAAGC,MACd,CAAC;EACF;EAEA,OAAOI,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,OAAOA,CAAE;EAAET,IAAI;EAAEE,OAAO,GAAG,CAAC,CAAC;EAAEQ;AAAuB,CAAC,EAAG;EACzE,OAAOA,QAAQ,CAAE;IAChBC,SAAS,EAAEV,mBAAmB,CAAE;MAC/BD,IAAI;MACJ,GAAGE;IACJ,CAAuB;EACxB,CAAE,CAAC;AACJ;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcL,OAAO","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","getDefaultOrigin","type","getAnimateClassName","options","origin","yAxis","xAxis","split","clsx","undefined","Animate","children","className","_default","exports","default"],"sources":["@wordpress/components/src/animate/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport type { AnimateProps, GetAnimateOptions } from './types';\n\n/**\n * @param type The animation type\n * @return Default origin\n */\nfunction getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {\n\treturn type === 'appear' ? 'top' : 'left';\n}\n\n/**\n * @param options\n *\n * @return ClassName that applies the animations\n */\nexport function getAnimateClassName( options: GetAnimateOptions ) {\n\tif ( options.type === 'loading' ) {\n\t\treturn 'components-animate__loading';\n\t}\n\n\tconst { type, origin = getDefaultOrigin( type ) } = options;\n\n\tif ( type === 'appear' ) {\n\t\tconst [ yAxis, xAxis = 'center' ] = origin.split( ' ' );\n\t\treturn clsx( 'components-animate__appear', {\n\t\t\t[ 'is-from-' + xAxis ]: xAxis !== 'center',\n\t\t\t[ 'is-from-' + yAxis ]: yAxis !== 'middle',\n\t\t} );\n\t}\n\n\tif ( type === 'slide-in' ) {\n\t\treturn clsx( 'components-animate__slide-in', 'is-from-' + origin );\n\t}\n\n\treturn undefined;\n}\n\n/**\n * Simple interface to introduce animations to components.\n *\n * ```jsx\n * import { Animate, Notice } from '@wordpress/components';\n *\n * const MyAnimatedNotice = () => (\n * \t<Animate type=\"slide-in\" options={ { origin: 'top' } }>\n * \t\t{ ( { className } ) => (\n * \t\t\t<Notice className={ className } status=\"success\">\n * \t\t\t\t<p>Animation finished.</p>\n * \t\t\t</Notice>\n * \t\t) }\n * \t</Animate>\n * );\n * ```\n */\nexport function Animate( { type, options = {}, children }: AnimateProps ) {\n\treturn children( {\n\t\tclassName: getAnimateClassName( {\n\t\t\ttype,\n\t\t\t...options,\n\t\t} as GetAnimateOptions ),\n\t} );\n}\n\nexport default Animate;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAEC,IAAkC,EAAG;EAC/D,OAAOA,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,MAAM;AAC1C;;AAEA;AACA;AACA;AACA;AACA;AACO,SAASC,mBAAmBA,CAAEC,OAA0B,EAAG;EACjE,IAAKA,OAAO,CAACF,IAAI,KAAK,SAAS,EAAG;IACjC,OAAO,6BAA6B;EACrC;EAEA,MAAM;IAAEA,IAAI;IAAEG,MAAM,GAAGJ,gBAAgB,CAAEC,IAAK;EAAE,CAAC,GAAGE,OAAO;EAE3D,IAAKF,IAAI,KAAK,QAAQ,EAAG;IACxB,MAAM,CAAEI,KAAK,EAAEC,KAAK,GAAG,QAAQ,CAAE,GAAGF,MAAM,CAACG,KAAK,CAAE,GAAI,CAAC;IACvD,OAAO,IAAAC,aAAI,EAAE,4BAA4B,EAAE;MAC1C,CAAE,UAAU,GAAGF,KAAK,GAAIA,KAAK,KAAK,QAAQ;MAC1C,CAAE,UAAU,GAAGD,KAAK,GAAIA,KAAK,KAAK;IACnC,CAAE,CAAC;EACJ;EAEA,IAAKJ,IAAI,KAAK,UAAU,EAAG;IAC1B,OAAO,IAAAO,aAAI,EAAE,8BAA8B,EAAE,UAAU,GAAGJ,MAAO,CAAC;EACnE;EAEA,OAAOK,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,OAAOA,CAAE;EAAET,IAAI;EAAEE,OAAO,GAAG,CAAC,CAAC;EAAEQ;AAAuB,CAAC,EAAG;EACzE,OAAOA,QAAQ,CAAE;IAChBC,SAAS,EAAEV,mBAAmB,CAAE;MAC/BD,IAAI;MACJ,GAAGE;IACJ,CAAuB;EACxB,CAAE,CAAC;AACJ;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcL,OAAO","ignoreList":[]}