@wordpress/components 28.8.3 → 28.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -0
- package/build/toggle-group-control/toggle-group-control/as-radio-group.js +3 -1
- package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js +3 -1
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +2 -0
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
- `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)).
|
|
12
12
|
- `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)).
|
|
13
|
+
- `ToggleGroupControl`: Fix arrow key navigation in RTL ([#65735](https://github.com/WordPress/gutenberg/pull/65735)).
|
|
13
14
|
|
|
14
15
|
## 28.8.0 (2024-09-19)
|
|
15
16
|
|
|
@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("@ariakit/react"));
|
|
|
9
9
|
var Ariakit = _react;
|
|
10
10
|
var _compose = require("@wordpress/compose");
|
|
11
11
|
var _element = require("@wordpress/element");
|
|
12
|
+
var _i18n = require("@wordpress/i18n");
|
|
12
13
|
var _view = require("../../view");
|
|
13
14
|
var _context = _interopRequireDefault(require("../context"));
|
|
14
15
|
var _utils = require("./utils");
|
|
@@ -57,7 +58,8 @@ function UnforwardedToggleGroupControlAsRadioGroup({
|
|
|
57
58
|
const radio = Ariakit.useRadioStore({
|
|
58
59
|
defaultValue,
|
|
59
60
|
value,
|
|
60
|
-
setValue: wrappedOnChangeProp
|
|
61
|
+
setValue: wrappedOnChangeProp,
|
|
62
|
+
rtl: (0, _i18n.isRTL)()
|
|
61
63
|
});
|
|
62
64
|
const selectedValue = (0, _react.useStoreState)(radio, 'value');
|
|
63
65
|
const setValue = radio.setValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","Ariakit","_compose","_element","_view","_context","_interopRequireDefault","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","selectedValue","useStoreState","groupContextValue","useMemo","isBlock","jsx","Provider","RadioGroup","store","render","View","ref","exports","forwardRef"],"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';\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\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} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\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":";;;;;;;AAIA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA0C,IAAAC,OAAA,GAAAH,MAAA;AAM1C,IAAAI,QAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","Ariakit","_compose","_element","_i18n","_view","_context","_interopRequireDefault","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","isRTL","selectedValue","useStoreState","groupContextValue","useMemo","isBlock","jsx","Provider","RadioGroup","store","render","View","ref","exports","forwardRef"],"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\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() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\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":"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","ignoreList":[]}
|
|
@@ -10,6 +10,7 @@ import { useStoreState } from '@ariakit/react';
|
|
|
10
10
|
*/
|
|
11
11
|
import { useInstanceId } from '@wordpress/compose';
|
|
12
12
|
import { forwardRef, useMemo } from '@wordpress/element';
|
|
13
|
+
import { isRTL } from '@wordpress/i18n';
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* Internal dependencies
|
|
@@ -48,7 +49,8 @@ function UnforwardedToggleGroupControlAsRadioGroup({
|
|
|
48
49
|
const radio = Ariakit.useRadioStore({
|
|
49
50
|
defaultValue,
|
|
50
51
|
value,
|
|
51
|
-
setValue: wrappedOnChangeProp
|
|
52
|
+
setValue: wrappedOnChangeProp,
|
|
53
|
+
rtl: isRTL()
|
|
52
54
|
});
|
|
53
55
|
const selectedValue = useStoreState(radio, 'value');
|
|
54
56
|
const setValue = radio.setValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","useStoreState","useInstanceId","forwardRef","useMemo","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","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';\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\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} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\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;;
|
|
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","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\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() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\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;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGtB,aAAa,CAChCuB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BnB,uCAAuC,CAAEW,SAAU,CAAC;;EAErD;EACA;EACA,MAAMS,mBAAmB,GAAGZ,YAAY,GACnCa,CAAyB,IAAM;IACjCb,YAAY,CAAEa,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG/B,OAAO,CAACgC,aAAa,CAAE;IACpCL,YAAY;IACZT,KAAK;IACLe,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE7B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAM8B,aAAa,GAAGlC,aAAa,CAAE8B,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAGhC,OAAO,CAChC,OACG;IACDsB,MAAM;IACNW,OAAO,EAAE,CAAExB,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEiB,aAAa;IACpBF;EACD,CAAC,CAAoC,EACtC,CAAEP,MAAM,EAAEb,eAAe,EAAEI,IAAI,EAAEkB,aAAa,EAAEF,QAAQ,CACzD,CAAC;EAED,oBACCvB,IAAA,CAACH,yBAAyB,CAAC+B,QAAQ;IAACpB,KAAK,EAAGkB,iBAAmB;IAAAxB,QAAA,eAC9DF,IAAA,CAACV,OAAO,CAACuC,UAAU;MAClBC,KAAK,EAAGT,KAAO;MACf,cAAajB,KAAO;MACpB2B,MAAM,eAAG/B,IAAA,CAACJ,IAAI,IAAE,CAAG;MAAA,GACdgB,UAAU;MACfF,EAAE,EAAGM,MAAQ;MACbgB,GAAG,EAAGnB,YAAc;MAAAX,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEA,OAAO,MAAMa,8BAA8B,GAAGtB,UAAU,CACvDQ,yCACD,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"as-radio-group.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"as-radio-group.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,kCAAkC,EAElC,MAAM,UAAU,CAAC;AA8ElB,eAAO,MAAM,8BAA8B,uUAE1C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "28.8.
|
|
3
|
+
"version": "28.8.4",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"publishConfig": {
|
|
85
85
|
"access": "public"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "07c75154341d1e5a1b8aaa1c226029b6666a52a9"
|
|
88
88
|
}
|
|
@@ -10,6 +10,7 @@ import { useStoreState } from '@ariakit/react';
|
|
|
10
10
|
*/
|
|
11
11
|
import { useInstanceId } from '@wordpress/compose';
|
|
12
12
|
import { forwardRef, useMemo } from '@wordpress/element';
|
|
13
|
+
import { isRTL } from '@wordpress/i18n';
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* Internal dependencies
|
|
@@ -65,6 +66,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
|
|
|
65
66
|
defaultValue,
|
|
66
67
|
value,
|
|
67
68
|
setValue: wrappedOnChangeProp,
|
|
69
|
+
rtl: isRTL(),
|
|
68
70
|
} );
|
|
69
71
|
|
|
70
72
|
const selectedValue = useStoreState( radio, 'value' );
|