@wordpress/components 25.12.0 → 25.14.0

package/build/tabs/tabpanel.js

@@ -20,11 +20,11 @@ var _context = require("./context");
 
 const TabPanel = (0, _element.forwardRef)(function TabPanel({
   children,
-  id,
+  tabId,
   focusable = true,
   ...otherProps
 }, ref) {
-  const context = (0, _element.useContext)(_context.TabsContext);
+  const context = (0, _context.useTabsContext)();
   if (!context) {
     typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : void 0;
     return null;
@@ -33,10 +33,11 @@ const TabPanel = (0, _element.forwardRef)(function TabPanel({
     store,
     instanceId
   } = context;
+  const instancedTabId = `${instanceId}-${tabId}`;
   return (0, _react.createElement)(_styles.TabPanel, {
     ref: ref,
     store: store,
-    id: `${instanceId}-${id}-view`,
+    id: instancedTabId,
     focusable: focusable,
     ...otherProps
   }, children);

package/build/tabs/tabpanel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_styles","_warning","_interopRequireDefault","_context","TabPanel","forwardRef","children","id","focusable","otherProps","ref","context","useContext","TabsContext","SCRIPT_DEBUG","warning","store","instanceId","_react","createElement","exports"],"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":";;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAjBA;AACA;AACA;;AAEA;AACA;AACA;;AAcO,MAAMK,QAAQ,GAAG,IAAAC,mBAAU,EAG/B,SAASD,QAAQA,CAAE;EAAEE,QAAQ;EAAEC,EAAE;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EAC9E,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EAAEC,oBAAY,CAAC;EACzC,IAAK,CAAEF,OAAO,EAAG;IAChB,OAAAG,YAAA,oBAAAA,YAAA,gBAAAC,gBAAO,EAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGN,OAAO;EAErC,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACnB,OAAA,CAAAI,QAAc;IACdM,GAAG,EAAGA,GAAK;IACXM,KAAK,EAAGA,KAAO;IACfT,EAAE,EAAI,GAAGU,UAAY,IAAIV,EAAI,OAAQ;IACrCC,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbH,QACa,CAAC;AAEnB,CAAE,CAAC;AAACc,OAAA,CAAAhB,QAAA,GAAAA,QAAA"}
+{"version":3,"names":["_element","require","_styles","_warning","_interopRequireDefault","_context","TabPanel","forwardRef","children","tabId","focusable","otherProps","ref","context","useTabsContext","SCRIPT_DEBUG","warning","store","instanceId","instancedTabId","_react","createElement","id","exports"],"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\tOmit< WordPressComponentProps< TabPanelProps, 'div', false >, 'id' >\n>( function TabPanel(\n\t{ children, tabId, focusable = true, ...otherProps },\n\tref\n) {\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\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\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":";;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAjBA;AACA;AACA;;AAEA;AACA;AACA;;AAcO,MAAMK,QAAQ,GAAG,IAAAC,mBAAU,EAG/B,SAASD,QAAQA,CACnB;EAAEE,QAAQ;EAAEC,KAAK;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EACpDC,GAAG,EACF;EACD,MAAMC,OAAO,GAAG,IAAAC,uBAAc,EAAC,CAAC;EAChC,IAAK,CAAED,OAAO,EAAG;IAChB,OAAAE,YAAA,oBAAAA,YAAA,gBAAAC,gBAAO,EAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGL,OAAO;EACrC,MAAMM,cAAc,GAAI,GAAGD,UAAY,IAAIT,KAAO,EAAC;EAEnD,OACC,IAAAW,MAAA,CAAAC,aAAA,EAACnB,OAAA,CAAAI,QAAc;IACdM,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA,KAAO;IACfK,EAAE,EAAGH,cAAgB;IACrBT,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbH,QACa,CAAC;AAEnB,CAAE,CAAC;AAACe,OAAA,CAAAjB,QAAA,GAAAA,QAAA"}

package/build/tabs/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/tabs/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type * as Ariakit from '@ariakit/react';\n\nexport type TabsContextProps =\n\t| {\n\t\t\t/**\n\t\t\t * The tabStore object returned by Ariakit's `useTabStore` hook.\n\t\t\t */\n\t\t\tstore: Ariakit.TabStore;\n\t\t\t/**\n\t\t\t * The unique id string for this instance of the Tabs component.\n\t\t\t */\n\t\t\tinstanceId: string;\n\t  }\n\t| undefined;\n\nexport type TabsProps = {\n\t/**\n\t * The children elements, which should be at least a\n\t * `Tabs.Tablist` component and a series of `Tabs.TabPanel`\n\t * components.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * When `true`, the tab will be selected when receiving focus (automatic tab\n\t * activation). When `false`, the tab will be selected only when clicked\n\t * (manual tab activation). See the official W3C docs for more info.\n\t *\n\t * @default true\n\t *\n\t * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n\t */\n\tselectOnMove?: boolean;\n\t/**\n\t * The id of the tab to be selected upon mounting of component.\n\t * If this prop is not set, the first tab will be selected by default.\n\t * The id provided will be internally prefixed with the\n\t * `TabsContextProps.instanceId`.\n\t *\n\t * Note: this prop will be overridden by the `selectedTabId` prop if it is\n\t * provided. (Controlled Mode)\n\t */\n\tinitialTabId?: string;\n\t/**\n\t * The function called when a tab has been selected.\n\t * It is passed the id of the newly selected tab as an argument.\n\t */\n\tonSelect?: ( selectedId: string | null | undefined ) => void;\n\n\t/**\n\t * The orientation of the tablist.\n\t *\n\t * @default `horizontal`\n\t */\n\torientation?: 'horizontal' | 'vertical';\n\t/**\n\t * The Id of the tab to display. This id is prepended with the `Tabs`\n\t * instanceId internally.\n\t *\n\t * If left `undefined`, the component assumes it is being used in\n\t * uncontrolled mode. Consequently, any value different than `undefined`\n\t * will set the component in `controlled` mode.\n\t * When in controlled mode, the `null` value will result in no tab being selected.\n\t */\n\tselectedTabId?: string | null;\n};\n\nexport type TabListProps = {\n\t/**\n\t * The children elements, which should be a series of `Tabs.TabPanel` components.\n\t */\n\tchildren?: React.ReactNode;\n};\n\nexport type TabProps = {\n\t/**\n\t * The id of the tab, which is prepended with the `Tabs` instanceId.\n\t */\n\tid: string;\n\t/**\n\t * The children elements, generally the text to display on the tab.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Determines if the tab button should be disabled.\n\t *\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * The type of component to render the tab button as. If this prop is not\n\t * provided, the tab button will be rendered as a `button` element.\n\t */\n\trender?: React.ReactElement;\n};\n\nexport type TabPanelProps = {\n\t/**\n\t * The children elements, generally the content to display on the tabpanel.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * A unique identifier for the tabpanel, which is used to generate a unique `id` for the underlying element.\n\t */\n\tid: string;\n\t/**\n\t * Determines whether or not the tabpanel element should be focusable.\n\t * If `false`, pressing the tab key will skip over the tabpanel, and instead\n\t * focus on the first focusable element in the panel (if there is one).\n\t *\n\t * @default true\n\t */\n\tfocusable?: boolean;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/tabs/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type * as Ariakit from '@ariakit/react';\n\nexport type TabsContextProps =\n\t| {\n\t\t\t/**\n\t\t\t * The tabStore object returned by Ariakit's `useTabStore` hook.\n\t\t\t */\n\t\t\tstore: Ariakit.TabStore;\n\t\t\t/**\n\t\t\t * The unique id string for this instance of the Tabs component.\n\t\t\t */\n\t\t\tinstanceId: string;\n\t  }\n\t| undefined;\n\nexport type TabsProps = {\n\t/**\n\t * The children elements, which should be at least a\n\t * `Tabs.Tablist` component and a series of `Tabs.TabPanel`\n\t * components.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * When `true`, the tab will be selected when receiving focus (automatic tab\n\t * activation). When `false`, the tab will be selected only when clicked\n\t * (manual tab activation). See the official W3C docs for more info.\n\t *\n\t * @default true\n\t *\n\t * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n\t */\n\tselectOnMove?: boolean;\n\t/**\n\t * The id of the tab to be selected upon mounting of component.\n\t * If this prop is not set, the first tab will be selected by default.\n\t * The id provided will be internally prefixed with the\n\t * `TabsContextProps.instanceId`.\n\t *\n\t * Note: this prop will be overridden by the `selectedTabId` prop if it is\n\t * provided. (Controlled Mode)\n\t */\n\tinitialTabId?: string;\n\t/**\n\t * The function called when a tab has been selected.\n\t * It is passed the id of the newly selected tab as an argument.\n\t */\n\tonSelect?: ( selectedId: string | null | undefined ) => void;\n\n\t/**\n\t * The orientation of the tablist.\n\t *\n\t * @default `horizontal`\n\t */\n\torientation?: 'horizontal' | 'vertical';\n\t/**\n\t * The Id of the tab to display. This id is prepended with the `Tabs`\n\t * instanceId internally.\n\t *\n\t * If left `undefined`, the component assumes it is being used in\n\t * uncontrolled mode. Consequently, any value different than `undefined`\n\t * will set the component in `controlled` mode.\n\t * When in controlled mode, the `null` value will result in no tab being selected.\n\t */\n\tselectedTabId?: string | null;\n};\n\nexport type TabListProps = {\n\t/**\n\t * The children elements, which should be a series of `Tabs.TabPanel` components.\n\t */\n\tchildren?: React.ReactNode;\n};\n\nexport type TabProps = {\n\t/**\n\t * The id of the tab, which is prepended with the `Tabs` instanceId.\n\t * The value of this prop should match with the value of the `tabId` prop on\n\t * the corresponding `Tabs.TabPanel` component.\n\t */\n\ttabId: string;\n\t/**\n\t * The children elements, generally the text to display on the tab.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Determines if the tab button should be disabled.\n\t *\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * The type of component to render the tab button as. If this prop is not\n\t * provided, the tab button will be rendered as a `button` element.\n\t */\n\trender?: React.ReactElement;\n};\n\nexport type TabPanelProps = {\n\t/**\n\t * The children elements, generally the content to display on the tabpanel.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * A unique identifier for the tabpanel, which is used to generate an\n\t * instanced id for the underlying element.\n\t * The value of this prop should match with the value of the `tabId` prop on\n\t * the corresponding `Tabs.Tab` component.\n\t */\n\ttabId: string;\n\t/**\n\t * Determines whether or not the tabpanel element should be focusable.\n\t * If `false`, pressing the tab key will skip over the tabpanel, and instead\n\t * focus on the first focusable element in the panel (if there is one).\n\t *\n\t * @default true\n\t */\n\tfocusable?: boolean;\n};\n"],"mappings":""}

package/build/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/toggle-group-control/toggle-group-control/utils.js

@@ -18,27 +18,27 @@ var _element = require("@wordpress/element");
  * @param valueProp The received `value`
  */
 function useComputeControlledOrUncontrolledValue(valueProp) {
-  const hasEverBeenUsedInControlledMode = (0, _element.useRef)(false);
-  const previousValueProp = (0, _compose.usePrevious)(valueProp);
+  const prevValueProp = (0, _compose.usePrevious)(valueProp);
+  const prevIsControlled = (0, _element.useRef)(false);
+
+  // Assume the component is being used in controlled mode on the first re-render
+  // that has a different `valueProp` from the previous render.
+  const isControlled = prevIsControlled.current || prevValueProp !== undefined && valueProp !== undefined && prevValueProp !== valueProp;
   (0, _element.useEffect)(() => {
-    if (!hasEverBeenUsedInControlledMode.current) {
-      // Assume the component is being used in controlled mode if:
-      // - the `value` prop is not `undefined`
-      // - the `value` prop was not previously `undefined` and was given a new value
-      hasEverBeenUsedInControlledMode.current = valueProp !== undefined && previousValueProp !== undefined && valueProp !== previousValueProp;
-    }
-  }, [valueProp, previousValueProp]);
-  let value, defaultValue;
-  if (hasEverBeenUsedInControlledMode.current) {
+    prevIsControlled.current = isControlled;
+  }, [isControlled]);
+  if (isControlled) {
     // When in controlled mode, use `''` instead of `undefined`
-    value = valueProp !== null && valueProp !== void 0 ? valueProp : '';
-  } else {
-    // When in uncontrolled mode, the `value` should be intended as the initial value
-    defaultValue = valueProp;
+    return {
+      value: valueProp !== null && valueProp !== void 0 ? valueProp : '',
+      defaultValue: undefined
+    };
   }
+
+  // When in uncontrolled mode, the `value` should be intended as the initial value
   return {
-    value,
-    defaultValue
+    value: undefined,
+    defaultValue: valueProp
   };
 }
 //# sourceMappingURL=utils.js.map

package/build/toggle-group-control/toggle-group-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","useComputeControlledOrUncontrolledValue","valueProp","hasEverBeenUsedInControlledMode","useRef","previousValueProp","usePrevious","useEffect","current","undefined","value","defaultValue"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/utils.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlProps } from '../types';\n\ntype ValueProp = ToggleGroupControlProps[ 'value' ];\n\n/**\n * Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n *\n * @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(\n\tvalueProp: ValueProp\n): { value: ValueProp; defaultValue: ValueProp } {\n\tconst hasEverBeenUsedInControlledMode = useRef( false );\n\tconst previousValueProp = usePrevious( valueProp );\n\n\tuseEffect( () => {\n\t\tif ( ! hasEverBeenUsedInControlledMode.current ) {\n\t\t\t// Assume the component is being used in controlled mode if:\n\t\t\t// - the `value` prop is not `undefined`\n\t\t\t// - the `value` prop was not previously `undefined` and was given a new value\n\t\t\thasEverBeenUsedInControlledMode.current =\n\t\t\t\tvalueProp !== undefined &&\n\t\t\t\tpreviousValueProp !== undefined &&\n\t\t\t\tvalueProp !== previousValueProp;\n\t\t}\n\t}, [ valueProp, previousValueProp ] );\n\n\tlet value, defaultValue;\n\n\tif ( hasEverBeenUsedInControlledMode.current ) {\n\t\t// When in controlled mode, use `''` instead of `undefined`\n\t\tvalue = valueProp ?? '';\n\t} else {\n\t\t// When in uncontrolled mode, the `value` should be intended as the initial value\n\t\tdefaultValue = valueProp;\n\t}\n\n\treturn { value, defaultValue };\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,uCAAuCA,CACtDC,SAAoB,EAC4B;EAChD,MAAMC,+BAA+B,GAAG,IAAAC,eAAM,EAAE,KAAM,CAAC;EACvD,MAAMC,iBAAiB,GAAG,IAAAC,oBAAW,EAAEJ,SAAU,CAAC;EAElD,IAAAK,kBAAS,EAAE,MAAM;IAChB,IAAK,CAAEJ,+BAA+B,CAACK,OAAO,EAAG;MAChD;MACA;MACA;MACAL,+BAA+B,CAACK,OAAO,GACtCN,SAAS,KAAKO,SAAS,IACvBJ,iBAAiB,KAAKI,SAAS,IAC/BP,SAAS,KAAKG,iBAAiB;IACjC;EACD,CAAC,EAAE,CAAEH,SAAS,EAAEG,iBAAiB,CAAG,CAAC;EAErC,IAAIK,KAAK,EAAEC,YAAY;EAEvB,IAAKR,+BAA+B,CAACK,OAAO,EAAG;IAC9C;IACAE,KAAK,GAAGR,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE;EACxB,CAAC,MAAM;IACN;IACAS,YAAY,GAAGT,SAAS;EACzB;EAEA,OAAO;IAAEQ,KAAK;IAAEC;EAAa,CAAC;AAC/B"}
+{"version":3,"names":["_compose","require","_element","useComputeControlledOrUncontrolledValue","valueProp","prevValueProp","usePrevious","prevIsControlled","useRef","isControlled","current","undefined","useEffect","value","defaultValue"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/utils.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlProps } from '../types';\n\ntype ValueProp = ToggleGroupControlProps[ 'value' ];\n\n/**\n * Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n *\n * @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(\n\tvalueProp: ValueProp\n): { value: ValueProp; defaultValue: ValueProp } {\n\tconst prevValueProp = usePrevious( valueProp );\n\tconst prevIsControlled = useRef( false );\n\n\t// Assume the component is being used in controlled mode on the first re-render\n\t// that has a different `valueProp` from the previous render.\n\tconst isControlled =\n\t\tprevIsControlled.current ||\n\t\t( prevValueProp !== undefined &&\n\t\t\tvalueProp !== undefined &&\n\t\t\tprevValueProp !== valueProp );\n\tuseEffect( () => {\n\t\tprevIsControlled.current = isControlled;\n\t}, [ isControlled ] );\n\n\tif ( isControlled ) {\n\t\t// When in controlled mode, use `''` instead of `undefined`\n\t\treturn { value: valueProp ?? '', defaultValue: undefined };\n\t}\n\n\t// When in uncontrolled mode, the `value` should be intended as the initial value\n\treturn { value: undefined, defaultValue: valueProp };\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,uCAAuCA,CACtDC,SAAoB,EAC4B;EAChD,MAAMC,aAAa,GAAG,IAAAC,oBAAW,EAAEF,SAAU,CAAC;EAC9C,MAAMG,gBAAgB,GAAG,IAAAC,eAAM,EAAE,KAAM,CAAC;;EAExC;EACA;EACA,MAAMC,YAAY,GACjBF,gBAAgB,CAACG,OAAO,IACtBL,aAAa,KAAKM,SAAS,IAC5BP,SAAS,KAAKO,SAAS,IACvBN,aAAa,KAAKD,SAAW;EAC/B,IAAAQ,kBAAS,EAAE,MAAM;IAChBL,gBAAgB,CAACG,OAAO,GAAGD,YAAY;EACxC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,IAAKA,YAAY,EAAG;IACnB;IACA,OAAO;MAAEI,KAAK,EAAET,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE;MAAEU,YAAY,EAAEH;IAAU,CAAC;EAC3D;;EAEA;EACA,OAAO;IAAEE,KAAK,EAAEF,SAAS;IAAEG,YAAY,EAAEV;EAAU,CAAC;AACrD"}

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

@@ -48,14 +48,25 @@ function useToolsPanelItem(props) {
     __experimentalFirstVisibleItemClass,
     __experimentalLastVisibleItemClass
   } = (0, _context.useToolsPanelContext)();
-  const hasValueCallback = (0, _element.useCallback)(hasValue, [panelId, hasValue]);
-  const resetAllFilterCallback = (0, _element.useCallback)(resetAllFilter, [panelId, resetAllFilter]);
+
+  // hasValue is a new function on every render, so do not add it as a
+  // dependency to the useCallback hook! If needed, we should use a ref.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const hasValueCallback = (0, _element.useCallback)(hasValue, [panelId]);
+  // resetAllFilter is a new function on every render, so do not add it as a
+  // dependency to the useCallback hook! If needed, we should use a ref.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const resetAllFilterCallback = (0, _element.useCallback)(resetAllFilter, [panelId]);
   const previousPanelId = (0, _compose.usePrevious)(currentPanelId);
   const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;
 
   // Registering the panel item allows the panel to include it in its
   // automatically generated menu and determine its initial checked status.
-  (0, _element.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
+  (0, _element.useLayoutEffect)(() => {
     if (hasMatchingPanel && previousPanelId !== null) {
       registerPanelItem({
         hasValue: hasValueCallback,
@@ -92,19 +103,12 @@ function useToolsPanelItem(props) {
   const newValueSet = isValueSet && !wasValueSet;
 
   // Notify the panel when an item's value has been set.
-  //
-  // 1. For default controls, this is so "reset" appears beside its menu item.
-  // 2. For optional controls, when the panel ID is `null`, it allows the
-  // panel to ensure the item is toggled on for display in the menu, given the
-  // value has been set external to the control.
   (0, _element.useEffect)(() => {
     if (!newValueSet) {
       return;
     }
-    if (isShownByDefault || currentPanelId === null) {
-      flagItemCustomization(label, menuGroup);
-    }
-  }, [currentPanelId, newValueSet, isShownByDefault, menuGroup, label, flagItemCustomization]);
+    flagItemCustomization(label, menuGroup);
+  }, [newValueSet, menuGroup, label, flagItemCustomization]);
 
   // Determine if the panel item's corresponding menu is being toggled and
   // trigger appropriate callback if it is.

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","styles","_interopRequireWildcard","_context","_context2","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","noop","useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","useContextSystem","currentPanelId","menuItems","registerResetAllFilter","deregisterResetAllFilter","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","firstDisplayedItem","lastDisplayedItem","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","useToolsPanelContext","hasValueCallback","useCallback","resetAllFilterCallback","previousPanelId","usePrevious","hasMatchingPanel","useEffect","menuGroup","isMenuItemChecked","wasMenuItemChecked","isRegistered","undefined","isValueSet","wasValueSet","newValueSet","isShown","cx","useCx","classes","useMemo","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":["_compose","require","_element","styles","_interopRequireWildcard","_context","_context2","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","noop","useToolsPanelItem","props","className","hasValue","isShownByDefault","label","panelId","resetAllFilter","onDeselect","onSelect","otherProps","useContextSystem","currentPanelId","menuItems","registerResetAllFilter","deregisterResetAllFilter","registerPanelItem","deregisterPanelItem","flagItemCustomization","isResetting","shouldRenderPlaceholderItems","shouldRenderPlaceholder","firstDisplayedItem","lastDisplayedItem","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","useToolsPanelContext","hasValueCallback","useCallback","resetAllFilterCallback","previousPanelId","usePrevious","hasMatchingPanel","useLayoutEffect","useEffect","menuGroup","isMenuItemChecked","wasMenuItemChecked","isRegistered","undefined","isValueSet","wasValueSet","newValueSet","isShown","cx","useCx","classes","useMemo","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\t// hasValue is a new function on every render, so do not add it as a\n\t// dependency to the useCallback hook! If needed, we should use a ref.\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\tconst hasValueCallback = useCallback( hasValue, [ panelId ] );\n\t// resetAllFilter is a new function on every render, so do not add it as a\n\t// dependency to the useCallback hook! If needed, we should use a ref.\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\tconst resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );\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\tuseEffect( () => {\n\t\tif ( ! newValueSet ) {\n\t\t\treturn;\n\t\t}\n\n\t\tflagItemCustomization( label, menuGroup );\n\t}, [ newValueSet, menuGroup, label, flagItemCustomization ] );\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-module/angle-picker-control/index.js

@@ -32,7 +32,6 @@ function UnforwardedAnglePickerControl(props, ref) {
   if (!__nextHasNoMarginBottom) {
     deprecated('Bottom margin styles for wp.components.AnglePickerControl', {
       since: '6.1',
-      version: '6.4',
       hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
     });
   }

package/build-module/angle-picker-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","deprecated","forwardRef","isRTL","__","FlexBlock","Spacer","NumberControl","AngleCircle","Root","UnitText","UnforwardedAnglePickerControl","props","ref","__nextHasNoMarginBottom","className","label","onChange","value","restProps","since","version","hint","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","unitText","createElement","prefixedUnitText","suffixedUnitText","gap","max","min","size","step","spinControls","prefix","suffix","marginBottom","marginTop","AnglePickerControl"],"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root, UnitText } from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\tconst unitText = <UnitText>°</UnitText>;\n\tconst [ prefixedUnitText, suffixedUnitText ] = isRTL()\n\t\t? [ unitText, null ]\n\t\t: [ null, unitText ];\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...restProps }\n\t\t\tref={ ref }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 2 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tprefix={ prefixedUnitText }\n\t\t\t\t\tsuffix={ suffixedUnitText }\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<Spacer marginBottom=\"1\" marginTop=\"auto\">\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t</Root>\n\t);\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *       __nextHasNoMarginBottom\n *     </>\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );\n\nexport default AnglePickerControl;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,OAAOC,UAAU,MAAM,uBAAuB;AAC9C,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASC,SAAS,QAAQ,SAAS;AACnC,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,SAASC,IAAI,EAAEC,QAAQ,QAAQ,sCAAsC;AAKrE,SAASC,6BAA6BA,CACrCC,KAAgE,EAChEC,GAAwB,EACvB;EACD,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,SAAS;IACTC,KAAK,GAAGZ,EAAE,CAAE,OAAQ,CAAC;IACrBa,QAAQ;IACRC,KAAK;IACL,GAAGC;EACJ,CAAC,GAAGP,KAAK;EAET,IAAK,CAAEE,uBAAuB,EAAG;IAChCb,UAAU,CACT,2DAA2D,EAC3D;MACCmB,KAAK,EAAE,KAAK;MACZC,OAAO,EAAE,KAAK;MACdC,IAAI,EAAE;IACP,CACD,CAAC;EACF;EAEA,MAAMC,oBAAoB,GAAKC,gBAAoC,IAAM;IACxE,IAAKP,QAAQ,KAAKQ,SAAS,EAAG;MAC7B;IACD;IAEA,MAAMC,UAAU,GACfF,gBAAgB,KAAKC,SAAS,IAAID,gBAAgB,KAAK,EAAE,GACtDG,QAAQ,CAAEH,gBAAgB,EAAE,EAAG,CAAC,GAChC,CAAC;IACLP,QAAQ,CAAES,UAAW,CAAC;EACvB,CAAC;EAED,MAAME,OAAO,GAAG5B,UAAU,CAAE,iCAAiC,EAAEe,SAAU,CAAC;EAE1E,MAAMc,QAAQ,GAAGC,aAAA,CAACpB,QAAQ,QAAC,MAAW,CAAC;EACvC,MAAM,CAAEqB,gBAAgB,EAAEC,gBAAgB,CAAE,GAAG7B,KAAK,CAAC,CAAC,GACnD,CAAE0B,QAAQ,EAAE,IAAI,CAAE,GAClB,CAAE,IAAI,EAAEA,QAAQ,CAAE;EAErB,OACCC,aAAA,CAACrB,IAAI;IAAA,GACCU,SAAS;IACdN,GAAG,EAAGA,GAAK;IACXC,uBAAuB,EAAGA,uBAAyB;IACnDC,SAAS,EAAGa,OAAS;IACrBK,GAAG,EAAG;EAAG,GAETH,aAAA,CAACzB,SAAS,QACTyB,aAAA,CAACvB,aAAa;IACbS,KAAK,EAAGA,KAAO;IACfD,SAAS,EAAC,8CAA8C;IACxDmB,GAAG,EAAG,GAAK;IACXC,GAAG,EAAG,CAAG;IACTlB,QAAQ,EAAGM,oBAAsB;IACjCa,IAAI,EAAC,kBAAkB;IACvBC,IAAI,EAAC,GAAG;IACRnB,KAAK,EAAGA,KAAO;IACfoB,YAAY,EAAC,MAAM;IACnBC,MAAM,EAAGR,gBAAkB;IAC3BS,MAAM,EAAGR;EAAkB,CAC3B,CACS,CAAC,EACZF,aAAA,CAACxB,MAAM;IAACmC,YAAY,EAAC,GAAG;IAACC,SAAS,EAAC;EAAM,GACxCZ,aAAA,CAACtB,WAAW;IACX,eAAY,MAAM;IAClBU,KAAK,EAAGA,KAAO;IACfD,QAAQ,EAAGA;EAAU,CACrB,CACM,CACH,CAAC;AAET;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM0B,kBAAkB,GAAGzC,UAAU,CAAES,6BAA8B,CAAC;AAE7E,eAAegC,kBAAkB"}
+{"version":3,"names":["classnames","deprecated","forwardRef","isRTL","__","FlexBlock","Spacer","NumberControl","AngleCircle","Root","UnitText","UnforwardedAnglePickerControl","props","ref","__nextHasNoMarginBottom","className","label","onChange","value","restProps","since","hint","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","unitText","createElement","prefixedUnitText","suffixedUnitText","gap","max","min","size","step","spinControls","prefix","suffix","marginBottom","marginTop","AnglePickerControl"],"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root, UnitText } from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\tconst unitText = <UnitText>°</UnitText>;\n\tconst [ prefixedUnitText, suffixedUnitText ] = isRTL()\n\t\t? [ unitText, null ]\n\t\t: [ null, unitText ];\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...restProps }\n\t\t\tref={ ref }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 2 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tprefix={ prefixedUnitText }\n\t\t\t\t\tsuffix={ suffixedUnitText }\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<Spacer marginBottom=\"1\" marginTop=\"auto\">\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t</Root>\n\t);\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *       __nextHasNoMarginBottom\n *     </>\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );\n\nexport default AnglePickerControl;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,OAAOC,UAAU,MAAM,uBAAuB;AAC9C,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASC,SAAS,QAAQ,SAAS;AACnC,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,SAASC,IAAI,EAAEC,QAAQ,QAAQ,sCAAsC;AAKrE,SAASC,6BAA6BA,CACrCC,KAAgE,EAChEC,GAAwB,EACvB;EACD,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,SAAS;IACTC,KAAK,GAAGZ,EAAE,CAAE,OAAQ,CAAC;IACrBa,QAAQ;IACRC,KAAK;IACL,GAAGC;EACJ,CAAC,GAAGP,KAAK;EAET,IAAK,CAAEE,uBAAuB,EAAG;IAChCb,UAAU,CACT,2DAA2D,EAC3D;MACCmB,KAAK,EAAE,KAAK;MACZC,IAAI,EAAE;IACP,CACD,CAAC;EACF;EAEA,MAAMC,oBAAoB,GAAKC,gBAAoC,IAAM;IACxE,IAAKN,QAAQ,KAAKO,SAAS,EAAG;MAC7B;IACD;IAEA,MAAMC,UAAU,GACfF,gBAAgB,KAAKC,SAAS,IAAID,gBAAgB,KAAK,EAAE,GACtDG,QAAQ,CAAEH,gBAAgB,EAAE,EAAG,CAAC,GAChC,CAAC;IACLN,QAAQ,CAAEQ,UAAW,CAAC;EACvB,CAAC;EAED,MAAME,OAAO,GAAG3B,UAAU,CAAE,iCAAiC,EAAEe,SAAU,CAAC;EAE1E,MAAMa,QAAQ,GAAGC,aAAA,CAACnB,QAAQ,QAAC,MAAW,CAAC;EACvC,MAAM,CAAEoB,gBAAgB,EAAEC,gBAAgB,CAAE,GAAG5B,KAAK,CAAC,CAAC,GACnD,CAAEyB,QAAQ,EAAE,IAAI,CAAE,GAClB,CAAE,IAAI,EAAEA,QAAQ,CAAE;EAErB,OACCC,aAAA,CAACpB,IAAI;IAAA,GACCU,SAAS;IACdN,GAAG,EAAGA,GAAK;IACXC,uBAAuB,EAAGA,uBAAyB;IACnDC,SAAS,EAAGY,OAAS;IACrBK,GAAG,EAAG;EAAG,GAETH,aAAA,CAACxB,SAAS,QACTwB,aAAA,CAACtB,aAAa;IACbS,KAAK,EAAGA,KAAO;IACfD,SAAS,EAAC,8CAA8C;IACxDkB,GAAG,EAAG,GAAK;IACXC,GAAG,EAAG,CAAG;IACTjB,QAAQ,EAAGK,oBAAsB;IACjCa,IAAI,EAAC,kBAAkB;IACvBC,IAAI,EAAC,GAAG;IACRlB,KAAK,EAAGA,KAAO;IACfmB,YAAY,EAAC,MAAM;IACnBC,MAAM,EAAGR,gBAAkB;IAC3BS,MAAM,EAAGR;EAAkB,CAC3B,CACS,CAAC,EACZF,aAAA,CAACvB,MAAM;IAACkC,YAAY,EAAC,GAAG;IAACC,SAAS,EAAC;EAAM,GACxCZ,aAAA,CAACrB,WAAW;IACX,eAAY,MAAM;IAClBU,KAAK,EAAGA,KAAO;IACfD,QAAQ,EAAGA;EAAU,CACrB,CACM,CACH,CAAC;AAET;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMyB,kBAAkB,GAAGxC,UAAU,CAAES,6BAA8B,CAAC;AAE7E,eAAe+B,kBAAkB"}

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

@@ -97,6 +97,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     popoverControlsClassName,
     resetButtonClassName,
     showDropdownHeader,
+    size,
     __unstablePopoverProps,
     ...otherProps
   } = useBorderControlDropdown(props);
@@ -116,7 +117,8 @@ const BorderControlDropdown = (props, forwardedRef) => {
     "aria-label": toggleAriaLabel,
     tooltipPosition: dropdownPosition,
     label: __('Border color and style picker'),
-    showTooltip: true
+    showTooltip: true,
+    __next40pxDefaultSize: size === '__unstable-large' ? true : false
   }, createElement("span", {
     className: indicatorWrapperClassName
   }, createElement(ColorIndicator, {
@@ -131,7 +133,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     className: popoverControlsClassName,
     spacing: 6
   }, showDropdownHeader ? createElement(HStack, null, createElement(StyledLabel, null, __('Border color')), createElement(Button, {
-    isSmall: true,
+    size: "small",
     label: __('Close border color'),
     icon: closeSmall,
     onClick: onClose

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

@@ -1 +1 @@
-{"version":3,"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","createElement","onClick","variant","tooltipPosition","label","showTooltip","className","renderContent","onClose","Fragment","paddingSize","spacing","isSmall","icon","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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' ) }\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"],"mappings":"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"}
+{"version":3,"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","size","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","createElement","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","className","renderContent","onClose","Fragment","paddingSize","spacing","icon","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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\tsize,\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\t__next40pxDefaultSize={ size === '__unstable-large' ? true : false }\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\tsize=\"small\"\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' ) }\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"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,wBAAwB,MAAM,gCAAgC;AACrE,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,cAAc,MAAM,uBAAuB;AAClD,OAAOC,YAAY,MAAM,qBAAqB;AAC9C,OAAOC,QAAQ,MAAM,gBAAgB;AACrC,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,MAAM,QAAQ,eAAe;AAEtC,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,wBAAwB,QAAQ,QAAQ;AACjD,SAASC,WAAW,QAAQ,+CAA+C;AAC3E,OAAOC,sBAAsB,MAAM,yCAAyC;AAG5E,SAASC,sBAAsB,QAAQ,2BAA2B;AAIlE,MAAMC,sBAAsB,GAAKC,UAAkB,IAAM;EACxD;EACA,OAAOA,UAAU,CAACC,OAAO,CAAE,eAAe,EAAE,IAAK,CAAC;AACnD,CAAC;AAED,MAAMC,cAAc,GAAGA,CACtBF,UAA0C,EAC1CG,MAA0C,KACtC;EACJ,IAAK,CAAEH,UAAU,IAAI,CAAEG,MAAM,EAAG;IAC/B;EACD;EAEA,IAAKL,sBAAsB,CAAEK,MAAO,CAAC,EAAG;IACvC;IACA,IAAIC,YAAY;IAEhBD,MAAM,CAACE,IAAI,CAAIC,MAAM,IACpBA,MAAM,CAACH,MAAM,CAACE,IAAI,CAAIE,KAAK,IAAM;MAChC,IAAKA,KAAK,CAACA,KAAK,KAAKP,UAAU,EAAG;QACjCI,YAAY,GAAGG,KAAK;QACpB,OAAO,IAAI;MACZ;MAEA,OAAO,KAAK;IACb,CAAE,CACH,CAAC;IAED,OAAOH,YAAY;EACpB;;EAEA;EACA,OAAOD,MAAM,CAACK,IAAI,CAAID,KAAK,IAAMA,KAAK,CAACA,KAAK,KAAKP,UAAW,CAAC;AAC9D,CAAC;AAED,MAAMS,kBAAkB,GAAGA,CAC1BT,UAA0C,EAC1CU,WAAoC,EACpCC,KAAqC,EACrCC,cAAuB,KACnB;EACJ,IAAKA,cAAc,EAAG;IACrB,IAAKF,WAAW,EAAG;MAClB,MAAMG,cAAc,GAAGd,sBAAsB,CAAEW,WAAW,CAACH,KAAM,CAAC;MAClE,OAAOI,KAAK,GACT1B,OAAO;MACP;MACA,iJAAiJ,EACjJyB,WAAW,CAACI,IAAI,EAChBD,cAAc,EACdF,KACA,CAAC,GACD1B,OAAO;MACP;MACA,yGAAyG,EACzGyB,WAAW,CAACI,IAAI,EAChBD,cACA,CAAC;IACL;IAEA,IAAKb,UAAU,EAAG;MACjB,MAAMa,cAAc,GAAGd,sBAAsB,CAAEC,UAAW,CAAC;MAC3D,OAAOW,KAAK,GACT1B,OAAO;MACP;MACA,4HAA4H,EAC5H4B,cAAc,EACdF,KACA,CAAC,GACD1B,OAAO;MACP;MACA,oFAAoF,EACpF4B,cACA,CAAC;IACL;IAEA,OAAO7B,EAAE,CAAE,gCAAiC,CAAC;EAC9C;EAEA,IAAK0B,WAAW,EAAG;IAClB,OAAOzB,OAAO;IACb;IACA,+FAA+F,EAC/FyB,WAAW,CAACI,IAAI,EAChBf,sBAAsB,CAAEW,WAAW,CAACH,KAAM,CAC3C,CAAC;EACF;EAEA,IAAKP,UAAU,EAAG;IACjB,OAAOf,OAAO;IACb;IACA,0EAA0E,EAC1Ec,sBAAsB,CAAEC,UAAW,CACpC,CAAC;EACF;EAEA,OAAOhB,EAAE,CAAE,sBAAuB,CAAC;AACpC,CAAC;AAED,MAAM+B,qBAAqB,GAAGA,CAC7BC,KAAsD,EACtDC,YAAuC,KACnC;EACJ,MAAM;IACLC,iCAAiC;IACjCC,MAAM;IACNhB,MAAM;IACNiB,mBAAmB;IACnBC,WAAW;IACXC,WAAW;IACXC,kBAAkB;IAClBC,yBAAyB;IACzBC,OAAO;IACPC,aAAa;IACbC,aAAa;IACbC,uBAAuB;IACvBC,wBAAwB;IACxBC,oBAAoB;IACpBC,kBAAkB;IAClBC,IAAI;IACJC,sBAAsB;IACtB,GAAGC;EACJ,CAAC,GAAGvC,wBAAwB,CAAEqB,KAAM,CAAC;EAErC,MAAM;IAAET,KAAK;IAAEI;EAAM,CAAC,GAAGQ,MAAM,IAAI,CAAC,CAAC;EACrC,MAAMT,WAAW,GAAGR,cAAc,CAAEK,KAAK,EAAEJ,MAAO,CAAC;EAEnD,MAAMgC,eAAe,GAAG1B,kBAAkB,CACzCF,KAAK,EACLG,WAAW,EACXC,KAAK,EACLW,WACD,CAAC;EAED,MAAMc,eAAe,GAAG7B,KAAK,IAAMI,KAAK,IAAIA,KAAK,KAAK,MAAQ;EAC9D,MAAM0B,gBAAgB,GAAGnB,iCAAiC,GACvD,aAAa,GACboB,SAAS;EAEZ,MAAMC,YAAsD,GAAGA,CAAE;IAChEC;EACD,CAAC,KACAC,aAAA,CAACrD,MAAM;IACNsD,OAAO,EAAGF,QAAU;IACpBG,OAAO,EAAC,UAAU;IAClB,cAAaR,eAAiB;IAC9BS,eAAe,EAAGP,gBAAkB;IACpCQ,KAAK,EAAG7D,EAAE,CAAE,+BAAgC,CAAG;IAC/C8D,WAAW,EAAG,IAAM;IACpBC,qBAAqB,EAAGf,IAAI,KAAK,kBAAkB,GAAG,IAAI,GAAG;EAAO,GAEpES,aAAA;IAAMO,SAAS,EAAGxB;EAA2B,GAC5CiB,aAAA,CAACpD,cAAc;IACd2D,SAAS,EAAGzB,kBAAoB;IAChCvB,UAAU,EAAGO;EAAO,CACpB,CACI,CACC,CACR;EAED,MAAM0C,aAAwD,GAAGA,CAAE;IAClEC;EACD,CAAC,KACAT,aAAA,CAAAU,QAAA,QACCV,aAAA,CAAC5C,sBAAsB;IAACuD,WAAW,EAAC;EAAQ,GAC3CX,aAAA,CAAChD,MAAM;IAACuD,SAAS,EAAGnB,wBAA0B;IAACwB,OAAO,EAAG;EAAG,GACzDtB,kBAAkB,GACnBU,aAAA,CAACjD,MAAM,QACNiD,aAAA,CAAC7C,WAAW,QAAGZ,EAAE,CAAE,cAAe,CAAgB,CAAC,EACnDyD,aAAA,CAACrD,MAAM;IACN4C,IAAI,EAAC,OAAO;IACZa,KAAK,EAAG7D,EAAE,CAAE,oBAAqB,CAAG;IACpCsE,IAAI,EAAGpE,UAAY;IACnBwD,OAAO,EAAGQ;EAAS,CACnB,CACM,CAAC,GACNZ,SAAS,EACbG,aAAA,CAACnD,YAAY;IACZ0D,SAAS,EAAGpB,uBAAyB;IACrC2B,KAAK,EAAGhD,KAAO;IACfiD,QAAQ,EAAG9B,aAAe;IACnBvB,MAAM;IAAEiB,mBAAmB;IAClCF,iCAAiC,EAChCA,iCACA;IACDuC,SAAS,EAAG,KAAO;IACnBpC,WAAW,EAAGA;EAAa,CAC3B,CAAC,EACAC,WAAW,IACZmB,aAAA,CAACtD,wBAAwB;IACxB0D,KAAK,EAAG7D,EAAE,CAAE,OAAQ,CAAG;IACvBuE,KAAK,EAAG5C,KAAO;IACf6C,QAAQ,EAAG7B;EAAe,CAC1B,CAEK,CACe,CAAC,EACvBS,eAAe,IAChBK,aAAA,CAAC5C,sBAAsB;IAACuD,WAAW,EAAC;EAAM,GACzCX,aAAA,CAACrD,MAAM;IACN4D,SAAS,EAAGlB,oBAAsB;IAClCa,OAAO,EAAC,UAAU;IAClBD,OAAO,EAAGA,CAAA,KAAM;MACfjB,OAAO,CAAC,CAAC;MACTyB,OAAO,CAAC,CAAC;IACV;EAAG,GAEDlE,EAAE,CAAE,OAAQ,CACP,CACe,CAExB,CACF;EAED,OACCyD,aAAA,CAAClD,QAAQ;IACRgD,YAAY,EAAGA,YAAc;IAC7BU,aAAa,EAAGA,aAAe;IAC/BS,YAAY,EAAG;MACd,GAAGzB;IACJ,CAAG;IAAA,GACEC,UAAU;IACfyB,GAAG,EAAG1C;EAAc,CACpB,CAAC;AAEJ,CAAC;AAED,MAAM2C,8BAA8B,GAAGlE,cAAc,CACpDqB,qBAAqB,EACrB,uBACD,CAAC;AAED,eAAe6C,8BAA8B"}

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

@@ -53,8 +53,8 @@ export function useBorderControlDropdown(props) {
   // Generate class names.
   const cx = useCx();
   const classes = useMemo(() => {
-    return cx(styles.borderControlDropdown(size), className);
-  }, [className, cx, size]);
+    return cx(styles.borderControlDropdown, className);
+  }, [className, cx]);
   const indicatorClassName = useMemo(() => {
     return cx(styles.borderColorIndicator);
   }, [cx]);
@@ -85,6 +85,7 @@ export function useBorderControlDropdown(props) {
     popoverContentClassName,
     popoverControlsClassName,
     resetButtonClassName,
+    size,
     __experimentalIsRenderedInSidebar
   };
 }

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","enableAlpha","enableStyle","onChange","previousStyleSelection","size","__experimentalIsRenderedInSidebar","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors = [],\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown( size ), className );\n\t}, [ className, cx, size ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx( styles.colorIndicatorWrapper( border, size ) );\n\t}, [ border, cx, size ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","enableAlpha","enableStyle","onChange","previousStyleSelection","size","__experimentalIsRenderedInSidebar","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors = [],\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown, className );\n\t}, [ className, cx ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx( styles.colorIndicatorWrapper( border, size ) );\n\t}, [ border, cx, size ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tsize,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":"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"}