@wordpress/components 25.9.0 → 25.10.0

package/build-types/text/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/text/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,MAAM,QAAQ,GACjB,MAAM,GACN,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,GACb,OAAO,CAAC;AAEX,KAAK,WAAW,GAAG,OAAO,CAAC;AAE3B,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtE,MAAM,WAAW,KAAM,SAAQ,aAAa;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;IACrC;;OAEG;IACH,gCAAgC,CAAC,EAC9B,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAE,SAAS,CAAE,CAAC;IACrC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAE,UAAU,CAAE,CAAC;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IAC3C;;OAEG;IACH,sBAAsB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAClD;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,GAAG,QAAQ,CAAC;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,GAAG,UAAU,CAAC;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/text/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,MAAM,QAAQ,GACjB,MAAM,GACN,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,GACb,OAAO,CAAC;AAEX,KAAK,WAAW,GAAG,OAAO,CAAC;AAE3B,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtE,MAAM,WAAW,KAAM,SAAQ,aAAa;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;IACrC;;OAEG;IACH,gCAAgC,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAE,SAAS,CAAE,CAAC;IACrC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAE,UAAU,CAAE,CAAC;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IAC3C;;OAEG;IACH,sBAAsB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAClD;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,GAAG,QAAQ,CAAC;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,GAAG,UAAU,CAAC;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B"}

package/build-types/text/utils.d.ts

@@ -1,69 +1,64 @@
+/// <reference types="react" />
+import type { FindAllArgs } from 'highlight-words-core';
 /**
- *
- * @param {Options} options
+ * Source:
+ * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js
  */
