@wordpress/components 25.3.0 → 25.5.0

package/build/tab-panel/index.js

@@ -9,14 +9,18 @@ exports.default = exports.TabPanel = void 0;
 
 var _element = require("@wordpress/element");
 
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _compose = require("@wordpress/compose");
 
-var _navigableContainer = require("../navigable-container");
-
 var _button = _interopRequireDefault(require("../button"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * External dependencies
  */
@@ -28,19 +32,17 @@ var _button = _interopRequireDefault(require("../button"));
 /**
  * Internal dependencies
  */
-const TabButton = ({
-  tabId,
-  children,
-  selected,
-  ...rest
-}) => (0, _element.createElement)(_button.default, {
-  role: "tab",
-  tabIndex: selected ? undefined : -1,
-  "aria-selected": selected,
-  id: tabId,
-  __experimentalIsFocusable: true,
-  ...rest
-}, children);
+// Separate the actual tab name from the instance ID. This is
+// necessary because Ariakit internally uses the element ID when
+// a new tab is selected, but our implementation looks specifically
+// for the tab name to be passed to the `onSelect` callback.
+const extractTabName = id => {
+  if (typeof id === 'undefined' || id === null) {
+    return;
+  }
+
+  return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1];
+};
 /**
  * TabPanel is an ARIA-compliant tabpanel.
  *
@@ -89,24 +91,52 @@ const UnforwardedTabPanel = ({
   activeClass = 'is-active',
   onSelect
 }, ref) => {
-  var _selectedTab$name;
-
   const instanceId = (0, _compose.useInstanceId)(TabPanel, 'tab-panel');
-  const [selected, setSelected] = (0, _element.useState)();
-  const handleTabSelection = (0, _element.useCallback)(tabKey => {
-    setSelected(tabKey);
-    onSelect?.(tabKey);
-  }, [onSelect]); // Simulate a click on the newly focused tab, which causes the component
-  // to show the `tab-panel` associated with the clicked tab.
-
-  const activateTabAutomatically = (_childIndex, child) => {
-    child.click();
-  };
+  const prependInstanceId = (0, _element.useCallback)(tabName => {
+    if (typeof tabName === 'undefined') {
+      return;
+    }
 
+    return `${instanceId}-${tabName}`;
+  }, [instanceId]);
+  const tabStore = Ariakit.useTabStore({
+    setSelectedId: newTabValue => {
+      if (typeof newTabValue === 'undefined' || newTabValue === null) {
+        return;
+      }
+
+      const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue);
+
+      if (newTab?.disabled || newTab === selectedTab) {
+        return;
+      }
+
+      const simplifiedTabName = extractTabName(newTabValue);
+
+      if (typeof simplifiedTabName === 'undefined') {
+        return;
+      }
+
+      onSelect?.(simplifiedTabName);
+    },
+    orientation,
+    selectOnMove,
+    defaultSelectedId: prependInstanceId(initialTabName)
+  });
+  const selectedTabName = extractTabName(tabStore.useState('selectedId'));
+  const setTabStoreSelectedId = (0, _element.useCallback)(tabName => {
+    tabStore.setState('selectedId', prependInstanceId(tabName));
+  }, [prependInstanceId, tabStore]);
   const selectedTab = tabs.find(({
     name
-  }) => name === selected);
-  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab?.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`; // Handle selecting the initial tab.
+  }) => name === selectedTabName);
+  const previousSelectedTabName = (0, _compose.usePrevious)(selectedTabName); // Ensure `onSelect` is called when the initial tab is selected.
+
+  (0, _element.useEffect)(() => {
+    if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) {
+      onSelect?.(selectedTabName);
+    }
+  }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]); // Handle selecting the initial tab.
 
   (0, _element.useLayoutEffect)(() => {
     // If there's a selected tab, don't override it.
@@ -124,13 +154,17 @@ const UnforwardedTabPanel = ({
 
     if (initialTab && !initialTab.disabled) {
       // Select the initial tab if it's not disabled.
-      handleTabSelection(initialTab.name);
+      setTabStoreSelectedId(initialTab.name);
     } else {
-      // Fallback to the first enabled tab when the initial is disabled.
+      // Fallback to the first enabled tab when the initial tab is
+      // disabled or it can't be found.
       const firstEnabledTab = tabs.find(tab => !tab.disabled);
-      if (firstEnabledTab) handleTabSelection(firstEnabledTab.name);
+
+      if (firstEnabledTab) {
+        setTabStoreSelectedId(firstEnabledTab.name);
+      }
     }
-  }, [tabs, selectedTab, initialTabName, handleTabSelection]); // Handle the currently selected tab becoming disabled.
+  }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]); // Handle the currently selected tab becoming disabled.
 
   (0, _element.useEffect)(() => {
     // This effect only runs when the selected tab is defined and becomes disabled.
@@ -142,36 +176,35 @@ const UnforwardedTabPanel = ({
     // (if there is one).
 
     if (firstEnabledTab) {
-      handleTabSelection(firstEnabledTab.name);
+      setTabStoreSelectedId(firstEnabledTab.name);
     }
-  }, [tabs, selectedTab?.disabled, handleTabSelection]);
+  }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]);
   return (0, _element.createElement)("div", {
     className: className,
     ref: ref
-  }, (0, _element.createElement)(_navigableContainer.NavigableMenu, {
-    role: "tablist",
-    orientation: orientation,
-    onNavigate: selectOnMove ? activateTabAutomatically : undefined,
+  }, (0, _element.createElement)(Ariakit.TabList, {
+    store: tabStore,
     className: "components-tab-panel__tabs"
-  }, tabs.map(tab => (0, _element.createElement)(TabButton, {
-    className: (0, _classnames.default)('components-tab-panel__tabs-item', tab.className, {
-      [activeClass]: tab.name === selected
-    }),
-    tabId: `${instanceId}-${tab.name}`,
-    "aria-controls": `${instanceId}-${tab.name}-view`,
-    selected: tab.name === selected,
-    key: tab.name,
-    onClick: () => handleTabSelection(tab.name),
-    disabled: tab.disabled,
-    label: tab.icon && tab.title,
-    icon: tab.icon,
-    showTooltip: !!tab.icon
-  }, !tab.icon && tab.title))), selectedTab && (0, _element.createElement)("div", {
-    key: selectedId,
-    "aria-labelledby": selectedId,
-    role: "tabpanel",
-    id: `${selectedId}-view`,
-    className: "components-tab-panel__tab-content"
+  }, tabs.map(tab => {
+    return (0, _element.createElement)(Ariakit.Tab, {
+      key: tab.name,
+      id: prependInstanceId(tab.name),
+      className: (0, _classnames.default)('components-tab-panel__tabs-item', tab.className, {
+        [activeClass]: tab.name === selectedTabName
+      }),
+      disabled: tab.disabled,
+      "aria-controls": `${prependInstanceId(tab.name)}-view`,
+      render: (0, _element.createElement)(_button.default, {
+        icon: tab.icon,
+        label: tab.icon && tab.title,
+        showTooltip: !!tab.icon
+      })
+    }, !tab.icon && tab.title);
+  })), selectedTab && (0, _element.createElement)(Ariakit.TabPanel, {
+    id: `${prependInstanceId(selectedTab.name)}-view`,
+    store: tabStore,
+    tabId: prependInstanceId(selectedTab.name),
+    className: 'components-tab-panel__tab-content'
   }, children(selectedTab)));
 };
 

package/build/tab-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","children","selected","rest","undefined","UnforwardedTabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","ref","instanceId","TabPanel","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","initialTab","tab","disabled","firstEnabledTab","map","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? undefined : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\t__experimentalIsFocusable\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nconst UnforwardedTabPanel = (\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\ttabs,\n\t\tselectOnMove = true,\n\t\tinitialTabName,\n\t\torientation = 'horizontal',\n\t\tactiveClass = 'is-active',\n\t\tonSelect,\n\t}: WordPressComponentProps< TabPanelProps, 'div', false >,\n\tref: ForwardedRef< any >\n) => {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\t// If there's a selected tab, don't override it.\n\t\tif ( selectedTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\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.\n\t\tif ( initialTabName && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( initialTab && ! initialTab.disabled ) {\n\t\t\t// Select the initial tab if it's not disabled.\n\t\t\thandleTabSelection( initialTab.name );\n\t\t} else {\n\t\t\t// Fallback to the first enabled tab when the initial is disabled.\n\t\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t\tif ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseEffect( () => {\n\t\t// This effect only runs when the selected tab is defined and becomes disabled.\n\t\tif ( ! selectedTab?.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\n\t\t// If the currently selected tab becomes disabled, select the first enabled tab.\n\t\t// (if there is one).\n\t\tif ( firstEnabledTab ) {\n\t\t\thandleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab?.disabled, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className } ref={ ref }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport const TabPanel = forwardRef( UnforwardedTabPanel );\nexport default TabPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["extractTabName","id","match","UnforwardedTabPanel","className","children","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","ref","instanceId","TabPanel","prependInstanceId","tabName","tabStore","Ariakit","useTabStore","setSelectedId","newTabValue","newTab","find","t","name","disabled","selectedTab","simplifiedTabName","defaultSelectedId","selectedTabName","useState","setTabStoreSelectedId","setState","previousSelectedTabName","initialTab","tab","firstEnabledTab","map","icon","title"],"mappings":";;;;;;;;;AAUA;;AAPA;;AACA;;AAYA;;AAMA;;;;;;AAtBA;AACA;AACA;;AAKA;AACA;AACA;;AASA;AACA;AACA;AAMA;AACA;AACA;AACA;AACA,MAAMA,cAAc,GAAKC,EAAF,IAAqC;AAC3D,MAAK,OAAOA,EAAP,KAAc,WAAd,IAA6BA,EAAE,KAAK,IAAzC,EAAgD;AAC/C;AACA;;AACD,SAAOA,EAAE,CAACC,KAAH,CAAU,wBAAV,IAAwC,CAAxC,CAAP;AACA,CALD;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMC,mBAAmB,GAAG,CAC3B;AACCC,EAAAA,SADD;AAECC,EAAAA,QAFD;AAGCC,EAAAA,IAHD;AAICC,EAAAA,YAAY,GAAG,IAJhB;AAKCC,EAAAA,cALD;AAMCC,EAAAA,WAAW,GAAG,YANf;AAOCC,EAAAA,WAAW,GAAG,WAPf;AAQCC,EAAAA;AARD,CAD2B,EAW3BC,GAX2B,KAYvB;AACJ,QAAMC,UAAU,GAAG,4BAAeC,QAAf,EAAyB,WAAzB,CAAnB;AAEA,QAAMC,iBAAiB,GAAG,0BACvBC,OAAF,IAAmC;AAClC,QAAK,OAAOA,OAAP,KAAmB,WAAxB,EAAsC;AACrC;AACA;;AACD,WAAQ,GAAGH,UAAY,IAAIG,OAAS,EAApC;AACA,GANwB,EAOzB,CAAEH,UAAF,CAPyB,CAA1B;AAUA,QAAMI,QAAQ,GAAGC,OAAO,CAACC,WAAR,CAAqB;AACrCC,IAAAA,aAAa,EAAIC,WAAF,IAAmB;AACjC,UAAK,OAAOA,WAAP,KAAuB,WAAvB,IAAsCA,WAAW,KAAK,IAA3D,EAAkE;AACjE;AACA;;AAED,YAAMC,MAAM,GAAGhB,IAAI,CAACiB,IAAL,CACZC,CAAF,IAAST,iBAAiB,CAAES,CAAC,CAACC,IAAJ,CAAjB,KAAgCJ,WAD3B,CAAf;;AAGA,UAAKC,MAAM,EAAEI,QAAR,IAAoBJ,MAAM,KAAKK,WAApC,EAAkD;AACjD;AACA;;AAED,YAAMC,iBAAiB,GAAG5B,cAAc,CAAEqB,WAAF,CAAxC;;AACA,UAAK,OAAOO,iBAAP,KAA6B,WAAlC,EAAgD;AAC/C;AACA;;AAEDjB,MAAAA,QAAQ,GAAIiB,iBAAJ,CAAR;AACA,KAnBoC;AAoBrCnB,IAAAA,WApBqC;AAqBrCF,IAAAA,YArBqC;AAsBrCsB,IAAAA,iBAAiB,EAAEd,iBAAiB,CAAEP,cAAF;AAtBC,GAArB,CAAjB;AAyBA,QAAMsB,eAAe,GAAG9B,cAAc,CAAEiB,QAAQ,CAACc,QAAT,CAAmB,YAAnB,CAAF,CAAtC;AAEA,QAAMC,qBAAqB,GAAG,0BAC3BhB,OAAF,IAAuB;AACtBC,IAAAA,QAAQ,CAACgB,QAAT,CAAmB,YAAnB,EAAiClB,iBAAiB,CAAEC,OAAF,CAAlD;AACA,GAH4B,EAI7B,CAAED,iBAAF,EAAqBE,QAArB,CAJ6B,CAA9B;AAOA,QAAMU,WAAW,GAAGrB,IAAI,CAACiB,IAAL,CAAW,CAAE;AAAEE,IAAAA;AAAF,GAAF,KAAgBA,IAAI,KAAKK,eAApC,CAApB;AAEA,QAAMI,uBAAuB,GAAG,0BAAaJ,eAAb,CAAhC,CAjDI,CAmDJ;;AACA,0BAAW,MAAM;AAChB,QACCI,uBAAuB,KAAKJ,eAA5B,IACAA,eAAe,KAAKtB,cADpB,IAEA,CAAC,CAAEsB,eAHJ,EAIE;AACDnB,MAAAA,QAAQ,GAAImB,eAAJ,CAAR;AACA;AACD,GARD,EAQG,CAAEA,eAAF,EAAmBtB,cAAnB,EAAmCG,QAAnC,EAA6CuB,uBAA7C,CARH,EApDI,CA8DJ;;AACA,gCAAiB,MAAM;AACtB;AACA,QAAKP,WAAL,EAAmB;AAClB;AACA;;AACD,UAAMQ,UAAU,GAAG7B,IAAI,CAACiB,IAAL,CAAaa,GAAF,IAAWA,GAAG,CAACX,IAAJ,KAAajB,cAAnC,CAAnB,CALsB,CAMtB;AACA;AACA;;AACA,QAAKA,cAAc,IAAI,CAAE2B,UAAzB,EAAsC;AACrC;AACA;;AACD,QAAKA,UAAU,IAAI,CAAEA,UAAU,CAACT,QAAhC,EAA2C;AAC1C;AACAM,MAAAA,qBAAqB,CAAEG,UAAU,CAACV,IAAb,CAArB;AACA,KAHD,MAGO;AACN;AACA;AACA,YAAMY,eAAe,GAAG/B,IAAI,CAACiB,IAAL,CAAaa,GAAF,IAAW,CAAEA,GAAG,CAACV,QAA5B,CAAxB;;AACA,UAAKW,eAAL,EAAuB;AACtBL,QAAAA,qBAAqB,CAAEK,eAAe,CAACZ,IAAlB,CAArB;AACA;AACD;AACD,GAvBD,EAuBG,CACFnB,IADE,EAEFqB,WAFE,EAGFnB,cAHE,EAIFK,UAJE,EAKFmB,qBALE,CAvBH,EA/DI,CA8FJ;;AACA,0BAAW,MAAM;AAChB;AACA,QAAK,CAAEL,WAAW,EAAED,QAApB,EAA+B;AAC9B;AACA;;AACD,UAAMW,eAAe,GAAG/B,IAAI,CAACiB,IAAL,CAAaa,GAAF,IAAW,CAAEA,GAAG,CAACV,QAA5B,CAAxB,CALgB,CAMhB;AACA;;AACA,QAAKW,eAAL,EAAuB;AACtBL,MAAAA,qBAAqB,CAAEK,eAAe,CAACZ,IAAlB,CAArB;AACA;AACD,GAXD,EAWG,CAAEnB,IAAF,EAAQqB,WAAW,EAAED,QAArB,EAA+BM,qBAA/B,EAAsDnB,UAAtD,CAXH;AAYA,SACC;AAAK,IAAA,SAAS,EAAGT,SAAjB;AAA6B,IAAA,GAAG,EAAGQ;AAAnC,KACC,4BAAC,OAAD,CAAS,OAAT;AACC,IAAA,KAAK,EAAGK,QADT;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGX,IAAI,CAACgC,GAAL,CAAYF,GAAF,IAAW;AACtB,WACC,4BAAC,OAAD,CAAS,GAAT;AACC,MAAA,GAAG,EAAGA,GAAG,CAACX,IADX;AAEC,MAAA,EAAE,EAAGV,iBAAiB,CAAEqB,GAAG,CAACX,IAAN,CAFvB;AAGC,MAAA,SAAS,EAAG,yBACX,iCADW,EAEXW,GAAG,CAAChC,SAFO,EAGX;AACC,SAAEM,WAAF,GACC0B,GAAG,CAACX,IAAJ,KAAaK;AAFf,OAHW,CAHb;AAWC,MAAA,QAAQ,EAAGM,GAAG,CAACV,QAXhB;AAYC,uBAAiB,GAAGX,iBAAiB,CACpCqB,GAAG,CAACX,IADgC,CAElC,OAdJ;AAeC,MAAA,MAAM,EACL,4BAAC,eAAD;AACC,QAAA,IAAI,EAAGW,GAAG,CAACG,IADZ;AAEC,QAAA,KAAK,EAAGH,GAAG,CAACG,IAAJ,IAAYH,GAAG,CAACI,KAFzB;AAGC,QAAA,WAAW,EAAG,CAAC,CAAEJ,GAAG,CAACG;AAHtB;AAhBF,OAuBG,CAAEH,GAAG,CAACG,IAAN,IAAcH,GAAG,CAACI,KAvBrB,CADD;AA2BA,GA5BC,CAJH,CADD,EAmCGb,WAAW,IACZ,4BAAC,OAAD,CAAS,QAAT;AACC,IAAA,EAAE,EAAI,GAAGZ,iBAAiB,CAAEY,WAAW,CAACF,IAAd,CAAsB,OADjD;AAEC,IAAA,KAAK,EAAGR,QAFT;AAGC,IAAA,KAAK,EAAGF,iBAAiB,CAAEY,WAAW,CAACF,IAAd,CAH1B;AAIC,IAAA,SAAS,EAAG;AAJb,KAMGpB,QAAQ,CAAEsB,WAAF,CANX,CApCF,CADD;AAgDA,CAvKD;;AAyKO,MAAMb,QAAQ,GAAG,yBAAYX,mBAAZ,CAAjB;;eACQW,Q","sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport Button from '../button';\nimport type { TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\n// Separate the actual tab name from the instance ID. This is\n// necessary because Ariakit internally uses the element ID when\n// a new tab is selected, but our implementation looks specifically\n// for the tab name to be passed to the `onSelect` callback.\nconst extractTabName = ( id: string | undefined | null ) => {\n\tif ( typeof id === 'undefined' || id === null ) {\n\t\treturn;\n\t}\n\treturn id.match( /^tab-panel-[0-9]*-(.*)/ )?.[ 1 ];\n};\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nconst UnforwardedTabPanel = (\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\ttabs,\n\t\tselectOnMove = true,\n\t\tinitialTabName,\n\t\torientation = 'horizontal',\n\t\tactiveClass = 'is-active',\n\t\tonSelect,\n\t}: WordPressComponentProps< TabPanelProps, 'div', false >,\n\tref: ForwardedRef< any >\n) => {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\n\tconst prependInstanceId = useCallback(\n\t\t( tabName: string | undefined ) => {\n\t\t\tif ( typeof tabName === 'undefined' ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\treturn `${ instanceId }-${ tabName }`;\n\t\t},\n\t\t[ instanceId ]\n\t);\n\n\tconst tabStore = Ariakit.useTabStore( {\n\t\tsetSelectedId: ( newTabValue ) => {\n\t\t\tif ( typeof newTabValue === 'undefined' || newTabValue === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst newTab = tabs.find(\n\t\t\t\t( t ) => prependInstanceId( t.name ) === newTabValue\n\t\t\t);\n\t\t\tif ( newTab?.disabled || newTab === selectedTab ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst simplifiedTabName = extractTabName( newTabValue );\n\t\t\tif ( typeof simplifiedTabName === 'undefined' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonSelect?.( simplifiedTabName );\n\t\t},\n\t\torientation,\n\t\tselectOnMove,\n\t\tdefaultSelectedId: prependInstanceId( initialTabName ),\n\t} );\n\n\tconst selectedTabName = extractTabName( tabStore.useState( 'selectedId' ) );\n\n\tconst setTabStoreSelectedId = useCallback(\n\t\t( tabName: string ) => {\n\t\t\ttabStore.setState( 'selectedId', prependInstanceId( tabName ) );\n\t\t},\n\t\t[ prependInstanceId, tabStore ]\n\t);\n\n\tconst selectedTab = tabs.find( ( { name } ) => name === selectedTabName );\n\n\tconst previousSelectedTabName = usePrevious( selectedTabName );\n\n\t// Ensure `onSelect` is called when the initial tab is selected.\n\tuseEffect( () => {\n\t\tif (\n\t\t\tpreviousSelectedTabName !== selectedTabName &&\n\t\t\tselectedTabName === initialTabName &&\n\t\t\t!! selectedTabName\n\t\t) {\n\t\t\tonSelect?.( selectedTabName );\n\t\t}\n\t}, [ selectedTabName, initialTabName, onSelect, previousSelectedTabName ] );\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\t// If there's a selected tab, don't override it.\n\t\tif ( selectedTab ) {\n\t\t\treturn;\n\t\t}\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\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.\n\t\tif ( initialTabName && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( initialTab && ! initialTab.disabled ) {\n\t\t\t// Select the initial tab if it's not disabled.\n\t\t\tsetTabStoreSelectedId( initialTab.name );\n\t\t} else {\n\t\t\t// Fallback to the first enabled tab when the initial tab is\n\t\t\t// disabled or it can't be found.\n\t\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t\tif ( firstEnabledTab ) {\n\t\t\t\tsetTabStoreSelectedId( firstEnabledTab.name );\n\t\t\t}\n\t\t}\n\t}, [\n\t\ttabs,\n\t\tselectedTab,\n\t\tinitialTabName,\n\t\tinstanceId,\n\t\tsetTabStoreSelectedId,\n\t] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseEffect( () => {\n\t\t// This effect only runs when the selected tab is defined and becomes disabled.\n\t\tif ( ! selectedTab?.disabled ) {\n\t\t\treturn;\n\t\t}\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t// If the currently selected tab becomes disabled, select the first enabled tab.\n\t\t// (if there is one).\n\t\tif ( firstEnabledTab ) {\n\t\t\tsetTabStoreSelectedId( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId ] );\n\treturn (\n\t\t<div className={ className } ref={ ref }>\n\t\t\t<Ariakit.TabList\n\t\t\t\tstore={ tabStore }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Ariakit.Tab\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tid={ prependInstanceId( tab.name ) }\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t[ activeClass ]:\n\t\t\t\t\t\t\t\t\t\ttab.name === selectedTabName,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\t\taria-controls={ `${ prependInstanceId(\n\t\t\t\t\t\t\t\ttab.name\n\t\t\t\t\t\t\t) }-view` }\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t\t</Ariakit.Tab>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Ariakit.TabList>\n\t\t\t{ selectedTab && (\n\t\t\t\t<Ariakit.TabPanel\n\t\t\t\t\tid={ `${ prependInstanceId( selectedTab.name ) }-view` }\n\t\t\t\t\tstore={ tabStore }\n\t\t\t\t\ttabId={ prependInstanceId( selectedTab.name ) }\n\t\t\t\t\tclassName={ 'components-tab-panel__tab-content' }\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</Ariakit.TabPanel>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport const TabPanel = forwardRef( UnforwardedTabPanel );\nexport default TabPanel;\n"]}

package/build/text-control/index.js

@@ -31,13 +31,13 @@ function UnforwardedTextControl(props, ref) {
     hideLabelFromVision,
     value,
     help,
+    id: idProp,
     className,
     onChange,
     type = 'text',
     ...additionalProps
   } = props;
-  const instanceId = (0, _compose.useInstanceId)(TextControl);
-  const id = `inspector-text-control-${instanceId}`;
+  const id = (0, _compose.useInstanceId)(TextControl, 'inspector-text-control', idProp);
 
   const onChangeValue = event => onChange(event.target.value);
 

package/build/text-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/text-control/index.tsx"],"names":["UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","className","onChange","type","additionalProps","instanceId","TextControl","id","onChangeValue","event","target","undefined"],"mappings":";;;;;;;;;AASA;;AADA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAKA,SAASA,sBAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,mBAHK;AAILC,IAAAA,KAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,SANK;AAOLC,IAAAA,QAPK;AAQLC,IAAAA,IAAI,GAAG,MARF;AASL,OAAGC;AATE,MAUFV,KAVJ;AAWA,QAAMW,UAAU,GAAG,4BAAeC,WAAf,CAAnB;AACA,QAAMC,EAAE,GAAI,0BAA0BF,UAAY,EAAlD;;AACA,QAAMG,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaX,KAAf,CADT;;AAGA,SACC,4BAAC,oBAAD;AACC,IAAA,uBAAuB,EAAGH,uBAD3B;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,mBAAmB,EAAGC,mBAHvB;AAIC,IAAA,EAAE,EAAGS,EAJN;AAKC,IAAA,IAAI,EAAGP,IALR;AAMC,IAAA,SAAS,EAAGC;AANb,KAQC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,IAAI,EAAGE,IAFR;AAGC,IAAA,EAAE,EAAGI,EAHN;AAIC,IAAA,KAAK,EAAGR,KAJT;AAKC,IAAA,QAAQ,EAAGS,aALZ;AAMC,wBAAmB,CAAC,CAAER,IAAH,GAAUO,EAAE,GAAG,QAAf,GAA0BI,SAN9C;AAOC,IAAA,GAAG,EAAGhB,GAPP;AAAA,OAQMS;AARN,IARD,CADD;AAqBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,WAAW,GAAG,yBAAYb,sBAAZ,CAApB;;eAEQa,W","sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextControl );\n\tconst id = `inspector-text-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName=\"components-text-control__input\"\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/text-control/index.tsx"],"names":["UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","id","idProp","className","onChange","type","additionalProps","TextControl","onChangeValue","event","target","undefined"],"mappings":";;;;;;;;;AASA;;AADA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAKA,SAASA,sBAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,mBAHK;AAILC,IAAAA,KAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,EAAE,EAAEC,MANC;AAOLC,IAAAA,SAPK;AAQLC,IAAAA,QARK;AASLC,IAAAA,IAAI,GAAG,MATF;AAUL,OAAGC;AAVE,MAWFZ,KAXJ;AAYA,QAAMO,EAAE,GAAG,4BAAeM,WAAf,EAA4B,wBAA5B,EAAsDL,MAAtD,CAAX;;AACA,QAAMM,aAAa,GAAKC,KAAF,IACrBL,QAAQ,CAAEK,KAAK,CAACC,MAAN,CAAaX,KAAf,CADT;;AAGA,SACC,4BAAC,oBAAD;AACC,IAAA,uBAAuB,EAAGH,uBAD3B;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,mBAAmB,EAAGC,mBAHvB;AAIC,IAAA,EAAE,EAAGG,EAJN;AAKC,IAAA,IAAI,EAAGD,IALR;AAMC,IAAA,SAAS,EAAGG;AANb,KAQC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,IAAI,EAAGE,IAFR;AAGC,IAAA,EAAE,EAAGJ,EAHN;AAIC,IAAA,KAAK,EAAGF,KAJT;AAKC,IAAA,QAAQ,EAAGS,aALZ;AAMC,wBAAmB,CAAC,CAAER,IAAH,GAAUC,EAAE,GAAG,QAAf,GAA0BU,SAN9C;AAOC,IAAA,GAAG,EAAGhB,GAPP;AAAA,OAQMW;AARN,IARD,CADD;AAqBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMC,WAAW,GAAG,yBAAYd,sBAAZ,CAApB;;eAEQc,W","sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tid: idProp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId( TextControl, 'inspector-text-control', idProp );\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName=\"components-text-control__input\"\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"]}

package/build/toolbar/toolbar-group/toolbar-group-container.native.js

@@ -27,14 +27,17 @@ var _style = _interopRequireDefault(require("./style.scss"));
  * Internal dependencies
  */
 const ToolbarGroupContainer = ({
-  getStylesFromColorScheme,
   passedStyle,
   children
-}) => (0, _element.createElement)(_reactNative.View, {
-  style: [getStylesFromColorScheme(_style.default.container, _style.default.containerDark), passedStyle]
-}, children);
-
-var _default = (0, _compose.withPreferredColorScheme)(ToolbarGroupContainer);
-
+}) => {
+  const groupStyles = [(0, _compose.usePreferredColorSchemeStyle)(_style.default.container, _style.default.containerDark), {
+    borderLeftWidth: _reactNative.StyleSheet.hairlineWidth
+  }, passedStyle];
+  return (0, _element.createElement)(_reactNative.View, {
+    style: groupStyles
+  }, children);
+};
+
+var _default = ToolbarGroupContainer;
 exports.default = _default;
 //# sourceMappingURL=toolbar-group-container.native.js.map

