@wordpress/components 28.8.4 → 28.8.6

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

@@ -66,7 +66,6 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     value,
     children,
     showTooltip = false,
-    onFocus: onFocusProp,
     disabled,
     ...otherButtonProps
   } = buttonProps;
@@ -101,7 +100,6 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
       children: isDeselectable ? /*#__PURE__*/_jsx("button", {
         ...commonProps,
         disabled: disabled,
-        onFocus: onFocusProp,
         "aria-pressed": isPressed,
         type: "button",
         onClick: buttonOnClick,
@@ -110,16 +108,16 @@ 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: () => {
+          // Conditions ensure that the first visible focus to a radio group
+          // without a selected option will not automatically select the option.
+          if (toggleGroupControlContext.value !== null || 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","motion","useReducedMotion","useInstanceId","useMemo","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","placement","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","className","isIcon","value","onFocus","onFocusProp","disabled","otherButtonProps","isPressed","cx","labelViewClasses","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","type","onClick","Radio","render","event","defaultPrevented","div","layout","layoutRoot","transition","role","layoutId","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';\nimport { motion } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useInstanceId } from '@wordpress/compose';\nimport { useMemo } 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 REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\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 shouldReduceMotion = useReducedMotion();\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\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\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\treturn (\n\t\t<LabelView 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\t{ /* Animated backdrop using framer motion's shared layout animation */ }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div layout layoutRoot>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t) : null }\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":[]}
+{"version":3,"names":["Ariakit","motion","useReducedMotion","useInstanceId","useMemo","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","placement","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","className","isIcon","value","disabled","otherButtonProps","isPressed","cx","labelViewClasses","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","type","onClick","Radio","onFocusVisible","activeItemIsNotFirstItem","render","div","layout","layoutRoot","transition","role","layoutId","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';\nimport { motion } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useInstanceId } from '@wordpress/compose';\nimport { useMemo } 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 REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\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 shouldReduceMotion = useReducedMotion();\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\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\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\treturn (\n\t\t<LabelView 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\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\ttoggleGroupControlContext.value !== null ||\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\t{ /* Animated backdrop using framer motion's shared layout animation */ }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div layout layoutRoot>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t) : null }\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};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'\n>;\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};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'\n>;\n"],"mappings":"","ignoreList":[]}

package/build-module/tooltip/index.js

@@ -87,9 +87,13 @@ function UnforwardedTooltip(props, ref) {
   // TODO: this is a temporary workaround to minimize the effects of the
   // Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
   // the tooltip anchor anymore since 0.4.0, so we need to add it manually.
+  // The `aria-describedby` attribute is added only if the anchor doesn't have
+  // one already, and if the tooltip text is not the same as the anchor's
+  // `aria-label`
   // See: https://github.com/WordPress/gutenberg/pull/64066
+  // See: https://github.com/WordPress/gutenberg/pull/65989
   function addDescribedById(element) {
-    return describedById && mounted ? cloneElement(element, {
+    return describedById && mounted && element.props['aria-describedby'] === undefined && element.props['aria-label'] !== text ? cloneElement(element, {
       'aria-describedby': describedById
     }) : element;
   }

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","useStoreState","clsx","useInstanceId","Children","useContext","createContext","forwardRef","cloneElement","deprecated","Shortcut","positionToPlacement","jsx","_jsx","jsxs","_jsxs","TooltipInternalContext","isNestedInTooltip","TOOLTIP_DELAY","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","baseId","Tooltip","describedById","undefined","isOnlyChild","count","process","env","NODE_ENV","console","error","computedPlacement","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","Role","render","addDescribedById","element","Provider","value","TooltipAnchor","onClick","hide","store","unmountOnHide","gutter","id","overflowPadding"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text || shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement || 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = useStoreState( tooltipStore, 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById && mounted\n\t\t\t? cloneElement( element, { 'aria-describedby': describedById } )\n\t\t\t: element;\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={\n\t\t\t\t\tisOnlyChild ? addDescribedById( children ) : undefined\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text || shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","useStoreState","clsx","useInstanceId","Children","useContext","createContext","forwardRef","cloneElement","deprecated","Shortcut","positionToPlacement","jsx","_jsx","jsxs","_jsxs","TooltipInternalContext","isNestedInTooltip","TOOLTIP_DELAY","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","baseId","Tooltip","describedById","undefined","isOnlyChild","count","process","env","NODE_ENV","console","error","computedPlacement","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","Role","render","addDescribedById","element","Provider","value","TooltipAnchor","onClick","hide","store","unmountOnHide","gutter","id","overflowPadding"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text || shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement || 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = useStoreState( tooltipStore, 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// The `aria-describedby` attribute is added only if the anchor doesn't have\n\t// one already, and if the tooltip text is not the same as the anchor's\n\t// `aria-label`\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\t// See: https://github.com/WordPress/gutenberg/pull/65989\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById &&\n\t\t\tmounted &&\n\t\t\telement.props[ 'aria-describedby' ] === undefined &&\n\t\t\telement.props[ 'aria-label' ] !== text\n\t\t\t? cloneElement( element, { 'aria-describedby': describedById } )\n\t\t\t: element;\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={\n\t\t\t\t\tisOnlyChild ? addDescribedById( children ) : undefined\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text || shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}

package/build-style/style-rtl.css

@@ -1132,22 +1132,22 @@ body.is-dragging-components-draggable {
   opacity: 0;
   transform: scale(0.9);
 }
-.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
 }
 @media (prefers-reduced-motion) {
-  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+  .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
     transition: none;
   }
 }
-.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
   opacity: 1;
   transform: scale(1);
   transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
 }
 @media (prefers-reduced-motion) {
-  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+  .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
     transition: none;
   }
 }

package/build-style/style.css

@@ -1137,22 +1137,22 @@ body.is-dragging-components-draggable {
   opacity: 0;
   transform: scale(0.9);
 }
-.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
 }
 @media (prefers-reduced-motion) {
-  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+  .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
     transition: none;
   }
 }
