@wordpress/components 29.2.0 → 29.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/build/border-box-control/border-box-control-linked-button/component.js +8 -15
  3. package/build/border-box-control/border-box-control-linked-button/component.js.map +1 -1
  4. package/build/box-control/index.js +6 -0
  5. package/build/box-control/index.js.map +1 -1
  6. package/build/box-control/linked-button.js +7 -11
  7. package/build/box-control/linked-button.js.map +1 -1
  8. package/build/box-control/types.js.map +1 -1
  9. package/build-module/border-box-control/border-box-control-linked-button/component.js +8 -15
  10. package/build-module/border-box-control/border-box-control-linked-button/component.js.map +1 -1
  11. package/build-module/box-control/index.js +6 -0
  12. package/build-module/box-control/index.js.map +1 -1
  13. package/build-module/box-control/linked-button.js +7 -11
  14. package/build-module/box-control/linked-button.js.map +1 -1
  15. package/build-module/box-control/types.js.map +1 -1
  16. package/build-types/border-box-control/border-box-control-linked-button/component.d.ts.map +1 -1
  17. package/build-types/box-control/index.d.ts.map +1 -1
  18. package/build-types/box-control/linked-button.d.ts.map +1 -1
  19. package/build-types/box-control/stories/index.story.d.ts +7 -2331
  20. package/build-types/box-control/stories/index.story.d.ts.map +1 -1
  21. package/build-types/box-control/types.d.ts +15 -3
  22. package/build-types/box-control/types.d.ts.map +1 -1
  23. package/package.json +19 -19
  24. package/src/border-box-control/border-box-control-linked-button/component.tsx +9 -14
  25. package/src/box-control/index.tsx +9 -0
  26. package/src/box-control/linked-button.tsx +8 -11
  27. package/src/box-control/test/index.tsx +9 -2
  28. package/src/box-control/types.ts +26 -11
  29. package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 29.3.0 (2025-01-29)
6
+
7
+ ### Enhancements
8
+
9
+ - `BorderBoxControl`, `BoxControl`: Remove `Tooltip` component from linked button ([#68498](https://github.com/WordPress/gutenberg/pull/68498)).
10
+
11
+ ### Internal
12
+
13
+ - `BoxControl`: Add runtime check for presets and presetKey ([#68385](https://github.com/WordPress/gutenberg/pull/68385)).
14
+
5
15
  ## 29.2.0 (2025-01-15)
6
16
 
7
17
  ### Internal
@@ -8,8 +8,6 @@ exports.default = void 0;
8
8
  var _icons = require("@wordpress/icons");
9
9
  var _i18n = require("@wordpress/i18n");
10
10
  var _button = _interopRequireDefault(require("../../button"));
11
- var _tooltip = _interopRequireDefault(require("../../tooltip"));
12
- var _view = require("../../view");
13
11
  var _context = require("../../context");
14
12
  var _hook = require("./hook");
15
13
  var _jsxRuntime = require("react/jsx-runtime");
@@ -28,19 +26,14 @@ const BorderBoxControlLinkedButton = (props, forwardedRef) => {
28
26
  ...buttonProps
29
27
  } = (0, _hook.useBorderBoxControlLinkedButton)(props);
30
28
  const label = isLinked ? (0, _i18n.__)('Unlink sides') : (0, _i18n.__)('Link sides');
31
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
32
- text: label,
33
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
34
- className: className,
35
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
36
- ...buttonProps,
37
- size: "small",
38
- icon: isLinked ? _icons.link : _icons.linkOff,
39
- iconSize: 24,
40
- "aria-label": label,
41
- ref: forwardedRef
42
- })
43
- })
29
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
30
+ ...buttonProps,
31
+ size: "small",
32
+ icon: isLinked ? _icons.link : _icons.linkOff,
33
+ iconSize: 24,
34
+ label: label,
35
+ ref: forwardedRef,
36
+ className: className
44
37
  });
45
38
  };