-export function createHighlighterText({ activeClassName, activeIndex, activeStyle, autoEscape, caseSensitive, children, findChunks, highlightClassName, highlightStyle, highlightTag, sanitize, searchWords, unhighlightClassName, unhighlightStyle, }: Options): (import("react").DOMElement<Record<string, any>, Element> | import("react").DetailedReactHTMLElement<{
+/**
+ * @typedef Options
+ * @property {string}                                                     [activeClassName='']      Classname for active highlighted areas.
+ * @property {number}                                                     [activeIndex=-1]          The index of the active highlighted area.
+ * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle]             Styles to apply to the active highlighted area.
+ * @property {boolean}                                                    [autoEscape]              Whether to automatically escape text.
+ * @property {boolean}                                                    [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
+ * @property {string}                                                     children                  Children to highlight.
+ * @property {import('highlight-words-core').FindAllArgs['findChunks']}   [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
+ * @property {string | Record<string, unknown>}                           [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
+ * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
+ * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
+ * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `santize` function to pass to `highlight-words-core`.
+ * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
+ * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
+ * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.
+ */
+interface Options {
+    activeClassName?: string;
+    activeIndex?: number;
+    activeStyle?: React.AllHTMLAttributes<HTMLDivElement>['style'];
+    autoEscape?: boolean;
+    caseSensitive?: boolean;
+    children: string;
+    findChunks?: FindAllArgs['findChunks'];
+    highlightClassName?: string | Record<string, unknown>;
+    highlightStyle?: React.AllHTMLAttributes<HTMLDivElement>['style'];
+    highlightTag?: keyof JSX.IntrinsicElements;
+    sanitize?: FindAllArgs['sanitize'];
+    searchWords?: string[];
+    unhighlightClassName?: string;
+    unhighlightStyle?: React.AllHTMLAttributes<HTMLDivElement>['style'];
+}
+/**
+ * @param options
+ * @param options.activeClassName
+ * @param options.activeIndex
+ * @param options.activeStyle
+ * @param options.autoEscape
+ * @param options.caseSensitive
+ * @param options.children
+ * @param options.findChunks
+ * @param options.highlightClassName
+ * @param options.highlightStyle
+ * @param options.highlightTag
+ * @param options.sanitize
+ * @param options.searchWords
+ * @param options.unhighlightClassName
+ * @param options.unhighlightStyle
+ */
+export declare function createHighlighterText({ activeClassName, activeIndex, activeStyle, autoEscape, caseSensitive, children, findChunks, highlightClassName, highlightStyle, highlightTag, sanitize, searchWords, unhighlightClassName, unhighlightStyle, }: Options): (import("react").DOMElement<Record<string, unknown>, Element> | import("react").DetailedReactHTMLElement<{
     children: string;
     className: string;
     key: number;
     style: import("react").CSSProperties | undefined;
 }, HTMLElement>)[] | null;
-export type Options = {
-    /**
-     * Classname for active highlighted areas.
-     */
-    activeClassName?: string | undefined;
-    /**
-     * The index of the active highlighted area.
-     */
-    activeIndex?: number | undefined;
-    /**
-     * Styles to apply to the active highlighted area.
-     */
-    activeStyle?: import('react').AllHTMLAttributes<HTMLDivElement>['style'];
-    /**
-     * Whether to automatically escape text.
-     */
-    autoEscape?: boolean | undefined;
-    /**
-     * Whether to highlight in a case-sensitive manner.
-     */
-    caseSensitive?: boolean | undefined;
-    /**
-     * Children to highlight.
-     */
-    children: string;
-    /**
-     * Custom `findChunks` function to pass to `highlight-words-core`.
-     */
-    findChunks?: import('highlight-words-core').FindAllArgs['findChunks'];
-    /**
-     * Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
-     */
-    highlightClassName?: string | Record<string, unknown> | undefined;
-    /**
-     * Styles to apply to highlighted text.
-     */
-    highlightStyle?: import('react').AllHTMLAttributes<HTMLDivElement>['style'];
-    /**
-     * Tag to use for the highlighted text.
-     */
-    highlightTag?: keyof JSX.IntrinsicElements | undefined;
-    /**
-     * Custom `santize` function to pass to `highlight-words-core`.
-     */
-    sanitize?: import('highlight-words-core').FindAllArgs['sanitize'];
-    /**
-     * Words to search for and highlight.
-     */
-    searchWords?: string[] | undefined;
-    /**
-     * Classname to apply to unhighlighted text.
-     */
-    unhighlightClassName?: string | undefined;
-    /**
-     * Style to apply to unhighlighted text.
-     */
-    unhighlightStyle?: import('react').AllHTMLAttributes<HTMLDivElement>['style'];
-};
+export {};
 //# sourceMappingURL=utils.d.ts.map

package/build-types/text/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/text/utils.js"],"names":[],"mappings":"AAsDA;;;GAGG;AACH,wPAFW,OAAO;;;;;0BA6FjB;;;;;;;;;;;;;kBAhIa,OAAO,OAAO,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC;;;;;;;;;;;;cAG1D,MAAM;;;;iBACN,OAAO,sBAAsB,EAAE,WAAW,CAAC,YAAY,CAAC;;;;;;;;qBAExD,OAAO,OAAO,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC;;;;;;;;eAE1D,OAAO,sBAAsB,EAAE,WAAW,CAAC,UAAU,CAAC;;;;;;;;;;;;uBAGtD,OAAO,OAAO,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/text/utils.ts"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAQxD;;;GAGG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH,UAAU,OAAO;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAE,cAAc,CAAE,CAAE,OAAO,CAAE,CAAC;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,WAAW,CAAE,YAAY,CAAE,CAAC;IACzC,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAE,cAAc,CAAE,CAAE,OAAO,CAAE,CAAC;IACtE,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IAC3C,QAAQ,CAAC,EAAE,WAAW,CAAE,UAAU,CAAE,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAE,cAAc,CAAE,CAAE,OAAO,CAAE,CAAC;CACxE;AAkBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,qBAAqB,CAAE,EACtC,eAAoB,EACpB,WAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,QAAQ,EACR,UAAU,EACV,kBAAuB,EACvB,cAAmB,EACnB,YAAqB,EACrB,QAAQ,EACR,WAAgB,EAChB,oBAAyB,EACzB,gBAAgB,GAChB,EAAE,OAAO;;;;;0BA2ET"}

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

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

package/build-types/toolbar/stories/index.story.d.ts

@@ -11,4 +11,9 @@ declare const meta: Meta<typeof Toolbar>;
 export default meta;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../toolbar/types").ToolbarProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
 export declare const WithoutGroup: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../toolbar/types").ToolbarProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
+/**
+ * Set the variant to `unstyled` to remove default border styles.
+ * Otherwise, leave it as `undefined` for default styles.
+ */
+export declare const Unstyled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../toolbar/types").ToolbarProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/toolbar/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toolbar/stories/index.story.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAwBtD;;GAEG;AACH,OAAO,EACN,OAAO,EAKP,MAAM,IAAI,CAAC;AAGZ,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAoB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,iZAAsB,CAAC;AA8F3C,eAAO,MAAM,YAAY,iZAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toolbar/stories/index.story.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAwBtD;;GAEG;AACH,OAAO,EACN,OAAO,EAKP,MAAM,IAAI,CAAC;AAGZ,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAwB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,iZAAsB,CAAC;AA8F3C,eAAO,MAAM,YAAY,iZAAsB,CAAC;AAahD;;;GAGG;AAEH,eAAO,MAAM,QAAQ,iZAAsB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAsD5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,uSAAmC,CAAC;AACxD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA+D5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,uSAAmC,CAAC;AACxD,eAAe,OAAO,CAAC"}