-.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
   opacity: 1;
   transform: scale(1);
   transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
 }
 @media (prefers-reduced-motion) {
-  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+  .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
     transition: none;
   }
 }

package/build-types/composite/group-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"group-label.d.ts","sourceRoot":"","sources":["../../src/composite/group-label.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,mBAAmB,mRAY7B,CAAC"}
+{"version":3,"file":"group-label.d.ts","sourceRoot":"","sources":["../../src/composite/group-label.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,mBAAmB,mRAc7B,CAAC"}

package/build-types/composite/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composite/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAqB1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2DpB;;;;;;;;;;;;;;;OAeG;;;;IAIH;;;;;;;;;;;;;;;;;OAiBG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;OAsBG;;;;IAEH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;CAKJ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composite/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAqB1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgEpB;;;;;;;;;;;;;;;OAeG;;;;IAIH;;;;;;;;;;;;;;;;;OAiBG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;OAsBG;;;;IAEH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;CAKJ,CAAC"}

package/build-types/composite/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/composite/item.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,aAAa,sRAYvB,CAAC"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/composite/item.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,aAAa,sRA8BvB,CAAC"}

package/build-types/composite/test/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/composite/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composite/test/index.tsx"],"names":[],"mappings":""}

package/build-types/date-time/date/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-time/date/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAahD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAE,EAC3B,WAAW,EACX,QAAQ,EACR,MAAW,EACX,aAAa,EACb,gBAAgB,EAChB,WAAW,EAAE,YAAgB,GAC7B,EAAE,eAAe,+BAkMjB;AAmGD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-time/date/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAahD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAE,EAC3B,WAAW,EACX,QAAQ,EACR,MAAW,EACX,aAAa,EACb,gBAAgB,EAChB,WAAW,EAAE,YAAgB,GAC7B,EAAE,eAAe,+BAoMjB;AAmGD,eAAe,UAAU,CAAC"}

