@wordpress/components 23.3.5 → 23.5.0

package/build/tree-grid/roving-tab-index-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index-context.js"],"names":["RovingTabIndexContext","useRovingTabIndexContext","RovingTabIndexProvider","Provider"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,qBAAqB,GAAG,6BAA9B;;AACO,MAAMC,wBAAwB,GAAG,MACvC,yBAAYD,qBAAZ,CADM;;;AAEA,MAAME,sBAAsB,GAAGF,qBAAqB,CAACG,QAArD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\nconst RovingTabIndexContext = createContext();\nexport const useRovingTabIndexContext = () =>\n\tuseContext( RovingTabIndexContext );\nexport const RovingTabIndexProvider = RovingTabIndexContext.Provider;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index-context.ts"],"names":["RovingTabIndexContext","undefined","useRovingTabIndexContext","RovingTabIndexProvider","Provider"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,qBAAqB,GAAG,4BAQ3BC,SAR2B,CAA9B;;AASO,MAAMC,wBAAwB,GAAG,MACvC,yBAAYF,qBAAZ,CADM;;;AAEA,MAAMG,sBAAsB,GAAGH,qBAAqB,CAACI,QAArD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\nconst RovingTabIndexContext = createContext<\n\t| {\n\t\t\tlastFocusedElement: HTMLElement | undefined;\n\t\t\tsetLastFocusedElement: React.Dispatch<\n\t\t\t\tReact.SetStateAction< HTMLElement | undefined >\n\t\t\t>;\n\t  }\n\t| undefined\n>( undefined );\nexport const useRovingTabIndexContext = () =>\n\tuseContext( RovingTabIndexContext );\nexport const RovingTabIndexProvider = RovingTabIndexContext.Provider;\n"]}

package/build/tree-grid/roving-tab-index-item.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.RovingTabIndexItem = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -16,14 +16,15 @@ var _rovingTabIndexContext = require("./roving-tab-index-context");
 /**
  * Internal dependencies
  */
-var _default = (0, _element.forwardRef)(function RovingTabIndexItem(_ref, forwardedRef) {
+const RovingTabIndexItem = (0, _element.forwardRef)(function UnforwardedRovingTabIndexItem(_ref, forwardedRef) {
   let {
     children,
     as: Component,
     ...props
   } = _ref;
   const localRef = (0, _element.useRef)();
-  const ref = forwardedRef || localRef;
+  const ref = forwardedRef || localRef; // @ts-expect-error - We actually want to throw an error if this is undefined.
+
   const {
     lastFocusedElement,
     setLastFocusedElement
@@ -31,10 +32,14 @@ var _default = (0, _element.forwardRef)(function RovingTabIndexItem(_ref, forwar
   let tabIndex;
 
   if (lastFocusedElement) {
-    tabIndex = lastFocusedElement === ref.current ? 0 : -1;
+    tabIndex = lastFocusedElement === ( // TODO: The original implementation simply used `ref.current` here, assuming
+    // that a forwarded ref would always be an object, which is not necessarily true.
+    // This workaround maintains the original runtime behavior in a type-safe way,
+    // but should be revisited.
+    'current' in ref ? ref.current : undefined) ? 0 : -1;
   }
 
-  const onFocus = event => setLastFocusedElement(event.target);
+  const onFocus = event => setLastFocusedElement === null || setLastFocusedElement === void 0 ? void 0 : setLastFocusedElement(event.target);
 
   const allProps = {
     ref,
@@ -47,8 +52,10 @@ var _default = (0, _element.forwardRef)(function RovingTabIndexItem(_ref, forwar
     return children(allProps);
   }
 
+  if (!Component) return null;
   return (0, _element.createElement)(Component, allProps, children);
 });
-
+exports.RovingTabIndexItem = RovingTabIndexItem;
+var _default = RovingTabIndexItem;
 exports.default = _default;
 //# sourceMappingURL=roving-tab-index-item.js.map

package/build/tree-grid/roving-tab-index-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index-item.js"],"names":["RovingTabIndexItem","forwardedRef","children","as","Component","props","localRef","ref","lastFocusedElement","setLastFocusedElement","tabIndex","current","onFocus","event","target","allProps"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;eAGe,yBAAY,SAASA,kBAAT,OAE1BC,YAF0B,EAGzB;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,EAAE,EAAEC,SAAhB;AAA2B,OAAGC;AAA9B,GAEC;AACD,QAAMC,QAAQ,GAAG,sBAAjB;AACA,QAAMC,GAAG,GAAGN,YAAY,IAAIK,QAA5B;AACA,QAAM;AAAEE,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MACL,sDADD;AAEA,MAAIC,QAAJ;;AAEA,MAAKF,kBAAL,EAA0B;AACzBE,IAAAA,QAAQ,GAAGF,kBAAkB,KAAKD,GAAG,CAACI,OAA3B,GAAqC,CAArC,GAAyC,CAAC,CAArD;AACA;;AAED,QAAMC,OAAO,GAAKC,KAAF,IAAaJ,qBAAqB,CAAEI,KAAK,CAACC,MAAR,CAAlD;;AACA,QAAMC,QAAQ,GAAG;AAAER,IAAAA,GAAF;AAAOG,IAAAA,QAAP;AAAiBE,IAAAA,OAAjB;AAA0B,OAAGP;AAA7B,GAAjB;;AAEA,MAAK,OAAOH,QAAP,KAAoB,UAAzB,EAAsC;AACrC,WAAOA,QAAQ,CAAEa,QAAF,CAAf;AACA;;AAED,SAAO,4BAAC,SAAD,EAAgBA,QAAhB,EAA6Bb,QAA7B,CAAP;AACA,CAtBc,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useRovingTabIndexContext } from './roving-tab-index-context';\n\nexport default forwardRef( function RovingTabIndexItem(\n\t{ children, as: Component, ...props },\n\tforwardedRef\n) {\n\tconst localRef = useRef();\n\tconst ref = forwardedRef || localRef;\n\tconst { lastFocusedElement, setLastFocusedElement } =\n\t\tuseRovingTabIndexContext();\n\tlet tabIndex;\n\n\tif ( lastFocusedElement ) {\n\t\ttabIndex = lastFocusedElement === ref.current ? 0 : -1;\n\t}\n\n\tconst onFocus = ( event ) => setLastFocusedElement( event.target );\n\tconst allProps = { ref, tabIndex, onFocus, ...props };\n\n\tif ( typeof children === 'function' ) {\n\t\treturn children( allProps );\n\t}\n\n\treturn <Component { ...allProps }>{ children }</Component>;\n} );\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index-item.tsx"],"names":["RovingTabIndexItem","UnforwardedRovingTabIndexItem","forwardedRef","children","as","Component","props","localRef","ref","lastFocusedElement","setLastFocusedElement","tabIndex","current","undefined","onFocus","event","target","allProps"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAIO,MAAMA,kBAAkB,GAAG,yBACjC,SAASC,6BAAT,OAECC,YAFD,EAGE;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,EAAE,EAAEC,SAAhB;AAA2B,OAAGC;AAA9B,GAEC;AACD,QAAMC,QAAQ,GAAG,sBAAjB;AACA,QAAMC,GAAG,GAAGN,YAAY,IAAIK,QAA5B,CAFC,CAGD;;AACA,QAAM;AAAEE,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MACL,sDADD;AAEA,MAAIC,QAAJ;;AAEA,MAAKF,kBAAL,EAA0B;AACzBE,IAAAA,QAAQ,GACPF,kBAAkB,OAClB;AACA;AACA;AACA;AACE,iBAAaD,GAAb,GAAmBA,GAAG,CAACI,OAAvB,GAAiCC,SALjB,CAAlB,GAMG,CANH,GAOG,CAAC,CARL;AASA;;AAED,QAAMC,OAA+C,GAAKC,KAAF,IACvDL,qBADuD,aACvDA,qBADuD,uBACvDA,qBAAqB,CAAIK,KAAK,CAACC,MAAV,CADtB;;AAEA,QAAMC,QAAQ,GAAG;AAAET,IAAAA,GAAF;AAAOG,IAAAA,QAAP;AAAiBG,IAAAA,OAAjB;AAA0B,OAAGR;AAA7B,GAAjB;;AAEA,MAAK,OAAOH,QAAP,KAAoB,UAAzB,EAAsC;AACrC,WAAOA,QAAQ,CAAEc,QAAF,CAAf;AACA;;AAED,MAAK,CAAEZ,SAAP,EAAmB,OAAO,IAAP;AAEnB,SAAO,4BAAC,SAAD,EAAgBY,QAAhB,EAA6Bd,QAA7B,CAAP;AACA,CAnCgC,CAA3B;;eAsCQH,kB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useRovingTabIndexContext } from './roving-tab-index-context';\nimport type { RovingTabIndexItemProps } from './types';\n\nexport const RovingTabIndexItem = forwardRef(\n\tfunction UnforwardedRovingTabIndexItem(\n\t\t{ children, as: Component, ...props }: RovingTabIndexItemProps,\n\t\tforwardedRef: React.ForwardedRef< any >\n\t) {\n\t\tconst localRef = useRef< any >();\n\t\tconst ref = forwardedRef || localRef;\n\t\t// @ts-expect-error - We actually want to throw an error if this is undefined.\n\t\tconst { lastFocusedElement, setLastFocusedElement } =\n\t\t\tuseRovingTabIndexContext();\n\t\tlet tabIndex;\n\n\t\tif ( lastFocusedElement ) {\n\t\t\ttabIndex =\n\t\t\t\tlastFocusedElement ===\n\t\t\t\t// TODO: The original implementation simply used `ref.current` here, assuming\n\t\t\t\t// that a forwarded ref would always be an object, which is not necessarily true.\n\t\t\t\t// This workaround maintains the original runtime behavior in a type-safe way,\n\t\t\t\t// but should be revisited.\n\t\t\t\t( 'current' in ref ? ref.current : undefined )\n\t\t\t\t\t? 0\n\t\t\t\t\t: -1;\n\t\t}\n\n\t\tconst onFocus: React.FocusEventHandler< HTMLElement > = ( event ) =>\n\t\t\tsetLastFocusedElement?.( event.target );\n\t\tconst allProps = { ref, tabIndex, onFocus, ...props };\n\n\t\tif ( typeof children === 'function' ) {\n\t\t\treturn children( allProps );\n\t\t}\n\n\t\tif ( ! Component ) return null;\n\n\t\treturn <Component { ...allProps }>{ children }</Component>;\n\t}\n);\n\nexport default RovingTabIndexItem;\n"]}

package/build/tree-grid/roving-tab-index.js

@@ -21,9 +21,6 @@ var _rovingTabIndexContext = require("./roving-tab-index-context");
  * Provider for adding roving tab index behaviors to tree grid structures.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- *
- * @param {Object}    props          Component props.
- * @param {WPElement} props.children Children to be rendered
  */
 function RovingTabIndex(_ref) {
   let {

package/build/tree-grid/roving-tab-index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index.js"],"names":["RovingTabIndex","children","lastFocusedElement","setLastFocusedElement","providerValue"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,cAAT,OAAwC;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AACtD,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IAAgD,wBAAtD,CADsD,CAGtD;AACA;AACA;;AACA,QAAMC,aAAa,GAAG,sBACrB,OAAQ;AAAEF,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,GAAR,CADqB,EAErB,CAAED,kBAAF,CAFqB,CAAtB;AAKA,SACC,4BAAC,6CAAD;AAAwB,IAAA,KAAK,EAAGE;AAAhC,KACGH,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { RovingTabIndexProvider } from './roving-tab-index-context';\n\n/**\n * Provider for adding roving tab index behaviors to tree grid structures.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md\n *\n * @param {Object}    props          Component props.\n * @param {WPElement} props.children Children to be rendered\n */\nexport default function RovingTabIndex( { children } ) {\n\tconst [ lastFocusedElement, setLastFocusedElement ] = useState();\n\n\t// Use `useMemo` to avoid creation of a new object for the providerValue\n\t// on every render. Only create a new object when the `lastFocusedElement`\n\t// value changes.\n\tconst providerValue = useMemo(\n\t\t() => ( { lastFocusedElement, setLastFocusedElement } ),\n\t\t[ lastFocusedElement ]\n\t);\n\n\treturn (\n\t\t<RovingTabIndexProvider value={ providerValue }>\n\t\t\t{ children }\n\t\t</RovingTabIndexProvider>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/roving-tab-index.tsx"],"names":["RovingTabIndex","children","lastFocusedElement","setLastFocusedElement","providerValue"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACe,SAASA,cAAT,OAIX;AAAA,MAJoC;AACvCC,IAAAA;AADuC,GAIpC;AACH,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IACL,wBADD,CADG,CAIH;AACA;AACA;;AACA,QAAMC,aAAa,GAAG,sBACrB,OAAQ;AAAEF,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,GAAR,CADqB,EAErB,CAAED,kBAAF,CAFqB,CAAtB;AAKA,SACC,4BAAC,6CAAD;AAAwB,IAAA,KAAK,EAAGE;AAAhC,KACGH,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { RovingTabIndexProvider } from './roving-tab-index-context';\n\n/**\n * Provider for adding roving tab index behaviors to tree grid structures.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md\n */\nexport default function RovingTabIndex( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst [ lastFocusedElement, setLastFocusedElement ] =\n\t\tuseState< HTMLElement >();\n\n\t// Use `useMemo` to avoid creation of a new object for the providerValue\n\t// on every render. Only create a new object when the `lastFocusedElement`\n\t// value changes.\n\tconst providerValue = useMemo(\n\t\t() => ( { lastFocusedElement, setLastFocusedElement } ),\n\t\t[ lastFocusedElement ]\n\t);\n\n\treturn (\n\t\t<RovingTabIndexProvider value={ providerValue }>\n\t\t\t{ children }\n\t\t</RovingTabIndexProvider>\n\t);\n}\n"]}

package/build/tree-grid/row.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TreeGridRow = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -14,7 +14,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 /**
  * WordPress dependencies
  */
-function TreeGridRow(_ref, ref) {
+function UnforwardedTreeGridRow(_ref, ref) {
   let {
     children,
     level,
@@ -23,24 +23,26 @@ function TreeGridRow(_ref, ref) {
     isExpanded,
     ...props
   } = _ref;
-  return (// Disable reason: Due to an error in the ARIA 1.1 specification, the
-    // aria-posinset and aria-setsize properties are not supported on row
-    // elements. This is being corrected in ARIA 1.2. Consequently, the
-    // linting rule fails when validating this markup.
-    //
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    (0, _element.createElement)("tr", (0, _extends2.default)({}, props, {
-      ref: ref,
-      role: "row",
-      "aria-level": level,
-      "aria-posinset": positionInSet,
-      "aria-setsize": setSize,
-      "aria-expanded": isExpanded
-    }), children)
-  );
+  return (0, _element.createElement)("tr", (0, _extends2.default)({}, props, {
+    ref: ref,
+    role: "row",
+    "aria-level": level,
+    "aria-posinset": positionInSet,
+    "aria-setsize": setSize,
+    "aria-expanded": isExpanded
+  }), children);
 }
+/**
+ * `TreeGridRow` is used to create a tree hierarchy.
+ * It is not a visually styled component, but instead helps with adding
+ * keyboard navigation and roving tab index behaviors to tree grid structures.
+ *
+ * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
+ */
 
-var _default = (0, _element.forwardRef)(TreeGridRow);
 
+const TreeGridRow = (0, _element.forwardRef)(UnforwardedTreeGridRow);
+exports.TreeGridRow = TreeGridRow;
+var _default = TreeGridRow;
 exports.default = _default;
 //# sourceMappingURL=row.js.map

package/build/tree-grid/row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tree-grid/row.js"],"names":["TreeGridRow","ref","children","level","positionInSet","setSize","isExpanded","props"],"mappings":";;;;;;;;;AAGA;;;;AAHA;AACA;AACA;AAGA,SAASA,WAAT,OAECC,GAFD,EAGE;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,aAAnB;AAAkCC,IAAAA,OAAlC;AAA2CC,IAAAA,UAA3C;AAAuD,OAAGC;AAA1D,GAEC;AACD,SACC;AACA;AACA;AACA;AACA;AACA;AACA,iEACMA,KADN;AAEC,MAAA,GAAG,EAAGN,GAFP;AAGC,MAAA,IAAI,EAAC,KAHN;AAIC,oBAAaE,KAJd;AAKC,uBAAgBC,aALjB;AAMC,sBAAeC,OANhB;AAOC,uBAAgBC;AAPjB,QASGJ,QATH;AAPD;AAmBA;;eAEc,yBAAYF,WAAZ,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\nfunction TreeGridRow(\n\t{ children, level, positionInSet, setSize, isExpanded, ...props },\n\tref\n) {\n\treturn (\n\t\t// Disable reason: Due to an error in the ARIA 1.1 specification, the\n\t\t// aria-posinset and aria-setsize properties are not supported on row\n\t\t// elements. This is being corrected in ARIA 1.2. Consequently, the\n\t\t// linting rule fails when validating this markup.\n\t\t//\n\t\t// eslint-disable-next-line jsx-a11y/role-supports-aria-props\n\t\t<tr\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\trole=\"row\"\n\t\t\taria-level={ level }\n\t\t\taria-posinset={ positionInSet }\n\t\t\taria-setsize={ setSize }\n\t\t\taria-expanded={ isExpanded }\n\t\t>\n\t\t\t{ children }\n\t\t</tr>\n\t);\n}\n\nexport default forwardRef( TreeGridRow );\n"]}
+{"version":3,"sources":["@wordpress/components/src/tree-grid/row.tsx"],"names":["UnforwardedTreeGridRow","ref","children","level","positionInSet","setSize","isExpanded","props","TreeGridRow"],"mappings":";;;;;;;;;AAGA;;;;AAHA;AACA;AACA;AASA,SAASA,sBAAT,OASCC,GATD,EAUE;AAAA,MATD;AACCC,IAAAA,QADD;AAECC,IAAAA,KAFD;AAGCC,IAAAA,aAHD;AAICC,IAAAA,OAJD;AAKCC,IAAAA,UALD;AAMC,OAAGC;AANJ,GASC;AACD,SACC,6DACMA,KADN;AAEC,IAAA,GAAG,EAAGN,GAFP;AAGC,IAAA,IAAI,EAAC,KAHN;AAIC,kBAAaE,KAJd;AAKC,qBAAgBC,aALjB;AAMC,oBAAeC,OANhB;AAOC,qBAAgBC;AAPjB,MASGJ,QATH,CADD;AAaA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMM,WAAW,GAAG,yBAAYR,sBAAZ,CAApB;;eAEQQ,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TreeGridRowProps } from './types';\n\nfunction UnforwardedTreeGridRow(\n\t{\n\t\tchildren,\n\t\tlevel,\n\t\tpositionInSet,\n\t\tsetSize,\n\t\tisExpanded,\n\t\t...props\n\t}: WordPressComponentProps< TreeGridRowProps, 'tr', false >,\n\tref: React.ForwardedRef< HTMLTableRowElement >\n) {\n\treturn (\n\t\t<tr\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\trole=\"row\"\n\t\t\taria-level={ level }\n\t\t\taria-posinset={ positionInSet }\n\t\t\taria-setsize={ setSize }\n\t\t\taria-expanded={ isExpanded }\n\t\t>\n\t\t\t{ children }\n\t\t</tr>\n\t);\n}\n\n/**\n * `TreeGridRow` is used to create a tree hierarchy.\n * It is not a visually styled component, but instead helps with adding\n * keyboard navigation and roving tab index behaviors to tree grid structures.\n *\n * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}\n */\nexport const TreeGridRow = forwardRef( UnforwardedTreeGridRow );\n\nexport default TreeGridRow;\n"]}

package/build/tree-grid/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/tree-grid/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/ui/context/context-connect.js

@@ -34,8 +34,8 @@ var _getStyledClassNameFromKey = require("./get-styled-class-name-from-key");
  * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
  * within the Context system under a specified namespace.
  *
- * @param  Component The component to register into the Context system.
- * @param  namespace The namespace to register the component under.
+ * @param Component The component to register into the Context system.
+ * @param namespace The namespace to register the component under.
  * @return The connected WordPressComponent
  */
 function contextConnect(Component, namespace) {
@@ -47,8 +47,8 @@ function contextConnect(Component, namespace) {
  * "Connects" (or registers) a component within the Context system under a specified namespace.
  * Does not forward a ref.
  *
- * @param  Component The component to register into the Context system.
- * @param  namespace The namespace to register the component under.
+ * @param Component The component to register into the Context system.
+ * @param namespace The namespace to register the component under.
  * @return The connected WordPressComponent
  */
 
@@ -92,7 +92,7 @@ function _contextConnect(Component, namespace, options) {
 /**
  * Attempts to retrieve the connected namespace from a component.
  *
- * @param  Component The component to retrieve a namespace from.
+ * @param Component The component to retrieve a namespace from.
  * @return The connected namespaces.
  */
 
@@ -117,8 +117,8 @@ function getConnectNamespace(Component) {
 /**
  * Checks to see if a component is connected within the Context system.
  *
- * @param  Component The component to retrieve a namespace from.
- * @param  match     The namespace to check.
+ * @param Component The component to retrieve a namespace from.
+ * @param match     The namespace to check.
  */
 
 

package/build/ui/context/context-connect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/context/context-connect.ts"],"names":["contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","mergedNamespace","CONNECT_STATIC_NAMESPACE","Array","isArray","Object","assign","Set","displayName","selector","getConnectNamespace","namespaces","type","hasConnectNamespace","match","includes","some","result"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactChild, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONNECT_STATIC_NAMESPACE } from './constants';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport type { WordPressComponentFromProps } from '.';\n\ntype AcceptsTwoArgs<\n\tF extends ( ...args: any ) => any,\n\tErrorMessage = never\n> = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;\n\ntype ContextConnectOptions = {\n\tforwardsRef?: boolean;\n};\n\n/**\n * Forwards ref (React.ForwardRef) and \"Connects\" (or registers) a component\n * within the Context system under a specified namespace.\n *\n * @param  Component The component to register into the Context system.\n * @param  namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null\n>(\n\tComponent: C &\n\t\tAcceptsTwoArgs<\n\t\t\tC,\n\t\t\t'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'\n\t\t>,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace, { forwardsRef: true } );\n}\n\n/**\n * \"Connects\" (or registers) a component within the Context system under a specified namespace.\n * Does not forward a ref.\n *\n * @param  Component The component to register into the Context system.\n * @param  namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnectWithoutRef< P >(\n\tComponent: ( props: P ) => JSX.Element | null,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace );\n}\n\n// This is an (experimental) evolution of the initial connect() HOC.\n// The hope is that we can improve render performance by removing functional\n// component wrappers.\nfunction _contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n\tO extends ContextConnectOptions\n>(\n\tComponent: C,\n\tnamespace: string,\n\toptions?: O\n): WordPressComponentFromProps<\n\tParameters< C >[ 0 ],\n\tO[ 'forwardsRef' ] extends true ? true : false\n> {\n\tconst WrappedComponent = options?.forwardsRef\n\t\t? forwardRef< any, Parameters< C >[ 0 ] >( Component )\n\t\t: Component;\n\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'contextConnect: Please provide a namespace' );\n\t}\n\n\t// @ts-expect-error internal property\n\tlet mergedNamespace = WrappedComponent[ CONNECT_STATIC_NAMESPACE ] || [\n\t\tnamespace,\n\t];\n\n\t/**\n\t * Consolidate (merge) namespaces before attaching it to the WrappedComponent.\n\t */\n\tif ( Array.isArray( namespace ) ) {\n\t\tmergedNamespace = [ ...mergedNamespace, ...namespace ];\n\t}\n\tif ( typeof namespace === 'string' ) {\n\t\tmergedNamespace = [ ...mergedNamespace, namespace ];\n\t}\n\n\t// @ts-expect-error We can't rely on inferred types here because of the\n\t// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33\n\treturn Object.assign( WrappedComponent, {\n\t\t[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],\n\t\tdisplayName: namespace,\n\t\tselector: `.${ getStyledClassNameFromKey( namespace ) }`,\n\t} );\n}\n\n/**\n * Attempts to retrieve the connected namespace from a component.\n *\n * @param  Component The component to retrieve a namespace from.\n * @return The connected namespaces.\n */\nexport function getConnectNamespace(\n\tComponent: ReactChild | undefined | {}\n): string[] {\n\tif ( ! Component ) return [];\n\n\tlet namespaces = [];\n\n\t// @ts-ignore internal property\n\tif ( Component[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore internal property\n\t\tnamespaces = Component[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\t// @ts-ignore\n\tif ( Component.type && Component.type[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore\n\t\tnamespaces = Component.type[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\treturn namespaces;\n}\n\n/**\n * Checks to see if a component is connected within the Context system.\n *\n * @param  Component The component to retrieve a namespace from.\n * @param  match     The namespace to check.\n */\nexport function hasConnectNamespace(\n\tComponent: ReactNode,\n\tmatch: string[] | string\n): boolean {\n\tif ( ! Component ) return false;\n\n\tif ( typeof match === 'string' ) {\n\t\treturn getConnectNamespace( Component ).includes( match );\n\t}\n\tif ( Array.isArray( match ) ) {\n\t\treturn match.some( ( result ) =>\n\t\t\tgetConnectNamespace( Component ).includes( result )\n\t\t);\n\t}\n\n\treturn false;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/context/context-connect.ts"],"names":["contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","mergedNamespace","CONNECT_STATIC_NAMESPACE","Array","isArray","Object","assign","Set","displayName","selector","getConnectNamespace","namespaces","type","hasConnectNamespace","match","includes","some","result"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactChild, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONNECT_STATIC_NAMESPACE } from './constants';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport type { WordPressComponentFromProps } from '.';\n\ntype AcceptsTwoArgs<\n\tF extends ( ...args: any ) => any,\n\tErrorMessage = never\n> = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;\n\ntype ContextConnectOptions = {\n\tforwardsRef?: boolean;\n};\n\n/**\n * Forwards ref (React.ForwardRef) and \"Connects\" (or registers) a component\n * within the Context system under a specified namespace.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null\n>(\n\tComponent: C &\n\t\tAcceptsTwoArgs<\n\t\t\tC,\n\t\t\t'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'\n\t\t>,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace, { forwardsRef: true } );\n}\n\n/**\n * \"Connects\" (or registers) a component within the Context system under a specified namespace.\n * Does not forward a ref.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnectWithoutRef< P >(\n\tComponent: ( props: P ) => JSX.Element | null,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace );\n}\n\n// This is an (experimental) evolution of the initial connect() HOC.\n// The hope is that we can improve render performance by removing functional\n// component wrappers.\nfunction _contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n\tO extends ContextConnectOptions\n>(\n\tComponent: C,\n\tnamespace: string,\n\toptions?: O\n): WordPressComponentFromProps<\n\tParameters< C >[ 0 ],\n\tO[ 'forwardsRef' ] extends true ? true : false\n> {\n\tconst WrappedComponent = options?.forwardsRef\n\t\t? forwardRef< any, Parameters< C >[ 0 ] >( Component )\n\t\t: Component;\n\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'contextConnect: Please provide a namespace' );\n\t}\n\n\t// @ts-expect-error internal property\n\tlet mergedNamespace = WrappedComponent[ CONNECT_STATIC_NAMESPACE ] || [\n\t\tnamespace,\n\t];\n\n\t/**\n\t * Consolidate (merge) namespaces before attaching it to the WrappedComponent.\n\t */\n\tif ( Array.isArray( namespace ) ) {\n\t\tmergedNamespace = [ ...mergedNamespace, ...namespace ];\n\t}\n\tif ( typeof namespace === 'string' ) {\n\t\tmergedNamespace = [ ...mergedNamespace, namespace ];\n\t}\n\n\t// @ts-expect-error We can't rely on inferred types here because of the\n\t// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33\n\treturn Object.assign( WrappedComponent, {\n\t\t[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],\n\t\tdisplayName: namespace,\n\t\tselector: `.${ getStyledClassNameFromKey( namespace ) }`,\n\t} );\n}\n\n/**\n * Attempts to retrieve the connected namespace from a component.\n *\n * @param Component The component to retrieve a namespace from.\n * @return The connected namespaces.\n */\nexport function getConnectNamespace(\n\tComponent: ReactChild | undefined | {}\n): string[] {\n\tif ( ! Component ) return [];\n\n\tlet namespaces = [];\n\n\t// @ts-ignore internal property\n\tif ( Component[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore internal property\n\t\tnamespaces = Component[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\t// @ts-ignore\n\tif ( Component.type && Component.type[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore\n\t\tnamespaces = Component.type[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\treturn namespaces;\n}\n\n/**\n * Checks to see if a component is connected within the Context system.\n *\n * @param Component The component to retrieve a namespace from.\n * @param match     The namespace to check.\n */\nexport function hasConnectNamespace(\n\tComponent: ReactNode,\n\tmatch: string[] | string\n): boolean {\n\tif ( ! Component ) return false;\n\n\tif ( typeof match === 'string' ) {\n\t\treturn getConnectNamespace( Component ).includes( match );\n\t}\n\tif ( Array.isArray( match ) ) {\n\t\treturn match.some( ( result ) =>\n\t\t\tgetConnectNamespace( Component ).includes( result )\n\t\t);\n\t}\n\n\treturn false;\n}\n"]}

package/build/ui/context/context-system-provider.js

@@ -9,9 +9,11 @@ exports.useComponentsContext = exports.ContextSystemProvider = exports.Component
 
 var _element = require("@wordpress/element");
 
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
+
 var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
 
-var _lodash = require("lodash");
+var _isPlainObject = require("is-plain-object");
 
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
 
@@ -62,7 +64,7 @@ function useContextSystemBridge(_ref) {
   }, [value]); // `parentContext` will always be memoized (i.e., the result of this hook itself)
   // or the default value from when the `ComponentsContext` was originally
   // initialized (which will never change, it's a static variable)
-  // so this memoization will prevent `merge` and `JSON.parse/stringify` from rerunning unless
+  // so this memoization will prevent `deepmerge()` from rerunning unless
   // the references to `value` change OR the `parentContext` has an actual material change
   // (because again, it's guaranteed to be memoized or a static reference to the empty object
   // so we know that the only changes for `parentContext` are material ones... i.e., why we
@@ -70,11 +72,13 @@ function useContextSystemBridge(_ref) {
   // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
   // correctly warning when the `value` isn't being properly memoized. All of that to say
   // that this should be super safe to assume that `useMemo` will only run on actual
-  // changes to the two dependencies, therefore saving us calls to `merge` and `JSON.parse/stringify`!
+  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!
 
   const config = (0, _element.useMemo)(() => {
     // Deep clone `parentContext` to avoid mutating it later.
-    return (0, _lodash.merge)(JSON.parse(JSON.stringify(parentContext)), value);
+    return (0, _deepmerge.default)(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {
+      isMergeableObject: _isPlainObject.isPlainObject
+    });
   }, [parentContext, value]);
   return config;
 }

package/build/ui/context/context-system-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/context/context-system-provider.js"],"names":["ComponentsContext","useComponentsContext","useContextSystemBridge","value","parentContext","valueRef","current","JSON","stringify","config","parse","BaseContextSystemProvider","children","contextValue","ContextSystemProvider"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAYA;;AAKA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AAGO,MAAMA,iBAAiB,GAAG;AAChC;AAAqC,EADL,CAA1B;;;AAGA,MAAMC,oBAAoB,GAAG,MAAM,yBAAYD,iBAAZ,CAAnC;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,SAASE,sBAAT,OAA6C;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AAC5C,QAAMC,aAAa,GAAGH,oBAAoB,EAA1C;AAEA,QAAMI,QAAQ,GAAG,qBAAQF,KAAR,CAAjB;AAEA,8BAAiB,MAAM;AACtB,SACC;AACA,qBAAeE,QAAQ,CAACC,OAAxB,EAAiCH,KAAjC,KACA;AACAE,IAAAA,QAAQ,CAACC,OAAT,KAAqBH,KAJtB,EAKE;AACD,qHAAO,gCAAgCI,IAAI,CAACC,SAAL,CAAgBL,KAAhB,CAAyB,EAAhE;AACA;AACD,GATD,EASG,CAAEA,KAAF,CATH,EAL4C,CAgB5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,QAAMM,MAAM,GAAG,sBAAS,MAAM;AAC7B;AACA,WAAO,mBAAOF,IAAI,CAACG,KAAL,CAAYH,IAAI,CAACC,SAAL,CAAgBJ,aAAhB,CAAZ,CAAP,EAAsDD,KAAtD,CAAP;AACA,GAHc,EAGZ,CAAEC,aAAF,EAAiBD,KAAjB,CAHY,CAAf;AAKA,SAAOM,MAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,yBAAyB,GAAG,SAA2B;AAAA,MAAzB;AAAEC,IAAAA,QAAF;AAAYT,IAAAA;AAAZ,GAAyB;AAC5D,QAAMU,YAAY,GAAGX,sBAAsB,CAAE;AAAEC,IAAAA;AAAF,GAAF,CAA3C;AAEA,SACC,4BAAC,iBAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGU;AAApC,KACGD,QADH,CADD;AAKA,CARD;;AAUO,MAAME,qBAAqB,GAAG,mBAAMH,yBAAN,CAA9B","sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { merge } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../../utils';\n\nexport const ComponentsContext = createContext(\n\t/** @type {Record<string, any>} */ ( {} )\n);\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tfastDeepEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `merge` and `JSON.parse/stringify` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `merge` and `JSON.parse/stringify`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn merge( JSON.parse( JSON.stringify( parentContext ) ), value );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/context/context-system-provider.js"],"names":["ComponentsContext","useComponentsContext","useContextSystemBridge","value","parentContext","valueRef","current","JSON","stringify","config","isMergeableObject","isPlainObject","BaseContextSystemProvider","children","contextValue","ContextSystemProvider"],"mappings":";;;;;;;;;AAUA;;AAPA;;AACA;;AACA;;AAYA;;AAKA;;AAtBA;AACA;AACA;;AAKA;AACA;AACA;;AAUA;AACA;AACA;AAGO,MAAMA,iBAAiB,GAAG;AAChC;AAAqC,EADL,CAA1B;;;AAGA,MAAMC,oBAAoB,GAAG,MAAM,yBAAYD,iBAAZ,CAAnC;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,SAASE,sBAAT,OAA6C;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AAC5C,QAAMC,aAAa,GAAGH,oBAAoB,EAA1C;AAEA,QAAMI,QAAQ,GAAG,qBAAQF,KAAR,CAAjB;AAEA,8BAAiB,MAAM;AACtB,SACC;AACA,qBAAeE,QAAQ,CAACC,OAAxB,EAAiCH,KAAjC,KACA;AACAE,IAAAA,QAAQ,CAACC,OAAT,KAAqBH,KAJtB,EAKE;AACD,qHAAO,gCAAgCI,IAAI,CAACC,SAAL,CAAgBL,KAAhB,CAAyB,EAAhE;AACA;AACD,GATD,EASG,CAAEA,KAAF,CATH,EAL4C,CAgB5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,QAAMM,MAAM,GAAG,sBAAS,MAAM;AAC7B;AACA,WAAO,wBAAWL,aAAX,aAAWA,aAAX,cAAWA,aAAX,GAA4B,EAA5B,EAAgCD,KAAhC,aAAgCA,KAAhC,cAAgCA,KAAhC,GAAyC,EAAzC,EAA6C;AACnDO,MAAAA,iBAAiB,EAAEC;AADgC,KAA7C,CAAP;AAGA,GALc,EAKZ,CAAEP,aAAF,EAAiBD,KAAjB,CALY,CAAf;AAOA,SAAOM,MAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,yBAAyB,GAAG,SAA2B;AAAA,MAAzB;AAAEC,IAAAA,QAAF;AAAYV,IAAAA;AAAZ,GAAyB;AAC5D,QAAMW,YAAY,GAAGZ,sBAAsB,CAAE;AAAEC,IAAAA;AAAF,GAAF,CAA3C;AAEA,SACC,4BAAC,iBAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGW;AAApC,KACGD,QADH,CADD;AAKA,CARD;;AAUO,MAAME,qBAAqB,GAAG,mBAAMH,yBAAN,CAA9B","sourcesContent":["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../../utils';\n\nexport const ComponentsContext = createContext(\n\t/** @type {Record<string, any>} */ ( {} )\n);\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tfastDeepEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `deepmerge()` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn deepmerge( parentContext ?? {}, value ?? {}, {\n\t\t\tisMergeableObject: isPlainObject,\n\t\t} );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"]}

package/build/ui/context/get-styled-class-name-from-key.js

@@ -18,7 +18,7 @@ var _memize = _interopRequireDefault(require("memize"));
 /**
  * Generates the connected component CSS className based on the namespace.
  *
- * @param  namespace The name of the connected component.
+ * @param namespace The name of the connected component.
  * @return The generated CSS className.
  */
 function getStyledClassName(namespace) {

package/build/ui/context/get-styled-class-name-from-key.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/context/get-styled-class-name-from-key.ts"],"names":["getStyledClassName","namespace","kebab","getStyledClassNameFromKey"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,kBAAT,CAA6BC,SAA7B,EAAyD;AACxD,QAAMC,KAAK,GAAG,uBAAWD,SAAX,CAAd;AACA,SAAQ,cAAcC,KAAO,EAA7B;AACA;;AAEM,MAAMC,yBAAyB,GAAG,qBAASH,kBAAT,CAAlC","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param  namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName( namespace: string ): string {\n\tconst kebab = kebabCase( namespace );\n\treturn `components-${ kebab }`;\n}\n\nexport const getStyledClassNameFromKey = memoize( getStyledClassName );\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/context/get-styled-class-name-from-key.ts"],"names":["getStyledClassName","namespace","kebab","getStyledClassNameFromKey"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,kBAAT,CAA6BC,SAA7B,EAAyD;AACxD,QAAMC,KAAK,GAAG,uBAAWD,SAAX,CAAd;AACA,SAAQ,cAAcC,KAAO,EAA7B;AACA;;AAEM,MAAMC,yBAAyB,GAAG,qBAASH,kBAAT,CAAlC","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName( namespace: string ): string {\n\tconst kebab = kebabCase( namespace );\n\treturn `components-${ kebab }`;\n}\n\nexport const getStyledClassNameFromKey = memoize( getStyledClassName );\n"]}

package/build/ui/utils/get-valid-children.js

@@ -18,7 +18,7 @@ var _element = require("@wordpress/element");
 /**
  * Gets a collection of available children elements from a React component's children prop.
  *
- * @param  children
+ * @param children
  *
  * @return An array of available children.
  */

package/build/ui/utils/get-valid-children.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/get-valid-children.ts"],"names":["getValidChildren","children","Children","toArray","filter","child"],"mappings":";;;;;;;AAQA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAT,CACNC,QADM,EAE8C;AACpD,MAAK,OAAOA,QAAP,KAAoB,QAAzB,EAAoC,OAAO,CAAEA,QAAF,CAAP;AAEpC,SAAOC,kBAASC,OAAT,CAAkBF,QAAlB,EAA6BG,MAA7B,CAAuCC,KAAF,IAC3C,6BAAgBA,KAAhB,CADM,CAAP;AAGA","sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param  children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(\n\tchildren: ReactNode\n): Array< ReactChild | ReactFragment | ReactPortal > {\n\tif ( typeof children === 'string' ) return [ children ];\n\n\treturn Children.toArray( children ).filter( ( child ) =>\n\t\tisValidElement( child )\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/get-valid-children.ts"],"names":["getValidChildren","children","Children","toArray","filter","child"],"mappings":";;;;;;;AAQA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAT,CACNC,QADM,EAE8C;AACpD,MAAK,OAAOA,QAAP,KAAoB,QAAzB,EAAoC,OAAO,CAAEA,QAAF,CAAP;AAEpC,SAAOC,kBAASC,OAAT,CAAkBF,QAAlB,EAA6BG,MAA7B,CAAuCC,KAAF,IAC3C,6BAAgBA,KAAhB,CADM,CAAP;AAGA","sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(\n\tchildren: ReactNode\n): Array< ReactChild | ReactFragment | ReactPortal > {\n\tif ( typeof children === 'string' ) return [ children ];\n\n\treturn Children.toArray( children ).filter( ( child ) =>\n\t\tisValidElement( child )\n\t);\n}\n"]}

package/build/ui/utils/space.js

@@ -24,7 +24,7 @@ const GRID_BASE = '4px';
  * When given a unit value or one of the named CSS values like `auto`,
  * it will simply return the value back.
  *
- * @param  value A number, numeric string, or a unit value.
+ * @param value A number, numeric string, or a unit value.
  */
 
 function space(value) {

package/build/ui/utils/space.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/space.ts"],"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAMA,SAAS,GAAG,KAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,KAAT,CAAgBC,KAAhB,EAAyD;AAAA;;AAC/D,MAAK,OAAOA,KAAP,KAAiB,WAAtB,EAAoC;AACnC,WAAOC,SAAP;AACA,GAH8D,CAK/D;;;AACA,MAAK,CAAED,KAAP,EAAe;AACd,WAAO,GAAP;AACA;;AAED,QAAME,KAAK,GAAG,OAAOF,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCG,MAAM,CAAEH,KAAF,CAAxD,CAV+D,CAY/D;;AACA,MACG,OAAOI,MAAP,KAAkB,WAAlB,mBACDA,MAAM,CAACC,GADN,gEACD,YAAYC,QADX,iDACD,uCAAwB,QAAxB,EAAkCN,KAAK,CAACO,QAAN,EAAlC,CADD,IAEAJ,MAAM,CAACK,KAAP,CAAcN,KAAd,CAHD,EAIE;AACD,WAAOF,KAAK,CAACO,QAAN,EAAP;AACA;;AAED,SAAQ,QAAQT,SAAW,MAAME,KAAO,GAAxC;AACA","sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param  value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/space.ts"],"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAMA,SAAS,GAAG,KAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,KAAT,CAAgBC,KAAhB,EAAyD;AAAA;;AAC/D,MAAK,OAAOA,KAAP,KAAiB,WAAtB,EAAoC;AACnC,WAAOC,SAAP;AACA,GAH8D,CAK/D;;;AACA,MAAK,CAAED,KAAP,EAAe;AACd,WAAO,GAAP;AACA;;AAED,QAAME,KAAK,GAAG,OAAOF,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCG,MAAM,CAAEH,KAAF,CAAxD,CAV+D,CAY/D;;AACA,MACG,OAAOI,MAAP,KAAkB,WAAlB,mBACDA,MAAM,CAACC,GADN,gEACD,YAAYC,QADX,iDACD,uCAAwB,QAAxB,EAAkCN,KAAK,CAACO,QAAN,EAAlC,CADD,IAEAJ,MAAM,CAACK,KAAP,CAAcN,KAAd,CAHD,EAIE;AACD,WAAOF,KAAK,CAACO,QAAN,EAAP;AACA;;AAED,SAAQ,QAAQT,SAAW,MAAME,KAAO,GAAxC;AACA","sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"]}

package/build/unit-control/index.js

@@ -173,8 +173,8 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
    * This allows us to tap into actions to transform the (next) state for
    * InputControl.
    *
-   * @param  state  State from InputControl
-   * @param  action Action triggering state change
+   * @param state  State from InputControl
+   * @param action Action triggering state change
    * @return The updated state to apply to InputControl
    */
 

package/build/unit-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onBlur","onBlurProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","inputControlActionTypes","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n} from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number | undefined >( undefined );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [ validParsedQuantity, validParsedUnit ] =\n\t\t\tgetValidParsedQuantityAndUnit(\n\t\t\t\tevent.currentTarget.value,\n\t\t\t\tunits,\n\t\t\t\tparsedQuantity,\n\t\t\t\tunit\n\t\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\t// The `onChange` callback already gets called, no need to call it explicitly.\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param  state  State from InputControl\n\t * @param  action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/*\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t */\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t\tonFocus={ onFocusProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\tonFocus={ onFocusProp }\n\t\t/>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onBlur","onBlurProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","inputControlActionTypes","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n} from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number | undefined >( undefined );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [ validParsedQuantity, validParsedUnit ] =\n\t\t\tgetValidParsedQuantityAndUnit(\n\t\t\t\tevent.currentTarget.value,\n\t\t\t\tunits,\n\t\t\t\tparsedQuantity,\n\t\t\t\tunit\n\t\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\t// The `onChange` callback already gets called, no need to call it explicitly.\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param state  State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/*\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t */\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t\tonFocus={ onFocusProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\tonFocus={ onFocusProp }\n\t\t/>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}

package/build/unit-control/utils.js

@@ -133,9 +133,9 @@ const DEFAULT_UNIT = allUnits.px;
  * Moving forward, ideally the value should be a string that contains both
  * the value and unit, example: '10px'
  *
- * @param  rawValue     The raw value as a string (may or may not contain the unit)
- * @param  fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
- * @param  allowedUnits Units to derive from.
+ * @param rawValue     The raw value as a string (may or may not contain the unit)
+ * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
+ * @param allowedUnits Units to derive from.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse
  * from the raw value could not be matched against the list of allowed units.
@@ -150,7 +150,7 @@ function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) {
 /**
  * Checks if units are defined.
  *
- * @param  units List of units.
+ * @param units List of units.
  * @return Whether the list actually contains any units.
  */
 
@@ -165,8 +165,8 @@ function hasUnits(units) {
  * Parses a quantity and unit from a raw string value, given a list of allowed
  * units and otherwise falling back to the default unit.
  *
- * @param  rawValue     The raw value as a string (may or may not contain the unit)
- * @param  allowedUnits Units to derive from.
+ * @param rawValue     The raw value as a string (may or may not contain the unit)
+ * @param allowedUnits Units to derive from.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed
  * from the raw value could not be matched against the list of allowed units.
@@ -203,10 +203,10 @@ function parseQuantityAndUnitFromRawValue(rawValue) {
  * Parses quantity and unit from a raw value. Validates parsed value, using fallback
  * value if invalid.
  *
- * @param  rawValue         The next value.
- * @param  allowedUnits     Units to derive from.
- * @param  fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
- * @param  fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
+ * @param rawValue         The next value.
+ * @param allowedUnits     Units to derive from.
+ * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
+ * @param fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The
  * unit can be `undefined` only if the unit parsed from the raw value could not be matched against
@@ -234,7 +234,7 @@ function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity,
  * Takes a unit value and finds the matching accessibility label for the
  * unit abbreviation.
  *
- * @param  unit Unit value (example: `px`)
+ * @param unit Unit value (example: `px`)
  * @return a11y label for the unit abbreviation
  */
 
@@ -246,8 +246,8 @@ function getAccessibleLabelForUnit(unit) {
 /**
  * Filters available units based on values defined a list of allowed unit values.
  *
- * @param  allowedUnitValues Collection of allowed unit value strings.
- * @param  availableUnits    Collection of available unit objects.
+ * @param allowedUnitValues Collection of allowed unit value strings.
+ * @param availableUnits    Collection of available unit objects.
  * @return Filtered units.
  */
 
@@ -265,10 +265,10 @@ function filterUnitsWithSettings() {
  * TODO: ideally this hook shouldn't be needed
  * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823
  *
- * @param  args                An object containing units, settingPath & defaultUnits.
- * @param  args.units          Collection of all potentially available units.
- * @param  args.availableUnits Collection of unit value strings for filtering available units.
- * @param  args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
+ * @param args                An object containing units, settingPath & defaultUnits.
+ * @param args.units          Collection of all potentially available units.
+ * @param args.availableUnits Collection of unit value strings for filtering available units.
+ * @param args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
  *
  * @return Filtered list of units, with their default values updated following the `defaultValues`
  * argument's property.
@@ -302,9 +302,9 @@ const useCustomUnits = _ref => {
  * accurately displayed in the UI, even if the intention is to hide
  * the availability of that unit.
  *
- * @param  rawValue   Selected value to parse.
- * @param  legacyUnit Legacy unit value, if rawValue needs it appended.
- * @param  units      List of available units.
+ * @param rawValue   Selected value to parse.
+ * @param legacyUnit Legacy unit value, if rawValue needs it appended.
+ * @param units      List of available units.
  *
  * @return A collection of units containing the unit for the current value.
  */