npm - @wordpress/components - Versions diffs - 27.5.0 → 27.6.0 - Mend

@wordpress/components 27.5.0 → 27.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (938) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,25 +2,45 @@
 ## Unreleased
+## 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
+-   `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/icon.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
 /**
@@ -28,7 +28,7 @@ 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})`

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

	@@ -1 +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":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_utils","_alignmentMatrixControlIconStyles","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","getAlignmentIndex","scale","toFixed","classes","clsx","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 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;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,aAAI,EACnB,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":[]}

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

@@ -7,7 +7,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"));
@@ -70,7 +70,7 @@ function AlignmentMatrixControl({
     rtl: (0, _i18n.isRTL)()
   });
   const activeId = compositeStore.useState('activeId');
-  const classes = (0, _classnames.default)('component-alignment-matrix-control', className);
+  const classes = (0, _clsx.default)('component-alignment-matrix-control', className);
   return (0, _react.createElement)(_v.Composite, {
     store: compositeStore,
     render: (0, _react.createElement)(_alignmentMatrixControlStyles.Root, {

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

	@@ -1 +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":";;;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,EAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASQ,sBAAsBA,CAAE;EACvCC,SAAS;EACTC,EAAE;EACFC,KAAK,GAAG,IAAAC,QAAE,EAAE,0BAA2B,CAAC;EACxCC,YAAY,GAAG,eAAe;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,EAAE;EACV,GAAGC;AACkE,CAAC,EAAG;EACzE,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAC3BX,sBAAsB,EACtB,0BAA0B,EAC1BE,EACD,CAAC;EAED,MAAMU,cAAc,GAAG,IAAAC,oBAAiB,EAAE;IACzCC,eAAe,EAAE,IAAAC,gBAAS,EAAEL,MAAM,EAAEL,YAAa,CAAC;IAClDW,QAAQ,EAAE,IAAAD,gBAAS,EAAEL,MAAM,EAAEJ,KAAM,CAAC;IACpCW,WAAW,EAAIC,YAAY,IAAM;MAChC,MAAMC,SAAS,GAAG,IAAAC,mBAAY,EAAEV,MAAM,EAAEQ,YAAa,CAAC;MACtD,IAAKC,SAAS,EAAG;QAChBZ,QAAQ,GAAIY,SAAU,CAAC;MACxB;IACD,CAAC;IACDE,GAAG,EAAE,IAAAC,WAAK,EAAC;EACZ,CAAE,CAAC;EAEH,MAAMN,QAAQ,GAAGJ,cAAc,CAACW,QAAQ,CAAE,UAAW,CAAC;EAEtD,MAAMC,OAAO,GAAG,IAAAC,~~mBAAU~~,~~EACzB~~,oCAAoC,~~EACpCxB~~,~~SACD~~,CAAC;~~EAED~~,OACC,IAAAyB,MAAA,CAAAC,aAAA,EAAC/B,EAAA,CAAAgC,SAAS;IACTC,KAAK,EAAGjB,cAAgB;IACxBkB,MAAM,EACL,IAAAJ,MAAA,CAAAC,aAAA,EAAC9B,6BAAA,CAAAkC,IAAI;MAAA,GACCtB,KAAK;MACV,cAAaN,KAAO;MACpBF,SAAS,EAAGuB,OAAS;MACrBtB,EAAE,EAAGQ,MAAQ;MACbsB,IAAI,EAAC,MAAM;MACXC,IAAI,EAAGzB;IAAO,CACd;EACD,GAEC0B,WAAI,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KACzB,IAAAX,MAAA,CAAAC,aAAA,EAAC/B,EAAA,CAAA0C,YAAY;IAACR,MAAM,EAAG,IAAAJ,MAAA,CAAAC,aAAA,EAAC9B,6BAAA,CAAA0C,GAAG;MAACP,IAAI,EAAC;IAAK,CAAE,CAAG;IAACQ,GAAG,EAAGH;EAAO,GACtDD,KAAK,CAACD,GAAG,CAAIM,IAAI,IAAM;IACxB,MAAMC,MAAM,GAAG,IAAA3B,gBAAS,EAAEL,MAAM,EAAE+B,IAAK,CAAC;IACxC,MAAME,QAAQ,GAAGD,MAAM,KAAK1B,QAAQ;IAEpC,OACC,IAAAU,MAAA,CAAAC,aAAA,EAAChC,KAAA,CAAAiD,OAAI;MACJ1C,EAAE,EAAGwC,MAAQ;MACbC,QAAQ,EAAGA,QAAU;MACrBH,GAAG,EAAGC,IAAM;MACZnC,KAAK,EAAGmC;IAAM,CACd,CAAC;EAEJ,CAAE,CACW,CACb,CACQ,CAAC;AAEd;AAEAzC,sBAAsB,CAAC6C,IAAI,GAAGC,aAA0B;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAE1C5C,sBAAsB","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_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","clsx","_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 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":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,EAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASQ,sBAAsBA,CAAE;EACvCC,SAAS;EACTC,EAAE;EACFC,KAAK,GAAG,IAAAC,QAAE,EAAE,0BAA2B,CAAC;EACxCC,YAAY,GAAG,eAAe;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,EAAE;EACV,GAAGC;AACkE,CAAC,EAAG;EACzE,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAC3BX,sBAAsB,EACtB,0BAA0B,EAC1BE,EACD,CAAC;EAED,MAAMU,cAAc,GAAG,IAAAC,oBAAiB,EAAE;IACzCC,eAAe,EAAE,IAAAC,gBAAS,EAAEL,MAAM,EAAEL,YAAa,CAAC;IAClDW,QAAQ,EAAE,IAAAD,gBAAS,EAAEL,MAAM,EAAEJ,KAAM,CAAC;IACpCW,WAAW,EAAIC,YAAY,IAAM;MAChC,MAAMC,SAAS,GAAG,IAAAC,mBAAY,EAAEV,MAAM,EAAEQ,YAAa,CAAC;MACtD,IAAKC,SAAS,EAAG;QAChBZ,QAAQ,GAAIY,SAAU,CAAC;MACxB;IACD,CAAC;IACDE,GAAG,EAAE,IAAAC,WAAK,EAAC;EACZ,CAAE,CAAC;EAEH,MAAMN,QAAQ,GAAGJ,cAAc,CAACW,QAAQ,CAAE,UAAW,CAAC;EAEtD,MAAMC,OAAO,GAAG,IAAAC,aAAI,EAAE,oCAAoC,EAAExB,SAAU,CAAC;EAEvE,OACC,IAAAyB,MAAA,CAAAC,aAAA,EAAC/B,EAAA,CAAAgC,SAAS;IACTC,KAAK,EAAGjB,cAAgB;IACxBkB,MAAM,EACL,IAAAJ,MAAA,CAAAC,aAAA,EAAC9B,6BAAA,CAAAkC,IAAI;MAAA,GACCtB,KAAK;MACV,cAAaN,KAAO;MACpBF,SAAS,EAAGuB,OAAS;MACrBtB,EAAE,EAAGQ,MAAQ;MACbsB,IAAI,EAAC,MAAM;MACXC,IAAI,EAAGzB;IAAO,CACd;EACD,GAEC0B,WAAI,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KACzB,IAAAX,MAAA,CAAAC,aAAA,EAAC/B,EAAA,CAAA0C,YAAY;IAACR,MAAM,EAAG,IAAAJ,MAAA,CAAAC,aAAA,EAAC9B,6BAAA,CAAA0C,GAAG;MAACP,IAAI,EAAC;IAAK,CAAE,CAAG;IAACQ,GAAG,EAAGH;EAAO,GACtDD,KAAK,CAACD,GAAG,CAAIM,IAAI,IAAM;IACxB,MAAMC,MAAM,GAAG,IAAA3B,gBAAS,EAAEL,MAAM,EAAE+B,IAAK,CAAC;IACxC,MAAME,QAAQ,GAAGD,MAAM,KAAK1B,QAAQ;IAEpC,OACC,IAAAU,MAAA,CAAAC,aAAA,EAAChC,KAAA,CAAAiD,OAAI;MACJ1C,EAAE,EAAGwC,MAAQ;MACbC,QAAQ,EAAGA,QAAU;MACrBH,GAAG,EAAGC,IAAM;MACZnC,KAAK,EAAGmC;IAAM,CACd,CAAC;EAEJ,CAAE,CACW,CACb,CACQ,CAAC;AAEd;AAEAzC,sBAAsB,CAAC6C,IAAI,GAAGC,aAA0B;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAE1C5C,sBAAsB","ignoreList":[]}

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
@@ -41,7 +41,7 @@ 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 classes = (0, _clsx.default)('components-angle-picker-control', className);
   const unitText = (0, _react.createElement)(_anglePickerControlStyles.UnitText, null, "\xB0");
   const [prefixedUnitText, suffixedUnitText] = (0, _i18n.isRTL)() ? [unitText, null] : [null, unitText];
   return (0, _react.createElement)(_flex.Flex, {

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

	@@ -1 +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":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_i18n","_flex","_spacer","_numberControl","_angleCircle","_anglePickerControlStyles","UnforwardedAnglePickerControl","props","ref","className","label","__","onChange","value","restProps","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","clsx","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 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":";;;;;;;;AAIA,IAAAA,KAAA,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,aAAI,EAAE,iCAAiC,EAAEZ,SAAU,CAAC;EAEpE,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":[]}

package/build/animate/index.js CHANGED Viewed

@@ -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 (0, _clsx.default)('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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","getDefaultOrigin","type","getAnimateClassName","options","clsx","origin","yAxis","xAxis","split","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 clsx( '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,IAAAG,aAAI,EAAE,6BAA8B,CAAC;EAC7C;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,aAAI,EAAE,4BAA4B,EAAE;MAC1C,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,aAAI,EAAE,8BAA8B,EAAE,UAAU,GAAGC,MAAO,CAAC;EACnE;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":[]}

package/build/autocomplete/autocompleter-ui.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getAutoCompleterUI = getAutoCompleterUI;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _richText = require("@wordpress/rich-text");
 var _compose = require("@wordpress/compose");
@@ -100,7 +100,7 @@ function getAutoCompleterUI(autocompleter) {
       role: "option",
       "aria-selected": index === selectedIndex,
       disabled: option.isDisabled,
-      className: (0, _classnames.default)('components-autocomplete__result', className, {
+      className: (0, _clsx.default)('components-autocomplete__result', className, {
         'is-selected': index === selectedIndex
       }),
       onClick: () => onSelect(option)

package/build/autocomplete/autocompleter-ui.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_richText","_compose","_a11y","_i18n","_getDefaultUseItems","_button","_popover","_visuallyHidden","_reactDom","getAutoCompleterUI","autocompleter","useItems","getDefaultUseItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","reset","contentRef","items","popoverAnchor","useAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","useState","popoverRef","useRef","popoverRefs","useMergeRefs","useRefEffect","node","ownerDocument","useOnClickOutside","debouncedSpeak","useDebounce","speak","announce","options","length","sprintf","_n","__","useLayoutEffect","ListBox","Component","_react","createElement","id","role","map","option","index","default","key","disabled","isDisabled","classnames","onClick","label","Fragment","focusOnMount","onClose","placement","anchor","ref","createPortal","VisuallyHidden","body","handler","useEffect","listener","event","contains","target","document","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aira- attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\t\tfunction announce( options: Array< KeyedOption > ) {\n\t\t\tif ( ! debouncedSpeak ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( !! options.length ) {\n\t\t\t\tif ( filterValue ) {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. /\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/ translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t\t}\n\t\t}\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tannounce( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst ListBox = ( {\n\t\t\tComponent = 'div',\n\t\t}: {\n\t\t\tComponent?: React.ElementType;\n\t\t} ) => (\n\t\t\t<Component\n\t\t\t\tid={ listBoxId }\n\t\t\t\trole=\"listbox\"\n\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t>\n\t\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t</Button>\n\t\t\t\t) ) }\n\t\t\t</Component>\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox />\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox Component={ VisuallyHidden } />,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent \| TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current \|\|\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t\t// Disable reason: `ref` is a ref object and should not be included in a\n\t\t// hook's dependency list.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ handler ] );\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_richText","_compose","_a11y","_i18n","_getDefaultUseItems","_button","_popover","_visuallyHidden","_reactDom","getAutoCompleterUI","autocompleter","useItems","getDefaultUseItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","reset","contentRef","items","popoverAnchor","useAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","useState","popoverRef","useRef","popoverRefs","useMergeRefs","useRefEffect","node","ownerDocument","useOnClickOutside","debouncedSpeak","useDebounce","speak","announce","options","length","sprintf","_n","__","useLayoutEffect","ListBox","Component","_react","createElement","id","role","map","option","index","default","key","disabled","isDisabled","clsx","onClick","label","Fragment","focusOnMount","onClose","placement","anchor","ref","createPortal","VisuallyHidden","body","handler","useEffect","listener","event","contains","target","document","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aira- attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\t\tfunction announce( options: Array< KeyedOption > ) {\n\t\t\tif ( ! debouncedSpeak ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( !! options.length ) {\n\t\t\t\tif ( filterValue ) {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. /\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/ translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t\t}\n\t\t}\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tannounce( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst ListBox = ( {\n\t\t\tComponent = 'div',\n\t\t}: {\n\t\t\tComponent?: React.ElementType;\n\t\t} ) => (\n\t\t\t<Component\n\t\t\t\tid={ listBoxId }\n\t\t\t\trole=\"listbox\"\n\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t>\n\t\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t</Button>\n\t\t\t\t) ) }\n\t\t\t</Component>\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox />\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox Component={ VisuallyHidden } />,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent \| TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current \|\|\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t\t// Disable reason: `ref` is a ref object and should not be included in a\n\t\t// hook's dependency list.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ handler ] );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/base-control/hooks.js CHANGED Viewed

@@ -29,9 +29,6 @@ function useBaseControlProps(props) {
     ...restProps
   } = props;
   const uniqueId = (0, _compose.useInstanceId)(_.default, 'wp-components-base-control', preferredId);
-  // ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-  const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details';
   return {
     baseControlProps: {
       id: uniqueId,
@@ -41,7 +38,7 @@ function useBaseControlProps(props) {
     controlProps: {
       id: uniqueId,
       ...(!!help ? {
-        [helpPropName]: `${uniqueId}__help`
+        'aria-describedby': `${uniqueId}__help`
       } : {})
     }
   };

package/build/base-control/hooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_","_interopRequireDefault","useBaseControlProps","props","help","id","preferredId","restProps","uniqueId","useInstanceId","BaseControl","~~helpPropName","~~baseControlProps","controlProps"],"sources":["@wordpress/components/src/base-control/hooks.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport BaseControl from '.';\nimport type { BaseControlProps } from './types';\n\n/\n Generate props for the `BaseControl` and the inner control itself.\n \n Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements.\n \n @param props\n */\nexport function useBaseControlProps(\n\tprops: Omit< BaseControlProps, 'children' >\n) {\n\tconst { help, id: preferredId, ...restProps } = props;\n\n\tconst uniqueId = useInstanceId(\n\t\tBaseControl,\n\t\t'wp-components-base-control',\n\t\tpreferredId\n\t);\n\n\~~t// ARIA descriptions can only contain plain text, so fall back to aria-details if not.\n\tconst helpPropName =\n\t\ttypeof help === 'string' ? 'aria-describedby' : 'aria-details';\n\n\~~treturn {\n\t\tbaseControlProps: {\n\t\t\tid: uniqueId,\n\t\t\thelp,\n\t\t\t...restProps,\n\t\t},\n\t\tcontrolProps: {\n\t\t\tid: uniqueId,\n\t\t\t...( !! help ? { ~~[ helpPropName ]~~: `${ uniqueId }__help` } : {} ),\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,CAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,mBAAmBA,CAClCC,KAA2C,EAC1C;EACD,MAAM;IAAEC,IAAI;IAAEC,EAAE,EAAEC,WAAW;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAErD,MAAMK,QAAQ,GAAG,IAAAC,sBAAa,EAC7BC,SAAW,EACX,4BAA4B,EAC5BJ,WACD,CAAC;;EAED~~;EACA~~,~~MAAMK,YAAY,GACjB,OAAOP,IAAI,KAAK,QAAQ,GAAG,kBAAkB,GAAG,cAAc;EAE/D,~~OAAO;~~IACNQ~~,gBAAgB,EAAE;~~MACjBP~~,EAAE,EAAEG,QAAQ;MACZJ,IAAI;MACJ,GAAGG;IACJ,CAAC;~~IACDM~~,YAAY,EAAE;~~MACbR~~,EAAE,EAAEG,QAAQ;MACZ,IAAK,CAAC,CAAEJ,IAAI,GAAG;QAAE,~~CAAEO~~,~~YAAY~~,~~GAAK~~,~~GAAGH,~~QAAU;MAAQ,CAAC,GAAG,CAAC,CAAC;~~IAChE~~;EACD,CAAC;AACF","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_","_interopRequireDefault","useBaseControlProps","props","help","id","preferredId","restProps","uniqueId","useInstanceId","BaseControl","baseControlProps","controlProps"],"sources":["@wordpress/components/src/base-control/hooks.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport BaseControl from '.';\nimport type { BaseControlProps } from './types';\n\n/\n Generate props for the `BaseControl` and the inner control itself.\n \n Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements.\n \n @param props\n */\nexport function useBaseControlProps(\n\tprops: Omit< BaseControlProps, 'children' >\n) {\n\tconst { help, id: preferredId, ...restProps } = props;\n\n\tconst uniqueId = useInstanceId(\n\t\tBaseControl,\n\t\t'wp-components-base-control',\n\t\tpreferredId\n\t);\n\n\treturn {\n\t\tbaseControlProps: {\n\t\t\tid: uniqueId,\n\t\t\thelp,\n\t\t\t...restProps,\n\t\t},\n\t\tcontrolProps: {\n\t\t\tid: uniqueId,\n\t\t\t...( !! help ? { 'aria-describedby': `${ uniqueId }__help` } : {} ),\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,CAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,mBAAmBA,CAClCC,KAA2C,EAC1C;EACD,MAAM;IAAEC,IAAI;IAAEC,EAAE,EAAEC,WAAW;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAErD,MAAMK,QAAQ,GAAG,IAAAC,sBAAa,EAC7BC,SAAW,EACX,4BAA4B,EAC5BJ,WACD,CAAC;EAED,OAAO;IACNK,gBAAgB,EAAE;MACjBN,EAAE,EAAEG,QAAQ;MACZJ,IAAI;MACJ,GAAGG;IACJ,CAAC;IACDK,YAAY,EAAE;MACbP,EAAE,EAAEG,QAAQ;MACZ,IAAK,CAAC,CAAEJ,IAAI,GAAG;QAAE,kBAAkB,EAAG,GAAGI,QAAU;MAAQ,CAAC,GAAG,CAAC,CAAC;IAClE;EACD,CAAC;AACF","ignoreList":[]}

package/build/base-control/index.js CHANGED Viewed

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "useBaseControlProps", {
   }
 });
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _visuallyHidden = require("../visually-hidden");
 var _baseControlStyles = require("./styles/base-control-styles");
 var _context = require("../context");
@@ -104,7 +104,7 @@ const VisualLabel = ({
 }) => {
   return (0, _react.createElement)(_baseControlStyles.StyledVisualLabel, {
     ...props,
-    className: (0, _classnames.default)('components-base-control__label', className)
+    className: (0, _clsx.default)('components-base-control__label', className)
   }, children);
 };
 exports.VisualLabel = VisualLabel;

package/build/base-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_classnames~~","_interopRequireDefault","require","_visuallyHidden","_baseControlStyles","_context","_hooks","UnconnectedBaseControl","props","__nextHasNoMarginBottom","id","label","hideLabelFromVision","help","className","children","useContextSystem","_react","createElement","Wrapper","StyledField","VisuallyHidden","as","htmlFor","StyledLabel","VisualLabel","StyledHelp","undefined","StyledVisualLabel","~~classnames~~","exports","BaseControl","Object","assign","contextConnectWithoutRef","_default","default"],"sources":["@wordpress/components/src/base-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\n\n/\n Internal dependencies\n /\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { BaseControlProps, BaseControlVisualLabelProps } from './types';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n\tStyledVisualLabel,\n} from './styles/base-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\n\nexport { useBaseControlProps } from './hooks';\n\n/\n `BaseControl` is a component used to generate labels and help text for components handling user inputs.\n \n ```jsx\n * import { BaseControl, useBaseControlProps } from '@wordpress/components';\n \n // Render a `BaseControl` for a textarea input\n * const MyCustomTextareaControl = ({ children, ...baseProps }) => (\n * \t// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`\n * \t// and the inner control itself. Namely, it takes care of generating a unique `id`,\n * \t// properly associating it with the `label` and `help` elements.\n * \tconst { baseControlProps, controlProps } = useBaseControlProps( baseProps );\n \n \treturn (\n * \t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>\n * \t\t\t<textarea { ...controlProps }>\n * \t\t\t { children }\n * \t\t\t</textarea>\n * \t\t</BaseControl>\n * \t);\n * );\n * ```\n /\nconst UnconnectedBaseControl = (\n\tprops: WordPressComponentProps< BaseControlProps, null >\n) => {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tid,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tclassName,\n\t\tchildren,\n\t} = useContextSystem( props, 'BaseControl' );\n\n\treturn (\n\t\t<Wrapper className={ className }>\n\t\t\t<StyledField\n\t\t\t\tclassName=\"components-base-control__field\"\n\t\t\t\t// TODO: Official deprecation for this should start after all internal usages have been migrated\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<VisualLabel>{ label }</VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n};\n\n/\n `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.\n \n It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,\n * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would\n * otherwise use if the `label` prop was passed.\n \n @example\n * import { BaseControl } from '@wordpress/components';\n \n const MyBaseControl = () => (\n * \t<BaseControl help=\"This button is already accessibly labeled.\">\n * \t\t<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>\n * \t\t<Button>Select an author</Button>\n * \t</BaseControl>\n * );\n */\nexport const VisualLabel = ( {\n\tclassName,\n\tchildren,\n\t...props\n}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {\n\treturn (\n\t\t<StyledVisualLabel\n\t\t\t{ ...props }\n\t\t\tclassName={ ~~classnames~~(~~\n\t\t\t\t~~'components-base-control__label'~~,\n\t\t\t\tclassName\n\t\t\t~~) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledVisualLabel>\n\t);\n};\n\nexport const BaseControl = Object.assign(\n\tcontextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),\n\t{ VisualLabel }\n);\n\nexport default BaseControl;\n"],"mappings":";;;;;;;;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAF,OAAA;AAQA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,sBAAsB,GAC3BC,KAAwD,IACpD;EACJ,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,EAAE;IACFC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,SAAS;IACTC;EACD,CAAC,GAAG,IAAAC,yBAAgB,EAAER,KAAK,EAAE,aAAc,CAAC;EAE5C,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAe,OAAO;IAACL,SAAS,EAAGA;EAAW,GAC/B,IAAAG,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAgB,WAAW;IACXN,SAAS,EAAC;IACV;IAAA;IACAL,uBAAuB,EAAGA;EAAyB,GAEjDE,KAAK,IACND,EAAE,KACAE,mBAAmB,GACpB,IAAAK,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAkB,cAAc;IAACC,EAAE,EAAC,OAAO;IAACC,OAAO,EAAGb;EAAI,GACtCC,KACa,CAAC,GAEjB,IAAAM,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAoB,WAAW;IACXV,SAAS,EAAC,gCAAgC;IAC1CS,OAAO,EAAGb;EAAI,GAEZC,KACU,CACb,CAAE,EACFA,KAAK,IACN,CAAED,EAAE,KACFE,mBAAmB,GACpB,IAAAK,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAkB,cAAc;IAACC,EAAE,EAAC;EAAO,GAAGX,KAAuB,CAAC,GAErD,IAAAM,MAAA,CAAAC,aAAA,EAACO,WAAW,QAAGd,KAAoB,CACnC,CAAE,EACFI,QACU,CAAC,EACZ,CAAC,CAAEF,IAAI,IACR,IAAAI,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAsB,UAAU;IACVhB,EAAE,EAAGA,EAAE,GAAGA,EAAE,GAAG,QAAQ,GAAGiB,SAAW;IACrCb,SAAS,EAAC,+BAA+B;IACzCL,uBAAuB,EAAGA;EAAyB,GAEjDI,IACS,CAEL,CAAC;AAEZ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,WAAW,GAAGA,CAAE;EAC5BX,SAAS;EACTC,QAAQ;EACR,GAAGP;AAC4D,CAAC,KAAM;EACtE,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAwB,iBAAiB;IAAA,GACZpB,KAAK;IACVM,SAAS,EAAG,IAAAe,~~mBAAU~~,~~EACrB~~,gCAAgC,~~EAChCf~~,~~SACD~~;EAAG,~~GAEDC~~,QACgB,CAAC;AAEtB,CAAC;AAACe,OAAA,CAAAL,WAAA,GAAAA,WAAA;AAEK,MAAMM,WAAW,GAAAD,OAAA,CAAAC,WAAA,GAAGC,MAAM,CAACC,MAAM,CACvC,IAAAC,iCAAwB,EAAE3B,sBAAsB,EAAE,aAAc,CAAC,EACjE;EAAEkB;AAAY,CACf,CAAC;AAAC,IAAAU,QAAA,GAAAL,OAAA,CAAAM,OAAA,GAEaL,WAAW","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_visuallyHidden","_baseControlStyles","_context","_hooks","UnconnectedBaseControl","props","__nextHasNoMarginBottom","id","label","hideLabelFromVision","help","className","children","useContextSystem","_react","createElement","Wrapper","StyledField","VisuallyHidden","as","htmlFor","StyledLabel","VisualLabel","StyledHelp","undefined","StyledVisualLabel","clsx","exports","BaseControl","Object","assign","contextConnectWithoutRef","_default","default"],"sources":["@wordpress/components/src/base-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n Internal dependencies\n /\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { BaseControlProps, BaseControlVisualLabelProps } from './types';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n\tStyledVisualLabel,\n} from './styles/base-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\n\nexport { useBaseControlProps } from './hooks';\n\n/\n `BaseControl` is a component used to generate labels and help text for components handling user inputs.\n \n ```jsx\n * import { BaseControl, useBaseControlProps } from '@wordpress/components';\n \n // Render a `BaseControl` for a textarea input\n * const MyCustomTextareaControl = ({ children, ...baseProps }) => (\n * \t// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`\n * \t// and the inner control itself. Namely, it takes care of generating a unique `id`,\n * \t// properly associating it with the `label` and `help` elements.\n * \tconst { baseControlProps, controlProps } = useBaseControlProps( baseProps );\n \n \treturn (\n * \t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>\n * \t\t\t<textarea { ...controlProps }>\n * \t\t\t { children }\n * \t\t\t</textarea>\n * \t\t</BaseControl>\n * \t);\n * );\n * ```\n /\nconst UnconnectedBaseControl = (\n\tprops: WordPressComponentProps< BaseControlProps, null >\n) => {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tid,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tclassName,\n\t\tchildren,\n\t} = useContextSystem( props, 'BaseControl' );\n\n\treturn (\n\t\t<Wrapper className={ className }>\n\t\t\t<StyledField\n\t\t\t\tclassName=\"components-base-control__field\"\n\t\t\t\t// TODO: Official deprecation for this should start after all internal usages have been migrated\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<VisualLabel>{ label }</VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n};\n\n/\n `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.\n \n It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,\n * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would\n * otherwise use if the `label` prop was passed.\n \n @example\n * import { BaseControl } from '@wordpress/components';\n \n const MyBaseControl = () => (\n * \t<BaseControl help=\"This button is already accessibly labeled.\">\n * \t\t<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>\n * \t\t<Button>Select an author</Button>\n * \t</BaseControl>\n * );\n */\nexport const VisualLabel = ( {\n\tclassName,\n\tchildren,\n\t...props\n}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {\n\treturn (\n\t\t<StyledVisualLabel\n\t\t\t{ ...props }\n\t\t\tclassName={ clsx( 'components-base-control__label', className ) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledVisualLabel>\n\t);\n};\n\nexport const BaseControl = Object.assign(\n\tcontextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),\n\t{ VisualLabel }\n);\n\nexport default BaseControl;\n"],"mappings":";;;;;;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAF,OAAA;AAQA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,sBAAsB,GAC3BC,KAAwD,IACpD;EACJ,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,EAAE;IACFC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,SAAS;IACTC;EACD,CAAC,GAAG,IAAAC,yBAAgB,EAAER,KAAK,EAAE,aAAc,CAAC;EAE5C,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAe,OAAO;IAACL,SAAS,EAAGA;EAAW,GAC/B,IAAAG,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAgB,WAAW;IACXN,SAAS,EAAC;IACV;IAAA;IACAL,uBAAuB,EAAGA;EAAyB,GAEjDE,KAAK,IACND,EAAE,KACAE,mBAAmB,GACpB,IAAAK,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAkB,cAAc;IAACC,EAAE,EAAC,OAAO;IAACC,OAAO,EAAGb;EAAI,GACtCC,KACa,CAAC,GAEjB,IAAAM,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAoB,WAAW;IACXV,SAAS,EAAC,gCAAgC;IAC1CS,OAAO,EAAGb;EAAI,GAEZC,KACU,CACb,CAAE,EACFA,KAAK,IACN,CAAED,EAAE,KACFE,mBAAmB,GACpB,IAAAK,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAkB,cAAc;IAACC,EAAE,EAAC;EAAO,GAAGX,KAAuB,CAAC,GAErD,IAAAM,MAAA,CAAAC,aAAA,EAACO,WAAW,QAAGd,KAAoB,CACnC,CAAE,EACFI,QACU,CAAC,EACZ,CAAC,CAAEF,IAAI,IACR,IAAAI,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAsB,UAAU;IACVhB,EAAE,EAAGA,EAAE,GAAGA,EAAE,GAAG,QAAQ,GAAGiB,SAAW;IACrCb,SAAS,EAAC,+BAA+B;IACzCL,uBAAuB,EAAGA;EAAyB,GAEjDI,IACS,CAEL,CAAC;AAEZ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,WAAW,GAAGA,CAAE;EAC5BX,SAAS;EACTC,QAAQ;EACR,GAAGP;AAC4D,CAAC,KAAM;EACtE,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAwB,iBAAiB;IAAA,GACZpB,KAAK;IACVM,SAAS,EAAG,IAAAe,aAAI,EAAE,gCAAgC,EAAEf,SAAU;EAAG,GAE/DC,QACgB,CAAC;AAEtB,CAAC;AAACe,OAAA,CAAAL,WAAA,GAAAA,WAAA;AAEK,MAAMM,WAAW,GAAAD,OAAA,CAAAC,WAAA,GAAGC,MAAM,CAACC,MAAM,CACvC,IAAAC,iCAAwB,EAAE3B,sBAAsB,EAAE,aAAc,CAAC,EACjE;EAAEkB;AAAY,CACf,CAAC;AAAC,IAAAU,QAAA,GAAAL,OAAA,CAAAM,OAAA,GAEaL,WAAW","ignoreList":[]}

package/build/base-control/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/base-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ReactNode } from 'react';\n\nexport type BaseControlProps = {\n\t/\n\t Start opting into the new margin-free styles that will become the default in a future version.\n\t \n\t @default false\n\t /\n\t__nextHasNoMarginBottom?: boolean;\n\t/\n\t The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.\n\t * This is necessary to accessibly associate the label with that element.\n\t \n\t The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you.\n\t * Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`.\n\t /\n\tid?: string;\n\t/\n\t Additional description for the control.\n\t \n\t It is ~~preferable~~ to ~~use~~ ~~plain~~ ~~text for `help`, as it can~~ be ~~accessibly~~ associated ~~with~~ the ~~control~~ ~~using~~ ~~`aria-describedby`.\n\t * When~~ the ~~`help`~~ ~~contains~~ ~~links,~~ ~~or otherwise non-plain text content, it will be associated with the control using~~ `aria-~~details`.\~~n\t /\n\thelp?: ReactNode;\n\t/\n\t If this property is added, a label will be generated using label property as the content.\n\t /\n\tlabel?: ReactNode;\n\t/\n\t If true, the label will only be visible to screen readers.\n\t \n\t @default false\n\t /\n\thideLabelFromVision?: boolean;\n\tclassName?: string;\n\t/\n\t The content to be displayed within the `BaseControl`.\n\t */\n\tchildren: ReactNode;\n};\n\nexport type BaseControlVisualLabelProps = {\n\tchildren: ReactNode;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/base-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ReactNode } from 'react';\n\nexport type BaseControlProps = {\n\t/\n\t Start opting into the new margin-free styles that will become the default in a future version.\n\t \n\t @default false\n\t /\n\t__nextHasNoMarginBottom?: boolean;\n\t/\n\t The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.\n\t * This is necessary to accessibly associate the label with that element.\n\t \n\t The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you.\n\t * Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`.\n\t /\n\tid?: string;\n\t/\n\t Additional description for the control.\n\t \n\t The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.\n\t /\n\thelp?: ReactNode;\n\t/\n\t If this property is added, a label will be generated using label property as the content.\n\t /\n\tlabel?: ReactNode;\n\t/\n\t If true, the label will only be visible to screen readers.\n\t \n\t @default false\n\t /\n\thideLabelFromVision?: boolean;\n\tclassName?: string;\n\t/\n\t The content to be displayed within the `BaseControl`.\n\t */\n\tchildren: ReactNode;\n};\n\nexport type BaseControlVisualLabelProps = {\n\tchildren: ReactNode;\n};\n"],"mappings":"","ignoreList":[]}

package/build/border-control/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n Internal dependencies\n /\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\nimport type { ToggleGroupControlProps } from '../toggle-group-control/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' \| 'enableAlpha' \| '__experimentalIsRenderedInSidebar'\n> & {\n\t/\n\t This toggles the ability to choose custom colors.\n\t /\n\tdisableCustomColors?: boolean;\n};\n\nexport type LabelProps = {\n\t/\n\t Provides control over whether the label will only be visible to\n\t * screen readers.\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t If provided, a label will be generated using this as the content.\n\t /\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/\n\t\t This controls whether unit selection should be disabled.\n\t\t /\n\t\tdisableUnits?: boolean;\n\t\t/\n\t\t This controls whether to support border style selection.\n\t\t \n\t\t @default true\n\t\t /\n\t\tenableStyle?: boolean;\n\t\t/\n\t\t This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t /\n\t\tisCompact?: boolean;\n\t\t/\n\t\t A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t /\n\t\tonChange: ( value?: Border ) => void;\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t \n\t\t @default true\n\t\t /\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/\n\t\t Whether or not to show the header for the border color and style\n\t\t * picker dropdown. The header includes a label for the color picker\n\t\t * and a close button.\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t\t/\n\t\t Size of the control.\n\t\t \n\t\t @default 'default'\n\t\t /\n\t\tsize?: 'default' \| '__unstable-large';\n\t\t/\n\t\t An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t /\n\t\tvalue?: Border;\n\t\t/\n\t\t Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t /\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/\n\t\t Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t /\n\t\twithSlider?: boolean;\n\t\t/\n\t\t Start opting into the larger default height that will become the default size in a future version.\n\t\t \n\t\t @default false\n\t\t /\n\t\t__next40pxDefaultSize?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t /\n\t\tborder?: Border;\n\t\t/\n\t\t Whether a border style can be set, based on the border sanitization settings.\n\t\t /\n\t\tisStyleSettable: boolean;\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t A callback invoked when the border color or style selections change.\n\t\t /\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/\n\t\t Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t /\n\t\tpreviousStyleSelection?: string;\n\t\t/\n\t\t Whether or not to render a header for the border color and style picker\n\t\t * dropdown. The header includes a label for the color picker and a\n\t\t * close button.\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = Omit<\n\tToggleGroupControlProps,\n\t'value' \| 'onChange' \| 'children'\n> & {\n\t/\n\t A callback function invoked when a border style is selected or cleared.\n\t /\n\tonChange: ( style?: string ) => void;\n\t/\n\t The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n Internal dependencies\n /\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\nimport type { ToggleGroupControlProps } from '../toggle-group-control/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' \| 'enableAlpha' \| '__experimentalIsRenderedInSidebar'\n> & {\n\t/\n\t This toggles the ability to choose custom colors.\n\t /\n\tdisableCustomColors?: boolean;\n};\n\nexport type LabelProps = {\n\t/\n\t Provides control over whether the label will only be visible to\n\t * screen readers.\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t If provided, a label will be generated using this as the content.\n\t /\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/\n\t\t This controls whether unit selection should be disabled.\n\t\t /\n\t\tdisableUnits?: boolean;\n\t\t/\n\t\t This controls whether to support border style selection.\n\t\t \n\t\t @default true\n\t\t /\n\t\tenableStyle?: boolean;\n\t\t/\n\t\t This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t /\n\t\tisCompact?: boolean;\n\t\t/\n\t\t A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t /\n\t\tonChange: ( value?: Border ) => void;\n\t\t/\n\t\t Placeholder text for the number input.\n\t\t /\n\t\tplaceholder?: HTMLInputElement[ 'placeholder' ];\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t \n\t\t @default true\n\t\t /\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/\n\t\t Whether or not to show the header for the border color and style\n\t\t * picker dropdown. The header includes a label for the color picker\n\t\t * and a close button.\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t\t/\n\t\t Size of the control.\n\t\t \n\t\t @default 'default'\n\t\t /\n\t\tsize?: 'default' \| '__unstable-large';\n\t\t/\n\t\t An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t /\n\t\tvalue?: Border;\n\t\t/\n\t\t Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t /\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/\n\t\t Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t /\n\t\twithSlider?: boolean;\n\t\t/\n\t\t Start opting into the larger default height that will become the default size in a future version.\n\t\t \n\t\t @default false\n\t\t /\n\t\t__next40pxDefaultSize?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t /\n\t\tborder?: Border;\n\t\t/\n\t\t Whether a border style can be set, based on the border sanitization settings.\n\t\t /\n\t\tisStyleSettable: boolean;\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t A callback invoked when the border color or style selections change.\n\t\t /\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/\n\t\t Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t /\n\t\tpreviousStyleSelection?: string;\n\t\t/\n\t\t Whether or not to render a header for the border color and style picker\n\t\t * dropdown. The header includes a label for the color picker and a\n\t\t * close button.\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = Omit<\n\tToggleGroupControlProps,\n\t'value' \| 'onChange' \| 'children'\n> & {\n\t/\n\t A callback function invoked when a border style is selected or cleared.\n\t /\n\tonChange: ( style?: string ) => void;\n\t/\n\t The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":"","ignoreList":[]}

package/build/button/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ exports.Button = void 0;
 exports.UnforwardedButton = UnforwardedButton;
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
@@ -121,7 +121,7 @@ function UnforwardedButton(props, ref) {
   // Tooltip should not considered as a child
   children?.[0]?.props?.className !== 'components-tooltip';
   const truthyAriaPressedValues = [true, 'true', 'mixed'];
-  const classes = (0, _classnames.default)('components-button', className, {
+  const classes = (0, _clsx.default)('components-button', className, {
     'is-next-40px-default-size': __next40pxDefaultSize,
     'is-secondary': variant === 'secondary',
     'is-primary': variant === 'primary',

package/build/button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_classnames","_interopRequireDefault","require","_deprecated","_element","_compose","_tooltip","_icon","_visuallyHidden","_utils","disabledEventsOnDisabledButton","useDeprecatedProps","isDefault","isPrimary","isSecondary","isTertiary","isLink","isPressed","isSmall","size","variant","otherProps","computedSize","computedVariant","newProps","_computedSize","_computedVariant","_computedVariant2","_computedVariant3","_computedVariant4","deprecated","since","alternative","_computedVariant5","UnforwardedButton","props","ref","__next40pxDefaultSize","isBusy","isDestructive","className","disabled","icon","iconPosition","iconSize","showTooltip","tooltipPosition","shortcut","label","children","text","__experimentalIsFocusable","isFocusable","describedBy","buttonOrAnchorProps","href","target","ariaChecked","ariaPressed","ariaSelected","additionalProps","undefined","instanceId","useInstanceId","Button","hasChildren","Array","isArray","truthyAriaPressedValues","classes","classnames","includes","trulyDisabled","Tag","buttonProps","type","anchorProps","disabledEvent","event","stopPropagation","preventDefault","shouldShowTooltip","length","descriptionId","describedById","commonProps","elementChildren","_react","createElement","Fragment","default","element","tooltipProps","placement","positionToPlacement","VisuallyHidden","id","exports","forwardRef","_default"],"sources":["@wordpress/components/src/button/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type {\n\tComponentPropsWithoutRef,\n\tForwardedRef,\n\tHTMLAttributes,\n\tMouseEvent,\n\tReactElement,\n} from 'react';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { ButtonProps, DeprecatedButtonProps } from './types';\nimport { positionToPlacement } from '../popover/utils';\n\nconst disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;\n\nfunction useDeprecatedProps( {\n\tisDefault,\n\tisPrimary,\n\tisSecondary,\n\tisTertiary,\n\tisLink,\n\tisPressed,\n\tisSmall,\n\tsize,\n\tvariant,\n\t...otherProps\n}: ButtonProps & DeprecatedButtonProps ): ButtonProps {\n\tlet computedSize = size;\n\tlet computedVariant = variant;\n\n\tconst newProps: { 'aria-pressed'?: boolean } = {\n\t\t// @todo Mark `isPressed` as deprecated\n\t\t'aria-pressed': isPressed,\n\t};\n\n\tif ( isSmall ) {\n\t\tcomputedSize ??= 'small';\n\t}\n\n\tif ( isPrimary ) {\n\t\tcomputedVariant ??= 'primary';\n\t}\n\n\tif ( isTertiary ) {\n\t\tcomputedVariant ??= 'tertiary';\n\t}\n\n\tif ( isSecondary ) {\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isDefault ) {\n\t\tdeprecated( 'wp.components.Button `isDefault` prop', {\n\t\t\tsince: '5.4',\n\t\t\talternative: 'variant=\"secondary\"',\n\t\t} );\n\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isLink ) {\n\t\tcomputedVariant ??= 'link';\n\t}\n\n\treturn {\n\t\t...newProps,\n\t\t...otherProps,\n\t\tsize: computedSize,\n\t\tvariant: computedVariant,\n\t};\n}\n\nexport function UnforwardedButton(\n\tprops: ButtonProps & DeprecatedButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\tisBusy,\n\t\tisDestructive,\n\t\tclassName,\n\t\tdisabled,\n\t\ticon,\n\t\ticonPosition = 'left',\n\t\ticonSize,\n\t\tshowTooltip,\n\t\ttooltipPosition,\n\t\tshortcut,\n\t\tlabel,\n\t\tchildren,\n\t\tsize = 'default',\n\t\ttext,\n\t\tvariant,\n\t\t__experimentalIsFocusable: isFocusable,\n\t\tdescribedBy,\n\t\t...buttonOrAnchorProps\n\t} = useDeprecatedProps( props );\n\n\tconst {\n\t\thref,\n\t\ttarget,\n\t\t'aria-checked': ariaChecked,\n\t\t'aria-pressed': ariaPressed,\n\t\t'aria-selected': ariaSelected,\n\t\t...additionalProps\n\t} = 'href' in buttonOrAnchorProps\n\t\t? buttonOrAnchorProps\n\t\t: { href: undefined, target: undefined, ...buttonOrAnchorProps };\n\n\tconst instanceId = useInstanceId(\n\t\tButton,\n\t\t'components-button__description'\n\t);\n\n\tconst hasChildren =\n\t\t( 'string' === typeof children && !! children ) \|\|\n\t\t( Array.isArray( children ) &&\n\t\t\tchildren?.[ 0 ] &&\n\t\t\tchildren[ 0 ] !== null &&\n\t\t\t// Tooltip should not considered as a child\n\t\t\tchildren?.[ 0 ]?.props?.className !== 'components-tooltip' );\n\n\tconst truthyAriaPressedValues: ( typeof ariaPressed )[] = [\n\t\ttrue,\n\t\t'true',\n\t\t'mixed',\n\t];\n\n\tconst classes = classnames( 'components-button', className, {\n\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t'is-secondary': variant === 'secondary',\n\t\t'is-primary': variant === 'primary',\n\t\t'is-small': size === 'small',\n\t\t'is-compact': size === 'compact',\n\t\t'is-tertiary': variant === 'tertiary',\n\n\t\t'is-pressed': truthyAriaPressedValues.includes( ariaPressed ),\n\t\t'is-pressed-mixed': ariaPressed === 'mixed',\n\n\t\t'is-busy': isBusy,\n\t\t'is-link': variant === 'link',\n\t\t'is-destructive': isDestructive,\n\t\t'has-text': !! icon && ( hasChildren \|\| text ),\n\t\t'has-icon': !! icon,\n\t} );\n\n\tconst trulyDisabled = disabled && ! isFocusable;\n\tconst Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';\n\tconst buttonProps: ComponentPropsWithoutRef< 'button' > =\n\t\tTag === 'button'\n\t\t\t? {\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tdisabled: trulyDisabled,\n\t\t\t\t\t'aria-checked': ariaChecked,\n\t\t\t\t\t'aria-pressed': ariaPressed,\n\t\t\t\t\t'aria-selected': ariaSelected,\n\t\t\t }\n\t\t\t: {};\n\tconst anchorProps: ComponentPropsWithoutRef< 'a' > =\n\t\tTag === 'a' ? { href, target } : {};\n\n\tif ( disabled && isFocusable ) {\n\t\t// In this case, the button will be disabled, but still focusable and\n\t\t// perceivable by screen reader users.\n\t\tbuttonProps[ 'aria-disabled' ] = true;\n\t\tanchorProps[ 'aria-disabled' ] = true;\n\n\t\tfor ( const disabledEvent of disabledEventsOnDisabledButton ) {\n\t\t\tadditionalProps[ disabledEvent ] = ( event: MouseEvent ) => {\n\t\t\t\tif ( event ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! trulyDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && !! label ) \|\|\n\t\t\t// There's a shortcut or...\n\t\t\t!! shortcut \|\|\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t! ( children as string \| ReactElement[] )?.length &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst descriptionId = describedBy ? instanceId : undefined;\n\n\tconst describedById =\n\t\tadditionalProps[ 'aria-describedby' ] \|\| descriptionId;\n\n\tconst commonProps = {\n\t\tclassName: classes,\n\t\t'aria-label': additionalProps[ 'aria-label' ] \|\| label,\n\t\t'aria-describedby': describedById,\n\t\tref,\n\t};\n\n\tconst elementChildren = (\n\t\t<>\n\t\t\t{ icon && iconPosition === 'left' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ text && <>{ text }</> }\n\t\t\t{ children }\n\t\t\t{ icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t</>\n\t);\n\n\tconst element =\n\t\tTag === 'a' ? (\n\t\t\t<a\n\t\t\t\t{ ...anchorProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</a>\n\t\t) : (\n\t\t\t<button\n\t\t\t\t{ ...buttonProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</button>\n\t\t);\n\n\t// In order to avoid some React reconciliation issues, we are always rendering\n\t// the `Tooltip` component even when `shouldShowTooltip` is `false`.\n\t// In order to make sure that the tooltip doesn't show when it shouldn't,\n\t// we don't pass the props to the `Tooltip` component.\n\tconst tooltipProps = shouldShowTooltip\n\t\t? {\n\t\t\t\ttext:\n\t\t\t\t\t( children as string \| ReactElement[] )?.length &&\n\t\t\t\t\tdescribedBy\n\t\t\t\t\t\t? describedBy\n\t\t\t\t\t\t: label,\n\t\t\t\tshortcut,\n\t\t\t\tplacement:\n\t\t\t\t\ttooltipPosition &&\n\t\t\t\t\t// Convert legacy `position` values to be used with the new `placement` prop\n\t\t\t\t\tpositionToPlacement( tooltipPosition ),\n\t\t }\n\t\t: {};\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip { ...tooltipProps }>{ element }</Tooltip>\n\t\t\t{ describedBy && (\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/\n Lets users take actions and make choices with a single click or tap.\n \n ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n * <Button\n * variant=\"primary\"\n * onClick={ handleClick }\n * >\n * Click here\n * </Button>\n * );\n * ```\n */\nexport const Button = forwardRef( UnforwardedButton );\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_deprecated","_element","_compose","_tooltip","_icon","_visuallyHidden","_utils","disabledEventsOnDisabledButton","useDeprecatedProps","isDefault","isPrimary","isSecondary","isTertiary","isLink","isPressed","isSmall","size","variant","otherProps","computedSize","computedVariant","newProps","_computedSize","_computedVariant","_computedVariant2","_computedVariant3","_computedVariant4","deprecated","since","alternative","_computedVariant5","UnforwardedButton","props","ref","__next40pxDefaultSize","isBusy","isDestructive","className","disabled","icon","iconPosition","iconSize","showTooltip","tooltipPosition","shortcut","label","children","text","__experimentalIsFocusable","isFocusable","describedBy","buttonOrAnchorProps","href","target","ariaChecked","ariaPressed","ariaSelected","additionalProps","undefined","instanceId","useInstanceId","Button","hasChildren","Array","isArray","truthyAriaPressedValues","classes","clsx","includes","trulyDisabled","Tag","buttonProps","type","anchorProps","disabledEvent","event","stopPropagation","preventDefault","shouldShowTooltip","length","descriptionId","describedById","commonProps","elementChildren","_react","createElement","Fragment","default","element","tooltipProps","placement","positionToPlacement","VisuallyHidden","id","exports","forwardRef","_default"],"sources":["@wordpress/components/src/button/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type {\n\tComponentPropsWithoutRef,\n\tForwardedRef,\n\tHTMLAttributes,\n\tMouseEvent,\n\tReactElement,\n} from 'react';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { ButtonProps, DeprecatedButtonProps } from './types';\nimport { positionToPlacement } from '../popover/utils';\n\nconst disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;\n\nfunction useDeprecatedProps( {\n\tisDefault,\n\tisPrimary,\n\tisSecondary,\n\tisTertiary,\n\tisLink,\n\tisPressed,\n\tisSmall,\n\tsize,\n\tvariant,\n\t...otherProps\n}: ButtonProps & DeprecatedButtonProps ): ButtonProps {\n\tlet computedSize = size;\n\tlet computedVariant = variant;\n\n\tconst newProps: { 'aria-pressed'?: boolean } = {\n\t\t// @todo Mark `isPressed` as deprecated\n\t\t'aria-pressed': isPressed,\n\t};\n\n\tif ( isSmall ) {\n\t\tcomputedSize ??= 'small';\n\t}\n\n\tif ( isPrimary ) {\n\t\tcomputedVariant ??= 'primary';\n\t}\n\n\tif ( isTertiary ) {\n\t\tcomputedVariant ??= 'tertiary';\n\t}\n\n\tif ( isSecondary ) {\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isDefault ) {\n\t\tdeprecated( 'wp.components.Button `isDefault` prop', {\n\t\t\tsince: '5.4',\n\t\t\talternative: 'variant=\"secondary\"',\n\t\t} );\n\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isLink ) {\n\t\tcomputedVariant ??= 'link';\n\t}\n\n\treturn {\n\t\t...newProps,\n\t\t...otherProps,\n\t\tsize: computedSize,\n\t\tvariant: computedVariant,\n\t};\n}\n\nexport function UnforwardedButton(\n\tprops: ButtonProps & DeprecatedButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\tisBusy,\n\t\tisDestructive,\n\t\tclassName,\n\t\tdisabled,\n\t\ticon,\n\t\ticonPosition = 'left',\n\t\ticonSize,\n\t\tshowTooltip,\n\t\ttooltipPosition,\n\t\tshortcut,\n\t\tlabel,\n\t\tchildren,\n\t\tsize = 'default',\n\t\ttext,\n\t\tvariant,\n\t\t__experimentalIsFocusable: isFocusable,\n\t\tdescribedBy,\n\t\t...buttonOrAnchorProps\n\t} = useDeprecatedProps( props );\n\n\tconst {\n\t\thref,\n\t\ttarget,\n\t\t'aria-checked': ariaChecked,\n\t\t'aria-pressed': ariaPressed,\n\t\t'aria-selected': ariaSelected,\n\t\t...additionalProps\n\t} = 'href' in buttonOrAnchorProps\n\t\t? buttonOrAnchorProps\n\t\t: { href: undefined, target: undefined, ...buttonOrAnchorProps };\n\n\tconst instanceId = useInstanceId(\n\t\tButton,\n\t\t'components-button__description'\n\t);\n\n\tconst hasChildren =\n\t\t( 'string' === typeof children && !! children ) \|\|\n\t\t( Array.isArray( children ) &&\n\t\t\tchildren?.[ 0 ] &&\n\t\t\tchildren[ 0 ] !== null &&\n\t\t\t// Tooltip should not considered as a child\n\t\t\tchildren?.[ 0 ]?.props?.className !== 'components-tooltip' );\n\n\tconst truthyAriaPressedValues: ( typeof ariaPressed )[] = [\n\t\ttrue,\n\t\t'true',\n\t\t'mixed',\n\t];\n\n\tconst classes = clsx( 'components-button', className, {\n\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t'is-secondary': variant === 'secondary',\n\t\t'is-primary': variant === 'primary',\n\t\t'is-small': size === 'small',\n\t\t'is-compact': size === 'compact',\n\t\t'is-tertiary': variant === 'tertiary',\n\n\t\t'is-pressed': truthyAriaPressedValues.includes( ariaPressed ),\n\t\t'is-pressed-mixed': ariaPressed === 'mixed',\n\n\t\t'is-busy': isBusy,\n\t\t'is-link': variant === 'link',\n\t\t'is-destructive': isDestructive,\n\t\t'has-text': !! icon && ( hasChildren \|\| text ),\n\t\t'has-icon': !! icon,\n\t} );\n\n\tconst trulyDisabled = disabled && ! isFocusable;\n\tconst Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';\n\tconst buttonProps: ComponentPropsWithoutRef< 'button' > =\n\t\tTag === 'button'\n\t\t\t? {\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tdisabled: trulyDisabled,\n\t\t\t\t\t'aria-checked': ariaChecked,\n\t\t\t\t\t'aria-pressed': ariaPressed,\n\t\t\t\t\t'aria-selected': ariaSelected,\n\t\t\t }\n\t\t\t: {};\n\tconst anchorProps: ComponentPropsWithoutRef< 'a' > =\n\t\tTag === 'a' ? { href, target } : {};\n\n\tif ( disabled && isFocusable ) {\n\t\t// In this case, the button will be disabled, but still focusable and\n\t\t// perceivable by screen reader users.\n\t\tbuttonProps[ 'aria-disabled' ] = true;\n\t\tanchorProps[ 'aria-disabled' ] = true;\n\n\t\tfor ( const disabledEvent of disabledEventsOnDisabledButton ) {\n\t\t\tadditionalProps[ disabledEvent ] = ( event: MouseEvent ) => {\n\t\t\t\tif ( event ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! trulyDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && !! label ) \|\|\n\t\t\t// There's a shortcut or...\n\t\t\t!! shortcut \|\|\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t! ( children as string \| ReactElement[] )?.length &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst descriptionId = describedBy ? instanceId : undefined;\n\n\tconst describedById =\n\t\tadditionalProps[ 'aria-describedby' ] \|\| descriptionId;\n\n\tconst commonProps = {\n\t\tclassName: classes,\n\t\t'aria-label': additionalProps[ 'aria-label' ] \|\| label,\n\t\t'aria-describedby': describedById,\n\t\tref,\n\t};\n\n\tconst elementChildren = (\n\t\t<>\n\t\t\t{ icon && iconPosition === 'left' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ text && <>{ text }</> }\n\t\t\t{ children }\n\t\t\t{ icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t</>\n\t);\n\n\tconst element =\n\t\tTag === 'a' ? (\n\t\t\t<a\n\t\t\t\t{ ...anchorProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</a>\n\t\t) : (\n\t\t\t<button\n\t\t\t\t{ ...buttonProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</button>\n\t\t);\n\n\t// In order to avoid some React reconciliation issues, we are always rendering\n\t// the `Tooltip` component even when `shouldShowTooltip` is `false`.\n\t// In order to make sure that the tooltip doesn't show when it shouldn't,\n\t// we don't pass the props to the `Tooltip` component.\n\tconst tooltipProps = shouldShowTooltip\n\t\t? {\n\t\t\t\ttext:\n\t\t\t\t\t( children as string \| ReactElement[] )?.length &&\n\t\t\t\t\tdescribedBy\n\t\t\t\t\t\t? describedBy\n\t\t\t\t\t\t: label,\n\t\t\t\tshortcut,\n\t\t\t\tplacement:\n\t\t\t\t\ttooltipPosition &&\n\t\t\t\t\t// Convert legacy `position` values to be used with the new `placement` prop\n\t\t\t\t\tpositionToPlacement( tooltipPosition ),\n\t\t }\n\t\t: {};\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip { ...tooltipProps }>{ element }</Tooltip>\n\t\t\t{ describedBy && (\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/\n Lets users take actions and make choices with a single click or tap.\n \n ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n * <Button\n * variant=\"primary\"\n * onClick={ handleClick }\n * >\n * Click here\n * </Button>\n * );\n * ```\n */\nexport const Button = forwardRef( UnforwardedButton );\nexport default Button;\n"],"mappings":"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","ignoreList":[]}

package/build/button-group/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ButtonGroup = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 /**
  * External dependencies
@@ -25,7 +25,7 @@ function UnforwardedButtonGroup(props, ref) {
     className,
     ...restProps
   } = props;
-  const classes = (0, _classnames.default)('components-button-group', className);
+  const classes = (0, _clsx.default)('components-button-group', className);
   return (0, _react.createElement)("div", {
     ref: ref,
     role: "group",