package/build-types/toolbar/toolbar/types.d.ts

@@ -11,5 +11,15 @@ export type ToolbarProps = {
      * An accessible label for the toolbar.
      */
     label: string;
+    /**
+     * Specifies the toolbar's style.
+     *
+     * Leave undefined for the default style. Or `'unstyled'` which
+     * removes the border from the toolbar, but keeps the default
+     * popover style.
+     *
+     * @default undefined
+     */
+    variant?: 'unstyled' | undefined;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/toolbar/toolbar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CACjC,CAAC"}

package/build-types/tools-panel/tools-panel-item/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgM5D"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8L5D"}

package/build-types/tools-panel/types.d.ts

@@ -47,6 +47,8 @@ export type ToolsPanelProps = {
     /**
      * Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
      * placeholder content instead of null when they are toggled off and hidden.
+     * Note that placeholder items won't apply the `className` that would be
+     * normally applied to a visible `ToolsPanelItem` via the `className` prop.
      *
      * @default false
      */

package/build-types/tools-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/unit-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAiGjD;;GAEG;AACH,eAAO,MAAM,aAAa,qBAA4B,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS,qBAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAAc,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,CAAC,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE,iBAAiB,EAAE,GAChC,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAM5C;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACvB,KAAK,CAAC,EAAE,iBAAiB,EAAE,GACzB,KAAK,IAAI,iBAAiB,EAAE,CAK9B;AAED;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,GAAE,iBAAiB,EAAkB,GAC/C,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAyB5C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,6BAA6B,CAC5C,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,YAAY,CAAC,EAAE,iBAAiB,EAAE,EAClC,gBAAgB,CAAC,EAAE,MAAM,EACzB,YAAY,CAAC,EAAE,MAAM,GACnB,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAmB5C;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAG5E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACtC,iBAAiB,sBAAe,EAChC,cAAc,EAAE,iBAAiB,EAAE,GACjC,iBAAiB,EAAE,CASrB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc;;;;MAQtB,iBAAiB,EAmBrB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,MAAM,EACnB,KAAK,GAAE,iBAAiB,EAAkB,GACxC,iBAAiB,EAAE,CAkBrB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/unit-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA6NjD;;GAEG;AACH,eAAO,MAAM,aAAa,qBAA4B,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS,qBAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAAc,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,CAAC,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE,iBAAiB,EAAE,GAChC,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAM5C;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACvB,KAAK,CAAC,EAAE,iBAAiB,EAAE,GACzB,KAAK,IAAI,iBAAiB,EAAE,CAK9B;AAED;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,GAAE,iBAAiB,EAAkB,GAC/C,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAyB5C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,6BAA6B,CAC5C,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,YAAY,CAAC,EAAE,iBAAiB,EAAE,EAClC,gBAAgB,CAAC,EAAE,MAAM,EACzB,YAAY,CAAC,EAAE,MAAM,GACnB,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAmB5C;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAG5E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACtC,iBAAiB,sBAAe,EAChC,cAAc,EAAE,iBAAiB,EAAE,GACjC,iBAAiB,EAAE,CASrB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc;;;;MAQtB,iBAAiB,EAmBrB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,MAAM,EACnB,KAAK,GAAE,iBAAiB,EAAkB,GACxC,iBAAiB,EAAE,CAkBrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.9.0",
+	"version": "25.10.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.43.0",
-		"@wordpress/compose": "^6.20.0",
-		"@wordpress/date": "^4.43.0",
-		"@wordpress/deprecated": "^3.43.0",
-		"@wordpress/dom": "^3.43.0",
-		"@wordpress/element": "^5.20.0",
-		"@wordpress/escape-html": "^2.43.0",
-		"@wordpress/hooks": "^3.43.0",
-		"@wordpress/html-entities": "^3.43.0",
-		"@wordpress/i18n": "^4.43.0",
-		"@wordpress/icons": "^9.34.0",
-		"@wordpress/is-shallow-equal": "^4.43.0",
-		"@wordpress/keycodes": "^3.43.0",
-		"@wordpress/primitives": "^3.41.0",
-		"@wordpress/private-apis": "^0.25.0",
-		"@wordpress/rich-text": "^6.20.0",
-		"@wordpress/warning": "^2.43.0",
+		"@wordpress/a11y": "^3.44.0",
+		"@wordpress/compose": "^6.21.0",
+		"@wordpress/date": "^4.44.0",
+		"@wordpress/deprecated": "^3.44.0",
+		"@wordpress/dom": "^3.44.0",
+		"@wordpress/element": "^5.21.0",
+		"@wordpress/escape-html": "^2.44.0",
+		"@wordpress/hooks": "^3.44.0",
+		"@wordpress/html-entities": "^3.44.0",
+		"@wordpress/i18n": "^4.44.0",
+		"@wordpress/icons": "^9.35.0",
+		"@wordpress/is-shallow-equal": "^4.44.0",
+		"@wordpress/keycodes": "^3.44.0",
+		"@wordpress/primitives": "^3.42.0",
+		"@wordpress/private-apis": "^0.26.0",
+		"@wordpress/rich-text": "^6.21.0",
+		"@wordpress/warning": "^2.44.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -89,5 +89,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9b8e598c5418d38fe72197c24ef1d3dd6c712151"
+	"gitHead": "f83bb1a71e8fa416131b81a9f282a72a1dc6c694"
 }