package/build/toolbar/toolbar-group/toolbar-group-container.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-group/toolbar-group-container.native.js"],"names":["ToolbarGroupContainer","getStylesFromColorScheme","passedStyle","children","styles","container","containerDark"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,qBAAqB,GAAG,CAAE;AAC/BC,EAAAA,wBAD+B;AAE/BC,EAAAA,WAF+B;AAG/BC,EAAAA;AAH+B,CAAF,KAK7B,4BAAC,iBAAD;AACC,EAAA,KAAK,EAAG,CACPF,wBAAwB,CAAEG,eAAOC,SAAT,EAAoBD,eAAOE,aAA3B,CADjB,EAEPJ,WAFO;AADT,GAMGC,QANH,CALD;;eAee,uCAA0BH,qBAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst ToolbarGroupContainer = ( {\n\tgetStylesFromColorScheme,\n\tpassedStyle,\n\tchildren,\n} ) => (\n\t<View\n\t\tstyle={ [\n\t\t\tgetStylesFromColorScheme( styles.container, styles.containerDark ),\n\t\t\tpassedStyle,\n\t\t] }\n\t>\n\t\t{ children }\n\t</View>\n);\n\nexport default withPreferredColorScheme( ToolbarGroupContainer );\n"]}
+{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-group/toolbar-group-container.native.js"],"names":["ToolbarGroupContainer","passedStyle","children","groupStyles","styles","container","containerDark","borderLeftWidth","StyleSheet","hairlineWidth"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,qBAAqB,GAAG,CAAE;AAAEC,EAAAA,WAAF;AAAeC,EAAAA;AAAf,CAAF,KAAiC;AAC9D,QAAMC,WAAW,GAAG,CACnB,2CAA8BC,eAAOC,SAArC,EAAgDD,eAAOE,aAAvD,CADmB,EAEnB;AAAEC,IAAAA,eAAe,EAAEC,wBAAWC;AAA9B,GAFmB,EAGnBR,WAHmB,CAApB;AAMA,SAAO,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGE;AAAd,KAA8BD,QAA9B,CAAP;AACA,CARD;;eAUeF,qB","sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst ToolbarGroupContainer = ( { passedStyle, children } ) => {\n\tconst groupStyles = [\n\t\tusePreferredColorSchemeStyle( styles.container, styles.containerDark ),\n\t\t{ borderLeftWidth: StyleSheet.hairlineWidth },\n\t\tpassedStyle,\n\t];\n\n\treturn <View style={ groupStyles }>{ children }</View>;\n};\n\nexport default ToolbarGroupContainer;\n"]}