package/build-types/drop-zone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BA0FxD;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BAyFxD;AAED,eAAe,iBAAiB,CAAC"}

package/build-types/palette-edit/index.d.ts

@@ -1,4 +1,7 @@
 import type { PaletteEditProps, PaletteElement } from './types';
+export declare function deduplicateElementSlugs<T extends PaletteElement>(elements: T[]): (T & {
+    slug: string;
+})[];
 /**
  * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.

package/build-types/palette-edit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/palette-edit/index.tsx"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAOX,gBAAgB,EAChB,cAAc,EACd,MAAM,SAAS,CAAC;AAejB;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACxC,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,MAAM;;;EAwBlB;AA6ND;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAE,EAC5B,SAAS,EACT,MAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,wBAA4B,EAC5B,YAAY,EACZ,mBAAmB,EACnB,QAAQ,EACR,UAAe,EACf,YAAY,GACZ,EAAE,gBAAgB,+BA8OlB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/palette-edit/index.tsx"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAMX,gBAAgB,EAChB,cAAc,EACd,MAAM,SAAS,CAAC;AAkBjB,wBAAgB,uBAAuB,CAAE,CAAC,SAAS,cAAc,EAChE,QAAQ,EAAE,CAAC,EAAE;;KAgBb;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACxC,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,MAAM;;;EAwBlB;AAiOD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAE,EAC5B,SAAS,EACT,MAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,wBAA4B,EAC5B,YAAY,EACZ,mBAAmB,EACnB,QAAQ,EACR,UAAe,EACf,YAAY,GACZ,EAAE,gBAAgB,+BA8OlB;AAED,eAAe,WAAW,CAAC"}

package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map

@@ -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":"AAqBA,OAAO,KAAK,EACX,kCAAkC,EAElC,MAAM,UAAU,CAAC;AA8ElB,eAAO,MAAM,8BAA8B,uUAE1C,CAAC"}
+{"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;AAgFlB,eAAO,MAAM,8BAA8B,uUAE1C,CAAC"}

package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,KAAK,EACX,iCAAiC,EAEjC,MAAM,UAAU,CAAC;AAmKlB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,qCAAqC,2RAG1C,CAAC;AAEF,eAAe,qCAAqC,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,KAAK,EACX,iCAAiC,EAEjC,MAAM,UAAU,CAAC;AA+JlB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,qCAAqC,2RAG1C,CAAC;AAEF,eAAe,qCAAqC,CAAC"}

package/build-types/toggle-group-control/types.d.ts

@@ -115,6 +115,7 @@ export type ToggleGroupControlProps = Pick<BaseControlProps, 'help' | '__nextHas
     __next40pxDefaultSize?: boolean;
 };
 export type ToggleGroupControlContextProps = {
+    activeItemIsNotFirstItem?: () => boolean;
     isDeselectable?: boolean;
     baseId: string;
     isBlock: ToggleGroupControlProps['isBlock'];

package/build-types/toggle-group-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/toggle-group-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CACnD,iCAAiC,EACjC,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC/C,iCAAiC,EACjC,OAAO,GAAG,aAAa,CACvB,GAAG;IACH;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAE,UAAU,CAAE,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACzC,gBAAgB,EAChB,MAAM,GAAG,yBAAyB,CAClC,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACtC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,uBAAuB,CAAE,SAAS,CAAE,CAAC;IAC9C,IAAI,EAAE,uBAAuB,CAAE,MAAM,CAAE,CAAC;IACxC,KAAK,EAAE,uBAAuB,CAAE,OAAO,CAAE,CAAC;IAC1C,QAAQ,EAAE,CAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,IAAI,CACpD,uBAAuB,EACvB,UAAU,GAAG,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACxE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/toggle-group-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CACnD,iCAAiC,EACjC,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC/C,iCAAiC,EACjC,OAAO,GAAG,aAAa,CACvB,GAAG;IACH;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAE,UAAU,CAAE,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACzC,gBAAgB,EAChB,MAAM,GAAG,yBAAyB,CAClC,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACtC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC5C,wBAAwB,CAAC,EAAE,MAAM,OAAO,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,uBAAuB,CAAE,SAAS,CAAE,CAAC;IAC9C,IAAI,EAAE,uBAAuB,CAAE,MAAM,CAAE,CAAC;IACxC,KAAK,EAAE,uBAAuB,CAAE,OAAO,CAAE,CAAC;IAC1C,QAAQ,EAAE,CAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,IAAI,CACpD,uBAAuB,EACvB,UAAU,GAAG,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACxE,CAAC"}

package/build-types/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":"AAoBA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EAEZ,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AAmHjC,eAAO,MAAM,OAAO,8FAAmC,CAAC;AAExD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":"AAoBA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EAEZ,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AA0HjC,eAAO,MAAM,OAAO,8FAAmC,CAAC;AAExD,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.8.4",
+	"version": "28.8.6",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "07c75154341d1e5a1b8aaa1c226029b6666a52a9"
+	"gitHead": "b7af02f8431034ee19cdc33dd105d21705823eed"
 }

package/src/composite/group-label.tsx

@@ -20,11 +20,13 @@ export const CompositeGroupLabel = forwardRef<
 	WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
 >( function CompositeGroupLabel( props, ref ) {
 	const context = useCompositeContext();
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
 	return (
-		<Ariakit.CompositeGroupLabel
-			store={ context.store as Ariakit.CompositeStore }
-			{ ...props }
-			ref={ ref }
-		/>
+		<Ariakit.CompositeGroupLabel store={ store } { ...props } ref={ ref } />
 	);
 } );

package/src/composite/group.tsx

@@ -20,11 +20,11 @@ export const CompositeGroup = forwardRef<
 	WordPressComponentProps< CompositeGroupProps, 'div', false >
 >( function CompositeGroup( props, ref ) {
 	const context = useCompositeContext();
-	return (
-		<Ariakit.CompositeGroup
-			store={ context.store as Ariakit.CompositeStore }
-			{ ...props }
-			ref={ ref }
-		/>
-	);
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
 } );

package/src/composite/hover.tsx

@@ -20,11 +20,11 @@ export const CompositeHover = forwardRef<
 	WordPressComponentProps< CompositeHoverProps, 'div', false >
 >( function CompositeHover( props, ref ) {
 	const context = useCompositeContext();
-	return (
-		<Ariakit.CompositeHover
-			store={ context.store as Ariakit.CompositeStore }
-			{ ...props }
-			ref={ ref }
-		/>
-	);
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
 } );

package/src/composite/index.tsx

@@ -73,7 +73,10 @@ export const Composite = Object.assign(
 		},
 		ref
 	) {
-		const store = Ariakit.useCompositeStore( {
+		// @ts-expect-error The store prop is undocumented and only used by the
+		// legacy compat layer.
+		const storeProp = props.store as Ariakit.CompositeStore;
+		const internalStore = Ariakit.useCompositeStore( {
 			activeId,
 			defaultActiveId,
 			setActiveId,
@@ -85,6 +88,8 @@ export const Composite = Object.assign(
 			rtl,
 		} );
 
+		const store = storeProp ?? internalStore;
+
 		const contextValue = useMemo(
 			() => ( {
 				store,

package/src/composite/item.tsx

@@ -20,9 +20,27 @@ export const CompositeItem = forwardRef<
 	WordPressComponentProps< CompositeItemProps, 'button', false >
 >( function CompositeItem( props, ref ) {
 	const context = useCompositeContext();
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	// If the active item is not connected, Composite may end up in a state
+	// where none of the items are tabbable. In this case, we force all items to
+	// be tabbable, so that as soon as an item received focus, it becomes active
+	// and Composite goes back to working as expected.
+	const tabbable = Ariakit.useStoreState( store, ( state ) => {
+		return (
+			state?.activeId !== null &&
+			! store?.item( state?.activeId )?.element?.isConnected
+		);
+	} );
+
 	return (
 		<Ariakit.CompositeItem
-			store={ context.store as Ariakit.CompositeStore }
+			store={ store }
+			tabbable={ tabbable }
 			{ ...props }
 			ref={ ref }
 		/>

package/src/composite/row.tsx

@@ -20,11 +20,11 @@ export const CompositeRow = forwardRef<
 	WordPressComponentProps< CompositeRowProps, 'div', false >
 >( function CompositeRow( props, ref ) {
 	const context = useCompositeContext();
-	return (
-		<Ariakit.CompositeRow
-			store={ context.store as Ariakit.CompositeStore }
-			{ ...props }
-			ref={ ref }
-		/>
-	);
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;
 } );

package/src/composite/test/index.tsx

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { queryByAttribute, render, screen } from '@testing-library/react';
+import { click, press, waitFor } from '@ariakit/test';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Composite } from '..';
+
+// This is necessary because of how Ariakit calculates page up and
+// page down. Without this, nothing has a height, and so paging up
+// and down doesn't behave as expected in tests.
+
+let clientHeightSpy: jest.SpiedGetter<
+	typeof HTMLElement.prototype.clientHeight
+>;
+
+beforeAll( () => {
+	clientHeightSpy = jest
+		.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
+		.mockImplementation( function getClientHeight( this: HTMLElement ) {
+			if ( this.tagName === 'BODY' ) {
+				return window.outerHeight;
+			}
+			return 50;
+		} );
+} );
+
+afterAll( () => {
+	clientHeightSpy?.mockRestore();
+} );
+
+async function renderAndValidate( ...args: Parameters< typeof render > ) {
+	const view = render( ...args );
+	await waitFor( () => {
+		const activeButton = queryByAttribute(
+			'data-active-item',
+			view.baseElement,
+			'true'
+		);
+		expect( activeButton ).not.toBeNull();
+	} );
+	return view;
+}
+
+function RemoveItemTest( props: ComponentProps< typeof Composite > ) {
+	const [ showThirdItem, setShowThirdItem ] = useState( true );
+	return (
+		<>
+			<button>Focus trap before composite</button>
+			<Composite { ...props }>
+				<Composite.Item>Item 1</Composite.Item>
+				<Composite.Item>Item 2</Composite.Item>
+				{ showThirdItem && <Composite.Item>Item 3</Composite.Item> }
+			</Composite>
+			<button onClick={ () => setShowThirdItem( ( value ) => ! value ) }>
+				Toggle third item
+			</button>
+		</>
+	);
+}
+
+describe( 'Composite', () => {
+	it( 'should remain focusable even when there are no elements in the DOM associated with the currently active ID', async () => {
+		await renderAndValidate( <RemoveItemTest /> );
+
+		const toggleButton = screen.getByRole( 'button', {
+			name: 'Toggle third item',
+		} );
+
+		await press.Tab();
+		await press.Tab();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 1' } )
+		).toHaveFocus();
+
+		await press.ArrowRight();
+		await press.ArrowRight();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 3' } )
+		).toHaveFocus();
+
+		await click( toggleButton );
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Item 3' } )
+		).not.toBeInTheDocument();
+
+		await press.ShiftTab();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 2' } )
+		).toHaveFocus();
+
+		await click( toggleButton );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 3' } )
+		).toBeVisible();
+
+		await press.ShiftTab();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 2' } )
+		).toHaveFocus();
+
+		await press.ArrowRight();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 3' } )
+		).toHaveFocus();
+	} );
+} );

package/src/composite/typeahead.tsx

@@ -20,11 +20,11 @@ export const CompositeTypeahead = forwardRef<
 	WordPressComponentProps< CompositeTypeaheadProps, 'div', false >
 >( function CompositeTypeahead( props, ref ) {
 	const context = useCompositeContext();
-	return (
-		<Ariakit.CompositeTypeahead
-			store={ context.store as Ariakit.CompositeStore }
-			{ ...props }
-			ref={ ref }
-		/>
-	);
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;
 } );