@wordpress/components 28.7.0 → 28.8.1-next.1f6eadc42.0

package/build-module/tabs/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","COLORS","CONFIG","space","TabListWrapper","_styled","process","env","NODE_ENV","target","label","theme","accent","gray","Tab","foreground","ui","textDisabled","radiusSmall","TabPanel"],"sources":["@wordpress/components/src/tabs/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\nimport { space } from '../utils/space';\n\nexport const TabListWrapper = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: stretch;\n\tflex-direction: row;\n\ttext-align: center;\n\n\t&[aria-orientation='vertical'] {\n\t\tflex-direction: column;\n\t\ttext-align: start;\n\t}\n\n\t@media not ( prefers-reduced-motion: reduce ) {\n\t\t&.is-animation-enabled::after {\n\t\t\ttransition-property: left, top, width, height;\n\t\t\ttransition-duration: 0.2s;\n\t\t\ttransition-timing-function: ease-out;\n\t\t}\n\t}\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\n\t\t// Windows high contrast mode.\n\t\toutline: 2px solid transparent;\n\t\toutline-offset: -1px;\n\t}\n\t&:not( [aria-orientation='vertical'] )::after {\n\t\tbottom: 0;\n\t\tleft: var( --indicator-left );\n\t\twidth: var( --indicator-width );\n\t\theight: 0;\n\t\tborder-bottom: var( --wp-admin-border-width-focus ) solid\n\t\t\t${ COLORS.theme.accent };\n\t}\n\t&[aria-orientation='vertical']::after {\n\t\tz-index: -1;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\ttop: var( --indicator-top );\n\t\theight: var( --indicator-height );\n\t\tbackground-color: ${ COLORS.theme.gray[ 100 ] };\n\t}\n`;\n\nexport const Tab = styled( Ariakit.Tab )`\n\t& {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tposition: relative;\n\t\tborder-radius: 0;\n\t\tmin-height: ${ space(\n\t\t\t12\n\t\t) }; // Avoid fixed height to allow for long strings that go in multiple lines.\n\t\theight: auto;\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tbox-shadow: none;\n\t\tcursor: pointer;\n\t\tline-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.\n\t\tpadding: ${ space( 4 ) };\n\t\tmargin-left: 0;\n\t\tfont-weight: 500;\n\t\ttext-align: inherit;\n\t\thyphens: auto;\n\t\tcolor: ${ COLORS.theme.foreground };\n\n\t\t&[aria-disabled='true'] {\n\t\t\tcursor: default;\n\t\t\tcolor: ${ COLORS.ui.textDisabled };\n\t\t}\n\n\t\t&:not( [aria-disabled='true'] ):hover {\n\t\t\tcolor: ${ COLORS.theme.accent };\n\t\t}\n\n\t\t&:focus:not( :disabled ) {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t// Focus.\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: ${ space( 3 ) };\n\t\t\tright: ${ space( 3 ) };\n\t\t\tbottom: ${ space( 3 ) };\n\t\t\tleft: ${ space( 3 ) };\n\t\t\tpointer-events: none;\n\n\t\t\t// Draw the indicator.\n\t\t\t// Outline works for Windows high contrast mode as well.\n\t\t\toutline: var( --wp-admin-border-width-focus ) solid\n\t\t\t\t${ COLORS.theme.accent };\n\t\t\tborder-radius: ${ CONFIG.radiusSmall };\n\n\t\t\t// Animation\n\t\t\topacity: 0;\n\n\t\t\t@media not ( prefers-reduced-motion ) {\n\t\t\t\ttransition: opacity 0.1s linear;\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible::before {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t[aria-orientation='vertical'] & {\n\t\tmin-height: ${ space(\n\t\t\t10\n\t\t) }; // Avoid fixed height to allow for long strings that go in multiple lines.\n\t}\n`;\n\nexport const TabPanel = styled( Ariakit.TabPanel )`\n\t&:focus {\n\t\tbox-shadow: none;\n\t\toutline: none;\n\t}\n\n\t&:focus-visible {\n\t\tbox-shadow: 0 0 0 var( --wp-admin-border-width-focus )\n\t\t\t${ COLORS.theme.accent };\n\t\t// Windows high contrast mode.\n\t\toutline: 2px solid transparent;\n\t\toutline-offset: 0;\n\t}\n`;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,MAAM,QAAQ,UAAU;AACzC,SAASC,KAAK,QAAQ,gBAAgB;AAEtC,OAAO,MAAMC,cAAc,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,6nBAkCrBT,MAAM,CAACU,KAAK,CAACC,MAAM,wJAQFX,MAAM,CAACU,KAAK,CAACE,IAAI,CAAE,GAAG,CAAE,UAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,49JAE9C;AAED,OAAO,MAAMM,GAAG,gBAAGT,OAAA,CAAQL,OAAO,CAACc,GAAG,EAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,2FAMvBP,KAAK,CACnB,EACD,CAAC,6GAOWA,KAAK,CAAE,CAAE,CAAC,2EAKZF,MAAM,CAACU,KAAK,CAACI,UAAU,oDAItBd,MAAM,CAACe,EAAE,CAACC,YAAY,oDAItBhB,MAAM,CAACU,KAAK,CAACC,MAAM,4HAarBT,KAAK,CAAE,CAAE,CAAC,aACRA,KAAK,CAAE,CAAE,CAAC,cACTA,KAAK,CAAE,CAAE,CAAC,YACZA,KAAK,CAAE,CAAE,CAAC,8EAMfF,MAAM,CAACU,KAAK,CAACC,MAAM,qBACLV,MAAM,CAACgB,WAAW,uKAgBtBf,KAAK,CACnB,EACD,CAAC,UAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,49JAEF;AAED,OAAO,MAAMW,QAAQ,gBAAGd,OAAA,CAAQL,OAAO,CAACmB,QAAQ,EAAAb,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,iHAQ5CT,MAAM,CAACU,KAAK,CAACC,MAAM,yDAAAN,OAAA,CAAAC,GAAA,CAAAC,QAAA,49JAKxB","ignoreList":[]}
+{"version":3,"names":["Ariakit","COLORS","CONFIG","space","TabListWrapper","_styled","process","env","NODE_ENV","target","label","theme","accent","gray","Tab","foreground","ui","textDisabled","radiusSmall","TabPanel"],"sources":["@wordpress/components/src/tabs/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\nimport { space } from '../utils/space';\n\nexport const TabListWrapper = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: stretch;\n\tflex-direction: row;\n\ttext-align: center;\n\n\t&[aria-orientation='vertical'] {\n\t\tflex-direction: column;\n\t\ttext-align: start;\n\t}\n\n\t@media not ( prefers-reduced-motion ) {\n\t\t&.is-animation-enabled::after {\n\t\t\ttransition-property: transform;\n\t\t\ttransition-duration: 0.2s;\n\t\t\ttransition-timing-function: ease-out;\n\t\t}\n\t}\n\t--direction-factor: 1;\n\t--direction-origin-x: left;\n\t--indicator-start: var( --indicator-left );\n\t&:dir( rtl ) {\n\t\t--direction-factor: -1;\n\t\t--direction-origin-x: right;\n\t\t--indicator-start: var( --indicator-right );\n\t}\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t\ttransform-origin: var( --direction-origin-x ) top;\n\n\t\t// Windows high contrast mode.\n\t\toutline: 2px solid transparent;\n\t\toutline-offset: -1px;\n\t}\n\n\t/* Using a large value to avoid antialiasing rounding issues\n\t\t\twhen scaling in the transform, see: https://stackoverflow.com/a/52159123 */\n\t--antialiasing-factor: 100;\n\t&:not( [aria-orientation='vertical'] ) {\n\t\t&::after {\n\t\t\tbottom: 0;\n\t\t\theight: 0;\n\t\t\twidth: calc( var( --antialiasing-factor ) * 1px );\n\t\t\ttransform: translateX(\n\t\t\t\t\tcalc(\n\t\t\t\t\t\tvar( --indicator-start ) * var( --direction-factor ) *\n\t\t\t\t\t\t\t1px\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\tscaleX(\n\t\t\t\t\tcalc(\n\t\t\t\t\t\tvar( --indicator-width ) / var( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\tborder-bottom: var( --wp-admin-border-width-focus ) solid\n\t\t\t\t${ COLORS.theme.accent };\n\t\t}\n\t}\n\t&[aria-orientation='vertical']::after {\n\t\tz-index: -1;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\twidth: calc( var( --antialiasing-factor ) * 1px );\n\t\ttransform: translateY( calc( var( --indicator-top ) * 1px ) )\n\t\t\tscaleY(\n\t\t\t\tcalc( var( --indicator-height ) / var( --antialiasing-factor ) )\n\t\t\t);\n\t\tbackground-color: ${ COLORS.theme.gray[ 100 ] };\n\t}\n`;\n\nexport const Tab = styled( Ariakit.Tab )`\n\t& {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tposition: relative;\n\t\tborder-radius: 0;\n\t\tmin-height: ${ space(\n\t\t\t12\n\t\t) }; // Avoid fixed height to allow for long strings that go in multiple lines.\n\t\theight: auto;\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tbox-shadow: none;\n\t\tcursor: pointer;\n\t\tline-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.\n\t\tpadding: ${ space( 4 ) };\n\t\tmargin-left: 0;\n\t\tfont-weight: 500;\n\t\ttext-align: inherit;\n\t\thyphens: auto;\n\t\tcolor: ${ COLORS.theme.foreground };\n\n\t\t&[aria-disabled='true'] {\n\t\t\tcursor: default;\n\t\t\tcolor: ${ COLORS.ui.textDisabled };\n\t\t}\n\n\t\t&:not( [aria-disabled='true'] ):hover {\n\t\t\tcolor: ${ COLORS.theme.accent };\n\t\t}\n\n\t\t&:focus:not( :disabled ) {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t// Focus.\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: ${ space( 3 ) };\n\t\t\tright: ${ space( 3 ) };\n\t\t\tbottom: ${ space( 3 ) };\n\t\t\tleft: ${ space( 3 ) };\n\t\t\tpointer-events: none;\n\n\t\t\t// Draw the indicator.\n\t\t\t// Outline works for Windows high contrast mode as well.\n\t\t\toutline: var( --wp-admin-border-width-focus ) solid\n\t\t\t\t${ COLORS.theme.accent };\n\t\t\tborder-radius: ${ CONFIG.radiusSmall };\n\n\t\t\t// Animation\n\t\t\topacity: 0;\n\n\t\t\t@media not ( prefers-reduced-motion ) {\n\t\t\t\ttransition: opacity 0.1s linear;\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible::before {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t[aria-orientation='vertical'] & {\n\t\tmin-height: ${ space(\n\t\t\t10\n\t\t) }; // Avoid fixed height to allow for long strings that go in multiple lines.\n\t}\n`;\n\nexport const TabPanel = styled( Ariakit.TabPanel )`\n\t&:focus {\n\t\tbox-shadow: none;\n\t\toutline: none;\n\t}\n\n\t&:focus-visible {\n\t\tbox-shadow: 0 0 0 var( --wp-admin-border-width-focus )\n\t\t\t${ COLORS.theme.accent };\n\t\t// Windows high contrast mode.\n\t\toutline: 2px solid transparent;\n\t\toutline-offset: 0;\n\t}\n`;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,MAAM,QAAQ,UAAU;AACzC,SAASC,KAAK,QAAQ,gBAAgB;AAEtC,OAAO,MAAMC,cAAc,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,0nCA0DpBT,MAAM,CAACU,KAAK,CAACC,MAAM,4SAaHX,MAAM,CAACU,KAAK,CAACE,IAAI,CAAE,GAAG,CAAE,UAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,wpMAE9C;AAED,OAAO,MAAMM,GAAG,gBAAGT,OAAA,CAAQL,OAAO,CAACc,GAAG,EAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,2FAMvBP,KAAK,CACnB,EACD,CAAC,6GAOWA,KAAK,CAAE,CAAE,CAAC,2EAKZF,MAAM,CAACU,KAAK,CAACI,UAAU,oDAItBd,MAAM,CAACe,EAAE,CAACC,YAAY,oDAItBhB,MAAM,CAACU,KAAK,CAACC,MAAM,4HAarBT,KAAK,CAAE,CAAE,CAAC,aACRA,KAAK,CAAE,CAAE,CAAC,cACTA,KAAK,CAAE,CAAE,CAAC,YACZA,KAAK,CAAE,CAAE,CAAC,8EAMfF,MAAM,CAACU,KAAK,CAACC,MAAM,qBACLV,MAAM,CAACgB,WAAW,uKAgBtBf,KAAK,CACnB,EACD,CAAC,UAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,wpMAEF;AAED,OAAO,MAAMW,QAAQ,gBAAGd,OAAA,CAAQL,OAAO,CAACmB,QAAQ,EAAAb,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,iHAQ5CT,MAAM,CAACU,KAAK,CAACC,MAAM,yDAAAN,OAAA,CAAAC,GAAA,CAAAC,QAAA,wpMAKxB","ignoreList":[]}

package/build-module/tabs/tablist.js

@@ -72,10 +72,11 @@ export const TabList = forwardRef(function TabList({
     onBlur: onBlur,
     ...otherProps,
     style: {
-      '--indicator-left': `${indicatorPosition.left}px`,
-      '--indicator-top': `${indicatorPosition.top}px`,
-      '--indicator-width': `${indicatorPosition.width}px`,
-      '--indicator-height': `${indicatorPosition.height}px`,
+      '--indicator-top': indicatorPosition.top,
+      '--indicator-right': indicatorPosition.right,
+      '--indicator-left': indicatorPosition.left,
+      '--indicator-width': indicatorPosition.width,
+      '--indicator-height': indicatorPosition.height,
       ...otherProps.style
     },
     className: clsx(animationEnabled ? 'is-animation-enabled' : '', otherProps.className),

package/build-module/tabs/tablist.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","useStoreState","warning","forwardRef","useState","useTabsContext","TabListWrapper","clsx","useTrackElementOffsetRect","useOnValueUpdate","jsx","_jsx","TabList","children","otherProps","ref","context","tabStoreState","store","selectedId","indicatorPosition","item","element","animationEnabled","setAnimationEnabled","previousValue","globalThis","SCRIPT_DEBUG","activeId","selectOnMove","setActiveId","onBlur","render","onTransitionEnd","event","pseudoElement","style","left","top","width","height","className"],"sources":["@wordpress/components/src/tabs/tablist.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabListProps } from './types';\nimport { useTabsContext } from './context';\nimport { TabListWrapper } from './styles';\nimport type { WordPressComponentProps } from '../context';\nimport clsx from 'clsx';\nimport { useTrackElementOffsetRect } from '../utils/element-rect';\nimport { useOnValueUpdate } from '../utils/hooks/use-on-value-update';\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\n\tconst tabStoreState = useStoreState( context?.store );\n\tconst selectedId = tabStoreState?.selectedId;\n\tconst indicatorPosition = useTrackElementOffsetRect(\n\t\tcontext?.store.item( selectedId )?.element\n\t);\n\n\tconst [ animationEnabled, setAnimationEnabled ] = useState( false );\n\tuseOnValueUpdate(\n\t\tselectedId,\n\t\t( { previousValue } ) => previousValue && setAnimationEnabled( true )\n\t);\n\n\tif ( ! context || ! tabStoreState ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\n\tconst { store } = context;\n\tconst { activeId, selectOnMove } = tabStoreState;\n\tconst { setActiveId } = store;\n\n\tconst onBlur = () => {\n\t\tif ( ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// When automatic tab selection is on, make sure that the active tab is up\n\t\t// to date with the selected tab when leaving the tablist. This makes sure\n\t\t// that the selected tab will receive keyboard focus when tabbing back into\n\t\t// the tablist.\n\t\tif ( selectedId !== activeId ) {\n\t\t\tsetActiveId( selectedId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Ariakit.TabList\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\trender={\n\t\t\t\t<TabListWrapper\n\t\t\t\t\tonTransitionEnd={ ( event ) => {\n\t\t\t\t\t\tif ( event.pseudoElement === '::after' ) {\n\t\t\t\t\t\t\tsetAnimationEnabled( false );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonBlur={ onBlur }\n\t\t\t{ ...otherProps }\n\t\t\tstyle={ {\n\t\t\t\t'--indicator-left': `${ indicatorPosition.left }px`,\n\t\t\t\t'--indicator-top': `${ indicatorPosition.top }px`,\n\t\t\t\t'--indicator-width': `${ indicatorPosition.width }px`,\n\t\t\t\t'--indicator-height': `${ indicatorPosition.height }px`,\n\t\t\t\t...otherProps.style,\n\t\t\t} }\n\t\t\tclassName={ clsx(\n\t\t\t\tanimationEnabled ? 'is-animation-enabled' : '',\n\t\t\t\totherProps.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</Ariakit.TabList>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC,SAASC,aAAa,QAAQ,gBAAgB;;AAE9C;AACA;AACA;AACA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEzD;AACA;AACA;;AAEA,SAASC,cAAc,QAAQ,WAAW;AAC1C,SAASC,cAAc,QAAQ,UAAU;AAEzC,OAAOC,IAAI,MAAM,MAAM;AACvB,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,gBAAgB,QAAQ,oCAAoC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtE,OAAO,MAAMC,OAAO,GAAGT,UAAU,CAG9B,SAASS,OAAOA,CAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EACvD,MAAMC,OAAO,GAAGX,cAAc,CAAC,CAAC;EAEhC,MAAMY,aAAa,GAAGhB,aAAa,CAAEe,OAAO,EAAEE,KAAM,CAAC;EACrD,MAAMC,UAAU,GAAGF,aAAa,EAAEE,UAAU;EAC5C,MAAMC,iBAAiB,GAAGZ,yBAAyB,CAClDQ,OAAO,EAAEE,KAAK,CAACG,IAAI,CAAEF,UAAW,CAAC,EAAEG,OACpC,CAAC;EAED,MAAM,CAAEC,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGpB,QAAQ,CAAE,KAAM,CAAC;EACnEK,gBAAgB,CACfU,UAAU,EACV,CAAE;IAAEM;EAAc,CAAC,KAAMA,aAAa,IAAID,mBAAmB,CAAE,IAAK,CACrE,CAAC;EAED,IAAK,CAAER,OAAO,IAAI,CAAEC,aAAa,EAAG;IACnCS,UAAA,CAAAC,YAAA,YAAAzB,OAAO,CAAE,uDAAwD,CAAC;IAClE,OAAO,IAAI;EACZ;EAEA,MAAM;IAAEgB;EAAM,CAAC,GAAGF,OAAO;EACzB,MAAM;IAAEY,QAAQ;IAAEC;EAAa,CAAC,GAAGZ,aAAa;EAChD,MAAM;IAAEa;EAAY,CAAC,GAAGZ,KAAK;EAE7B,MAAMa,MAAM,GAAGA,CAAA,KAAM;IACpB,IAAK,CAAEF,YAAY,EAAG;MACrB;IACD;;IAEA;IACA;IACA;IACA;IACA,IAAKV,UAAU,KAAKS,QAAQ,EAAG;MAC9BE,WAAW,CAAEX,UAAW,CAAC;IAC1B;EACD,CAAC;EAED,oBACCR,IAAA,CAACX,OAAO,CAACY,OAAO;IACfG,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfc,MAAM,eACLrB,IAAA,CAACL,cAAc;MACd2B,eAAe,EAAKC,KAAK,IAAM;QAC9B,IAAKA,KAAK,CAACC,aAAa,KAAK,SAAS,EAAG;UACxCX,mBAAmB,CAAE,KAAM,CAAC;QAC7B;MACD;IAAG,CACH,CACD;IACDO,MAAM,EAAGA,MAAQ;IAAA,GACZjB,UAAU;IACfsB,KAAK,EAAG;MACP,kBAAkB,EAAG,GAAGhB,iBAAiB,CAACiB,IAAM,IAAG;MACnD,iBAAiB,EAAG,GAAGjB,iBAAiB,CAACkB,GAAK,IAAG;MACjD,mBAAmB,EAAG,GAAGlB,iBAAiB,CAACmB,KAAO,IAAG;MACrD,oBAAoB,EAAG,GAAGnB,iBAAiB,CAACoB,MAAQ,IAAG;MACvD,GAAG1B,UAAU,CAACsB;IACf,CAAG;IACHK,SAAS,EAAGlC,IAAI,CACfgB,gBAAgB,GAAG,sBAAsB,GAAG,EAAE,EAC9CT,UAAU,CAAC2B,SACZ,CAAG;IAAA5B,QAAA,EAEDA;EAAQ,CACM,CAAC;AAEpB,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","useStoreState","warning","forwardRef","useState","useTabsContext","TabListWrapper","clsx","useTrackElementOffsetRect","useOnValueUpdate","jsx","_jsx","TabList","children","otherProps","ref","context","tabStoreState","store","selectedId","indicatorPosition","item","element","animationEnabled","setAnimationEnabled","previousValue","globalThis","SCRIPT_DEBUG","activeId","selectOnMove","setActiveId","onBlur","render","onTransitionEnd","event","pseudoElement","style","top","right","left","width","height","className"],"sources":["@wordpress/components/src/tabs/tablist.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabListProps } from './types';\nimport { useTabsContext } from './context';\nimport { TabListWrapper } from './styles';\nimport type { WordPressComponentProps } from '../context';\nimport clsx from 'clsx';\nimport { useTrackElementOffsetRect } from '../utils/element-rect';\nimport { useOnValueUpdate } from '../utils/hooks/use-on-value-update';\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\n\tconst tabStoreState = useStoreState( context?.store );\n\tconst selectedId = tabStoreState?.selectedId;\n\tconst indicatorPosition = useTrackElementOffsetRect(\n\t\tcontext?.store.item( selectedId )?.element\n\t);\n\n\tconst [ animationEnabled, setAnimationEnabled ] = useState( false );\n\tuseOnValueUpdate(\n\t\tselectedId,\n\t\t( { previousValue } ) => previousValue && setAnimationEnabled( true )\n\t);\n\n\tif ( ! context || ! tabStoreState ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\n\tconst { store } = context;\n\tconst { activeId, selectOnMove } = tabStoreState;\n\tconst { setActiveId } = store;\n\n\tconst onBlur = () => {\n\t\tif ( ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// When automatic tab selection is on, make sure that the active tab is up\n\t\t// to date with the selected tab when leaving the tablist. This makes sure\n\t\t// that the selected tab will receive keyboard focus when tabbing back into\n\t\t// the tablist.\n\t\tif ( selectedId !== activeId ) {\n\t\t\tsetActiveId( selectedId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Ariakit.TabList\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\trender={\n\t\t\t\t<TabListWrapper\n\t\t\t\t\tonTransitionEnd={ ( event ) => {\n\t\t\t\t\t\tif ( event.pseudoElement === '::after' ) {\n\t\t\t\t\t\t\tsetAnimationEnabled( false );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonBlur={ onBlur }\n\t\t\t{ ...otherProps }\n\t\t\tstyle={ {\n\t\t\t\t'--indicator-top': indicatorPosition.top,\n\t\t\t\t'--indicator-right': indicatorPosition.right,\n\t\t\t\t'--indicator-left': indicatorPosition.left,\n\t\t\t\t'--indicator-width': indicatorPosition.width,\n\t\t\t\t'--indicator-height': indicatorPosition.height,\n\t\t\t\t...otherProps.style,\n\t\t\t} }\n\t\t\tclassName={ clsx(\n\t\t\t\tanimationEnabled ? 'is-animation-enabled' : '',\n\t\t\t\totherProps.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</Ariakit.TabList>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC,SAASC,aAAa,QAAQ,gBAAgB;;AAE9C;AACA;AACA;AACA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEzD;AACA;AACA;;AAEA,SAASC,cAAc,QAAQ,WAAW;AAC1C,SAASC,cAAc,QAAQ,UAAU;AAEzC,OAAOC,IAAI,MAAM,MAAM;AACvB,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,gBAAgB,QAAQ,oCAAoC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtE,OAAO,MAAMC,OAAO,GAAGT,UAAU,CAG9B,SAASS,OAAOA,CAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EACvD,MAAMC,OAAO,GAAGX,cAAc,CAAC,CAAC;EAEhC,MAAMY,aAAa,GAAGhB,aAAa,CAAEe,OAAO,EAAEE,KAAM,CAAC;EACrD,MAAMC,UAAU,GAAGF,aAAa,EAAEE,UAAU;EAC5C,MAAMC,iBAAiB,GAAGZ,yBAAyB,CAClDQ,OAAO,EAAEE,KAAK,CAACG,IAAI,CAAEF,UAAW,CAAC,EAAEG,OACpC,CAAC;EAED,MAAM,CAAEC,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGpB,QAAQ,CAAE,KAAM,CAAC;EACnEK,gBAAgB,CACfU,UAAU,EACV,CAAE;IAAEM;EAAc,CAAC,KAAMA,aAAa,IAAID,mBAAmB,CAAE,IAAK,CACrE,CAAC;EAED,IAAK,CAAER,OAAO,IAAI,CAAEC,aAAa,EAAG;IACnCS,UAAA,CAAAC,YAAA,YAAAzB,OAAO,CAAE,uDAAwD,CAAC;IAClE,OAAO,IAAI;EACZ;EAEA,MAAM;IAAEgB;EAAM,CAAC,GAAGF,OAAO;EACzB,MAAM;IAAEY,QAAQ;IAAEC;EAAa,CAAC,GAAGZ,aAAa;EAChD,MAAM;IAAEa;EAAY,CAAC,GAAGZ,KAAK;EAE7B,MAAMa,MAAM,GAAGA,CAAA,KAAM;IACpB,IAAK,CAAEF,YAAY,EAAG;MACrB;IACD;;IAEA;IACA;IACA;IACA;IACA,IAAKV,UAAU,KAAKS,QAAQ,EAAG;MAC9BE,WAAW,CAAEX,UAAW,CAAC;IAC1B;EACD,CAAC;EAED,oBACCR,IAAA,CAACX,OAAO,CAACY,OAAO;IACfG,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfc,MAAM,eACLrB,IAAA,CAACL,cAAc;MACd2B,eAAe,EAAKC,KAAK,IAAM;QAC9B,IAAKA,KAAK,CAACC,aAAa,KAAK,SAAS,EAAG;UACxCX,mBAAmB,CAAE,KAAM,CAAC;QAC7B;MACD;IAAG,CACH,CACD;IACDO,MAAM,EAAGA,MAAQ;IAAA,GACZjB,UAAU;IACfsB,KAAK,EAAG;MACP,iBAAiB,EAAEhB,iBAAiB,CAACiB,GAAG;MACxC,mBAAmB,EAAEjB,iBAAiB,CAACkB,KAAK;MAC5C,kBAAkB,EAAElB,iBAAiB,CAACmB,IAAI;MAC1C,mBAAmB,EAAEnB,iBAAiB,CAACoB,KAAK;MAC5C,oBAAoB,EAAEpB,iBAAiB,CAACqB,MAAM;MAC9C,GAAG3B,UAAU,CAACsB;IACf,CAAG;IACHM,SAAS,EAAGnC,IAAI,CACfgB,gBAAgB,GAAG,sBAAsB,GAAG,EAAE,EAC9CT,UAAU,CAAC4B,SACZ,CAAG;IAAA7B,QAAA,EAEDA;EAAQ,CACM,CAAC;AAEpB,CAAE,CAAC","ignoreList":[]}

package/build-module/utils/element-rect.js

@@ -2,98 +2,13 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useLayoutEffect, useRef, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import { useEvent } from './hooks/use-event';
 
-/**
- * `useTrackElementRectUpdates` options.
- */
-
-/**
- * Tracks an element's "rect" (size and position) and fires `onRect` for all
- * of its discrete values. The element can be changed dynamically and **it
- * must not be stored in a ref**. Instead, it should be stored in a React
- * state or equivalent.
- *
- * By default, `onRect` is called initially for the target element (including
- * when the target element changes), not only on size or position updates.
- * This allows consumers of the hook to always be in sync with all rect values
- * of the target element throughout its lifetime. This behavior can be
- * disabled by setting the `fireOnElementInit` option to `false`.
- *
- * Under the hood, it sets up a `ResizeObserver` that tracks the element. The
- * target element can be changed dynamically, and the observer will be
- * updated accordingly.
- *
- * @example
- *
- * ```tsx
- * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();
- *
- * useTrackElementRectUpdates( targetElement, ( element ) => {
- *   console.log( 'Element resized:', element );
- * } );
- *
- * <div ref={ setTargetElement } />;
- * ```
- */
-export function useTrackElementRectUpdates(
-/**
- * The target element to observe. It can be changed dynamically.
- */
-targetElement,
-/**
- * Callback to fire when the element is resized. It will also be
- * called when the observer is set up, unless `fireOnElementInit` is
- * set to `false`.
- */
-onRect, {
-  fireOnElementInit = true
-} = {}) {
-  const onRectEvent = useEvent(onRect);
-  const observedElementRef = useRef();
-  const resizeObserverRef = useRef();
-
-  // TODO: could this be a layout effect?
-  useEffect(() => {
-    if (targetElement === observedElementRef.current) {
-      return;
-    }
-    observedElementRef.current = targetElement;
-
-    // Set up a ResizeObserver.
-    if (!resizeObserverRef.current) {
-      resizeObserverRef.current = new ResizeObserver(entries => {
-        if (observedElementRef.current) {
-          onRectEvent(observedElementRef.current, entries);
-        }
-      });
-    }
-    const {
-      current: resizeObserver
-    } = resizeObserverRef;
-
-    // Observe new element.
-    if (targetElement) {
-      if (fireOnElementInit) {
-        // TODO: investigate if this can be removed,
-        // see: https://stackoverflow.com/a/60026394
-        onRectEvent(targetElement);
-      }
-      resizeObserver.observe(targetElement);
-    }
-    return () => {
-      // Unobserve previous element.
-      if (observedElementRef.current) {
-        resizeObserver.unobserve(observedElementRef.current);
-      }
-    };
-  }, [fireOnElementInit, onRectEvent, targetElement]);
-}
-
 /**
  * The position and dimensions of an element, relative to its offset parent.
  */
@@ -102,44 +17,98 @@ onRect, {
  * An `ElementOffsetRect` object with all values set to zero.
  */
 export const NULL_ELEMENT_OFFSET_RECT = {
-  left: 0,
   top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
   width: 0,
   height: 0
 };
 
 /**
  * Returns the position and dimensions of an element, relative to its offset
- * parent. This is useful in contexts where `getBoundingClientRect` is not
- * suitable, such as when the element is transformed.
+ * parent, with subpixel precision. Values reflect the real measures before any
+ * potential scaling distortions along the X and Y axes.
  *
- * **Note:** the `left` and `right` values are adjusted due to a limitation
- * in the way the browser calculates the offset position of the element,
- * which can cause unwanted scrollbars to appear. This adjustment makes the
- * values potentially inaccurate within a range of 1 pixel.
+ * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`
+ * entries are not suitable, such as when the element is transformed, and when
+ * `element.offset<Top|Left|Width|Height>` methods are not precise enough.
+ *
+ * **Note:** in some contexts, like when the scale is 0, this method will fail
+ * because it's impossible to calculate a scaling ratio. When that happens, it
+ * will return `undefined`.
  */
 export function getElementOffsetRect(element) {
+  var _element$offsetParent;
+  // Position and dimension values computed with `getBoundingClientRect` have
+  // subpixel precision, but are affected by distortions since they represent
+  // the "real" measures, or in other words, the actual final values as rendered
+  // by the browser.
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return;
+  }
+  const offsetParentRect = (_element$offsetParent = element.offsetParent?.getBoundingClientRect()) !== null && _element$offsetParent !== void 0 ? _element$offsetParent : NULL_ELEMENT_OFFSET_RECT;
+
+  // Computed widths and heights have subpixel precision, and are not affected
+  // by distortions.
+  const computedWidth = parseFloat(getComputedStyle(element).width);
+  const computedHeight = parseFloat(getComputedStyle(element).height);
+
+  // We can obtain the current scale factor for the element by comparing "computed"
+  // dimensions with the "real" ones.
+  const scaleX = computedWidth / rect.width;
+  const scaleY = computedHeight / rect.height;
   return {
-    // The adjustments mentioned in the documentation above are necessary
-    // because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,
-    // which can result in a position mismatch that causes unwanted overflow.
-    // For context, see: https://github.com/WordPress/gutenberg/pull/61979
-    left: Math.max(element.offsetLeft - 1, 0),
-    top: Math.max(element.offsetTop - 1, 0),
-    // This is a workaround to obtain these values with a sub-pixel precision,
-    // since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.
-    width: parseFloat(getComputedStyle(element).width),
-    height: parseFloat(getComputedStyle(element).height)
+    // To obtain the adjusted values for the position:
+    // 1. Compute the element's position relative to the offset parent.
+    // 2. Correct for the scale factor.
+    top: (rect.top - offsetParentRect?.top) * scaleY,
+    right: (offsetParentRect?.right - rect.right) * scaleX,
+    bottom: (offsetParentRect?.bottom - rect.bottom) * scaleY,
+    left: (rect.left - offsetParentRect?.left) * scaleX,
+    // Computed dimensions don't need any adjustments.
+    width: computedWidth,
+    height: computedHeight
   };
 }
+const POLL_RATE = 100;
 
 /**
  * Tracks the position and dimensions of an element, relative to its offset
  * parent. The element can be changed dynamically.
+ *
+ * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
+ * documentation for more details). When that happens, this hook will attempt
+ * to measure again after a frame, and if that fails, it will poll every 100
+ * milliseconds until it succeeds.
  */
 export function useTrackElementOffsetRect(targetElement) {
   const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);
-  useTrackElementRectUpdates(targetElement, element => setIndicatorPosition(getElementOffsetRect(element)));
+  const intervalRef = useRef();
+  const measure = useEvent(() => {
+    if (targetElement) {
+      const elementOffsetRect = getElementOffsetRect(targetElement);
+      if (elementOffsetRect) {
+        setIndicatorPosition(elementOffsetRect);
+        clearInterval(intervalRef.current);
+        return true;
+      }
+    } else {
+      clearInterval(intervalRef.current);
+    }
+    return false;
+  });
+  const setElement = useResizeObserver(() => {
+    if (!measure()) {
+      requestAnimationFrame(() => {
+        if (!measure()) {
+          intervalRef.current = setInterval(measure, POLL_RATE);
+        }
+      });
+    }
+  });
+  useLayoutEffect(() => setElement(targetElement), [setElement, targetElement]);
   return indicatorPosition;
 }
 

package/build-module/utils/element-rect.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","useState","useEvent","useTrackElementRectUpdates","targetElement","onRect","fireOnElementInit","onRectEvent","observedElementRef","resizeObserverRef","current","ResizeObserver","entries","resizeObserver","observe","unobserve","NULL_ELEMENT_OFFSET_RECT","left","top","width","height","getElementOffsetRect","element","Math","max","offsetLeft","offsetTop","parseFloat","getComputedStyle","useTrackElementOffsetRect","indicatorPosition","setIndicatorPosition"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * `useTrackElementRectUpdates` options.\n */\nexport type UseTrackElementRectUpdatesOptions = {\n\t/**\n\t * Whether to trigger the callback when an element's ResizeObserver is\n\t * first set up, including when the target element changes.\n\t *\n\t * @default true\n\t */\n\tfireOnElementInit?: boolean;\n};\n\n/**\n * Tracks an element's \"rect\" (size and position) and fires `onRect` for all\n * of its discrete values. The element can be changed dynamically and **it\n * must not be stored in a ref**. Instead, it should be stored in a React\n * state or equivalent.\n *\n * By default, `onRect` is called initially for the target element (including\n * when the target element changes), not only on size or position updates.\n * This allows consumers of the hook to always be in sync with all rect values\n * of the target element throughout its lifetime. This behavior can be\n * disabled by setting the `fireOnElementInit` option to `false`.\n *\n * Under the hood, it sets up a `ResizeObserver` that tracks the element. The\n * target element can be changed dynamically, and the observer will be\n * updated accordingly.\n *\n * @example\n *\n * ```tsx\n * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();\n *\n * useTrackElementRectUpdates( targetElement, ( element ) => {\n *   console.log( 'Element resized:', element );\n * } );\n *\n * <div ref={ setTargetElement } />;\n * ```\n */\nexport function useTrackElementRectUpdates(\n\t/**\n\t * The target element to observe. It can be changed dynamically.\n\t */\n\ttargetElement: HTMLElement | undefined | null,\n\t/**\n\t * Callback to fire when the element is resized. It will also be\n\t * called when the observer is set up, unless `fireOnElementInit` is\n\t * set to `false`.\n\t */\n\tonRect: (\n\t\t/**\n\t\t * The element being tracked at the time of this update.\n\t\t */\n\t\telement: HTMLElement,\n\t\t/**\n\t\t * The list of\n\t\t * [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)\n\t\t * objects passed to the `ResizeObserver.observe` callback. This list\n\t\t * won't be available when the observer is set up, and only on updates.\n\t\t */\n\t\tresizeObserverEntries?: ResizeObserverEntry[]\n\t) => void,\n\t{ fireOnElementInit = true }: UseTrackElementRectUpdatesOptions = {}\n) {\n\tconst onRectEvent = useEvent( onRect );\n\n\tconst observedElementRef = useRef< HTMLElement | null >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\n\t// TODO: could this be a layout effect?\n\tuseEffect( () => {\n\t\tif ( targetElement === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tobservedElementRef.current = targetElement;\n\n\t\t// Set up a ResizeObserver.\n\t\tif ( ! resizeObserverRef.current ) {\n\t\t\tresizeObserverRef.current = new ResizeObserver( ( entries ) => {\n\t\t\t\tif ( observedElementRef.current ) {\n\t\t\t\t\tonRectEvent( observedElementRef.current, entries );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Observe new element.\n\t\tif ( targetElement ) {\n\t\t\tif ( fireOnElementInit ) {\n\t\t\t\t// TODO: investigate if this can be removed,\n\t\t\t\t// see: https://stackoverflow.com/a/60026394\n\t\t\t\tonRectEvent( targetElement );\n\t\t\t}\n\t\t\tresizeObserver.observe( targetElement );\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Unobserve previous element.\n\t\t\tif ( observedElementRef.current ) {\n\t\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t\t}\n\t\t};\n\t}, [ fireOnElementInit, onRectEvent, targetElement ] );\n}\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\tleft: 0,\n\ttop: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent. This is useful in contexts where `getBoundingClientRect` is not\n * suitable, such as when the element is transformed.\n *\n * **Note:** the `left` and `right` values are adjusted due to a limitation\n * in the way the browser calculates the offset position of the element,\n * which can cause unwanted scrollbars to appear. This adjustment makes the\n * values potentially inaccurate within a range of 1 pixel.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect {\n\treturn {\n\t\t// The adjustments mentioned in the documentation above are necessary\n\t\t// because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,\n\t\t// which can result in a position mismatch that causes unwanted overflow.\n\t\t// For context, see: https://github.com/WordPress/gutenberg/pull/61979\n\t\tleft: Math.max( element.offsetLeft - 1, 0 ),\n\t\ttop: Math.max( element.offsetTop - 1, 0 ),\n\t\t// This is a workaround to obtain these values with a sub-pixel precision,\n\t\t// since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.\n\t\twidth: parseFloat( getComputedStyle( element ).width ),\n\t\theight: parseFloat( getComputedStyle( element ).height ),\n\t};\n}\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\n\tuseTrackElementRectUpdates( targetElement, ( element ) =>\n\t\tsetIndicatorPosition( getElementOffsetRect( element ) )\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useLayoutEffect","useRef","useState","useResizeObserver","useEvent","NULL_ELEMENT_OFFSET_RECT","top","right","bottom","left","width","height","getElementOffsetRect","element","_element$offsetParent","rect","getBoundingClientRect","offsetParentRect","offsetParent","computedWidth","parseFloat","getComputedStyle","computedHeight","scaleX","scaleY","POLL_RATE","useTrackElementOffsetRect","targetElement","indicatorPosition","setIndicatorPosition","intervalRef","measure","elementOffsetRect","clearInterval","current","setElement","requestAnimationFrame","setInterval"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The distance from the right edge of the offset parent to the right edge\n\t * of the element.\n\t */\n\tright: number;\n\t/**\n\t * The distance from the bottom edge of the offset parent to the bottom edge\n\t * of the element.\n\t */\n\tbottom: number;\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\ttop: 0,\n\tright: 0,\n\tbottom: 0,\n\tleft: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent, with subpixel precision. Values reflect the real measures before any\n * potential scaling distortions along the X and Y axes.\n *\n * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`\n * entries are not suitable, such as when the element is transformed, and when\n * `element.offset<Top|Left|Width|Height>` methods are not precise enough.\n *\n * **Note:** in some contexts, like when the scale is 0, this method will fail\n * because it's impossible to calculate a scaling ratio. When that happens, it\n * will return `undefined`.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect | undefined {\n\t// Position and dimension values computed with `getBoundingClientRect` have\n\t// subpixel precision, but are affected by distortions since they represent\n\t// the \"real\" measures, or in other words, the actual final values as rendered\n\t// by the browser.\n\tconst rect = element.getBoundingClientRect();\n\tif ( rect.width === 0 || rect.height === 0 ) {\n\t\treturn;\n\t}\n\tconst offsetParentRect =\n\t\telement.offsetParent?.getBoundingClientRect() ??\n\t\tNULL_ELEMENT_OFFSET_RECT;\n\n\t// Computed widths and heights have subpixel precision, and are not affected\n\t// by distortions.\n\tconst computedWidth = parseFloat( getComputedStyle( element ).width );\n\tconst computedHeight = parseFloat( getComputedStyle( element ).height );\n\n\t// We can obtain the current scale factor for the element by comparing \"computed\"\n\t// dimensions with the \"real\" ones.\n\tconst scaleX = computedWidth / rect.width;\n\tconst scaleY = computedHeight / rect.height;\n\n\treturn {\n\t\t// To obtain the adjusted values for the position:\n\t\t// 1. Compute the element's position relative to the offset parent.\n\t\t// 2. Correct for the scale factor.\n\t\ttop: ( rect.top - offsetParentRect?.top ) * scaleY,\n\t\tright: ( offsetParentRect?.right - rect.right ) * scaleX,\n\t\tbottom: ( offsetParentRect?.bottom - rect.bottom ) * scaleY,\n\t\tleft: ( rect.left - offsetParentRect?.left ) * scaleX,\n\t\t// Computed dimensions don't need any adjustments.\n\t\twidth: computedWidth,\n\t\theight: computedHeight,\n\t};\n}\n\nconst POLL_RATE = 100;\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n *\n * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s\n * documentation for more details). When that happens, this hook will attempt\n * to measure again after a frame, and if that fails, it will poll every 100\n * milliseconds until it succeeds.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\tconst intervalRef = useRef< ReturnType< typeof setInterval > >();\n\n\tconst measure = useEvent( () => {\n\t\tif ( targetElement ) {\n\t\t\tconst elementOffsetRect = getElementOffsetRect( targetElement );\n\t\t\tif ( elementOffsetRect ) {\n\t\t\t\tsetIndicatorPosition( elementOffsetRect );\n\t\t\t\tclearInterval( intervalRef.current );\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} else {\n\t\t\tclearInterval( intervalRef.current );\n\t\t}\n\t\treturn false;\n\t} );\n\n\tconst setElement = useResizeObserver( () => {\n\t\tif ( ! measure() ) {\n\t\t\trequestAnimationFrame( () => {\n\t\t\t\tif ( ! measure() ) {\n\t\t\t\t\tintervalRef.current = setInterval( measure, POLL_RATE );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\n\tuseLayoutEffect(\n\t\t() => setElement( targetElement ),\n\t\t[ setElement, targetElement ]\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"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","ignoreList":[]}

package/build-style/style-rtl.css

@@ -1988,10 +1988,6 @@ body.is-dragging-components-draggable {
   line-height: 1;
   margin: 0;
 }
-.components-modal__header .components-button {
-  position: relative;
-  right: 8px;
-}
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
   border-bottom-color: #ddd;
 }
@@ -2513,6 +2509,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 .is-alternate .components-popover__content {
   box-shadow: 0 0 0 1px #1e1e1e;
+  border-radius: 2px;
 }
 .is-unstyled .components-popover__content {
   background: none;

package/build-style/style.css

@@ -1993,10 +1993,6 @@ body.is-dragging-components-draggable {
   line-height: 1;
   margin: 0;
 }
-.components-modal__header .components-button {
-  position: relative;
-  left: 8px;
-}
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
   border-bottom-color: #ddd;
 }
@@ -2520,6 +2516,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 .is-alternate .components-popover__content {
   box-shadow: 0 0 0 1px #1e1e1e;
+  border-radius: 2px;
 }
 .is-unstyled .components-popover__content {
   background: none;

package/build-types/box-control/utils.d.ts

@@ -51,7 +51,7 @@ export declare function isValuesMixed(values?: BoxControlValue, selectedUnits?:
  *
  * @return  Whether values are mixed.
  */
-export declare function isValuesDefined(values?: BoxControlValue): boolean;
+export declare function isValuesDefined(values?: BoxControlValue): boolean | undefined;
 /**
  * Get initial selected side, factoring in whether the sides are linked,
  * and whether the vertical / horizontal directions are grouped via splitOnAxis.

package/build-types/box-control/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/box-control/utils.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACX,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,qBAAqB,EAAE,gBA6BnC,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;CASlB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,6CAAgD,CAAC;AAmBvE;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAC1B,MAAM,GAAE,eAAoB,EAC5B,aAAa,CAAC,EAAE,eAAe,EAC/B,cAAc,GAAE,eAAe,CAAE,OAAO,CAAc,UAuCtD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAE,aAAa,CAAC,EAAE,eAAe,sBAQlE;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC5B,MAAM,GAAE,eAAoB,EAC5B,aAAa,CAAC,EAAE,eAAe,EAC/B,KAAK,GAAE,eAAe,CAAE,OAAO,CAAc,WAM7C;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAE,MAAM,CAAC,EAAE,eAAe,WAUxD;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,8BAQtE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,eAAe,CAAE,OAAO,CAAE,2EAiBhE;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAChC,aAAa,EAAE,eAAe,EAC9B,QAAQ,CAAC,EAAE,MAAM,EACjB,KAAK,CAAC,EAAE,eAAe,CAAE,OAAO,CAAE,GAChC,eAAe,CAoBjB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/box-control/utils.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACX,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,qBAAqB,EAAE,gBA6BnC,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;CASlB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,6CAAgD,CAAC;AAmBvE;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAC1B,MAAM,GAAE,eAAoB,EAC5B,aAAa,CAAC,EAAE,eAAe,EAC/B,cAAc,GAAE,eAAe,CAAE,OAAO,CAAc,UAuCtD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAE,aAAa,CAAC,EAAE,eAAe,sBAQlE;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC5B,MAAM,GAAE,eAAoB,EAC5B,aAAa,CAAC,EAAE,eAAe,EAC/B,KAAK,GAAE,eAAe,CAAE,OAAO,CAAc,WAM7C;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAE,MAAM,CAAC,EAAE,eAAe,uBAUxD;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,8BAQtE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,eAAe,CAAE,OAAO,CAAE,2EAiBhE;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAChC,aAAa,EAAE,eAAe,EAC9B,QAAQ,CAAC,EAAE,MAAM,EACjB,KAAK,CAAC,EAAE,eAAe,CAAE,OAAO,CAAE,GAChC,eAAe,CAoBjB"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/composite/context.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,gBAAgB,gDACuB,CAAC;AAErD,eAAO,MAAM,mBAAmB,6BAAuC,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/composite/context.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,gBAAgB,gDAA+C,CAAC;AAE7E,eAAO,MAAM,mBAAmB,6BAAuC,CAAC"}

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

@@ -18,33 +18,50 @@ import * as Ariakit from '@ariakit/react';
  *
  * @example
  * ```jsx
- * import { Composite, useCompositeStore } from '@wordpress/components';
+ * import { Composite } from '@wordpress/components';
  *
- * const store = useCompositeStore();
- * <Composite store={store}>
+ * <Composite>
  *   <Composite.Item>Item 1</Composite.Item>
  *   <Composite.Item>Item 2</Composite.Item>
  * </Composite>
  * ```
  */
-export declare const Composite: import("react").ForwardRefExoticComponent<import("./types").CompositeStoreProps & {
-    store?: Ariakit.CompositeStore;
+export declare const Composite: import("react").ForwardRefExoticComponent<{
+    activeId?: Ariakit.CompositeStoreProps["activeId"];
+    defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
+    setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
+    focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
+    focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
+    focusShift?: Ariakit.CompositeStoreProps["focusShift"];
+    virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
+    orientation?: Ariakit.CompositeStoreProps["orientation"];
+    rtl?: Ariakit.CompositeStoreProps["rtl"];
+} & {
     render?: Ariakit.CompositeProps["render"];
     focusable?: Ariakit.CompositeProps["focusable"];
     disabled?: Ariakit.CompositeProps["disabled"];
     accessibleWhenDisabled?: Ariakit.CompositeProps["accessibleWhenDisabled"];
     onFocusVisible?: Ariakit.CompositeProps["onFocusVisible"];
     children?: Ariakit.CompositeProps["children"];
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "focusable" | "children" | "as" | "render" | "accessibleWhenDisabled" | "onFocusVisible" | "store" | keyof import("./types").CompositeStoreProps> & import("react").RefAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "focusable" | "children" | "as" | "render" | "accessibleWhenDisabled" | "onFocusVisible" | keyof {
+    activeId?: Ariakit.CompositeStoreProps["activeId"];
+    defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
+    setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
+    focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
+    focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
+    focusShift?: Ariakit.CompositeStoreProps["focusShift"];
+    virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
+    orientation?: Ariakit.CompositeStoreProps["orientation"];
+    rtl?: Ariakit.CompositeStoreProps["rtl"];
+}> & import("react").RefAttributes<HTMLDivElement>> & {
     /**
      * Renders a group element for composite items.
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Group>
      *     <Composite.GroupLabel>Label</Composite.GroupLabel>
      *     <Composite.Item>Item 1</Composite.Item>
@@ -63,10 +80,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Group>
      *     <Composite.GroupLabel>Label</Composite.GroupLabel>
      *     <Composite.Item>Item 1</Composite.Item>
@@ -83,10 +99,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Item>Item 1</Composite.Item>
      *   <Composite.Item>Item 2</Composite.Item>
      *   <Composite.Item>Item 3</Composite.Item>
@@ -103,10 +118,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Row>
      *     <Composite.Item>Item 1.1</Composite.Item>
      *     <Composite.Item>Item 1.2</Composite.Item>
@@ -130,10 +144,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Hover render={ <Composite.Item /> }>
      *     Item 1
      *   </Composite.Hover>
@@ -153,10 +166,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store} render={ <CompositeTypeahead /> }>
+     * <Composite render={ <CompositeTypeahead /> }>
      *   <Composite.Item>Item 1</Composite.Item>
      *   <Composite.Item>Item 2</Composite.Item>
      * </Composite>

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;AAoB1C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,SAAS;;;;;;;;;IAgEpB;;;;;;;;;;;;;;;;OAgBG;;;;IAIH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;OAuBG;;;;IAEH;;;;;;;;;;;;;;;;;;;OAmBG;;;;IAIH;;;;;;;;;;;;;;;OAeG;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2DpB;;;;;;;;;;;;;;;OAeG;;;;IAIH;;;;;;;;;;;;;;;;;OAiBG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;OAsBG;;;;IAEH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;CAKJ,CAAC"}

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

@@ -12,7 +12,10 @@
  *
  * @see https://ariakit.org/components/composite
  */
-import { useCompositeStore } from '../store';
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
 type Orientation = 'horizontal' | 'vertical';
 export interface LegacyStateOptions {
     /**
@@ -64,7 +67,7 @@ export interface LegacyStateOptions {
     unstable_virtual?: boolean;
 }
 type Component = React.FunctionComponent<any>;
-type CompositeStore = ReturnType<typeof useCompositeStore>;
+type CompositeStore = ReturnType<typeof Ariakit.useCompositeStore>;
 type CompositeStoreState = {
     store: CompositeStore;
 };
@@ -77,9 +80,29 @@ export type CompositeStateProps = {
 type ComponentProps<C extends Component> = React.ComponentPropsWithRef<C>;
 export type CompositeProps<C extends Component> = ComponentProps<C> & CompositeStateProps;
 type CompositeComponent<C extends Component> = (props: CompositeProps<C>) => React.ReactElement;
+/**
+ * _Note: please use the `Composite` component instead._
+ *
+ * @deprecated
+ */
 export declare const Composite: CompositeComponent<Component>;
+/**
+ * _Note: please use the `Composite.Row` or `Composite.Group` components instead._
+ *
+ * @deprecated
+ */
 export declare const CompositeGroup: CompositeComponent<Component>;
+/**
+ * _Note: please use the `Composite.Item` component instead._
+ *
+ * @deprecated
+ */
 export declare const CompositeItem: CompositeComponent<Component>;
+/**
+ * _Note: please use the `Composite` component instead._
+ *
+ * @deprecated
+ */
 export declare function useCompositeState(legacyStateOptions?: LegacyStateOptions): CompositeState;
 export {};
 //# sourceMappingURL=index.d.ts.map