package/build-module/border-control/border-control-dropdown/component.js

@@ -27,10 +27,8 @@ import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 import { isMultiplePaletteArray } from '../../color-palette/utils';
 
 const getAriaLabelColorValue = colorValue => {
-  const isHex = colorValue.startsWith('#'); // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
-
-  const displayValue = colorValue.replace(/^var\((.+)\)$/, '$1');
-  return isHex ? displayValue.split('').join('-') : displayValue;
+  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+  return colorValue.replace(/^var\((.+)\)$/, '$1');
 };
 
 const getColorObject = (colorValue, colors) => {
@@ -60,15 +58,15 @@ const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
   if (isStyleEnabled) {
     if (colorObject) {
       const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
-      return style ? sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %3$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+      return style ? sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
       'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
     }
 
     if (colorValue) {
       const ariaLabelValue = getAriaLabelColorValue(colorValue);
-      return style ? sprintf( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %2$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : sprintf( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+      return style ? sprintf( // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : sprintf( // translators: %1$s: The color's hex code e.g: "#f00".
       'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
     }
 
@@ -76,12 +74,12 @@ const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
   }
 
   if (colorObject) {
-    return sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+    return sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
     'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
   }
 
   if (colorValue) {
-    return sprintf( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+    return sprintf( // translators: %1$s: The color's hex code e.g: "#f00".
     'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
   }
 

package/build-module/border-control/border-control-dropdown/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","isMultiplePaletteArray","getAriaLabelColorValue","colorValue","isHex","startsWith","displayValue","replace","split","join","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\tconst isHex = colorValue.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = colorValue.replace( /^var\\((.+)\\)$/, '$1' );\n\n\treturn isHex ? displayValue.split( '' ).join( '-' ) : displayValue;\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","isMultiplePaletteArray","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\\((.+)\\)$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}

package/build-module/button/index.native.js

@@ -17,6 +17,7 @@ import { usePreferredColorScheme, usePreferredColorSchemeStyle } from '@wordpres
 
 import Tooltip from '../tooltip';
 import Icon from '../icon';
+import style from './style.scss';
 const isAndroid = Platform.OS === 'android';
 const marginBottom = isAndroid ? -0.5 : 0;
 const marginLeft = -3;
@@ -41,9 +42,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: 6,
-    borderColor: '#2e4453',
-    backgroundColor: '#2e4453'
+    borderRadius: 6
   },
   subscriptInactive: {
     color: '#7b9ab1',
@@ -86,16 +85,19 @@ export function Button(props) {
     shortcut,
     tooltipPosition,
     isActiveStyle,
-    customContainerStyles
+    customContainerStyles,
+    hitSlop
   } = props;
   const preferredColorScheme = usePreferredColorScheme();
   const isDisabled = ariaDisabled || disabled;
   const containerStyle = [styles.container, customContainerStyles && { ...customContainerStyles
   }];
+  const buttonActiveColorStyles = usePreferredColorSchemeStyle(style['components-button-light--active'], style['components-button-dark--active']);
   const buttonViewStyle = {
     opacity: isDisabled ? 0.3 : 1,
     ...(fixedRatio && styles.fixedRatio),
     ...(isPressed ? styles.buttonActive : styles.buttonInactive),
+    ...(isPressed ? buttonActiveColorStyles : {}),
     ...(isPressed && isActiveStyle?.borderRadius && {
       borderRadius: isActiveStyle.borderRadius
     }),
@@ -131,7 +133,6 @@ export function Button(props) {
     icon: icon,
     size: iconSize
   }), {
-    colorScheme: preferredColorScheme,
     isPressed
   }) : null;
   const longPressHandler = useCallback(({
@@ -151,7 +152,8 @@ export function Button(props) {
     onPress: onClick,
     style: containerStyle,
     disabled: isDisabled,
-    testID: testID
+    testID: testID,
+    hitSlop: hitSlop
   }, createElement(LongPressGestureHandler, {
     minDurationMs: 500,
     maxDist: 150,

package/build-module/button/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/button/index.native.js"],"names":["StyleSheet","TouchableOpacity","Text","View","Platform","LongPressGestureHandler","State","Children","cloneElement","useCallback","usePreferredColorScheme","usePreferredColorSchemeStyle","Tooltip","Icon","isAndroid","OS","marginBottom","marginLeft","styles","create","container","flex","padding","justifyContent","alignItems","buttonInactive","flexDirection","fixedRatio","aspectRatio","buttonActive","borderRadius","borderColor","backgroundColor","subscriptInactive","color","fontWeight","fontSize","alignSelf","subscriptInactiveDark","subscriptActive","Button","props","children","onClick","onLongPress","disabled","hint","isPressed","ariaDisabled","subscript","testID","icon","iconSize","showTooltip","label","shortcut","tooltipPosition","isActiveStyle","customContainerStyles","preferredColorScheme","isDisabled","containerStyle","buttonViewStyle","opacity","states","push","newChildren","map","child","colorScheme","shouldShowTooltip","Array","isArray","length","newIcon","longPressHandler","nativeEvent","state","ACTIVE","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tStyleSheet,\n\tTouchableOpacity,\n\tText,\n\tView,\n\tPlatform,\n} from 'react-native';\nimport { LongPressGestureHandler, State } from 'react-native-gesture-handler';\n\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement, useCallback } from '@wordpress/element';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\n\nconst isAndroid = Platform.OS === 'android';\nconst marginBottom = isAndroid ? -0.5 : 0;\nconst marginLeft = -3;\n\nconst styles = StyleSheet.create( {\n\tcontainer: {\n\t\tflex: 1,\n\t\tpadding: 3,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tbuttonInactive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tfixedRatio: {\n\t\taspectRatio: 1,\n\t},\n\tbuttonActive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tborderRadius: 6,\n\t\tborderColor: '#2e4453',\n\t\tbackgroundColor: '#2e4453',\n\t},\n\tsubscriptInactive: {\n\t\tcolor: '#7b9ab1', // $toolbar-button.\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n\tsubscriptInactiveDark: {\n\t\tcolor: '#a7aaad', // $gray_20.\n\t},\n\tsubscriptActive: {\n\t\tcolor: 'white',\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n} );\n\nexport function Button( props ) {\n\tconst {\n\t\tchildren,\n\t\tonClick,\n\t\tonLongPress,\n\t\tdisabled,\n\t\thint,\n\t\tfixedRatio = true,\n\t\tisPressed,\n\t\t'aria-disabled': ariaDisabled,\n\t\t'data-subscript': subscript,\n\t\ttestID,\n\t\ticon,\n\t\ticonSize,\n\t\tshowTooltip,\n\t\tlabel,\n\t\tshortcut,\n\t\ttooltipPosition,\n\t\tisActiveStyle,\n\t\tcustomContainerStyles,\n\t} = props;\n\tconst preferredColorScheme = usePreferredColorScheme();\n\n\tconst isDisabled = ariaDisabled || disabled;\n\n\tconst containerStyle = [\n\t\tstyles.container,\n\t\tcustomContainerStyles && { ...customContainerStyles },\n\t];\n\n\tconst buttonViewStyle = {\n\t\topacity: isDisabled ? 0.3 : 1,\n\t\t...( fixedRatio && styles.fixedRatio ),\n\t\t...( isPressed ? styles.buttonActive : styles.buttonInactive ),\n\t\t...( isPressed &&\n\t\t\tisActiveStyle?.borderRadius && {\n\t\t\t\tborderRadius: isActiveStyle.borderRadius,\n\t\t\t} ),\n\t\t...( isActiveStyle?.backgroundColor && {\n\t\t\tbackgroundColor: isActiveStyle.backgroundColor,\n\t\t} ),\n\t};\n\n\tconst states = [];\n\tif ( isPressed ) {\n\t\tstates.push( 'selected' );\n\t}\n\n\tif ( isDisabled ) {\n\t\tstates.push( 'disabled' );\n\t}\n\n\tconst subscriptInactive = usePreferredColorSchemeStyle(\n\t\tstyles.subscriptInactive,\n\t\tstyles.subscriptInactiveDark\n\t);\n\n\tconst newChildren = Children.map( children, ( child ) => {\n\t\treturn child\n\t\t\t? cloneElement( child, {\n\t\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\t\tisPressed,\n\t\t\t  } )\n\t\t\t: child;\n\t} );\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! isDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t( ! children ||\n\t\t\t\t\t( Array.isArray( children ) && ! children.length ) ) &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst newIcon = icon\n\t\t? cloneElement( <Icon icon={ icon } size={ iconSize } />, {\n\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\tisPressed,\n\t\t  } )\n\t\t: null;\n\n\tconst longPressHandler = useCallback(\n\t\t( { nativeEvent } ) => {\n\t\t\tif ( nativeEvent.state === State.ACTIVE && onLongPress ) {\n\t\t\t\tonLongPress();\n\t\t\t}\n\t\t},\n\t\t[ onLongPress ]\n\t);\n\n\tconst element = (\n\t\t<TouchableOpacity\n\t\t\tactiveOpacity={ 0.7 }\n\t\t\taccessible={ true }\n\t\t\taccessibilityLabel={ label }\n\t\t\taccessibilityStates={ states }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={ hint }\n\t\t\tonPress={ onClick }\n\t\t\tstyle={ containerStyle }\n\t\t\tdisabled={ isDisabled }\n\t\t\ttestID={ testID }\n\t\t>\n\t\t\t<LongPressGestureHandler\n\t\t\t\tminDurationMs={ 500 }\n\t\t\t\tmaxDist={ 150 }\n\t\t\t\tonHandlerStateChange={ longPressHandler }\n\t\t\t>\n\t\t\t\t<View style={ buttonViewStyle }>\n\t\t\t\t\t<View style={ { flexDirection: 'row' } }>\n\t\t\t\t\t\t{ newIcon }\n\t\t\t\t\t\t{ newChildren }\n\t\t\t\t\t\t{ subscript && (\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tisPressed\n\t\t\t\t\t\t\t\t\t\t? styles.subscriptActive\n\t\t\t\t\t\t\t\t\t\t: subscriptInactive\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ subscript }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t</LongPressGestureHandler>\n\t\t</TouchableOpacity>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn element;\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\ttext={ label }\n\t\t\tshortcut={ shortcut }\n\t\t\tposition={ tooltipPosition }\n\t\t\tvisible={ showTooltip === true }\n\t\t>\n\t\t\t{ element }\n\t\t</Tooltip>\n\t);\n}\n\nexport default Button;\n"]}
+{"version":3,"sources":["@wordpress/components/src/button/index.native.js"],"names":["StyleSheet","TouchableOpacity","Text","View","Platform","LongPressGestureHandler","State","Children","cloneElement","useCallback","usePreferredColorScheme","usePreferredColorSchemeStyle","Tooltip","Icon","style","isAndroid","OS","marginBottom","marginLeft","styles","create","container","flex","padding","justifyContent","alignItems","buttonInactive","flexDirection","fixedRatio","aspectRatio","buttonActive","borderRadius","subscriptInactive","color","fontWeight","fontSize","alignSelf","subscriptInactiveDark","subscriptActive","Button","props","children","onClick","onLongPress","disabled","hint","isPressed","ariaDisabled","subscript","testID","icon","iconSize","showTooltip","label","shortcut","tooltipPosition","isActiveStyle","customContainerStyles","hitSlop","preferredColorScheme","isDisabled","containerStyle","buttonActiveColorStyles","buttonViewStyle","opacity","backgroundColor","states","push","newChildren","map","child","colorScheme","shouldShowTooltip","Array","isArray","length","newIcon","longPressHandler","nativeEvent","state","ACTIVE","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tStyleSheet,\n\tTouchableOpacity,\n\tText,\n\tView,\n\tPlatform,\n} from 'react-native';\nimport { LongPressGestureHandler, State } from 'react-native-gesture-handler';\n\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement, useCallback } from '@wordpress/element';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport style from './style.scss';\n\nconst isAndroid = Platform.OS === 'android';\nconst marginBottom = isAndroid ? -0.5 : 0;\nconst marginLeft = -3;\n\nconst styles = StyleSheet.create( {\n\tcontainer: {\n\t\tflex: 1,\n\t\tpadding: 3,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tbuttonInactive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tfixedRatio: {\n\t\taspectRatio: 1,\n\t},\n\tbuttonActive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tborderRadius: 6,\n\t},\n\tsubscriptInactive: {\n\t\tcolor: '#7b9ab1', // $toolbar-button.\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n\tsubscriptInactiveDark: {\n\t\tcolor: '#a7aaad', // $gray_20.\n\t},\n\tsubscriptActive: {\n\t\tcolor: 'white',\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n} );\n\nexport function Button( props ) {\n\tconst {\n\t\tchildren,\n\t\tonClick,\n\t\tonLongPress,\n\t\tdisabled,\n\t\thint,\n\t\tfixedRatio = true,\n\t\tisPressed,\n\t\t'aria-disabled': ariaDisabled,\n\t\t'data-subscript': subscript,\n\t\ttestID,\n\t\ticon,\n\t\ticonSize,\n\t\tshowTooltip,\n\t\tlabel,\n\t\tshortcut,\n\t\ttooltipPosition,\n\t\tisActiveStyle,\n\t\tcustomContainerStyles,\n\t\thitSlop,\n\t} = props;\n\tconst preferredColorScheme = usePreferredColorScheme();\n\n\tconst isDisabled = ariaDisabled || disabled;\n\n\tconst containerStyle = [\n\t\tstyles.container,\n\t\tcustomContainerStyles && { ...customContainerStyles },\n\t];\n\n\tconst buttonActiveColorStyles = usePreferredColorSchemeStyle(\n\t\tstyle[ 'components-button-light--active' ],\n\t\tstyle[ 'components-button-dark--active' ]\n\t);\n\n\tconst buttonViewStyle = {\n\t\topacity: isDisabled ? 0.3 : 1,\n\t\t...( fixedRatio && styles.fixedRatio ),\n\t\t...( isPressed ? styles.buttonActive : styles.buttonInactive ),\n\t\t...( isPressed ? buttonActiveColorStyles : {} ),\n\t\t...( isPressed &&\n\t\t\tisActiveStyle?.borderRadius && {\n\t\t\t\tborderRadius: isActiveStyle.borderRadius,\n\t\t\t} ),\n\t\t...( isActiveStyle?.backgroundColor && {\n\t\t\tbackgroundColor: isActiveStyle.backgroundColor,\n\t\t} ),\n\t};\n\n\tconst states = [];\n\tif ( isPressed ) {\n\t\tstates.push( 'selected' );\n\t}\n\n\tif ( isDisabled ) {\n\t\tstates.push( 'disabled' );\n\t}\n\n\tconst subscriptInactive = usePreferredColorSchemeStyle(\n\t\tstyles.subscriptInactive,\n\t\tstyles.subscriptInactiveDark\n\t);\n\n\tconst newChildren = Children.map( children, ( child ) => {\n\t\treturn child\n\t\t\t? cloneElement( child, {\n\t\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\t\tisPressed,\n\t\t\t  } )\n\t\t\t: child;\n\t} );\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! isDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t( ! children ||\n\t\t\t\t\t( Array.isArray( children ) && ! children.length ) ) &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst newIcon = icon\n\t\t? cloneElement( <Icon icon={ icon } size={ iconSize } />, {\n\t\t\t\tisPressed,\n\t\t  } )\n\t\t: null;\n\n\tconst longPressHandler = useCallback(\n\t\t( { nativeEvent } ) => {\n\t\t\tif ( nativeEvent.state === State.ACTIVE && onLongPress ) {\n\t\t\t\tonLongPress();\n\t\t\t}\n\t\t},\n\t\t[ onLongPress ]\n\t);\n\n\tconst element = (\n\t\t<TouchableOpacity\n\t\t\tactiveOpacity={ 0.7 }\n\t\t\taccessible={ true }\n\t\t\taccessibilityLabel={ label }\n\t\t\taccessibilityStates={ states }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={ hint }\n\t\t\tonPress={ onClick }\n\t\t\tstyle={ containerStyle }\n\t\t\tdisabled={ isDisabled }\n\t\t\ttestID={ testID }\n\t\t\thitSlop={ hitSlop }\n\t\t>\n\t\t\t<LongPressGestureHandler\n\t\t\t\tminDurationMs={ 500 }\n\t\t\t\tmaxDist={ 150 }\n\t\t\t\tonHandlerStateChange={ longPressHandler }\n\t\t\t>\n\t\t\t\t<View style={ buttonViewStyle }>\n\t\t\t\t\t<View style={ { flexDirection: 'row' } }>\n\t\t\t\t\t\t{ newIcon }\n\t\t\t\t\t\t{ newChildren }\n\t\t\t\t\t\t{ subscript && (\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tisPressed\n\t\t\t\t\t\t\t\t\t\t? styles.subscriptActive\n\t\t\t\t\t\t\t\t\t\t: subscriptInactive\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ subscript }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t</LongPressGestureHandler>\n\t\t</TouchableOpacity>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn element;\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\ttext={ label }\n\t\t\tshortcut={ shortcut }\n\t\t\tposition={ tooltipPosition }\n\t\t\tvisible={ showTooltip === true }\n\t\t>\n\t\t\t{ element }\n\t\t</Tooltip>\n\t);\n}\n\nexport default Button;\n"]}

package/build-module/color-palette/index.js

@@ -160,8 +160,8 @@ function UnforwardedColorPalette(props, forwardedRef) {
   const isHex = value?.startsWith('#'); // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
 
   const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
-  const customColorAccessibleLabel = !!displayValue ? sprintf( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
-  __('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, isHex ? displayValue.split('').join('-') : displayValue) : __('Custom color picker.');
+  const customColorAccessibleLabel = !!displayValue ? sprintf( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+  __('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : __('Custom color picker.');
   const paletteCommonProps = {
     clearable,
     clearColor,