@wordpress/block-editor/build/components/spacing-sizes-control/index.cjs.map

Generic block editor.

{
  "version": 3,
  "sources": ["../../../src/components/spacing-sizes-control/index.js"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSpacingSizes from './hooks/use-spacing-sizes';\nimport AxialInputControls from './input-controls/axial';\nimport SeparatedInputControls from './input-controls/separated';\nimport SingleInputControl from './input-controls/single';\nimport LinkedButton from './linked-button';\nimport {\n\tALL_SIDES,\n\tDEFAULT_VALUES,\n\tLABELS,\n\tVIEWS,\n\tgetInitialView,\n} from './utils';\n\n/**\n * A flexible control for managing spacing values in the block editor. Supports single, axial,\n * and separated input controls for different spacing configurations with automatic view selection\n * based on current values and available sides.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/spacing-sizes-control/README.md\n *\n * @example\n * ```jsx\n * import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n *   const [ sides, setSides ] = useState( {\n *     top: '0px',\n *     right: '0px',\n *     bottom: '0px',\n *     left: '0px',\n *   } );\n *\n *   return (\n *     <SpacingSizesControl\n *       values={ sides }\n *       onChange={ setSides }\n *       label=\"Sides\"\n *     />\n *   );\n * }\n * ```\n *\n * @param {Object}   props                    Component props.\n * @param {Object}   props.inputProps         Additional props for input controls.\n * @param {string}   props.label              Label for the control.\n * @param {number}   props.minimumCustomValue Minimum value for custom input.\n * @param {Function} props.onChange           Called when spacing values change.\n * @param {Function} props.onMouseOut         Called when mouse leaves the control.\n * @param {Function} props.onMouseOver        Called when mouse enters the control.\n * @param {boolean}  props.showSideInLabel    Show side in control label.\n * @param {Array}    props.sides              Available sides for control.\n * @param {boolean}  props.useSelect          Use select control for predefined values.\n * @param {Object}   props.values             Current spacing values.\n * @return {Element}                         Spacing sizes control component.\n */\nexport default function SpacingSizesControl( {\n\tinputProps,\n\tlabel: labelProp,\n\tminimumCustomValue = 0,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tshowSideInLabel = true,\n\tsides = ALL_SIDES,\n\tuseSelect,\n\tvalues,\n} ) {\n\tconst spacingSizes = useSpacingSizes();\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasOneSide = sides?.length === 1;\n\tconst hasOnlyAxialSides =\n\t\tsides?.includes( 'horizontal' ) &&\n\t\tsides?.includes( 'vertical' ) &&\n\t\tsides?.length === 2;\n\n\tconst [ view, setView ] = useState( getInitialView( inputValues, sides ) );\n\n\tconst toggleLinked = () => {\n\t\tsetView( view === VIEWS.axial ? VIEWS.custom : VIEWS.axial );\n\t};\n\n\tconst handleOnChange = ( nextValue ) => {\n\t\tconst newValues = { ...values, ...nextValue };\n\t\tonChange( newValues );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tminimumCustomValue,\n\t\tonChange: handleOnChange,\n\t\tonMouseOut,\n\t\tonMouseOver,\n\t\tsides,\n\t\tspacingSizes,\n\t\ttype: labelProp,\n\t\tuseSelect,\n\t\tvalues: inputValues,\n\t};\n\n\tconst renderControls = () => {\n\t\tif ( view === VIEWS.axial ) {\n\t\t\treturn <AxialInputControls { ...inputControlProps } />;\n\t\t}\n\t\tif ( view === VIEWS.custom ) {\n\t\t\treturn <SeparatedInputControls { ...inputControlProps } />;\n\t\t}\n\t\treturn (\n\t\t\t<SingleInputControl\n\t\t\t\tside={ view }\n\t\t\t\t{ ...inputControlProps }\n\t\t\t\tshowSideInLabel={ showSideInLabel }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst sideLabel =\n\t\tALL_SIDES.includes( view ) && showSideInLabel ? LABELS[ view ] : '';\n\n\tconst label = sprintf(\n\t\t// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).\n\t\t_x( '%1$s %2$s', 'spacing' ),\n\t\tlabelProp,\n\t\tsideLabel\n\t).trim();\n\n\treturn (\n\t\t<fieldset className=\"spacing-sizes-control\">\n\t\t\t<HStack className=\"spacing-sizes-control__header\">\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"spacing-sizes-control__label\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t{ ! hasOneSide && ! hasOnlyAxialSides && (\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tlabel={ labelProp }\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ view === VIEWS.axial }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t<VStack spacing={ 0.5 }>{ renderControls() }</VStack>\n\t\t</fieldset>\n\t);\n}\n"],
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAAyB;AACzB,kBAA4B;AAK5B,+BAA4B;AAC5B,mBAA+B;AAC/B,uBAAmC;AACnC,oBAA+B;AAC/B,2BAAyB;AACzB,mBAMO;AA2FG;AA9CK,SAAR,oBAAsC;AAAA,EAC5C;AAAA,EACA,OAAO;AAAA,EACP,qBAAqB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA;AACD,GAAI;AACH,QAAM,mBAAe,yBAAAA,SAAgB;AACrC,QAAM,cAAc,UAAU;AAC9B,QAAM,aAAa,OAAO,WAAW;AACrC,QAAM,oBACL,OAAO,SAAU,YAAa,KAC9B,OAAO,SAAU,UAAW,KAC5B,OAAO,WAAW;AAEnB,QAAM,CAAE,MAAM,OAAQ,QAAI,6BAAU,6BAAgB,aAAa,KAAM,CAAE;AAEzE,QAAM,eAAe,MAAM;AAC1B,YAAS,SAAS,mBAAM,QAAQ,mBAAM,SAAS,mBAAM,KAAM;AAAA,EAC5D;AAEA,QAAM,iBAAiB,CAAE,cAAe;AACvC,UAAM,YAAY,EAAE,GAAG,QAAQ,GAAG,UAAU;AAC5C,aAAU,SAAU;AAAA,EACrB;AAEA,QAAM,oBAAoB;AAAA,IACzB,GAAG;AAAA,IACH;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,EACT;AAEA,QAAM,iBAAiB,MAAM;AAC5B,QAAK,SAAS,mBAAM,OAAQ;AAC3B,aAAO,4CAAC,aAAAC,SAAA,EAAqB,GAAG,mBAAoB;AAAA,IACrD;AACA,QAAK,SAAS,mBAAM,QAAS;AAC5B,aAAO,4CAAC,iBAAAC,SAAA,EAAyB,GAAG,mBAAoB;AAAA,IACzD;AACA,WACC;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA,MAAO;AAAA,QACL,GAAG;AAAA,QACL;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,QAAM,YACL,uBAAU,SAAU,IAAK,KAAK,kBAAkB,oBAAQ,IAAK,IAAI;AAElE,QAAM,YAAQ;AAAA;AAAA,QAEb,gBAAI,aAAa,SAAU;AAAA,IAC3B;AAAA,IACA;AAAA,EACD,EAAE,KAAK;AAEP,SACC,6CAAC,cAAS,WAAU,yBACnB;AAAA,iDAAC,kBAAAC,sBAAA,EAAO,WAAU,iCACjB;AAAA;AAAA,QAAC,8BAAY;AAAA,QAAZ;AAAA,UACA,IAAG;AAAA,UACH,WAAU;AAAA,UAER;AAAA;AAAA,MACH;AAAA,MACE,CAAE,cAAc,CAAE,qBACnB;AAAA,QAAC,qBAAAC;AAAA,QAAA;AAAA,UACA,OAAQ;AAAA,UACR,SAAU;AAAA,UACV,UAAW,SAAS,mBAAM;AAAA;AAAA,MAC3B;AAAA,OAEF;AAAA,IACA,4CAAC,kBAAAC,sBAAA,EAAO,SAAU,KAAQ,yBAAe,GAAG;AAAA,KAC7C;AAEF;",
  "names": ["useSpacingSizes", "AxialInputControls", "SeparatedInputControls", "SingleInputControl", "HStack", "LinkedButton", "VStack"]
}