npm - @wordpress/components - Versions diffs - 19.6.1 → 19.8.0 - Mend

@wordpress/components 19.6.1 → 19.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (514) hide show

package/build/unit-control/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.UnitControl = void 0;
 Object.defineProperty(exports, "parseQuantityAndUnitFromRawValue", {
   enumerable: true,
   get: function () {
@@ -27,14 +27,12 @@ var _lodash = require("lodash");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _i18n = require("@wordpress/i18n");
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
-var _keycodes = require("@wordpress/keycodes");
+var _i18n = require("@wordpress/i18n");
 var inputControlActionTypes = _interopRequireWildcard(require("../input-control/reducer/actions"));
-var _reducer = require("../input-control/reducer/reducer");
 var _unitControlStyles = require("./styles/unit-control-styles");
 var _unitSelectControl = _interopRequireDefault(require("./unit-select-control"));
@@ -54,9 +52,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * WordPress dependencies
  */
-function UnitControl(_ref, forwardedRef) {
-  let {
-    __unstableStateReducer: stateReducer = state => state,
+function UnforwardedUnitControl(unitControlProps, forwardedRef) {
+  const {
+    __unstableStateReducer: stateReducerProp,
     autoComplete = 'off',
     className,
     disabled = false,
@@ -65,18 +63,28 @@ function UnitControl(_ref, forwardedRef) {
     isResetValueOnUnitChange = false,
     isUnitSelectTabbable = true,
     label,
-    onChange = _lodash.noop,
-    onUnitChange = _lodash.noop,
+    onChange: onChangeProp,
+    onUnitChange,
     size = 'default',
     style,
     unit: unitProp,
     units: unitsProp = _utils.CSS_UNITS,
     value: valueProp,
+    onBlur: onBlurProp,
     ...props
-  } = _ref;
-  // The `value` prop, in theory, should not be `null`, but the following line
+  } = unitControlProps;
+  if ('unit' in unitControlProps) {
+    (0, _deprecated.default)('UnitControl unit prop', {
+      since: '5.6',
+      hint: 'The unit should be provided within the `value` prop.',
+      version: '6.2'
+    });
+  } // The `value` prop, in theory, should not be `null`, but the following line
   // ensures it fallback to `undefined` in case a consumer of `UnitControl`
   // still passes `null` as a `value`.
   const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined;
   const units = (0, _element.useMemo)(() => (0, _utils.getUnitsWithCurrentUnit)(nonNullValueProp, unitProp, unitsProp), [nonNullValueProp, unitProp, unitsProp]);
   const [parsedQuantity, parsedUnit] = (0, _utils.getParsedQuantityAndUnit)(nonNullValueProp, unitProp, units);
@@ -85,7 +93,9 @@ function UnitControl(_ref, forwardedRef) {
     fallback: ''
   });
   (0, _element.useEffect)(() => {
-    setUnit(parsedUnit);
+    if (parsedUnit !== undefined) {
+      setUnit(parsedUnit);
+    }
   }, [parsedUnit]); // Stores parsed value for hand-off in state reducer.
   const refParsedQuantity = (0, _element.useRef)(undefined);
@@ -93,7 +103,7 @@ function UnitControl(_ref, forwardedRef) {
   const handleOnQuantityChange = (nextQuantityValue, changeProps) => {
     if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) {
-      onChange('', changeProps);
+      onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp('', changeProps);
       return;
     }
     /*
@@ -103,7 +113,7 @@ function UnitControl(_ref, forwardedRef) {
     const onChangeValue = (0, _utils.getValidParsedQuantityAndUnit)(nextQuantityValue, units, parsedQuantity, unit).join('');
-    onChange(onChangeValue, changeProps);
+    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(onChangeValue, changeProps);
   };
   const handleOnUnitChange = (nextUnitValue, changeProps) => {
@@ -116,8 +126,8 @@ function UnitControl(_ref, forwardedRef) {
       nextValue = `${data.default}${nextUnitValue}`;
     }
-    onChange(nextValue, changeProps);
-    onUnitChange(nextUnitValue, changeProps);
+    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(nextValue, changeProps);
+    onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(nextUnitValue, changeProps);
     setUnit(nextUnitValue);
   };
@@ -136,20 +146,23 @@ function UnitControl(_ref, forwardedRef) {
         event,
         data
       };
-      onChange(`${validParsedQuantity !== null && validParsedQuantity !== void 0 ? validParsedQuantity : ''}${validParsedUnit}`, changeProps);
-      onUnitChange(validParsedUnit, changeProps);
+      onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(`${validParsedQuantity !== null && validParsedQuantity !== void 0 ? validParsedQuantity : ''}${validParsedUnit}`, changeProps);
+      onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(validParsedUnit, changeProps);
       setUnit(validParsedUnit);
     }
   };
-  const handleOnBlur = mayUpdateUnit;
+  const handleOnBlur = event => {
+    mayUpdateUnit(event);
+    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);
+  };
   const handleOnKeyDown = event => {
     const {
-      keyCode
+      key
     } = event;
-    if (keyCode === _keycodes.ENTER) {
+    if (key === 'Enter') {
       mayUpdateUnit(event);
     }
   };
@@ -165,23 +178,35 @@ function UnitControl(_ref, forwardedRef) {
   const unitControlStateReducer = (state, action) => {
+    const nextState = { ...state
+    };
     /*
      * On commits (when pressing ENTER and on blur if
      * isPressEnterToChange is true), if a parse has been performed
      * then use that result to update the state.
      */
     if (action.type === inputControlActionTypes.COMMIT) {
       if (refParsedQuantity.current !== undefined) {
         var _refParsedQuantity$cu;
-        state.value = ((_refParsedQuantity$cu = refParsedQuantity.current) !== null && _refParsedQuantity$cu !== void 0 ? _refParsedQuantity$cu : '').toString();
+        nextState.value = ((_refParsedQuantity$cu = refParsedQuantity.current) !== null && _refParsedQuantity$cu !== void 0 ? _refParsedQuantity$cu : '').toString();
         refParsedQuantity.current = undefined;
       }
     }
-    return state;
+    return nextState;
   };
+  let stateReducer = unitControlStateReducer;
+  if (stateReducerProp) {
+    stateReducer = (state, action) => {
+      const baseState = unitControlStateReducer(state, action);
+      return stateReducerProp(baseState, action);
+    };
+  }
   const inputSuffix = !disableUnits ? (0, _element.createElement)(_unitSelectControl.default, {
     "aria-label": (0, _i18n.__)('Select unit'),
     disabled: disabled,
@@ -189,7 +214,8 @@ function UnitControl(_ref, forwardedRef) {
     onChange: handleOnUnitChange,
     size: size,
     unit: unit,
-    units: units
+    units: units,
+    onBlur: onBlurProp
   }) : null;
   let step = props.step;
   /*
@@ -225,11 +251,11 @@ function UnitControl(_ref, forwardedRef) {
     suffix: inputSuffix,
     value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '',
     step: step,
-    __unstableStateReducer: (0, _reducer.composeStateReducers)(unitControlStateReducer, stateReducer)
+    __unstableStateReducer: stateReducer
   })));
 }
 /**
- * `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).
+ * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
  *
  *
  * @example
@@ -246,7 +272,8 @@ function UnitControl(_ref, forwardedRef) {
  */
-const ForwardedUnitControl = (0, _element.forwardRef)(UnitControl);
-var _default = ForwardedUnitControl;
+const UnitControl = (0, _element.forwardRef)(UnforwardedUnitControl);
+exports.UnitControl = UnitControl;
+var _default = UnitControl;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/unit-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnitControl","forwardedRef","__unstableStateReducer","stateReducer","state","autoComplete","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","noop","onUnitChange","size","style","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","props","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","keyCode","ENTER","unitControlStateReducer","action","type","inputControlActionTypes","COMMIT","toString","inputSuffix","step","activeUnit","ForwardedUnitControl"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n\tChangeEvent,\n} from 'react';\nimport { noop, omit } from 'lodash';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { ENTER } from '@wordpress/keycodes';\n\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../ui/context';\nimport as inputControlActionTypes from '../input-control/reducer/actions';\nimport { composeStateReducers } from '../input-control/reducer/reducer';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnitControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\tautoComplete = 'off',\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange = noop,\n\t\tonUnitChange = noop,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\t...props\n\t}: WordPressComponentProps< UnitControlProps, 'input', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string \| undefined >(\n\t\tunitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tsetUnit( parsedUnit );\n\t}, [ parsedUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number \| undefined >( undefined );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number \| string \| undefined,\n\t\tchangeProps: { event: ChangeEvent< HTMLInputElement > }\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' \|\|\n\t\t\ttypeof nextQuantityValue === 'undefined' \|\|\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChange( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/\n\t\t Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t /\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChange( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChange( nextValue, changeProps );\n\t\tonUnitChange( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [\n\t\t\tvalidParsedQuantity,\n\t\t\tvalidParsedUnit,\n\t\t] = getValidParsedQuantityAndUnit(\n\t\t\tevent.currentTarget.value,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\tonChange(\n\t\t\t\t`${ validParsedQuantity ?? '' }${ validParsedUnit }`,\n\t\t\t\tchangeProps\n\t\t\t);\n\t\t\tonUnitChange( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = mayUpdateUnit;\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( keyCode === ENTER ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\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 state State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t /\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\t/\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t /\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tstate.value = ( refParsedQuantity.current ?? '' ).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn state;\n\t};\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t /\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\taria-label={ label }\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...omit( props, [ 'children' ] ) }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnQuantityChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ composeStateReducers(\n\t\t\t\t\tunitControlStateReducer,\n\t\t\t\t\tstateReducer\n\t\t\t\t) }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\n/\n `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).\n \n \n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const Example = () => {\n * const [ value, setValue ] = useState( '10px' );\n \n return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nconst ForwardedUnitControl = forwardRef( UnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default ForwardedUnitControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","style","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onBlur","onBlurProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","inputControlActionTypes","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n\tChangeEvent,\n\tPointerEvent,\n} from 'react';\nimport { omit } from 'lodash';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../ui/context';\nimport as inputControlActionTypes from '../input-control/reducer/actions';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string \| undefined >(\n\t\tunitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number \| undefined >( undefined );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number \| string \| undefined,\n\t\tchangeProps: {\n\t\t\tevent:\n\t\t\t\t\| ChangeEvent< HTMLInputElement >\n\t\t\t\t\| PointerEvent< HTMLInputElement >;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' \|\|\n\t\t\ttypeof nextQuantityValue === 'undefined' \|\|\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/\n\t\t Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t /\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [\n\t\t\tvalidParsedQuantity,\n\t\t\tvalidParsedUnit,\n\t\t] = getValidParsedQuantityAndUnit(\n\t\t\tevent.currentTarget.value,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\tonChangeProp?.(\n\t\t\t\t`${ validParsedQuantity ?? '' }${ validParsedUnit }`,\n\t\t\t\tchangeProps\n\t\t\t);\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\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 state State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t /\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t /\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t /\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\taria-label={ label }\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...omit( props, [ 'children' ] ) }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnQuantityChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\n/\n `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n \n \n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const Example = () => {\n * const [ value, setValue ] = useState( '10px' );\n \n return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}

package/build/unit-control/unit-select-control.js CHANGED Viewed

@@ -11,8 +11,6 @@ var _element = require("@wordpress/element");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _lodash = require("lodash");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _unitControlStyles = require("./styles/unit-control-styles");
@@ -26,7 +24,7 @@ function UnitSelectControl(_ref) {
   let {
     className,
     isUnitSelectTabbable: isTabbable = true,
-    onChange = _lodash.noop,
+    onChange,
     size = 'default',
     unit = 'px',
     units = _utils.CSS_UNITS,
@@ -45,7 +43,7 @@ function UnitSelectControl(_ref) {
       value: unitValue
     } = event.target;
     const data = units.find(option => option.value === unitValue);
-    onChange(unitValue, {
+    onChange === null || onChange === void 0 ? void 0 : onChange(unitValue, {
       event,
       data
     });

package/build/unit-control/unit-select-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/unit-control/unit-select-control.tsx"],"names":["UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","~~noop","~~size","unit","units","CSS_UNITS","props","length","handleOnChange","event","value","unitValue","target","data","find","option","classes","undefined","map","label"],"mappings":";;;;;;;;;;;;;AAGA;;~~AACA;;~~AAOA;;AACA;;~~AAZA~~;AACA;AACA;~~AAae~~,SAASA,iBAAT,OAQyD;AAAA,MAR7B;AAC1CC,IAAAA,SAD0C;AAE1CC,IAAAA,oBAAoB,EAAEC,UAAU,GAAG,IAFO;AAG1CC,IAAAA,~~QAAQ,GAAGC,YAH+B~~;AAI1CC,IAAAA,IAAI,GAAG,SAJmC;AAK1CC,IAAAA,IAAI,GAAG,IALmC;AAM1CC,IAAAA,KAAK,GAAGC,gBANkC;AAO1C,OAAGC;AAPuC,GAQ6B;;AACvE,MAAK,CAAE,qBAAUF,KAAV,CAAF,IAAuB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,MAAP,MAAkB,CAA9C,EAAkD;AACjD,WACC,4BAAC,4BAAD;AACC,MAAA,SAAS,EAAC,qCADX;AAEC,MAAA,UAAU,EAAGL;AAFd,OAIGC,IAJH,CADD;AAQA;;AAED,QAAMK,cAAc,GAAKC,KAAF,IAA+C;AACrE,UAAM;AAAEC,MAAAA,KAAK,EAAEC;AAAT,QAAuBF,KAAK,CAACG,MAAnC;AACA,UAAMC,IAAI,GAAGT,KAAK,CAACU,IAAN,CAAcC,MAAF,IAAcA,MAAM,CAACL,KAAP,KAAiBC,SAA3C,CAAb;~~AAEAX~~,IAAAA,QAAQ,~~CAAEW~~,~~SAAF~~,~~EAAa~~;AAAEF,MAAAA,KAAF;AAASI,MAAAA;AAAT,~~KAAb~~,CAAR;AACA,GALD;;AAOA,QAAMG,OAAO,GAAG,yBAAY,iCAAZ,EAA+~~CnB~~,SAA/C,CAAhB;AAEA,SACC,4BAAC,6BAAD;AACC,IAAA,SAAS,~~EAAGmB~~,OADb;AAEC,IAAA,QAAQ,EAAGR,cAFZ;AAGC,IAAA,UAAU,EAAGN,IAHd;AAIC,IAAA,QAAQ,~~EAAGH~~,UAAU,~~GAAGkB~~,SAAH,GAAe,CAAC,CAJtC;AAKC,IAAA,KAAK,EAAGd;AALT,KAMMG,KANN,GAQGF,KAAK,CAACc,GAAN,CAAaH,MAAF,IACZ;AAAQ,IAAA,KAAK,EAAGA,MAAM,CAACL,KAAvB;AAA+B,IAAA,GAAG,EAAGK,MAAM,CAACL;AAA5C,KACGK,MAAM,CAACI,KADV,CADC,CARH,CADD;AAgBA","sourcesContent":["/*\n External dependencies\n /\nimport ~~{ noop } from 'lodash';\nimport~~ classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/\n Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { UnitSelect, UnitLabel } from './styles/unit-control-styles';\nimport { CSS_UNITS, hasUnits } from './utils';\nimport type { UnitSelectControlProps } from './types';\n\nexport default function UnitSelectControl( {\n\tclassName,\n\tisUnitSelectTabbable: isTabbable = true,\n\tonChange ~~= noop~~,\n\tsize = 'default',\n\tunit = 'px',\n\tunits = CSS_UNITS,\n\t...props\n}: WordPressComponentProps< UnitSelectControlProps, 'select', false > ) {\n\tif ( ! hasUnits( units ) \|\| units?.length === 1 ) {\n\t\treturn (\n\t\t\t<UnitLabel\n\t\t\t\tclassName=\"components-unit-control__unit-label\"\n\t\t\t\tselectSize={ size }\n\t\t\t>\n\t\t\t\t{ unit }\n\t\t\t</UnitLabel>\n\t\t);\n\t}\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {\n\t\tconst { value: unitValue } = event.target;\n\t\tconst data = units.find( ( option ) => option.value === unitValue );\n\n\t\tonChange( unitValue, { event, data } );\n\t};\n\n\tconst classes = classnames( 'components-unit-control__select', className );\n\n\treturn (\n\t\t<UnitSelect\n\t\t\tclassName={ classes }\n\t\t\tonChange={ handleOnChange }\n\t\t\tselectSize={ size }\n\t\t\ttabIndex={ isTabbable ? undefined : -1 }\n\t\t\tvalue={ unit }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ units.map( ( option ) => (\n\t\t\t\t<option value={ option.value } key={ option.value }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</option>\n\t\t\t) ) }\n\t\t</UnitSelect>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/unit-control/unit-select-control.tsx"],"names":["UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","size","unit","units","CSS_UNITS","props","length","handleOnChange","event","value","unitValue","target","data","find","option","classes","undefined","map","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAOA;;AACA;;AAXA;AACA;AACA;AAYe,SAASA,iBAAT,OAQyD;AAAA,MAR7B;AAC1CC,IAAAA,SAD0C;AAE1CC,IAAAA,oBAAoB,EAAEC,UAAU,GAAG,IAFO;AAG1CC,IAAAA,QAH0C;AAI1CC,IAAAA,IAAI,GAAG,SAJmC;AAK1CC,IAAAA,IAAI,GAAG,IALmC;AAM1CC,IAAAA,KAAK,GAAGC,gBANkC;AAO1C,OAAGC;AAPuC,GAQ6B;;AACvE,MAAK,CAAE,qBAAUF,KAAV,CAAF,IAAuB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,MAAP,MAAkB,CAA9C,EAAkD;AACjD,WACC,4BAAC,4BAAD;AACC,MAAA,SAAS,EAAC,qCADX;AAEC,MAAA,UAAU,EAAGL;AAFd,OAIGC,IAJH,CADD;AAQA;;AAED,QAAMK,cAAc,GAAKC,KAAF,IAA+C;AACrE,UAAM;AAAEC,MAAAA,KAAK,EAAEC;AAAT,QAAuBF,KAAK,CAACG,MAAnC;AACA,UAAMC,IAAI,GAAGT,KAAK,CAACU,IAAN,CAAcC,MAAF,IAAcA,MAAM,CAACL,KAAP,KAAiBC,SAA3C,CAAb;AAEAV,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAIU,SAAJ,EAAe;AAAEF,MAAAA,KAAF;AAASI,MAAAA;AAAT,KAAf,CAAR;AACA,GALD;;AAOA,QAAMG,OAAO,GAAG,yBAAY,iCAAZ,EAA+ClB,SAA/C,CAAhB;AAEA,SACC,4BAAC,6BAAD;AACC,IAAA,SAAS,EAAGkB,OADb;AAEC,IAAA,QAAQ,EAAGR,cAFZ;AAGC,IAAA,UAAU,EAAGN,IAHd;AAIC,IAAA,QAAQ,EAAGF,UAAU,GAAGiB,SAAH,GAAe,CAAC,CAJtC;AAKC,IAAA,KAAK,EAAGd;AALT,KAMMG,KANN,GAQGF,KAAK,CAACc,GAAN,CAAaH,MAAF,IACZ;AAAQ,IAAA,KAAK,EAAGA,MAAM,CAACL,KAAvB;AAA+B,IAAA,GAAG,EAAGK,MAAM,CAACL;AAA5C,KACGK,MAAM,CAACI,KADV,CADC,CARH,CADD;AAgBA","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/\n Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { UnitSelect, UnitLabel } from './styles/unit-control-styles';\nimport { CSS_UNITS, hasUnits } from './utils';\nimport type { UnitSelectControlProps } from './types';\n\nexport default function UnitSelectControl( {\n\tclassName,\n\tisUnitSelectTabbable: isTabbable = true,\n\tonChange,\n\tsize = 'default',\n\tunit = 'px',\n\tunits = CSS_UNITS,\n\t...props\n}: WordPressComponentProps< UnitSelectControlProps, 'select', false > ) {\n\tif ( ! hasUnits( units ) \|\| units?.length === 1 ) {\n\t\treturn (\n\t\t\t<UnitLabel\n\t\t\t\tclassName=\"components-unit-control__unit-label\"\n\t\t\t\tselectSize={ size }\n\t\t\t>\n\t\t\t\t{ unit }\n\t\t\t</UnitLabel>\n\t\t);\n\t}\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {\n\t\tconst { value: unitValue } = event.target;\n\t\tconst data = units.find( ( option ) => option.value === unitValue );\n\n\t\tonChange?.( unitValue, { event, data } );\n\t};\n\n\tconst classes = classnames( 'components-unit-control__select', className );\n\n\treturn (\n\t\t<UnitSelect\n\t\t\tclassName={ classes }\n\t\t\tonChange={ handleOnChange }\n\t\t\tselectSize={ size }\n\t\t\ttabIndex={ isTabbable ? undefined : -1 }\n\t\t\tvalue={ unit }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ units.map( ( option ) => (\n\t\t\t\t<option value={ option.value } key={ option.value }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</option>\n\t\t\t) ) }\n\t\t</UnitSelect>\n\t);\n}\n"]}

package/build/utils/colors-values.js CHANGED Viewed

@@ -182,9 +182,11 @@ const UI = {
   textDisabled: DARK_GRAY[150],
   textDark: BASE.white,
   textLight: BASE.black
-};
+}; // Using Object.assign instead of { ...spread } syntax helps TypeScript
+// to extract the correct type defs here.
 exports.UI = UI;
-const COLORS = { ...BASE,
+const COLORS = Object.assign({}, BASE, {
   darkGray: (0, _lodash.merge)({}, DARK_GRAY, G2.darkGray),
   darkOpacity: DARK_OPACITY,
   darkOpacityLight: DARK_OPACITY_LIGHT,
@@ -196,7 +198,7 @@ const COLORS = { ...BASE,
   alert: ALERT,
   admin: ADMIN,
   ui: UI
-};
+});
 exports.COLORS = COLORS;
 var _default = COLORS;
 exports.default = _default;

package/build/utils/colors-values.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/utils/colors-values.js"],"names":["BASE","black","white","G2","blue","medium","focus","focusDark","gray","darkGray","primary","heading","mediumGray","text","lightGray","ui","secondary","tertiary","DARK_GRAY","placeholder","DARK_OPACITY","backgroundFill","DARK_OPACITY_LIGHT","LIGHT_GRAY","LIGHT_OPACITY_LIGHT","BLUE","wordpress","dark","highlight","ALERT","yellow","red","green","ADMIN","theme","themeDark10","UI","background","backgroundDisabled","border","borderHover","borderFocus","borderDisabled","borderLight","label","textDisabled","textDark","textLight","COLORS","darkOpacity","darkOpacityLight","lightGrayLight","alert","admin"],"mappings":"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~~;;AAeA~~,MAAM+C,MAAM,~~GAAG~~,~~EACrB~~,~~GAAGhD~~,~~IADkB~~;~~AAErBS~~,EAAAA,QAAQ,EAAE,mBAAO,EAAP,EAAWS,SAAX,EAAsBf,EAAE,CAACM,QAAzB,~~CAFW~~;~~AAGrBwC~~,EAAAA,WAAW,~~EAAE7B~~,~~YAHQ~~;~~AAIrB8B~~,EAAAA,gBAAgB,~~EAAE5B~~,~~kBAJG~~;~~AAKrBV~~,EAAAA,UAAU,EAAET,EAAE,CAACS,~~UALM~~;~~AAMrBJ~~,EAAAA,IAAI,EAAEL,EAAE,CAACK,~~IANY~~;~~AAOrBM~~,EAAAA,SAAS,EAAE,mBAAO,EAAP,EAAWS,UAAX,EAAuBpB,EAAE,CAACW,SAA1B,~~CAPU~~;~~AAQrBqC~~,EAAAA,cAAc,~~EAAE3B~~,~~mBARK~~;~~AASrBpB~~,EAAAA,IAAI,EAAE,mBAAO,EAAP,EAAWqB,IAAX,EAAiBtB,EAAE,CAACC,IAApB,~~CATe~~;~~AAUrBgD~~,EAAAA,KAAK,~~EAAEvB~~,~~KAVc~~;~~AAWrBwB~~,EAAAA,KAAK,~~EAAEpB~~,~~KAXc~~;~~AAYrBlB~~,EAAAA,EAAE,EAAEqB;~~AAZiB~~,CAAf;;~~eAeQY~~,M","sourcesContent":["/*\n External dependencies\n /\nimport { merge } from 'lodash';\n\n/\n Internal dependencies\n /\nimport { rgba } from './colors';\n\nexport const BASE = {\n\tblack: '#000',\n\twhite: '#fff',\n};\n\n/\n TODO: Continue to update values as \"G2\" design evolves.\n \n \"G2\" refers to the movement to advance the interface of the block editor.\n * https://github.com/WordPress/gutenberg/issues/18667\n */\nexport const G2 = {\n\tblue: {\n\t\tmedium: {\n\t\t\tfocus: '#007cba',\n\t\t\tfocusDark: '#fff',\n\t\t},\n\t},\n\tgray: {\n\t\t900: '#1e1e1e',\n\t\t700: '#757575', // Meets 4.6:1 text contrast against white.\n\t\t600: '#949494', // Meets 3:1 UI or large text contrast against white.\n\t\t400: '#ccc',\n\t\t300: '#ddd', // Used for most borders.\n\t\t200: '#e0e0e0', // Used sparingly for light borders.\n\t\t100: '#f0f0f0', // Used for light gray backgrounds.\n\t},\n\tdarkGray: {\n\t\tprimary: '#1e1e1e',\n\t\theading: '#050505',\n\t},\n\tmediumGray: {\n\t\ttext: '#757575',\n\t},\n\tlightGray: {\n\t\tui: '#949494',\n\t\tsecondary: '#ccc',\n\t\ttertiary: '#e7e8e9',\n\t},\n};\n\nexport const DARK_GRAY = {\n\t900: '#191e23',\n\t800: '#23282d',\n\t700: '#32373c',\n\t600: '#40464d',\n\t500: '#555d66', // Use this most of the time for dark items.\n\t400: '#606a73',\n\t300: '#6c7781', // Lightest gray that can be used for AA text contrast.\n\t200: '#7e8993',\n\t150: '#8d96a0', // Lightest gray that can be used for AA non-text contrast.\n\t100: '#8f98a1',\n\tplaceholder: rgba( G2.gray[ 900 ], 0.62 ),\n};\n\nexport const DARK_OPACITY = {\n\t900: rgba( '#000510', 0.9 ),\n\t800: rgba( '#00000a', 0.85 ),\n\t700: rgba( '#06060b', 0.8 ),\n\t600: rgba( '#000913', 0.75 ),\n\t500: rgba( '#0a1829', 0.7 ),\n\t400: rgba( '#0a1829', 0.65 ),\n\t300: rgba( '#0e1c2e', 0.62 ),\n\t200: rgba( '#162435', 0.55 ),\n\t100: rgba( '#223443', 0.5 ),\n\tbackgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),\n};\n\nexport const DARK_OPACITY_LIGHT = {\n\t900: rgba( '#304455', 0.45 ),\n\t800: rgba( '#425863', 0.4 ),\n\t700: rgba( '#667886', 0.35 ),\n\t600: rgba( '#7b86a2', 0.3 ),\n\t500: rgba( '#9197a2', 0.25 ),\n\t400: rgba( '#95959c', 0.2 ),\n\t300: rgba( '#829493', 0.15 ),\n\t200: rgba( '#8b8b96', 0.1 ),\n\t100: rgba( '#747474', 0.05 ),\n};\n\nexport const LIGHT_GRAY = {\n\t900: '#a2aab2',\n\t800: '#b5bcc2',\n\t700: '#ccd0d4',\n\t600: '#d7dade',\n\t500: '#e2e4e7', // Good for \"grayed\" items and borders.\n\t400: '#e8eaeb', // Good for \"readonly\" input fields and special text selection.\n\t300: '#edeff0',\n\t200: '#f3f4f5',\n\t100: '#f8f9f9',\n\tplaceholder: rgba( BASE.white, 0.65 ),\n};\n\nexport const LIGHT_OPACITY_LIGHT = {\n\t900: rgba( BASE.white, 0.5 ),\n\t800: rgba( BASE.white, 0.45 ),\n\t700: rgba( BASE.white, 0.4 ),\n\t600: rgba( BASE.white, 0.35 ),\n\t500: rgba( BASE.white, 0.3 ),\n\t400: rgba( BASE.white, 0.25 ),\n\t300: rgba( BASE.white, 0.2 ),\n\t200: rgba( BASE.white, 0.15 ),\n\t100: rgba( BASE.white, 0.1 ),\n\tbackgroundFill: rgba( LIGHT_GRAY[ 300 ], 0.8 ),\n};\n\n// Additional colors.\n// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.\n\nexport const BLUE = {\n\twordpress: {\n\t\t700: '#00669b',\n\t},\n\tdark: {\n\t\t900: '#0071a1',\n\t},\n\tmedium: {\n\t\t900: '#006589',\n\t\t800: '#00739c',\n\t\t700: '#007fac',\n\t\t600: '#008dbe',\n\t\t500: '#00a0d2',\n\t\t400: '#33b3db',\n\t\t300: '#66c6e4',\n\t\t200: '#bfe7f3',\n\t\t100: '#e5f5fa',\n\t\thighlight: '#b3e7fe',\n\t\tfocus: '#007cba',\n\t},\n};\n\nexport const ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\nexport const ADMIN = {\n\ttheme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,\n\tthemeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,\n};\n\n// Namespaced values for raw colors hex codes.\nexport const UI = {\n\ttheme: ADMIN.theme,\n\tbackground: BASE.white,\n\tbackgroundDisabled: LIGHT_GRAY[ 200 ],\n\tborder: G2.gray[ 700 ],\n\tborderHover: G2.gray[ 700 ],\n\tborderFocus: ADMIN.themeDark10,\n\tborderDisabled: G2.gray[ 400 ],\n\tborderLight: G2.gray[ 300 ],\n\tlabel: DARK_GRAY[ 500 ],\n\ttextDisabled: DARK_GRAY[ 150 ],\n\ttextDark: BASE.white,\n\ttextLight: BASE.black,\n};\n\nexport const COLORS = {\n\~~t...BASE,\n\~~tdarkGray: merge( {}, DARK_GRAY, G2.darkGray ),\n\tdarkOpacity: DARK_OPACITY,\n\tdarkOpacityLight: DARK_OPACITY_LIGHT,\n\tmediumGray: G2.mediumGray,\n\tgray: G2.gray,\n\tlightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),\n\tlightGrayLight: LIGHT_OPACITY_LIGHT,\n\tblue: merge( {}, BLUE, G2.blue ),\n\talert: ALERT,\n\tadmin: ADMIN,\n\tui: UI,\n};\n\nexport default COLORS;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/utils/colors-values.js"],"names":["BASE","black","white","G2","blue","medium","focus","focusDark","gray","darkGray","primary","heading","mediumGray","text","lightGray","ui","secondary","tertiary","DARK_GRAY","placeholder","DARK_OPACITY","backgroundFill","DARK_OPACITY_LIGHT","LIGHT_GRAY","LIGHT_OPACITY_LIGHT","BLUE","wordpress","dark","highlight","ALERT","yellow","red","green","ADMIN","theme","themeDark10","UI","background","backgroundDisabled","border","borderHover","borderFocus","borderDisabled","borderLight","label","textDisabled","textDark","textLight","COLORS","Object","assign","darkOpacity","darkOpacityLight","lightGrayLight","alert","admin"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { merge } from 'lodash';\n\n/\n Internal dependencies\n /\nimport { rgba } from './colors';\n\nexport const BASE = {\n\tblack: '#000',\n\twhite: '#fff',\n};\n\n/\n TODO: Continue to update values as \"G2\" design evolves.\n \n \"G2\" refers to the movement to advance the interface of the block editor.\n * https://github.com/WordPress/gutenberg/issues/18667\n */\nexport const G2 = {\n\tblue: {\n\t\tmedium: {\n\t\t\tfocus: '#007cba',\n\t\t\tfocusDark: '#fff',\n\t\t},\n\t},\n\tgray: {\n\t\t900: '#1e1e1e',\n\t\t700: '#757575', // Meets 4.6:1 text contrast against white.\n\t\t600: '#949494', // Meets 3:1 UI or large text contrast against white.\n\t\t400: '#ccc',\n\t\t300: '#ddd', // Used for most borders.\n\t\t200: '#e0e0e0', // Used sparingly for light borders.\n\t\t100: '#f0f0f0', // Used for light gray backgrounds.\n\t},\n\tdarkGray: {\n\t\tprimary: '#1e1e1e',\n\t\theading: '#050505',\n\t},\n\tmediumGray: {\n\t\ttext: '#757575',\n\t},\n\tlightGray: {\n\t\tui: '#949494',\n\t\tsecondary: '#ccc',\n\t\ttertiary: '#e7e8e9',\n\t},\n};\n\nexport const DARK_GRAY = {\n\t900: '#191e23',\n\t800: '#23282d',\n\t700: '#32373c',\n\t600: '#40464d',\n\t500: '#555d66', // Use this most of the time for dark items.\n\t400: '#606a73',\n\t300: '#6c7781', // Lightest gray that can be used for AA text contrast.\n\t200: '#7e8993',\n\t150: '#8d96a0', // Lightest gray that can be used for AA non-text contrast.\n\t100: '#8f98a1',\n\tplaceholder: rgba( G2.gray[ 900 ], 0.62 ),\n};\n\nexport const DARK_OPACITY = {\n\t900: rgba( '#000510', 0.9 ),\n\t800: rgba( '#00000a', 0.85 ),\n\t700: rgba( '#06060b', 0.8 ),\n\t600: rgba( '#000913', 0.75 ),\n\t500: rgba( '#0a1829', 0.7 ),\n\t400: rgba( '#0a1829', 0.65 ),\n\t300: rgba( '#0e1c2e', 0.62 ),\n\t200: rgba( '#162435', 0.55 ),\n\t100: rgba( '#223443', 0.5 ),\n\tbackgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),\n};\n\nexport const DARK_OPACITY_LIGHT = {\n\t900: rgba( '#304455', 0.45 ),\n\t800: rgba( '#425863', 0.4 ),\n\t700: rgba( '#667886', 0.35 ),\n\t600: rgba( '#7b86a2', 0.3 ),\n\t500: rgba( '#9197a2', 0.25 ),\n\t400: rgba( '#95959c', 0.2 ),\n\t300: rgba( '#829493', 0.15 ),\n\t200: rgba( '#8b8b96', 0.1 ),\n\t100: rgba( '#747474', 0.05 ),\n};\n\nexport const LIGHT_GRAY = {\n\t900: '#a2aab2',\n\t800: '#b5bcc2',\n\t700: '#ccd0d4',\n\t600: '#d7dade',\n\t500: '#e2e4e7', // Good for \"grayed\" items and borders.\n\t400: '#e8eaeb', // Good for \"readonly\" input fields and special text selection.\n\t300: '#edeff0',\n\t200: '#f3f4f5',\n\t100: '#f8f9f9',\n\tplaceholder: rgba( BASE.white, 0.65 ),\n};\n\nexport const LIGHT_OPACITY_LIGHT = {\n\t900: rgba( BASE.white, 0.5 ),\n\t800: rgba( BASE.white, 0.45 ),\n\t700: rgba( BASE.white, 0.4 ),\n\t600: rgba( BASE.white, 0.35 ),\n\t500: rgba( BASE.white, 0.3 ),\n\t400: rgba( BASE.white, 0.25 ),\n\t300: rgba( BASE.white, 0.2 ),\n\t200: rgba( BASE.white, 0.15 ),\n\t100: rgba( BASE.white, 0.1 ),\n\tbackgroundFill: rgba( LIGHT_GRAY[ 300 ], 0.8 ),\n};\n\n// Additional colors.\n// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.\n\nexport const BLUE = {\n\twordpress: {\n\t\t700: '#00669b',\n\t},\n\tdark: {\n\t\t900: '#0071a1',\n\t},\n\tmedium: {\n\t\t900: '#006589',\n\t\t800: '#00739c',\n\t\t700: '#007fac',\n\t\t600: '#008dbe',\n\t\t500: '#00a0d2',\n\t\t400: '#33b3db',\n\t\t300: '#66c6e4',\n\t\t200: '#bfe7f3',\n\t\t100: '#e5f5fa',\n\t\thighlight: '#b3e7fe',\n\t\tfocus: '#007cba',\n\t},\n};\n\nexport const ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\nexport const ADMIN = {\n\ttheme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,\n\tthemeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,\n};\n\n// Namespaced values for raw colors hex codes.\nexport const UI = {\n\ttheme: ADMIN.theme,\n\tbackground: BASE.white,\n\tbackgroundDisabled: LIGHT_GRAY[ 200 ],\n\tborder: G2.gray[ 700 ],\n\tborderHover: G2.gray[ 700 ],\n\tborderFocus: ADMIN.themeDark10,\n\tborderDisabled: G2.gray[ 400 ],\n\tborderLight: G2.gray[ 300 ],\n\tlabel: DARK_GRAY[ 500 ],\n\ttextDisabled: DARK_GRAY[ 150 ],\n\ttextDark: BASE.white,\n\ttextLight: BASE.black,\n};\n\n// Using Object.assign instead of { ...spread } syntax helps TypeScript\n// to extract the correct type defs here.\nexport const COLORS = Object.assign( {}, BASE, {\n\tdarkGray: merge( {}, DARK_GRAY, G2.darkGray ),\n\tdarkOpacity: DARK_OPACITY,\n\tdarkOpacityLight: DARK_OPACITY_LIGHT,\n\tmediumGray: G2.mediumGray,\n\tgray: G2.gray,\n\tlightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),\n\tlightGrayLight: LIGHT_OPACITY_LIGHT,\n\tblue: merge( {}, BLUE, G2.blue ),\n\talert: ALERT,\n\tadmin: ADMIN,\n\tui: UI,\n} );\n\nexport default COLORS;\n"]}

package/build/utils/config-values.js CHANGED Viewed

@@ -36,10 +36,14 @@ const CONTROL_PROPS = {
 const TOGGLE_GROUP_CONTROL_PROPS = {
   toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
   toggleGroupControlBorderColor: _colorsValues.COLORS.ui.border,
+  toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
+  toggleGroupControlBackdropBorderColor: _colorsValues.COLORS.ui.border,
+  toggleGroupControlBackdropBoxShadow: 'transparent',
   toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor
-};
-var _default = { ...CONTROL_PROPS,
-  ...TOGGLE_GROUP_CONTROL_PROPS,
+}; // Using Object.assign to avoid creating circular references when emitting
+// TypeScript type declarations.
+var _default = Object.assign({}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
   colorDivider: 'rgba(0, 0, 0, 0.1)',
   colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
   colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
@@ -84,6 +88,7 @@ var _default = { ...CONTROL_PROPS,
   transitionDurationFastest: '100ms',
   transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
   transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'
-};
+});
 exports.default = _default;
 //# sourceMappingURL=config-values.js.map

package/build/utils/config-values.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/utils/config-values.js"],"names":["CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","COLORS","white","controlTextActiveColor","ui","theme","controlPaddingX","controlPaddingXLarge","controlPaddingXSmall","controlBackgroundColor","controlBorderRadius","controlBorderColor","gray","controlBoxShadow","controlBorderColorHover","controlBoxShadowFocus","admin","controlDestructiveBorderColor","alert","red","controlHeight","controlHeightXSmall","controlHeightSmall","controlHeightLarge","controlHeightXLarge","TOGGLE_GROUP_CONTROL_PROPS","toggleGroupControlBackgroundColor","toggleGroupControlBorderColor","border","toggleGroupControlButtonColorActive","colorDivider","colorScrollbarThumb","colorScrollbarThumbHover","colorScrollbarTrack","elevationIntensity","radiusBlockUi","borderWidth","borderWidthFocus","borderWidthTab","spinnerSize","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeH5","fontSizeH6","fontSizeInputMobile","fontSizeMobile","fontSizeSmall","fontSizeXSmall","fontLineHeightBase","fontWeight","fontWeightHeading","gridBase","cardBorderRadius","cardPaddingXSmall","cardPaddingSmall","cardPaddingMedium","cardPaddingLarge","surfaceBackgroundColor","surfaceBackgroundSubtleColor","surfaceBackgroundTintColor","surfaceBorderColor","surfaceBorderBoldColor","surfaceBorderSubtleColor","surfaceBackgroundTertiaryColor","surfaceColor","transitionDuration","transitionDurationFast","transitionDurationFaster","transitionDurationFastest","transitionTimingFunction","transitionTimingFunctionControl"],"mappings":";;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,MAAMA,cAAc,GAAG,MAAvB;AACA,MAAMC,iBAAiB,GAAG,MAA1B;AAEA,MAAMC,aAAa,GAAG;AACrBC,EAAAA,mBAAmB,EAAEC,qBAAOC,KADP;AAErBC,EAAAA,sBAAsB,EAAEF,qBAAOG,EAAP,CAAUC,KAFb;AAGrBC,EAAAA,eAAe,EAAER,iBAHI;AAIrBS,EAAAA,oBAAoB,EAAG,QAAQT,iBAAmB,YAJ7B;AAKrBU,EAAAA,oBAAoB,EAAG,QAAQV,iBAAmB,YAL7B;AAMrBW,EAAAA,sBAAsB,EAAER,qBAAOC,KANV;AAOrBQ,EAAAA,mBAAmB,EAAE,KAPA;AAQrBC,EAAAA,kBAAkB,EAAEV,qBAAOW,IAAP,CAAa,GAAb,CARC;AASrBC,EAAAA,gBAAgB,EAAE,aATG;AAUrBC,EAAAA,uBAAuB,EAAEb,qBAAOW,IAAP,CAAa,GAAb,CAVJ;AAWrBG,EAAAA,qBAAqB,EAAG,eAAed,qBAAOe,KAAP,CAAaX,KAAO,EAXtC;AAYrBY,EAAAA,6BAA6B,EAAEhB,qBAAOiB,KAAP,CAAaC,GAZvB;AAarBC,EAAAA,aAAa,EAAEvB,cAbM;AAcrBwB,EAAAA,mBAAmB,EAAG,SAASxB,cAAgB,UAd1B;AAerByB,EAAAA,kBAAkB,EAAG,SAASzB,cAAgB,UAfzB;AAgBrB0B,EAAAA,kBAAkB,EAAG,SAAS1B,cAAgB,UAhBzB;AAiBrB2B,EAAAA,mBAAmB,EAAG,SAAS3B,cAAgB;AAjB1B,CAAtB;~~AAmBA~~,MAAM4B,0BAA0B,GAAG;AAClCC,EAAAA,iCAAiC,EAAE3B,aAAa,CAACU,sBADf;AAElCkB,EAAAA,6BAA6B,EAAE1B,qBAAOG,EAAP,CAAUwB,MAFP;AAGlCC,EAAAA,mCAAmC,~~EAAE9B~~,aAAa,CAACU;~~AAHjB~~,CAAnC;~~eAMe~~,~~EACd~~,~~GAAGV~~,~~aADW;AAEd~~,~~KAAG0B~~,~~0BAFW~~;~~AAGdK~~,EAAAA,YAAY,EAAE,~~oBAHA~~;~~AAIdC~~,EAAAA,mBAAmB,EAAE,~~oBAJP~~;~~AAKdC~~,EAAAA,wBAAwB,EAAE,~~oBALZ~~;~~AAMdC~~,EAAAA,mBAAmB,EAAE,~~qBANP~~;~~AAOdC~~,EAAAA,kBAAkB,EAAE,~~CAPN~~;~~AAQdC~~,EAAAA,aAAa,EAAE,~~KARD~~;~~AASdC~~,EAAAA,WAAW,EAAE,~~KATC~~;~~AAUdC~~,EAAAA,gBAAgB,EAAE,~~OAVJ~~;~~AAWdC~~,EAAAA,cAAc,EAAE,~~KAXF~~;~~AAYdC~~,EAAAA,WAAW,EAAE,~~EAZC~~;~~AAadC~~,EAAAA,QAAQ,EAAE,~~MAbI~~;~~AAcdC~~,EAAAA,UAAU,EAAE,~~mBAdE~~;~~AAedC~~,EAAAA,UAAU,EAAE,~~mBAfE~~;~~AAgBdC~~,EAAAA,UAAU,EAAE,~~mBAhBE~~;~~AAiBdC~~,EAAAA,UAAU,EAAE,~~mBAjBE~~;~~AAkBdC~~,EAAAA,UAAU,EAAE,~~MAlBE~~;~~AAmBdC~~,EAAAA,UAAU,EAAE,~~kBAnBE~~;~~AAoBdC~~,EAAAA,mBAAmB,EAAE,~~MApBP~~;~~AAqBdC~~,EAAAA,cAAc,EAAE,~~MArBF~~;~~AAsBdC~~,EAAAA,aAAa,EAAE,~~mBAtBD~~;~~AAuBdC~~,EAAAA,cAAc,EAAE,~~mBAvBF~~;~~AAwBdC~~,EAAAA,kBAAkB,EAAE,~~KAxBN~~;~~AAyBdC~~,EAAAA,UAAU,EAAE,~~QAzBE~~;~~AA0BdC~~,EAAAA,iBAAiB,EAAE,~~KA1BL~~;~~AA2BdC~~,EAAAA,QAAQ,EAAE,~~KA3BI~~;~~AA4BdC~~,EAAAA,gBAAgB,EAAE,~~KA5BJ~~;~~AA6BdC~~,EAAAA,iBAAiB,EAAG,GAAG,kBAAO,CAAP,CAAY,~~EA7BrB~~;~~AA8BdC~~,EAAAA,gBAAgB,EAAG,GAAG,kBAAO,CAAP,CAAY,~~EA9BpB~~;~~AA+BdC~~,EAAAA,iBAAiB,EAAG,GAAG,kBAAO,CAAP,CAAY,IAAI,kBAAO,CAAP,CAAY,~~EA/BrC~~;~~AAgCdC~~,EAAAA,gBAAgB,EAAG,GAAG,kBAAO,CAAP,CAAY,IAAI,kBAAO,CAAP,CAAY,~~EAhCpC~~;~~AAiCdC~~,EAAAA,sBAAsB,~~EAAE3D~~,qBAAOC,~~KAjCjB~~;~~AAkCd2D~~,EAAAA,4BAA4B,EAAE,~~SAlChB~~;~~AAmCdC~~,EAAAA,0BAA0B,EAAE,~~SAnCd~~;~~AAoCdC~~,EAAAA,kBAAkB,EAAE,~~oBApCN~~;~~AAqCdC~~,EAAAA,sBAAsB,EAAE,~~qBArCV~~;~~AAsCdC~~,EAAAA,wBAAwB,EAAE,~~qBAtCZ~~;~~AAuCdC~~,EAAAA,8BAA8B,~~EAAEjE~~,qBAAOC,~~KAvCzB~~;~~AAwCdiE~~,EAAAA,YAAY,~~EAAElE~~,qBAAOC,~~KAxCP~~;~~AAyCdkE~~,EAAAA,kBAAkB,EAAE,~~OAzCN~~;~~AA0CdC~~,EAAAA,sBAAsB,EAAE,~~OA1CV~~;~~AA2CdC~~,EAAAA,wBAAwB,EAAE,~~OA3CZ~~;~~AA4CdC~~,EAAAA,yBAAyB,EAAE,~~OA5Cb~~;~~AA6CdC~~,EAAAA,wBAAwB,EAAE,~~mCA7CZ~~;~~AA8CdC~~,EAAAA,+BAA+B,EAAE;~~AA9CnB~~,C","sourcesContent":["/*\n Internal dependencies\n /\nimport { space } from '../ui/utils/space';\nimport { COLORS } from './colors-values';\n\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PADDING_X = '12px';\n\nconst CONTROL_PROPS = {\n\tcontrolSurfaceColor: COLORS.white,\n\tcontrolTextActiveColor: COLORS.ui.theme,\n\tcontrolPaddingX: CONTROL_PADDING_X,\n\tcontrolPaddingXLarge: `calc(${ CONTROL_PADDING_X } 1.3334)`,\n\tcontrolPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,\n\tcontrolBackgroundColor: COLORS.white,\n\tcontrolBorderRadius: '2px',\n\tcontrolBorderColor: COLORS.gray[ 700 ],\n\tcontrolBoxShadow: 'transparent',\n\tcontrolBorderColorHover: COLORS.gray[ 700 ],\n\tcontrolBoxShadowFocus: `0 0 0 0.5px ${ COLORS.admin.theme }`,\n\tcontrolDestructiveBorderColor: COLORS.alert.red,\n\tcontrolHeight: CONTROL_HEIGHT,\n\tcontrolHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,\n\tcontrolHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,\n\tcontrolHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,\n\tcontrolHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,\n};\nconst TOGGLE_GROUP_CONTROL_PROPS = {\n\ttoggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,\n\ttoggleGroupControlBorderColor: COLORS.ui.border,\n\ttoggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,\n};\n\nexport default {~~\n\t...~~CONTROL_PROPS~~,\n~~\~~t...TOGGLE_GROUP_CONTROL_PROPS,\~~n\tcolorDivider: 'rgba(0, 0, 0, 0.1)',\n\tcolorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n\tcolorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n\tcolorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n\televationIntensity: 1,\n\tradiusBlockUi: '2px',\n\tborderWidth: '1px',\n\tborderWidthFocus: '1.5px',\n\tborderWidthTab: '4px',\n\tspinnerSize: 16,\n\tfontSize: '13px',\n\tfontSizeH1: 'calc(2.44 * 13px)',\n\tfontSizeH2: 'calc(1.95 * 13px)',\n\tfontSizeH3: 'calc(1.56 * 13px)',\n\tfontSizeH4: 'calc(1.25 * 13px)',\n\tfontSizeH5: '13px',\n\tfontSizeH6: 'calc(0.8 * 13px)',\n\tfontSizeInputMobile: '16px',\n\tfontSizeMobile: '15px',\n\tfontSizeSmall: 'calc(0.92 * 13px)',\n\tfontSizeXSmall: 'calc(0.75 * 13px)',\n\tfontLineHeightBase: '1.2',\n\tfontWeight: 'normal',\n\tfontWeightHeading: '600',\n\tgridBase: '4px',\n\tcardBorderRadius: '2px',\n\tcardPaddingXSmall: `${ space( 2 ) }`,\n\tcardPaddingSmall: `${ space( 4 ) }`,\n\tcardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,\n\tcardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,\n\tsurfaceBackgroundColor: COLORS.white,\n\tsurfaceBackgroundSubtleColor: '#F3F3F3',\n\tsurfaceBackgroundTintColor: '#F5F5F5',\n\tsurfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n\tsurfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n\tsurfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n\tsurfaceBackgroundTertiaryColor: COLORS.white,\n\tsurfaceColor: COLORS.white,\n\ttransitionDuration: '200ms',\n\ttransitionDurationFast: '160ms',\n\ttransitionDurationFaster: '120ms',\n\ttransitionDurationFastest: '100ms',\n\ttransitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n\ttransitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',\n};\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/utils/config-values.js"],"names":["CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","COLORS","white","controlTextActiveColor","ui","theme","controlPaddingX","controlPaddingXLarge","controlPaddingXSmall","controlBackgroundColor","controlBorderRadius","controlBorderColor","gray","controlBoxShadow","controlBorderColorHover","controlBoxShadowFocus","admin","controlDestructiveBorderColor","alert","red","controlHeight","controlHeightXSmall","controlHeightSmall","controlHeightLarge","controlHeightXLarge","TOGGLE_GROUP_CONTROL_PROPS","toggleGroupControlBackgroundColor","toggleGroupControlBorderColor","border","toggleGroupControlBackdropBackgroundColor","toggleGroupControlBackdropBorderColor","toggleGroupControlBackdropBoxShadow","toggleGroupControlButtonColorActive","Object","assign","colorDivider","colorScrollbarThumb","colorScrollbarThumbHover","colorScrollbarTrack","elevationIntensity","radiusBlockUi","borderWidth","borderWidthFocus","borderWidthTab","spinnerSize","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeH5","fontSizeH6","fontSizeInputMobile","fontSizeMobile","fontSizeSmall","fontSizeXSmall","fontLineHeightBase","fontWeight","fontWeightHeading","gridBase","cardBorderRadius","cardPaddingXSmall","cardPaddingSmall","cardPaddingMedium","cardPaddingLarge","surfaceBackgroundColor","surfaceBackgroundSubtleColor","surfaceBackgroundTintColor","surfaceBorderColor","surfaceBorderBoldColor","surfaceBorderSubtleColor","surfaceBackgroundTertiaryColor","surfaceColor","transitionDuration","transitionDurationFast","transitionDurationFaster","transitionDurationFastest","transitionTimingFunction","transitionTimingFunctionControl"],"mappings":"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","sourcesContent":["/*\n Internal dependencies\n /\nimport { space } from '../ui/utils/space';\nimport { COLORS } from './colors-values';\n\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PADDING_X = '12px';\n\nconst CONTROL_PROPS = {\n\tcontrolSurfaceColor: COLORS.white,\n\tcontrolTextActiveColor: COLORS.ui.theme,\n\tcontrolPaddingX: CONTROL_PADDING_X,\n\tcontrolPaddingXLarge: `calc(${ CONTROL_PADDING_X } 1.3334)`,\n\tcontrolPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,\n\tcontrolBackgroundColor: COLORS.white,\n\tcontrolBorderRadius: '2px',\n\tcontrolBorderColor: COLORS.gray[ 700 ],\n\tcontrolBoxShadow: 'transparent',\n\tcontrolBorderColorHover: COLORS.gray[ 700 ],\n\tcontrolBoxShadowFocus: `0 0 0 0.5px ${ COLORS.admin.theme }`,\n\tcontrolDestructiveBorderColor: COLORS.alert.red,\n\tcontrolHeight: CONTROL_HEIGHT,\n\tcontrolHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,\n\tcontrolHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,\n\tcontrolHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,\n\tcontrolHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,\n};\n\nconst TOGGLE_GROUP_CONTROL_PROPS = {\n\ttoggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,\n\ttoggleGroupControlBorderColor: COLORS.ui.border,\n\ttoggleGroupControlBackdropBackgroundColor:\n\t\tCONTROL_PROPS.controlSurfaceColor,\n\ttoggleGroupControlBackdropBorderColor: COLORS.ui.border,\n\ttoggleGroupControlBackdropBoxShadow: 'transparent',\n\ttoggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {\n\tcolorDivider: 'rgba(0, 0, 0, 0.1)',\n\tcolorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n\tcolorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n\tcolorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n\televationIntensity: 1,\n\tradiusBlockUi: '2px',\n\tborderWidth: '1px',\n\tborderWidthFocus: '1.5px',\n\tborderWidthTab: '4px',\n\tspinnerSize: 16,\n\tfontSize: '13px',\n\tfontSizeH1: 'calc(2.44 * 13px)',\n\tfontSizeH2: 'calc(1.95 * 13px)',\n\tfontSizeH3: 'calc(1.56 * 13px)',\n\tfontSizeH4: 'calc(1.25 * 13px)',\n\tfontSizeH5: '13px',\n\tfontSizeH6: 'calc(0.8 * 13px)',\n\tfontSizeInputMobile: '16px',\n\tfontSizeMobile: '15px',\n\tfontSizeSmall: 'calc(0.92 * 13px)',\n\tfontSizeXSmall: 'calc(0.75 * 13px)',\n\tfontLineHeightBase: '1.2',\n\tfontWeight: 'normal',\n\tfontWeightHeading: '600',\n\tgridBase: '4px',\n\tcardBorderRadius: '2px',\n\tcardPaddingXSmall: `${ space( 2 ) }`,\n\tcardPaddingSmall: `${ space( 4 ) }`,\n\tcardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,\n\tcardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,\n\tsurfaceBackgroundColor: COLORS.white,\n\tsurfaceBackgroundSubtleColor: '#F3F3F3',\n\tsurfaceBackgroundTintColor: '#F5F5F5',\n\tsurfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n\tsurfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n\tsurfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n\tsurfaceBackgroundTertiaryColor: COLORS.white,\n\tsurfaceColor: COLORS.white,\n\ttransitionDuration: '200ms',\n\ttransitionDurationFast: '160ms',\n\ttransitionDurationFaster: '120ms',\n\ttransitionDurationFastest: '100ms',\n\ttransitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n\ttransitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',\n} );\n"]}

package/build-module/base-control/index.js CHANGED Viewed

@@ -4,38 +4,33 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
 /**
  * Internal dependencies
  */
 import { VisuallyHidden } from '../visually-hidden';
 import { Wrapper, StyledField, StyledLabel, StyledHelp, StyledVisualLabel } from './styles/base-control-styles';
 /**
- * @typedef Props
- * @property {string}                    [id]                  The id of the element to which labels and help text are being generated.
- *                                                             That element should be passed as a child.
- * @property {import('react').ReactNode} help                  If this property is added, a help text will be
- *                                                             generated using help property as the content.
- * @property {import('react').ReactNode} [label]               If this property is added, a label will be generated
- *                                                             using label property as the content.
- * @property {boolean}                   [hideLabelFromVision] If true, the label will only be visible to screen readers.
- * @property {string}                    [className]           The class that will be added with "components-base-control" to the
- *                                                             classes of the wrapper div. If no className is passed only
- *                                                             components-base-control is used.
- * @property {import('react').ReactNode} [children]            The content to be displayed within
- *                                                             the BaseControl.
- */
-/**
- * @param {Props} props
- * @return {JSX.Element} Element
+ * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
+ *
+ * @example
+ * // Render a `BaseControl` for a textarea input
+ * import { BaseControl } from '@wordpress/components';
+ *
+ * // The `id` prop is necessary to accessibly associate the label with the textarea
+ * const MyBaseControl = () => (
+ *   <BaseControl id="textarea-1" label="Text" help="Enter some text" __nextHasNoMarginBottom={ true }>
+ *     <textarea id="textarea-1" />
+ *   </BaseControl>
+ * );
  */
-function BaseControl(_ref) {
+export const BaseControl = _ref => {
   let {
+    __nextHasNoMarginBottom = false,
     id,
     label,
-    hideLabelFromVision,
+    hideLabelFromVision = false,
     help,
     className,
     children
@@ -43,7 +38,9 @@ function BaseControl(_ref) {
   return createElement(Wrapper, {
     className: classnames('components-base-control', className)
   }, createElement(StyledField, {
-    className: "components-base-control__field"
+    className: "components-base-control__field" // TODO: Official deprecation for this should start after all internal usages have been migrated
+    ,
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
   }, label && id && (hideLabelFromVision ? createElement(VisuallyHidden, {
     as: "label",
     htmlFor: id
@@ -54,22 +51,29 @@ function BaseControl(_ref) {
     as: "label"
   }, label) : createElement(BaseControl.VisualLabel, null, label)), children), !!help && createElement(StyledHelp, {
     id: id ? id + '__help' : undefined,
-    className: "components-base-control__help"
+    className: "components-base-control__help",
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
   }, help));
-}
-/**
- * @typedef VisualLabelProps
- * @property {string}                    [className] Class name
- * @property {import('react').ReactNode} [children]  Children
- */
+};
 /**
- * @param {VisualLabelProps} Props
- * @return {JSX.Element} Element
+ * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+ *
+ * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+ * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+ * otherwise use if the `label` prop was passed.
+ *
+ * @example
+ * import { BaseControl } from '@wordpress/components';
+ *
+ * const MyBaseControl = () => (
+ * 	<BaseControl help="This button is already accessibly labeled.">
+ * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
+ * 		<Button>Select an author</Button>
+ * 	</BaseControl>
+ * );
  */
-BaseControl.VisualLabel = _ref2 => {
+export const VisualLabel = _ref2 => {
   let {
     className,
     children
@@ -78,6 +82,6 @@ BaseControl.VisualLabel = _ref2 => {
     className: classnames('components-base-control__label', className)
   }, children);
 };
+BaseControl.VisualLabel = VisualLabel;
 export default BaseControl;
 //# sourceMappingURL=index.js.map