@wordpress/components 25.12.0 → 25.13.0

package/build-module/tabs/index.js

@@ -9,7 +9,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useLayoutEffect, useRef } from '@wordpress/element';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -128,15 +128,17 @@ function Tabs({
       setSelectedId(null);
     }
   }, [isControlled, selectedId, selectedTab, selectedTabId, setSelectedId]);
+  const contextValue = useMemo(() => ({
+    store,
+    instanceId
+  }), [store, instanceId]);
   return createElement(TabsContext.Provider, {
-    value: {
-      store,
-      instanceId
-    }
+    value: contextValue
   }, children);
 }
 Tabs.TabList = TabList;
 Tabs.Tab = Tab;
 Tabs.TabPanel = TabPanel;
+Tabs.Context = TabsContext;
 export default Tabs;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","useInstanceId","useLayoutEffect","useRef","TabsContext","Tab","TabList","TabPanel","Tabs","selectOnMove","initialTabId","orientation","onSelect","children","selectedTabId","instanceId","store","useTabStore","defaultSelectedId","setSelectedId","selectedId","strippedDownId","replace","isControlled","undefined","items","useState","tabsHavePopulated","length","current","selectedTab","find","item","id","firstEnabledTab","dimmed","initialTab","createElement","Provider","value"],"sources":["@wordpress/components/src/tabs/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabsProps } from './types';\nimport { TabsContext } from './context';\nimport { Tab } from './tab';\nimport { TabList } from './tablist';\nimport { TabPanel } from './tabpanel';\n\nfunction Tabs( {\n\tselectOnMove = true,\n\tinitialTabId,\n\torientation = 'horizontal',\n\tonSelect,\n\tchildren,\n\tselectedTabId,\n}: TabsProps ) {\n\tconst instanceId = useInstanceId( Tabs, 'tabs' );\n\tconst store = Ariakit.useTabStore( {\n\t\tselectOnMove,\n\t\torientation,\n\t\tdefaultSelectedId: initialTabId && `${ instanceId }-${ initialTabId }`,\n\t\tsetSelectedId: ( selectedId ) => {\n\t\t\tconst strippedDownId =\n\t\t\t\ttypeof selectedId === 'string'\n\t\t\t\t\t? selectedId.replace( `${ instanceId }-`, '' )\n\t\t\t\t\t: selectedId;\n\t\t\tonSelect?.( strippedDownId );\n\t\t},\n\t\tselectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,\n\t} );\n\n\tconst isControlled = selectedTabId !== undefined;\n\n\tconst { items, selectedId } = store.useState();\n\tconst { setSelectedId } = store;\n\n\t// Keep track of whether tabs have been populated. This is used to prevent\n\t// certain effects from firing too early while tab data and relevant\n\t// variables are undefined during the initial render.\n\tconst tabsHavePopulated = useRef( false );\n\tif ( items.length > 0 ) {\n\t\ttabsHavePopulated.current = true;\n\t}\n\n\tconst selectedTab = items.find( ( item ) => item.id === selectedId );\n\tconst firstEnabledTab = items.find( ( item ) => {\n\t\t// Ariakit internally refers to disabled tabs as `dimmed`.\n\t\treturn ! item.dimmed;\n\t} );\n\tconst initialTab = items.find(\n\t\t( item ) => item.id === `${ instanceId }-${ initialTabId }`\n\t);\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\tif ( isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection, as well as ensuring no tab is\n\t\t// selected if an invalid `initialTabId` is provided.\n\t\tif ( initialTabId && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab is missing (i.e. removed from the DOM),\n\t\t// fall back to the initial tab or the first enabled tab if there is\n\t\t// one. Otherwise, no tab should be selected.\n\t\tif ( ! items.find( ( item ) => item.id === selectedId ) ) {\n\t\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\t\tsetSelectedId( initialTab?.id );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( firstEnabledTab ) {\n\t\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t\t} else if ( tabsHavePopulated.current ) {\n\t\t\t\tsetSelectedId( null );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tinitialTabId,\n\t\tisControlled,\n\t\titems,\n\t\tselectedId,\n\t\tsetSelectedId,\n\t] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedTab?.dimmed ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// In controlled mode, we trust that disabling tabs is done\n\t\t// intentionally, and don't select a new tab automatically.\n\t\tif ( isControlled ) {\n\t\t\tsetSelectedId( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab becomes disabled, fall back to the\n\t\t// `initialTabId` if possible. Otherwise select the first\n\t\t// enabled tab (if there is one).\n\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\tsetSelectedId( initialTab.id );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( firstEnabledTab ) {\n\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tisControlled,\n\t\tselectedTab?.dimmed,\n\t\tsetSelectedId,\n\t] );\n\n\t// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.\n\tuseLayoutEffect( () => {\n\t\tif ( ! isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Once the tabs have populated, if the `selectedTabId` still can't be\n\t\t// found, clear the selection.\n\t\tif ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {\n\t\t\tsetSelectedId( null );\n\t\t}\n\t}, [\n\t\tisControlled,\n\t\tselectedId,\n\t\tselectedTab,\n\t\tselectedTabId,\n\t\tsetSelectedId,\n\t] );\n\n\treturn (\n\t\t<TabsContext.Provider value={ { store, instanceId } }>\n\t\t\t{ children }\n\t\t</TabsContext.Provider>\n\t);\n}\n\nTabs.TabList = TabList;\nTabs.Tab = Tab;\nTabs.TabPanel = TabPanel;\nexport default Tabs;\n"],"mappings":"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"}
+{"version":3,"names":["Ariakit","useInstanceId","useLayoutEffect","useMemo","useRef","TabsContext","Tab","TabList","TabPanel","Tabs","selectOnMove","initialTabId","orientation","onSelect","children","selectedTabId","instanceId","store","useTabStore","defaultSelectedId","setSelectedId","selectedId","strippedDownId","replace","isControlled","undefined","items","useState","tabsHavePopulated","length","current","selectedTab","find","item","id","firstEnabledTab","dimmed","initialTab","contextValue","createElement","Provider","value","Context"],"sources":["@wordpress/components/src/tabs/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabsProps } from './types';\nimport { TabsContext } from './context';\nimport { Tab } from './tab';\nimport { TabList } from './tablist';\nimport { TabPanel } from './tabpanel';\n\nfunction Tabs( {\n\tselectOnMove = true,\n\tinitialTabId,\n\torientation = 'horizontal',\n\tonSelect,\n\tchildren,\n\tselectedTabId,\n}: TabsProps ) {\n\tconst instanceId = useInstanceId( Tabs, 'tabs' );\n\tconst store = Ariakit.useTabStore( {\n\t\tselectOnMove,\n\t\torientation,\n\t\tdefaultSelectedId: initialTabId && `${ instanceId }-${ initialTabId }`,\n\t\tsetSelectedId: ( selectedId ) => {\n\t\t\tconst strippedDownId =\n\t\t\t\ttypeof selectedId === 'string'\n\t\t\t\t\t? selectedId.replace( `${ instanceId }-`, '' )\n\t\t\t\t\t: selectedId;\n\t\t\tonSelect?.( strippedDownId );\n\t\t},\n\t\tselectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,\n\t} );\n\n\tconst isControlled = selectedTabId !== undefined;\n\n\tconst { items, selectedId } = store.useState();\n\tconst { setSelectedId } = store;\n\n\t// Keep track of whether tabs have been populated. This is used to prevent\n\t// certain effects from firing too early while tab data and relevant\n\t// variables are undefined during the initial render.\n\tconst tabsHavePopulated = useRef( false );\n\tif ( items.length > 0 ) {\n\t\ttabsHavePopulated.current = true;\n\t}\n\n\tconst selectedTab = items.find( ( item ) => item.id === selectedId );\n\tconst firstEnabledTab = items.find( ( item ) => {\n\t\t// Ariakit internally refers to disabled tabs as `dimmed`.\n\t\treturn ! item.dimmed;\n\t} );\n\tconst initialTab = items.find(\n\t\t( item ) => item.id === `${ instanceId }-${ initialTabId }`\n\t);\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\tif ( isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection, as well as ensuring no tab is\n\t\t// selected if an invalid `initialTabId` is provided.\n\t\tif ( initialTabId && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab is missing (i.e. removed from the DOM),\n\t\t// fall back to the initial tab or the first enabled tab if there is\n\t\t// one. Otherwise, no tab should be selected.\n\t\tif ( ! items.find( ( item ) => item.id === selectedId ) ) {\n\t\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\t\tsetSelectedId( initialTab?.id );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( firstEnabledTab ) {\n\t\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t\t} else if ( tabsHavePopulated.current ) {\n\t\t\t\tsetSelectedId( null );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tinitialTabId,\n\t\tisControlled,\n\t\titems,\n\t\tselectedId,\n\t\tsetSelectedId,\n\t] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedTab?.dimmed ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// In controlled mode, we trust that disabling tabs is done\n\t\t// intentionally, and don't select a new tab automatically.\n\t\tif ( isControlled ) {\n\t\t\tsetSelectedId( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab becomes disabled, fall back to the\n\t\t// `initialTabId` if possible. Otherwise select the first\n\t\t// enabled tab (if there is one).\n\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\tsetSelectedId( initialTab.id );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( firstEnabledTab ) {\n\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tisControlled,\n\t\tselectedTab?.dimmed,\n\t\tsetSelectedId,\n\t] );\n\n\t// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.\n\tuseLayoutEffect( () => {\n\t\tif ( ! isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Once the tabs have populated, if the `selectedTabId` still can't be\n\t\t// found, clear the selection.\n\t\tif ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {\n\t\t\tsetSelectedId( null );\n\t\t}\n\t}, [\n\t\tisControlled,\n\t\tselectedId,\n\t\tselectedTab,\n\t\tselectedTabId,\n\t\tsetSelectedId,\n\t] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tstore,\n\t\t\tinstanceId,\n\t\t} ),\n\t\t[ store, instanceId ]\n\t);\n\n\treturn (\n\t\t<TabsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</TabsContext.Provider>\n\t);\n}\n\nTabs.TabList = TabList;\nTabs.Tab = Tab;\nTabs.TabPanel = TabPanel;\nTabs.Context = TabsContext;\n\nexport default Tabs;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,eAAe,EAAEC,OAAO,EAAEC,MAAM,QAAQ,oBAAoB;;AAErE;AACA;AACA;;AAEA,SAASC,WAAW,QAAQ,WAAW;AACvC,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,QAAQ,QAAQ,YAAY;AAErC,SAASC,IAAIA,CAAE;EACdC,YAAY,GAAG,IAAI;EACnBC,YAAY;EACZC,WAAW,GAAG,YAAY;EAC1BC,QAAQ;EACRC,QAAQ;EACRC;AACU,CAAC,EAAG;EACd,MAAMC,UAAU,GAAGf,aAAa,CAAEQ,IAAI,EAAE,MAAO,CAAC;EAChD,MAAMQ,KAAK,GAAGjB,OAAO,CAACkB,WAAW,CAAE;IAClCR,YAAY;IACZE,WAAW;IACXO,iBAAiB,EAAER,YAAY,IAAK,GAAGK,UAAY,IAAIL,YAAc,EAAC;IACtES,aAAa,EAAIC,UAAU,IAAM;MAChC,MAAMC,cAAc,GACnB,OAAOD,UAAU,KAAK,QAAQ,GAC3BA,UAAU,CAACE,OAAO,CAAG,GAAGP,UAAY,GAAE,EAAE,EAAG,CAAC,GAC5CK,UAAU;MACdR,QAAQ,GAAIS,cAAe,CAAC;IAC7B,CAAC;IACDD,UAAU,EAAEN,aAAa,IAAK,GAAGC,UAAY,IAAID,aAAe;EACjE,CAAE,CAAC;EAEH,MAAMS,YAAY,GAAGT,aAAa,KAAKU,SAAS;EAEhD,MAAM;IAAEC,KAAK;IAAEL;EAAW,CAAC,GAAGJ,KAAK,CAACU,QAAQ,CAAC,CAAC;EAC9C,MAAM;IAAEP;EAAc,CAAC,GAAGH,KAAK;;EAE/B;EACA;EACA;EACA,MAAMW,iBAAiB,GAAGxB,MAAM,CAAE,KAAM,CAAC;EACzC,IAAKsB,KAAK,CAACG,MAAM,GAAG,CAAC,EAAG;IACvBD,iBAAiB,CAACE,OAAO,GAAG,IAAI;EACjC;EAEA,MAAMC,WAAW,GAAGL,KAAK,CAACM,IAAI,CAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE,KAAKb,UAAW,CAAC;EACpE,MAAMc,eAAe,GAAGT,KAAK,CAACM,IAAI,CAAIC,IAAI,IAAM;IAC/C;IACA,OAAO,CAAEA,IAAI,CAACG,MAAM;EACrB,CAAE,CAAC;EACH,MAAMC,UAAU,GAAGX,KAAK,CAACM,IAAI,CAC1BC,IAAI,IAAMA,IAAI,CAACC,EAAE,KAAM,GAAGlB,UAAY,IAAIL,YAAc,EAC3D,CAAC;;EAED;EACAT,eAAe,CAAE,MAAM;IACtB,IAAKsB,YAAY,EAAG;MACnB;IACD;;IAEA;IACA;IACA;IACA;IACA,IAAKb,YAAY,IAAI,CAAE0B,UAAU,EAAG;MACnC;IACD;;IAEA;IACA;IACA;IACA,IAAK,CAAEX,KAAK,CAACM,IAAI,CAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE,KAAKb,UAAW,CAAC,EAAG;MACzD,IAAKgB,UAAU,IAAI,CAAEA,UAAU,CAACD,MAAM,EAAG;QACxChB,aAAa,CAAEiB,UAAU,EAAEH,EAAG,CAAC;QAC/B;MACD;MAEA,IAAKC,eAAe,EAAG;QACtBf,aAAa,CAAEe,eAAe,CAACD,EAAG,CAAC;MACpC,CAAC,MAAM,IAAKN,iBAAiB,CAACE,OAAO,EAAG;QACvCV,aAAa,CAAE,IAAK,CAAC;MACtB;IACD;EACD,CAAC,EAAE,CACFe,eAAe,EACfE,UAAU,EACV1B,YAAY,EACZa,YAAY,EACZE,KAAK,EACLL,UAAU,EACVD,aAAa,CACZ,CAAC;;EAEH;EACAlB,eAAe,CAAE,MAAM;IACtB,IAAK,CAAE6B,WAAW,EAAEK,MAAM,EAAG;MAC5B;IACD;;IAEA;IACA;IACA,IAAKZ,YAAY,EAAG;MACnBJ,aAAa,CAAE,IAAK,CAAC;MACrB;IACD;;IAEA;IACA;IACA;IACA,IAAKiB,UAAU,IAAI,CAAEA,UAAU,CAACD,MAAM,EAAG;MACxChB,aAAa,CAAEiB,UAAU,CAACH,EAAG,CAAC;MAC9B;IACD;IAEA,IAAKC,eAAe,EAAG;MACtBf,aAAa,CAAEe,eAAe,CAACD,EAAG,CAAC;IACpC;EACD,CAAC,EAAE,CACFC,eAAe,EACfE,UAAU,EACVb,YAAY,EACZO,WAAW,EAAEK,MAAM,EACnBhB,aAAa,CACZ,CAAC;;EAEH;EACAlB,eAAe,CAAE,MAAM;IACtB,IAAK,CAAEsB,YAAY,EAAG;MACrB;IACD;;IAEA;IACA;IACA,IAAKI,iBAAiB,CAACE,OAAO,IAAI,CAAC,CAAEf,aAAa,IAAI,CAAEgB,WAAW,EAAG;MACrEX,aAAa,CAAE,IAAK,CAAC;IACtB;EACD,CAAC,EAAE,CACFI,YAAY,EACZH,UAAU,EACVU,WAAW,EACXhB,aAAa,EACbK,aAAa,CACZ,CAAC;EAEH,MAAMkB,YAAY,GAAGnC,OAAO,CAC3B,OAAQ;IACPc,KAAK;IACLD;EACD,CAAC,CAAE,EACH,CAAEC,KAAK,EAAED,UAAU,CACpB,CAAC;EAED,OACCuB,aAAA,CAAClC,WAAW,CAACmC,QAAQ;IAACC,KAAK,EAAGH;EAAc,GACzCxB,QACmB,CAAC;AAEzB;AAEAL,IAAI,CAACF,OAAO,GAAGA,OAAO;AACtBE,IAAI,CAACH,GAAG,GAAGA,GAAG;AACdG,IAAI,CAACD,QAAQ,GAAGA,QAAQ;AACxBC,IAAI,CAACiC,OAAO,GAAGrC,WAAW;AAE1B,eAAeI,IAAI"}

package/build-module/tabs/tab.js

@@ -3,14 +3,14 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 
-import { useContext, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 
 import warning from '@wordpress/warning';
-import { TabsContext } from './context';
+import { useTabsContext } from './context';
 import { Tab as StyledTab } from './styles';
 export const Tab = forwardRef(function Tab({
   children,
@@ -19,9 +19,9 @@ export const Tab = forwardRef(function Tab({
   render,
   ...otherProps
 }, ref) {
-  const context = useContext(TabsContext);
+  const context = useTabsContext();
   if (!context) {
-    typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning('`Tabs.TabList` must be wrapped in a `Tabs` component.') : void 0;
+    typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning('`Tabs.Tab` must be wrapped in a `Tabs` component.') : void 0;
     return null;
   }
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["useContext","forwardRef","warning","TabsContext","Tab","StyledTab","children","id","disabled","render","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","instancedTabId","createElement"],"sources":["@wordpress/components/src/tabs/tab.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabProps } from './types';\nimport warning from '@wordpress/warning';\nimport { TabsContext } from './context';\nimport { Tab as StyledTab } from './styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport const Tab = forwardRef<\n\tHTMLButtonElement,\n\tWordPressComponentProps< TabProps, 'button', false >\n>( function Tab( { children, id, disabled, render, ...otherProps }, ref ) {\n\tconst context = useContext( TabsContext );\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ id }`;\n\treturn (\n\t\t<StyledTab\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\n\t\t\tdisabled={ disabled }\n\t\t\trender={ render }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,UAAU,QAAQ,oBAAoB;;AAE3D;AACA;AACA;;AAEA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,WAAW,QAAQ,WAAW;AACvC,SAASC,GAAG,IAAIC,SAAS,QAAQ,UAAU;AAG3C,OAAO,MAAMD,GAAG,GAAGH,UAAU,CAG1B,SAASG,GAAGA,CAAE;EAAEE,QAAQ;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EACzE,MAAMC,OAAO,GAAGZ,UAAU,CAAEG,WAAY,CAAC;EACzC,IAAK,CAAES,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAX,OAAO,CAAE,uDAAwD,CAAC;IAClE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEY,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EACrC,MAAMI,cAAc,GAAI,GAAGD,UAAY,IAAIR,EAAI,EAAC;EAChD,OACCU,aAAA,CAACZ,SAAS;IACTM,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfP,EAAE,EAAGS,cAAgB;IACrBR,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC;EAAU,GAEbJ,QACQ,CAAC;AAEd,CAAE,CAAC"}
+{"version":3,"names":["forwardRef","warning","useTabsContext","Tab","StyledTab","children","id","disabled","render","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","instancedTabId","createElement"],"sources":["@wordpress/components/src/tabs/tab.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabProps } from './types';\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { Tab as StyledTab } from './styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport const Tab = forwardRef<\n\tHTMLButtonElement,\n\tWordPressComponentProps< TabProps, 'button', false >\n>( function Tab( { children, id, disabled, render, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ id }`;\n\treturn (\n\t\t<StyledTab\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\n\t\t\tdisabled={ disabled }\n\t\t\trender={ render }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,cAAc,QAAQ,WAAW;AAC1C,SAASC,GAAG,IAAIC,SAAS,QAAQ,UAAU;AAG3C,OAAO,MAAMD,GAAG,GAAGH,UAAU,CAG1B,SAASG,GAAGA,CAAE;EAAEE,QAAQ;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EACzE,MAAMC,OAAO,GAAGT,cAAc,CAAC,CAAC;EAChC,IAAK,CAAES,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAX,OAAO,CAAE,mDAAoD,CAAC;IAC9D,OAAO,IAAI;EACZ;EACA,MAAM;IAAEY,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EACrC,MAAMI,cAAc,GAAI,GAAGD,UAAY,IAAIR,EAAI,EAAC;EAChD,OACCU,aAAA,CAACZ,SAAS;IACTM,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfP,EAAE,EAAGS,cAAgB;IACrBR,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC;EAAU,GAEbJ,QACQ,CAAC;AAEd,CAAE,CAAC"}

package/build-module/tabs/tabpanel.js

@@ -7,7 +7,7 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,14 +15,14 @@ import { forwardRef, useContext } from '@wordpress/element';
 
 import { TabPanel as StyledTabPanel } from './styles';
 import warning from '@wordpress/warning';
-import { TabsContext } from './context';
+import { useTabsContext } from './context';
 export const TabPanel = forwardRef(function TabPanel({
   children,
   id,
   focusable = true,
   ...otherProps
 }, ref) {
-  const context = useContext(TabsContext);
+  const context = useTabsContext();
   if (!context) {
     typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : void 0;
     return null;

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useContext","TabPanel","StyledTabPanel","warning","TabsContext","children","id","focusable","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","createElement"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\n\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabPanelProps } from './types';\nimport { TabPanel as StyledTabPanel } from './styles';\n\nimport warning from '@wordpress/warning';\nimport { TabsContext } from './context';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabPanel = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabPanelProps, 'div', false >\n>( function TabPanel( { children, id, focusable = true, ...otherProps }, ref ) {\n\tconst context = useContext( TabsContext );\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ `${ instanceId }-${ id }-view` }\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,UAAU,QAAQ,oBAAoB;;AAE3D;AACA;AACA;;AAEA,SAASC,QAAQ,IAAIC,cAAc,QAAQ,UAAU;AAErD,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,WAAW,QAAQ,WAAW;AAGvC,OAAO,MAAMH,QAAQ,GAAGF,UAAU,CAG/B,SAASE,QAAQA,CAAE;EAAEI,QAAQ;EAAEC,EAAE;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EAC9E,MAAMC,OAAO,GAAGV,UAAU,CAAEI,WAAY,CAAC;EACzC,IAAK,CAAEM,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAR,OAAO,CAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAES,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EAErC,OACCI,aAAA,CAACZ,cAAc;IACdO,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfN,EAAE,EAAI,GAAGO,UAAY,IAAIP,EAAI,OAAQ;IACrCC,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbH,QACa,CAAC;AAEnB,CAAE,CAAC"}
+{"version":3,"names":["forwardRef","TabPanel","StyledTabPanel","warning","useTabsContext","children","id","focusable","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","createElement"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabPanelProps } from './types';\nimport { TabPanel as StyledTabPanel } from './styles';\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabPanel = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabPanelProps, 'div', false >\n>( function TabPanel( { children, id, focusable = true, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ `${ instanceId }-${ id }-view` }\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,QAAQ,IAAIC,cAAc,QAAQ,UAAU;AAErD,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,cAAc,QAAQ,WAAW;AAG1C,OAAO,MAAMH,QAAQ,GAAGD,UAAU,CAG/B,SAASC,QAAQA,CAAE;EAAEI,QAAQ;EAAEC,EAAE;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EAC9E,MAAMC,OAAO,GAAGN,cAAc,CAAC,CAAC;EAChC,IAAK,CAAEM,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAR,OAAO,CAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAES,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EAErC,OACCI,aAAA,CAACZ,cAAc;IACdO,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfN,EAAE,EAAI,GAAGO,UAAY,IAAIP,EAAI,OAAQ;IACrCC,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbH,QACa,CAAC;AAEnB,CAAE,CAAC"}

package/build-module/text/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/text/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { TruncateProps } from '../truncate/types';\n\n/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport type { FindAllArgs } from 'highlight-words-core';\n\nexport type TextSize =\n\t| 'body'\n\t| 'caption'\n\t| 'footnote'\n\t| 'largeTitle'\n\t| 'subheadline'\n\t| 'title';\n\ntype TextVariant = 'muted';\n\ntype TextWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;\n\nexport interface Props extends TruncateProps {\n\t/**\n\t * Adjusts the text alignment.\n\t */\n\talign?: CSSProperties[ 'textAlign' ];\n\t/**\n\t * Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).\n\t */\n\tadjustLineHeightForInnerControls?: 'large' | 'medium' | 'small' | 'xSmall';\n\t/**\n\t * Adjusts the text color.\n\t */\n\tcolor?: CSSProperties[ 'color' ];\n\t/**\n\t * Adjusts the CSS display.\n\t */\n\tdisplay?: CSSProperties[ 'display' ];\n\t/**\n\t * Renders a destructive color.\n\t *\n\t * @default false\n\t */\n\tisDestructive?: boolean;\n\t/**\n\t * Escape characters in `highlightWords` which are meaningful in regular expressions.\n\t */\n\thighlightEscape?: boolean;\n\t/**\n\t * Determines if `highlightWords` should be case sensitive.\n\t */\n\thighlightCaseSensitive?: boolean;\n\t/**\n\t * Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.\n\t */\n\thighlightSanitize?: FindAllArgs[ 'sanitize' ];\n\t/**\n\t * Sets `Text` to have `display: block`.\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * Adjusts all text line-height based on the typography system.\n\t */\n\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t/**\n\t * The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...).\n\t */\n\toptimizeReadabilityFor?: CSSProperties[ 'color' ];\n\t/**\n\t * Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`.\n\t */\n\tsize?: CSSProperties[ 'fontSize' ] | TextSize;\n\t/**\n\t * Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.\n\t */\n\ttruncate?: boolean;\n\t/**\n\t * Uppercases the text content.\n\t */\n\tupperCase?: boolean;\n\t/**\n\t * Adjusts style variation of the text.\n\t */\n\tvariant?: TextVariant;\n\t/**\n\t * Adjusts font-weight of the text.\n\t */\n\tweight?: CSSProperties[ 'fontWeight' ] | TextWeight;\n\t/**\n\t * Adjusts letter-spacing of the text.\n\t */\n\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t/**\n\t * Letters or words within `Text` can be highlighted using `highlightWords`.\n\t */\n\thighlightWords?: string[];\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/text/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { TruncateProps } from '../truncate/types';\n\n/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport type { FindAllArgs } from 'highlight-words-core';\n\nexport type TextSize =\n\t| 'body'\n\t| 'caption'\n\t| 'footnote'\n\t| 'largeTitle'\n\t| 'subheadline'\n\t| 'title';\n\ntype TextVariant = 'muted';\n\ntype TextWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;\n\nexport interface Props extends TruncateProps {\n\t/**\n\t * Adjusts the text alignment.\n\t */\n\talign?: CSSProperties[ 'textAlign' ];\n\t/**\n\t * Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).\n\t */\n\tadjustLineHeightForInnerControls?: 'large' | 'medium' | 'small' | 'xSmall';\n\t/**\n\t * Adjusts the text color.\n\t */\n\tcolor?: CSSProperties[ 'color' ];\n\t/**\n\t * Adjusts the CSS display.\n\t */\n\tdisplay?: CSSProperties[ 'display' ];\n\t/**\n\t * Renders a destructive color.\n\t *\n\t * @default false\n\t */\n\tisDestructive?: boolean;\n\t/**\n\t * Escape characters in `highlightWords` which are meaningful in regular expressions.\n\t *\n\t * @default false\n\t */\n\thighlightEscape?: boolean;\n\t/**\n\t * Determines if `highlightWords` should be case sensitive.\n\t *\n\t * @default false\n\t */\n\thighlightCaseSensitive?: boolean;\n\t/**\n\t * Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.\n\t */\n\thighlightSanitize?: FindAllArgs[ 'sanitize' ];\n\t/**\n\t * Sets `Text` to have `display: block`. Note: text truncation only works\n\t * when `isBlock` is `false`.\n\t *\n\t * @default false\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * Adjusts all text line-height based on the typography system.\n\t */\n\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t/**\n\t * The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...).\n\t */\n\toptimizeReadabilityFor?: CSSProperties[ 'color' ];\n\t/**\n\t * Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`.\n\t */\n\tsize?: CSSProperties[ 'fontSize' ] | TextSize;\n\t/**\n\t * Enables text truncation. When `truncate` is set, we are able to truncate the long text in a variety of ways. Note: text truncation won't work if the `isBlock` property is set to `true`\n\t *\n\t * @default false\n\t */\n\ttruncate?: boolean;\n\t/**\n\t * Uppercases the text content.\n\t *\n\t * @default false\n\t */\n\tupperCase?: boolean;\n\t/**\n\t * Adjusts style variation of the text.\n\t */\n\tvariant?: TextVariant;\n\t/**\n\t * Adjusts font-weight of the text.\n\t *\n\t * @default 'normal'\n\t */\n\tweight?: CSSProperties[ 'fontWeight' ] | TextWeight;\n\t/**\n\t * Adjusts letter-spacing of the text.\n\t */\n\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t/**\n\t * Letters or words within `Text` can be highlighted using `highlightWords`.\n\t */\n\thighlightWords?: string[];\n}\n"],"mappings":""}

package/build-module/tools-panel/tools-panel-item/hook.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { usePrevious } from '@wordpress/compose';
-import { useCallback, useEffect, useMemo } from '@wordpress/element';
+import { useCallback, useEffect, useLayoutEffect, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -46,7 +46,11 @@ export function useToolsPanelItem(props) {
 
   // Registering the panel item allows the panel to include it in its
   // automatically generated menu and determine its initial checked status.
-  useEffect(() => {
+  //
+  // This is performed in a layout effect to ensure that the panel item
+  // is registered before it is rendered preventing a rendering glitch.
+  // See: https://github.com/WordPress/gutenberg/issues/56470
+  useLayoutEffect(() => {
     if (hasMatchingPanel && previousPanelId !== null) {
       registerPanelItem({
         hasValue: hasValueCallback,

package/build-module/tools-panel/tools-panel-item/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["usePrevious","useCallback","useEffect","useMemo","styles","useToolsPanelContext","useContextSystem","useCx","noop","useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","currentPanelId","menuItems","registerResetAllFilter","deregisterResetAllFilter","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","firstDisplayedItem","lastDisplayedItem","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","hasValueCallback","resetAllFilterCallback","previousPanelId","hasMatchingPanel","menuGroup","isMenuItemChecked","wasMenuItemChecked","isRegistered","undefined","isValueSet","wasValueSet","newValueSet","isShown","cx","classes","shouldApplyPlaceholderStyles","firstItemStyle","lastItemStyle","ToolsPanelItem","ToolsPanelItemPlaceholder"],"sources":["@wordpress/components/src/tools-panel/tools-panel-item/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelItemProps } from '../types';\n\nconst noop = () => {};\n\nexport function useToolsPanelItem(\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\thasValue,\n\t\tisShownByDefault = false,\n\t\tlabel,\n\t\tpanelId,\n\t\tresetAllFilter = noop,\n\t\tonDeselect,\n\t\tonSelect,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanelItem' );\n\n\tconst {\n\t\tpanelId: currentPanelId,\n\t\tmenuItems,\n\t\tregisterResetAllFilter,\n\t\tderegisterResetAllFilter,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tisResetting,\n\t\tshouldRenderPlaceholderItems: shouldRenderPlaceholder,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t} = useToolsPanelContext();\n\n\tconst hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );\n\tconst resetAllFilterCallback = useCallback( resetAllFilter, [\n\t\tpanelId,\n\t\tresetAllFilter,\n\t] );\n\tconst previousPanelId = usePrevious( currentPanelId );\n\n\tconst hasMatchingPanel =\n\t\tcurrentPanelId === panelId || currentPanelId === null;\n\n\t// Registering the panel item allows the panel to include it in its\n\t// automatically generated menu and determine its initial checked status.\n\tuseEffect( () => {\n\t\tif ( hasMatchingPanel && previousPanelId !== null ) {\n\t\t\tregisterPanelItem( {\n\t\t\t\thasValue: hasValueCallback,\n\t\t\t\tisShownByDefault,\n\t\t\t\tlabel,\n\t\t\t\tpanelId,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\t( previousPanelId === null && !! currentPanelId ) ||\n\t\t\t\tcurrentPanelId === panelId\n\t\t\t) {\n\t\t\t\tderegisterPanelItem( label );\n\t\t\t}\n\t\t};\n\t}, [\n\t\tcurrentPanelId,\n\t\thasMatchingPanel,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\thasValueCallback,\n\t\tpanelId,\n\t\tpreviousPanelId,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t] );\n\n\tuseEffect( () => {\n\t\tif ( hasMatchingPanel ) {\n\t\t\tregisterResetAllFilter( resetAllFilterCallback );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( hasMatchingPanel ) {\n\t\t\t\tderegisterResetAllFilter( resetAllFilterCallback );\n\t\t\t}\n\t\t};\n\t}, [\n\t\tregisterResetAllFilter,\n\t\tderegisterResetAllFilter,\n\t\tresetAllFilterCallback,\n\t\thasMatchingPanel,\n\t] );\n\n\t// Note: `label` is used as a key when building menu item state in\n\t// `ToolsPanel`.\n\tconst menuGroup = isShownByDefault ? 'default' : 'optional';\n\tconst isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];\n\tconst wasMenuItemChecked = usePrevious( isMenuItemChecked );\n\tconst isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;\n\n\tconst isValueSet = hasValue();\n\tconst wasValueSet = usePrevious( isValueSet );\n\tconst newValueSet = isValueSet && ! wasValueSet;\n\n\t// Notify the panel when an item's value has been set.\n\t//\n\t// 1. For default controls, this is so \"reset\" appears beside its menu item.\n\t// 2. For optional controls, when the panel ID is `null`, it allows the\n\t// panel to ensure the item is toggled on for display in the menu, given the\n\t// value has been set external to the control.\n\tuseEffect( () => {\n\t\tif ( ! newValueSet ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isShownByDefault || currentPanelId === null ) {\n\t\t\tflagItemCustomization( label, menuGroup );\n\t\t}\n\t}, [\n\t\tcurrentPanelId,\n\t\tnewValueSet,\n\t\tisShownByDefault,\n\t\tmenuGroup,\n\t\tlabel,\n\t\tflagItemCustomization,\n\t] );\n\n\t// Determine if the panel item's corresponding menu is being toggled and\n\t// trigger appropriate callback if it is.\n\tuseEffect( () => {\n\t\t// We check whether this item is currently registered as items rendered\n\t\t// via fills can persist through the parent panel being remounted.\n\t\t// See: https://github.com/WordPress/gutenberg/pull/45673\n\t\tif ( ! isRegistered || isResetting || ! hasMatchingPanel ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isMenuItemChecked && ! isValueSet && ! wasMenuItemChecked ) {\n\t\t\tonSelect?.();\n\t\t}\n\n\t\tif ( ! isMenuItemChecked && wasMenuItemChecked ) {\n\t\t\tonDeselect?.();\n\t\t}\n\t}, [\n\t\thasMatchingPanel,\n\t\tisMenuItemChecked,\n\t\tisRegistered,\n\t\tisResetting,\n\t\tisValueSet,\n\t\twasMenuItemChecked,\n\t\tonSelect,\n\t\tonDeselect,\n\t] );\n\n\t// The item is shown if it is a default control regardless of whether it\n\t// has a value. Optional items are shown when they are checked or have\n\t// a value.\n\tconst isShown = isShownByDefault\n\t\t? menuItems?.[ menuGroup ]?.[ label ] !== undefined\n\t\t: isMenuItemChecked;\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst shouldApplyPlaceholderStyles =\n\t\t\tshouldRenderPlaceholder && ! isShown;\n\t\tconst firstItemStyle =\n\t\t\tfirstDisplayedItem === label && __experimentalFirstVisibleItemClass;\n\t\tconst lastItemStyle =\n\t\t\tlastDisplayedItem === label && __experimentalLastVisibleItemClass;\n\t\treturn cx(\n\t\t\tstyles.ToolsPanelItem,\n\t\t\tshouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder,\n\t\t\t! shouldApplyPlaceholderStyles && className,\n\t\t\tfirstItemStyle,\n\t\t\tlastItemStyle\n\t\t);\n\t}, [\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName,\n\t\tcx,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t\tlabel,\n\t] );\n\n\treturn {\n\t\t...otherProps,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName: classes,\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["usePrevious","useCallback","useEffect","useLayoutEffect","useMemo","styles","useToolsPanelContext","useContextSystem","useCx","noop","useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","currentPanelId","menuItems","registerResetAllFilter","deregisterResetAllFilter","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","firstDisplayedItem","lastDisplayedItem","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","hasValueCallback","resetAllFilterCallback","previousPanelId","hasMatchingPanel","menuGroup","isMenuItemChecked","wasMenuItemChecked","isRegistered","undefined","isValueSet","wasValueSet","newValueSet","isShown","cx","classes","shouldApplyPlaceholderStyles","firstItemStyle","lastItemStyle","ToolsPanelItem","ToolsPanelItemPlaceholder"],"sources":["@wordpress/components/src/tools-panel/tools-panel-item/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelItemProps } from '../types';\n\nconst noop = () => {};\n\nexport function useToolsPanelItem(\n\tprops: WordPressComponentProps< ToolsPanelItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\thasValue,\n\t\tisShownByDefault = false,\n\t\tlabel,\n\t\tpanelId,\n\t\tresetAllFilter = noop,\n\t\tonDeselect,\n\t\tonSelect,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanelItem' );\n\n\tconst {\n\t\tpanelId: currentPanelId,\n\t\tmenuItems,\n\t\tregisterResetAllFilter,\n\t\tderegisterResetAllFilter,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tisResetting,\n\t\tshouldRenderPlaceholderItems: shouldRenderPlaceholder,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t} = useToolsPanelContext();\n\n\tconst hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );\n\tconst resetAllFilterCallback = useCallback( resetAllFilter, [\n\t\tpanelId,\n\t\tresetAllFilter,\n\t] );\n\tconst previousPanelId = usePrevious( currentPanelId );\n\n\tconst hasMatchingPanel =\n\t\tcurrentPanelId === panelId || currentPanelId === null;\n\n\t// Registering the panel item allows the panel to include it in its\n\t// automatically generated menu and determine its initial checked status.\n\t//\n\t// This is performed in a layout effect to ensure that the panel item\n\t// is registered before it is rendered preventing a rendering glitch.\n\t// See: https://github.com/WordPress/gutenberg/issues/56470\n\tuseLayoutEffect( () => {\n\t\tif ( hasMatchingPanel && previousPanelId !== null ) {\n\t\t\tregisterPanelItem( {\n\t\t\t\thasValue: hasValueCallback,\n\t\t\t\tisShownByDefault,\n\t\t\t\tlabel,\n\t\t\t\tpanelId,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\t( previousPanelId === null && !! currentPanelId ) ||\n\t\t\t\tcurrentPanelId === panelId\n\t\t\t) {\n\t\t\t\tderegisterPanelItem( label );\n\t\t\t}\n\t\t};\n\t}, [\n\t\tcurrentPanelId,\n\t\thasMatchingPanel,\n\t\tisShownByDefault,\n\t\tlabel,\n\t\thasValueCallback,\n\t\tpanelId,\n\t\tpreviousPanelId,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t] );\n\n\tuseEffect( () => {\n\t\tif ( hasMatchingPanel ) {\n\t\t\tregisterResetAllFilter( resetAllFilterCallback );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( hasMatchingPanel ) {\n\t\t\t\tderegisterResetAllFilter( resetAllFilterCallback );\n\t\t\t}\n\t\t};\n\t}, [\n\t\tregisterResetAllFilter,\n\t\tderegisterResetAllFilter,\n\t\tresetAllFilterCallback,\n\t\thasMatchingPanel,\n\t] );\n\n\t// Note: `label` is used as a key when building menu item state in\n\t// `ToolsPanel`.\n\tconst menuGroup = isShownByDefault ? 'default' : 'optional';\n\tconst isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];\n\tconst wasMenuItemChecked = usePrevious( isMenuItemChecked );\n\tconst isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;\n\n\tconst isValueSet = hasValue();\n\tconst wasValueSet = usePrevious( isValueSet );\n\tconst newValueSet = isValueSet && ! wasValueSet;\n\n\t// Notify the panel when an item's value has been set.\n\t//\n\t// 1. For default controls, this is so \"reset\" appears beside its menu item.\n\t// 2. For optional controls, when the panel ID is `null`, it allows the\n\t// panel to ensure the item is toggled on for display in the menu, given the\n\t// value has been set external to the control.\n\tuseEffect( () => {\n\t\tif ( ! newValueSet ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isShownByDefault || currentPanelId === null ) {\n\t\t\tflagItemCustomization( label, menuGroup );\n\t\t}\n\t}, [\n\t\tcurrentPanelId,\n\t\tnewValueSet,\n\t\tisShownByDefault,\n\t\tmenuGroup,\n\t\tlabel,\n\t\tflagItemCustomization,\n\t] );\n\n\t// Determine if the panel item's corresponding menu is being toggled and\n\t// trigger appropriate callback if it is.\n\tuseEffect( () => {\n\t\t// We check whether this item is currently registered as items rendered\n\t\t// via fills can persist through the parent panel being remounted.\n\t\t// See: https://github.com/WordPress/gutenberg/pull/45673\n\t\tif ( ! isRegistered || isResetting || ! hasMatchingPanel ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isMenuItemChecked && ! isValueSet && ! wasMenuItemChecked ) {\n\t\t\tonSelect?.();\n\t\t}\n\n\t\tif ( ! isMenuItemChecked && wasMenuItemChecked ) {\n\t\t\tonDeselect?.();\n\t\t}\n\t}, [\n\t\thasMatchingPanel,\n\t\tisMenuItemChecked,\n\t\tisRegistered,\n\t\tisResetting,\n\t\tisValueSet,\n\t\twasMenuItemChecked,\n\t\tonSelect,\n\t\tonDeselect,\n\t] );\n\n\t// The item is shown if it is a default control regardless of whether it\n\t// has a value. Optional items are shown when they are checked or have\n\t// a value.\n\tconst isShown = isShownByDefault\n\t\t? menuItems?.[ menuGroup ]?.[ label ] !== undefined\n\t\t: isMenuItemChecked;\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst shouldApplyPlaceholderStyles =\n\t\t\tshouldRenderPlaceholder && ! isShown;\n\t\tconst firstItemStyle =\n\t\t\tfirstDisplayedItem === label && __experimentalFirstVisibleItemClass;\n\t\tconst lastItemStyle =\n\t\t\tlastDisplayedItem === label && __experimentalLastVisibleItemClass;\n\t\treturn cx(\n\t\t\tstyles.ToolsPanelItem,\n\t\t\tshouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder,\n\t\t\t! shouldApplyPlaceholderStyles && className,\n\t\t\tfirstItemStyle,\n\t\t\tlastItemStyle\n\t\t);\n\t}, [\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName,\n\t\tcx,\n\t\tfirstDisplayedItem,\n\t\tlastDisplayedItem,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t\tlabel,\n\t] );\n\n\treturn {\n\t\t...otherProps,\n\t\tisShown,\n\t\tshouldRenderPlaceholder,\n\t\tclassName: classes,\n\t};\n}\n"],"mappings":"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"}

package/build-style/style-rtl.css

@@ -317,6 +317,8 @@
   background: transparent;
   transform: none;
   opacity: 1;
+}
+.components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus), .components-button.is-tertiary:disabled:not(:focus), .components-button.is-tertiary[aria-disabled=true]:not(:focus), .components-button.is-tertiary[aria-disabled=true]:hover:not(:focus) {
   box-shadow: none;
   outline: none;
 }
@@ -401,6 +403,11 @@ p + .components-button.is-tertiary {
   background-image: linear-gradient(45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%);
   /* stylelint-enable */
 }
+@media (prefers-reduced-motion: reduce) {
+  .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
+    animation-duration: 0s;
+  }
+}
 .components-button.is-compact {
   height: 32px;
 }
@@ -1304,6 +1311,7 @@ body.is-dragging-components-draggable {
   display: inline-block;
 }
 .components-form-toggle .components-form-toggle__track {
+  position: relative;
   content: "";
   display: inline-block;
   box-sizing: border-box;
@@ -1313,7 +1321,8 @@ body.is-dragging-components-draggable {
   width: 36px;
   height: 18px;
   border-radius: 9px;
-  transition: 0.2s background ease;
+  transition: 0.2s background-color ease, 0.2s border-color ease;
+  overflow: hidden;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-form-toggle .components-form-toggle__track {
@@ -1321,6 +1330,21 @@ body.is-dragging-components-draggable {
     transition-delay: 0s;
   }
 }
+.components-form-toggle .components-form-toggle__track::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border-top: 18px solid transparent;
+  transition: 0.2s opacity ease;
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-form-toggle .components-form-toggle__track::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 .components-form-toggle .components-form-toggle__thumb {
   display: block;
   position: absolute;
@@ -1330,9 +1354,9 @@ body.is-dragging-components-draggable {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  transition: 0.1s transform ease;
+  transition: 0.2s transform ease, 0.2s background-color ease-out;
   background-color: #1e1e1e;
-  border: 5px solid #1e1e1e;
+  border: 6px solid transparent;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-form-toggle .components-form-toggle__thumb {
@@ -1342,8 +1366,10 @@ body.is-dragging-components-draggable {
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
   background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border: 9px solid transparent;
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+.components-form-toggle.is-checked .components-form-toggle__track::after {
+  opacity: 1;
 }
 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));

package/build-style/style.css

@@ -317,6 +317,8 @@
   background: transparent;
   transform: none;
   opacity: 1;
+}
+.components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus), .components-button.is-tertiary:disabled:not(:focus), .components-button.is-tertiary[aria-disabled=true]:not(:focus), .components-button.is-tertiary[aria-disabled=true]:hover:not(:focus) {
   box-shadow: none;
   outline: none;
 }
@@ -401,6 +403,11 @@ p + .components-button.is-tertiary {
   background-image: linear-gradient(-45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%);
   /* stylelint-enable */
 }
+@media (prefers-reduced-motion: reduce) {
+  .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
+    animation-duration: 0s;
+  }
+}
 .components-button.is-compact {
   height: 32px;
 }
@@ -1309,6 +1316,7 @@ body.is-dragging-components-draggable {
   display: inline-block;
 }
 .components-form-toggle .components-form-toggle__track {
+  position: relative;
   content: "";
   display: inline-block;
   box-sizing: border-box;
@@ -1318,7 +1326,8 @@ body.is-dragging-components-draggable {
   width: 36px;
   height: 18px;
   border-radius: 9px;
-  transition: 0.2s background ease;
+  transition: 0.2s background-color ease, 0.2s border-color ease;
+  overflow: hidden;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-form-toggle .components-form-toggle__track {
@@ -1326,6 +1335,21 @@ body.is-dragging-components-draggable {
     transition-delay: 0s;
   }
 }
+.components-form-toggle .components-form-toggle__track::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border-top: 18px solid transparent;
+  transition: 0.2s opacity ease;
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-form-toggle .components-form-toggle__track::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 .components-form-toggle .components-form-toggle__thumb {
   display: block;
   position: absolute;
@@ -1335,9 +1359,9 @@ body.is-dragging-components-draggable {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  transition: 0.1s transform ease;
+  transition: 0.2s transform ease, 0.2s background-color ease-out;
   background-color: #1e1e1e;
-  border: 5px solid #1e1e1e;
+  border: 6px solid transparent;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-form-toggle .components-form-toggle__thumb {
@@ -1347,8 +1371,10 @@ body.is-dragging-components-draggable {
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
   background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border: 9px solid transparent;
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+.components-form-toggle.is-checked .components-form-toggle__track::after {
+  opacity: 1;
 }
 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));

package/build-types/angle-picker-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/angle-picker-control/index.tsx"],"names":[],"mappings":";AAuBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AA+EvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB;;uCAA8C,CAAC;AAE9E,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/angle-picker-control/index.tsx"],"names":[],"mappings":";AAuBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AA8EvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB;;uCAA8C,CAAC;AAE9E,eAAe,kBAAkB,CAAC"}