@wordpress/components 19.7.0 → 19.9.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["omit","classnames","deprecated","forwardRef","useMemo","useRef","useEffect","__","inputControlActionTypes","Root","ValueInput","UnitSelectControl","CSS_UNITS","getParsedQuantityAndUnit","getUnitsWithCurrentUnit","getValidParsedQuantityAndUnit","useControlledState","UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","style","unit","unitProp","units","unitsProp","value","valueProp","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","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits"],"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\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 > = mayUpdateUnit;\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/>\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"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["omit","classnames","deprecated","forwardRef","useMemo","useRef","useEffect","__","inputControlActionTypes","Root","ValueInput","UnitSelectControl","CSS_UNITS","getParsedQuantityAndUnit","getUnitsWithCurrentUnit","getValidParsedQuantityAndUnit","useControlledState","UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","style","unit","unitProp","units","unitsProp","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","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits"],"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-module/utils/colors-values.js

@@ -7,18 +7,11 @@ import { merge } from 'lodash';
  */
 
 import { rgba } from './colors';
-export const BASE = {
+const BASE = {
   black: '#000',
   white: '#fff'
 };
-/**
- * TODO: Continue to update values as "G2" design evolves.
- *
- * "G2" refers to the movement to advance the interface of the block editor.
- * https://github.com/WordPress/gutenberg/issues/18667
- */
-
-export const G2 = {
+const G2 = {
   blue: {
     medium: {
       focus: '#007cba',
@@ -39,10 +32,6 @@ export const G2 = {
     100: '#f0f0f0' // Used for light gray backgrounds.
 
   },
-  darkGray: {
-    primary: '#1e1e1e',
-    heading: '#050505'
-  },
   mediumGray: {
     text: '#757575'
   },
@@ -52,7 +41,7 @@ export const G2 = {
     tertiary: '#e7e8e9'
   }
 };
-export const DARK_GRAY = {
+const DARK_GRAY = {
   900: '#191e23',
   800: '#23282d',
   700: '#32373c',
@@ -68,7 +57,7 @@ export const DARK_GRAY = {
   100: '#8f98a1',
   placeholder: rgba(G2.gray[900], 0.62)
 };
-export const DARK_OPACITY = {
+const DARK_OPACITY = {
   900: rgba('#000510', 0.9),
   800: rgba('#00000a', 0.85),
   700: rgba('#06060b', 0.8),
@@ -80,7 +69,7 @@ export const DARK_OPACITY = {
   100: rgba('#223443', 0.5),
   backgroundFill: rgba(DARK_GRAY[700], 0.7)
 };
-export const DARK_OPACITY_LIGHT = {
+const DARK_OPACITY_LIGHT = {
   900: rgba('#304455', 0.45),
   800: rgba('#425863', 0.4),
   700: rgba('#667886', 0.35),
@@ -91,7 +80,7 @@ export const DARK_OPACITY_LIGHT = {
   200: rgba('#8b8b96', 0.1),
   100: rgba('#747474', 0.05)
 };
-export const LIGHT_GRAY = {
+const LIGHT_GRAY = {
   900: '#a2aab2',
   800: '#b5bcc2',
   700: '#ccd0d4',
@@ -105,7 +94,7 @@ export const LIGHT_GRAY = {
   100: '#f8f9f9',
   placeholder: rgba(BASE.white, 0.65)
 };
-export const LIGHT_OPACITY_LIGHT = {
+const LIGHT_OPACITY_LIGHT = {
   900: rgba(BASE.white, 0.5),
   800: rgba(BASE.white, 0.45),
   700: rgba(BASE.white, 0.4),
@@ -119,7 +108,7 @@ export const LIGHT_OPACITY_LIGHT = {
 }; // Additional colors.
 // Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
 
-export const BLUE = {
+const BLUE = {
   wordpress: {
     700: '#00669b'
   },
@@ -140,17 +129,17 @@ export const BLUE = {
     focus: '#007cba'
   }
 };
-export const ALERT = {
+const ALERT = {
   yellow: '#f0b849',
   red: '#d94f4f',
   green: '#4ab866'
 };
-export const ADMIN = {
+const ADMIN = {
   theme: `var( --wp-admin-theme-color, ${BLUE.wordpress[700]})`,
   themeDark10: `var( --wp-admin-theme-color-darker-10, ${BLUE.medium.focus})`
 }; // Namespaced values for raw colors hex codes.
 
-export const UI = {
+const UI = {
   theme: ADMIN.theme,
   background: BASE.white,
   backgroundDisabled: LIGHT_GRAY[200],
@@ -163,12 +152,21 @@ export const UI = {
   textDisabled: DARK_GRAY[150],
   textDark: BASE.white,
   textLight: BASE.black
-};
-export const COLORS = { ...BASE,
-  darkGray: merge({}, DARK_GRAY, G2.darkGray),
+}; // Using Object.assign instead of { ...spread } syntax helps TypeScript
+// to extract the correct type defs here.
+
+export const COLORS = Object.assign({}, BASE, {
+  darkGray: DARK_GRAY,
   darkOpacity: DARK_OPACITY,
   darkOpacityLight: DARK_OPACITY_LIGHT,
   mediumGray: G2.mediumGray,
+
+  /**
+   * The main gray color object (since Apr 16, 2022).
+   *
+   * We are in the process of simplifying the colors in this file,
+   * please prefer this `gray` object in the meantime.
+   */
   gray: G2.gray,
   lightGray: merge({}, LIGHT_GRAY, G2.lightGray),
   lightGrayLight: LIGHT_OPACITY_LIGHT,
@@ -176,6 +174,6 @@ export const COLORS = { ...BASE,
   alert: ALERT,
   admin: ADMIN,
   ui: UI
-};
+});
 export default COLORS;
 //# sourceMappingURL=colors-values.js.map

package/build-module/utils/colors-values.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/colors-values.js"],"names":["merge","rgba","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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","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"]}
+{"version":3,"sources":["@wordpress/components/src/utils/colors-values.js"],"names":["merge","rgba","BASE","black","white","G2","blue","medium","focus","focusDark","gray","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","darkGray","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\nconst BASE = {\n\tblack: '#000',\n\twhite: '#fff',\n};\n\nconst 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\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\nconst 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\nconst 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\nconst 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\nconst 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\nconst 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\nconst 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\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\nconst 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.\nconst 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: DARK_GRAY,\n\tdarkOpacity: DARK_OPACITY,\n\tdarkOpacityLight: DARK_OPACITY_LIGHT,\n\tmediumGray: G2.mediumGray,\n\t/**\n\t * The main gray color object (since Apr 16, 2022).\n\t *\n\t * We are in the process of simplifying the colors in this file,\n\t * please prefer this `gray` object in the meantime.\n\t */\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-module/utils/config-values.js

@@ -27,10 +27,14 @@ const CONTROL_PROPS = {
 const TOGGLE_GROUP_CONTROL_PROPS = {
   toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
   toggleGroupControlBorderColor: COLORS.ui.border,
+  toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
+  toggleGroupControlBackdropBorderColor: COLORS.ui.border,
+  toggleGroupControlBackdropBoxShadow: 'transparent',
   toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor
-};
-export default { ...CONTROL_PROPS,
-  ...TOGGLE_GROUP_CONTROL_PROPS,
+}; // Using Object.assign to avoid creating circular references when emitting
+// TypeScript type declarations.
+
+export 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)',
@@ -75,5 +79,5 @@ export 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)'
-};
+});
 //# sourceMappingURL=config-values.js.map

package/build-module/utils/config-values.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/config-values.js"],"names":["space","COLORS","CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","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":"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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};\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"]}
+{"version":3,"sources":["@wordpress/components/src/utils/config-values.js"],"names":["space","COLORS","CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","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-style/style-rtl.css

@@ -1081,9 +1081,12 @@ input.components-combobox-control__input[type=text]:focus {
   height: 100%;
   padding: 0;
   position: absolute;
-  left: 0;
+  left: 8px;
   top: 0;
 }
+.components-custom-select-control__button .components-custom-select-control__button-icon:not(.is-next-36px-default-size) {
+  left: 4px;
+}
 
 .components-custom-select-control__menu {
   border: 1px solid #1e1e1e;
@@ -3033,9 +3036,6 @@ body.is-dragging-components-draggable {
 .components-button.components-guide__finish-button {
   left: 32px;
 }
-.components-button.components-guide__inline-finish-button {
-  display: none;
-}
 
 [role=region] {
   position: relative;
@@ -4721,12 +4721,29 @@ body.lockscroll {
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;
+  padding-right: 6px;
+  padding-left: 6px;
   line-height: 0;
 }
 .components-toolbar-group .components-toolbar-group.components-toolbar-group {
   border-width: 0;
   margin: 0;
 }
+.components-toolbar-group .components-button.components-button,
+.components-toolbar-group .components-button.has-icon.has-icon {
+  min-width: 36px;
+  padding-right: 6px;
+  padding-left: 6px;
+}
+.components-toolbar-group .components-button.components-button svg,
+.components-toolbar-group .components-button.has-icon.has-icon svg {
+  min-width: 24px;
+}
+.components-toolbar-group .components-button.components-button::before,
+.components-toolbar-group .components-button.has-icon.has-icon::before {
+  right: 2px;
+  left: 2px;
+}
 
 .components-toolbar {
   min-height: 48px;

package/build-style/style.css

@@ -1083,9 +1083,12 @@ input.components-combobox-control__input[type=text]:focus {
   height: 100%;
   padding: 0;
   position: absolute;
-  right: 0;
+  right: 8px;
   top: 0;
 }
+.components-custom-select-control__button .components-custom-select-control__button-icon:not(.is-next-36px-default-size) {
+  right: 4px;
+}
 
 .components-custom-select-control__menu {
   border: 1px solid #1e1e1e;
@@ -3041,9 +3044,6 @@ body.is-dragging-components-draggable {
 .components-button.components-guide__finish-button {
   right: 32px;
 }
-.components-button.components-guide__inline-finish-button {
-  display: none;
-}
 
 [role=region] {
   position: relative;
@@ -4738,12 +4738,29 @@ body.lockscroll {
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;
+  padding-left: 6px;
+  padding-right: 6px;
   line-height: 0;
 }
 .components-toolbar-group .components-toolbar-group.components-toolbar-group {
   border-width: 0;
   margin: 0;
 }
+.components-toolbar-group .components-button.components-button,
+.components-toolbar-group .components-button.has-icon.has-icon {
+  min-width: 36px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.components-toolbar-group .components-button.components-button svg,
+.components-toolbar-group .components-button.has-icon.has-icon svg {
+  min-width: 24px;
+}
+.components-toolbar-group .components-button.components-button::before,
+.components-toolbar-group .components-button.has-icon.has-icon::before {
+  left: 2px;
+  right: 2px;
+}
 
 .components-toolbar {
   min-height: 48px;

package/build-types/base-control/index.d.ts

@@ -1,81 +1,40 @@
-export default BaseControl;
-export type Props = {
-    /**
-     * Start opting into the new margin-free styles that will become the default in a future version.
-     */
-    __nextHasNoMarginBottom?: boolean | undefined;
-    /**
-     * The id of the element to which labels and help text are being generated.
-     *                       That element should be passed as a child.
-     */
-    id?: string | undefined;
-    /**
-     * If this property is added, a help text will be
-     * generated using help property as the content.
-     */
-    help: import('react').ReactNode;
-    /**
-     * If this property is added, a label will be generated
-     *                    using label property as the content.
-     */
-    label?: import('react').ReactNode;
-    /**
-     * If true, the label will only be visible to screen readers.
-     */
-    hideLabelFromVision?: boolean | undefined;
-    /**
-     * 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.
-     */
-    className?: string | undefined;
-    /**
-     * The content to be displayed within
-     *                 the BaseControl.
-     */
-    children?: import('react').ReactNode;
-};
-export type VisualLabelProps = {
-    /**
-     * Class name
-     */
-    className?: string | undefined;
-    /**
-     * Children
-     */
-    children?: import('react').ReactNode;
-};
+import type { FunctionComponent } from 'react';
+import type { BaseControlProps, BaseControlVisualLabelProps } from './types';
 /**
- * @typedef Props
- * @property {boolean}                   [__nextHasNoMarginBottom] Start opting into the new margin-free styles that will become the default in a future version.
- * @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.
+ * `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>
+ * );
  */
+export declare const BaseControl: {
+    ({ __nextHasNoMarginBottom, id, label, hideLabelFromVision, help, className, children, }: BaseControlProps): JSX.Element;
+    VisualLabel: FunctionComponent<BaseControlVisualLabelProps>;
+};
 /**
- * @param {Props} 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>
+ * );
  */
-declare function BaseControl({ __nextHasNoMarginBottom, id, label, hideLabelFromVision, help, className, children, }: Props): JSX.Element;
-declare namespace BaseControl {
-    /**
-     * @typedef VisualLabelProps
-     * @property {string}                    [className] Class name
-     * @property {import('react').ReactNode} [children]  Children
-     */
-    /**
-     * @param {VisualLabelProps} Props
-     * @return {JSX.Element} Element
-     */
-    function VisualLabel({ className, children }: VisualLabelProps): JSX.Element;
-}
+export declare const VisualLabel: FunctionComponent<BaseControlVisualLabelProps>;
+export default BaseControl;
 //# sourceMappingURL=index.d.ts.map

package/build-types/base-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/base-control/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;UAsBc,OAAO,OAAO,EAAE,SAAS;;;;;YAEzB,OAAO,OAAO,EAAE,SAAS;;;;;;;;;;;;;;;eAMzB,OAAO,OAAO,EAAE,SAAS;;;;;;;;;;eAmEzB,OAAO,OAAO,EAAE,SAAS;;AAhFvC;;;;;;;;;;;;;;;GAeG;AAEH;;;GAGG;AACH,sHAHW,KAAK,GACJ,WAAW,CAwDtB;;IAED;;;;OAIG;IAEH;;;OAGG;IACH,6EAWC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/base-control/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAS7E;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW;8FAQrB,gBAAgB;;CA8ClB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAE,2BAA2B,CAcvE,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/build-types/base-control/stories/index.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import BaseControl from '..';
+declare const meta: ComponentMeta<typeof BaseControl>;
+export default meta;
+export declare const Default: ComponentStory<typeof BaseControl>;
+export declare const WithHelpText: ComponentStory<{
+    ({ __nextHasNoMarginBottom, id, label, hideLabelFromVision, help, className, children, }: import("../types").BaseControlProps): JSX.Element;
+    VisualLabel: import("react").FunctionComponent<import("../types").BaseControlVisualLabelProps>;
+}>;
+/**
+ * `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.
+ */
+export declare const WithVisualLabel: ComponentStory<typeof BaseControl>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/base-control/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/base-control/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,WAAW,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,WAAW,CAY5C,CAAC;AACF,eAAe,IAAI,CAAC;AAapB,eAAO,MAAM,OAAO,EAAE,cAAc,CACnC,OAAO,WAAW,CACmB,CAAC;AAOvC,eAAO,MAAM,YAAY;;;EAAqC,CAAC;AAO/D;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAE,OAAO,WAAW,CAa/D,CAAC"}