@wordpress/components 19.12.0 → 19.13.0

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 ## Unreleased
 
+## 19.13.0 (2022-06-15)
+
+### Bug Fix
+
+-   `Tooltip`: Opt in to `__unstableShift` to ensure that the Tooltip is always within the viewport. ([#41524](https://github.com/WordPress/gutenberg/pull/41524))
+-   `FormTokenField`: Do not suggest the selected one even if `{ value: string }` is passed ([#41216](https://github.com/WordPress/gutenberg/pull/41216)).
+-   `CustomGradientBar`: Fix insertion and control point positioning to more closely follow cursor. ([#41492](https://github.com/WordPress/gutenberg/pull/41492))
+-   `FormTokenField`: Added Padding to resolve close button overlap issue ([#41556](https://github.com/WordPress/gutenberg/pull/41556)).
+-   `ComboboxControl`: fix the autofocus behavior after resetting the value. ([#41737](https://github.com/WordPress/gutenberg/pull/41737)).
+
+### Enhancements
+
+-   `AnglePickerControl`: Use NumberControl as input field ([#41472](https://github.com/WordPress/gutenberg/pull/41472)).
+
+### Internal
+
+-   `FormTokenField`: Convert to TypeScript and refactor to functional component ([#41216](https://github.com/WordPress/gutenberg/pull/41216)).
+-   `Draggable`: updated to satisfy `react/exhuastive-deps` eslint rule ([#41499](https://github.com/WordPress/gutenberg/pull/41499))
+-   `RadioControl`: Convert to TypeScript ([#41568](https://github.com/WordPress/gutenberg/pull/41568)).
+-   `Flex` updated to satisfy `react/exhuastive-deps` eslint rule ([#41507](https://github.com/WordPress/gutenberg/pull/41507)).
+-   `CustomGradientBar` updated to satisfy `react/exhuastive-deps` eslint rule ([#41463](https://github.com/WordPress/gutenberg/pull/41463))
+-   `TreeSelect`: Convert to TypeScript ([#41536](https://github.com/WordPress/gutenberg/pull/41536)).
+-   `FontSizePicker`: updated to satisfy `react/exhuastive-deps` eslint rule ([#41600](https://github.com/WordPress/gutenberg/pull/41600)).
+-   `ZStack`: Convert component story to TypeScript and add inline docs ([#41694](https://github.com/WordPress/gutenberg/pull/41694)).
+-   `Dropdown`: Make sure cleanup (closing the dropdown) only runs when the menu has actually been opened.
+-   Enhance the TypeScript migration guidelines ([#41669](https://github.com/WordPress/gutenberg/pull/41669)).
+-   `ExternalLink`: Convert to TypeScript ([#41681](https://github.com/WordPress/gutenberg/pull/41681)).
+-   `InputControl` updated to satisfy `react/exhuastive-deps` eslint rule ([#41601](https://github.com/WordPress/gutenberg/pull/41601))
+-   `Modal`: updated to satisfy `react/exhuastive-deps` eslint rule ([#41610](https://github.com/WordPress/gutenberg/pull/41610))
+
+
+### Experimental
+
+-   `Navigation`: improve unit tests by using `@testing-library/user-event` and modern `@testing-library` assertions; add unit test for controlled component ([#41668](https://github.com/WordPress/gutenberg/pull/41668)).
+
 ## 19.12.0 (2022-06-01)
 
 ### Bug Fix
@@ -30,6 +65,8 @@
 -   `BoxControl`: Update unit tests to use `@testing-library/user-event` ([#41422](https://github.com/WordPress/gutenberg/pull/41422)).
 -   `Surface`: Convert to TypeScript ([#41212](https://github.com/WordPress/gutenberg/pull/41212)).
 -   `Autocomplete` updated to satisfy `react/exhuastive-deps` eslint rule ([#41382](https://github.com/WordPress/gutenberg/pull/41382))
+-   `Dropdown` updated to satisfy `react/exhuastive-deps` eslint rule ([#41505](https://github.com/WordPress/gutenberg/pull/41505))
+-   `DateDayPicker` updated to satisfy `react/exhuastive-deps` eslint rule ([#41470](https://github.com/WordPress/gutenberg/pull/41470)).
 
 ### Experimental
 

package/CONTRIBUTING.md

@@ -19,6 +19,7 @@ For an example of a component that follows these requirements, take a look at [`
 - [Documentation](#documentation)
 - [README example](#README-example)
 - [Folder structure](#folder-structure)
+- [TypeScript migration guide](#refactoring-a-component-to-typescript)
 
 ## Compatibility
 
@@ -489,13 +490,99 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 		2. Resume work on this component once all dependencies have been refactored.
 	2. Alternatively:
 		1. For each of those files, add `// @ts-nocheck` at the start of the file.
-		2. Add the folders to the `tsconfig.json` file.
-		3. If you’re still getting errors about a component’s props, the easiest way is to slightly refactor this component and perform the props destructuring inside the component’s body (as opposed as in the function signature) — this is to prevent TypeScript from inferring the types of these props.
-		4. Continue with the refactor of the current component (and take care of the refactor of the dependent components at a later stage).
+		2. If the components in the ignored files are destructuring props directly from the function's arguments, move the props destructuring to the function's body (this is to avoid TypeScript errors from trying to infer the props type):
+
+			```jsx
+			// Before:
+			function MyComponent( { myProp1, myProp2, ...restProps } ) { /* ... */ }
+
+			// After:
+			function MyComponent( props ) {
+				const {  myProp1, myProp2, ...restProps } = props;
+
+				/* ... */
+			}
+			```
+
+		3. Add the folders to the `tsconfig.json` file.
+		4. If you’re still getting errors about a component’s props, the easiest way is to slightly refactor this component and perform the props destructuring inside the component’s body (as opposed as in the function signature) — this is to prevent TypeScript from inferring the types of these props.
+		5. Continue with the refactor of the current component (and take care of the refactor of the dependent components at a later stage).
 6. Create a new `types.ts` file.
 7. Slowly work your way through fixing the TypeScript errors in the folder:
 	1. Try to avoid introducing any runtime changes, if possible. The aim of this refactor is to simply rewrite the component to TypeScript.
-	2. Make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
+	2. Extract props to `types.ts`, and use them to type components. The README can be of help when determining a prop’s type.
+	3. Use existing HTML types when possible? (e.g. `required` for an input field?)
+	4. Use the `CSSProperties` type where it makes sense.
+	5. Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package.
+	6. If the component forwards its `...restProps` to an underlying element/component, you should use the `WordPressComponentProps` type for the component's props:
+
+		```jsx
+		import type { WordPressComponentProps } from '../ui/context';
+		import type { ComponentOwnProps } from './types';
+
+		function UnconnectedMyComponent(
+			// The resulting type will include:
+			// - all props defined in `ComponentOwnProps`
+			// - all HTML props/attributes from the component specified as the second
+			//   parameter (`div` in this example)
+			// - the special `as` prop (which marks the component as polymorphic),
+			//   unless the third parameter is `false`
+			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >
+		) { /* ... */ }
+		```
+
+	7. If the component doesn't forwards its ref yet, wrap the component in a `forwardRed` call. Alternatively, if you want to take advantage of the [Context system](#context-system), you can use the `contextConnect` utility function (which also takes care of adding ref forwarding)
+
+		```jsx
+		// With `forwardRef`
+		import type { ForwardedRef } from 'react';
+		import { forwardRef } from '@wordpress/element';
+		import type { WordPressComponentProps } from '../ui/context';
+		import type { ComponentOwnProps } from './types';
+
+		function UnforwardedMyComponent(
+			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >,
+			forwardedRef: ForwardedRef< any >
+		) { /* ... */ }
+
+
+		/**
+		 * MyComponent JSDoc
+		 */
+		export const MyComponent = forwardRef( UnforwardedMyComponent );
+
+		export default MyComponent;
+		```
+
+		```jsx
+		// With `contextConnect`
+		import type { ForwardedRef } from 'react';
+		import {
+			contextConnect,
+			useContextSystem,
+			WordPressComponentProps,
+		} from '../ui/context';
+		import type { ComponentOwnProps } from './types';
+
+		function UnconnectedMyComponent(
+			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >,
+			forwardedRef: ForwardedRef< any >
+		) {
+			const contextProps = useContextSystem( props, 'MyComponent' );
+
+			/* ... */
+		}
+
+
+		/**
+		 * MyComponent JSDoc
+		 */
+		export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' );
+
+		export default MyComponent;
+		```
+
+	8. As shown in the previous examples, make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
 
 		```jsx
 		function UnconnectedMyComponent() { /* ... */ }
@@ -505,14 +592,9 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 		export default MyComponent;
 		```
 
-	3. Extract props to `types.ts`, and use them to type components. The README can be of help when determining a prop’s type.
-	4. Use existing HTML types when possible? (e.g. `required` for an input field?)
-	5. Use the `CSSProperties` type where it makes sense.
-	6. Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package.
-	7. Use `WordPressComponent` type if possible.
-	8. Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate.
-	9. Prefer `unknown` to `any`, and in general avoid it when possible.
-8. On the component's main export, add a JSDoc comment that includes the main description and `@example` code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/943cec92f21fedcd256502ea72d9903941f3b05a/packages/components/src/unit-control/index.tsx#L290-L306))
+	9. Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate.
+	10. Prefer `unknown` to `any`, and in general avoid it when possible.
+8. On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
 9. Make sure that:
 	1. tests still pass;
 	2. storybook examples work as expected.

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

@@ -11,8 +11,6 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _lodash = require("lodash");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _i18n = require("@wordpress/i18n");
@@ -40,6 +38,8 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
+const noop = () => {};
+
 function useBaseId(id) {
   const instanceId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control');
   return id || instanceId;
@@ -52,7 +52,7 @@ function AlignmentMatrixControl(_ref) {
     label = (0, _i18n.__)('Alignment Matrix Control'),
     defaultValue = 'center center',
     value,
-    onChange = _lodash.noop,
+    onChange = noop,
     width = 92,
     ...props
   } = _ref;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/index.js"],"names":["useBaseId","id","instanceId","AlignmentMatrixControl","className","label","defaultValue","value","onChange","noop","width","props","immutableDefaultValue","baseId","initialCurrentId","composite","currentId","rtl","handleOnChange","nextValue","setCurrentId","classes","Root","GRID","map","cells","index","Row","cell","cellId","isActive","Icon","AlignmentMatrixControlIcon"],"mappings":";;;;;;;;;AAWA;;;;AARA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAOA,SAASA,SAAT,CAAoBC,EAApB,EAAyB;AACxB,QAAMC,UAAU,GAAG,4BAClBC,sBADkB,EAElB,0BAFkB,CAAnB;AAKA,SAAOF,EAAE,IAAIC,UAAb;AACA;;AAEc,SAASC,sBAAT,OASX;AAAA,MAT4C;AAC/CC,IAAAA,SAD+C;AAE/CH,IAAAA,EAF+C;AAG/CI,IAAAA,KAAK,GAAG,cAAI,0BAAJ,CAHuC;AAI/CC,IAAAA,YAAY,GAAG,eAJgC;AAK/CC,IAAAA,KAL+C;AAM/CC,IAAAA,QAAQ,GAAGC,YANoC;AAO/CC,IAAAA,KAAK,GAAG,EAPuC;AAQ/C,OAAGC;AAR4C,GAS5C;AACH,QAAM,CAAEC,qBAAF,IAA4B,uBAAUL,KAAV,aAAUA,KAAV,cAAUA,KAAV,GAAmBD,YAAnB,CAAlC;AACA,QAAMO,MAAM,GAAGb,SAAS,CAAEC,EAAF,CAAxB;AACA,QAAMa,gBAAgB,GAAG,sBAAWD,MAAX,EAAmBD,qBAAnB,CAAzB;AAEA,QAAMG,SAAS,GAAG,kCAAmB;AACpCF,IAAAA,MADoC;AAEpCG,IAAAA,SAAS,EAAEF,gBAFyB;AAGpCG,IAAAA,GAAG,EAAE;AAH+B,GAAnB,CAAlB;;AAMA,QAAMC,cAAc,GAAKC,SAAF,IAAiB;AACvCX,IAAAA,QAAQ,CAAEW,SAAF,CAAR;AACA,GAFD;;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAmBL,SAAzB;AAEA,0BAAW,MAAM;AAChB,QAAK,OAAOR,KAAP,KAAiB,WAAtB,EAAoC;AACnCa,MAAAA,YAAY,CAAE,sBAAWP,MAAX,EAAmBN,KAAnB,CAAF,CAAZ;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,EAASa,YAAT,EAAuBP,MAAvB,CAJH;AAMA,QAAMQ,OAAO,GAAG,yBACf,oCADe,EAEfjB,SAFe,CAAhB;AAKA,SACC,4BAAC,oBAAD,6BACMO,KADN,EAEMI,SAFN;AAGC,kBAAaV,KAHd;AAIC,IAAA,EAAE,EAAGiB,kCAJN;AAKC,IAAA,SAAS,EAAGD,OALb;AAMC,IAAA,IAAI,EAAC,MANN;AAOC,IAAA,KAAK,EAAGX;AAPT,MASGa,YAAKC,GAAL,CAAU,CAAEC,KAAF,EAASC,KAAT,KACX,4BAAC,yBAAD,6BACMX,SADN;AAEC,IAAA,EAAE,EAAGY,iCAFN;AAGC,IAAA,IAAI,EAAC,KAHN;AAIC,IAAA,GAAG,EAAGD;AAJP,MAMGD,KAAK,CAACD,GAAN,CAAaI,IAAF,IAAY;AACxB,UAAMC,MAAM,GAAG,sBAAWhB,MAAX,EAAmBe,IAAnB,CAAf;AACA,UAAME,QAAQ,GAAGf,SAAS,CAACC,SAAV,KAAwBa,MAAzC;AAEA,WACC,4BAAC,aAAD,6BACMd,SADN;AAEC,MAAA,EAAE,EAAGc,MAFN;AAGC,MAAA,QAAQ,EAAGC,QAHZ;AAIC,MAAA,GAAG,EAAGF,IAJP;AAKC,MAAA,KAAK,EAAGA,IALT;AAMC,MAAA,OAAO,EAAG,MAAMV,cAAc,CAAEU,IAAF,CAN/B;AAOC,MAAA,QAAQ,EAAGE,QAAQ,GAAG,CAAH,GAAO,CAAC;AAP5B,OADD;AAWA,GAfC,CANH,CADC,CATH,CADD;AAqCA;;AAED3B,sBAAsB,CAAC4B,IAAvB,GAA8BC,aAA9B","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeGroup, useCompositeState } from '../composite';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId } from './utils';\n\nfunction useBaseId( id ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\nexport default function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange = noop,\n\twidth = 92,\n\t...props\n} ) {\n\tconst [ immutableDefaultValue ] = useState( value ?? defaultValue );\n\tconst baseId = useBaseId( id );\n\tconst initialCurrentId = getItemId( baseId, immutableDefaultValue );\n\n\tconst composite = useCompositeState( {\n\t\tbaseId,\n\t\tcurrentId: initialCurrentId,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst handleOnChange = ( nextValue ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tconst { setCurrentId } = composite;\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tsetCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, setCurrentId, baseId ] );\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\t{ ...props }\n\t\t\t{ ...composite }\n\t\t\taria-label={ label }\n\t\t\tas={ Root }\n\t\t\tclassName={ classes }\n\t\t\trole=\"grid\"\n\t\t\twidth={ width }\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeGroup\n\t\t\t\t\t{ ...composite }\n\t\t\t\t\tas={ Row }\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\tkey={ index }\n\t\t\t\t>\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 = composite.currentId === cellId;\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\t{ ...composite }\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\tonFocus={ () => handleOnChange( cell ) }\n\t\t\t\t\t\t\t\ttabIndex={ isActive ? 0 : -1 }\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</CompositeGroup>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/index.js"],"names":["noop","useBaseId","id","instanceId","AlignmentMatrixControl","className","label","defaultValue","value","onChange","width","props","immutableDefaultValue","baseId","initialCurrentId","composite","currentId","rtl","handleOnChange","nextValue","setCurrentId","classes","Root","GRID","map","cells","index","Row","cell","cellId","isActive","Icon","AlignmentMatrixControlIcon"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAOA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,SAAT,CAAoBC,EAApB,EAAyB;AACxB,QAAMC,UAAU,GAAG,4BAClBC,sBADkB,EAElB,0BAFkB,CAAnB;AAKA,SAAOF,EAAE,IAAIC,UAAb;AACA;;AAEc,SAASC,sBAAT,OASX;AAAA,MAT4C;AAC/CC,IAAAA,SAD+C;AAE/CH,IAAAA,EAF+C;AAG/CI,IAAAA,KAAK,GAAG,cAAI,0BAAJ,CAHuC;AAI/CC,IAAAA,YAAY,GAAG,eAJgC;AAK/CC,IAAAA,KAL+C;AAM/CC,IAAAA,QAAQ,GAAGT,IANoC;AAO/CU,IAAAA,KAAK,GAAG,EAPuC;AAQ/C,OAAGC;AAR4C,GAS5C;AACH,QAAM,CAAEC,qBAAF,IAA4B,uBAAUJ,KAAV,aAAUA,KAAV,cAAUA,KAAV,GAAmBD,YAAnB,CAAlC;AACA,QAAMM,MAAM,GAAGZ,SAAS,CAAEC,EAAF,CAAxB;AACA,QAAMY,gBAAgB,GAAG,sBAAWD,MAAX,EAAmBD,qBAAnB,CAAzB;AAEA,QAAMG,SAAS,GAAG,kCAAmB;AACpCF,IAAAA,MADoC;AAEpCG,IAAAA,SAAS,EAAEF,gBAFyB;AAGpCG,IAAAA,GAAG,EAAE;AAH+B,GAAnB,CAAlB;;AAMA,QAAMC,cAAc,GAAKC,SAAF,IAAiB;AACvCV,IAAAA,QAAQ,CAAEU,SAAF,CAAR;AACA,GAFD;;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAmBL,SAAzB;AAEA,0BAAW,MAAM;AAChB,QAAK,OAAOP,KAAP,KAAiB,WAAtB,EAAoC;AACnCY,MAAAA,YAAY,CAAE,sBAAWP,MAAX,EAAmBL,KAAnB,CAAF,CAAZ;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,EAASY,YAAT,EAAuBP,MAAvB,CAJH;AAMA,QAAMQ,OAAO,GAAG,yBACf,oCADe,EAEfhB,SAFe,CAAhB;AAKA,SACC,4BAAC,oBAAD,6BACMM,KADN,EAEMI,SAFN;AAGC,kBAAaT,KAHd;AAIC,IAAA,EAAE,EAAGgB,kCAJN;AAKC,IAAA,SAAS,EAAGD,OALb;AAMC,IAAA,IAAI,EAAC,MANN;AAOC,IAAA,KAAK,EAAGX;AAPT,MASGa,YAAKC,GAAL,CAAU,CAAEC,KAAF,EAASC,KAAT,KACX,4BAAC,yBAAD,6BACMX,SADN;AAEC,IAAA,EAAE,EAAGY,iCAFN;AAGC,IAAA,IAAI,EAAC,KAHN;AAIC,IAAA,GAAG,EAAGD;AAJP,MAMGD,KAAK,CAACD,GAAN,CAAaI,IAAF,IAAY;AACxB,UAAMC,MAAM,GAAG,sBAAWhB,MAAX,EAAmBe,IAAnB,CAAf;AACA,UAAME,QAAQ,GAAGf,SAAS,CAACC,SAAV,KAAwBa,MAAzC;AAEA,WACC,4BAAC,aAAD,6BACMd,SADN;AAEC,MAAA,EAAE,EAAGc,MAFN;AAGC,MAAA,QAAQ,EAAGC,QAHZ;AAIC,MAAA,GAAG,EAAGF,IAJP;AAKC,MAAA,KAAK,EAAGA,IALT;AAMC,MAAA,OAAO,EAAG,MAAMV,cAAc,CAAEU,IAAF,CAN/B;AAOC,MAAA,QAAQ,EAAGE,QAAQ,GAAG,CAAH,GAAO,CAAC;AAP5B,OADD;AAWA,GAfC,CANH,CADC,CATH,CADD;AAqCA;;AAED1B,sBAAsB,CAAC2B,IAAvB,GAA8BC,aAA9B","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';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeGroup, useCompositeState } from '../composite';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId } from './utils';\n\nconst noop = () => {};\n\nfunction useBaseId( id ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\nexport default function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange = noop,\n\twidth = 92,\n\t...props\n} ) {\n\tconst [ immutableDefaultValue ] = useState( value ?? defaultValue );\n\tconst baseId = useBaseId( id );\n\tconst initialCurrentId = getItemId( baseId, immutableDefaultValue );\n\n\tconst composite = useCompositeState( {\n\t\tbaseId,\n\t\tcurrentId: initialCurrentId,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst handleOnChange = ( nextValue ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tconst { setCurrentId } = composite;\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tsetCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, setCurrentId, baseId ] );\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\t{ ...props }\n\t\t\t{ ...composite }\n\t\t\taria-label={ label }\n\t\t\tas={ Root }\n\t\t\tclassName={ classes }\n\t\t\trole=\"grid\"\n\t\t\twidth={ width }\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeGroup\n\t\t\t\t\t{ ...composite }\n\t\t\t\t\tas={ Row }\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\tkey={ index }\n\t\t\t\t>\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 = composite.currentId === cellId;\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\t{ ...composite }\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\tonFocus={ () => handleOnChange( cell ) }\n\t\t\t\t\t\t\t\ttabIndex={ isActive ? 0 : -1 }\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</CompositeGroup>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n"]}

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

@@ -15,7 +15,7 @@ var _i18n = require("@wordpress/i18n");
 
 var _flex = require("../flex");
 
-var _inputControl = _interopRequireDefault(require("../input-control"));
+var _numberControl = _interopRequireDefault(require("../number-control"));
 
 var _angleCircle = _interopRequireDefault(require("./angle-circle"));
 
@@ -54,7 +54,7 @@ function AnglePickerControl(_ref) {
   const classes = (0, _classnames.default)('components-angle-picker-control', className);
   return (0, _element.createElement)(_anglePickerControlStyles.Root, {
     className: classes
-  }, (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_inputControl.default, {
+  }, (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_numberControl.default, {
     label: label,
     className: "components-angle-picker-control__input-field",
     max: 360,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","marginLeft","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASe,SAASA,kBAAT,OAKX;AAAA,MALwC;AAC3CC,IAAAA,SAD2C;AAE3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAFmC;AAG3CC,IAAAA,QAH2C;AAI3CC,IAAAA;AAJ2C,GAKxC;;AACH,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAH,IAAAA,QAAQ,CAAEI,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CR,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AAAM,IAAA,SAAS,EAAGQ;AAAlB,KACC,4BAAC,eAAD,QACC,4BAAC,qBAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGG,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGD,KART;AASC,IAAA,cAAc,MATf;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGM,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAE;AADA;AAJT;AAXF,IADD,CADD,EA0BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,UAAU,EAAE,kBAAO,CAAP,CADL;AAEPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CAFP;AAGPC,MAAAA,SAAS,EAAE;AAHJ;AADT,KAOC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGV,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAPD,CA1BD,CADD;AA0CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../input-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\n\nexport default function AnglePickerControl( {\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root className={ classes }>\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\thideHTMLArrows\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: 'var( --wp-admin-theme-color )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginLeft: space( 4 ),\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\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</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","marginLeft","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASe,SAASA,kBAAT,OAKX;AAAA,MALwC;AAC3CC,IAAAA,SAD2C;AAE3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAFmC;AAG3CC,IAAAA,QAH2C;AAI3CC,IAAAA;AAJ2C,GAKxC;;AACH,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAH,IAAAA,QAAQ,CAAEI,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CR,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AAAM,IAAA,SAAS,EAAGQ;AAAlB,KACC,4BAAC,eAAD,QACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGG,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGD,KART;AASC,IAAA,cAAc,MATf;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGM,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAE;AADA;AAJT;AAXF,IADD,CADD,EA0BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,UAAU,EAAE,kBAAO,CAAP,CADL;AAEPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CAFP;AAGPC,MAAAA,SAAS,EAAE;AAHJ;AADT,KAOC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGV,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAPD,CA1BD,CADD;AA0CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\n\nexport default function AnglePickerControl( {\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root className={ classes }>\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\thideHTMLArrows\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: 'var( --wp-admin-theme-color )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginLeft: space( 4 ),\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\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</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}

package/build/border-box-control/border-box-control-linked-button/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"names":["BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","link","linkOff","ConnectedBorderBoxControlLinkedButton"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,4BAA4B,GAAG,CACpCC,KADoC,EAEpCC,YAFoC,KAGhC;AACJ,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,QAFK;AAGL,OAAGC;AAHE,MAIF,2CAAiCJ,KAAjC,CAJJ;AAKA,QAAMK,KAAK,GAAGF,QAAQ,GAAG,cAAI,cAAJ,CAAH,GAA0B,cAAI,YAAJ,CAAhD;AAEA,SACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGE;AAAhB,KACC,4BAAC,UAAD;AAAM,IAAA,SAAS,EAAGH;AAAlB,KACC,4BAAC,eAAD,6BACME,WADN;AAEC,IAAA,OAAO,EAAGD,QAAQ,GAAG,SAAH,GAAe,WAFlC;AAGC,IAAA,OAAO,MAHR;AAIC,IAAA,IAAI,EAAGA,QAAQ,GAAGG,WAAH,GAAUC,cAJ1B;AAKC,IAAA,QAAQ,EAAG,EALZ;AAMC,kBAAaF,KANd;AAOC,IAAA,GAAG,EAAGJ;AAPP,KADD,CADD,CADD;AAeA,CA1BD;;AA4BA,MAAMO,qCAAqC,GAAG,6BAC7CT,4BAD6C,EAE7C,8BAF6C,CAA9C;eAIeS,qC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tisLinked,\n\t\t...buttonProps\n\t} = useBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tvariant={ isLinked ? 'primary' : 'secondary' }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 16 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"names":["BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","link","linkOff","ConnectedBorderBoxControlLinkedButton"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,4BAA4B,GAAG,CACpCC,KADoC,EAEpCC,YAFoC,KAGhC;AACJ,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuB,OAAGC;AAA1B,MACL,2CAAiCJ,KAAjC,CADD;AAEA,QAAMK,KAAK,GAAGF,QAAQ,GAAG,cAAI,cAAJ,CAAH,GAA0B,cAAI,YAAJ,CAAhD;AAEA,SACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGE;AAAhB,KACC,4BAAC,UAAD;AAAM,IAAA,SAAS,EAAGH;AAAlB,KACC,4BAAC,eAAD,6BACME,WADN;AAEC,IAAA,OAAO,EAAGD,QAAQ,GAAG,SAAH,GAAe,WAFlC;AAGC,IAAA,OAAO,MAHR;AAIC,IAAA,IAAI,EAAGA,QAAQ,GAAGG,WAAH,GAAUC,cAJ1B;AAKC,IAAA,QAAQ,EAAG,EALZ;AAMC,kBAAaF,KANd;AAOC,IAAA,GAAG,EAAGJ;AAPP,KADD,CADD,CADD;AAeA,CAvBD;;AAyBA,MAAMO,qCAAqC,GAAG,6BAC7CT,4BAD6C,EAE7C,8BAF6C,CAA9C;eAIeS,qC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tvariant={ isLinked ? 'primary' : 'secondary' }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 16 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"]}

package/build/border-box-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/utils.ts"],"names":["sides","borderProps","isEmptyBorder","border","some","prop","undefined","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : undefined,\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst { color: fallbackColor, style: fallbackStyle, width: fallbackWidth } =\n\t\tfallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/utils.ts"],"names":["sides","borderProps","isEmptyBorder","border","some","prop","undefined","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : undefined,\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst {\n\t\tcolor: fallbackColor,\n\t\tstyle: fallbackStyle,\n\t\twidth: fallbackWidth,\n\t} = fallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n"]}

package/build/border-control/border-control/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","__next36pxDefaultSize","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","styles","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","heightStyle","wrapperHeight","innerWrapper","widthControlClassName","borderWidthControl","sliderClassName","borderSlider","previousStyleSelection"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAMA,cAAc,GAAKC,MAAF,IAAuB;AAC7C,QAAMC,UAAU,GAAG,CAAAD,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEE,KAAR,MAAkBC,SAAlB,IAA+BH,MAAM,CAACE,KAAP,KAAiB,EAAnE;AACA,QAAME,UAAU,GAAG,CAAAJ,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEK,KAAR,MAAkBF,SAArC,CAF6C,CAI7C;;AACA,MAAKF,UAAU,IAAIG,UAAnB,EAAgC;AAC/B,WAAOD,SAAP;AACA;;AAED,SAAOH,MAAP;AACA,CAVD;;AAYO,SAASM,gBAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,oBAAoB,GAAG,IAJlB;AAKLC,IAAAA,KAAK,EAAEZ,MALF;AAMLE,IAAAA,KANK;AAOLW,IAAAA,qBAAqB,GAAG,KAPnB;AAQL,OAAGC;AARE,MASF,+BAAkBP,KAAlB,EAAyB,eAAzB,CATJ;AAWA,QAAM,CAAEQ,UAAF,EAAcC,iBAAd,IAAoC,6CACzChB,MADyC,aACzCA,MADyC,uBACzCA,MAAM,CAAEE,KADiC,CAA1C;AAGA,QAAMe,SAAS,GAAGD,iBAAiB,IAAI,IAAvC;AACA,QAAME,oBAAoB,GAAGH,UAAU,KAAK,CAA5C;AAEA,QAAM,CAAEI,cAAF,EAAkBC,iBAAlB,IAAwC,wBAA9C;AACA,QAAM,CAAEC,cAAF,EAAkBC,iBAAlB,IAAwC,wBAA9C;AAEA,QAAMC,cAAc,GAAG,0BACpBC,SAAF,IAA0B;AACzB,QAAKb,oBAAL,EAA4B;AAC3B,aAAOD,QAAQ,CAAEX,cAAc,CAAEyB,SAAF,CAAhB,CAAf;AACA;;AAEDd,IAAAA,QAAQ,CAAEc,SAAF,CAAR;AACA,GAPqB,EAQtB,CAAEd,QAAF,EAAYC,oBAAZ,CARsB,CAAvB;AAWA,QAAMc,aAAa,GAAG,0BACnBC,QAAF,IAAyB;AACxB,UAAMC,aAAa,GAAGD,QAAQ,KAAK,EAAb,GAAkBvB,SAAlB,GAA8BuB,QAApD;AACA,UAAM,CAAEE,WAAF,IAAkB,6CACvBF,QADuB,CAAxB;AAGA,UAAMG,YAAY,GAAGD,WAAW,KAAK,CAArC;AAEA,UAAME,aAAa,GAAG,EAAE,GAAG9B,MAAL;AAAaE,MAAAA,KAAK,EAAEyB;AAApB,KAAtB,CAPwB,CASxB;AACA;;AACA,QAAKE,YAAY,IAAI,CAAEX,oBAAvB,EAA8C;AAC7C;AACA;AACA;AACAE,MAAAA,iBAAiB,CAAEpB,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEK,KAAV,CAAjB;AACAiB,MAAAA,iBAAiB,CAAEtB,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAE+B,KAAV,CAAjB,CAL6C,CAO7C;;AACAD,MAAAA,aAAa,CAACzB,KAAd,GAAsBF,SAAtB;AACA2B,MAAAA,aAAa,CAACC,KAAd,GAAsB,MAAtB;AACA,KArBuB,CAuBxB;;;AACA,QAAK,CAAEF,YAAF,IAAkBX,oBAAvB,EAA8C;AAC7C;AACA;AACA,UAAKY,aAAa,CAACzB,KAAd,KAAwBF,SAA7B,EAAyC;AACxC2B,QAAAA,aAAa,CAACzB,KAAd,GAAsBc,cAAtB;AACA;;AACD,UAAKW,aAAa,CAACC,KAAd,KAAwB,MAA7B,EAAsC;AACrCD,QAAAA,aAAa,CAACC,KAAd,GAAsBV,cAAtB;AACA;AACD;;AAEDE,IAAAA,cAAc,CAAEO,aAAF,CAAd;AACA,GArCoB,EAsCrB,CACC9B,MADD,EAECkB,oBAFD,EAGCC,cAHD,EAICE,cAJD,EAKCE,cALD,CAtCqB,CAAtB;AA+CA,QAAMS,cAAc,GAAG,0BACpBpB,KAAF,IAAqB;AACpBa,IAAAA,aAAa,CAAG,GAAGb,KAAO,GAAGK,SAAW,EAA3B,CAAb;AACA,GAHqB,EAItB,CAAEQ,aAAF,EAAiBR,SAAjB,CAJsB,CAAvB,CA/EC,CAsFD;;AACA,QAAMgB,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,aAAT,EAAwB5B,SAAxB,CAAT;AACA,GAFe,EAEb,CAAEA,SAAF,EAAayB,EAAb,CAFa,CAAhB;AAIA,QAAMI,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,UAAMC,YAAY,GAAG7B,SAAS,GAAG,MAAH,GAAYP,KAA1C;AACA,UAAMqC,UAAU,GACf,CAAC,CAAED,YAAH,IAAmBH,MAAM,CAACG,YAAP,CAAqBA,YAArB,CADpB;AAEA,UAAME,WAAW,GAAGL,MAAM,CAACM,aAAP,CAAsB5B,qBAAtB,CAApB;AAEA,WAAOoB,EAAE,CAAEE,MAAM,CAACO,YAAP,EAAF,EAAyBH,UAAzB,EAAqCC,WAArC,CAAT;AACA,GAP6B,EAO3B,CAAE/B,SAAF,EAAaP,KAAb,EAAoB+B,EAApB,EAAwBpB,qBAAxB,CAP2B,CAA9B;AASA,QAAM8B,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,WAAOV,EAAE,CAAEE,MAAM,CAACS,kBAAP,EAAF,CAAT;AACA,GAF6B,EAE3B,CAAEX,EAAF,CAF2B,CAA9B;AAIA,QAAMY,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAOZ,EAAE,CAAEE,MAAM,CAACW,YAAP,EAAF,CAAT;AACA,GAFuB,EAErB,CAAEb,EAAF,CAFqB,CAAxB;AAIA,SAAO,EACN,GAAGnB,UADG;AAENN,IAAAA,SAAS,EAAE0B,OAFL;AAGNG,IAAAA,qBAHM;AAINd,IAAAA,cAJM;AAKNS,IAAAA,cALM;AAMNP,IAAAA,aANM;AAONsB,IAAAA,sBAAsB,EAAE1B,cAPlB;AAQNwB,IAAAA,eARM;AASNjC,IAAAA,KAAK,EAAEZ,MATD;AAUN2C,IAAAA,qBAVM;AAWN1B,IAAAA,SAXM;AAYNF,IAAAA,UAZM;AAaNF,IAAAA;AAbM,GAAP;AAeA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\tnewWidth\n\t\t\t);\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value: string ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst wrapperWidth = isCompact ? '90px' : width;\n\t\tconst widthStyle =\n\t\t\t!! wrapperWidth && styles.wrapperWidth( wrapperWidth );\n\t\tconst heightStyle = styles.wrapperHeight( __next36pxDefaultSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ isCompact, width, cx, __next36pxDefaultSize ] );\n\n\tconst widthControlClassName = useMemo( () => {\n\t\treturn cx( styles.borderWidthControl() );\n\t}, [ cx ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tinnerWrapperClassName,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\t__next36pxDefaultSize,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","__next36pxDefaultSize","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","styles","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","heightStyle","wrapperHeight","innerWrapper","widthControlClassName","borderWidthControl","sliderClassName","borderSlider","previousStyleSelection"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value: string ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst wrapperWidth = isCompact ? '90px' : width;\n\t\tconst widthStyle =\n\t\t\t!! wrapperWidth && styles.wrapperWidth( wrapperWidth );\n\t\tconst heightStyle = styles.wrapperHeight( __next36pxDefaultSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ isCompact, width, cx, __next36pxDefaultSize ] );\n\n\tconst widthControlClassName = useMemo( () => {\n\t\treturn cx( styles.borderWidthControl() );\n\t}, [ cx ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tinnerWrapperClassName,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\t__next36pxDefaultSize,\n\t};\n}\n"]}

package/build/box-control/all-input-control.js

@@ -11,25 +11,21 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _lodash = require("lodash");
-
 var _unitControl = _interopRequireDefault(require("./unit-control"));
 
 var _utils = require("./utils");
 
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */
+const noop = () => {};
+
 function AllInputControl(_ref) {
   let {
-    onChange = _lodash.noop,
-    onFocus = _lodash.noop,
-    onHoverOn = _lodash.noop,
-    onHoverOff = _lodash.noop,
+    onChange = noop,
+    onFocus = noop,
+    onHoverOn = noop,
+    onHoverOff = noop,
     values,
     sides,
     selectedUnits,

package/build/box-control/all-input-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/all-input-control.js"],"names":["AllInputControl","onChange","noop","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","hasValues","isMixed","allPlaceholder","LABELS","mixed","handleOnFocus","event","side","applyValueToSides","currentValues","newValue","newValues","length","forEach","top","bottom","left","right","ALL_SIDES","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","undefined","nextValues","handleOnUnitChange","unit","newUnits","handleOnHoverOn","handleOnHoverOff"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\n/**\n * Internal dependencies\n */\nimport UnitControl from './unit-control';\nimport {\n\tALL_SIDES,\n\tLABELS,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n} ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : null;\n\n\tconst handleOnFocus = ( event ) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\t// Applies a value to an object representing top, right, bottom and left\n\t// sides while taking into account any custom side configuration.\n\tconst applyValueToSides = ( currentValues, newValue ) => {\n\t\tconst newValues = { ...currentValues };\n\n\t\tif ( sides?.length ) {\n\t\t\tsides.forEach( ( side ) => {\n\t\t\t\tif ( side === 'vertical' ) {\n\t\t\t\t\tnewValues.top = newValue;\n\t\t\t\t\tnewValues.bottom = newValue;\n\t\t\t\t} else if ( side === 'horizontal' ) {\n\t\t\t\t\tnewValues.left = newValue;\n\t\t\t\t\tnewValues.right = newValue;\n\t\t\t\t} else {\n\t\t\t\t\tnewValues[ side ] = newValue;\n\t\t\t\t}\n\t\t\t} );\n\t\t} else {\n\t\t\tALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );\n\t\t}\n\n\t\treturn newValues;\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/all-input-control.js"],"names":["noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","hasValues","isMixed","allPlaceholder","LABELS","mixed","handleOnFocus","event","side","applyValueToSides","currentValues","newValue","newValues","length","forEach","top","bottom","left","right","ALL_SIDES","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","undefined","nextValues","handleOnUnitChange","unit","newUnits","handleOnHoverOn","handleOnHoverOff"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport UnitControl from './unit-control';\nimport {\n\tALL_SIDES,\n\tLABELS,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n} ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : null;\n\n\tconst handleOnFocus = ( event ) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\t// Applies a value to an object representing top, right, bottom and left\n\t// sides while taking into account any custom side configuration.\n\tconst applyValueToSides = ( currentValues, newValue ) => {\n\t\tconst newValues = { ...currentValues };\n\n\t\tif ( sides?.length ) {\n\t\t\tsides.forEach( ( side ) => {\n\t\t\t\tif ( side === 'vertical' ) {\n\t\t\t\t\tnewValues.top = newValue;\n\t\t\t\t\tnewValues.bottom = newValue;\n\t\t\t\t} else if ( side === 'horizontal' ) {\n\t\t\t\t\tnewValues.left = newValue;\n\t\t\t\t\tnewValues.right = newValue;\n\t\t\t\t} else {\n\t\t\t\t\tnewValues[ side ] = newValue;\n\t\t\t\t}\n\t\t\t} );\n\t\t} else {\n\t\t\tALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );\n\t\t}\n\n\t\treturn newValues;\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"]}

package/build/box-control/axial-input-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.js"],"names":["groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","isNaN","parseFloat","nextValue","undefined","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","selectedUnit","join","LABELS"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\n\nconst groupedSides = [ 'vertical', 'horizontal' ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n} ) {\n\tconst createHandleOnFocus = ( side ) => ( event ) => {\n\t\tif ( ! onFocus ) {\n\t\t\treturn;\n\t\t}\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst createHandleOnHoverOn = ( side ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnewUnits.top = next;\n\t\t\tnewUnits.bottom = next;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnewUnits.left = next;\n\t\t\tnewUnits.right = next;\n\t\t}\n\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [\n\t\t\t\t\tparsedQuantity,\n\t\t\t\t\tparsedUnit,\n\t\t\t\t] = parseQuantityAndUnitFromRawValue(\n\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.js"],"names":["groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","isNaN","parseFloat","nextValue","undefined","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","selectedUnit","join","LABELS"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\n\nconst groupedSides = [ 'vertical', 'horizontal' ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n} ) {\n\tconst createHandleOnFocus = ( side ) => ( event ) => {\n\t\tif ( ! onFocus ) {\n\t\t\treturn;\n\t\t}\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst createHandleOnHoverOn = ( side ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnewUnits.top = next;\n\t\t\tnewUnits.bottom = next;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnewUnits.left = next;\n\t\t\tnewUnits.right = next;\n\t\t}\n\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"]}

package/build/box-control/index.js

@@ -11,8 +11,6 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _lodash = require("lodash");
-
 var _compose = require("@wordpress/compose");
 
 var _i18n = require("@wordpress/i18n");
@@ -41,10 +39,6 @@ var _utils2 = require("./utils");
 
 var _hooks = require("../utils/hooks");
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -56,6 +50,8 @@ const defaultInputProps = {
   min: 0
 };
 
+const noop = () => {};
+
 function useUniqueId(idProp) {
   const instanceId = (0, _compose.useInstanceId)(BoxControl, 'inspector-box-control');
   return idProp || instanceId;
@@ -65,7 +61,7 @@ function BoxControl(_ref) {
   let {
     id: idProp,
     inputProps = defaultInputProps,
-    onChange = _lodash.noop,
+    onChange = noop,
     label = (0, _i18n.__)('Box Control'),
     values: valuesProp,
     units,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/index.js"],"names":["defaultInputProps","min","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","noop","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport { Text } from '../text';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nfunction useUniqueId( idProp ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\nexport default function BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n} ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = ( event, { side: nextSide } ) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"region\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Text\n\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\tclassName=\"component-box-control__label\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Text>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tisSecondary\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/index.js"],"names":["defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport { Text } from '../text';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\nexport default function BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n} ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = ( event, { side: nextSide } ) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"region\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Text\n\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\tclassName=\"component-box-control__label\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Text>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tisSecondary\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n"]}