@wordpress/components 28.9.0 → 28.11.0

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

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","useInstanceId","deprecated","FlexBlock","FormToggle","BaseControl","HStack","useCx","space","jsx","_jsx","jsxs","_jsxs","UnforwardedToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","ref","onChangeToggle","event","target","instanceId","ToggleControl","id","cx","classes","marginBottom","process","env","NODE_ENV","since","version","hint","describedBy","helpLabel","undefined","children","justify","spacing","as","htmlFor"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../utils/space';\n\nfunction UnforwardedToggleControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tchecked,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\tdisabled,\n\t}: WordPressComponentProps< ToggleControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.ToggleControl', {\n\t\t\tsince: '6.7',\n\t\t\tversion: '7.0',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelpLabel && (\n\t\t\t\t\t<span className=\"components-toggle-control__help\">\n\t\t\t\t\t\t{ helpLabel }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tref={ ref }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName={ clsx( 'components-toggle-control__label', {\n\t\t\t\t\t\t'is-disabled': disabled,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       __nextHasNoMarginBottom\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const ToggleControl = forwardRef( UnforwardedToggleControl );\n\nexport default ToggleControl;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,aAAa,QAAQ,oBAAoB;AAClD,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,SAASC,SAAS,QAAQ,SAAS;AACnC,OAAOC,UAAU,MAAM,gBAAgB;AACvC,OAAOC,WAAW,MAAM,iBAAiB;AAGzC,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,KAAK,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEvC,SAASC,wBAAwBA,CAChC;EACCC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAChEC,GAAqC,EACpC;EACD,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEJ,QAAQ,CAAEI,KAAK,CAACC,MAAM,CAACR,OAAQ,CAAC;EACjC;EACA,MAAMS,UAAU,GAAGxB,aAAa,CAAEyB,aAAc,CAAC;EACjD,MAAMC,EAAE,GAAI,4BAA4BF,UAAY,EAAC;EAErD,MAAMG,EAAE,GAAGrB,KAAK,CAAC,CAAC;EAClB,MAAMsB,OAAO,GAAGD,EAAE,CACjB,2BAA2B,EAC3BV,SAAS,EACT,CAAEJ,uBAAuB,iBAAIhB,GAAG,CAAE;IAAEgC,YAAY,EAAEtB,KAAK,CAAE,CAAE;EAAE,CAAC,EAAAuB,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,ktKAAC,CAChE,CAAC;EAED,IAAK,CAAEnB,uBAAuB,EAAG;IAChCZ,UAAU,CAAE,sDAAsD,EAAE;MACnEgC,KAAK,EAAE,KAAK;MACZC,OAAO,EAAE,KAAK;MACdC,IAAI,EAAE;IACP,CAAE,CAAC;EACJ;EAEA,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKrB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKuB,SAAS,EAAG;QAC5BD,SAAS,GAAGrB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNsB,SAAS,GAAGrB,IAAI;IACjB;IACA,IAAKqB,SAAS,EAAG;MAChBD,WAAW,GAAGV,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,oBACCjB,IAAA,CAACL,WAAW;IACXsB,EAAE,EAAGA,EAAI;IACTV,IAAI,EACHqB,SAAS,iBACR5B,IAAA;MAAMQ,SAAS,EAAC,iCAAiC;MAAAsB,QAAA,EAC9CF;IAAS,CACN,CAEP;IACDpB,SAAS,EAAGW,OAAS;IACrBf,uBAAuB;IAAA0B,QAAA,eAEvB5B,KAAA,CAACN,MAAM;MAACmC,OAAO,EAAC,YAAY;MAACC,OAAO,EAAG,CAAG;MAAAF,QAAA,gBACzC9B,IAAA,CAACN,UAAU;QACVuB,EAAE,EAAGA,EAAI;QACTX,OAAO,EAAGA,OAAS;QACnBG,QAAQ,EAAGG,cAAgB;QAC3B,oBAAmBe,WAAa;QAChCjB,QAAQ,EAAGA,QAAU;QACrBC,GAAG,EAAGA;MAAK,CACX,CAAC,eACFX,IAAA,CAACP,SAAS;QACTwC,EAAE,EAAC,OAAO;QACVC,OAAO,EAAGjB,EAAI;QACdT,SAAS,EAAGnB,IAAI,CAAE,kCAAkC,EAAE;UACrD,aAAa,EAAEqB;QAChB,CAAE,CAAG;QAAAoB,QAAA,EAEHzB;MAAK,CACG,CAAC;IAAA,CACL;EAAC,CACG,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMW,aAAa,GAAG1B,UAAU,CAAEa,wBAAyB,CAAC;AAEnE,eAAea,aAAa","ignoreList":[]}
+{"version":3,"names":["css","clsx","forwardRef","useInstanceId","deprecated","FlexBlock","FormToggle","BaseControl","HStack","useCx","space","jsx","_jsx","jsxs","_jsxs","UnforwardedToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","ref","onChangeToggle","event","target","instanceId","ToggleControl","id","cx","classes","marginBottom","process","env","NODE_ENV","since","version","hint","describedBy","helpLabel","undefined","children","justify","spacing","as","htmlFor"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../utils/space';\n\nfunction UnforwardedToggleControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tchecked,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\tdisabled,\n\t}: WordPressComponentProps< ToggleControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.ToggleControl', {\n\t\t\tsince: '6.7',\n\t\t\tversion: '7.0',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelpLabel && (\n\t\t\t\t\t<span className=\"components-toggle-control__help\">\n\t\t\t\t\t\t{ helpLabel }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tref={ ref }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName={ clsx( 'components-toggle-control__label', {\n\t\t\t\t\t\t'is-disabled': disabled,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       __nextHasNoMarginBottom\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const ToggleControl = forwardRef( UnforwardedToggleControl );\n\nexport default ToggleControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/toggle-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["memo","SwitchCell","jsx","_jsx","ToggleControl","label","checked","help","instanceId","className","onChange","props","id","helpLabel","value","onValueChange"],"sources":["@wordpress/components/src/toggle-control/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport SwitchCell from '../mobile/bottom-sheet/switch-cell';\n\nconst ToggleControl = memo(\n\t( { label, checked, help, instanceId, className, onChange, ...props } ) => {\n\t\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\t\tconst helpLabel =\n\t\t\thelp && typeof help === 'function' ? help( checked ) : help;\n\n\t\treturn (\n\t\t\t<SwitchCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ helpLabel }\n\t\t\t\tclassName={ className }\n\t\t\t\tvalue={ checked }\n\t\t\t\tonValueChange={ onChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default ToggleControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,oBAAoB;AACzC;AACA;AACA;AACA,OAAOC,UAAU,MAAM,oCAAoC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5D,MAAMC,aAAa,GAAGJ,IAAI,CACzB,CAAE;EAAEK,KAAK;EAAEC,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC1E,MAAMC,EAAE,GAAI,4BAA4BJ,UAAY,EAAC;EAErD,MAAMK,SAAS,GACdN,IAAI,IAAI,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAAED,OAAQ,CAAC,GAAGC,IAAI;EAE5D,oBACCJ,IAAA,CAACF,UAAU;IACVI,KAAK,EAAGA,KAAO;IACfO,EAAE,EAAGA,EAAI;IACTL,IAAI,EAAGM,SAAW;IAClBJ,SAAS,EAAGA,SAAW;IACvBK,KAAK,EAAGR,OAAS;IACjBS,aAAa,EAAGL,QAAU;IAAA,GACrBC;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAED,eAAeP,aAAa","ignoreList":[]}
+{"version":3,"names":["memo","SwitchCell","jsx","_jsx","ToggleControl","label","checked","help","instanceId","className","onChange","props","id","helpLabel","value","onValueChange"],"sources":["@wordpress/components/src/toggle-control/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport SwitchCell from '../mobile/bottom-sheet/switch-cell';\n\nconst ToggleControl = memo(\n\t( { label, checked, help, instanceId, className, onChange, ...props } ) => {\n\t\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\t\tconst helpLabel =\n\t\t\thelp && typeof help === 'function' ? help( checked ) : help;\n\n\t\treturn (\n\t\t\t<SwitchCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ helpLabel }\n\t\t\t\tclassName={ className }\n\t\t\t\tvalue={ checked }\n\t\t\t\tonValueChange={ onChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default ToggleControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,oBAAoB;AACzC;AACA;AACA;AACA,OAAOC,UAAU,MAAM,oCAAoC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5D,MAAMC,aAAa,GAAGJ,IAAI,CACzB,CAAE;EAAEK,KAAK;EAAEC,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC1E,MAAMC,EAAE,GAAG,4BAA6BJ,UAAU,EAAG;EAErD,MAAMK,SAAS,GACdN,IAAI,IAAI,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAAED,OAAQ,CAAC,GAAGC,IAAI;EAE5D,oBACCJ,IAAA,CAACF,UAAU;IACVI,KAAK,EAAGA,KAAO;IACfO,EAAE,EAAGA,EAAI;IACTL,IAAI,EAAGM,SAAW;IAClBJ,SAAS,EAAGA,SAAW;IACvBK,KAAK,EAAGR,OAAS;IACjBS,aAAa,EAAGL,QAAU;IAAA,GACrBC;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAED,eAAeP,aAAa","ignoreList":[]}

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js

@@ -9,7 +9,7 @@ import { useStoreState } from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { forwardRef, useEffect, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -55,7 +55,15 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   });
   const selectedValue = useStoreState(radio, 'value');
   const setValue = radio.setValue;
+
+  // Ensures that the active id is also reset after the value is "reset" by the consumer.
+  useEffect(() => {
+    if (selectedValue === '') {
+      radio.setActiveId(undefined);
+    }
+  }, [radio, selectedValue]);
   const groupContextValue = useMemo(() => ({
+    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),
     baseId,
     isBlock: !isAdaptiveWidth,
     size,
@@ -64,7 +72,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
     // @ts-expect-error - This is wrong and we should fix it.
     setValue,
     setSelectedElement
-  }), [baseId, isAdaptiveWidth, selectedValue, setSelectedElement, setValue, size]);
+  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, size]);
   return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {
     value: groupContextValue,
     children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","useStoreState","useInstanceId","forwardRef","useMemo","isRTL","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","setSelectedElement","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","selectedValue","groupContextValue","isBlock","Provider","RadioGroup","store","render","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\tsetSelectedElement,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t(): ToggleGroupControlContextProps => ( {\n\t\t\tbaseId,\n\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\tsize,\n\t\t\t// @ts-expect-error - This is wrong and we should fix it.\n\t\t\tvalue: selectedValue,\n\t\t\t// @ts-expect-error - This is wrong and we should fix it.\n\t\t\tsetValue,\n\t\t\tsetSelectedElement,\n\t\t} ),\n\t\t[\n\t\t\tbaseId,\n\t\t\tisAdaptiveWidth,\n\t\t\tselectedValue,\n\t\t\tsetSelectedElement,\n\t\t\tsetValue,\n\t\t\tsize,\n\t\t]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC,SAASC,aAAa,QAAQ,gBAAgB;;AAE9C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACVC,kBAAkB;EAClB,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGvB,aAAa,CAChCwB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGN,MAAM,IAAII,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEP,KAAK;IAAEU;EAAa,CAAC,GAC5BpB,uCAAuC,CAAEW,SAAU,CAAC;;EAErD;EACA;EACA,MAAMU,mBAAmB,GAAGb,YAAY,GACnCc,CAAyB,IAAM;IACjCd,YAAY,CAAEc,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAGhC,OAAO,CAACiC,aAAa,CAAE;IACpCL,YAAY;IACZV,KAAK;IACLgB,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE9B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAM+B,aAAa,GAAGnC,aAAa,CAAE+B,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAGjC,OAAO,CAChC,OAAwC;IACvCuB,MAAM;IACNW,OAAO,EAAE,CAAEzB,eAAe;IAC1BI,IAAI;IACJ;IACAC,KAAK,EAAEkB,aAAa;IACpB;IACAF,QAAQ;IACRZ;EACD,CAAC,CAAE,EACH,CACCK,MAAM,EACNd,eAAe,EACfuB,aAAa,EACbd,kBAAkB,EAClBY,QAAQ,EACRjB,IAAI,CAEN,CAAC;EAED,oBACCP,IAAA,CAACH,yBAAyB,CAACgC,QAAQ;IAACrB,KAAK,EAAGmB,iBAAmB;IAAAzB,QAAA,eAC9DF,IAAA,CAACV,OAAO,CAACwC,UAAU;MAClBC,KAAK,EAAGT,KAAO;MACf,cAAalB,KAAO;MACpB4B,MAAM,eAAGhC,IAAA,CAACJ,IAAI,IAAE,CAAG;MAAA,GACdiB,UAAU;MACfH,EAAE,EAAGO,MAAQ;MACbgB,GAAG,EAAGnB,YAAc;MAAAZ,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEA,OAAO,MAAMc,8BAA8B,GAAGvB,UAAU,CACvDQ,yCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","useStoreState","useInstanceId","forwardRef","useEffect","useMemo","isRTL","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","setSelectedElement","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","selectedValue","setActiveId","groupContextValue","activeItemIsNotFirstItem","getState","activeId","first","isBlock","Provider","RadioGroup","store","render","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\tsetSelectedElement,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\t// Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n\tuseEffect( () => {\n\t\tif ( selectedValue === '' ) {\n\t\t\tradio.setActiveId( undefined );\n\t\t}\n\t}, [ radio, selectedValue ] );\n\n\tconst groupContextValue = useMemo(\n\t\t(): ToggleGroupControlContextProps => ( {\n\t\t\tactiveItemIsNotFirstItem: () =>\n\t\t\t\tradio.getState().activeId !== radio.first(),\n\t\t\tbaseId,\n\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\tsize,\n\t\t\t// @ts-expect-error - This is wrong and we should fix it.\n\t\t\tvalue: selectedValue,\n\t\t\t// @ts-expect-error - This is wrong and we should fix it.\n\t\t\tsetValue,\n\t\t\tsetSelectedElement,\n\t\t} ),\n\t\t[\n\t\t\tbaseId,\n\t\t\tisAdaptiveWidth,\n\t\t\tradio,\n\t\t\tselectedValue,\n\t\t\tsetSelectedElement,\n\t\t\tsetValue,\n\t\t\tsize,\n\t\t]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC,SAASC,aAAa,QAAQ,gBAAgB;;AAE9C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,SAAS,EAAEC,OAAO,QAAQ,oBAAoB;AACnE,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACVC,kBAAkB;EAClB,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGxB,aAAa,CAChCyB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGN,MAAM,IAAII,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEP,KAAK;IAAEU;EAAa,CAAC,GAC5BpB,uCAAuC,CAAEW,SAAU,CAAC;;EAErD;EACA;EACA,MAAMU,mBAAmB,GAAGb,YAAY,GACnCc,CAAyB,IAAM;IACjCd,YAAY,CAAEc,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAGjC,OAAO,CAACkC,aAAa,CAAE;IACpCL,YAAY;IACZV,KAAK;IACLgB,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE9B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAM+B,aAAa,GAAGpC,aAAa,CAAEgC,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;;EAE/B;EACA/B,SAAS,CAAE,MAAM;IAChB,IAAKiC,aAAa,KAAK,EAAE,EAAG;MAC3BJ,KAAK,CAACK,WAAW,CAAEN,SAAU,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEC,KAAK,EAAEI,aAAa,CAAG,CAAC;EAE7B,MAAME,iBAAiB,GAAGlC,OAAO,CAChC,OAAwC;IACvCmC,wBAAwB,EAAEA,CAAA,KACzBP,KAAK,CAACQ,QAAQ,CAAC,CAAC,CAACC,QAAQ,KAAKT,KAAK,CAACU,KAAK,CAAC,CAAC;IAC5Cf,MAAM;IACNgB,OAAO,EAAE,CAAE9B,eAAe;IAC1BI,IAAI;IACJ;IACAC,KAAK,EAAEkB,aAAa;IACpB;IACAF,QAAQ;IACRZ;EACD,CAAC,CAAE,EACH,CACCK,MAAM,EACNd,eAAe,EACfmB,KAAK,EACLI,aAAa,EACbd,kBAAkB,EAClBY,QAAQ,EACRjB,IAAI,CAEN,CAAC;EAED,oBACCP,IAAA,CAACH,yBAAyB,CAACqC,QAAQ;IAAC1B,KAAK,EAAGoB,iBAAmB;IAAA1B,QAAA,eAC9DF,IAAA,CAACX,OAAO,CAAC8C,UAAU;MAClBC,KAAK,EAAGd,KAAO;MACf,cAAalB,KAAO;MACpBiC,MAAM,eAAGrC,IAAA,CAACJ,IAAI,IAAE,CAAG;MAAA,GACdiB,UAAU;MACfH,EAAE,EAAGO,MAAQ;MACbqB,GAAG,EAAGxB,YAAc;MAAAZ,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEA,OAAO,MAAMc,8BAA8B,GAAGxB,UAAU,CACvDS,yCACD,CAAC","ignoreList":[]}

package/build-module/toggle-group-control/toggle-group-control/component.js

@@ -5,7 +5,7 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,70 +19,9 @@ import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
-import { useOnValueUpdate } from '../../utils/hooks/use-on-value-update';
-import { useEvent, useMergeRefs } from '@wordpress/compose';
-
-/**
- * A utility used to animate something in a container component based on the "offset
- * rect" (position relative to the container and size) of a subelement. For example,
- * this is useful to render an indicator for the selected option of a component, and
- * to animate it when the selected option changes.
- *
- * Takes in a container element and the up-to-date "offset rect" of the target
- * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:
- *
- * - Adds CSS variables with rect information to the container, so that the indicator
- *   can be rendered and animated with them. These are kept up-to-date, enabling CSS
- *   transitions on change.
- * - Sets an attribute (`data-subelement-animated` by default) when the tracked
- *   element changes, so that the target (e.g. the indicator) can be animated to its
- *   new size and position.
- * - Removes the attribute when the animation is done.
- *
- * The need for the attribute is due to the fact that the rect might update in
- * situations other than when the tracked element changes, e.g. the tracked element
- * might be resized. In such cases, there is no need to animate the indicator, and
- * the change in size or position of the indicator needs to be reflected immediately.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function useAnimatedOffsetRect(
-/**
- * The container element.
- */
-container,
-/**
- * The rect of the tracked element.
- */
-rect, {
-  prefix = 'subelement',
-  dataAttribute = `${prefix}-animated`,
-  transitionEndFilter = () => true
-} = {}) {
-  const setProperties = useEvent(() => {
-    Object.keys(rect).forEach(property => property !== 'element' && container?.style.setProperty(`--${prefix}-${property}`, String(rect[property])));
-  });
-  useLayoutEffect(() => {
-    setProperties();
-  }, [rect, setProperties]);
-  useOnValueUpdate(rect.element, ({
-    previousValue
-  }) => {
-    // Only enable the animation when moving from one element to another.
-    if (rect.element && previousValue) {
-      container?.setAttribute(`data-${dataAttribute}`, '');
-    }
-  });
-  useLayoutEffect(() => {
-    function onTransitionEnd(event) {
-      if (transitionEndFilter(event)) {
-        container?.removeAttribute(`data-${dataAttribute}`);
-      }
-    }
-    container?.addEventListener('transitionend', onTransitionEnd);
-    return () => container?.removeEventListener('transitionend', onTransitionEnd);
-  }, [dataAttribute, container, transitionEndFilter]);
-}
+import { useMergeRefs } from '@wordpress/compose';
+import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function UnconnectedToggleGroupControl(props, forwardedRef) {
   const {
     __nextHasNoMarginBottom = false,
@@ -108,7 +47,8 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
   useAnimatedOffsetRect(controlElement, selectedRect, {
     prefix: 'selected',
     dataAttribute: 'indicator-animated',
-    transitionEndFilter: event => event.pseudoElement === '::before'
+    transitionEndFilter: event => event.pseudoElement === '::before',
+    roundRect: true
   });
   const cx = useCx();
   const classes = useMemo(() => cx(styles.toggleGroupControl({

package/build-module/toggle-group-control/toggle-group-control/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["useLayoutEffect","useMemo","useState","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","useTrackElementOffsetRect","useOnValueUpdate","useEvent","useMergeRefs","jsx","_jsx","jsxs","_jsxs","useAnimatedOffsetRect","container","rect","prefix","dataAttribute","transitionEndFilter","setProperties","Object","keys","forEach","property","style","setProperty","String","element","previousValue","setAttribute","onTransitionEnd","event","removeAttribute","addEventListener","removeEventListener","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","normalizedSize","selectedElement","setSelectedElement","controlElement","setControlElement","refs","selectedRect","undefined","pseudoElement","cx","classes","toggleGroupControl","block","MainControl","__associatedWPComponentName","VisualLabel","ref","ToggleGroupControl"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport type { ElementOffsetRect } from '../../utils/element-rect';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useOnValueUpdate } from '../../utils/hooks/use-on-value-update';\nimport { useEvent, useMergeRefs } from '@wordpress/compose';\n\n/**\n * A utility used to animate something in a container component based on the \"offset\n * rect\" (position relative to the container and size) of a subelement. For example,\n * this is useful to render an indicator for the selected option of a component, and\n * to animate it when the selected option changes.\n *\n * Takes in a container element and the up-to-date \"offset rect\" of the target\n * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:\n *\n * - Adds CSS variables with rect information to the container, so that the indicator\n *   can be rendered and animated with them. These are kept up-to-date, enabling CSS\n *   transitions on change.\n * - Sets an attribute (`data-subelement-animated` by default) when the tracked\n *   element changes, so that the target (e.g. the indicator) can be animated to its\n *   new size and position.\n * - Removes the attribute when the animation is done.\n *\n * The need for the attribute is due to the fact that the rect might update in\n * situations other than when the tracked element changes, e.g. the tracked element\n * might be resized. In such cases, there is no need to animate the indicator, and\n * the change in size or position of the indicator needs to be reflected immediately.\n */\nfunction useAnimatedOffsetRect(\n\t/**\n\t * The container element.\n\t */\n\tcontainer: HTMLElement | undefined,\n\t/**\n\t * The rect of the tracked element.\n\t */\n\trect: ElementOffsetRect,\n\t{\n\t\tprefix = 'subelement',\n\t\tdataAttribute = `${ prefix }-animated`,\n\t\ttransitionEndFilter = () => true,\n\t}: {\n\t\t/**\n\t\t * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the\n\t\t * CSS variables will be `--selected-top`, `--selected-left`, etc.\n\t\t * @default 'subelement'\n\t\t */\n\t\tprefix?: string;\n\t\t/**\n\t\t * The name of the data attribute used to indicate that the animation is in\n\t\t * progress. The `data-` prefix is added automatically.\n\t\t *\n\t\t * For example, if `dataAttribute` is `indicator-animated`, the attribute will\n\t\t * be `data-indicator-animated`.\n\t\t * @default `${ prefix }-animated`\n\t\t */\n\t\tdataAttribute?: string;\n\t\t/**\n\t\t * A function that is called with the transition event and returns a boolean\n\t\t * indicating whether the animation should be stopped. The default is a function\n\t\t * that always returns `true`.\n\t\t *\n\t\t * For example, if the animated element is the `::before` pseudo-element, the\n\t\t * function can be written as `( event ) => event.pseudoElement === '::before'`.\n\t\t * @default () => true\n\t\t */\n\t\ttransitionEndFilter?: ( event: TransitionEvent ) => boolean;\n\t} = {}\n) {\n\tconst setProperties = useEvent( () => {\n\t\t( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(\n\t\t\t( property ) =>\n\t\t\t\tproperty !== 'element' &&\n\t\t\t\tcontainer?.style.setProperty(\n\t\t\t\t\t`--${ prefix }-${ property }`,\n\t\t\t\t\tString( rect[ property ] )\n\t\t\t\t)\n\t\t);\n\t} );\n\tuseLayoutEffect( () => {\n\t\tsetProperties();\n\t}, [ rect, setProperties ] );\n\tuseOnValueUpdate( rect.element, ( { previousValue } ) => {\n\t\t// Only enable the animation when moving from one element to another.\n\t\tif ( rect.element && previousValue ) {\n\t\t\tcontainer?.setAttribute( `data-${ dataAttribute }`, '' );\n\t\t}\n\t} );\n\tuseLayoutEffect( () => {\n\t\tfunction onTransitionEnd( event: TransitionEvent ) {\n\t\t\tif ( transitionEndFilter( event ) ) {\n\t\t\t\tcontainer?.removeAttribute( `data-${ dataAttribute }` );\n\t\t\t}\n\t\t}\n\t\tcontainer?.addEventListener( 'transitionend', onTransitionEnd );\n\t\treturn () =>\n\t\t\tcontainer?.removeEventListener( 'transitionend', onTransitionEnd );\n\t}, [ dataAttribute, container, transitionEndFilter ] );\n}\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst [ selectedElement, setSelectedElement ] = useState< HTMLElement >();\n\tconst [ controlElement, setControlElement ] = useState< HTMLElement >();\n\tconst refs = useMergeRefs( [ setControlElement, forwardedRef ] );\n\tconst selectedRect = useTrackElementOffsetRect(\n\t\tvalue ? selectedElement : undefined\n\t);\n\tuseAnimatedOffsetRect( controlElement, selectedRect, {\n\t\tprefix: 'selected',\n\t\tdataAttribute: 'indicator-animated',\n\t\ttransitionEndFilter: ( event ) => event.pseudoElement === '::before',\n\t} );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( {\n\t\t\t\t\tisBlock,\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tsize: normalizedSize,\n\t\t\t\t} ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, normalizedSize ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"ToggleGroupControl\"\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tsetSelectedElement={ setSelectedElement }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ refs }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __nextHasNoMarginBottom\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useMemo","useState","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","useTrackElementOffsetRect","useMergeRefs","useAnimatedOffsetRect","jsx","_jsx","jsxs","_jsxs","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","normalizedSize","selectedElement","setSelectedElement","controlElement","setControlElement","refs","selectedRect","undefined","prefix","dataAttribute","transitionEndFilter","event","pseudoElement","roundRect","cx","classes","toggleGroupControl","block","MainControl","__associatedWPComponentName","VisualLabel","ref","ToggleGroupControl"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst [ selectedElement, setSelectedElement ] = useState< HTMLElement >();\n\tconst [ controlElement, setControlElement ] = useState< HTMLElement >();\n\tconst refs = useMergeRefs( [ setControlElement, forwardedRef ] );\n\tconst selectedRect = useTrackElementOffsetRect(\n\t\tvalue ? selectedElement : undefined\n\t);\n\tuseAnimatedOffsetRect( controlElement, selectedRect, {\n\t\tprefix: 'selected',\n\t\tdataAttribute: 'indicator-animated',\n\t\ttransitionEndFilter: ( event ) => event.pseudoElement === '::before',\n\t\troundRect: true,\n\t} );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( {\n\t\t\t\t\tisBlock,\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tsize: normalizedSize,\n\t\t\t\t} ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, normalizedSize ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"ToggleGroupControl\"\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tsetSelectedElement={ setSelectedElement }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ refs }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __nextHasNoMarginBottom\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/toggle-group-control/toggle-group-control-option-base/component.js

@@ -19,8 +19,7 @@ import { useToggleGroupControlContext } from '../context';
 import * as styles from './styles';
 import { useCx } from '../../utils/hooks';
 import Tooltip from '../../tooltip';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   ButtonContentView,
   LabelView
@@ -59,7 +58,6 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     value,
     children,
     showTooltip = false,
-    onFocus: onFocusProp,
     disabled,
     ...otherButtonProps
   } = buttonProps;
@@ -100,7 +98,6 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
       children: isDeselectable ? /*#__PURE__*/_jsx("button", {
         ...commonProps,
         disabled: disabled,
-        onFocus: onFocusProp,
         "aria-pressed": isPressed,
         type: "button",
         onClick: buttonOnClick,
@@ -109,16 +106,18 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
         })
       }) : /*#__PURE__*/_jsx(Ariakit.Radio, {
         disabled: disabled,
-        render: /*#__PURE__*/_jsx("button", {
-          type: "button",
-          ...commonProps,
-          onFocus: event => {
-            onFocusProp?.(event);
-            if (event.defaultPrevented) {
-              return;
-            }
+        onFocusVisible: () => {
+          const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';
+
+          // Conditions ensure that the first visible focus to a radio group
+          // without a selected option will not automatically select the option.
+          if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {
             toggleGroupControlContext.setValue(value);
           }
+        },
+        render: /*#__PURE__*/_jsx("button", {
+          type: "button",
+          ...commonProps
         }),
         value: value,
         children: /*#__PURE__*/_jsx(ButtonContentView, {

package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","useInstanceId","useLayoutEffect","useMemo","useRef","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","jsx","_jsx","Fragment","_Fragment","ButtonContentView","LabelView","WithToolTip","showTooltip","text","children","placement","ToggleGroupControlOptionBase","props","forwardedRef","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","className","isIcon","value","onFocus","onFocusProp","disabled","otherButtonProps","isPressed","cx","labelViewClasses","labelBlock","itemClasses","buttonView","buttonOnClick","setValue","undefined","commonProps","ref","labelRef","current","setSelectedElement","type","onClick","Radio","render","event","defaultPrevented","ConnectedToggleGroupControlOptionBase"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t| 'id'\n\t\t// due to how the component works, only the `disabled` prop should be used\n\t\t| 'aria-disabled'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tonFocus: onFocusProp,\n\t\tdisabled,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\tconst labelRef = useRef< HTMLDivElement | null >( null );\n\tuseLayoutEffect( () => {\n\t\tif ( isPressed && labelRef.current ) {\n\t\t\ttoggleGroupControlContext.setSelectedElement( labelRef.current );\n\t\t}\n\t}, [ isPressed, toggleGroupControlContext ] );\n\n\treturn (\n\t\t<LabelView ref={ labelRef } className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tonFocus={ onFocusProp }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Ariakit.Radio\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\t\tonFocus={ ( event ) => {\n\t\t\t\t\t\t\t\t\tonFocusProp?.( event );\n\t\t\t\t\t\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Ariakit.Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,eAAe,EAAEC,OAAO,EAAEC,MAAM,QAAQ,oBAAoB;;AAErE;AACA;AACA;;AAEA,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,eAAe;AAKhE,SAASC,4BAA4B,QAAQ,YAAY;AACzD,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,KAAK,QAAQ,mBAAmB;AACzC,OAAOC,OAAO,MAAM,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEpC,MAAM;EAAEC,iBAAiB;EAAEC;AAAU,CAAC,GAAGR,MAAM;AAE/C,MAAMS,WAAW,GAAGA,CAAE;EAAEC,WAAW;EAAEC,IAAI;EAAEC;AAA2B,CAAC,KAAM;EAC5E,IAAKF,WAAW,IAAIC,IAAI,EAAG;IAC1B,oBACCP,IAAA,CAACF,OAAO;MAACS,IAAI,EAAGA,IAAM;MAACE,SAAS,EAAC,KAAK;MAAAD,QAAA,EACnCA;IAAQ,CACF,CAAC;EAEZ;EACA,oBAAOR,IAAA,CAAAE,SAAA;IAAAM,QAAA,EAAIA;EAAQ,CAAI,CAAC;AACzB,CAAC;AAED,SAASE,4BAA4BA,CACpCC,KAUC,EACDC,YAAiC,EAChC;EACD,MAAMC,yBAAyB,GAAGlB,4BAA4B,CAAC,CAAC;EAEhE,MAAMmB,EAAE,GAAGzB,aAAa,CACvBqB,4BAA4B,EAC5BG,yBAAyB,CAACE,MAAM,IAAI,kCACrC,CAAC;EAED,MAAMC,WAAW,GAAGtB,gBAAgB,CACnC;IAAE,GAAGiB,KAAK;IAAEG;EAAG,CAAC,EAChB,8BACD,CAAC;EAED,MAAM;IACLG,OAAO,GAAG,KAAK;IACfC,cAAc,GAAG,KAAK;IACtBC,IAAI,GAAG;EACR,CAAC,GAAGN,yBAAyB;EAE7B,MAAM;IACLO,SAAS;IACTC,MAAM,GAAG,KAAK;IACdC,KAAK;IACLd,QAAQ;IACRF,WAAW,GAAG,KAAK;IACnBiB,OAAO,EAAEC,WAAW;IACpBC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGV,WAAW;EAEf,MAAMW,SAAS,GAAGd,yBAAyB,CAACS,KAAK,KAAKA,KAAK;EAC3D,MAAMM,EAAE,GAAG/B,KAAK,CAAC,CAAC;EAClB,MAAMgC,gBAAgB,GAAGtC,OAAO,CAC/B,MAAMqC,EAAE,CAAEX,OAAO,IAAIrB,MAAM,CAACkC,UAAW,CAAC,EACxC,CAAEF,EAAE,EAAEX,OAAO,CACd,CAAC;EACD,MAAMc,WAAW,GAAGxC,OAAO,CAC1B,MACCqC,EAAE,CACDhC,MAAM,CAACoC,UAAU,CAAE;IAClBd,cAAc;IACdG,MAAM;IACNM,SAAS;IACTR;EACD,CAAE,CAAC,EACHC,SACD,CAAC,EACF,CAAEQ,EAAE,EAAEV,cAAc,EAAEG,MAAM,EAAEM,SAAS,EAAER,IAAI,EAAEC,SAAS,CACzD,CAAC;EAED,MAAMa,aAAa,GAAGA,CAAA,KAAM;IAC3B,IAAKf,cAAc,IAAIS,SAAS,EAAG;MAClCd,yBAAyB,CAACqB,QAAQ,CAAEC,SAAU,CAAC;IAChD,CAAC,MAAM;MACNtB,yBAAyB,CAACqB,QAAQ,CAAEZ,KAAM,CAAC;IAC5C;EACD,CAAC;EAED,MAAMc,WAAW,GAAG;IACnB,GAAGV,gBAAgB;IACnBN,SAAS,EAAEW,WAAW;IACtB,YAAY,EAAET,KAAK;IACnBe,GAAG,EAAEzB;EACN,CAAC;EAED,MAAM0B,QAAQ,GAAG9C,MAAM,CAA2B,IAAK,CAAC;EACxDF,eAAe,CAAE,MAAM;IACtB,IAAKqC,SAAS,IAAIW,QAAQ,CAACC,OAAO,EAAG;MACpC1B,yBAAyB,CAAC2B,kBAAkB,CAAEF,QAAQ,CAACC,OAAQ,CAAC;IACjE;EACD,CAAC,EAAE,CAAEZ,SAAS,EAAEd,yBAAyB,CAAG,CAAC;EAE7C,oBACCb,IAAA,CAACI,SAAS;IAACiC,GAAG,EAAGC,QAAU;IAAClB,SAAS,EAAGS,gBAAkB;IAAArB,QAAA,eACzDR,IAAA,CAACK,WAAW;MACXC,WAAW,EAAGA,WAAa;MAC3BC,IAAI,EAAGmB,gBAAgB,CAAE,YAAY,CAAI;MAAAlB,QAAA,EAEvCU,cAAc,gBACflB,IAAA;QAAA,GACMoC,WAAW;QAChBX,QAAQ,EAAGA,QAAU;QACrBF,OAAO,EAAGC,WAAa;QACvB,gBAAeG,SAAW;QAC1Bc,IAAI,EAAC,QAAQ;QACbC,OAAO,EAAGT,aAAe;QAAAzB,QAAA,eAEzBR,IAAA,CAACG,iBAAiB;UAAAK,QAAA,EAAGA;QAAQ,CAAqB;MAAC,CAC5C,CAAC,gBAETR,IAAA,CAACZ,OAAO,CAACuD,KAAK;QACblB,QAAQ,EAAGA,QAAU;QACrBmB,MAAM,eACL5C,IAAA;UACCyC,IAAI,EAAC,QAAQ;UAAA,GACRL,WAAW;UAChBb,OAAO,EAAKsB,KAAK,IAAM;YACtBrB,WAAW,GAAIqB,KAAM,CAAC;YACtB,IAAKA,KAAK,CAACC,gBAAgB,EAAG;cAC7B;YACD;YACAjC,yBAAyB,CAACqB,QAAQ,CAAEZ,KAAM,CAAC;UAC5C;QAAG,CACH,CACD;QACDA,KAAK,EAAGA,KAAO;QAAAd,QAAA,eAEfR,IAAA,CAACG,iBAAiB;UAAAK,QAAA,EAAGA;QAAQ,CAAqB;MAAC,CACrC;IACf,CACW;EAAC,CACJ,CAAC;AAEd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMuC,qCAAqC,GAAGtD,cAAc,CAC3DiB,4BAA4B,EAC5B,8BACD,CAAC;AAED,eAAeqC,qCAAqC","ignoreList":[]}
+{"version":3,"names":["Ariakit","useInstanceId","useLayoutEffect","useMemo","useRef","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","jsx","_jsx","Fragment","_Fragment","ButtonContentView","LabelView","WithToolTip","showTooltip","text","children","placement","ToggleGroupControlOptionBase","props","forwardedRef","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","className","isIcon","value","disabled","otherButtonProps","isPressed","cx","labelViewClasses","labelBlock","itemClasses","buttonView","buttonOnClick","setValue","undefined","commonProps","ref","labelRef","current","setSelectedElement","type","onClick","Radio","onFocusVisible","selectedValueIsEmpty","activeItemIsNotFirstItem","render","ConnectedToggleGroupControlOptionBase"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t| 'id'\n\t\t// due to how the component works, only the `disabled` prop should be used\n\t\t| 'aria-disabled'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tdisabled,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\tconst labelRef = useRef< HTMLDivElement | null >( null );\n\tuseLayoutEffect( () => {\n\t\tif ( isPressed && labelRef.current ) {\n\t\t\ttoggleGroupControlContext.setSelectedElement( labelRef.current );\n\t\t}\n\t}, [ isPressed, toggleGroupControlContext ] );\n\n\treturn (\n\t\t<LabelView ref={ labelRef } className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Ariakit.Radio\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tonFocusVisible={ () => {\n\t\t\t\t\t\t\tconst selectedValueIsEmpty =\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.value === null ||\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.value === '';\n\n\t\t\t\t\t\t\t// Conditions ensure that the first visible focus to a radio group\n\t\t\t\t\t\t\t// without a selected option will not automatically select the option.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t! selectedValueIsEmpty ||\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.activeItemIsNotFirstItem?.()\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trender={ <button type=\"button\" { ...commonProps } /> }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Ariakit.Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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","ignoreList":[]}

package/build-module/toggle-group-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/toggle-group-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\nimport type { TooltipProps } from '../tooltip/types';\n\nexport type ToggleGroupControlOptionBaseProps = {\n\tchildren: ReactNode;\n\t/**\n\t * Style the option as an icon option.\n\t *\n\t * @default false\n\t */\n\tisIcon?: boolean;\n\tvalue: string | number;\n\t/**\n\t * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will\n\t * show the aria-label or the label prop text.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlOptionIconProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value'\n> & {\n\t/**\n\t * Icon displayed as the content of the option. Usually one of the icons from\n\t * the `@wordpress/icons` package, or a custom React `<svg>` icon.\n\t */\n\ticon: JSX.Element;\n\t/**\n\t * The text to accessibly label the icon option. Will also be shown in a tooltip.\n\t */\n\tlabel: string;\n};\n\nexport type ToggleGroupControlOptionProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value' | 'showTooltip'\n> & {\n\t/**\n\t * Label for the option. If needed, the `aria-label` prop can be used in addition\n\t * to specify a different label for assistive technologies.\n\t */\n\tlabel: string;\n};\n\nexport type WithToolTipProps = {\n\t/**\n\t * React children\n\t */\n\tchildren: TooltipProps[ 'children' ];\n\t/**\n\t * Label for the Tooltip component.\n\t */\n\ttext?: string;\n\t/**\n\t * Whether to wrap the control option in a Tooltip component.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * If true, the label will only be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Determines if segments should be rendered with equal widths.\n\t *\n\t * @default false\n\t */\n\tisAdaptiveWidth?: boolean;\n\t/**\n\t * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of\n\t * the available space. This is the recommended style when the options are text-based and not icons.\n\t *\n\t * @default false\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * Whether an option can be deselected by clicking it again.\n\t *\n\t * @default false\n\t */\n\tisDeselectable?: boolean;\n\t/**\n\t * Callback when a segment is selected.\n\t */\n\tonChange?: ( value: string | number | undefined ) => void;\n\t/**\n\t * The selected value.\n\t */\n\tvalue?: string | number;\n\t/**\n\t * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or\n\t * `ToggleGroupControlOptionIcon` components.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The size variant of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type ToggleGroupControlContextProps = {\n\tisDeselectable?: boolean;\n\tbaseId: string;\n\tisBlock: ToggleGroupControlProps[ 'isBlock' ];\n\tsize: ToggleGroupControlProps[ 'size' ];\n\tvalue: ToggleGroupControlProps[ 'value' ];\n\tsetValue: ( newValue: string | number | undefined ) => void;\n\tsetSelectedElement: ( element: HTMLElement | undefined ) => void;\n};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'\n> &\n\tPick< ToggleGroupControlContextProps, 'setSelectedElement' >;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/toggle-group-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\nimport type { TooltipProps } from '../tooltip/types';\n\nexport type ToggleGroupControlOptionBaseProps = {\n\tchildren: ReactNode;\n\t/**\n\t * Style the option as an icon option.\n\t *\n\t * @default false\n\t */\n\tisIcon?: boolean;\n\tvalue: string | number;\n\t/**\n\t * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will\n\t * show the aria-label or the label prop text.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlOptionIconProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value'\n> & {\n\t/**\n\t * Icon displayed as the content of the option. Usually one of the icons from\n\t * the `@wordpress/icons` package, or a custom React `<svg>` icon.\n\t */\n\ticon: JSX.Element;\n\t/**\n\t * The text to accessibly label the icon option. Will also be shown in a tooltip.\n\t */\n\tlabel: string;\n};\n\nexport type ToggleGroupControlOptionProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value' | 'showTooltip'\n> & {\n\t/**\n\t * Label for the option. If needed, the `aria-label` prop can be used in addition\n\t * to specify a different label for assistive technologies.\n\t */\n\tlabel: string;\n};\n\nexport type WithToolTipProps = {\n\t/**\n\t * React children\n\t */\n\tchildren: TooltipProps[ 'children' ];\n\t/**\n\t * Label for the Tooltip component.\n\t */\n\ttext?: string;\n\t/**\n\t * Whether to wrap the control option in a Tooltip component.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * If true, the label will only be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Determines if segments should be rendered with equal widths.\n\t *\n\t * @default false\n\t */\n\tisAdaptiveWidth?: boolean;\n\t/**\n\t * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of\n\t * the available space. This is the recommended style when the options are text-based and not icons.\n\t *\n\t * @default false\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * Whether an option can be deselected by clicking it again.\n\t *\n\t * @default false\n\t */\n\tisDeselectable?: boolean;\n\t/**\n\t * Callback when a segment is selected.\n\t */\n\tonChange?: ( value: string | number | undefined ) => void;\n\t/**\n\t * The selected value.\n\t */\n\tvalue?: string | number;\n\t/**\n\t * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or\n\t * `ToggleGroupControlOptionIcon` components.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The size variant of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type ToggleGroupControlContextProps = {\n\tactiveItemIsNotFirstItem?: () => boolean;\n\tisDeselectable?: boolean;\n\tbaseId: string;\n\tisBlock: ToggleGroupControlProps[ 'isBlock' ];\n\tsize: ToggleGroupControlProps[ 'size' ];\n\tvalue: ToggleGroupControlProps[ 'value' ];\n\tsetValue: ( newValue: string | number | undefined ) => void;\n\tsetSelectedElement: ( element: HTMLElement | undefined ) => void;\n};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'\n> &\n\tPick< ToggleGroupControlContextProps, 'setSelectedElement' >;\n"],"mappings":"","ignoreList":[]}

package/build-module/toolbar/toolbar/index.js

@@ -32,6 +32,9 @@ function UnforwardedToolbar({
       },
       Dropdown: {
         variant: 'toolbar'
+      },
+      Menu: {
+        variant: 'toolbar'
       }
     };
   }, [isVariantDefined]);

package/build-module/toolbar/toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","useMemo","deprecated","ToolbarGroup","ToolbarContainer","ContextSystemProvider","jsx","_jsx","UnforwardedToolbar","className","label","variant","props","ref","isVariantDefined","undefined","contextSystemValue","DropdownMenu","Dropdown","since","alternative","link","title","_title","restProps","isCollapsed","finalClassName","value","children","Toolbar"],"sources":["@wordpress/components/src/toolbar/toolbar/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ToolbarGroup from '../toolbar-group';\nimport ToolbarContainer from './toolbar-container';\nimport type { ToolbarProps } from './types';\nimport type { WordPressComponentProps } from '../../context';\nimport { ContextSystemProvider } from '../../context';\n\nfunction UnforwardedToolbar(\n\t{\n\t\tclassName,\n\t\tlabel,\n\t\tvariant,\n\t\t...props\n\t}: WordPressComponentProps< ToolbarProps, 'div', false >,\n\tref: ForwardedRef< any >\n) {\n\tconst isVariantDefined = variant !== undefined;\n\tconst contextSystemValue = useMemo( () => {\n\t\tif ( isVariantDefined ) {\n\t\t\treturn {};\n\t\t}\n\t\treturn {\n\t\t\tDropdownMenu: {\n\t\t\t\tvariant: 'toolbar',\n\t\t\t},\n\t\t\tDropdown: {\n\t\t\t\tvariant: 'toolbar',\n\t\t\t},\n\t\t};\n\t}, [ isVariantDefined ] );\n\n\tif ( ! label ) {\n\t\tdeprecated( 'Using Toolbar without label prop', {\n\t\t\tsince: '5.6',\n\t\t\talternative: 'ToolbarGroup component',\n\t\t\tlink: 'https://developer.wordpress.org/block-editor/components/toolbar/',\n\t\t} );\n\t\t// Extracting title from `props` because `ToolbarGroup` doesn't accept it.\n\t\tconst { title: _title, ...restProps } = props;\n\t\treturn (\n\t\t\t<ToolbarGroup\n\t\t\t\tisCollapsed={ false }\n\t\t\t\t{ ...restProps }\n\t\t\t\tclassName={ className }\n\t\t\t/>\n\t\t);\n\t}\n\t// `ToolbarGroup` already uses components-toolbar for compatibility reasons.\n\tconst finalClassName = clsx(\n\t\t'components-accessible-toolbar',\n\t\tclassName,\n\t\tvariant && `is-${ variant }`\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextSystemValue }>\n\t\t\t<ToolbarContainer\n\t\t\t\tclassName={ finalClassName }\n\t\t\t\tlabel={ label }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * Renders a toolbar.\n *\n * To add controls, simply pass `ToolbarButton` components as children.\n *\n * ```jsx\n * import { Toolbar, ToolbarButton } from '@wordpress/components';\n * import { formatBold, formatItalic, link } from '@wordpress/icons';\n *\n * function MyToolbar() {\n *   return (\n *     <Toolbar label=\"Options\">\n *       <ToolbarButton icon={ formatBold } label=\"Bold\" />\n *       <ToolbarButton icon={ formatItalic } label=\"Italic\" />\n *       <ToolbarButton icon={ link } label=\"Link\" />\n *     </Toolbar>\n *   );\n * }\n * ```\n */\nexport const Toolbar = forwardRef( UnforwardedToolbar );\nexport default Toolbar;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,OAAOC,gBAAgB,MAAM,qBAAqB;AAGlD,SAASC,qBAAqB,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtD,SAASC,kBAAkBA,CAC1B;EACCC,SAAS;EACTC,KAAK;EACLC,OAAO;EACP,GAAGC;AACmD,CAAC,EACxDC,GAAwB,EACvB;EACD,MAAMC,gBAAgB,GAAGH,OAAO,KAAKI,SAAS;EAC9C,MAAMC,kBAAkB,GAAGf,OAAO,CAAE,MAAM;IACzC,IAAKa,gBAAgB,EAAG;MACvB,OAAO,CAAC,CAAC;IACV;IACA,OAAO;MACNG,YAAY,EAAE;QACbN,OAAO,EAAE;MACV,CAAC;MACDO,QAAQ,EAAE;QACTP,OAAO,EAAE;MACV;IACD,CAAC;EACF,CAAC,EAAE,CAAEG,gBAAgB,CAAG,CAAC;EAEzB,IAAK,CAAEJ,KAAK,EAAG;IACdR,UAAU,CAAE,kCAAkC,EAAE;MAC/CiB,KAAK,EAAE,KAAK;MACZC,WAAW,EAAE,wBAAwB;MACrCC,IAAI,EAAE;IACP,CAAE,CAAC;IACH;IACA,MAAM;MAAEC,KAAK,EAAEC,MAAM;MAAE,GAAGC;IAAU,CAAC,GAAGZ,KAAK;IAC7C,oBACCL,IAAA,CAACJ,YAAY;MACZsB,WAAW,EAAG,KAAO;MAAA,GAChBD,SAAS;MACdf,SAAS,EAAGA;IAAW,CACvB,CAAC;EAEJ;EACA;EACA,MAAMiB,cAAc,GAAG3B,IAAI,CAC1B,+BAA+B,EAC/BU,SAAS,EACTE,OAAO,IAAK,MAAMA,OAAS,EAC5B,CAAC;EAED,oBACCJ,IAAA,CAACF,qBAAqB;IAACsB,KAAK,EAAGX,kBAAoB;IAAAY,QAAA,eAClDrB,IAAA,CAACH,gBAAgB;MAChBK,SAAS,EAAGiB,cAAgB;MAC5BhB,KAAK,EAAGA,KAAO;MACfG,GAAG,EAAGA,GAAK;MAAA,GACND;IAAK,CACV;EAAC,CACoB,CAAC;AAE1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMiB,OAAO,GAAG7B,UAAU,CAAEQ,kBAAmB,CAAC;AACvD,eAAeqB,OAAO","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","useMemo","deprecated","ToolbarGroup","ToolbarContainer","ContextSystemProvider","jsx","_jsx","UnforwardedToolbar","className","label","variant","props","ref","isVariantDefined","undefined","contextSystemValue","DropdownMenu","Dropdown","Menu","since","alternative","link","title","_title","restProps","isCollapsed","finalClassName","value","children","Toolbar"],"sources":["@wordpress/components/src/toolbar/toolbar/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ToolbarGroup from '../toolbar-group';\nimport ToolbarContainer from './toolbar-container';\nimport type { ToolbarProps } from './types';\nimport type { WordPressComponentProps } from '../../context';\nimport { ContextSystemProvider } from '../../context';\n\nfunction UnforwardedToolbar(\n\t{\n\t\tclassName,\n\t\tlabel,\n\t\tvariant,\n\t\t...props\n\t}: WordPressComponentProps< ToolbarProps, 'div', false >,\n\tref: ForwardedRef< any >\n) {\n\tconst isVariantDefined = variant !== undefined;\n\tconst contextSystemValue = useMemo( () => {\n\t\tif ( isVariantDefined ) {\n\t\t\treturn {};\n\t\t}\n\t\treturn {\n\t\t\tDropdownMenu: {\n\t\t\t\tvariant: 'toolbar',\n\t\t\t},\n\t\t\tDropdown: {\n\t\t\t\tvariant: 'toolbar',\n\t\t\t},\n\t\t\tMenu: {\n\t\t\t\tvariant: 'toolbar',\n\t\t\t},\n\t\t};\n\t}, [ isVariantDefined ] );\n\n\tif ( ! label ) {\n\t\tdeprecated( 'Using Toolbar without label prop', {\n\t\t\tsince: '5.6',\n\t\t\talternative: 'ToolbarGroup component',\n\t\t\tlink: 'https://developer.wordpress.org/block-editor/components/toolbar/',\n\t\t} );\n\t\t// Extracting title from `props` because `ToolbarGroup` doesn't accept it.\n\t\tconst { title: _title, ...restProps } = props;\n\t\treturn (\n\t\t\t<ToolbarGroup\n\t\t\t\tisCollapsed={ false }\n\t\t\t\t{ ...restProps }\n\t\t\t\tclassName={ className }\n\t\t\t/>\n\t\t);\n\t}\n\t// `ToolbarGroup` already uses components-toolbar for compatibility reasons.\n\tconst finalClassName = clsx(\n\t\t'components-accessible-toolbar',\n\t\tclassName,\n\t\tvariant && `is-${ variant }`\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextSystemValue }>\n\t\t\t<ToolbarContainer\n\t\t\t\tclassName={ finalClassName }\n\t\t\t\tlabel={ label }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * Renders a toolbar.\n *\n * To add controls, simply pass `ToolbarButton` components as children.\n *\n * ```jsx\n * import { Toolbar, ToolbarButton } from '@wordpress/components';\n * import { formatBold, formatItalic, link } from '@wordpress/icons';\n *\n * function MyToolbar() {\n *   return (\n *     <Toolbar label=\"Options\">\n *       <ToolbarButton icon={ formatBold } label=\"Bold\" />\n *       <ToolbarButton icon={ formatItalic } label=\"Italic\" />\n *       <ToolbarButton icon={ link } label=\"Link\" />\n *     </Toolbar>\n *   );\n * }\n * ```\n */\nexport const Toolbar = forwardRef( UnforwardedToolbar );\nexport default Toolbar;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,OAAOC,gBAAgB,MAAM,qBAAqB;AAGlD,SAASC,qBAAqB,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtD,SAASC,kBAAkBA,CAC1B;EACCC,SAAS;EACTC,KAAK;EACLC,OAAO;EACP,GAAGC;AACmD,CAAC,EACxDC,GAAwB,EACvB;EACD,MAAMC,gBAAgB,GAAGH,OAAO,KAAKI,SAAS;EAC9C,MAAMC,kBAAkB,GAAGf,OAAO,CAAE,MAAM;IACzC,IAAKa,gBAAgB,EAAG;MACvB,OAAO,CAAC,CAAC;IACV;IACA,OAAO;MACNG,YAAY,EAAE;QACbN,OAAO,EAAE;MACV,CAAC;MACDO,QAAQ,EAAE;QACTP,OAAO,EAAE;MACV,CAAC;MACDQ,IAAI,EAAE;QACLR,OAAO,EAAE;MACV;IACD,CAAC;EACF,CAAC,EAAE,CAAEG,gBAAgB,CAAG,CAAC;EAEzB,IAAK,CAAEJ,KAAK,EAAG;IACdR,UAAU,CAAE,kCAAkC,EAAE;MAC/CkB,KAAK,EAAE,KAAK;MACZC,WAAW,EAAE,wBAAwB;MACrCC,IAAI,EAAE;IACP,CAAE,CAAC;IACH;IACA,MAAM;MAAEC,KAAK,EAAEC,MAAM;MAAE,GAAGC;IAAU,CAAC,GAAGb,KAAK;IAC7C,oBACCL,IAAA,CAACJ,YAAY;MACZuB,WAAW,EAAG,KAAO;MAAA,GAChBD,SAAS;MACdhB,SAAS,EAAGA;IAAW,CACvB,CAAC;EAEJ;EACA;EACA,MAAMkB,cAAc,GAAG5B,IAAI,CAC1B,+BAA+B,EAC/BU,SAAS,EACTE,OAAO,IAAI,MAAOA,OAAO,EAC1B,CAAC;EAED,oBACCJ,IAAA,CAACF,qBAAqB;IAACuB,KAAK,EAAGZ,kBAAoB;IAAAa,QAAA,eAClDtB,IAAA,CAACH,gBAAgB;MAChBK,SAAS,EAAGkB,cAAgB;MAC5BjB,KAAK,EAAGA,KAAO;MACfG,GAAG,EAAGA,GAAK;MAAA,GACND;IAAK,CACV;EAAC,CACoB,CAAC;AAE1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMkB,OAAO,GAAG9B,UAAU,CAAEQ,kBAAmB,CAAC;AACvD,eAAesB,OAAO","ignoreList":[]}

package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js

@@ -3,7 +3,7 @@
  */
 import { View } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default (props => /*#__PURE__*/_jsx(View, {
+export default props => /*#__PURE__*/_jsx(View, {
   children: props.children
-}));
+});
 //# sourceMappingURL=toolbar-button-container.native.js.map

package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","jsx","_jsx","props","children"],"sources":["@wordpress/components/src/toolbar/toolbar-button/toolbar-button-container.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\nexport default ( props ) => <View>{ props.children }</View>;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,gBAAiBC,KAAK,iBAAMD,IAAA,CAACF,IAAI;EAAAI,QAAA,EAAGD,KAAK,CAACC;AAAQ,CAAQ,CAAC","ignoreList":[]}
+{"version":3,"names":["View","jsx","_jsx","props","children"],"sources":["@wordpress/components/src/toolbar/toolbar-button/toolbar-button-container.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\nexport default ( props ) => <View>{ props.children }</View>;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,eAAiBC,KAAK,iBAAMD,IAAA,CAACF,IAAI;EAAAI,QAAA,EAAGD,KAAK,CAACC;AAAQ,CAAQ,CAAC","ignoreList":[]}

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

@@ -15,8 +15,7 @@ import ToolbarButton from '../toolbar-button';
 import ToolbarGroupContainer from './toolbar-group-container';
 import ToolbarGroupCollapsed from './toolbar-group-collapsed';
 import ToolbarContext from '../toolbar-context';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function isNestedArray(arr) {
   return Array.isArray(arr) && Array.isArray(arr[0]);
 }

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useContext","ToolbarButton","ToolbarGroupContainer","ToolbarGroupCollapsed","ToolbarContext","jsx","_jsx","jsxs","_jsxs","isNestedArray","arr","Array","isArray","ToolbarGroup","controls","children","className","isCollapsed","title","props","accessibleToolbarState","length","finalClassName","controlSets","label","flatMap","controlSet","indexOfSet","map","control","indexOfControl","containerClassName","undefined","join"],"sources":["@wordpress/components/src/toolbar/toolbar-group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ToolbarButton from '../toolbar-button';\nimport ToolbarGroupContainer from './toolbar-group-container';\nimport ToolbarGroupCollapsed from './toolbar-group-collapsed';\nimport ToolbarContext from '../toolbar-context';\nimport type { ToolbarGroupProps, ToolbarGroupControls } from './types';\n\nfunction isNestedArray< T = any >( arr: T[] | T[][] ): arr is T[][] {\n\treturn Array.isArray( arr ) && Array.isArray( arr[ 0 ] );\n}\n\n/**\n * Renders a collapsible group of controls\n *\n * The `controls` prop accepts an array of sets. A set is an array of controls.\n * Controls have the following shape:\n *\n * ```\n * {\n *   icon: string,\n *   title: string,\n *   subscript: string,\n *   onClick: Function,\n *   isActive: boolean,\n *   isDisabled: boolean\n * }\n * ```\n *\n * For convenience it is also possible to pass only an array of controls. It is\n * then assumed this is the only set.\n *\n * Either `controls` or `children` is required, otherwise this components\n * renders nothing.\n *\n * @param props               Component props.\n * @param [props.controls]    The controls to render in this toolbar.\n * @param [props.children]    Any other things to render inside the toolbar besides the controls.\n * @param [props.className]   Class to set on the container div.\n * @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.\n * @param [props.title]       ARIA label for dropdown menu if is collapsed.\n */\nfunction ToolbarGroup( {\n\tcontrols = [],\n\tchildren,\n\tclassName,\n\tisCollapsed,\n\ttitle,\n\t...props\n}: ToolbarGroupProps ) {\n\t// It'll contain state if `ToolbarGroup` is being used within\n\t// `<Toolbar label=\"label\" />`\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ( ! controls || ! controls.length ) && ! children ) {\n\t\treturn null;\n\t}\n\n\tconst finalClassName = clsx(\n\t\t// Unfortunately, there's legacy code referencing to `.components-toolbar`\n\t\t// So we can't get rid of it\n\t\taccessibleToolbarState\n\t\t\t? 'components-toolbar-group'\n\t\t\t: 'components-toolbar',\n\t\tclassName\n\t);\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets: ToolbarGroupControls[][];\n\tif ( isNestedArray( controls ) ) {\n\t\tcontrolSets = controls;\n\t} else {\n\t\tcontrolSets = [ controls ];\n\t}\n\n\tif ( isCollapsed ) {\n\t\treturn (\n\t\t\t<ToolbarGroupCollapsed\n\t\t\t\tlabel={ title }\n\t\t\t\tcontrols={ controlSets }\n\t\t\t\tclassName={ finalClassName }\n\t\t\t\tchildren={ children }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ToolbarGroupContainer className={ finalClassName } { ...props }>\n\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\tcontrolSet.map( ( control, indexOfControl: number ) => (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tkey={ [ indexOfSet, indexOfControl ].join() }\n\t\t\t\t\t\tcontainerClassName={\n\t\t\t\t\t\t\tindexOfSet > 0 && indexOfControl === 0\n\t\t\t\t\t\t\t\t? 'has-left-divider'\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...control }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t\t{ children }\n\t\t</ToolbarGroupContainer>\n\t);\n}\n\nexport default ToolbarGroup;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,qBAAqB,MAAM,2BAA2B;AAC7D,OAAOC,qBAAqB,MAAM,2BAA2B;AAC7D,OAAOC,cAAc,MAAM,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGhD,SAASC,aAAaA,CAAaC,GAAgB,EAAiB;EACnE,OAAOC,KAAK,CAACC,OAAO,CAAEF,GAAI,CAAC,IAAIC,KAAK,CAACC,OAAO,CAAEF,GAAG,CAAE,CAAC,CAAG,CAAC;AACzD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,YAAYA,CAAE;EACtBC,QAAQ,GAAG,EAAE;EACbC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,KAAK;EACL,GAAGC;AACe,CAAC,EAAG;EACtB;EACA;EACA,MAAMC,sBAAsB,GAAGpB,UAAU,CAAEI,cAAe,CAAC;EAE3D,IAAK,CAAE,CAAEU,QAAQ,IAAI,CAAEA,QAAQ,CAACO,MAAM,KAAM,CAAEN,QAAQ,EAAG;IACxD,OAAO,IAAI;EACZ;EAEA,MAAMO,cAAc,GAAGvB,IAAI;EAC1B;EACA;EACAqB,sBAAsB,GACnB,0BAA0B,GAC1B,oBAAoB,EACvBJ,SACD,CAAC;;EAED;EACA,IAAIO,WAAqC;EACzC,IAAKd,aAAa,CAAEK,QAAS,CAAC,EAAG;IAChCS,WAAW,GAAGT,QAAQ;EACvB,CAAC,MAAM;IACNS,WAAW,GAAG,CAAET,QAAQ,CAAE;EAC3B;EAEA,IAAKG,WAAW,EAAG;IAClB,oBACCX,IAAA,CAACH,qBAAqB;MACrBqB,KAAK,EAAGN,KAAO;MACfJ,QAAQ,EAAGS,WAAa;MACxBP,SAAS,EAAGM,cAAgB;MAC5BP,QAAQ,EAAGA,QAAU;MAAA,GAChBI;IAAK,CACV,CAAC;EAEJ;EAEA,oBACCX,KAAA,CAACN,qBAAqB;IAACc,SAAS,EAAGM,cAAgB;IAAA,GAAMH,KAAK;IAAAJ,QAAA,GAC3DQ,WAAW,EAAEE,OAAO,CAAE,CAAEC,UAAU,EAAEC,UAAU,KAC/CD,UAAU,CAACE,GAAG,CAAE,CAAEC,OAAO,EAAEC,cAAsB,kBAChDxB,IAAA,CAACL,aAAa;MAEb8B,kBAAkB,EACjBJ,UAAU,GAAG,CAAC,IAAIG,cAAc,KAAK,CAAC,GACnC,kBAAkB,GAClBE,SACH;MAAA,GACIH;IAAO,GANN,CAAEF,UAAU,EAAEG,cAAc,CAAE,CAACG,IAAI,CAAC,CAO1C,CACA,CACH,CAAC,EACClB,QAAQ;EAAA,CACY,CAAC;AAE1B;AAEA,eAAeF,YAAY","ignoreList":[]}
+{"version":3,"names":["clsx","useContext","ToolbarButton","ToolbarGroupContainer","ToolbarGroupCollapsed","ToolbarContext","jsx","_jsx","jsxs","_jsxs","isNestedArray","arr","Array","isArray","ToolbarGroup","controls","children","className","isCollapsed","title","props","accessibleToolbarState","length","finalClassName","controlSets","label","flatMap","controlSet","indexOfSet","map","control","indexOfControl","containerClassName","undefined","join"],"sources":["@wordpress/components/src/toolbar/toolbar-group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ToolbarButton from '../toolbar-button';\nimport ToolbarGroupContainer from './toolbar-group-container';\nimport ToolbarGroupCollapsed from './toolbar-group-collapsed';\nimport ToolbarContext from '../toolbar-context';\nimport type { ToolbarGroupProps, ToolbarGroupControls } from './types';\n\nfunction isNestedArray< T = any >( arr: T[] | T[][] ): arr is T[][] {\n\treturn Array.isArray( arr ) && Array.isArray( arr[ 0 ] );\n}\n\n/**\n * Renders a collapsible group of controls\n *\n * The `controls` prop accepts an array of sets. A set is an array of controls.\n * Controls have the following shape:\n *\n * ```\n * {\n *   icon: string,\n *   title: string,\n *   subscript: string,\n *   onClick: Function,\n *   isActive: boolean,\n *   isDisabled: boolean\n * }\n * ```\n *\n * For convenience it is also possible to pass only an array of controls. It is\n * then assumed this is the only set.\n *\n * Either `controls` or `children` is required, otherwise this components\n * renders nothing.\n *\n * @param props               Component props.\n * @param [props.controls]    The controls to render in this toolbar.\n * @param [props.children]    Any other things to render inside the toolbar besides the controls.\n * @param [props.className]   Class to set on the container div.\n * @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.\n * @param [props.title]       ARIA label for dropdown menu if is collapsed.\n */\nfunction ToolbarGroup( {\n\tcontrols = [],\n\tchildren,\n\tclassName,\n\tisCollapsed,\n\ttitle,\n\t...props\n}: ToolbarGroupProps ) {\n\t// It'll contain state if `ToolbarGroup` is being used within\n\t// `<Toolbar label=\"label\" />`\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ( ! controls || ! controls.length ) && ! children ) {\n\t\treturn null;\n\t}\n\n\tconst finalClassName = clsx(\n\t\t// Unfortunately, there's legacy code referencing to `.components-toolbar`\n\t\t// So we can't get rid of it\n\t\taccessibleToolbarState\n\t\t\t? 'components-toolbar-group'\n\t\t\t: 'components-toolbar',\n\t\tclassName\n\t);\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets: ToolbarGroupControls[][];\n\tif ( isNestedArray( controls ) ) {\n\t\tcontrolSets = controls;\n\t} else {\n\t\tcontrolSets = [ controls ];\n\t}\n\n\tif ( isCollapsed ) {\n\t\treturn (\n\t\t\t<ToolbarGroupCollapsed\n\t\t\t\tlabel={ title }\n\t\t\t\tcontrols={ controlSets }\n\t\t\t\tclassName={ finalClassName }\n\t\t\t\tchildren={ children }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ToolbarGroupContainer className={ finalClassName } { ...props }>\n\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\tcontrolSet.map( ( control, indexOfControl: number ) => (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tkey={ [ indexOfSet, indexOfControl ].join() }\n\t\t\t\t\t\tcontainerClassName={\n\t\t\t\t\t\t\tindexOfSet > 0 && indexOfControl === 0\n\t\t\t\t\t\t\t\t? 'has-left-divider'\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...control }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t\t{ children }\n\t\t</ToolbarGroupContainer>\n\t);\n}\n\nexport default ToolbarGroup;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,qBAAqB,MAAM,2BAA2B;AAC7D,OAAOC,qBAAqB,MAAM,2BAA2B;AAC7D,OAAOC,cAAc,MAAM,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGhD,SAASC,aAAaA,CAAaC,GAAgB,EAAiB;EACnE,OAAOC,KAAK,CAACC,OAAO,CAAEF,GAAI,CAAC,IAAIC,KAAK,CAACC,OAAO,CAAEF,GAAG,CAAE,CAAC,CAAG,CAAC;AACzD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,YAAYA,CAAE;EACtBC,QAAQ,GAAG,EAAE;EACbC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,KAAK;EACL,GAAGC;AACe,CAAC,EAAG;EACtB;EACA;EACA,MAAMC,sBAAsB,GAAGpB,UAAU,CAAEI,cAAe,CAAC;EAE3D,IAAK,CAAE,CAAEU,QAAQ,IAAI,CAAEA,QAAQ,CAACO,MAAM,KAAM,CAAEN,QAAQ,EAAG;IACxD,OAAO,IAAI;EACZ;EAEA,MAAMO,cAAc,GAAGvB,IAAI;EAC1B;EACA;EACAqB,sBAAsB,GACnB,0BAA0B,GAC1B,oBAAoB,EACvBJ,SACD,CAAC;;EAED;EACA,IAAIO,WAAqC;EACzC,IAAKd,aAAa,CAAEK,QAAS,CAAC,EAAG;IAChCS,WAAW,GAAGT,QAAQ;EACvB,CAAC,MAAM;IACNS,WAAW,GAAG,CAAET,QAAQ,CAAE;EAC3B;EAEA,IAAKG,WAAW,EAAG;IAClB,oBACCX,IAAA,CAACH,qBAAqB;MACrBqB,KAAK,EAAGN,KAAO;MACfJ,QAAQ,EAAGS,WAAa;MACxBP,SAAS,EAAGM,cAAgB;MAC5BP,QAAQ,EAAGA,QAAU;MAAA,GAChBI;IAAK,CACV,CAAC;EAEJ;EAEA,oBACCX,KAAA,CAACN,qBAAqB;IAACc,SAAS,EAAGM,cAAgB;IAAA,GAAMH,KAAK;IAAAJ,QAAA,GAC3DQ,WAAW,EAAEE,OAAO,CAAE,CAAEC,UAAU,EAAEC,UAAU,KAC/CD,UAAU,CAACE,GAAG,CAAE,CAAEC,OAAO,EAAEC,cAAsB,kBAChDxB,IAAA,CAACL,aAAa;MAEb8B,kBAAkB,EACjBJ,UAAU,GAAG,CAAC,IAAIG,cAAc,KAAK,CAAC,GACnC,kBAAkB,GAClBE,SACH;MAAA,GACIH;IAAO,GANN,CAAEF,UAAU,EAAEG,cAAc,CAAE,CAACG,IAAI,CAAC,CAO1C,CACA,CACH,CAAC,EACClB,QAAQ;EAAA,CACY,CAAC;AAE1B;AAEA,eAAeF,YAAY","ignoreList":[]}

package/build-module/tools-panel/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","StyledField","BaseControlField","StyledHelp","BaseControlHelp","Wrapper","BaseControlWrapper","LabelWrapper","COLORS","CONFIG","rtl","space","toolsPanelGrid","columns","process","env","NODE_ENV","spacing","item","fullWidth","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ToolsPanel","borderWidth","gray","ToolsPanelWithInnerWrapper","ToolsPanelHiddenInnerWrapper","ToolsPanelHeader","ToolsPanelHeading","ToolsPanelItem","ToolsPanelItemPlaceholder","DropdownMenu","ResetLabel","_styled","target","label","theme","accentDarker10","marginLeft","DefaultControlsItem"],"sources":["@wordpress/components/src/tools-panel/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledField as BaseControlField,\n\tStyledHelp as BaseControlHelp,\n\tWrapper as BaseControlWrapper,\n} from '../base-control/styles/base-control-styles';\nimport { LabelWrapper } from '../input-control/styles/input-control-styles';\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../utils/space';\n\nconst toolsPanelGrid = {\n\tcolumns: ( columns: number ) => css`\n\t\tgrid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };\n\t`,\n\tspacing: css`\n\t\tcolumn-gap: ${ space( 4 ) };\n\t\trow-gap: ${ space( 4 ) };\n\t`,\n\titem: {\n\t\tfullWidth: css`\n\t\t\tgrid-column: 1 / -1;\n\t\t`,\n\t},\n};\n\nexport const ToolsPanel = ( columns: number ) => css`\n\t${ toolsPanelGrid.columns( columns ) }\n\t${ toolsPanelGrid.spacing }\n\n\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };\n\tmargin-top: -1px;\n\tpadding: ${ space( 4 ) };\n`;\n\n/**\n * Items injected into a ToolsPanel via a virtual bubbling slot will require\n * an inner dom element to be injected. The following rule allows for the\n * CSS grid display to be re-established.\n */\n\nexport const ToolsPanelWithInnerWrapper = ( columns: number ) => {\n\treturn css`\n\t\t> div:not( :first-of-type ) {\n\t\t\tdisplay: grid;\n\t\t\t${ toolsPanelGrid.columns( columns ) }\n\t\t\t${ toolsPanelGrid.spacing }\n\t\t\t${ toolsPanelGrid.item.fullWidth }\n\t\t}\n\t`;\n};\n\nexport const ToolsPanelHiddenInnerWrapper = css`\n\t> div:not( :first-of-type ) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const ToolsPanelHeader = css`\n\t${ toolsPanelGrid.item.fullWidth }\n\tgap: ${ space( 2 ) };\n\n\t/**\n\t * The targeting of dropdown menu component classes here is a temporary\n\t * measure only.\n\t *\n\t * The following styles should be replaced once the DropdownMenu has been\n\t * refactored and can be targeted via component interpolation.\n\t */\n\t.components-dropdown-menu {\n\t\tmargin: ${ space( -1 ) } 0;\n\t\tline-height: 0;\n\t}\n\t&&&& .components-dropdown-menu__toggle {\n\t\tpadding: 0;\n\t\tmin-width: ${ space( 6 ) };\n\t}\n`;\n\nexport const ToolsPanelHeading = css`\n\tfont-size: inherit;\n\tfont-weight: 500;\n\tline-height: normal;\n\n\t/* Required to meet specificity requirements to ensure zero margin */\n\t&& {\n\t\tmargin: 0;\n\t}\n`;\n\nexport const ToolsPanelItem = css`\n\t${ toolsPanelGrid.item.fullWidth }\n\n\t/* Clear spacing in and around controls added as panel items. */\n\t/* Remove when they can be addressed via context system. */\n\t& > div,\n\t& > fieldset {\n\t\tpadding-bottom: 0;\n\t\tmargin-bottom: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t/* Remove BaseControl components margins and leave spacing to grid layout */\n\t&& ${ BaseControlWrapper } {\n\t\tmargin-bottom: 0;\n\n\t\t/**\n\t\t * To maintain proper spacing within a base control, the field's bottom\n\t\t * margin should only be removed when there is no help text included and\n\t\t * it is therefore the last-child.\n\t\t */\n\t\t${ BaseControlField }:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t${ BaseControlHelp } {\n\t\tmargin-bottom: 0;\n\t}\n\n\t/**\n\t * Standardize InputControl and BaseControl labels with other labels when\n\t * inside ToolsPanel.\n\t *\n\t * This is a temporary fix until the different control components have their\n\t * labels normalized.\n\t */\n\t&& ${ LabelWrapper } {\n\t\tlabel {\n\t\t\tline-height: 1.4em;\n\t\t}\n\t}\n`;\n\nexport const ToolsPanelItemPlaceholder = css`\n\tdisplay: none;\n`;\n\nexport const DropdownMenu = css`\n\tmin-width: 200px;\n`;\n\nexport const ResetLabel = styled.span`\n\tcolor: ${ COLORS.theme.accentDarker10 };\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tline-height: 1.4;\n\t${ rtl( { marginLeft: space( 3 ) } ) }\n\ttext-transform: uppercase;\n`;\n\nexport const DefaultControlsItem = css`\n\tcolor: ${ COLORS.gray[ 900 ] };\n\n\t&&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.gray[ 700 ] };\n\t\topacity: 1;\n\n\t\t&:hover {\n\t\t\tcolor: ${ COLORS.gray[ 700 ] };\n\t\t}\n\n\t\t${ ResetLabel } {\n\t\t\topacity: 0.3;\n\t\t}\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","StyledField","BaseControlField","StyledHelp","BaseControlHelp","Wrapper","BaseControlWrapper","LabelWrapper","COLORS","CONFIG","rtl","space","toolsPanelGrid","columns","process","env","NODE_ENV","spacing","item","fullWidth","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ToolsPanel","borderWidth","gray","ToolsPanelWithInnerWrapper","ToolsPanelHiddenInnerWrapper","ToolsPanelHeader","ToolsPanelHeading","ToolsPanelItem","ToolsPanelItemPlaceholder","DropdownMenu","ResetLabel","_styled","target","label","theme","accentDarker10","marginLeft","DefaultControlsItem"],"sources":["@wordpress/components/src/tools-panel/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledField as BaseControlField,\n\tStyledHelp as BaseControlHelp,\n\tWrapper as BaseControlWrapper,\n} from '../base-control/styles/base-control-styles';\nimport { LabelWrapper } from '../input-control/styles/input-control-styles';\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../utils/space';\n\nconst toolsPanelGrid = {\n\tcolumns: ( columns: number ) => css`\n\t\tgrid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };\n\t`,\n\tspacing: css`\n\t\tcolumn-gap: ${ space( 4 ) };\n\t\trow-gap: ${ space( 4 ) };\n\t`,\n\titem: {\n\t\tfullWidth: css`\n\t\t\tgrid-column: 1 / -1;\n\t\t`,\n\t},\n};\n\nexport const ToolsPanel = ( columns: number ) => css`\n\t${ toolsPanelGrid.columns( columns ) }\n\t${ toolsPanelGrid.spacing }\n\n\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };\n\tmargin-top: -1px;\n\tpadding: ${ space( 4 ) };\n`;\n\n/**\n * Items injected into a ToolsPanel via a virtual bubbling slot will require\n * an inner dom element to be injected. The following rule allows for the\n * CSS grid display to be re-established.\n */\n\nexport const ToolsPanelWithInnerWrapper = ( columns: number ) => {\n\treturn css`\n\t\t> div:not( :first-of-type ) {\n\t\t\tdisplay: grid;\n\t\t\t${ toolsPanelGrid.columns( columns ) }\n\t\t\t${ toolsPanelGrid.spacing }\n\t\t\t${ toolsPanelGrid.item.fullWidth }\n\t\t}\n\t`;\n};\n\nexport const ToolsPanelHiddenInnerWrapper = css`\n\t> div:not( :first-of-type ) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const ToolsPanelHeader = css`\n\t${ toolsPanelGrid.item.fullWidth }\n\tgap: ${ space( 2 ) };\n\n\t/**\n\t * The targeting of dropdown menu component classes here is a temporary\n\t * measure only.\n\t *\n\t * The following styles should be replaced once the DropdownMenu has been\n\t * refactored and can be targeted via component interpolation.\n\t */\n\t.components-dropdown-menu {\n\t\tmargin: ${ space( -1 ) } 0;\n\t\tline-height: 0;\n\t}\n\t&&&& .components-dropdown-menu__toggle {\n\t\tpadding: 0;\n\t\tmin-width: ${ space( 6 ) };\n\t}\n`;\n\nexport const ToolsPanelHeading = css`\n\tfont-size: inherit;\n\tfont-weight: 500;\n\tline-height: normal;\n\n\t/* Required to meet specificity requirements to ensure zero margin */\n\t&& {\n\t\tmargin: 0;\n\t}\n`;\n\nexport const ToolsPanelItem = css`\n\t${ toolsPanelGrid.item.fullWidth }\n\n\t/* Clear spacing in and around controls added as panel items. */\n\t/* Remove when they can be addressed via context system. */\n\t& > div,\n\t& > fieldset {\n\t\tpadding-bottom: 0;\n\t\tmargin-bottom: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t/* Remove BaseControl components margins and leave spacing to grid layout */\n\t&& ${ BaseControlWrapper } {\n\t\tmargin-bottom: 0;\n\n\t\t/**\n\t\t * To maintain proper spacing within a base control, the field's bottom\n\t\t * margin should only be removed when there is no help text included and\n\t\t * it is therefore the last-child.\n\t\t */\n\t\t${ BaseControlField }:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t${ BaseControlHelp } {\n\t\tmargin-bottom: 0;\n\t}\n\n\t/**\n\t * Standardize InputControl and BaseControl labels with other labels when\n\t * inside ToolsPanel.\n\t *\n\t * This is a temporary fix until the different control components have their\n\t * labels normalized.\n\t */\n\t&& ${ LabelWrapper } {\n\t\tlabel {\n\t\t\tline-height: 1.4em;\n\t\t}\n\t}\n`;\n\nexport const ToolsPanelItemPlaceholder = css`\n\tdisplay: none;\n`;\n\nexport const DropdownMenu = css`\n\tmin-width: 200px;\n`;\n\nexport const ResetLabel = styled.span`\n\tcolor: ${ COLORS.theme.accentDarker10 };\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tline-height: 1.4;\n\t${ rtl( { marginLeft: space( 3 ) } ) }\n\ttext-transform: uppercase;\n`;\n\nexport const DefaultControlsItem = css`\n\tcolor: ${ COLORS.gray[ 900 ] };\n\n\t&&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.gray[ 700 ] };\n\t\topacity: 1;\n\n\t\t&:hover {\n\t\t\tcolor: ${ COLORS.gray[ 700 ] };\n\t\t}\n\n\t\t${ ResetLabel } {\n\t\t\topacity: 0.3;\n\t\t}\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}

package/build-module/tools-panel/tools-panel/component.js

@@ -10,8 +10,7 @@ import { ToolsPanelContext } from '../context';
 import { useToolsPanel } from './hook';
 import { Grid } from '../../grid';
 import { contextConnect } from '../../context';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UnconnectedToolsPanel = (props, forwardedRef) => {
   const {
     children,

package/build-module/tools-panel/tools-panel/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["ToolsPanelHeader","ToolsPanelContext","useToolsPanel","Grid","contextConnect","jsx","_jsx","jsxs","_jsxs","UnconnectedToolsPanel","props","forwardedRef","children","label","panelContext","resetAllItems","toggleItem","headingLevel","dropdownMenuProps","toolsPanelProps","columns","ref","Provider","value","resetAll","ToolsPanel"],"sources":["@wordpress/components/src/tools-panel/tools-panel/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ToolsPanelHeader from '../tools-panel-header';\nimport { ToolsPanelContext } from '../context';\nimport { useToolsPanel } from './hook';\nimport { Grid } from '../../grid';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport type { ToolsPanelProps } from '../types';\n\nconst UnconnectedToolsPanel = (\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tlabel,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\theadingLevel,\n\t\tdropdownMenuProps,\n\t\t...toolsPanelProps\n\t} = useToolsPanel( props );\n\n\treturn (\n\t\t<Grid { ...toolsPanelProps } columns={ 2 } ref={ forwardedRef }>\n\t\t\t<ToolsPanelContext.Provider value={ panelContext }>\n\t\t\t\t<ToolsPanelHeader\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tresetAll={ resetAllItems }\n\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</ToolsPanelContext.Provider>\n\t\t</Grid>\n\t);\n};\n\n/**\n * The `ToolsPanel` is a container component that displays its children preceded\n * by a header. The header includes a dropdown menu which is automatically\n * generated from the panel's inner `ToolsPanelItems`.\n *\n * ```jsx\n * import { __ } from '@wordpress/i18n';\n * import {\n *   __experimentalToolsPanel as ToolsPanel,\n *   __experimentalToolsPanelItem as ToolsPanelItem,\n *   __experimentalUnitControl as UnitControl\n * } from '@wordpress/components';\n *\n * function Example() {\n *   const [ height, setHeight ] = useState();\n *   const [ width, setWidth ] = useState();\n *\n *   const resetAll = () => {\n *     setHeight();\n *     setWidth();\n *   }\n *\n *   return (\n *     <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>\n *       <ToolsPanelItem\n *         hasValue={ () => !! height }\n *         label={ __( 'Height' ) }\n *         onDeselect={ () => setHeight() }\n *       >\n *         <UnitControl\n *           label={ __( 'Height' ) }\n *           onChange={ setHeight }\n *           value={ height }\n *         />\n *       </ToolsPanelItem>\n *       <ToolsPanelItem\n *         hasValue={ () => !! width }\n *         label={ __( 'Width' ) }\n *         onDeselect={ () => setWidth() }\n *       >\n *         <UnitControl\n *           label={ __( 'Width' ) }\n *           onChange={ setWidth }\n *           value={ width }\n *         />\n *       </ToolsPanelItem>\n *     </ToolsPanel>\n *   );\n * }\n * ```\n */\nexport const ToolsPanel = contextConnect( UnconnectedToolsPanel, 'ToolsPanel' );\n\nexport default ToolsPanel;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,gBAAgB,MAAM,uBAAuB;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,aAAa,QAAQ,QAAQ;AACtC,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAG/C,MAAMC,qBAAqB,GAAGA,CAC7BC,KAAwD,EACxDC,YAAiC,KAC7B;EACJ,MAAM;IACLC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZC,aAAa;IACbC,UAAU;IACVC,YAAY;IACZC,iBAAiB;IACjB,GAAGC;EACJ,CAAC,GAAGjB,aAAa,CAAEQ,KAAM,CAAC;EAE1B,oBACCJ,IAAA,CAACH,IAAI;IAAA,GAAMgB,eAAe;IAAGC,OAAO,EAAG,CAAG;IAACC,GAAG,EAAGV,YAAc;IAAAC,QAAA,eAC9DJ,KAAA,CAACP,iBAAiB,CAACqB,QAAQ;MAACC,KAAK,EAAGT,YAAc;MAAAF,QAAA,gBACjDN,IAAA,CAACN,gBAAgB;QAChBa,KAAK,EAAGA,KAAO;QACfW,QAAQ,EAAGT,aAAe;QAC1BC,UAAU,EAAGA,UAAY;QACzBC,YAAY,EAAGA,YAAc;QAC7BC,iBAAiB,EAAGA;MAAmB,CACvC,CAAC,EACAN,QAAQ;IAAA,CACiB;EAAC,CACxB,CAAC;AAET,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMa,UAAU,GAAGrB,cAAc,CAAEK,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAegB,UAAU","ignoreList":[]}
+{"version":3,"names":["ToolsPanelHeader","ToolsPanelContext","useToolsPanel","Grid","contextConnect","jsx","_jsx","jsxs","_jsxs","UnconnectedToolsPanel","props","forwardedRef","children","label","panelContext","resetAllItems","toggleItem","headingLevel","dropdownMenuProps","toolsPanelProps","columns","ref","Provider","value","resetAll","ToolsPanel"],"sources":["@wordpress/components/src/tools-panel/tools-panel/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ToolsPanelHeader from '../tools-panel-header';\nimport { ToolsPanelContext } from '../context';\nimport { useToolsPanel } from './hook';\nimport { Grid } from '../../grid';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport type { ToolsPanelProps } from '../types';\n\nconst UnconnectedToolsPanel = (\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tlabel,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\theadingLevel,\n\t\tdropdownMenuProps,\n\t\t...toolsPanelProps\n\t} = useToolsPanel( props );\n\n\treturn (\n\t\t<Grid { ...toolsPanelProps } columns={ 2 } ref={ forwardedRef }>\n\t\t\t<ToolsPanelContext.Provider value={ panelContext }>\n\t\t\t\t<ToolsPanelHeader\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tresetAll={ resetAllItems }\n\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</ToolsPanelContext.Provider>\n\t\t</Grid>\n\t);\n};\n\n/**\n * The `ToolsPanel` is a container component that displays its children preceded\n * by a header. The header includes a dropdown menu which is automatically\n * generated from the panel's inner `ToolsPanelItems`.\n *\n * ```jsx\n * import { __ } from '@wordpress/i18n';\n * import {\n *   __experimentalToolsPanel as ToolsPanel,\n *   __experimentalToolsPanelItem as ToolsPanelItem,\n *   __experimentalUnitControl as UnitControl\n * } from '@wordpress/components';\n *\n * function Example() {\n *   const [ height, setHeight ] = useState();\n *   const [ width, setWidth ] = useState();\n *\n *   const resetAll = () => {\n *     setHeight();\n *     setWidth();\n *   }\n *\n *   return (\n *     <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>\n *       <ToolsPanelItem\n *         hasValue={ () => !! height }\n *         label={ __( 'Height' ) }\n *         onDeselect={ () => setHeight() }\n *       >\n *         <UnitControl\n *           label={ __( 'Height' ) }\n *           onChange={ setHeight }\n *           value={ height }\n *         />\n *       </ToolsPanelItem>\n *       <ToolsPanelItem\n *         hasValue={ () => !! width }\n *         label={ __( 'Width' ) }\n *         onDeselect={ () => setWidth() }\n *       >\n *         <UnitControl\n *           label={ __( 'Width' ) }\n *           onChange={ setWidth }\n *           value={ width }\n *         />\n *       </ToolsPanelItem>\n *     </ToolsPanel>\n *   );\n * }\n * ```\n */\nexport const ToolsPanel = contextConnect( UnconnectedToolsPanel, 'ToolsPanel' );\n\nexport default ToolsPanel;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,gBAAgB,MAAM,uBAAuB;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,aAAa,QAAQ,QAAQ;AACtC,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,MAAMC,qBAAqB,GAAGA,CAC7BC,KAAwD,EACxDC,YAAiC,KAC7B;EACJ,MAAM;IACLC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZC,aAAa;IACbC,UAAU;IACVC,YAAY;IACZC,iBAAiB;IACjB,GAAGC;EACJ,CAAC,GAAGjB,aAAa,CAAEQ,KAAM,CAAC;EAE1B,oBACCJ,IAAA,CAACH,IAAI;IAAA,GAAMgB,eAAe;IAAGC,OAAO,EAAG,CAAG;IAACC,GAAG,EAAGV,YAAc;IAAAC,QAAA,eAC9DJ,KAAA,CAACP,iBAAiB,CAACqB,QAAQ;MAACC,KAAK,EAAGT,YAAc;MAAAF,QAAA,gBACjDN,IAAA,CAACN,gBAAgB;QAChBa,KAAK,EAAGA,KAAO;QACfW,QAAQ,EAAGT,aAAe;QAC1BC,UAAU,EAAGA,UAAY;QACzBC,YAAY,EAAGA,YAAc;QAC7BC,iBAAiB,EAAGA;MAAmB,CACvC,CAAC,EACAN,QAAQ;IAAA,CACiB;EAAC,CACxB,CAAC;AAET,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMa,UAAU,GAAGrB,cAAc,CAAEK,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAegB,UAAU","ignoreList":[]}