package/src/alignment-matrix-control/cell.tsx

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CompositeItem } from '../composite';
+import { CompositeItem } from '../composite/v2';
 import Tooltip from '../tooltip';
 import { VisuallyHidden } from '../visually-hidden';
 
@@ -17,6 +17,7 @@ import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
 export default function Cell( {
+	id,
 	isActive = false,
 	value,
 	...props
@@ -25,7 +26,10 @@ export default function Cell( {
 
 	return (
 		<Tooltip text={ tooltipText }>
-			<CompositeItem as={ CellView } role="gridcell" { ...props }>
+			<CompositeItem
+				id={ id }
+				render={ <CellView { ...props } role="gridcell" /> }
+			>
 				{ /* VoiceOver needs a text content to be rendered within grid cell,
 			otherwise it'll announce the content as "blank". So we use a visually
 			hidden element instead of aria-label. */ }

package/src/alignment-matrix-control/index.tsx

@@ -8,32 +8,17 @@ import classnames from 'classnames';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
-import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Cell from './cell';
-import { Composite, CompositeGroup, useCompositeState } from '../composite';
+import { Composite, CompositeRow, useCompositeStore } from '../composite/v2';
 import { Root, Row } from './styles/alignment-matrix-control-styles';
 import AlignmentMatrixControlIcon from './icon';
-import { GRID, getItemId } from './utils';
+import { GRID, getItemId, getItemValue } from './utils';
 import type { WordPressComponentProps } from '../context';
-import type {
-	AlignmentMatrixControlProps,
-	AlignmentMatrixControlValue,
-} from './types';
-
-const noop = () => {};
-
-function useBaseId( id?: string ) {
-	const instanceId = useInstanceId(
-		AlignmentMatrixControl,
-		'alignment-matrix-control'
-	);
-
-	return id || instanceId;
-}
+import type { AlignmentMatrixControlProps } from './types';
 
 /**
  *
@@ -61,31 +46,27 @@ export function AlignmentMatrixControl( {
 	label = __( 'Alignment Matrix Control' ),
 	defaultValue = 'center center',
 	value,
-	onChange = noop,
+	onChange,
 	width = 92,
 	...props
 }: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
-	const [ immutableDefaultValue ] = useState( value ?? defaultValue );
-	const baseId = useBaseId( id );
-	const initialCurrentId = getItemId( baseId, immutableDefaultValue );
+	const baseId = useInstanceId(
+		AlignmentMatrixControl,
+		'alignment-matrix-control',
+		id
+	);
 
-	const composite = useCompositeState( {
-		baseId,
-		currentId: initialCurrentId,
+	const compositeStore = useCompositeStore( {
+		defaultActiveId: getItemId( baseId, defaultValue ),
+		activeId: getItemId( baseId, value ),
+		setActiveId: ( nextActiveId ) => {
+			const nextValue = getItemValue( baseId, nextActiveId );
+			if ( nextValue ) onChange?.( nextValue );
+		},
 		rtl: isRTL(),
 	} );
 
-	const handleOnChange = ( nextValue: AlignmentMatrixControlValue ) => {
-		onChange( nextValue );
-	};
-
-	const { setCurrentId } = composite;
-
-	useEffect( () => {
-		if ( typeof value !== 'undefined' ) {
-			setCurrentId( getItemId( baseId, value ) );
-		}
-	}, [ value, setCurrentId, baseId ] );
+	const activeId = compositeStore.useState( 'activeId' );
 
 	const classes = classnames(
 		'component-alignment-matrix-control',
@@ -94,38 +75,34 @@ export function AlignmentMatrixControl( {
 
 	return (
 		<Composite
-			{ ...props }
-			{ ...composite }
-			aria-label={ label }
-			as={ Root }
-			className={ classes }
-			role="grid"
-			size={ width }
+			store={ compositeStore }
+			render={
+				<Root
+					{ ...props }
+					aria-label={ label }
+					className={ classes }
+					id={ baseId }
+					role="grid"
+					size={ width }
+				/>
+			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<CompositeGroup
-					{ ...composite }
-					as={ Row }
-					role="row"
-					key={ index }
-				>
+				<CompositeRow render={ <Row role="row" /> } key={ index }>
 					{ cells.map( ( cell ) => {
 						const cellId = getItemId( baseId, cell );
-						const isActive = composite.currentId === cellId;
+						const isActive = cellId === activeId;
 
 						return (
 							<Cell
-								{ ...composite }
 								id={ cellId }
 								isActive={ isActive }
 								key={ cell }
 								value={ cell }
-								onFocus={ () => handleOnChange( cell ) }
-								tabIndex={ isActive ? 0 : -1 }
 							/>
 						);
 					} ) }
-				</CompositeGroup>
+				</CompositeRow>
 			) ) }
 		</Composite>
 	);

package/src/alignment-matrix-control/stories/index.story.tsx

@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { Icon } from '@wordpress/icons';
 
 /**
@@ -24,10 +24,11 @@ const meta: Meta< typeof AlignmentMatrixControl > = {
 		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
 	},
 	argTypes: {
-		onChange: { action: 'onChange', control: { type: null } },
+		onChange: { control: { type: null } },
 		value: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
@@ -42,11 +43,6 @@ const Template: StoryFn< typeof AlignmentMatrixControl > = ( {
 	const [ value, setValue ] =
 		useState< AlignmentMatrixControlProps[ 'value' ] >();
 
-	// Convenience handler for Canvas view so changes are reflected
-	useEffect( () => {
-		setValue( defaultValue );
-	}, [ defaultValue ] );
-
 	return (
 		<AlignmentMatrixControl
 			{ ...props }

package/src/alignment-matrix-control/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -17,34 +17,133 @@ const getCell = ( name: string ) => {
 	return within( getControl() ).getByRole( 'gridcell', { name } );
 };
 
+const renderAndInitCompositeStore = async (
+	jsx: JSX.Element,
+	focusedCell = 'center center'
+) => {
+	const view = render( jsx );
+	await waitFor( () => {
+		expect( getCell( focusedCell ) ).toHaveAttribute( 'tabindex', '0' );
+	} );
+	return view;
+};
+
 describe( 'AlignmentMatrixControl', () => {
 	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			render( <AlignmentMatrixControl /> );
+		it( 'should render', async () => {
+			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
 
 			expect( getControl() ).toBeInTheDocument();
 		} );
+
+		it( 'should be centered by default', async () => {
+			const user = userEvent.setup();
+
+			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
+
+			await user.tab();
+
+			expect( getCell( 'center center' ) ).toHaveFocus();
+		} );
 	} );
 
-	describe( 'Change value', () => {
-		const alignments = [ 'center left', 'center center', 'bottom center' ];
-		const user = userEvent.setup();
+	describe( 'Should change value', () => {
+		describe( 'with Mouse', () => {
+			describe( 'on cell click', () => {
+				it.each( [
+					'top left',
+					'top center',
+					'top right',
+					'center left',
+					'center right',
+					'bottom left',
+					'bottom center',
+					'bottom right',
+				] )( '%s', async ( alignment ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl
+							value="center"
+							onChange={ spy }
+						/>
+					);
+
+					const cell = getCell( alignment );
+
+					await user.click( cell );
 
-		it.each( alignments )(
-			'should change value on %s cell click',
-			async ( alignment ) => {
-				const spy = jest.fn();
+					expect( cell ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( alignment );
+				} );
 
-				render(
-					<AlignmentMatrixControl value="center" onChange={ spy } />
-				);
+				it( 'unless already focused', async () => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
 
-				await user.click( getCell( alignment ) );
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl
+							value="center"
+							onChange={ spy }
+						/>
+					);
 
-				expect( getCell( alignment ) ).toHaveFocus();
+					const cell = getCell( 'center center' );
 
-				expect( spy ).toHaveBeenCalledWith( alignment );
-			}
-		);
+					await user.click( cell );
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).not.toHaveBeenCalled();
+				} );
+			} );
+		} );
+
+		describe( 'with Keyboard', () => {
+			describe( 'on arrow press', () => {
+				it.each( [
+					[ 'ArrowUp', 'top center' ],
+					[ 'ArrowLeft', 'center left' ],
+					[ 'ArrowDown', 'bottom center' ],
+					[ 'ArrowRight', 'center right' ],
+				] )( '%s', async ( keyRef, cellRef ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl onChange={ spy } />
+					);
+
+					await user.tab();
+					await user.keyboard( `[${ keyRef }]` );
+
+					expect( getCell( cellRef ) ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( cellRef );
+				} );
+			} );
+
+			describe( 'but not at at edge', () => {
+				it.each( [
+					[ 'ArrowUp', 'top left' ],
+					[ 'ArrowLeft', 'top left' ],
+					[ 'ArrowDown', 'bottom right' ],
+					[ 'ArrowRight', 'bottom right' ],
+				] )( '%s', async ( keyRef, cellRef ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl onChange={ spy } />
+					);
+
+					const cell = getCell( cellRef );
+					await user.click( cell );
+					await user.keyboard( `[${ keyRef }]` );
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( cellRef );
+				} );
+			} );
+		} );
 	} );
 } );