46
39
  const ConnectedBorderBoxControlLinkedButton = (0, _context.contextConnect)(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
@@ -1 +1 @@
1
- {"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","_view","_context","_hook","_jsxRuntime","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","useBorderBoxControlLinkedButton","label","__","jsx","default","text","children","View","size","icon","link","linkOff","iconSize","ref","ConnectedBorderBoxControlLinkedButton","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\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\tsize=\"small\"\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 24 }\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"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AAAyD,IAAAQ,WAAA,GAAAR,OAAA;AAdzD;AACA;AACA;;AAIA;AACA;AACA;;AAUA,MAAMS,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5C,IAAAC,qCAA+B,EAAEL,KAAM,CAAC;EACzC,MAAMM,KAAK,GAAGH,QAAQ,GAAG,IAAAI,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAT,WAAA,CAAAU,GAAA,EAACd,QAAA,CAAAe,OAAO;IAACC,IAAI,EAAGJ,KAAO;IAAAK,QAAA,eACtB,IAAAb,WAAA,CAAAU,GAAA,EAACb,KAAA,CAAAiB,IAAI;MAACV,SAAS,EAAGA,SAAW;MAAAS,QAAA,eAC5B,IAAAb,WAAA,CAAAU,GAAA,EAAChB,OAAA,CAAAiB,OAAM;QAAA,GACDL,WAAW;QAChBS,IAAI,EAAC,OAAO;QACZC,IAAI,EAAGX,QAAQ,GAAGY,WAAI,GAAGC,cAAS;QAClCC,QAAQ,EAAG,EAAI;QACf,cAAaX,KAAO;QACpBY,GAAG,EAAGjB;MAAc,CACpB;IAAC,CACG;EAAC,CACC,CAAC;AAEZ,CAAC;AAED,MAAMkB,qCAAqC,GAAG,IAAAC,uBAAc,EAC3DrB,4BAA4B,EAC5B,8BACD,CAAC;AAAC,IAAAsB,QAAA,GAAAC,OAAA,CAAAb,OAAA,GACaU,qCAAqC","ignoreList":[]}
1
+ {"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_context","_hook","_jsxRuntime","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","useBorderBoxControlLinkedButton","label","__","jsx","default","size","icon","link","linkOff","iconSize","ref","ConnectedBorderBoxControlLinkedButton","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\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<Button\n\t\t\t{ ...buttonProps }\n\t\t\tsize=\"small\"\n\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\ticonSize={ 24 }\n\t\t\tlabel={ label }\n\t\t\tref={ forwardedRef }\n\t\t\tclassName={ className }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAAyD,IAAAM,WAAA,GAAAN,OAAA;AAZzD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMO,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5C,IAAAC,qCAA+B,EAAEL,KAAM,CAAC;EACzC,MAAMM,KAAK,GAAGH,QAAQ,GAAG,IAAAI,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAT,WAAA,CAAAU,GAAA,EAACd,OAAA,CAAAe,OAAM;IAAA,GACDL,WAAW;IAChBM,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGR,QAAQ,GAAGS,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACfR,KAAK,EAAGA,KAAO;IACfS,GAAG,EAAGd,YAAc;IACpBC,SAAS,EAAGA;EAAW,CACvB,CAAC;AAEJ,CAAC;AAED,MAAMc,qCAAqC,GAAG,IAAAC,uBAAc,EAC3DlB,4BAA4B,EAC5B,8BACD,CAAC;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAV,OAAA,GACaO,qCAAqC","ignoreList":[]}
@@ -15,6 +15,7 @@ exports.default = void 0;
15
15
  var _compose = require("@wordpress/compose");
16
16
  var _element = require("@wordpress/element");
17
17
  var _i18n = require("@wordpress/i18n");
18
+ var _warning = _interopRequireDefault(require("@wordpress/warning"));
18
19
  var _baseControl = require("../base-control");
19
20
  var _inputControl = _interopRequireDefault(require("./input-control"));
20
21
  var _linkedButton = _interopRequireDefault(require("./linked-button"));
@@ -148,6 +149,11 @@ function BoxControl({
148
149
  size: undefined
149
150
  });
150
151
  const sidesToRender = (0, _utils2.getAllowedSides)(sides);
152
+ if (presets && !presetKey || !presets && presetKey) {
153
+ const definedProp = presets ? 'presets' : 'presetKey';
154
+ const missingProp = presets ? 'presetKey' : 'presets';
155
+ globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;
156
+ }
151
157
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid.Grid, {
152
158
  id: id,
153
159
  columns: 3,
@@ -1 +1 @@
1
- {"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_inputControl","_interopRequireDefault","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_deprecated36pxSize","_jsxRuntime","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","presets","presetKey","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValueMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","maybeWarnDeprecated36pxSize","componentName","size","undefined","sidesToRender","getAllowedSides","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","default","LinkedButtonWrapper","onClick","map","axis","Array","from","ResetButton","className","variant","disabled","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"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 { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n * const [ values, setValues ] = useState( {\n * top: '50px',\n * left: '10%',\n * right: '10%',\n * bottom: '50px',\n * } );\n *\n * return (\n * <BoxControl\n * __next40pxDefaultSize\n * values={ values }\n * onChange={ setValues }\n * />\n * );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\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\tpresets,\n\tpresetKey,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\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 || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\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< BoxControlValue >( {\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 = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\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\tonMouseOver,\n\t\tonMouseOut,\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\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_compose","require","_element","_i18n","_warning","_interopRequireDefault","_baseControl","_inputControl","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_deprecated36pxSize","_jsxRuntime","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","presets","presetKey","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValueMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","maybeWarnDeprecated36pxSize","componentName","size","undefined","sidesToRender","getAllowedSides","definedProp","missingProp","globalThis","SCRIPT_DEBUG","warning","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","default","LinkedButtonWrapper","onClick","map","axis","Array","from","ResetButton","className","variant","disabled","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n * const [ values, setValues ] = useState( {\n * top: '50px',\n * left: '10%',\n * right: '10%',\n * bottom: '50px',\n * } );\n *\n * return (\n * <BoxControl\n * __next40pxDefaultSize\n * values={ values }\n * onChange={ setValues }\n * />\n * );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\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\tpresets,\n\tpresetKey,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\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 || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\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< BoxControlValue >( {\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 = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\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\tonMouseOver,\n\t\tonMouseOut,\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\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\tif ( ( presets && ! presetKey ) || ( ! presets && presetKey ) ) {\n\t\tconst definedProp = presets ? 'presets' : 'presetKey';\n\t\tconst missingProp = presets ? 'presetKey' : 'presets';\n\t\twarning(\n\t\t\t`wp.components.BoxControl: the '${ missingProp }' prop is required when the '${ definedProp }' prop is defined.`\n\t\t);\n\t}\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}
@@ -8,7 +8,6 @@ exports.default = LinkedButton;
8
8
  var _icons = require("@wordpress/icons");
9
9
  var _i18n = require("@wordpress/i18n");
10
10
  var _button = _interopRequireDefault(require("../button"));
11
- var _tooltip = _interopRequireDefault(require("../tooltip"));
12
11
  var _jsxRuntime = require("react/jsx-runtime");
13
12
  /**
14
13
  * WordPress dependencies
@@ -23,16 +22,13 @@ function LinkedButton({
23
22
  ...props
24
23
  }) {
25
24
  const label = isLinked ? (0, _i18n.__)('Unlink sides') : (0, _i18n.__)('Link sides');
26
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
27
- text: label,
28
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
29
- ...props,
30
- className: "component-box-control__linked-button",
31
- size: "small",
32
- icon: isLinked ? _icons.link : _icons.linkOff,
33
- iconSize: 24,
34
- "aria-label": label
35
- })
25
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
26
+ ...props,
27
+ className: "component-box-control__linked-button",
28
+ size: "small",
29
+ icon: isLinked ? _icons.link : _icons.linkOff,
30
+ iconSize: 24,
31
+ label: label
36
32
  });
37
33
  }
38
34
  //# sourceMappingURL=linked-button.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","_jsxRuntime","LinkedButton","isLinked","props","label","__","jsx","default","text","children","className","size","icon","link","linkOff","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"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';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<Button\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\t\tsize=\"small\"\n\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\ticonSize={ 24 }\n\t\t\t\taria-label={ label }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AAAiC,IAAAK,WAAA,GAAAL,OAAA;AAVjC;AACA;AACA;;AAIA;AACA;AACA;;AAIe,SAASM,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAG,IAAAG,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACP,QAAA,CAAAQ,OAAO;IAACC,IAAI,EAAGJ,KAAO;IAAAK,QAAA,eACtB,IAAAT,WAAA,CAAAM,GAAA,EAACT,OAAA,CAAAU,OAAM;MAAA,GACDJ,KAAK;MACVO,SAAS,EAAC,sCAAsC;MAChDC,IAAI,EAAC,OAAO;MACZC,IAAI,EAAGV,QAAQ,GAAGW,WAAI,GAAGC,cAAS;MAClCC,QAAQ,EAAG,EAAI;MACf,cAAaX;IAAO,CACpB;EAAC,CACM,CAAC;AAEZ","ignoreList":[]}
1
+ {"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_jsxRuntime","LinkedButton","isLinked","props","label","__","jsx","default","className","size","icon","link","linkOff","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"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';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\tsize=\"small\"\n\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\ticonSize={ 24 }\n\t\t\tlabel={ label }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA+B,IAAAI,WAAA,GAAAJ,OAAA;AAT/B;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASK,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAG,IAAAG,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACR,OAAA,CAAAS,OAAM;IAAA,GACDJ,KAAK;IACVK,SAAS,EAAC,sCAAsC;IAChDC,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGR,QAAQ,GAAGS,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACfT,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\nexport interface Preset {\n\tname: string;\n\tslug: string;\n\tvalue?: string;\n}\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t\t/**\n\t\t * Available presets to pick from.\n\t\t */\n\t\tpresets?: Preset[];\n\t\t/**\n\t\t * The key of the preset to apply.\n\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t */\n\t\tpresetKey?: string;\n\t};\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n\tpresets?: Preset[];\n\tpresetKey?: string;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\nexport interface Preset {\n\tname: string;\n\tslug: string;\n\tvalue?: string;\n}\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Available presets to pick from.\n\t\t\t\t */\n\t\t\t\tpresets?: never;\n\t\t\t\t/**\n\t\t\t\t * The key of the preset to apply.\n\t\t\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t\t\t */\n\t\t\t\tpresetKey?: never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Available presets to pick from.\n\t\t\t\t */\n\t\t\t\tpresets: Preset[];\n\t\t\t\t/**\n\t\t\t\t * The key of the preset to apply.\n\t\t\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t\t\t */\n\t\t\t\tpresetKey: string;\n\t\t }\n\t);\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n\tpresets?: Preset[];\n\tpresetKey?: string;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}
@@ -8,8 +8,6 @@ import { __ } from '@wordpress/i18n';
8
8
  * Internal dependencies
9
9
  */
10
10
  import Button from '../../button';
11
- import Tooltip from '../../tooltip';
12
- import { View } from '../../view';
13
11
  import { contextConnect } from '../../context';
14
12
  import { useBorderBoxControlLinkedButton } from './hook';
15
13
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,19 +18,14 @@ const BorderBoxControlLinkedButton = (props, forwardedRef) => {
20
18
  ...buttonProps
21
19
  } = useBorderBoxControlLinkedButton(props);
22
20
  const label = isLinked ? __('Unlink sides') : __('Link sides');
23
- return /*#__PURE__*/_jsx(Tooltip, {
24
- text: label,
25
- children: /*#__PURE__*/_jsx(View, {
26
- className: className,
27
- children: /*#__PURE__*/_jsx(Button, {
28
- ...buttonProps,
29
- size: "small",
30
- icon: isLinked ? link : linkOff,
31
- iconSize: 24,
32
- "aria-label": label,
33
- ref: forwardedRef
34
- })
35
- })
21
+ return /*#__PURE__*/_jsx(Button, {
22
+ ...buttonProps,
23
+ size: "small",
24
+ icon: isLinked ? link : linkOff,
25
+ iconSize: 24,
26
+ label: label,
27
+ ref: forwardedRef,
28
+ className: className
36
29
  });
37
30
  };
38
31
  const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
@@ -1 +1 @@
1
- {"version":3,"names":["link","linkOff","__","Button","Tooltip","View","contextConnect","useBorderBoxControlLinkedButton","jsx","_jsx","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","text","children","size","icon","iconSize","ref","ConnectedBorderBoxControlLinkedButton"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\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\tsize=\"small\"\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 24 }\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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,OAAO,MAAM,eAAe;AACnC,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,+BAA+B,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIzD,MAAMC,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5CR,+BAA+B,CAAEI,KAAM,CAAC;EACzC,MAAMK,KAAK,GAAGF,QAAQ,GAAGZ,EAAE,CAAE,cAAe,CAAC,GAAGA,EAAE,CAAE,YAAa,CAAC;EAElE,oBACCO,IAAA,CAACL,OAAO;IAACa,IAAI,EAAGD,KAAO;IAAAE,QAAA,eACtBT,IAAA,CAACJ,IAAI;MAACQ,SAAS,EAAGA,SAAW;MAAAK,QAAA,eAC5BT,IAAA,CAACN,MAAM;QAAA,GACDY,WAAW;QAChBI,IAAI,EAAC,OAAO;QACZC,IAAI,EAAGN,QAAQ,GAAGd,IAAI,GAAGC,OAAS;QAClCoB,QAAQ,EAAG,EAAI;QACf,cAAaL,KAAO;QACpBM,GAAG,EAAGV;MAAc,CACpB;IAAC,CACG;EAAC,CACC,CAAC;AAEZ,CAAC;AAED,MAAMW,qCAAqC,GAAGjB,cAAc,CAC3DI,4BAA4B,EAC5B,8BACD,CAAC;AACD,eAAea,qCAAqC","ignoreList":[]}
1
+ {"version":3,"names":["link","linkOff","__","Button","contextConnect","useBorderBoxControlLinkedButton","jsx","_jsx","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","size","icon","iconSize","ref","ConnectedBorderBoxControlLinkedButton"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\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<Button\n\t\t\t{ ...buttonProps }\n\t\t\tsize=\"small\"\n\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\ticonSize={ 24 }\n\t\t\tlabel={ label }\n\t\t\tref={ forwardedRef }\n\t\t\tclassName={ className }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,+BAA+B,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIzD,MAAMC,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5CR,+BAA+B,CAAEI,KAAM,CAAC;EACzC,MAAMK,KAAK,GAAGF,QAAQ,GAAGV,EAAE,CAAE,cAAe,CAAC,GAAGA,EAAE,CAAE,YAAa,CAAC;EAElE,oBACCK,IAAA,CAACJ,MAAM;IAAA,GACDU,WAAW;IAChBE,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGJ,QAAQ,GAAGZ,IAAI,GAAGC,OAAS;IAClCgB,QAAQ,EAAG,EAAI;IACfH,KAAK,EAAGA,KAAO;IACfI,GAAG,EAAGR,YAAc;IACpBC,SAAS,EAAGA;EAAW,CACvB,CAAC;AAEJ,CAAC;AAED,MAAMQ,qCAAqC,GAAGf,cAAc,CAC3DI,4BAA4B,EAC5B,8BACD,CAAC;AACD,eAAeW,qCAAqC","ignoreList":[]}
@@ -5,6 +5,7 @@
5
5
  import { useInstanceId } from '@wordpress/compose';
6
6
  import { useState } from '@wordpress/element';
7
7
  import { __ } from '@wordpress/i18n';
8
+ import warning from '@wordpress/warning';
8
9
 
9
10
  /**
10
11
  * Internal dependencies
@@ -134,6 +135,11 @@ function BoxControl({
134
135
  size: undefined
135
136
  });
136
137
  const sidesToRender = getAllowedSides(sides);
138
+ if (presets && !presetKey || !presets && presetKey) {
139
+ const definedProp = presets ? 'presets' : 'presetKey';
140
+ const missingProp = presets ? 'presetKey' : 'presets';
141
+ globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;
142
+ }
137
143
  return /*#__PURE__*/_jsxs(Grid, {
138
144
  id: id,
139
145
  columns: 3,
@@ -1 +1 @@
1
- {"version":3,"names":["useInstanceId","useState","__","BaseControl","InputControl","LinkedButton","Grid","InputWrapper","ResetButton","LinkedButtonWrapper","parseQuantityAndUnitFromRawValue","DEFAULT_VALUES","getInitialSide","isValueMixed","isValuesDefined","getAllowedSides","useControlledState","maybeWarnDeprecated36pxSize","jsx","_jsx","jsxs","_jsxs","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","presets","presetKey","onMouseOver","onMouseOut","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","componentName","size","undefined","sidesToRender","columns","templateColumns","role","children","VisualLabel","onClick","map","axis","Array","from","className","variant","disabled","applyValueToSides"],"sources":["@wordpress/components/src/box-control/index.tsx"],"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 { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n * const [ values, setValues ] = useState( {\n * top: '50px',\n * left: '10%',\n * right: '10%',\n * bottom: '50px',\n * } );\n *\n * return (\n * <BoxControl\n * __next40pxDefaultSize\n * values={ values }\n * onChange={ setValues }\n * />\n * );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\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\tpresets,\n\tpresetKey,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\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 || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\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< BoxControlValue >( {\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 = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\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\tonMouseOver,\n\t\tonMouseOut,\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\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["useInstanceId","useState","__","warning","BaseControl","InputControl","LinkedButton","Grid","InputWrapper","ResetButton","LinkedButtonWrapper","parseQuantityAndUnitFromRawValue","DEFAULT_VALUES","getInitialSide","isValueMixed","isValuesDefined","getAllowedSides","useControlledState","maybeWarnDeprecated36pxSize","jsx","_jsx","jsxs","_jsxs","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","presets","presetKey","onMouseOver","onMouseOut","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","componentName","size","undefined","sidesToRender","definedProp","missingProp","globalThis","SCRIPT_DEBUG","columns","templateColumns","role","children","VisualLabel","onClick","map","axis","Array","from","className","variant","disabled","applyValueToSides"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n * const [ values, setValues ] = useState( {\n * top: '50px',\n * left: '10%',\n * right: '10%',\n * bottom: '50px',\n * } );\n *\n * return (\n * <BoxControl\n * __next40pxDefaultSize\n * values={ values }\n * onChange={ setValues }\n * />\n * );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\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\tpresets,\n\tpresetKey,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\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 || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\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< BoxControlValue >( {\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 = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\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\tonMouseOver,\n\t\tonMouseOut,\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\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\tif ( ( presets && ! presetKey ) || ( ! presets && presetKey ) ) {\n\t\tconst definedProp = presets ? 'presets' : 'presetKey';\n\t\tconst missingProp = presets ? 'presetKey' : 'presets';\n\t\twarning(\n\t\t\t`wp.components.BoxControl: the '${ missingProp }' prop is required when the '${ definedProp }' prop is defined.`\n\t\t);\n\t}\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}
@@ -8,23 +8,19 @@ import { __ } from '@wordpress/i18n';
8
8
  * Internal dependencies
9
9
  */
10
10
  import Button from '../button';
11
- import Tooltip from '../tooltip';
12
11
  import { jsx as _jsx } from "react/jsx-runtime";
13
12
  export default function LinkedButton({
14
13
  isLinked,
15
14
  ...props
16
15
  }) {
17
16
  const label = isLinked ? __('Unlink sides') : __('Link sides');
18
- return /*#__PURE__*/_jsx(Tooltip, {
19
- text: label,
20
- children: /*#__PURE__*/_jsx(Button, {
21
- ...props,
22
- className: "component-box-control__linked-button",
23
- size: "small",
24
- icon: isLinked ? link : linkOff,
25
- iconSize: 24,
26
- "aria-label": label
27
- })
17
+ return /*#__PURE__*/_jsx(Button, {
18
+ ...props,
19
+ className: "component-box-control__linked-button",
20
+ size: "small",
21
+ icon: isLinked ? link : linkOff,
22
+ iconSize: 24,
23
+ label: label
28
24
  });
29
25
  }
30
26
  //# sourceMappingURL=linked-button.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["link","linkOff","__","Button","Tooltip","jsx","_jsx","LinkedButton","isLinked","props","label","text","children","className","size","icon","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"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';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<Button\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\t\tsize=\"small\"\n\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\ticonSize={ 24 }\n\t\t\t\taria-label={ label }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,OAAO,MAAM,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjC,eAAe,SAASC,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAGN,EAAE,CAAE,cAAe,CAAC,GAAGA,EAAE,CAAE,YAAa,CAAC;EAElE,oBACCI,IAAA,CAACF,OAAO;IAACO,IAAI,EAAGD,KAAO;IAAAE,QAAA,eACtBN,IAAA,CAACH,MAAM;MAAA,GACDM,KAAK;MACVI,SAAS,EAAC,sCAAsC;MAChDC,IAAI,EAAC,OAAO;MACZC,IAAI,EAAGP,QAAQ,GAAGR,IAAI,GAAGC,OAAS;MAClCe,QAAQ,EAAG,EAAI;MACf,cAAaN;IAAO,CACpB;EAAC,CACM,CAAC;AAEZ","ignoreList":[]}
1
+ {"version":3,"names":["link","linkOff","__","Button","jsx","_jsx","LinkedButton","isLinked","props","label","className","size","icon","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"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';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\tsize=\"small\"\n\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\ticonSize={ 24 }\n\t\t\tlabel={ label }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/B,eAAe,SAASC,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAGL,EAAE,CAAE,cAAe,CAAC,GAAGA,EAAE,CAAE,YAAa,CAAC;EAElE,oBACCG,IAAA,CAACF,MAAM;IAAA,GACDK,KAAK;IACVE,SAAS,EAAC,sCAAsC;IAChDC,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGL,QAAQ,GAAGP,IAAI,GAAGC,OAAS;IAClCY,QAAQ,EAAG,EAAI;IACfJ,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\nexport interface Preset {\n\tname: string;\n\tslug: string;\n\tvalue?: string;\n}\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t\t/**\n\t\t * Available presets to pick from.\n\t\t */\n\t\tpresets?: Preset[];\n\t\t/**\n\t\t * The key of the preset to apply.\n\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t */\n\t\tpresetKey?: string;\n\t};\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n\tpresets?: Preset[];\n\tpresetKey?: string;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\nexport interface Preset {\n\tname: string;\n\tslug: string;\n\tvalue?: string;\n}\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Available presets to pick from.\n\t\t\t\t */\n\t\t\t\tpresets?: never;\n\t\t\t\t/**\n\t\t\t\t * The key of the preset to apply.\n\t\t\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t\t\t */\n\t\t\t\tpresetKey?: never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Available presets to pick from.\n\t\t\t\t */\n\t\t\t\tpresets: Preset[];\n\t\t\t\t/**\n\t\t\t\t * The key of the preset to apply.\n\t\t\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t\t\t */\n\t\t\t\tpresetKey: string;\n\t\t }\n\t);\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n\tpresets?: Preset[];\n\tpresetKey?: string;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-linked-button/component.tsx"],"names":[],"mappings":"AA0CA,QAAA,MAAM,qCAAqC;;;6CAG1C,CAAC;AACF,eAAe,qCAAqC,CAAC"}
1
+ {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-linked-button/component.tsx"],"names":[],"mappings":"AAqCA,QAAA,MAAM,qCAAqC;;;6CAG1C,CAAC;AACF,eAAe,qCAAqC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/box-control/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAEX,eAAe,EAEf,MAAM,SAAS,CAAC;AAejB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,UAAU,CAAE,EACpB,qBAA6B,EAC7B,EAAE,EAAE,MAAM,EACV,UAA8B,EAC9B,QAAe,EACf,KAA2B,EAC3B,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,KAAK,EACL,WAAmB,EACnB,UAAiB,EACjB,WAA4B,EAC5B,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,GACV,EAAE,eAAe,+BAuIjB;AAED,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/box-control/index.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAEX,eAAe,EAEf,MAAM,SAAS,CAAC;AAejB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,UAAU,CAAE,EACpB,qBAA6B,EAC7B,EAAE,EAAE,MAAM,EACV,UAA8B,EAC9B,QAAe,EACf,KAA2B,EAC3B,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,KAAK,EACL,WAAmB,EACnB,UAAiB,EACjB,WAA4B,EAC5B,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,GACV,EAAE,eAAe,+BA+IjB;AAED,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,eAAe,UAAU,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"linked-button.d.ts","sourceRoot":"","sources":["../../src/box-control/linked-button.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,MAAM,MAAM,WAAW,CAAC;AAG/B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,GAAG,KAAK,EACR,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,cAAc,CAAE,OAAO,MAAM,CAAE,+BAehE"}
1
+ {"version":3,"file":"linked-button.d.ts","sourceRoot":"","sources":["../../src/box-control/linked-button.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,GAAG,KAAK,EACR,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,cAAc,CAAE,OAAO,MAAM,CAAE,+BAahE"}