@wordpress/components 17.0.0 → 19.0.2

package/build/notice/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/list.js"],"names":["NoticeList","notices","onRemove","noop","className","children","removeNotice","id","reverse","map","notice","content"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAT,CAAqB;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,QAAQ,GAAGC,YAAtB;AAA4BC,EAAAA,SAA5B;AAAuCC,EAAAA;AAAvC,CAArB,EAAyE;AACxE,QAAMC,YAAY,GAAKC,EAAF,IAAU,MAAML,QAAQ,CAAEK,EAAF,CAA7C;;AAEAH,EAAAA,SAAS,GAAG,yBAAY,wBAAZ,EAAsCA,SAAtC,CAAZ;AAEA,SACC;AAAK,IAAA,SAAS,EAAGA;AAAjB,KACGC,QADH,EAEG,CAAE,GAAGJ,OAAL,EAAeO,OAAf,GAAyBC,GAAzB,CAAgCC,MAAF,IAC/B,4BAAC,SAAD,6BACM,kBAAMA,MAAN,EAAc,CAAE,SAAF,CAAd,CADN;AAEC,IAAA,GAAG,EAAGA,MAAM,CAACH,EAFd;AAGC,IAAA,QAAQ,EAAGD,YAAY,CAAEI,MAAM,CAACH,EAAT;AAHxB,MAKGG,MAAM,CAACC,OALV,CADC,CAFH,CADD;AAcA;;eAEcX,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop, omit } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport Notice from './';\n\n/**\n * Renders a list of notices.\n *\n * @param {Object}   $0           Props passed to the component.\n * @param {Array}    $0.notices   Array of notices to render.\n * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.\n * @param {Object}   $0.className Name of the class used by the component.\n * @param {Object}   $0.children  Array of children to be rendered inside the notice list.\n *\n * @return {Object} The rendered notices list.\n */\nfunction NoticeList( { notices, onRemove = noop, className, children } ) {\n\tconst removeNotice = ( id ) => () => onRemove( id );\n\n\tclassName = classnames( 'components-notice-list', className );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t{ children }\n\t\t\t{ [ ...notices ].reverse().map( ( notice ) => (\n\t\t\t\t<Notice\n\t\t\t\t\t{ ...omit( notice, [ 'content' ] ) }\n\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\tonRemove={ removeNotice( notice.id ) }\n\t\t\t\t>\n\t\t\t\t\t{ notice.content }\n\t\t\t\t</Notice>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default NoticeList;\n"]}
+{"version":3,"sources":["@wordpress/components/src/notice/list.js"],"names":["NoticeList","notices","onRemove","noop","className","children","removeNotice","id","reverse","map","notice","content"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAT,OAAyE;AAAA,MAApD;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,QAAQ,GAAGC,YAAtB;AAA4BC,IAAAA,SAA5B;AAAuCC,IAAAA;AAAvC,GAAoD;;AACxE,QAAMC,YAAY,GAAKC,EAAF,IAAU,MAAML,QAAQ,CAAEK,EAAF,CAA7C;;AAEAH,EAAAA,SAAS,GAAG,yBAAY,wBAAZ,EAAsCA,SAAtC,CAAZ;AAEA,SACC;AAAK,IAAA,SAAS,EAAGA;AAAjB,KACGC,QADH,EAEG,CAAE,GAAGJ,OAAL,EAAeO,OAAf,GAAyBC,GAAzB,CAAgCC,MAAF,IAC/B,4BAAC,SAAD,6BACM,kBAAMA,MAAN,EAAc,CAAE,SAAF,CAAd,CADN;AAEC,IAAA,GAAG,EAAGA,MAAM,CAACH,EAFd;AAGC,IAAA,QAAQ,EAAGD,YAAY,CAAEI,MAAM,CAACH,EAAT;AAHxB,MAKGG,MAAM,CAACC,OALV,CADC,CAFH,CADD;AAcA;;eAEcX,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop, omit } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport Notice from './';\n\n/**\n * Renders a list of notices.\n *\n * @param {Object}   $0           Props passed to the component.\n * @param {Array}    $0.notices   Array of notices to render.\n * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.\n * @param {Object}   $0.className Name of the class used by the component.\n * @param {Object}   $0.children  Array of children to be rendered inside the notice list.\n *\n * @return {Object} The rendered notices list.\n */\nfunction NoticeList( { notices, onRemove = noop, className, children } ) {\n\tconst removeNotice = ( id ) => () => onRemove( id );\n\n\tclassName = classnames( 'components-notice-list', className );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t{ children }\n\t\t\t{ [ ...notices ].reverse().map( ( notice ) => (\n\t\t\t\t<Notice\n\t\t\t\t\t{ ...omit( notice, [ 'content' ] ) }\n\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\tonRemove={ removeNotice( notice.id ) }\n\t\t\t\t>\n\t\t\t\t\t{ notice.content }\n\t\t\t\t</Notice>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default NoticeList;\n"]}

package/build/number-control/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -26,10 +24,12 @@ var _reducer = require("../input-control/reducer/reducer");
 
 var _math = require("../utils/math");
 
-var _hooks = require("../utils/hooks");
-
 var _values = require("../utils/values");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 // @ts-nocheck
 
 /**
@@ -43,29 +43,33 @@ var _values = require("../utils/values");
 /**
  * Internal dependencies
  */
-function NumberControl({
-  __unstableStateReducer: stateReducer = state => state,
-  className,
-  dragDirection = 'n',
-  hideHTMLArrows = false,
-  isDragEnabled = true,
-  isShiftStepEnabled = true,
-  label,
-  max = Infinity,
-  min = -Infinity,
-  required = false,
-  shiftStep = 10,
-  step = 1,
-  type: typeProp = 'number',
-  value: valueProp,
-  ...props
-}, ref) {
-  const baseValue = (0, _math.roundClamp)(0, min, max, step);
-  const jumpStep = (0, _hooks.useJumpStep)({
-    step,
-    shiftStep,
-    isShiftStepEnabled
-  });
+function NumberControl(_ref, ref) {
+  let {
+    __unstableStateReducer: stateReducer = state => state,
+    className,
+    dragDirection = 'n',
+    hideHTMLArrows = false,
+    isDragEnabled = true,
+    isShiftStepEnabled = true,
+    label,
+    max = Infinity,
+    min = -Infinity,
+    required = false,
+    shiftStep = 10,
+    step = 1,
+    type: typeProp = 'number',
+    value: valueProp,
+    ...props
+  } = _ref;
+  const isStepAny = step === 'any';
+  const baseStep = isStepAny ? 1 : parseFloat(step);
+  const baseValue = (0, _math.roundClamp)(0, min, max, baseStep);
+
+  const constrainValue = (value, stepOverride) => {
+    // When step is "any" clamp the value, otherwise round and clamp it
+    return isStepAny ? Math.min(max, Math.max(min, value)) : (0, _math.roundClamp)(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
+  };
+
   const autoComplete = typeProp === 'number' ? 'off' : null;
   const classes = (0, _classnames.default)('components-number-control', className);
   /**
@@ -91,7 +95,7 @@ function NumberControl({
 
     if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {
       const enableShift = event.shiftKey && isShiftStepEnabled;
-      const incrementalValue = enableShift ? parseFloat(shiftStep) * parseFloat(step) : parseFloat(step);
+      const incrementalValue = enableShift ? parseFloat(shiftStep) * baseStep : baseStep;
       let nextValue = (0, _values.isValueEmpty)(currentValue) ? baseValue : currentValue;
 
       if (event !== null && event !== void 0 && event.preventDefault) {
@@ -106,8 +110,7 @@ function NumberControl({
         nextValue = (0, _math.subtract)(nextValue, incrementalValue);
       }
 
-      nextValue = (0, _math.roundClamp)(nextValue, min, max, incrementalValue);
-      state.value = nextValue;
+      state.value = constrainValue(nextValue, enableShift ? incrementalValue : null);
     }
     /**
      * Handles drag to update events
@@ -115,43 +118,38 @@ function NumberControl({
 
 
     if (type === inputControlActionTypes.DRAG && isDragEnabled) {
-      const {
-        delta,
-        shiftKey
-      } = payload;
-      const [x, y] = delta;
-      const modifier = shiftKey ? parseFloat(shiftStep) * parseFloat(step) : parseFloat(step);
+      const [x, y] = payload.delta;
+      const enableShift = payload.shiftKey && isShiftStepEnabled;
+      const modifier = enableShift ? parseFloat(shiftStep) * baseStep : baseStep;
       let directionModifier;
-      let directionBaseValue;
+      let delta;
 
       switch (dragDirection) {
         case 'n':
-          directionBaseValue = y;
+          delta = y;
           directionModifier = -1;
           break;
 
         case 'e':
-          directionBaseValue = x;
+          delta = x;
           directionModifier = (0, _i18n.isRTL)() ? -1 : 1;
           break;
 
         case 's':
-          directionBaseValue = y;
+          delta = y;
           directionModifier = 1;
           break;
 
         case 'w':
-          directionBaseValue = x;
+          delta = x;
           directionModifier = (0, _i18n.isRTL)() ? 1 : -1;
           break;
       }
 
-      const distance = directionBaseValue * modifier * directionModifier;
-      let nextValue;
-
-      if (distance !== 0) {
-        nextValue = (0, _math.roundClamp)((0, _math.add)(currentValue, distance), min, max, modifier);
-        state.value = nextValue;
+      if (delta !== 0) {
+        delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);
+        const distance = delta * modifier * directionModifier;
+        state.value = constrainValue((0, _math.add)(currentValue, distance), enableShift ? modifier : null);
       }
     }
     /**
@@ -161,7 +159,7 @@ function NumberControl({
 
     if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {
       const applyEmptyValue = required === false && currentValue === '';
-      state.value = applyEmptyValue ? currentValue : (0, _math.roundClamp)(currentValue, min, max, step);
+      state.value = applyEmptyValue ? currentValue : constrainValue(currentValue);
     }
 
     return state;
@@ -180,7 +178,7 @@ function NumberControl({
     min: min,
     ref: ref,
     required: required,
-    step: jumpStep,
+    step: step,
     type: typeProp,
     value: valueProp,
     __unstableStateReducer: (0, _reducer.composeStateReducers)(numberControlStateReducer, stateReducer)

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/number-control/index.js"],"names":["NumberControl","__unstableStateReducer","stateReducer","state","className","dragDirection","hideHTMLArrows","isDragEnabled","isShiftStepEnabled","label","max","Infinity","min","required","shiftStep","step","type","typeProp","value","valueProp","props","ref","baseValue","jumpStep","autoComplete","classes","numberControlStateReducer","action","payload","event","currentValue","inputControlActionTypes","PRESS_UP","PRESS_DOWN","enableShift","shiftKey","incrementalValue","parseFloat","nextValue","preventDefault","DRAG","delta","x","y","modifier","directionModifier","directionBaseValue","distance","PRESS_ENTER","COMMIT","applyEmptyValue"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Input } from './styles/number-control-styles';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { composeStateReducers } from '../input-control/reducer/reducer';\nimport { add, subtract, roundClamp } from '../utils/math';\nimport { useJumpStep } from '../utils/hooks';\nimport { isValueEmpty } from '../utils/values';\n\nexport function NumberControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\tclassName,\n\t\tdragDirection = 'n',\n\t\thideHTMLArrows = false,\n\t\tisDragEnabled = true,\n\t\tisShiftStepEnabled = true,\n\t\tlabel,\n\t\tmax = Infinity,\n\t\tmin = -Infinity,\n\t\trequired = false,\n\t\tshiftStep = 10,\n\t\tstep = 1,\n\t\ttype: typeProp = 'number',\n\t\tvalue: valueProp,\n\t\t...props\n\t},\n\tref\n) {\n\tconst baseValue = roundClamp( 0, min, max, step );\n\n\tconst jumpStep = useJumpStep( {\n\t\tstep,\n\t\tshiftStep,\n\t\tisShiftStepEnabled,\n\t} );\n\n\tconst autoComplete = typeProp === 'number' ? 'off' : null;\n\tconst classes = classNames( 'components-number-control', className );\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param {Object} state  State from InputControl\n\t * @param {Object} action Action triggering state change\n\t * @return {Object} The updated state to apply to InputControl\n\t */\n\tconst numberControlStateReducer = ( state, action ) => {\n\t\tconst { type, payload } = action;\n\t\tconst event = payload?.event;\n\t\tconst currentValue = state.value;\n\n\t\t/**\n\t\t * Handles custom UP and DOWN Keyboard events\n\t\t */\n\t\tif (\n\t\t\ttype === inputControlActionTypes.PRESS_UP ||\n\t\t\ttype === inputControlActionTypes.PRESS_DOWN\n\t\t) {\n\t\t\tconst enableShift = event.shiftKey && isShiftStepEnabled;\n\n\t\t\tconst incrementalValue = enableShift\n\t\t\t\t? parseFloat( shiftStep ) * parseFloat( step )\n\t\t\t\t: parseFloat( step );\n\t\t\tlet nextValue = isValueEmpty( currentValue )\n\t\t\t\t? baseValue\n\t\t\t\t: currentValue;\n\n\t\t\tif ( event?.preventDefault ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tif ( type === inputControlActionTypes.PRESS_UP ) {\n\t\t\t\tnextValue = add( nextValue, incrementalValue );\n\t\t\t}\n\n\t\t\tif ( type === inputControlActionTypes.PRESS_DOWN ) {\n\t\t\t\tnextValue = subtract( nextValue, incrementalValue );\n\t\t\t}\n\n\t\t\tnextValue = roundClamp( nextValue, min, max, incrementalValue );\n\n\t\t\tstate.value = nextValue;\n\t\t}\n\n\t\t/**\n\t\t * Handles drag to update events\n\t\t */\n\t\tif ( type === inputControlActionTypes.DRAG && isDragEnabled ) {\n\t\t\tconst { delta, shiftKey } = payload;\n\t\t\tconst [ x, y ] = delta;\n\t\t\tconst modifier = shiftKey\n\t\t\t\t? parseFloat( shiftStep ) * parseFloat( step )\n\t\t\t\t: parseFloat( step );\n\n\t\t\tlet directionModifier;\n\t\t\tlet directionBaseValue;\n\n\t\t\tswitch ( dragDirection ) {\n\t\t\t\tcase 'n':\n\t\t\t\t\tdirectionBaseValue = y;\n\t\t\t\t\tdirectionModifier = -1;\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'e':\n\t\t\t\t\tdirectionBaseValue = x;\n\t\t\t\t\tdirectionModifier = isRTL() ? -1 : 1;\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 's':\n\t\t\t\t\tdirectionBaseValue = y;\n\t\t\t\t\tdirectionModifier = 1;\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'w':\n\t\t\t\t\tdirectionBaseValue = x;\n\t\t\t\t\tdirectionModifier = isRTL() ? 1 : -1;\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tconst distance = directionBaseValue * modifier * directionModifier;\n\t\t\tlet nextValue;\n\n\t\t\tif ( distance !== 0 ) {\n\t\t\t\tnextValue = roundClamp(\n\t\t\t\t\tadd( currentValue, distance ),\n\t\t\t\t\tmin,\n\t\t\t\t\tmax,\n\t\t\t\t\tmodifier\n\t\t\t\t);\n\n\t\t\t\tstate.value = nextValue;\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Handles commit (ENTER key press or on blur if isPressEnterToChange)\n\t\t */\n\t\tif (\n\t\t\ttype === inputControlActionTypes.PRESS_ENTER ||\n\t\t\ttype === inputControlActionTypes.COMMIT\n\t\t) {\n\t\t\tconst applyEmptyValue = required === false && currentValue === '';\n\n\t\t\tstate.value = applyEmptyValue\n\t\t\t\t? currentValue\n\t\t\t\t: roundClamp( currentValue, min, max, step );\n\t\t}\n\n\t\treturn state;\n\t};\n\n\treturn (\n\t\t<Input\n\t\t\tautoComplete={ autoComplete }\n\t\t\tinputMode=\"numeric\"\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdragDirection={ dragDirection }\n\t\t\thideHTMLArrows={ hideHTMLArrows }\n\t\t\tisDragEnabled={ isDragEnabled }\n\t\t\tlabel={ label }\n\t\t\tmax={ max }\n\t\t\tmin={ min }\n\t\t\tref={ ref }\n\t\t\trequired={ required }\n\t\t\tstep={ jumpStep }\n\t\t\ttype={ typeProp }\n\t\t\tvalue={ valueProp }\n\t\t\t__unstableStateReducer={ composeStateReducers(\n\t\t\t\tnumberControlStateReducer,\n\t\t\t\tstateReducer\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( NumberControl );\n"]}
+{"version":3,"sources":["@wordpress/components/src/number-control/index.js"],"names":["NumberControl","ref","__unstableStateReducer","stateReducer","state","className","dragDirection","hideHTMLArrows","isDragEnabled","isShiftStepEnabled","label","max","Infinity","min","required","shiftStep","step","type","typeProp","value","valueProp","props","isStepAny","baseStep","parseFloat","baseValue","constrainValue","stepOverride","Math","autoComplete","classes","numberControlStateReducer","action","payload","event","currentValue","inputControlActionTypes","PRESS_UP","PRESS_DOWN","enableShift","shiftKey","incrementalValue","nextValue","preventDefault","DRAG","x","y","delta","modifier","directionModifier","ceil","abs","sign","distance","PRESS_ENTER","COMMIT","applyEmptyValue"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Input } from './styles/number-control-styles';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { composeStateReducers } from '../input-control/reducer/reducer';\nimport { add, subtract, roundClamp } from '../utils/math';\nimport { isValueEmpty } from '../utils/values';\n\nexport function NumberControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\tclassName,\n\t\tdragDirection = 'n',\n\t\thideHTMLArrows = false,\n\t\tisDragEnabled = true,\n\t\tisShiftStepEnabled = true,\n\t\tlabel,\n\t\tmax = Infinity,\n\t\tmin = -Infinity,\n\t\trequired = false,\n\t\tshiftStep = 10,\n\t\tstep = 1,\n\t\ttype: typeProp = 'number',\n\t\tvalue: valueProp,\n\t\t...props\n\t},\n\tref\n) {\n\tconst isStepAny = step === 'any';\n\tconst baseStep = isStepAny ? 1 : parseFloat( step );\n\tconst baseValue = roundClamp( 0, min, max, baseStep );\n\tconst constrainValue = ( value, stepOverride ) => {\n\t\t// When step is \"any\" clamp the value, otherwise round and clamp it\n\t\treturn isStepAny\n\t\t\t? Math.min( max, Math.max( min, value ) )\n\t\t\t: roundClamp( value, min, max, stepOverride ?? baseStep );\n\t};\n\n\tconst autoComplete = typeProp === 'number' ? 'off' : null;\n\tconst classes = classNames( 'components-number-control', className );\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param {Object} state  State from InputControl\n\t * @param {Object} action Action triggering state change\n\t * @return {Object} The updated state to apply to InputControl\n\t */\n\tconst numberControlStateReducer = ( state, action ) => {\n\t\tconst { type, payload } = action;\n\t\tconst event = payload?.event;\n\t\tconst currentValue = state.value;\n\n\t\t/**\n\t\t * Handles custom UP and DOWN Keyboard events\n\t\t */\n\t\tif (\n\t\t\ttype === inputControlActionTypes.PRESS_UP ||\n\t\t\ttype === inputControlActionTypes.PRESS_DOWN\n\t\t) {\n\t\t\tconst enableShift = event.shiftKey && isShiftStepEnabled;\n\n\t\t\tconst incrementalValue = enableShift\n\t\t\t\t? parseFloat( shiftStep ) * baseStep\n\t\t\t\t: baseStep;\n\t\t\tlet nextValue = isValueEmpty( currentValue )\n\t\t\t\t? baseValue\n\t\t\t\t: currentValue;\n\n\t\t\tif ( event?.preventDefault ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tif ( type === inputControlActionTypes.PRESS_UP ) {\n\t\t\t\tnextValue = add( nextValue, incrementalValue );\n\t\t\t}\n\n\t\t\tif ( type === inputControlActionTypes.PRESS_DOWN ) {\n\t\t\t\tnextValue = subtract( nextValue, incrementalValue );\n\t\t\t}\n\n\t\t\tstate.value = constrainValue(\n\t\t\t\tnextValue,\n\t\t\t\tenableShift ? incrementalValue : null\n\t\t\t);\n\t\t}\n\n\t\t/**\n\t\t * Handles drag to update events\n\t\t */\n\t\tif ( type === inputControlActionTypes.DRAG && isDragEnabled ) {\n\t\t\tconst [ x, y ] = payload.delta;\n\t\t\tconst enableShift = payload.shiftKey && isShiftStepEnabled;\n\t\t\tconst modifier = enableShift\n\t\t\t\t? parseFloat( shiftStep ) * baseStep\n\t\t\t\t: baseStep;\n\n\t\t\tlet directionModifier;\n\t\t\tlet delta;\n\n\t\t\tswitch ( dragDirection ) {\n\t\t\t\tcase 'n':\n\t\t\t\t\tdelta = y;\n\t\t\t\t\tdirectionModifier = -1;\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'e':\n\t\t\t\t\tdelta = x;\n\t\t\t\t\tdirectionModifier = isRTL() ? -1 : 1;\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 's':\n\t\t\t\t\tdelta = y;\n\t\t\t\t\tdirectionModifier = 1;\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'w':\n\t\t\t\t\tdelta = x;\n\t\t\t\t\tdirectionModifier = isRTL() ? 1 : -1;\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tif ( delta !== 0 ) {\n\t\t\t\tdelta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );\n\t\t\t\tconst distance = delta * modifier * directionModifier;\n\n\t\t\t\tstate.value = constrainValue(\n\t\t\t\t\tadd( currentValue, distance ),\n\t\t\t\t\tenableShift ? modifier : null\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Handles commit (ENTER key press or on blur if isPressEnterToChange)\n\t\t */\n\t\tif (\n\t\t\ttype === inputControlActionTypes.PRESS_ENTER ||\n\t\t\ttype === inputControlActionTypes.COMMIT\n\t\t) {\n\t\t\tconst applyEmptyValue = required === false && currentValue === '';\n\n\t\t\tstate.value = applyEmptyValue\n\t\t\t\t? currentValue\n\t\t\t\t: constrainValue( currentValue );\n\t\t}\n\n\t\treturn state;\n\t};\n\n\treturn (\n\t\t<Input\n\t\t\tautoComplete={ autoComplete }\n\t\t\tinputMode=\"numeric\"\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdragDirection={ dragDirection }\n\t\t\thideHTMLArrows={ hideHTMLArrows }\n\t\t\tisDragEnabled={ isDragEnabled }\n\t\t\tlabel={ label }\n\t\t\tmax={ max }\n\t\t\tmin={ min }\n\t\t\tref={ ref }\n\t\t\trequired={ required }\n\t\t\tstep={ step }\n\t\t\ttype={ typeProp }\n\t\t\tvalue={ valueProp }\n\t\t\t__unstableStateReducer={ composeStateReducers(\n\t\t\t\tnumberControlStateReducer,\n\t\t\t\tstateReducer\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( NumberControl );\n"]}

package/build/number-control/styles/number-control-styles.js

@@ -25,9 +25,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-const htmlArrowStyles = ({
-  hideHTMLArrows
-}) => {
+const htmlArrowStyles = _ref2 => {
+  let {
+    hideHTMLArrows
+  } = _ref2;
   if (!hideHTMLArrows) return ``;
   return _ref;
 };

package/build/number-control/styles/number-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/number-control/styles/number-control-styles.js"],"names":["htmlArrowStyles","hideHTMLArrows","Input","InputControl"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;;;;;;;;;;;AAEA,MAAMA,eAAe,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAA0B;AACjD,MAAK,CAAEA,cAAP,EAAwB,OAAQ,EAAR;AAExB;AAWA,CAdD;;AAgBO,MAAMC,KAAK,GAAG,iCAAQC,qBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACdH,eADc,yzCAAX","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport InputControl from '../../input-control';\n\nconst htmlArrowStyles = ( { hideHTMLArrows } ) => {\n\tif ( ! hideHTMLArrows ) return ``;\n\n\treturn css`\n\t\tinput[type='number']::-webkit-outer-spin-button,\n\t\tinput[type='number']::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none !important;\n\t\t\tmargin: 0 !important;\n\t\t}\n\n\t\tinput[type='number'] {\n\t\t\t-moz-appearance: textfield;\n\t\t}\n\t`;\n};\n\nexport const Input = styled( InputControl )`\n\t${ htmlArrowStyles };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/number-control/styles/number-control-styles.js"],"names":["htmlArrowStyles","hideHTMLArrows","Input","InputControl"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;;;;;;;;;;;AAEA,MAAMA,eAAe,GAAG,SAA0B;AAAA,MAAxB;AAAEC,IAAAA;AAAF,GAAwB;AACjD,MAAK,CAAEA,cAAP,EAAwB,OAAQ,EAAR;AAExB;AAWA,CAdD;;AAgBO,MAAMC,KAAK,GAAG,iCAAQC,qBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACdH,eADc,yzCAAX","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport InputControl from '../../input-control';\n\nconst htmlArrowStyles = ( { hideHTMLArrows } ) => {\n\tif ( ! hideHTMLArrows ) return ``;\n\n\treturn css`\n\t\tinput[type='number']::-webkit-outer-spin-button,\n\t\tinput[type='number']::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none !important;\n\t\t\tmargin: 0 !important;\n\t\t}\n\n\t\tinput[type='number'] {\n\t\t\t-moz-appearance: textfield;\n\t\t}\n\t`;\n};\n\nexport const Input = styled( InputControl )`\n\t${ htmlArrowStyles };\n`;\n"]}

package/build/panel/actions.native.js

@@ -30,15 +30,17 @@ var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-c
 /**
  * Internal dependencies
  */
-function PanelActions({
-  actions,
-  getStylesFromColorScheme
-}) {
+function PanelActions(_ref) {
+  let {
+    actions,
+    getStylesFromColorScheme
+  } = _ref;
   const mappedActions = (0, _element.useMemo)(() => {
-    return actions.map(({
-      label,
-      onPress
-    }) => {
+    return actions.map(_ref2 => {
+      let {
+        label,
+        onPress
+      } = _ref2;
       return (0, _element.createElement)(_components.TextControl, {
         label: label,
         onPress: onPress,

package/build/panel/actions.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/actions.native.js"],"names":["PanelActions","actions","getStylesFromColorScheme","mappedActions","map","label","onPress","styles","defaultLabelStyle","panelActionsContainer","panelActionsContainerDark"],"mappings":";;;;;;;;;AAUA;;AAPA;;AAKA;;AACA;;AAMA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA,SAASA,YAAT,CAAuB;AAAEC,EAAAA,OAAF;AAAWC,EAAAA;AAAX,CAAvB,EAA+D;AAC9D,QAAMC,aAAa,GAAG,sBAAS,MAAM;AACpC,WAAOF,OAAO,CAACG,GAAR,CAAa,CAAE;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAF,KAA0B;AAC7C,aACC,4BAAC,uBAAD;AACC,QAAA,KAAK,EAAGD,KADT;AAEC,QAAA,OAAO,EAAGC,OAFX;AAGC,QAAA,UAAU,EAAGC,iBAAOC,iBAHrB;AAIC,QAAA,GAAG,EAAGH;AAJP,QADD;AAQA,KATM,CAAP;AAUA,GAXqB,EAWnB,CAAEJ,OAAF,CAXmB,CAAtB;AAaA,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAGC,wBAAwB,CAC/BK,iBAAOE,qBADwB,EAE/BF,iBAAOG,yBAFwB;AADjC,KAMGP,aANH,EAOC,4BAAC,6BAAD,OAPD,CADD;AAWA;;eAEc,uCAA0BH,YAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './actions.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nfunction PanelActions( { actions, getStylesFromColorScheme } ) {\n\tconst mappedActions = useMemo( () => {\n\t\treturn actions.map( ( { label, onPress } ) => {\n\t\t\treturn (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonPress={ onPress }\n\t\t\t\t\tlabelStyle={ styles.defaultLabelStyle }\n\t\t\t\t\tkey={ label }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ actions ] );\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.panelActionsContainer,\n\t\t\t\tstyles.panelActionsContainerDark\n\t\t\t) }\n\t\t>\n\t\t\t{ mappedActions }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( PanelActions );\n"]}
+{"version":3,"sources":["@wordpress/components/src/panel/actions.native.js"],"names":["PanelActions","actions","getStylesFromColorScheme","mappedActions","map","label","onPress","styles","defaultLabelStyle","panelActionsContainer","panelActionsContainerDark"],"mappings":";;;;;;;;;AAUA;;AAPA;;AAKA;;AACA;;AAMA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA,SAASA,YAAT,OAA+D;AAAA,MAAxC;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,GAAwC;AAC9D,QAAMC,aAAa,GAAG,sBAAS,MAAM;AACpC,WAAOF,OAAO,CAACG,GAAR,CAAa,SAA0B;AAAA,UAAxB;AAAEC,QAAAA,KAAF;AAASC,QAAAA;AAAT,OAAwB;AAC7C,aACC,4BAAC,uBAAD;AACC,QAAA,KAAK,EAAGD,KADT;AAEC,QAAA,OAAO,EAAGC,OAFX;AAGC,QAAA,UAAU,EAAGC,iBAAOC,iBAHrB;AAIC,QAAA,GAAG,EAAGH;AAJP,QADD;AAQA,KATM,CAAP;AAUA,GAXqB,EAWnB,CAAEJ,OAAF,CAXmB,CAAtB;AAaA,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAGC,wBAAwB,CAC/BK,iBAAOE,qBADwB,EAE/BF,iBAAOG,yBAFwB;AADjC,KAMGP,aANH,EAOC,4BAAC,6BAAD,OAPD,CADD;AAWA;;eAEc,uCAA0BH,YAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './actions.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nfunction PanelActions( { actions, getStylesFromColorScheme } ) {\n\tconst mappedActions = useMemo( () => {\n\t\treturn actions.map( ( { label, onPress } ) => {\n\t\t\treturn (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonPress={ onPress }\n\t\t\t\t\tlabelStyle={ styles.defaultLabelStyle }\n\t\t\t\t\tkey={ label }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ actions ] );\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.panelActionsContainer,\n\t\t\t\tstyles.panelActionsContainerDark\n\t\t\t) }\n\t\t>\n\t\t\t{ mappedActions }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( PanelActions );\n"]}

package/build/panel/body.js

@@ -37,17 +37,18 @@ var _utils = require("../utils");
 /**
  * Internal dependencies
  */
-function PanelBody({
-  buttonProps = {},
-  children,
-  className,
-  icon,
-  initialOpen,
-  onToggle = _lodash.noop,
-  opened,
-  title,
-  scrollAfterOpen = true
-}, ref) {
+function PanelBody(_ref, ref) {
+  let {
+    buttonProps = {},
+    children,
+    className,
+    icon,
+    initialOpen,
+    onToggle = _lodash.noop,
+    opened,
+    title,
+    scrollAfterOpen = true
+  } = _ref;
   const [isOpened, setIsOpened] = (0, _utils.useControlledState)(opened, {
     initial: initialOpen === undefined ? true : initialOpen
   });
@@ -99,12 +100,13 @@ function PanelBody({
   }) : isOpened && children);
 }
 
-const PanelBodyTitle = (0, _element.forwardRef)(({
-  isOpened,
-  icon,
-  title,
-  ...props
-}, ref) => {
+const PanelBodyTitle = (0, _element.forwardRef)((_ref2, ref) => {
+  let {
+    isOpened,
+    icon,
+    title,
+    ...props
+  } = _ref2;
   if (!title) return null;
   return (0, _element.createElement)("h2", {
     className: "components-panel__body-title"

package/build/panel/body.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/body.js"],"names":["PanelBody","buttonProps","children","className","icon","initialOpen","onToggle","noop","opened","title","scrollAfterOpen","ref","isOpened","setIsOpened","initial","undefined","nodeRef","scrollBehavior","handleOnToggle","event","preventDefault","next","scrollAfterOpenRef","current","scrollIntoView","inline","block","behavior","classes","PanelBodyTitle","props","chevronUp","chevronDown","ForwardedComponent","displayName"],"mappings":";;;;;;;;;;AAUA;;;;AAPA;;AACA;;AAKA;;AAEA;;AAKA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAKO,SAASA,SAAT,CACN;AACCC,EAAAA,WAAW,GAAG,EADf;AAECC,EAAAA,QAFD;AAGCC,EAAAA,SAHD;AAICC,EAAAA,IAJD;AAKCC,EAAAA,WALD;AAMCC,EAAAA,QAAQ,GAAGC,YANZ;AAOCC,EAAAA,MAPD;AAQCC,EAAAA,KARD;AASCC,EAAAA,eAAe,GAAG;AATnB,CADM,EAYNC,GAZM,EAaL;AACD,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,+BAAoBL,MAApB,EAA4B;AAC7DM,IAAAA,OAAO,EAAET,WAAW,KAAKU,SAAhB,GAA4B,IAA5B,GAAmCV;AADiB,GAA5B,CAAlC;AAGA,QAAMW,OAAO,GAAG,sBAAhB,CAJC,CAMD;AACA;;AACA,QAAMC,cAAc,GAAG,mCAAqB,MAArB,GAA8B,QAArD;;AAEA,QAAMC,cAAc,GAAKC,KAAF,IAAa;AACnCA,IAAAA,KAAK,CAACC,cAAN;AACA,UAAMC,IAAI,GAAG,CAAET,QAAf;AACAC,IAAAA,WAAW,CAAEQ,IAAF,CAAX;AACAf,IAAAA,QAAQ,CAAEe,IAAF,CAAR;AACA,GALD,CAVC,CAiBD;;;AACA,QAAMC,kBAAkB,GAAG,sBAA3B;AACAA,EAAAA,kBAAkB,CAACC,OAAnB,GAA6Bb,eAA7B,CAnBC,CAoBD;;AACA,8BAAiB,MAAM;AAAA;;AACtB,QACCE,QAAQ,IACRU,kBAAkB,CAACC,OADnB,wBAEAP,OAAO,CAACO,OAFR,6CAEA,iBAAiBC,cAHlB,EAIE;AACD;AACH;AACA;AACA;AACA;AACGR,MAAAA,OAAO,CAACO,OAAR,CAAgBC,cAAhB,CAAgC;AAC/BC,QAAAA,MAAM,EAAE,SADuB;AAE/BC,QAAAA,KAAK,EAAE,SAFwB;AAG/BC,QAAAA,QAAQ,EAAEV;AAHqB,OAAhC;AAKA;AACD,GAjBD,EAiBG,CAAEL,QAAF,EAAYK,cAAZ,CAjBH;AAmBA,QAAMW,OAAO,GAAG,yBAAY,wBAAZ,EAAsCzB,SAAtC,EAAiD;AAChE,iBAAaS;AADmD,GAAjD,CAAhB;AAIA,SACC;AAAK,IAAA,SAAS,EAAGgB,OAAjB;AAA2B,IAAA,GAAG,EAAG,2BAAc,CAAEZ,OAAF,EAAWL,GAAX,CAAd;AAAjC,KACC,4BAAC,cAAD;AACC,IAAA,IAAI,EAAGP,IADR;AAEC,IAAA,QAAQ,EAAGQ,QAFZ;AAGC,IAAA,OAAO,EAAGM,cAHX;AAIC,IAAA,KAAK,EAAGT;AAJT,KAKMR,WALN,EADD,EAQG,OAAOC,QAAP,KAAoB,UAApB,GACCA,QAAQ,CAAE;AAAEM,IAAAA,MAAM,EAAEI;AAAV,GAAF,CADT,GAECA,QAAQ,IAAIV,QAVhB,CADD;AAcA;;AAED,MAAM2B,cAAc,GAAG,yBACtB,CAAE;AAAEjB,EAAAA,QAAF;AAAYR,EAAAA,IAAZ;AAAkBK,EAAAA,KAAlB;AAAyB,KAAGqB;AAA5B,CAAF,EAAuCnB,GAAvC,KAAgD;AAC/C,MAAK,CAAEF,KAAP,EAAe,OAAO,IAAP;AAEf,SACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,+BADX;AAEC,qBAAgBG,QAFjB;AAGC,IAAA,GAAG,EAAGD;AAHP,KAIMmB,KAJN,GAUC;AAAM,mBAAY;AAAlB,KACC,4BAAC,aAAD;AACC,IAAA,SAAS,EAAC,yBADX;AAEC,IAAA,IAAI,EAAGlB,QAAQ,GAAGmB,gBAAH,GAAeC;AAF/B,IADD,CAVD,EAgBGvB,KAhBH,EAiBGL,IAAI,IACL,4BAAC,aAAD;AACC,IAAA,IAAI,EAAGA,IADR;AAEC,IAAA,SAAS,EAAC,wBAFX;AAGC,IAAA,IAAI,EAAG;AAHR,IAlBF,CADD,CADD;AA6BA,CAjCqB,CAAvB;AAoCA,MAAM6B,kBAAkB,GAAG,yBAAYjC,SAAZ,CAA3B;AACAiC,kBAAkB,CAACC,WAAnB,GAAiC,WAAjC;eAEeD,kB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { chevronUp, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Icon from '../icon';\nimport { useControlledState, useUpdateEffect } from '../utils';\n\nexport function PanelBody(\n\t{\n\t\tbuttonProps = {},\n\t\tchildren,\n\t\tclassName,\n\t\ticon,\n\t\tinitialOpen,\n\t\tonToggle = noop,\n\t\topened,\n\t\ttitle,\n\t\tscrollAfterOpen = true,\n\t},\n\tref\n) {\n\tconst [ isOpened, setIsOpened ] = useControlledState( opened, {\n\t\tinitial: initialOpen === undefined ? true : initialOpen,\n\t} );\n\tconst nodeRef = useRef();\n\n\t// Defaults to 'smooth' scrolling\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n\tconst scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';\n\n\tconst handleOnToggle = ( event ) => {\n\t\tevent.preventDefault();\n\t\tconst next = ! isOpened;\n\t\tsetIsOpened( next );\n\t\tonToggle( next );\n\t};\n\n\t// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value\n\tconst scrollAfterOpenRef = useRef();\n\tscrollAfterOpenRef.current = scrollAfterOpen;\n\t// Runs after initial render\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\tisOpened &&\n\t\t\tscrollAfterOpenRef.current &&\n\t\t\tnodeRef.current?.scrollIntoView\n\t\t) {\n\t\t\t/*\n\t\t\t * Scrolls the content into view when visible.\n\t\t\t * This improves the UX when there are multiple stacking <PanelBody />\n\t\t\t * components in a scrollable container.\n\t\t\t */\n\t\t\tnodeRef.current.scrollIntoView( {\n\t\t\t\tinline: 'nearest',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tbehavior: scrollBehavior,\n\t\t\t} );\n\t\t}\n\t}, [ isOpened, scrollBehavior ] );\n\n\tconst classes = classnames( 'components-panel__body', className, {\n\t\t'is-opened': isOpened,\n\t} );\n\n\treturn (\n\t\t<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>\n\t\t\t<PanelBodyTitle\n\t\t\t\ticon={ icon }\n\t\t\t\tisOpened={ isOpened }\n\t\t\t\tonClick={ handleOnToggle }\n\t\t\t\ttitle={ title }\n\t\t\t\t{ ...buttonProps }\n\t\t\t/>\n\t\t\t{ typeof children === 'function'\n\t\t\t\t? children( { opened: isOpened } )\n\t\t\t\t: isOpened && children }\n\t\t</div>\n\t);\n}\n\nconst PanelBodyTitle = forwardRef(\n\t( { isOpened, icon, title, ...props }, ref ) => {\n\t\tif ( ! title ) return null;\n\n\t\treturn (\n\t\t\t<h2 className=\"components-panel__body-title\">\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-panel__body-toggle\"\n\t\t\t\t\taria-expanded={ isOpened }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ /*\n\t\t\t\t\tFirefox + NVDA don't announce aria-expanded because the browser\n\t\t\t\t\trepaints the whole element, so this wrapping span hides that.\n\t\t\t\t*/ }\n\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-panel__arrow\"\n\t\t\t\t\t\t\ticon={ isOpened ? chevronUp : chevronDown }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ title }\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tclassName=\"components-panel__icon\"\n\t\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Button>\n\t\t\t</h2>\n\t\t);\n\t}\n);\n\nconst ForwardedComponent = forwardRef( PanelBody );\nForwardedComponent.displayName = 'PanelBody';\n\nexport default ForwardedComponent;\n"]}
+{"version":3,"sources":["@wordpress/components/src/panel/body.js"],"names":["PanelBody","ref","buttonProps","children","className","icon","initialOpen","onToggle","noop","opened","title","scrollAfterOpen","isOpened","setIsOpened","initial","undefined","nodeRef","scrollBehavior","handleOnToggle","event","preventDefault","next","scrollAfterOpenRef","current","scrollIntoView","inline","block","behavior","classes","PanelBodyTitle","props","chevronUp","chevronDown","ForwardedComponent","displayName"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { chevronUp, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Icon from '../icon';\nimport { useControlledState, useUpdateEffect } from '../utils';\n\nexport function PanelBody(\n\t{\n\t\tbuttonProps = {},\n\t\tchildren,\n\t\tclassName,\n\t\ticon,\n\t\tinitialOpen,\n\t\tonToggle = noop,\n\t\topened,\n\t\ttitle,\n\t\tscrollAfterOpen = true,\n\t},\n\tref\n) {\n\tconst [ isOpened, setIsOpened ] = useControlledState( opened, {\n\t\tinitial: initialOpen === undefined ? true : initialOpen,\n\t} );\n\tconst nodeRef = useRef();\n\n\t// Defaults to 'smooth' scrolling\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n\tconst scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';\n\n\tconst handleOnToggle = ( event ) => {\n\t\tevent.preventDefault();\n\t\tconst next = ! isOpened;\n\t\tsetIsOpened( next );\n\t\tonToggle( next );\n\t};\n\n\t// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value\n\tconst scrollAfterOpenRef = useRef();\n\tscrollAfterOpenRef.current = scrollAfterOpen;\n\t// Runs after initial render\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\tisOpened &&\n\t\t\tscrollAfterOpenRef.current &&\n\t\t\tnodeRef.current?.scrollIntoView\n\t\t) {\n\t\t\t/*\n\t\t\t * Scrolls the content into view when visible.\n\t\t\t * This improves the UX when there are multiple stacking <PanelBody />\n\t\t\t * components in a scrollable container.\n\t\t\t */\n\t\t\tnodeRef.current.scrollIntoView( {\n\t\t\t\tinline: 'nearest',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tbehavior: scrollBehavior,\n\t\t\t} );\n\t\t}\n\t}, [ isOpened, scrollBehavior ] );\n\n\tconst classes = classnames( 'components-panel__body', className, {\n\t\t'is-opened': isOpened,\n\t} );\n\n\treturn (\n\t\t<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>\n\t\t\t<PanelBodyTitle\n\t\t\t\ticon={ icon }\n\t\t\t\tisOpened={ isOpened }\n\t\t\t\tonClick={ handleOnToggle }\n\t\t\t\ttitle={ title }\n\t\t\t\t{ ...buttonProps }\n\t\t\t/>\n\t\t\t{ typeof children === 'function'\n\t\t\t\t? children( { opened: isOpened } )\n\t\t\t\t: isOpened && children }\n\t\t</div>\n\t);\n}\n\nconst PanelBodyTitle = forwardRef(\n\t( { isOpened, icon, title, ...props }, ref ) => {\n\t\tif ( ! title ) return null;\n\n\t\treturn (\n\t\t\t<h2 className=\"components-panel__body-title\">\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-panel__body-toggle\"\n\t\t\t\t\taria-expanded={ isOpened }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ /*\n\t\t\t\t\tFirefox + NVDA don't announce aria-expanded because the browser\n\t\t\t\t\trepaints the whole element, so this wrapping span hides that.\n\t\t\t\t*/ }\n\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-panel__arrow\"\n\t\t\t\t\t\t\ticon={ isOpened ? chevronUp : chevronDown }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ title }\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tclassName=\"components-panel__icon\"\n\t\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Button>\n\t\t\t</h2>\n\t\t);\n\t}\n);\n\nconst ForwardedComponent = forwardRef( PanelBody );\nForwardedComponent.displayName = 'PanelBody';\n\nexport default ForwardedComponent;\n"]}

package/build/panel/body.native.js

@@ -23,12 +23,13 @@ var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-c
 /**
  * Internal dependencies
  */
-function PanelBody({
-  children,
-  title,
-  style,
-  titleStyle = {}
-}) {
+function PanelBody(_ref) {
+  let {
+    children,
+    title,
+    style,
+    titleStyle = {}
+  } = _ref;
   return (0, _element.createElement)(_reactNative.View, {
     style: [_body.default.panelContainer, style]
   }, title && (0, _element.createElement)(_reactNative.Text, {

package/build/panel/body.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/body.native.js"],"names":["PanelBody","children","title","style","titleStyle","styles","panelContainer","sectionHeaderText"],"mappings":";;;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIO,SAASA,SAAT,CAAoB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,KAAZ;AAAmBC,EAAAA,KAAnB;AAA0BC,EAAAA,UAAU,GAAG;AAAvC,CAApB,EAAkE;AACxE,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEC,cAAOC,cAAT,EAAyBH,KAAzB;AAAd,KACGD,KAAK,IACN,4BAAC,iBAAD;AACC,IAAA,iBAAiB,EAAC,QADnB;AAEC,IAAA,KAAK,EAAG,CAAEG,cAAOE,iBAAT,EAA4BH,UAA5B;AAFT,KAIGF,KAJH,CAFF,EASGD,QATH,EAUC,4BAAC,6BAAD,OAVD,CADD;AAcA;;eAEcD,S","sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport styles from './body.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nexport function PanelBody( { children, title, style, titleStyle = {} } ) {\n\treturn (\n\t\t<View style={ [ styles.panelContainer, style ] }>\n\t\t\t{ title && (\n\t\t\t\t<Text\n\t\t\t\t\taccessibilityRole=\"header\"\n\t\t\t\t\tstyle={ [ styles.sectionHeaderText, titleStyle ] }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default PanelBody;\n"]}
+{"version":3,"sources":["@wordpress/components/src/panel/body.native.js"],"names":["PanelBody","children","title","style","titleStyle","styles","panelContainer","sectionHeaderText"],"mappings":";;;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIO,SAASA,SAAT,OAAkE;AAAA,MAA9C;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,KAAnB;AAA0BC,IAAAA,UAAU,GAAG;AAAvC,GAA8C;AACxE,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEC,cAAOC,cAAT,EAAyBH,KAAzB;AAAd,KACGD,KAAK,IACN,4BAAC,iBAAD;AACC,IAAA,iBAAiB,EAAC,QADnB;AAEC,IAAA,KAAK,EAAG,CAAEG,cAAOE,iBAAT,EAA4BH,UAA5B;AAFT,KAIGF,KAJH,CAFF,EASGD,QATH,EAUC,4BAAC,6BAAD,OAVD,CADD;AAcA;;eAEcD,S","sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport styles from './body.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nexport function PanelBody( { children, title, style, titleStyle = {} } ) {\n\treturn (\n\t\t<View style={ [ styles.panelContainer, style ] }>\n\t\t\t{ title && (\n\t\t\t\t<Text\n\t\t\t\t\taccessibilityRole=\"header\"\n\t\t\t\t\tstyle={ [ styles.sectionHeaderText, titleStyle ] }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default PanelBody;\n"]}

package/build/panel/bottom-separator-cover.native.js

@@ -26,9 +26,10 @@ var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-c
 /**
  * Internal dependencies
  */
-function BottomSeparatorCover({
-  getStylesFromColorScheme
-}) {
+function BottomSeparatorCover(_ref) {
+  let {
+    getStylesFromColorScheme
+  } = _ref;
   return (0, _element.createElement)(_reactNative.View, {
     style: getStylesFromColorScheme(_bottomSeparatorCover.default.coverSeparator, _bottomSeparatorCover.default.coverSeparatorDark)
   });

package/build/panel/bottom-separator-cover.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/bottom-separator-cover.native.js"],"names":["BottomSeparatorCover","getStylesFromColorScheme","styles","coverSeparator","coverSeparatorDark"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,SAASA,oBAAT,CAA+B;AAAEC,EAAAA;AAAF,CAA/B,EAA8D;AAC7D,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAGA,wBAAwB,CAC/BC,8BAAOC,cADwB,EAE/BD,8BAAOE,kBAFwB;AADjC,IADD;AAQA;;eAEc,uCAA0BJ,oBAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './bottom-separator-cover.scss';\n\nfunction BottomSeparatorCover( { getStylesFromColorScheme } ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.coverSeparator,\n\t\t\t\tstyles.coverSeparatorDark\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( BottomSeparatorCover );\n"]}
+{"version":3,"sources":["@wordpress/components/src/panel/bottom-separator-cover.native.js"],"names":["BottomSeparatorCover","getStylesFromColorScheme","styles","coverSeparator","coverSeparatorDark"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,SAASA,oBAAT,OAA8D;AAAA,MAA/B;AAAEC,IAAAA;AAAF,GAA+B;AAC7D,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAGA,wBAAwB,CAC/BC,8BAAOC,cADwB,EAE/BD,8BAAOE,kBAFwB;AADjC,IADD;AAQA;;eAEc,uCAA0BJ,oBAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './bottom-separator-cover.scss';\n\nfunction BottomSeparatorCover( { getStylesFromColorScheme } ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.coverSeparator,\n\t\t\t\tstyles.coverSeparatorDark\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( BottomSeparatorCover );\n"]}

package/build/panel/header.js

@@ -7,10 +7,11 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-function PanelHeader({
-  label,
-  children
-}) {
+function PanelHeader(_ref) {
+  let {
+    label,
+    children
+  } = _ref;
   return (0, _element.createElement)("div", {
     className: "components-panel__header"
   }, label && (0, _element.createElement)("h2", null, label), children);

package/build/panel/header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/header.js"],"names":["PanelHeader","label","children"],"mappings":";;;;;;;;;AAAA,SAASA,WAAT,CAAsB;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAtB,EAA4C;AAC3C,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,KAAK,IAAI,wCAAMA,KAAN,CADZ,EAEGC,QAFH,CADD;AAMA;;eAEcF,W","sourcesContent":["function PanelHeader( { label, children } ) {\n\treturn (\n\t\t<div className=\"components-panel__header\">\n\t\t\t{ label && <h2>{ label }</h2> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default PanelHeader;\n"]}
+{"version":3,"sources":["@wordpress/components/src/panel/header.js"],"names":["PanelHeader","label","children"],"mappings":";;;;;;;;;AAAA,SAASA,WAAT,OAA4C;AAAA,MAAtB;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAsB;AAC3C,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,KAAK,IAAI,wCAAMA,KAAN,CADZ,EAEGC,QAFH,CADD;AAMA;;eAEcF,W","sourcesContent":["function PanelHeader( { label, children } ) {\n\treturn (\n\t\t<div className=\"components-panel__header\">\n\t\t\t{ label && <h2>{ label }</h2> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default PanelHeader;\n"]}

package/build/panel/index.js

@@ -24,11 +24,12 @@ var _header = _interopRequireDefault(require("./header"));
 /**
  * Internal dependencies
  */
-function Panel({
-  header,
-  className,
-  children
-}, ref) {
+function Panel(_ref, ref) {
+  let {
+    header,
+    className,
+    children
+  } = _ref;
   const classNames = (0, _classnames.default)(className, 'components-panel');
   return (0, _element.createElement)("div", {
     className: classNames,

package/build/panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/index.js"],"names":["Panel","header","className","children","ref","classNames"],"mappings":";;;;;;;;;AAQA;;AALA;;AAUA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,SAASA,KAAT,CAAgB;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,SAAV;AAAqBC,EAAAA;AAArB,CAAhB,EAAiDC,GAAjD,EAAuD;AACtD,QAAMC,UAAU,GAAG,yBAAYH,SAAZ,EAAuB,kBAAvB,CAAnB;AACA,SACC;AAAK,IAAA,SAAS,EAAGG,UAAjB;AAA8B,IAAA,GAAG,EAAGD;AAApC,KACGH,MAAM,IAAI,4BAAC,eAAD;AAAa,IAAA,KAAK,EAAGA;AAArB,IADb,EAEGE,QAFH,CADD;AAMA;;eAEc,yBAAYH,KAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport PanelHeader from './header';\n\nfunction Panel( { header, className, children }, ref ) {\n\tconst classNames = classnames( className, 'components-panel' );\n\treturn (\n\t\t<div className={ classNames } ref={ ref }>\n\t\t\t{ header && <PanelHeader label={ header } /> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( Panel );\n"]}
+{"version":3,"sources":["@wordpress/components/src/panel/index.js"],"names":["Panel","ref","header","className","children","classNames"],"mappings":";;;;;;;;;AAQA;;AALA;;AAUA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,SAASA,KAAT,OAAiDC,GAAjD,EAAuD;AAAA,MAAvC;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,SAAV;AAAqBC,IAAAA;AAArB,GAAuC;AACtD,QAAMC,UAAU,GAAG,yBAAYF,SAAZ,EAAuB,kBAAvB,CAAnB;AACA,SACC;AAAK,IAAA,SAAS,EAAGE,UAAjB;AAA8B,IAAA,GAAG,EAAGJ;AAApC,KACGC,MAAM,IAAI,4BAAC,eAAD;AAAa,IAAA,KAAK,EAAGA;AAArB,IADb,EAEGE,QAFH,CADD;AAMA;;eAEc,yBAAYJ,KAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport PanelHeader from './header';\n\nfunction Panel( { header, className, children }, ref ) {\n\tconst classNames = classnames( className, 'components-panel' );\n\treturn (\n\t\t<div className={ classNames } ref={ ref }>\n\t\t\t{ header && <PanelHeader label={ header } /> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( Panel );\n"]}

package/build/panel/row.js

@@ -18,13 +18,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * WordPress dependencies
  */
-const PanelRow = (0, _element.forwardRef)(({
-  className,
-  children
-}, ref) => (0, _element.createElement)("div", {
-  className: (0, _classnames.default)('components-panel__row', className),
-  ref: ref
-}, children));
+const PanelRow = (0, _element.forwardRef)((_ref, ref) => {
+  let {
+    className,
+    children
+  } = _ref;
+  return (0, _element.createElement)("div", {
+    className: (0, _classnames.default)('components-panel__row', className),
+    ref: ref
+  }, children);
+});
 var _default = PanelRow;
 exports.default = _default;
 //# sourceMappingURL=row.js.map

package/build/panel/row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/row.js"],"names":["PanelRow","className","children","ref"],"mappings":";;;;;;;;;AAQA;;AALA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,QAAQ,GAAG,yBAAY,CAAE;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAF,EAA2BC,GAA3B,KAC5B;AACC,EAAA,SAAS,EAAG,yBAAY,uBAAZ,EAAqCF,SAArC,CADb;AAEC,EAAA,GAAG,EAAGE;AAFP,GAIGD,QAJH,CADgB,CAAjB;eASeF,Q","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\nconst PanelRow = forwardRef( ( { className, children }, ref ) => (\n\t<div\n\t\tclassName={ classnames( 'components-panel__row', className ) }\n\t\tref={ ref }\n\t>\n\t\t{ children }\n\t</div>\n) );\n\nexport default PanelRow;\n"]}
+{"version":3,"sources":["@wordpress/components/src/panel/row.js"],"names":["PanelRow","ref","className","children"],"mappings":";;;;;;;;;AAQA;;AALA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,QAAQ,GAAG,yBAAY,OAA2BC,GAA3B;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GAAF;AAAA,SAC5B;AACC,IAAA,SAAS,EAAG,yBAAY,uBAAZ,EAAqCD,SAArC,CADb;AAEC,IAAA,GAAG,EAAGD;AAFP,KAIGE,QAJH,CAD4B;AAAA,CAAZ,CAAjB;eASeH,Q","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\nconst PanelRow = forwardRef( ( { className, children }, ref ) => (\n\t<div\n\t\tclassName={ classnames( 'components-panel__row', className ) }\n\t\tref={ ref }\n\t>\n\t\t{ children }\n\t</div>\n) );\n\nexport default PanelRow;\n"]}

package/build/placeholder/index.js

@@ -44,17 +44,18 @@ var _icon = _interopRequireDefault(require("../icon"));
  *
  * @return {Object} The rendered placeholder.
  */
-function Placeholder({
-  icon,
-  children,
-  label,
-  instructions,
-  className,
-  notices,
-  preview,
-  isColumnLayout,
-  ...additionalProps
-}) {
+function Placeholder(_ref) {
+  let {
+    icon,
+    children,
+    label,
+    instructions,
+    className,
+    notices,
+    preview,
+    isColumnLayout,
+    ...additionalProps
+  } = _ref;
   const [resizeListener, {
     width
   }] = (0, _compose.useResizeObserver)(); // Since `useResizeObserver` will report a width of `null` until after the

package/build/placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/placeholder/index.js"],"names":["Placeholder","icon","children","label","instructions","className","notices","preview","isColumnLayout","additionalProps","resizeListener","width","modifierClassNames","classes","fieldsetClasses"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAT,CAAsB;AACrBC,EAAAA,IADqB;AAErBC,EAAAA,QAFqB;AAGrBC,EAAAA,KAHqB;AAIrBC,EAAAA,YAJqB;AAKrBC,EAAAA,SALqB;AAMrBC,EAAAA,OANqB;AAOrBC,EAAAA,OAPqB;AAQrBC,EAAAA,cARqB;AASrB,KAAGC;AATkB,CAAtB,EAUI;AACH,QAAM,CAAEC,cAAF,EAAkB;AAAEC,IAAAA;AAAF,GAAlB,IAAgC,iCAAtC,CADG,CAGH;AACA;;AACA,MAAIC,kBAAJ;;AACA,MAAK,OAAOD,KAAP,KAAiB,QAAtB,EAAiC;AAChCC,IAAAA,kBAAkB,GAAG;AACpB,kBAAYD,KAAK,IAAI,GADD;AAEpB,mBAAaA,KAAK,IAAI,GAAT,IAAgBA,KAAK,GAAG,GAFjB;AAGpB,kBAAYA,KAAK,GAAG;AAHA,KAArB;AAKA;;AAED,QAAME,OAAO,GAAG,yBACf,wBADe,EAEfR,SAFe,EAGfO,kBAHe,CAAhB;AAKA,QAAME,eAAe,GAAG,yBAAY,kCAAZ,EAAgD;AACvE,wBAAoBN;AADmD,GAAhD,CAAxB;AAGA,SACC,8DAAUC,eAAV;AAA4B,IAAA,SAAS,EAAGI;AAAxC,MACGH,cADH,EAEGJ,OAFH,EAGGC,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAJF,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGN;AAAb,IADD,EAEGE,KAFH,CARD,EAYG,CAAC,CAAEC,YAAH,IACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,YADH,CAbF,EAiBC;AAAK,IAAA,SAAS,EAAGU;AAAjB,KAAqCZ,QAArC,CAjBD,CADD;AAqBA;;eAEcF,W","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useResizeObserver } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\n\n/**\n * Renders a placeholder. Normally used by blocks to render their empty state.\n *\n * @param {Object}    props                The component props.\n * @param {WPIcon}    props.icon           An icon rendered before the label.\n * @param {WPElement} props.children       Children to be rendered.\n * @param {string}    props.label          Title of the placeholder.\n * @param {string}    props.instructions   Instructions of the placeholder.\n * @param {string}    props.className      Class to set on the container div.\n * @param {Object}    props.notices        A rendered notices list.\n * @param {Object}    props.preview        Preview to be rendered in the placeholder.\n * @param {boolean}   props.isColumnLayout Whether a column layout should be used.\n *\n * @return {Object} The rendered placeholder.\n */\nfunction Placeholder( {\n\ticon,\n\tchildren,\n\tlabel,\n\tinstructions,\n\tclassName,\n\tnotices,\n\tpreview,\n\tisColumnLayout,\n\t...additionalProps\n} ) {\n\tconst [ resizeListener, { width } ] = useResizeObserver();\n\n\t// Since `useResizeObserver` will report a width of `null` until after the\n\t// first render, avoid applying any modifier classes until width is known.\n\tlet modifierClassNames;\n\tif ( typeof width === 'number' ) {\n\t\tmodifierClassNames = {\n\t\t\t'is-large': width >= 480,\n\t\t\t'is-medium': width >= 160 && width < 480,\n\t\t\t'is-small': width < 160,\n\t\t};\n\t}\n\n\tconst classes = classnames(\n\t\t'components-placeholder',\n\t\tclassName,\n\t\tmodifierClassNames\n\t);\n\tconst fieldsetClasses = classnames( 'components-placeholder__fieldset', {\n\t\t'is-column-layout': isColumnLayout,\n\t} );\n\treturn (\n\t\t<div { ...additionalProps } className={ classes }>\n\t\t\t{ resizeListener }\n\t\t\t{ notices }\n\t\t\t{ preview && (\n\t\t\t\t<div className=\"components-placeholder__preview\">\n\t\t\t\t\t{ preview }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"components-placeholder__label\">\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t{ label }\n\t\t\t</div>\n\t\t\t{ !! instructions && (\n\t\t\t\t<div className=\"components-placeholder__instructions\">\n\t\t\t\t\t{ instructions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className={ fieldsetClasses }>{ children }</div>\n\t\t</div>\n\t);\n}\n\nexport default Placeholder;\n"]}
+{"version":3,"sources":["@wordpress/components/src/placeholder/index.js"],"names":["Placeholder","icon","children","label","instructions","className","notices","preview","isColumnLayout","additionalProps","resizeListener","width","modifierClassNames","classes","fieldsetClasses"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAT,OAUI;AAAA,MAVkB;AACrBC,IAAAA,IADqB;AAErBC,IAAAA,QAFqB;AAGrBC,IAAAA,KAHqB;AAIrBC,IAAAA,YAJqB;AAKrBC,IAAAA,SALqB;AAMrBC,IAAAA,OANqB;AAOrBC,IAAAA,OAPqB;AAQrBC,IAAAA,cARqB;AASrB,OAAGC;AATkB,GAUlB;AACH,QAAM,CAAEC,cAAF,EAAkB;AAAEC,IAAAA;AAAF,GAAlB,IAAgC,iCAAtC,CADG,CAGH;AACA;;AACA,MAAIC,kBAAJ;;AACA,MAAK,OAAOD,KAAP,KAAiB,QAAtB,EAAiC;AAChCC,IAAAA,kBAAkB,GAAG;AACpB,kBAAYD,KAAK,IAAI,GADD;AAEpB,mBAAaA,KAAK,IAAI,GAAT,IAAgBA,KAAK,GAAG,GAFjB;AAGpB,kBAAYA,KAAK,GAAG;AAHA,KAArB;AAKA;;AAED,QAAME,OAAO,GAAG,yBACf,wBADe,EAEfR,SAFe,EAGfO,kBAHe,CAAhB;AAKA,QAAME,eAAe,GAAG,yBAAY,kCAAZ,EAAgD;AACvE,wBAAoBN;AADmD,GAAhD,CAAxB;AAGA,SACC,8DAAUC,eAAV;AAA4B,IAAA,SAAS,EAAGI;AAAxC,MACGH,cADH,EAEGJ,OAFH,EAGGC,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAJF,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGN;AAAb,IADD,EAEGE,KAFH,CARD,EAYG,CAAC,CAAEC,YAAH,IACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,YADH,CAbF,EAiBC;AAAK,IAAA,SAAS,EAAGU;AAAjB,KAAqCZ,QAArC,CAjBD,CADD;AAqBA;;eAEcF,W","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useResizeObserver } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\n\n/**\n * Renders a placeholder. Normally used by blocks to render their empty state.\n *\n * @param {Object}    props                The component props.\n * @param {WPIcon}    props.icon           An icon rendered before the label.\n * @param {WPElement} props.children       Children to be rendered.\n * @param {string}    props.label          Title of the placeholder.\n * @param {string}    props.instructions   Instructions of the placeholder.\n * @param {string}    props.className      Class to set on the container div.\n * @param {Object}    props.notices        A rendered notices list.\n * @param {Object}    props.preview        Preview to be rendered in the placeholder.\n * @param {boolean}   props.isColumnLayout Whether a column layout should be used.\n *\n * @return {Object} The rendered placeholder.\n */\nfunction Placeholder( {\n\ticon,\n\tchildren,\n\tlabel,\n\tinstructions,\n\tclassName,\n\tnotices,\n\tpreview,\n\tisColumnLayout,\n\t...additionalProps\n} ) {\n\tconst [ resizeListener, { width } ] = useResizeObserver();\n\n\t// Since `useResizeObserver` will report a width of `null` until after the\n\t// first render, avoid applying any modifier classes until width is known.\n\tlet modifierClassNames;\n\tif ( typeof width === 'number' ) {\n\t\tmodifierClassNames = {\n\t\t\t'is-large': width >= 480,\n\t\t\t'is-medium': width >= 160 && width < 480,\n\t\t\t'is-small': width < 160,\n\t\t};\n\t}\n\n\tconst classes = classnames(\n\t\t'components-placeholder',\n\t\tclassName,\n\t\tmodifierClassNames\n\t);\n\tconst fieldsetClasses = classnames( 'components-placeholder__fieldset', {\n\t\t'is-column-layout': isColumnLayout,\n\t} );\n\treturn (\n\t\t<div { ...additionalProps } className={ classes }>\n\t\t\t{ resizeListener }\n\t\t\t{ notices }\n\t\t\t{ preview && (\n\t\t\t\t<div className=\"components-placeholder__preview\">\n\t\t\t\t\t{ preview }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"components-placeholder__label\">\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t{ label }\n\t\t\t</div>\n\t\t\t{ !! instructions && (\n\t\t\t\t<div className=\"components-placeholder__instructions\">\n\t\t\t\t\t{ instructions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className={ fieldsetClasses }>{ children }</div>\n\t\t</div>\n\t);\n}\n\nexport default Placeholder;\n"]}