@wordpress/components 19.10.0 → 19.13.0

package/build-module/border-control/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/styles.ts"],"names":["css","COLORS","CONFIG","rtl","space","StyledField","StyledLabel","BackdropUI","Root","UnitControlWrapper","labelStyles","borderControl","innerWrapper","borderWidth","gray","marginLeft","wrapperWidth","width","borderControlDropdown","borderRadius","borderRight","borderLeft","colorIndicatorBorder","border","color","style","fallbackColor","undefined","colorIndicatorWrapper","borderControlPopover","borderControlPopoverControls","borderControlPopoverContent","borderColorIndicator","resetButton","borderWidthControl","paddingRight","borderControlStylePicker","borderStyleButton","borderSlider","marginRight"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\nimport {\n\tStyledField,\n\tStyledLabel,\n} from '../base-control/styles/base-control-styles';\nimport { BackdropUI } from '../input-control/styles/input-control-styles';\nimport { Root as UnitControlWrapper } from '../unit-control/styles/unit-control-styles';\n\nimport type { Border } from './types';\n\nconst labelStyles = css`\n\tfont-weight: 500;\n`;\n\nexport const borderControl = css`\n\tposition: relative;\n`;\n\nexport const innerWrapper = () => css`\n\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };\n\tborder-radius: 2px;\n\tflex: 1 0 40%;\n\n\t/*\n\t * Needs more thought. Aim is to prevent the border for BorderBoxControl\n\t * showing through the control. Likely needs to take into account\n\t * light/dark themes etc.\n\t */\n\tbackground: #fff;\n\n\t/*\n\t * Forces the width control to fill available space given UnitControl\n\t * passes its className directly through to the input.\n\t */\n\t${ UnitControlWrapper } {\n\t\tflex: 1;\n\t\t${ rtl( { marginLeft: 0 } )() }\n\t}\n`;\n\nexport const wrapperWidth = ( width: CSSProperties[ 'width' ] ) => {\n\treturn css`\n\t\twidth: ${ width };\n\t\tflex: 0 0 auto;\n\t`;\n};\n\nexport const borderControlDropdown = () => css`\n\tbackground: #fff;\n\t${ rtl(\n\t\t{\n\t\t\tborderRadius: `1px 0 0 1px`,\n\t\t\tborderRight: `${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] }`,\n\t\t},\n\t\t{\n\t\t\tborderRadius: `0 1px 1px 0`,\n\t\t\tborderLeft: `${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] }`,\n\t\t}\n\t)() }\n\n\t&& > button {\n\t\tpadding: ${ space( 1 ) };\n\t\tborder-radius: inherit;\n\t}\n`;\n\nexport const colorIndicatorBorder = ( border?: Border ) => {\n\tconst { color, style } = border || {};\n\n\tconst fallbackColor =\n\t\t!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;\n\n\treturn css`\n\t\tborder-style: ${ style === 'none' ? 'solid' : style };\n\t\tborder-color: ${ color || fallbackColor };\n\t`;\n};\n\nexport const colorIndicatorWrapper = ( border?: Border ) => {\n\tconst { style } = border || {};\n\n\treturn css`\n\t\tborder-radius: 9999px;\n\t\tborder: 2px solid transparent;\n\t\t${ style ? colorIndicatorBorder( border ) : undefined }\n\t\twidth: 28px;\n\t\theight: 28px;\n\t\tpadding: 2px;\n\n\t\t/*\n\t\t * ColorIndicator\n\t\t *\n\t\t * The transparent colors used here ensure visibility of the indicator\n\t\t * over the active state of the border control dropdown's toggle button.\n\t\t */\n\t\t& > span {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);\n\t\t}\n\t`;\n};\n\nexport const borderControlPopover = css`\n\t/* Remove padding from content, this will be re-added via inner elements*/\n\t&& > div > div {\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverControls = css`\n\tpadding: ${ space( 2 ) };\n\n\t> div:first-of-type > ${ StyledLabel } {\n\t\tmargin-bottom: 0;\n\t\t${ labelStyles }\n\t}\n\n\t&& ${ StyledLabel } + button:not( .has-text ) {\n\t\tmin-width: 24px;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverContent = css``;\nexport const borderColorIndicator = css``;\n\nexport const resetButton = css`\n\tjustify-content: center;\n\twidth: 100%;\n\n\t/* Override button component styling */\n\t&& {\n\t\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };\n\t\theight: 46px;\n\t}\n`;\n\nexport const borderWidthControl = () => css`\n\t/* Target the InputControl's backdrop */\n\t&&& ${ BackdropUI } {\n\t\tborder: none;\n\t}\n\n\t/* Specificity required to overcome UnitControl padding */\n\t/* See packages/components/src/unit-control/styles/unit-control-styles.ts */\n\t&&& input {\n\t\t${ rtl( { paddingRight: 0 } )() }\n\t}\n`;\n\nexport const borderControlStylePicker = css`\n\t${ StyledLabel } {\n\t\t${ labelStyles }\n\t}\n`;\n\nexport const borderStyleButton = css`\n\t&&&&& {\n\t\tmin-width: 30px;\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tpadding: 3px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n\n\t${ StyledField } {\n\t\tmargin-bottom: 0;\n\t\tfont-size: 0;\n\t\tdisplay: flex;\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/styles.ts"],"names":["css","COLORS","CONFIG","rtl","space","StyledField","StyledLabel","BackdropUI","Root","UnitControlWrapper","UnitSelect","labelStyles","focusBoxShadow","borderWidth","ui","borderFocus","borderControl","innerWrapper","marginLeft","borderRadius","marginRight","wrapperWidth","width","wrapperHeight","__next36pxDefaultSize","borderControlDropdown","border","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","borderControlPopover","borderControlPopoverControls","borderControlPopoverContent","borderColorIndicator","resetButton","borderWidthControl","borderTopLeftRadius","borderBottomLeftRadius","paddingRight","borderControlStylePicker","borderStyleButton","borderSlider"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,GAAzB,QAAoC,UAApC;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SACCC,WADD,EAECC,WAFD,QAGO,4CAHP;AAIA,SAASC,UAAT,QAA2B,8CAA3B;AACA,SACCC,IAAI,IAAIC,kBADT,EAECC,UAFD,QAGO,4CAHP;AAOA,MAAMC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAjB;AAIA,MAAMC,cAAc,gBAAGZ,GAAH,4BACQE,MAAM,CAACW,WADf,OACgCZ,MAAM,CAACa,EAAP,CAAUC,WAD1C,wvQAApB;AAIA,OAAO,MAAMC,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAnB;AAIP,OAAO,MAAMC,YAAY,GAAG,mBAAMjB,GAAN,kCAcxBS,kBAdwB,cAgBvBN,GAAG,CAAE;AAAEe,EAAAA,UAAU,EAAE,CAAC;AAAf,CAAF,CAAH,EAhBuB,WAmBrBR,UAnBqB,oBAsBvBP,GAAG,CACL;AACCgB,EAAAA,YAAY,EAAE,aADf;AAECC,EAAAA,WAAW,EAAE;AAFd,CADK,EAKL;AACCD,EAAAA,YAAY,EAAE,aADf;AAECD,EAAAA,UAAU,EAAE;AAFb,CALK,CAAH,EAtBuB,8EAoCtBN,cApCsB,wBAqCJX,MAAM,CAACa,EAAP,CAAUC,WArCN,wvQAArB;AA0CP,OAAO,MAAMM,YAAY,GAAKC,KAAF,IAAuC;AAClE,sBAAOtB,GAAP,WACWsB,KADX;AAIA,CALM;AAOP;AACA;AACA;AACA;;AACA,OAAO,MAAMC,aAAa,GAAKC,qBAAF,IAAuC;AACnE,sBAAOxB,GAAP,YACYwB,qBAAqB,GAAG,MAAH,GAAY,MAD7C;AAGA,CAJM;AAMP,OAAO,MAAMC,qBAAqB,GAAG,mBAAMzB,GAAN,mDASvBI,KAAK,CAAE,IAAF,CATkB,OAUhCD,GAAG,CACL;AAAEgB,EAAAA,YAAY,EAAG;AAAjB,CADK,EAEL;AAAEA,EAAAA,YAAY,EAAG;AAAjB,CAFK,CAAH,EAVgC,cAcxBjB,MAAM,CAACW,WAdiB,aAcMZ,MAAM,CAACa,EAAP,CAAUY,MAdhB,0DAmB/Bd,cAnB+B,oBAoBjBX,MAAM,CAACa,EAAP,CAAUC,WApBO,6xQAA9B;AA2BP,OAAO,MAAMY,oBAAoB,GAAKD,MAAF,IAAuB;AAC1D,QAAM;AAAEE,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAmBH,MAAM,IAAI,EAAnC;AAEA,QAAMI,aAAa,GAClB,CAAC,CAAED,KAAH,IAAYA,KAAK,KAAK,MAAtB,GAA+B5B,MAAM,CAAC8B,IAAP,CAAa,GAAb,CAA/B,GAAoDC,SADrD;AAGA,sBAAOhC,GAAP,kBACkB6B,KAAK,KAAK,MAAV,GAAmB,OAAnB,GAA6BA,KAD/C,oBAEkBD,KAAK,IAAIE,aAF3B;AAIA,CAVM;;;;;;;;;;;;AAYP,OAAO,MAAMG,qBAAqB,GAAG,CACpCP,MADoC,EAEpCF,qBAFoC,KAGhC;AACJ,QAAM;AAAEK,IAAAA;AAAF,MAAYH,MAAM,IAAI,EAA5B;AAEA,sBAAO1B,GAAP,uDAGI6B,KAAK,GAAGF,oBAAoB,CAAED,MAAF,CAAvB,GAAoCM,SAH7C,aAIWR,qBAAqB,GAAG,MAAH,GAAY,MAJ5C,cAKYA,qBAAqB,GAAG,MAAH,GAAY,MAL7C,eAMaA,qBAAqB,GAAG,KAAH,GAAW,KAN7C,cAeK,CAAEA,qBAAF,UAMA,EArBL;AA+BA,CArCM;AAuCP,OAAO,MAAMU,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAA1B;AAQP,OAAO,MAAMC,4BAA4B,gBAAGnC,GAAH,aAC5BI,KAAK,CAAE,CAAF,CADuB,0BAGfE,WAHe,uBAKpCK,WALoC,WAQlCL,WARkC,wzQAAlC;AAcP,OAAO,MAAM8B,2BAA2B,gBAAGpC,GAAH,4vQAAjC;AACP,OAAO,MAAMqC,oBAAoB,gBAAGrC,GAAH,qvQAA1B;AAEP,OAAO,MAAMsC,WAAW,gBAAGtC,GAAH,qDAMPE,MAAM,CAACW,WANA,aAMuBZ,MAAM,CAAC8B,IAAP,CAAa,GAAb,CANvB,kwQAAjB;AAWP,OAAO,MAAMQ,kBAAkB,GAAG,mBAAMvC,GAAN,SAE1BO,UAF0B,OAG7BJ,GAAG,CAAE;AACPqC,EAAAA,mBAAmB,EAAE,CADd;AAEPC,EAAAA,sBAAsB,EAAE;AAFjB,CAAF,CAAH,EAH6B,oDAa7BtC,GAAG,CAAE;AAAEuC,EAAAA,YAAY,EAAE;AAAhB,CAAF,CAAH,EAb6B,6vQAA3B;AAiBP,OAAO,MAAMC,wBAAwB,gBAAG3C,GAAH,CACjCM,WADiC,OAEhCK,WAFgC,mwQAA9B;AAMP,OAAO,MAAMiC,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAvB;AASP,OAAO,MAAMC,YAAY,GAAG,mBAAM7C,GAAN,kBAExBG,GAAG,CAAE;AAAEiB,EAAAA,WAAW,EAAEhB,KAAK,CAAE,CAAF;AAApB,CAAF,CAAH,EAFwB,OAIxBC,WAJwB,gyQAArB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\nimport {\n\tStyledField,\n\tStyledLabel,\n} from '../base-control/styles/base-control-styles';\nimport { BackdropUI } from '../input-control/styles/input-control-styles';\nimport {\n\tRoot as UnitControlWrapper,\n\tUnitSelect,\n} from '../unit-control/styles/unit-control-styles';\n\nimport type { Border } from './types';\n\nconst labelStyles = css`\n\tfont-weight: 500;\n`;\n\nconst focusBoxShadow = css`\n\tbox-shadow: inset 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };\n`;\n\nexport const borderControl = css`\n\tposition: relative;\n`;\n\nexport const innerWrapper = () => css`\n\tflex: 1 0 40%;\n\n\t/*\n\t * Needs more thought. Aim is to prevent the border for BorderBoxControl\n\t * showing through the control. Likely needs to take into account\n\t * light/dark themes etc.\n\t */\n\tbackground: #fff;\n\n\t/*\n\t * Forces the width control to fill available space given UnitControl\n\t * passes its className directly through to the input.\n\t */\n\t${ UnitControlWrapper } {\n\t\tflex: 1;\n\t\t${ rtl( { marginLeft: -1 } )() }\n\t}\n\n\t&& ${ UnitSelect } {\n\t\t/* Prevent default styles forcing heights larger than BorderControl */\n\t\tmin-height: 0;\n\t\t${ rtl(\n\t\t\t{\n\t\t\t\tborderRadius: '0 1px 1px 0',\n\t\t\t\tmarginRight: 0,\n\t\t\t},\n\t\t\t{\n\t\t\t\tborderRadius: '1px 0 0 1px',\n\t\t\t\tmarginLeft: 0,\n\t\t\t}\n\t\t)() }\n\t\ttransition: box-shadow 0.1s linear, border 0.1s linear;\n\n\t\t&:focus {\n\t\t\tz-index: 1;\n\t\t\t${ focusBoxShadow }\n\t\t\tborder: 1px solid ${ COLORS.ui.borderFocus };\n\t\t}\n\t}\n`;\n\nexport const wrapperWidth = ( width: CSSProperties[ 'width' ] ) => {\n\treturn css`\n\t\twidth: ${ width };\n\t\tflex: 0 0 auto;\n\t`;\n};\n\n/*\n * When default control height is 36px the following should be removed.\n * See: InputControl and __next36pxDefaultSize.\n */\nexport const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => {\n\treturn css`\n\t\theight: ${ __next36pxDefaultSize ? '36px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = () => css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\t/*\n\t\t * Override button component height and padding to fit within\n\t\t * BorderControl\n\t\t */\n\t\theight: 100%;\n\t\tpadding: ${ space( 0.75 ) };\n\t\t${ rtl(\n\t\t\t{ borderRadius: `2px 0 0 2px` },\n\t\t\t{ borderRadius: `0 2px 2px 0` }\n\t\t)() }\n\t\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\t\tposition: relative;\n\n\t\t&:focus,\n\t\t&:hover:not( :disabled ) {\n\t\t\t${ focusBoxShadow }\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t}\n\t}\n`;\n\nexport const colorIndicatorBorder = ( border?: Border ) => {\n\tconst { color, style } = border || {};\n\n\tconst fallbackColor =\n\t\t!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;\n\n\treturn css`\n\t\tborder-style: ${ style === 'none' ? 'solid' : style };\n\t\tborder-color: ${ color || fallbackColor };\n\t`;\n};\n\nexport const colorIndicatorWrapper = (\n\tborder?: Border,\n\t__next36pxDefaultSize?: boolean\n) => {\n\tconst { style } = border || {};\n\n\treturn css`\n\t\tborder-radius: 9999px;\n\t\tborder: 2px solid transparent;\n\t\t${ style ? colorIndicatorBorder( border ) : undefined }\n\t\twidth: ${ __next36pxDefaultSize ? '28px' : '22px' };\n\t\theight: ${ __next36pxDefaultSize ? '28px' : '22px' };\n\t\tpadding: ${ __next36pxDefaultSize ? '2px' : '1px' };\n\n\t\t/*\n\t\t * ColorIndicator\n\t\t *\n\t\t * The transparent colors used here ensure visibility of the indicator\n\t\t * over the active state of the border control dropdown's toggle button.\n\t\t */\n\t\t& > span {\n\t\t\t${ ! __next36pxDefaultSize\n\t\t\t\t? css`\n\t\t\t\t\t\t/* Dimensions fit in 30px overall control height. */\n\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\twidth: 16px;\n\t\t\t\t  `\n\t\t\t\t: '' }\n\t\t\tbackground: linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);\n\t\t}\n\t`;\n};\n\nexport const borderControlPopover = css`\n\t/* Remove padding from content, this will be re-added via inner elements*/\n\t&& .components-popover__content {\n\t\tpadding: 0;\n\t\twidth: 264px;\n\t}\n`;\n\nexport const borderControlPopoverControls = css`\n\tpadding: ${ space( 2 ) };\n\n\t> div:first-of-type > ${ StyledLabel } {\n\t\tmargin-bottom: 0;\n\t\t${ labelStyles }\n\t}\n\n\t&& ${ StyledLabel } + button:not( .has-text ) {\n\t\tmin-width: 24px;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverContent = css``;\nexport const borderColorIndicator = css``;\n\nexport const resetButton = css`\n\tjustify-content: center;\n\twidth: 100%;\n\n\t/* Override button component styling */\n\t&& {\n\t\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };\n\t\theight: 46px;\n\t}\n`;\n\nexport const borderWidthControl = () => css`\n\t/* Target the InputControl's backdrop */\n\t&&& ${ BackdropUI } {\n\t\t${ rtl( {\n\t\t\tborderTopLeftRadius: 0,\n\t\t\tborderBottomLeftRadius: 0,\n\t\t} )() }\n\t\ttransition: box-shadow 0.1s linear;\n\t}\n\n\t/* Specificity required to overcome UnitControl padding */\n\t/* See packages/components/src/unit-control/styles/unit-control-styles.ts */\n\t&&& input {\n\t\t${ rtl( { paddingRight: 0 } )() }\n\t}\n`;\n\nexport const borderControlStylePicker = css`\n\t${ StyledLabel } {\n\t\t${ labelStyles }\n\t}\n`;\n\nexport const borderStyleButton = css`\n\t&&&&& {\n\t\tmin-width: 30px;\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tpadding: 3px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n\n\t${ StyledField } {\n\t\tmargin-bottom: 0;\n\t\tfont-size: 0;\n\t\tdisplay: flex;\n\t}\n`;\n"]}

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

@@ -1,16 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
-
 import UnitControl from './unit-control';
 import { ALL_SIDES, LABELS, getAllValue, isValuesMixed, isValuesDefined } from './utils';
+
+const noop = () => {};
+
 export default function AllInputControl(_ref) {
   let {
     onChange = noop,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/all-input-control.js"],"names":["noop","UnitControl","ALL_SIDES","LABELS","getAllValue","isValuesMixed","isValuesDefined","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","hasValues","isMixed","allPlaceholder","mixed","handleOnFocus","event","side","applyValueToSides","currentValues","newValue","newValues","length","forEach","top","bottom","left","right","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":["UnitControl","ALL_SIDES","LABELS","getAllValue","isValuesMixed","isValuesDefined","noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","hasValues","isMixed","allPlaceholder","mixed","handleOnFocus","event","side","applyValueToSides","currentValues","newValue","newValues","length","forEach","top","bottom","left","right","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-module/box-control/axial-input-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.js"],"names":["parseQuantityAndUnitFromRawValue","UnitControl","LABELS","Layout","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"],"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":["parseQuantityAndUnitFromRawValue","UnitControl","LABELS","Layout","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"],"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-module/box-control/index.js

@@ -1,14 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-
 import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -32,6 +27,8 @@ const defaultInputProps = {
   min: 0
 };
 
+const noop = () => {};
+
 function useUniqueId(idProp) {
   const instanceId = useInstanceId(BoxControl, 'inspector-box-control');
   return idProp || instanceId;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/index.js"],"names":["noop","useInstanceId","useState","__","Button","FlexItem","FlexBlock","AllInputControl","InputControls","AxialInputControls","BoxControlIcon","Text","LinkedButton","Root","Header","HeaderControlWrapper","parseQuantityAndUnitFromRawValue","DEFAULT_VALUES","getInitialSide","isValuesMixed","isValuesDefined","useControlledState","defaultInputProps","min","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","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":["useInstanceId","useState","__","Button","FlexItem","FlexBlock","AllInputControl","InputControls","AxialInputControls","BoxControlIcon","Text","LinkedButton","Root","Header","HeaderControlWrapper","parseQuantityAndUnitFromRawValue","DEFAULT_VALUES","getInitialSide","isValuesMixed","isValuesDefined","useControlledState","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","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"]}

package/build-module/box-control/input-controls.js

@@ -1,18 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
-
 import UnitControl from './unit-control';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import { ALL_SIDES, LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
+
+const noop = () => {};
+
 export default function BoxInputControls(_ref) {
   let {
     onChange = noop,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/input-controls.js"],"names":["noop","UnitControl","parseQuantityAndUnitFromRawValue","ALL_SIDES","LABELS","LayoutContainer","Layout","BoxInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","createHandleOnHoverOff","handleOnChange","nextValues","createHandleOnChange","next","altKey","isNumeric","isNaN","parseFloat","nextValue","undefined","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","computedUnit","join"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,SAASC,gCAAT,QAAiD,uBAAjD;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,SAAlC;AACA,SAASC,eAAT,EAA0BC,MAA1B,QAAwC,6BAAxC;AAEA,eAAe,SAASC,gBAAT,OAUX;AAAA,MAVsC;AACzCC,IAAAA,QAAQ,GAAGR,IAD8B;AAEzCS,IAAAA,OAAO,GAAGT,IAF+B;AAGzCU,IAAAA,SAAS,GAAGV,IAH6B;AAIzCW,IAAAA,UAAU,GAAGX,IAJ4B;AAKzCY,IAAAA,MALyC;AAMzCC,IAAAA,aANyC;AAOzCC,IAAAA,gBAPyC;AAQzCC,IAAAA,KARyC;AASzC,OAAGC;AATsC,GAUtC;;AACH,QAAMC,mBAAmB,GAAKC,IAAF,IAAcC,KAAF,IAAa;AACpDV,IAAAA,OAAO,CAAEU,KAAF,EAAS;AAAED,MAAAA;AAAF,KAAT,CAAP;AACA,GAFD;;AAIA,QAAME,qBAAqB,GAAKF,IAAF,IAAY,MAAM;AAC/CR,IAAAA,SAAS,CAAE;AAAE,OAAEQ,IAAF,GAAU;AAAZ,KAAF,CAAT;AACA,GAFD;;AAIA,QAAMG,sBAAsB,GAAKH,IAAF,IAAY,MAAM;AAChDP,IAAAA,UAAU,CAAE;AAAE,OAAEO,IAAF,GAAU;AAAZ,KAAF,CAAV;AACA,GAFD;;AAIA,QAAMI,cAAc,GAAKC,UAAF,IAAkB;AACxCf,IAAAA,QAAQ,CAAEe,UAAF,CAAR;AACA,GAFD;;AAIA,QAAMC,oBAAoB,GAAKN,IAAF,IAAY,CAAEO,IAAF,YAAuB;AAAA,QAAf;AAAEN,MAAAA;AAAF,KAAe;AAC/D,UAAM;AAAEO,MAAAA;AAAF,QAAaP,KAAnB;AACA,UAAMI,UAAU,GAAG,EAAE,GAAGX;AAAL,KAAnB;AACA,UAAMe,SAAS,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAEJ,IAAF,CAAZ,CAAzB;AACA,UAAMK,SAAS,GAAGH,SAAS,GAAGF,IAAH,GAAUM,SAArC;AAEAR,IAAAA,UAAU,CAAEL,IAAF,CAAV,GAAqBY,SAArB;AAEA;AACF;AACA;AACA;;AACE,QAAKJ,MAAL,EAAc;AACb,cAASR,IAAT;AACC,aAAK,KAAL;AACCK,UAAAA,UAAU,CAACS,MAAX,GAAoBF,SAApB;AACA;;AACD,aAAK,QAAL;AACCP,UAAAA,UAAU,CAACU,GAAX,GAAiBH,SAAjB;AACA;;AACD,aAAK,MAAL;AACCP,UAAAA,UAAU,CAACW,KAAX,GAAmBJ,SAAnB;AACA;;AACD,aAAK,OAAL;AACCP,UAAAA,UAAU,CAACY,IAAX,GAAkBL,SAAlB;AACA;AAZF;AAcA;;AAEDR,IAAAA,cAAc,CAAEC,UAAF,CAAd;AACA,GA9BD;;AAgCA,QAAMa,wBAAwB,GAAKlB,IAAF,IAAcO,IAAF,IAAY;AACxD,UAAMY,QAAQ,GAAG,EAAE,GAAGxB;AAAL,KAAjB;AACAwB,IAAAA,QAAQ,CAAEnB,IAAF,CAAR,GAAmBO,IAAnB;AACAX,IAAAA,gBAAgB,CAAEuB,QAAF,CAAhB;AACA,GAJD,CAjDG,CAuDH;;;AACA,QAAMC,aAAa,GAAGvB,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEwB,MAAP,GACnBpC,SAAS,CAACqC,MAAV,CAAoBtB,IAAF,IAAYH,KAAK,CAAC0B,QAAN,CAAgBvB,IAAhB,CAA9B,CADmB,GAEnBf,SAFH;AAIA,QAAMuC,KAAK,GAAGJ,aAAa,CAAE,CAAF,CAA3B;AACA,QAAMK,IAAI,GAAGL,aAAa,CAAEA,aAAa,CAACC,MAAd,GAAuB,CAAzB,CAA1B;AACA,QAAMK,IAAI,GAAGF,KAAK,KAAKC,IAAV,IAAkBD,KAA/B;AAEA,SACC,cAAC,eAAD;AAAiB,IAAA,SAAS,EAAC;AAA3B,KACC,cAAC,MAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,KAAK,EAAC,KAFP;AAGC,IAAA,SAAS,EAAC;AAHX,KAKGJ,aAAa,CAACO,GAAd,CAAqB3B,IAAF,IAAY;AAChC,UAAM,CACL4B,cADK,EAELC,UAFK,IAGF7C,gCAAgC,CAAEU,MAAM,CAAEM,IAAF,CAAR,CAHpC;AAKA,UAAM8B,YAAY,GAAGpC,MAAM,CAAEM,IAAF,CAAN,GAClB6B,UADkB,GAElBlC,aAAa,CAAEK,IAAF,CAFhB;AAIA,WACC,cAAC,WAAD,eACMF,KADN;AAEC,MAAA,OAAO,EAAG0B,KAAK,KAAKxB,IAFrB;AAGC,MAAA,MAAM,EAAGyB,IAAI,KAAKzB,IAHnB;AAIC,MAAA,MAAM,EAAG0B,IAAI,KAAK1B,IAJnB;AAKC,MAAA,KAAK,EAAG,CAAE4B,cAAF,EAAkBE,YAAlB,EAAiCC,IAAjC,CACP,EADO,CALT;AAQC,MAAA,QAAQ,EAAGzB,oBAAoB,CAAEN,IAAF,CARhC;AASC,MAAA,YAAY,EAAGkB,wBAAwB,CAAElB,IAAF,CATxC;AAUC,MAAA,OAAO,EAAGD,mBAAmB,CAAEC,IAAF,CAV9B;AAWC,MAAA,SAAS,EAAGE,qBAAqB,CAAEF,IAAF,CAXlC;AAYC,MAAA,UAAU,EAAGG,sBAAsB,CAAEH,IAAF,CAZpC;AAaC,MAAA,KAAK,EAAGd,MAAM,CAAEc,IAAF,CAbf;AAcC,MAAA,GAAG,EAAI,eAAeA,IAAM;AAd7B,OADD;AAkBA,GA5BC,CALH,CADD,CADD;AAuCA","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport UnitControl from './unit-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, LABELS } from './utils';\nimport { LayoutContainer, Layout } from './styles/box-control-styles';\n\nexport default function BoxInputControls( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n} ) {\n\tconst createHandleOnFocus = ( side ) => ( event ) => {\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst createHandleOnHoverOn = ( side ) => () => {\n\t\tonHoverOn( { [ side ]: true } );\n\t};\n\n\tconst createHandleOnHoverOff = ( side ) => () => {\n\t\tonHoverOff( { [ side ]: false } );\n\t};\n\n\tconst handleOnChange = ( nextValues ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnChange = ( side ) => ( next, { event } ) => {\n\t\tconst { altKey } = event;\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tnextValues[ side ] = nextValue;\n\n\t\t/**\n\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t * when changing the TOP will also update BOTTOM.\n\t\t */\n\t\tif ( altKey ) {\n\t\t\tswitch ( side ) {\n\t\t\t\tcase 'top':\n\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'bottom':\n\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'left':\n\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'right':\n\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tnewUnits[ side ] = next;\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? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<LayoutContainer className=\"component-box-control__input-controls-wrapper\">\n\t\t\t<Layout\n\t\t\t\tgap={ 0 }\n\t\t\t\talign=\"top\"\n\t\t\t\tclassName=\"component-box-control__input-controls\"\n\t\t\t>\n\t\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\t\tconst [\n\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\tparsedUnit,\n\t\t\t\t\t] = parseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t\t? parsedUnit\n\t\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\tkey={ `box-control-${ side }` }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Layout>\n\t\t</LayoutContainer>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/input-controls.js"],"names":["UnitControl","parseQuantityAndUnitFromRawValue","ALL_SIDES","LABELS","LayoutContainer","Layout","noop","BoxInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","createHandleOnHoverOff","handleOnChange","nextValues","createHandleOnChange","next","altKey","isNumeric","isNaN","parseFloat","nextValue","undefined","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","computedUnit","join"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport UnitControl from './unit-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, LABELS } from './utils';\nimport { LayoutContainer, Layout } from './styles/box-control-styles';\n\nconst noop = () => {};\n\nexport default function BoxInputControls( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n} ) {\n\tconst createHandleOnFocus = ( side ) => ( event ) => {\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst createHandleOnHoverOn = ( side ) => () => {\n\t\tonHoverOn( { [ side ]: true } );\n\t};\n\n\tconst createHandleOnHoverOff = ( side ) => () => {\n\t\tonHoverOff( { [ side ]: false } );\n\t};\n\n\tconst handleOnChange = ( nextValues ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnChange =\n\t\t( side ) =>\n\t\t( next, { event } ) => {\n\t\t\tconst { altKey } = event;\n\t\t\tconst nextValues = { ...values };\n\t\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\t\tnextValues[ side ] = nextValue;\n\n\t\t\t/**\n\t\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t\t * when changing the TOP will also update BOTTOM.\n\t\t\t */\n\t\t\tif ( altKey ) {\n\t\t\t\tswitch ( side ) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\thandleOnChange( nextValues );\n\t\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tnewUnits[ side ] = next;\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? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<LayoutContainer className=\"component-box-control__input-controls-wrapper\">\n\t\t\t<Layout\n\t\t\t\tgap={ 0 }\n\t\t\t\talign=\"top\"\n\t\t\t\tclassName=\"component-box-control__input-controls\"\n\t\t\t>\n\t\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t\t? parsedUnit\n\t\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\tkey={ `box-control-${ side }` }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Layout>\n\t\t</LayoutContainer>\n\t);\n}\n"]}

package/build-module/box-control/unit-control.js

@@ -4,7 +4,6 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import { useHover } from '@use-gesture/react';
 /**
  * Internal dependencies
@@ -12,6 +11,9 @@ import { useHover } from '@use-gesture/react';
 
 import BaseTooltip from '../tooltip';
 import { UnitControlWrapper, UnitControl } from './styles/box-control-styles';
+
+const noop = () => {};
+
 export default function BoxUnitControl(_ref) {
   let {
     isFirst,

package/build-module/box-control/unit-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/unit-control.js"],"names":["noop","useHover","BaseTooltip","UnitControlWrapper","UnitControl","BoxUnitControl","isFirst","isLast","isOnly","onHoverOn","onHoverOff","label","value","props","bindHoverGesture","event","state","hovering","Tooltip","children","text"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,YAAxB;AACA,SAASC,kBAAT,EAA6BC,WAA7B,QAAgD,6BAAhD;AAEA,eAAe,SAASC,cAAT,OASX;AAAA,MAToC;AACvCC,IAAAA,OADuC;AAEvCC,IAAAA,MAFuC;AAGvCC,IAAAA,MAHuC;AAIvCC,IAAAA,SAAS,GAAGT,IAJ2B;AAKvCU,IAAAA,UAAU,GAAGV,IAL0B;AAMvCW,IAAAA,KANuC;AAOvCC,IAAAA,KAPuC;AAQvC,OAAGC;AARoC,GASpC;AACH,QAAMC,gBAAgB,GAAGb,QAAQ,CAAE,SAA2B;AAAA,QAAzB;AAAEc,MAAAA,KAAF;AAAS,SAAGC;AAAZ,KAAyB;;AAC7D,QAAKA,KAAK,CAACC,QAAX,EAAsB;AACrBR,MAAAA,SAAS,CAAEM,KAAF,EAASC,KAAT,CAAT;AACA,KAFD,MAEO;AACNN,MAAAA,UAAU,CAAEK,KAAF,EAASC,KAAT,CAAV;AACA;AACD,GANgC,CAAjC;AAQA,SACC,cAAC,kBAAD,EAAyBF,gBAAgB,EAAzC,EACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGH;AAAhB,KACC,cAAC,WAAD;AACC,kBAAaA,KADd;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,cAAc,MAHf;AAIC,IAAA,OAAO,EAAGL,OAJX;AAKC,IAAA,MAAM,EAAGC,MALV;AAMC,IAAA,MAAM,EAAGC,MANV;AAOC,IAAA,oBAAoB,MAPrB;AAQC,IAAA,wBAAwB,EAAG,KAR5B;AASC,IAAA,KAAK,EAAGI;AATT,KAUMC,KAVN,EADD,CADD,CADD;AAkBA;;AAED,SAASK,OAAT,QAAuC;AAAA,MAArB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAqB;AACtC,MAAK,CAAEA,IAAP,EAAc,OAAOD,QAAP;AAEd;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;AACC,SACC,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGC,IAApB;AAA2B,IAAA,QAAQ,EAAC;AAApC,KACC,2BAAOD,QAAP,CADD,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport { useHover } from '@use-gesture/react';\n\n/**\n * Internal dependencies\n */\nimport BaseTooltip from '../tooltip';\nimport { UnitControlWrapper, UnitControl } from './styles/box-control-styles';\n\nexport default function BoxUnitControl( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tlabel,\n\tvalue,\n\t...props\n} ) {\n\tconst bindHoverGesture = useHover( ( { event, ...state } ) => {\n\t\tif ( state.hovering ) {\n\t\t\tonHoverOn( event, state );\n\t\t} else {\n\t\t\tonHoverOff( event, state );\n\t\t}\n\t} );\n\n\treturn (\n\t\t<UnitControlWrapper { ...bindHoverGesture() }>\n\t\t\t<Tooltip text={ label }>\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\thideHTMLArrows\n\t\t\t\t\tisFirst={ isFirst }\n\t\t\t\t\tisLast={ isLast }\n\t\t\t\t\tisOnly={ isOnly }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tisResetValueOnUnitChange={ false }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</UnitControlWrapper>\n\t);\n}\n\nfunction Tooltip( { children, text } ) {\n\tif ( ! text ) return children;\n\n\t/**\n\t * Wrapping the children in a `<div />` as Tooltip as it attempts\n\t * to render the <UnitControl />. Using a plain `<div />` appears to\n\t * resolve this issue.\n\t *\n\t * Originally discovered and referenced here:\n\t * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\t */\n\treturn (\n\t\t<BaseTooltip text={ text } position=\"top\">\n\t\t\t<div>{ children }</div>\n\t\t</BaseTooltip>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/unit-control.js"],"names":["useHover","BaseTooltip","UnitControlWrapper","UnitControl","noop","BoxUnitControl","isFirst","isLast","isOnly","onHoverOn","onHoverOff","label","value","props","bindHoverGesture","event","state","hovering","Tooltip","children","text"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,YAAxB;AACA,SAASC,kBAAT,EAA6BC,WAA7B,QAAgD,6BAAhD;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,cAAT,OASX;AAAA,MAToC;AACvCC,IAAAA,OADuC;AAEvCC,IAAAA,MAFuC;AAGvCC,IAAAA,MAHuC;AAIvCC,IAAAA,SAAS,GAAGL,IAJ2B;AAKvCM,IAAAA,UAAU,GAAGN,IAL0B;AAMvCO,IAAAA,KANuC;AAOvCC,IAAAA,KAPuC;AAQvC,OAAGC;AARoC,GASpC;AACH,QAAMC,gBAAgB,GAAGd,QAAQ,CAAE,SAA2B;AAAA,QAAzB;AAAEe,MAAAA,KAAF;AAAS,SAAGC;AAAZ,KAAyB;;AAC7D,QAAKA,KAAK,CAACC,QAAX,EAAsB;AACrBR,MAAAA,SAAS,CAAEM,KAAF,EAASC,KAAT,CAAT;AACA,KAFD,MAEO;AACNN,MAAAA,UAAU,CAAEK,KAAF,EAASC,KAAT,CAAV;AACA;AACD,GANgC,CAAjC;AAQA,SACC,cAAC,kBAAD,EAAyBF,gBAAgB,EAAzC,EACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGH;AAAhB,KACC,cAAC,WAAD;AACC,kBAAaA,KADd;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,cAAc,MAHf;AAIC,IAAA,OAAO,EAAGL,OAJX;AAKC,IAAA,MAAM,EAAGC,MALV;AAMC,IAAA,MAAM,EAAGC,MANV;AAOC,IAAA,oBAAoB,MAPrB;AAQC,IAAA,wBAAwB,EAAG,KAR5B;AASC,IAAA,KAAK,EAAGI;AATT,KAUMC,KAVN,EADD,CADD,CADD;AAkBA;;AAED,SAASK,OAAT,QAAuC;AAAA,MAArB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAqB;AACtC,MAAK,CAAEA,IAAP,EAAc,OAAOD,QAAP;AAEd;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;AACC,SACC,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGC,IAApB;AAA2B,IAAA,QAAQ,EAAC;AAApC,KACC,2BAAOD,QAAP,CADD,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport { useHover } from '@use-gesture/react';\n\n/**\n * Internal dependencies\n */\nimport BaseTooltip from '../tooltip';\nimport { UnitControlWrapper, UnitControl } from './styles/box-control-styles';\n\nconst noop = () => {};\n\nexport default function BoxUnitControl( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tlabel,\n\tvalue,\n\t...props\n} ) {\n\tconst bindHoverGesture = useHover( ( { event, ...state } ) => {\n\t\tif ( state.hovering ) {\n\t\t\tonHoverOn( event, state );\n\t\t} else {\n\t\t\tonHoverOff( event, state );\n\t\t}\n\t} );\n\n\treturn (\n\t\t<UnitControlWrapper { ...bindHoverGesture() }>\n\t\t\t<Tooltip text={ label }>\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\thideHTMLArrows\n\t\t\t\t\tisFirst={ isFirst }\n\t\t\t\t\tisLast={ isLast }\n\t\t\t\t\tisOnly={ isOnly }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tisResetValueOnUnitChange={ false }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</UnitControlWrapper>\n\t);\n}\n\nfunction Tooltip( { children, text } ) {\n\tif ( ! text ) return children;\n\n\t/**\n\t * Wrapping the children in a `<div />` as Tooltip as it attempts\n\t * to render the <UnitControl />. Using a plain `<div />` appears to\n\t * resolve this issue.\n\t *\n\t * Originally discovered and referenced here:\n\t * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\t */\n\treturn (\n\t\t<BaseTooltip text={ text } position=\"top\">\n\t\t\t<div>{ children }</div>\n\t\t</BaseTooltip>\n\t);\n}\n"]}

package/build-module/button/index.native.js

@@ -4,12 +4,12 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import { StyleSheet, TouchableOpacity, Text, View, Platform } from 'react-native';
-import { isArray } from 'lodash';
+import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
 /**
  * WordPress dependencies
  */
 
-import { Children, cloneElement } from '@wordpress/element';
+import { Children, cloneElement, useCallback } from '@wordpress/element';
 import { usePreferredColorScheme, usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -125,7 +125,7 @@ export function Button(props) {
   showTooltip && label || // There's a shortcut or...
   shortcut || // There's a label and...
   !!label && ( // The children are empty and...
-  !children || isArray(children) && !children.length) && // The tooltip is not explicitly disabled.
+  !children || Array.isArray(children) && !children.length) && // The tooltip is not explicitly disabled.
   false !== showTooltip);
   const newIcon = icon ? cloneElement(createElement(Icon, {
     icon: icon,
@@ -134,6 +134,15 @@ export function Button(props) {
     colorScheme: preferredColorScheme,
     isPressed
   }) : null;
+  const longPressHandler = useCallback(_ref => {
+    let {
+      nativeEvent
+    } = _ref;
+
+    if (nativeEvent.state === State.ACTIVE && onLongPress) {
+      onLongPress();
+    }
+  }, [onLongPress]);
   const element = createElement(TouchableOpacity, {
     activeOpacity: 0.7,
     accessible: true,
@@ -142,10 +151,13 @@ export function Button(props) {
     accessibilityRole: 'button',
     accessibilityHint: hint,
     onPress: onClick,
-    onLongPress: onLongPress,
     style: containerStyle,
     disabled: isDisabled,
     testID: testID
+  }, createElement(LongPressGestureHandler, {
+    minDurationMs: 500,
+    maxDist: 150,
+    onHandlerStateChange: longPressHandler
   }, createElement(View, {
     style: buttonViewStyle
   }, createElement(View, {
@@ -154,7 +166,7 @@ export function Button(props) {
     }
   }, newIcon, newChildren, subscript && createElement(Text, {
     style: isPressed ? styles.subscriptActive : subscriptInactive
-  }, subscript))));
+  }, subscript)))));
 
   if (!shouldShowTooltip) {
     return element;

package/build-module/button/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/button/index.native.js"],"names":["StyleSheet","TouchableOpacity","Text","View","Platform","isArray","Children","cloneElement","usePreferredColorScheme","usePreferredColorSchemeStyle","Tooltip","Icon","isAndroid","OS","marginBottom","marginLeft","styles","create","container","flex","padding","justifyContent","alignItems","buttonInactive","flexDirection","fixedRatio","aspectRatio","buttonActive","borderRadius","borderColor","backgroundColor","subscriptInactive","color","fontWeight","fontSize","alignSelf","subscriptInactiveDark","subscriptActive","Button","props","children","onClick","onLongPress","disabled","hint","isPressed","ariaDisabled","subscript","testID","icon","iconSize","showTooltip","label","shortcut","tooltipPosition","isActiveStyle","customContainerStyles","preferredColorScheme","isDisabled","containerStyle","buttonViewStyle","opacity","states","push","newChildren","map","child","colorScheme","shouldShowTooltip","length","newIcon","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tStyleSheet,\n\tTouchableOpacity,\n\tText,\n\tView,\n\tPlatform,\n} from 'react-native';\nimport { isArray } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement } from '@wordpress/element';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\n\nconst isAndroid = Platform.OS === 'android';\nconst marginBottom = isAndroid ? -0.5 : 0;\nconst marginLeft = -3;\n\nconst styles = StyleSheet.create( {\n\tcontainer: {\n\t\tflex: 1,\n\t\tpadding: 3,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tbuttonInactive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tfixedRatio: {\n\t\taspectRatio: 1,\n\t},\n\tbuttonActive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tborderRadius: 6,\n\t\tborderColor: '#2e4453',\n\t\tbackgroundColor: '#2e4453',\n\t},\n\tsubscriptInactive: {\n\t\tcolor: '#7b9ab1', // $toolbar-button.\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n\tsubscriptInactiveDark: {\n\t\tcolor: '#a7aaad', // $gray_20.\n\t},\n\tsubscriptActive: {\n\t\tcolor: 'white',\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n} );\n\nexport function Button( props ) {\n\tconst {\n\t\tchildren,\n\t\tonClick,\n\t\tonLongPress,\n\t\tdisabled,\n\t\thint,\n\t\tfixedRatio = true,\n\t\tisPressed,\n\t\t'aria-disabled': ariaDisabled,\n\t\t'data-subscript': subscript,\n\t\ttestID,\n\t\ticon,\n\t\ticonSize,\n\t\tshowTooltip,\n\t\tlabel,\n\t\tshortcut,\n\t\ttooltipPosition,\n\t\tisActiveStyle,\n\t\tcustomContainerStyles,\n\t} = props;\n\tconst preferredColorScheme = usePreferredColorScheme();\n\n\tconst isDisabled = ariaDisabled || disabled;\n\n\tconst containerStyle = [\n\t\tstyles.container,\n\t\tcustomContainerStyles && { ...customContainerStyles },\n\t];\n\n\tconst buttonViewStyle = {\n\t\topacity: isDisabled ? 0.3 : 1,\n\t\t...( fixedRatio && styles.fixedRatio ),\n\t\t...( isPressed ? styles.buttonActive : styles.buttonInactive ),\n\t\t...( isPressed &&\n\t\t\tisActiveStyle?.borderRadius && {\n\t\t\t\tborderRadius: isActiveStyle.borderRadius,\n\t\t\t} ),\n\t\t...( isActiveStyle?.backgroundColor && {\n\t\t\tbackgroundColor: isActiveStyle.backgroundColor,\n\t\t} ),\n\t};\n\n\tconst states = [];\n\tif ( isPressed ) {\n\t\tstates.push( 'selected' );\n\t}\n\n\tif ( isDisabled ) {\n\t\tstates.push( 'disabled' );\n\t}\n\n\tconst subscriptInactive = usePreferredColorSchemeStyle(\n\t\tstyles.subscriptInactive,\n\t\tstyles.subscriptInactiveDark\n\t);\n\n\tconst newChildren = Children.map( children, ( child ) => {\n\t\treturn child\n\t\t\t? cloneElement( child, {\n\t\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\t\tisPressed,\n\t\t\t  } )\n\t\t\t: child;\n\t} );\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! isDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t( ! children ||\n\t\t\t\t\t( isArray( children ) && ! children.length ) ) &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst newIcon = icon\n\t\t? cloneElement( <Icon icon={ icon } size={ iconSize } />, {\n\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\tisPressed,\n\t\t  } )\n\t\t: null;\n\n\tconst element = (\n\t\t<TouchableOpacity\n\t\t\tactiveOpacity={ 0.7 }\n\t\t\taccessible={ true }\n\t\t\taccessibilityLabel={ label }\n\t\t\taccessibilityStates={ states }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={ hint }\n\t\t\tonPress={ onClick }\n\t\t\tonLongPress={ onLongPress }\n\t\t\tstyle={ containerStyle }\n\t\t\tdisabled={ isDisabled }\n\t\t\ttestID={ testID }\n\t\t>\n\t\t\t<View style={ buttonViewStyle }>\n\t\t\t\t<View style={ { flexDirection: 'row' } }>\n\t\t\t\t\t{ newIcon }\n\t\t\t\t\t{ newChildren }\n\t\t\t\t\t{ subscript && (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tisPressed\n\t\t\t\t\t\t\t\t\t? styles.subscriptActive\n\t\t\t\t\t\t\t\t\t: subscriptInactive\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ subscript }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t</TouchableOpacity>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn element;\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\ttext={ label }\n\t\t\tshortcut={ shortcut }\n\t\t\tposition={ tooltipPosition }\n\t\t\tvisible={ showTooltip === true }\n\t\t>\n\t\t\t{ element }\n\t\t</Tooltip>\n\t);\n}\n\nexport default Button;\n"]}
+{"version":3,"sources":["@wordpress/components/src/button/index.native.js"],"names":["StyleSheet","TouchableOpacity","Text","View","Platform","LongPressGestureHandler","State","Children","cloneElement","useCallback","usePreferredColorScheme","usePreferredColorSchemeStyle","Tooltip","Icon","isAndroid","OS","marginBottom","marginLeft","styles","create","container","flex","padding","justifyContent","alignItems","buttonInactive","flexDirection","fixedRatio","aspectRatio","buttonActive","borderRadius","borderColor","backgroundColor","subscriptInactive","color","fontWeight","fontSize","alignSelf","subscriptInactiveDark","subscriptActive","Button","props","children","onClick","onLongPress","disabled","hint","isPressed","ariaDisabled","subscript","testID","icon","iconSize","showTooltip","label","shortcut","tooltipPosition","isActiveStyle","customContainerStyles","preferredColorScheme","isDisabled","containerStyle","buttonViewStyle","opacity","states","push","newChildren","map","child","colorScheme","shouldShowTooltip","Array","isArray","length","newIcon","longPressHandler","nativeEvent","state","ACTIVE","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tStyleSheet,\n\tTouchableOpacity,\n\tText,\n\tView,\n\tPlatform,\n} from 'react-native';\nimport { LongPressGestureHandler, State } from 'react-native-gesture-handler';\n\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement, useCallback } from '@wordpress/element';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\n\nconst isAndroid = Platform.OS === 'android';\nconst marginBottom = isAndroid ? -0.5 : 0;\nconst marginLeft = -3;\n\nconst styles = StyleSheet.create( {\n\tcontainer: {\n\t\tflex: 1,\n\t\tpadding: 3,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tbuttonInactive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tfixedRatio: {\n\t\taspectRatio: 1,\n\t},\n\tbuttonActive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tborderRadius: 6,\n\t\tborderColor: '#2e4453',\n\t\tbackgroundColor: '#2e4453',\n\t},\n\tsubscriptInactive: {\n\t\tcolor: '#7b9ab1', // $toolbar-button.\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n\tsubscriptInactiveDark: {\n\t\tcolor: '#a7aaad', // $gray_20.\n\t},\n\tsubscriptActive: {\n\t\tcolor: 'white',\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n} );\n\nexport function Button( props ) {\n\tconst {\n\t\tchildren,\n\t\tonClick,\n\t\tonLongPress,\n\t\tdisabled,\n\t\thint,\n\t\tfixedRatio = true,\n\t\tisPressed,\n\t\t'aria-disabled': ariaDisabled,\n\t\t'data-subscript': subscript,\n\t\ttestID,\n\t\ticon,\n\t\ticonSize,\n\t\tshowTooltip,\n\t\tlabel,\n\t\tshortcut,\n\t\ttooltipPosition,\n\t\tisActiveStyle,\n\t\tcustomContainerStyles,\n\t} = props;\n\tconst preferredColorScheme = usePreferredColorScheme();\n\n\tconst isDisabled = ariaDisabled || disabled;\n\n\tconst containerStyle = [\n\t\tstyles.container,\n\t\tcustomContainerStyles && { ...customContainerStyles },\n\t];\n\n\tconst buttonViewStyle = {\n\t\topacity: isDisabled ? 0.3 : 1,\n\t\t...( fixedRatio && styles.fixedRatio ),\n\t\t...( isPressed ? styles.buttonActive : styles.buttonInactive ),\n\t\t...( isPressed &&\n\t\t\tisActiveStyle?.borderRadius && {\n\t\t\t\tborderRadius: isActiveStyle.borderRadius,\n\t\t\t} ),\n\t\t...( isActiveStyle?.backgroundColor && {\n\t\t\tbackgroundColor: isActiveStyle.backgroundColor,\n\t\t} ),\n\t};\n\n\tconst states = [];\n\tif ( isPressed ) {\n\t\tstates.push( 'selected' );\n\t}\n\n\tif ( isDisabled ) {\n\t\tstates.push( 'disabled' );\n\t}\n\n\tconst subscriptInactive = usePreferredColorSchemeStyle(\n\t\tstyles.subscriptInactive,\n\t\tstyles.subscriptInactiveDark\n\t);\n\n\tconst newChildren = Children.map( children, ( child ) => {\n\t\treturn child\n\t\t\t? cloneElement( child, {\n\t\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\t\tisPressed,\n\t\t\t  } )\n\t\t\t: child;\n\t} );\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! isDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t( ! children ||\n\t\t\t\t\t( Array.isArray( children ) && ! children.length ) ) &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst newIcon = icon\n\t\t? cloneElement( <Icon icon={ icon } size={ iconSize } />, {\n\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\tisPressed,\n\t\t  } )\n\t\t: null;\n\n\tconst longPressHandler = useCallback(\n\t\t( { nativeEvent } ) => {\n\t\t\tif ( nativeEvent.state === State.ACTIVE && onLongPress ) {\n\t\t\t\tonLongPress();\n\t\t\t}\n\t\t},\n\t\t[ onLongPress ]\n\t);\n\n\tconst element = (\n\t\t<TouchableOpacity\n\t\t\tactiveOpacity={ 0.7 }\n\t\t\taccessible={ true }\n\t\t\taccessibilityLabel={ label }\n\t\t\taccessibilityStates={ states }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={ hint }\n\t\t\tonPress={ onClick }\n\t\t\tstyle={ containerStyle }\n\t\t\tdisabled={ isDisabled }\n\t\t\ttestID={ testID }\n\t\t>\n\t\t\t<LongPressGestureHandler\n\t\t\t\tminDurationMs={ 500 }\n\t\t\t\tmaxDist={ 150 }\n\t\t\t\tonHandlerStateChange={ longPressHandler }\n\t\t\t>\n\t\t\t\t<View style={ buttonViewStyle }>\n\t\t\t\t\t<View style={ { flexDirection: 'row' } }>\n\t\t\t\t\t\t{ newIcon }\n\t\t\t\t\t\t{ newChildren }\n\t\t\t\t\t\t{ subscript && (\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tisPressed\n\t\t\t\t\t\t\t\t\t\t? styles.subscriptActive\n\t\t\t\t\t\t\t\t\t\t: subscriptInactive\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ subscript }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t</LongPressGestureHandler>\n\t\t</TouchableOpacity>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn element;\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\ttext={ label }\n\t\t\tshortcut={ shortcut }\n\t\t\tposition={ tooltipPosition }\n\t\t\tvisible={ showTooltip === true }\n\t\t>\n\t\t\t{ element }\n\t\t</Tooltip>\n\t);\n}\n\nexport default Button;\n"]}

package/build-module/button-group/index.js

@@ -5,24 +5,44 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { forwardRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
 
-function ButtonGroup(_ref, ref) {
-  let {
+function UnforwardedButtonGroup(props, ref) {
+  const {
     className,
-    ...props
-  } = _ref;
+    ...restProps
+  } = props;
   const classes = classnames('components-button-group', className);
   return createElement("div", _extends({
     ref: ref,
     role: "group",
     className: classes
-  }, props));
+  }, restProps));
 }
+/**
+ * ButtonGroup can be used to group any related buttons together. To emphasize
+ * related buttons, a group should share a common container.
+ *
+ * ```jsx
+ * import { Button, ButtonGroup } from '@wordpress/components';
+ *
+ * const MyButtonGroup = () => (
+ *   <ButtonGroup>
+ *     <Button variant="primary">Button 1</Button>
+ *     <Button variant="primary">Button 2</Button>
+ *   </ButtonGroup>
+ * );
+ * ```
+ */
+
 
-export default forwardRef(ButtonGroup);
+export const ButtonGroup = forwardRef(UnforwardedButtonGroup);
+export default ButtonGroup;
 //# sourceMappingURL=index.js.map

package/build-module/button-group/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/button-group/index.js"],"names":["classnames","forwardRef","ButtonGroup","ref","className","props","classes"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B;;AAEA,SAASC,WAAT,OAA+CC,GAA/C,EAAqD;AAAA,MAA/B;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,GAA+B;AACpD,QAAMC,OAAO,GAAGN,UAAU,CAAE,yBAAF,EAA6BI,SAA7B,CAA1B;AAEA,SAAO;AAAK,IAAA,GAAG,EAAGD,GAAX;AAAiB,IAAA,IAAI,EAAC,OAAtB;AAA8B,IAAA,SAAS,EAAGG;AAA1C,KAAyDD,KAAzD,EAAP;AACA;;AAED,eAAeJ,UAAU,CAAEC,WAAF,CAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\nfunction ButtonGroup( { className, ...props }, ref ) {\n\tconst classes = classnames( 'components-button-group', className );\n\n\treturn <div ref={ ref } role=\"group\" className={ classes } { ...props } />;\n}\n\nexport default forwardRef( ButtonGroup );\n"]}
+{"version":3,"sources":["@wordpress/components/src/button-group/index.tsx"],"names":["classnames","forwardRef","UnforwardedButtonGroup","props","ref","className","restProps","classes","ButtonGroup"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AAIA,SAASC,sBAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA8BH,KAApC;AACA,QAAMI,OAAO,GAAGP,UAAU,CAAE,yBAAF,EAA6BK,SAA7B,CAA1B;AAEA,SACC;AAAK,IAAA,GAAG,EAAGD,GAAX;AAAiB,IAAA,IAAI,EAAC,OAAtB;AAA8B,IAAA,SAAS,EAAGG;AAA1C,KAAyDD,SAAzD,EADD;AAGA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,WAAW,GAAGP,UAAU,CAAEC,sBAAF,CAA9B;AAEP,eAAeM,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonGroupProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedButtonGroup(\n\tprops: WordPressComponentProps< ButtonGroupProps, 'div', false >,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\tconst { className, ...restProps } = props;\n\tconst classes = classnames( 'components-button-group', className );\n\n\treturn (\n\t\t<div ref={ ref } role=\"group\" className={ classes } { ...restProps } />\n\t);\n}\n\n/**\n * ButtonGroup can be used to group any related buttons together. To emphasize\n * related buttons, a group should share a common container.\n *\n * ```jsx\n * import { Button, ButtonGroup } from '@wordpress/components';\n *\n * const MyButtonGroup = () => (\n *   <ButtonGroup>\n *     <Button variant=\"primary\">Button 1</Button>\n *     <Button variant=\"primary\">Button 2</Button>\n *   </ButtonGroup>\n * );\n * ```\n */\nexport const ButtonGroup = forwardRef( UnforwardedButtonGroup );\n\nexport default ButtonGroup;\n"]}

package/build-module/checkbox-control/index.js

@@ -5,10 +5,10 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { useState } from '@wordpress/element';
 import { useInstanceId, useRefEffect } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
@@ -18,8 +18,31 @@ import { Icon, check, reset } from '@wordpress/icons';
  */
 
 import BaseControl from '../base-control';
-export default function CheckboxControl(_ref) {
-  let {
+
+/**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
+ * ```jsx
+ * import { CheckboxControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyCheckboxControl = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *   return (
+ *     <CheckboxControl
+ *       label="Is author"
+ *       help="Is the user a author or not?"
+ *       checked={ isChecked }
+ *       onChange={ setChecked }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function CheckboxControl( // ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+// ref forwarding to CheckboxControl.
+props) {
+  const {
     label,
     className,
     heading,
@@ -27,8 +50,8 @@ export default function CheckboxControl(_ref) {
     indeterminate,
     help,
     onChange,
-    ...props
-  } = _ref;
+    ...additionalProps
+  } = props;
 
   if (heading) {
     deprecated('`heading` prop in `CheckboxControl`', {
@@ -38,7 +61,7 @@ export default function CheckboxControl(_ref) {
   }
 
   const [showCheckedIcon, setShowCheckedIcon] = useState(false);
-  const [showIndeterminateIcon, setShowIndeterminateIcon] = useState(false); // Run the following callback everytime the `ref` (and the additional
+  const [showIndeterminateIcon, setShowIndeterminateIcon] = useState(false); // Run the following callback every time the `ref` (and the additional
   // dependencies) change.
 
   const ref = useRefEffect(node => {
@@ -72,7 +95,7 @@ export default function CheckboxControl(_ref) {
     onChange: onChangeValue,
     checked: checked,
     "aria-describedby": !!help ? id + '__help' : undefined
-  }, props)), showIndeterminateIcon ? createElement(Icon, {
+  }, additionalProps)), showIndeterminateIcon ? createElement(Icon, {
     icon: reset,
     className: "components-checkbox-control__indeterminate",
     role: "presentation"
@@ -85,4 +108,5 @@ export default function CheckboxControl(_ref) {
     htmlFor: id
   }, label));
 }
+export default CheckboxControl;
 //# sourceMappingURL=index.js.map