@wordpress/components 25.11.0 → 25.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/build/disclosure/index.js +37 -7
- package/build/disclosure/index.js.map +1 -1
- package/build/disclosure/types.js +6 -0
- package/build/disclosure/types.js.map +1 -0
- package/build/divider/component.js +5 -3
- package/build/divider/component.js.map +1 -1
- package/build/divider/types.js.map +1 -1
- package/build/dropdown-menu-v2-ariakit/index.js +26 -16
- package/build/dropdown-menu-v2-ariakit/index.js.map +1 -1
- package/build/dropdown-menu-v2-ariakit/types.js.map +1 -1
- package/build/gradient-picker/index.js +1 -1
- package/build/gradient-picker/index.js.map +1 -1
- package/build/index.native.js +8 -1
- package/build/index.native.js.map +1 -1
- package/build/mobile/audio-player/index.native.js +8 -9
- package/build/mobile/audio-player/index.native.js.map +1 -1
- package/build/mobile/global-styles-context/utils.native.js +44 -3
- package/build/mobile/global-styles-context/utils.native.js.map +1 -1
- package/build/radio-group/context.js +22 -0
- package/build/radio-group/context.js.map +1 -0
- package/build/radio-group/index.js +27 -23
- package/build/radio-group/index.js.map +1 -1
- package/build/radio-group/radio.js +58 -0
- package/build/radio-group/radio.js.map +1 -0
- package/build/radio-group/types.js +6 -0
- package/build/radio-group/types.js.map +1 -0
- package/build/tabs/styles.js +14 -7
- package/build/tabs/styles.js.map +1 -1
- package/build/tabs/tab.js +3 -5
- package/build/tabs/tab.js.map +1 -1
- package/build/tabs/tablist.js +3 -5
- package/build/tabs/tablist.js.map +1 -1
- package/build/tabs/tabpanel.js +6 -9
- package/build/tabs/tabpanel.js.map +1 -1
- package/build/tabs/types.js.map +1 -1
- package/build/text-control/index.js +5 -1
- package/build/text-control/index.js.map +1 -1
- package/build/text-control/types.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/component.js +4 -2
- package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/styles.js +13 -9
- package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build/toggle-group-control/types.js.map +1 -1
- package/build-module/disclosure/index.js +33 -8
- package/build-module/disclosure/index.js.map +1 -1
- package/build-module/disclosure/types.js +2 -0
- package/build-module/disclosure/types.js.map +1 -0
- package/build-module/divider/component.js +3 -3
- package/build-module/divider/component.js.map +1 -1
- package/build-module/divider/types.js.map +1 -1
- package/build-module/dropdown-menu-v2-ariakit/index.js +27 -17
- package/build-module/dropdown-menu-v2-ariakit/index.js.map +1 -1
- package/build-module/dropdown-menu-v2-ariakit/types.js.map +1 -1
- package/build-module/gradient-picker/index.js +1 -1
- package/build-module/gradient-picker/index.js.map +1 -1
- package/build-module/index.native.js +1 -1
- package/build-module/index.native.js.map +1 -1
- package/build-module/mobile/audio-player/index.native.js +9 -10
- package/build-module/mobile/audio-player/index.native.js.map +1 -1
- package/build-module/mobile/global-styles-context/utils.native.js +43 -4
- package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
- package/build-module/radio-group/context.js +14 -0
- package/build-module/radio-group/context.js.map +1 -0
- package/build-module/radio-group/index.js +24 -23
- package/build-module/radio-group/index.js.map +1 -1
- package/build-module/radio-group/radio.js +46 -0
- package/build-module/radio-group/radio.js.map +1 -0
- package/build-module/radio-group/types.js +2 -0
- package/build-module/radio-group/types.js.map +1 -0
- package/build-module/tabs/styles.js +11 -5
- package/build-module/tabs/styles.js.map +1 -1
- package/build-module/tabs/tab.js +3 -5
- package/build-module/tabs/tab.js.map +1 -1
- package/build-module/tabs/tablist.js +3 -5
- package/build-module/tabs/tablist.js.map +1 -1
- package/build-module/tabs/tabpanel.js +6 -7
- package/build-module/tabs/tabpanel.js.map +1 -1
- package/build-module/tabs/types.js.map +1 -1
- package/build-module/text-control/index.js +6 -1
- package/build-module/text-control/index.js.map +1 -1
- package/build-module/text-control/types.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/component.js +4 -2
- package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/styles.js +13 -9
- package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build-module/toggle-group-control/types.js.map +1 -1
- package/build-style/style-rtl.css +21 -3
- package/build-style/style.css +21 -3
- package/build-types/card/card-divider/component.d.ts +1 -1
- package/build-types/card/card-divider/hook.d.ts +162 -162
- package/build-types/disclosure/index.d.ts +7 -1
- package/build-types/disclosure/index.d.ts.map +1 -1
- package/build-types/disclosure/types.d.ts +12 -0
- package/build-types/disclosure/types.d.ts.map +1 -0
- package/build-types/divider/component.d.ts +5 -1
- package/build-types/divider/component.d.ts.map +1 -1
- package/build-types/divider/stories/index.story.d.ts.map +1 -1
- package/build-types/divider/styles.d.ts +1 -1
- package/build-types/divider/types.d.ts +2 -2
- package/build-types/divider/types.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2-ariakit/index.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2-ariakit/stories/index.story.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2-ariakit/types.d.ts +1 -1
- package/build-types/radio-group/context.d.ts +10 -0
- package/build-types/radio-group/context.d.ts.map +1 -0
- package/build-types/radio-group/index.d.ts +7 -9
- package/build-types/radio-group/index.d.ts.map +1 -1
- package/build-types/radio-group/radio.d.ts +8 -0
- package/build-types/radio-group/radio.d.ts.map +1 -0
- package/build-types/radio-group/stories/index.story.d.ts +14 -0
- package/build-types/radio-group/stories/index.story.d.ts.map +1 -0
- package/build-types/radio-group/types.d.ts +40 -0
- package/build-types/radio-group/types.d.ts.map +1 -0
- package/build-types/tabs/index.d.ts +3 -3
- package/build-types/tabs/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/styles.d.ts +10 -0
- package/build-types/tabs/styles.d.ts.map +1 -1
- package/build-types/tabs/tab.d.ts +1 -1
- package/build-types/tabs/tab.d.ts.map +1 -1
- package/build-types/tabs/tablist.d.ts +1 -1
- package/build-types/tabs/tablist.d.ts.map +1 -1
- package/build-types/tabs/tabpanel.d.ts +4 -1
- package/build-types/tabs/tabpanel.d.ts.map +1 -1
- package/build-types/tabs/types.d.ts +7 -31
- package/build-types/tabs/types.d.ts.map +1 -1
- package/build-types/text-control/index.d.ts +2 -1
- package/build-types/text-control/index.d.ts.map +1 -1
- package/build-types/text-control/types.d.ts +6 -0
- package/build-types/text-control/types.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts +1 -0
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +2 -2
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
- package/build-types/toggle-group-control/types.d.ts +6 -0
- package/build-types/toggle-group-control/types.d.ts.map +1 -1
- package/package.json +19 -20
- package/src/disclosure/index.tsx +44 -0
- package/src/disclosure/types.tsx +10 -0
- package/src/divider/component.tsx +3 -3
- package/src/divider/stories/index.story.tsx +8 -0
- package/src/divider/types.ts +2 -2
- package/src/dropdown-menu/style.scss +4 -0
- package/src/dropdown-menu-v2-ariakit/README.md +0 -7
- package/src/dropdown-menu-v2-ariakit/index.tsx +31 -15
- package/src/dropdown-menu-v2-ariakit/stories/index.story.tsx +1 -4
- package/src/dropdown-menu-v2-ariakit/test/index.tsx +0 -26
- package/src/dropdown-menu-v2-ariakit/types.ts +1 -1
- package/src/gradient-picker/index.tsx +1 -1
- package/src/index.native.js +1 -0
- package/src/mobile/audio-player/index.native.js +9 -13
- package/src/mobile/global-styles-context/utils.native.js +52 -3
- package/src/radio-group/context.tsx +18 -0
- package/src/radio-group/index.tsx +65 -0
- package/src/radio-group/radio.tsx +55 -0
- package/src/radio-group/stories/index.story.tsx +90 -0
- package/src/radio-group/types.ts +39 -0
- package/src/tabs/README.md +3 -33
- package/src/tabs/stories/index.story.tsx +9 -1
- package/src/tabs/styles.ts +16 -0
- package/src/tabs/tab.tsx +6 -6
- package/src/tabs/tablist.tsx +21 -20
- package/src/tabs/tabpanel.tsx +24 -23
- package/src/tabs/test/index.tsx +71 -16
- package/src/tabs/types.ts +7 -32
- package/src/text-control/index.tsx +5 -1
- package/src/text-control/style.scss +5 -0
- package/src/text-control/types.ts +6 -0
- package/src/toggle-group-control/toggle-group-control/component.tsx +8 -2
- package/src/toggle-group-control/toggle-group-control/styles.ts +13 -4
- package/src/toggle-group-control/types.ts +6 -0
- package/src/toolbar/toolbar-button/style.scss +0 -5
- package/tsconfig.tsbuildinfo +1 -1
- package/build/radio-group/radio/index.js +0 -49
- package/build/radio-group/radio/index.js.map +0 -1
- package/build/radio-group/radio-context/index.js +0 -18
- package/build/radio-group/radio-context/index.js.map +0 -1
- package/build-module/radio-group/radio/index.js +0 -40
- package/build-module/radio-group/radio/index.js.map +0 -1
- package/build-module/radio-group/radio-context/index.js +0 -10
- package/build-module/radio-group/radio-context/index.js.map +0 -1
- package/build-types/radio-group/radio/index.d.ts +0 -7
- package/build-types/radio-group/radio/index.d.ts.map +0 -1
- package/build-types/radio-group/radio-context/index.d.ts +0 -6
- package/build-types/radio-group/radio-context/index.d.ts.map +0 -1
- package/src/disclosure/index.js +0 -11
- package/src/radio-group/index.js +0 -51
- package/src/radio-group/radio/index.js +0 -40
- package/src/radio-group/radio-context/index.js +0 -11
- package/src/radio-group/stories/index.story.js +0 -83
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
import type { TabsProps } from './types';
|
|
6
6
|
declare function Tabs({ selectOnMove, initialTabId, orientation, onSelect, children, selectedTabId, }: TabsProps): JSX.Element;
|
|
7
7
|
declare namespace Tabs {
|
|
8
|
-
var TabList: import("react").ForwardRefExoticComponent<import("./types").TabListProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
|
-
var Tab: import("react").ForwardRefExoticComponent<import("./types").TabProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
10
|
-
var TabPanel: import("react").ForwardRefExoticComponent<import("./types").TabPanelProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
8
|
+
var TabList: import("react").ForwardRefExoticComponent<import("./types").TabListProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children" | "as"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
|
+
var Tab: import("react").ForwardRefExoticComponent<import("./types").TabProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "as" | keyof import("./types").TabProps> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
var TabPanel: import("react").ForwardRefExoticComponent<import("./types").TabPanelProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("./types").TabPanelProps> & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
11
|
}
|
|
12
12
|
export default Tabs;
|
|
13
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tabs/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAQtD;;GAEG;AACH,OAAO,IAAI,MAAM,IAAI,CAAC;AAKtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAQ5B,CAAC;AACF,eAAe,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tabs/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAQtD;;GAEG;AACH,OAAO,IAAI,MAAM,IAAI,CAAC;AAKtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAQ5B,CAAC;AACF,eAAe,IAAI,CAAC;AA+BpB,eAAO,MAAM,OAAO,6HAAsB,CAAC;AAwB3C,eAAO,MAAM,WAAW,6HAAiC,CAAC;AAqC1D,eAAO,MAAM,uBAAuB,6HAEnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,6HAAsB,CAAC;AA0CpD,eAAO,MAAM,aAAa,6HAAmC,CAAC;AA6D9D,eAAO,MAAM,oBAAoB,6HAAiC,CAAC;AA+DnE,eAAO,MAAM,cAAc,6HAAoC,CAAC;AAqChE,eAAO,MAAM,kBAAkB,6HAAwC,CAAC;AAgCxE,eAAO,MAAM,cAAc,6HAAoC,CAAC"}
|
|
@@ -14,4 +14,14 @@ export declare const Tab: import("@emotion/styled").StyledComponent<Ariakit.TabO
|
|
|
14
14
|
}, "children" | keyof Ariakit.TabOptions<"button">> & {
|
|
15
15
|
theme?: import("@emotion/react").Theme | undefined;
|
|
16
16
|
}, {}, {}>;
|
|
17
|
+
export declare const TabPanel: import("@emotion/styled").StyledComponent<Ariakit.TabPanelOptions<"div"> & {
|
|
18
|
+
[index: `data-${string}`]: unknown;
|
|
19
|
+
wrapElement?: import("@ariakit/react-core/cjs/utils/types").WrapElement | undefined;
|
|
20
|
+
children?: import("@ariakit/react-core/cjs/utils/types").Children<any>;
|
|
21
|
+
render?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("@ariakit/react-core/cjs/utils/types").RenderProp<import("react").HTMLAttributes<any> & import("react").RefAttributes<any>> | undefined;
|
|
22
|
+
} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
23
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
24
|
+
}, "children" | keyof Ariakit.TabPanelOptions<"div">> & {
|
|
25
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
26
|
+
}, {}, {}>;
|
|
17
27
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tabs/styles.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAS1C,eAAO,MAAM,cAAc;;;yGAO1B,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;UA+Ef,CAAC"}
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tabs/styles.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAS1C,eAAO,MAAM,cAAc;;;yGAO1B,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;UA+Ef,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;UAcpB,CAAC"}
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
* Internal dependencies
|
|
7
7
|
*/
|
|
8
8
|
import type { TabProps } from './types';
|
|
9
|
-
export declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
export declare const Tab: import("react").ForwardRefExoticComponent<TabProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "as" | keyof TabProps> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
//# sourceMappingURL=tab.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tabs/tab.tsx"],"names":[],"mappings":"AAAA;;GAEG;;AAIH;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tabs/tab.tsx"],"names":[],"mappings":"AAAA;;GAEG;;AAIH;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMxC,eAAO,MAAM,GAAG,kUAuBb,CAAC"}
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* Internal dependencies
|
|
4
4
|
*/
|
|
5
5
|
import type { TabListProps } from './types';
|
|
6
|
-
export declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children" | "as"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
7
|
//# sourceMappingURL=tablist.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tablist.d.ts","sourceRoot":"","sources":["../../src/tabs/tablist.tsx"],"names":[],"mappings":";AAYA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"tablist.d.ts","sourceRoot":"","sources":["../../src/tabs/tablist.tsx"],"names":[],"mappings":";AAYA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAK5C,eAAO,MAAM,OAAO,0SAoBjB,CAAC"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
1
4
|
/// <reference types="react" />
|
|
2
5
|
/**
|
|
3
6
|
* Internal dependencies
|
|
4
7
|
*/
|
|
5
8
|
import type { TabPanelProps } from './types';
|
|
6
|
-
export declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
|
+
export declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof TabPanelProps> & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
10
|
//# sourceMappingURL=tabpanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabpanel.d.ts","sourceRoot":"","sources":["../../src/tabs/tabpanel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tabpanel.d.ts","sourceRoot":"","sources":["../../src/tabs/tabpanel.tsx"],"names":[],"mappings":"AAAA;;GAEG;;AAQH;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C,eAAO,MAAM,QAAQ,oTAsBlB,CAAC"}
|
|
@@ -3,10 +3,6 @@
|
|
|
3
3
|
* External dependencies
|
|
4
4
|
*/
|
|
5
5
|
import type * as Ariakit from '@ariakit/react';
|
|
6
|
-
/**
|
|
7
|
-
* Internal dependencies
|
|
8
|
-
*/
|
|
9
|
-
import type { IconType } from '../icon';
|
|
10
6
|
export type TabsContextProps = {
|
|
11
7
|
/**
|
|
12
8
|
* The tabStore object returned by Ariakit's `useTabStore` hook.
|
|
@@ -71,36 +67,16 @@ export type TabListProps = {
|
|
|
71
67
|
* The children elements, which should be a series of `Tabs.TabPanel` components.
|
|
72
68
|
*/
|
|
73
69
|
children?: React.ReactNode;
|
|
74
|
-
/**
|
|
75
|
-
* The class name to apply to the tablist.
|
|
76
|
-
*/
|
|
77
|
-
className?: string;
|
|
78
|
-
/**
|
|
79
|
-
* Custom CSS styles for the rendered tablist.
|
|
80
|
-
*/
|
|
81
|
-
style?: React.CSSProperties;
|
|
82
70
|
};
|
|
83
71
|
export type TabProps = {
|
|
84
72
|
/**
|
|
85
73
|
* The id of the tab, which is prepended with the `Tabs` instanceId.
|
|
86
74
|
*/
|
|
87
75
|
id: string;
|
|
88
|
-
/**
|
|
89
|
-
* Custom CSS styles for the tab.
|
|
90
|
-
*/
|
|
91
|
-
style?: React.CSSProperties;
|
|
92
76
|
/**
|
|
93
77
|
* The children elements, generally the text to display on the tab.
|
|
94
78
|
*/
|
|
95
79
|
children?: React.ReactNode;
|
|
96
|
-
/**
|
|
97
|
-
* The class name to apply to the tab button.
|
|
98
|
-
*/
|
|
99
|
-
className?: string;
|
|
100
|
-
/**
|
|
101
|
-
* The icon used for the tab button.
|
|
102
|
-
*/
|
|
103
|
-
icon?: IconType;
|
|
104
80
|
/**
|
|
105
81
|
* Determines if the tab button should be disabled.
|
|
106
82
|
*
|
|
@@ -119,16 +95,16 @@ export type TabPanelProps = {
|
|
|
119
95
|
*/
|
|
120
96
|
children?: React.ReactNode;
|
|
121
97
|
/**
|
|
122
|
-
* A unique identifier for the
|
|
98
|
+
* A unique identifier for the tabpanel, which is used to generate a unique `id` for the underlying element.
|
|
123
99
|
*/
|
|
124
100
|
id: string;
|
|
125
101
|
/**
|
|
126
|
-
*
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
*
|
|
102
|
+
* Determines whether or not the tabpanel element should be focusable.
|
|
103
|
+
* If `false`, pressing the tab key will skip over the tabpanel, and instead
|
|
104
|
+
* focus on the first focusable element in the panel (if there is one).
|
|
105
|
+
*
|
|
106
|
+
* @default true
|
|
131
107
|
*/
|
|
132
|
-
|
|
108
|
+
focusable?: boolean;
|
|
133
109
|
};
|
|
134
110
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tabs/types.ts"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAE/C
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tabs/types.ts"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GACzB;IACA;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;IACxB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CAClB,GACD,SAAS,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG;IACvB;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAM,IAAI,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
|
|
@@ -23,6 +23,7 @@ export declare const TextControl: import("react").ForwardRefExoticComponent<Pick
|
|
|
23
23
|
onChange: (value: string) => void;
|
|
24
24
|
value: string | number;
|
|
25
25
|
type?: "number" | "search" | "text" | "tel" | "url" | "email" | "password" | undefined;
|
|
26
|
-
|
|
26
|
+
__next40pxDefaultSize?: boolean | undefined;
|
|
27
|
+
} & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "className" | "children" | "label" | "help" | "type" | "onChange" | "as" | "value" | "__next40pxDefaultSize" | "hideLabelFromVision" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
27
28
|
export default TextControl;
|
|
28
29
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text-control/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text-control/index.tsx"],"names":[],"mappings":";AAiEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW;;;;;oZAAuC,CAAC;AAEhE,eAAe,WAAW,CAAC"}
|
|
@@ -17,5 +17,11 @@ export type TextControlProps = Pick<BaseControlProps, 'className' | 'hideLabelFr
|
|
|
17
17
|
* @default 'text'
|
|
18
18
|
*/
|
|
19
19
|
type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'search' | 'url';
|
|
20
|
+
/**
|
|
21
|
+
* Start opting into the larger default height that will become the default size in a future version.
|
|
22
|
+
*
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
__next40pxDefaultSize?: boolean;
|
|
20
26
|
};
|
|
21
27
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/text-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAClC,gBAAgB,EACd,WAAW,GACX,qBAAqB,GACrB,MAAM,GACN,OAAO,GACP,yBAAyB,CAC3B,GAAG;IACH;;OAEG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/text-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAClC,gBAAgB,EACd,WAAW,GACX,qBAAqB,GACrB,MAAM,GACN,OAAO,GACP,yBAAyB,CAC3B,GAAG;IACH;;OAEG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3E;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC"}
|
|
@@ -38,6 +38,7 @@ export declare const ToggleGroupControl: import("../../context").WordPressCompon
|
|
|
38
38
|
value?: string | number | undefined;
|
|
39
39
|
children: import("react").ReactNode;
|
|
40
40
|
size?: "default" | "__unstable-large" | undefined;
|
|
41
|
+
__next40pxDefaultSize?: boolean | undefined;
|
|
41
42
|
} & import("react").RefAttributes<any>, false>;
|
|
42
43
|
export default ToggleGroupControl;
|
|
43
44
|
//# sourceMappingURL=component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/component.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/component.tsx"],"names":[],"mappings":";AAiGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;8CAG9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { ToggleGroupControlProps } from '../types';
|
|
3
|
-
export declare const toggleGroupControl: ({ isBlock, isDeselectable, size, }: Pick<ToggleGroupControlProps, "isBlock" | "isDeselectable"> & {
|
|
3
|
+
export declare const toggleGroupControl: ({ isBlock, isDeselectable, size, __next40pxDefaultSize, }: Pick<ToggleGroupControlProps, "isBlock" | "__next40pxDefaultSize" | "isDeselectable"> & {
|
|
4
4
|
size: NonNullable<ToggleGroupControlProps['size']>;
|
|
5
5
|
}) => import("@emotion/utils").SerializedStyles;
|
|
6
|
-
export declare const toggleGroupControlSize: (size: NonNullable<ToggleGroupControlProps['size']
|
|
6
|
+
export declare const toggleGroupControlSize: (size: NonNullable<ToggleGroupControlProps['size']>, __next40pxDefaultSize: ToggleGroupControlProps['__next40pxDefaultSize']) => import("@emotion/utils").SerializedStyles;
|
|
7
7
|
export declare const block: import("@emotion/utils").SerializedStyles;
|
|
8
8
|
export declare const VisualLabelWrapper: import("@emotion/styled").StyledComponent<{
|
|
9
9
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,kBAAkB;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,kBAAkB;UASxB,YAAa,uBAAuB,CAAE,MAAM,CAAE,CAAE;+CAYtD,CAAC;AAyBF,eAAO,MAAM,sBAAsB,SAC5B,YAAa,uBAAuB,CAAE,MAAM,CAAE,CAAE,yBAC/B,uBAAuB,CAAE,uBAAuB,CAAE,8CAczE,CAAC;AAEF,eAAO,MAAM,KAAK,2CAGjB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC"}
|
|
@@ -107,6 +107,12 @@ export type ToggleGroupControlProps = Pick<BaseControlProps, 'help' | '__nextHas
|
|
|
107
107
|
* @default 'default'
|
|
108
108
|
*/
|
|
109
109
|
size?: 'default' | '__unstable-large';
|
|
110
|
+
/**
|
|
111
|
+
* Start opting into the larger default height that will become the default size in a future version.
|
|
112
|
+
*
|
|
113
|
+
* @default false
|
|
114
|
+
*/
|
|
115
|
+
__next40pxDefaultSize?: boolean;
|
|
110
116
|
};
|
|
111
117
|
export type ToggleGroupControlContextProps = {
|
|
112
118
|
isDeselectable?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/toggle-group-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CACnD,iCAAiC,EACjC,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC/C,iCAAiC,EACjC,OAAO,GAAG,aAAa,CACvB,GAAG;IACH;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAE,UAAU,CAAE,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACzC,gBAAgB,EAChB,MAAM,GAAG,yBAAyB,CAClC,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/toggle-group-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CACnD,iCAAiC,EACjC,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC/C,iCAAiC,EACjC,OAAO,GAAG,aAAa,CACvB,GAAG;IACH;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAE,UAAU,CAAE,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACzC,gBAAgB,EAChB,MAAM,GAAG,yBAAyB,CAClC,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACtC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,uBAAuB,CAAE,SAAS,CAAE,CAAC;IAC9C,IAAI,EAAE,uBAAuB,CAAE,MAAM,CAAE,CAAC;IACxC,KAAK,EAAE,uBAAuB,CAAE,OAAO,CAAE,CAAC;IAC1C,QAAQ,EAAE,CAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,IAAI,CACpD,uBAAuB,EACvB,UAAU,GAAG,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACxE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.12.0",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
"types": "build-types",
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@ariakit/react": "^0.3.5",
|
|
34
|
-
"@ariakit/test": "^0.3.0",
|
|
35
34
|
"@babel/runtime": "^7.16.0",
|
|
36
35
|
"@emotion/cache": "^11.7.1",
|
|
37
36
|
"@emotion/css": "^11.7.1",
|
|
@@ -44,23 +43,23 @@
|
|
|
44
43
|
"@types/gradient-parser": "0.1.3",
|
|
45
44
|
"@types/highlight-words-core": "1.2.1",
|
|
46
45
|
"@use-gesture/react": "^10.2.24",
|
|
47
|
-
"@wordpress/a11y": "^3.
|
|
48
|
-
"@wordpress/compose": "^6.
|
|
49
|
-
"@wordpress/date": "^4.
|
|
50
|
-
"@wordpress/deprecated": "^3.
|
|
51
|
-
"@wordpress/dom": "^3.
|
|
52
|
-
"@wordpress/element": "^5.
|
|
53
|
-
"@wordpress/escape-html": "^2.
|
|
54
|
-
"@wordpress/hooks": "^3.
|
|
55
|
-
"@wordpress/html-entities": "^3.
|
|
56
|
-
"@wordpress/i18n": "^4.
|
|
57
|
-
"@wordpress/icons": "^9.
|
|
58
|
-
"@wordpress/is-shallow-equal": "^4.
|
|
59
|
-
"@wordpress/keycodes": "^3.
|
|
60
|
-
"@wordpress/primitives": "^3.
|
|
61
|
-
"@wordpress/private-apis": "^0.
|
|
62
|
-
"@wordpress/rich-text": "^6.
|
|
63
|
-
"@wordpress/warning": "^2.
|
|
46
|
+
"@wordpress/a11y": "^3.46.0",
|
|
47
|
+
"@wordpress/compose": "^6.23.0",
|
|
48
|
+
"@wordpress/date": "^4.46.0",
|
|
49
|
+
"@wordpress/deprecated": "^3.46.0",
|
|
50
|
+
"@wordpress/dom": "^3.46.0",
|
|
51
|
+
"@wordpress/element": "^5.23.0",
|
|
52
|
+
"@wordpress/escape-html": "^2.46.0",
|
|
53
|
+
"@wordpress/hooks": "^3.46.0",
|
|
54
|
+
"@wordpress/html-entities": "^3.46.0",
|
|
55
|
+
"@wordpress/i18n": "^4.46.0",
|
|
56
|
+
"@wordpress/icons": "^9.37.0",
|
|
57
|
+
"@wordpress/is-shallow-equal": "^4.46.0",
|
|
58
|
+
"@wordpress/keycodes": "^3.46.0",
|
|
59
|
+
"@wordpress/primitives": "^3.44.0",
|
|
60
|
+
"@wordpress/private-apis": "^0.28.0",
|
|
61
|
+
"@wordpress/rich-text": "^6.23.0",
|
|
62
|
+
"@wordpress/warning": "^2.46.0",
|
|
64
63
|
"change-case": "^4.1.2",
|
|
65
64
|
"classnames": "^2.3.1",
|
|
66
65
|
"colord": "^2.7.0",
|
|
@@ -90,5 +89,5 @@
|
|
|
90
89
|
"publishConfig": {
|
|
91
90
|
"access": "public"
|
|
92
91
|
},
|
|
93
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
|
|
94
93
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
// eslint-disable-next-line no-restricted-imports
|
|
5
|
+
import * as Ariakit from '@ariakit/react';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* WordPress dependencies
|
|
9
|
+
*/
|
|
10
|
+
import { forwardRef } from '@wordpress/element';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Internal dependencies
|
|
14
|
+
*/
|
|
15
|
+
import type { DisclosureContentProps } from './types';
|
|
16
|
+
import type { WordPressComponentProps } from '../context';
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Accessible Disclosure component that controls visibility of a section of
|
|
20
|
+
* content. It follows the WAI-ARIA Disclosure Pattern.
|
|
21
|
+
*/
|
|
22
|
+
const UnforwardedDisclosureContent = (
|
|
23
|
+
{
|
|
24
|
+
visible,
|
|
25
|
+
children,
|
|
26
|
+
...props
|
|
27
|
+
}: WordPressComponentProps< DisclosureContentProps, 'div', false >,
|
|
28
|
+
ref: React.ForwardedRef< any >
|
|
29
|
+
) => {
|
|
30
|
+
const disclosure = Ariakit.useDisclosureStore( { open: visible } );
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<Ariakit.DisclosureContent
|
|
34
|
+
store={ disclosure }
|
|
35
|
+
ref={ ref }
|
|
36
|
+
{ ...props }
|
|
37
|
+
>
|
|
38
|
+
{ children }
|
|
39
|
+
</Ariakit.DisclosureContent>
|
|
40
|
+
);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export const DisclosureContent = forwardRef( UnforwardedDisclosureContent );
|
|
44
|
+
export default DisclosureContent;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* External dependencies
|
|
3
3
|
*/
|
|
4
4
|
// eslint-disable-next-line no-restricted-imports
|
|
5
|
-
import
|
|
5
|
+
import * as Ariakit from '@ariakit/react';
|
|
6
6
|
import type { ForwardedRef } from 'react';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -20,8 +20,8 @@ function UnconnectedDivider(
|
|
|
20
20
|
const contextProps = useContextSystem( props, 'Divider' );
|
|
21
21
|
|
|
22
22
|
return (
|
|
23
|
-
<Separator
|
|
24
|
-
|
|
23
|
+
<Ariakit.Separator
|
|
24
|
+
render={ <DividerView /> }
|
|
25
25
|
{ ...contextProps }
|
|
26
26
|
ref={ forwardedRef }
|
|
27
27
|
/>
|
|
@@ -23,6 +23,14 @@ const meta: Meta< typeof Divider > = {
|
|
|
23
23
|
marginEnd: {
|
|
24
24
|
control: { type: 'text' },
|
|
25
25
|
},
|
|
26
|
+
wrapElement: {
|
|
27
|
+
control: { type: null },
|
|
28
|
+
},
|
|
29
|
+
ref: {
|
|
30
|
+
table: {
|
|
31
|
+
disable: true,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
26
34
|
},
|
|
27
35
|
parameters: {
|
|
28
36
|
controls: { expanded: true },
|
package/src/divider/types.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* External dependencies
|
|
3
3
|
*/
|
|
4
4
|
// eslint-disable-next-line no-restricted-imports
|
|
5
|
-
import type { SeparatorProps } from '
|
|
5
|
+
import type { SeparatorProps } from '@ariakit/react';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Internal dependencies
|
|
@@ -11,7 +11,7 @@ import type { SpaceInput } from '../utils/space';
|
|
|
11
11
|
|
|
12
12
|
export type DividerProps = Omit<
|
|
13
13
|
SeparatorProps,
|
|
14
|
-
'children' | 'unstable_system' | 'orientation'
|
|
14
|
+
'children' | 'unstable_system' | 'orientation' | 'as' | 'render'
|
|
15
15
|
> & {
|
|
16
16
|
/**
|
|
17
17
|
* Adjusts all margins on the inline dimension.
|
|
@@ -113,13 +113,6 @@ The skidding of the popover along the anchor element. Can be set to negative val
|
|
|
113
113
|
- Required: no
|
|
114
114
|
- Default: `0` for root-level menus, `-8` for nested menus
|
|
115
115
|
|
|
116
|
-
##### `hideOnEscape`: `boolean | ( ( event: KeyboardEvent | React.KeyboardEvent< Element > ) => boolean )`
|
|
117
|
-
|
|
118
|
-
Determines whether the menu popover will be hidden when the user presses the Escape key.
|
|
119
|
-
|
|
120
|
-
- Required: no
|
|
121
|
-
- Default: `true`
|
|
122
|
-
|
|
123
116
|
### `DropdownMenuItem`
|
|
124
117
|
|
|
125
118
|
Used to render a menu item.
|
|
@@ -14,6 +14,7 @@ import {
|
|
|
14
14
|
useMemo,
|
|
15
15
|
cloneElement,
|
|
16
16
|
isValidElement,
|
|
17
|
+
useCallback,
|
|
17
18
|
} from '@wordpress/element';
|
|
18
19
|
import { isRTL } from '@wordpress/i18n';
|
|
19
20
|
import { check, chevronRightSmall } from '@wordpress/icons';
|
|
@@ -99,6 +100,12 @@ export const DropdownMenuCheckboxItem = forwardRef<
|
|
|
99
100
|
);
|
|
100
101
|
} );
|
|
101
102
|
|
|
103
|
+
const radioCheck = (
|
|
104
|
+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
105
|
+
<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
|
|
106
|
+
</SVG>
|
|
107
|
+
);
|
|
108
|
+
|
|
102
109
|
export const DropdownMenuRadioItem = forwardRef<
|
|
103
110
|
HTMLDivElement,
|
|
104
111
|
WordPressComponentProps< DropdownMenuRadioItemProps, 'div', false >
|
|
@@ -119,14 +126,7 @@ export const DropdownMenuRadioItem = forwardRef<
|
|
|
119
126
|
store={ dropdownMenuContext?.store }
|
|
120
127
|
render={ <Styled.ItemPrefixWrapper /> }
|
|
121
128
|
>
|
|
122
|
-
<
|
|
123
|
-
<Circle
|
|
124
|
-
cx={ 12 }
|
|
125
|
-
cy={ 12 }
|
|
126
|
-
r={ 3 }
|
|
127
|
-
fill="currentColor"
|
|
128
|
-
></Circle>
|
|
129
|
-
</SVG>
|
|
129
|
+
<Icon icon={ radioCheck } size={ 24 } />
|
|
130
130
|
</Ariakit.MenuItemCheck>
|
|
131
131
|
{ children }
|
|
132
132
|
{ suffix }
|
|
@@ -181,7 +181,6 @@ const UnconnectedDropdownMenu = (
|
|
|
181
181
|
children,
|
|
182
182
|
shift,
|
|
183
183
|
modal = true,
|
|
184
|
-
hideOnEscape = true,
|
|
185
184
|
|
|
186
185
|
// From internal components context
|
|
187
186
|
variant,
|
|
@@ -249,6 +248,28 @@ const UnconnectedDropdownMenu = (
|
|
|
249
248
|
);
|
|
250
249
|
}
|
|
251
250
|
|
|
251
|
+
const hideOnEscape = useCallback(
|
|
252
|
+
( event: React.KeyboardEvent< Element > ) => {
|
|
253
|
+
// Pressing Escape can cause unexpected consequences (ie. exiting
|
|
254
|
+
// full screen mode on MacOs, close parent modals...).
|
|
255
|
+
event.preventDefault();
|
|
256
|
+
// Returning `true` causes the menu to hide.
|
|
257
|
+
return true;
|
|
258
|
+
},
|
|
259
|
+
[]
|
|
260
|
+
);
|
|
261
|
+
|
|
262
|
+
const wrapperProps = useMemo(
|
|
263
|
+
() => ( {
|
|
264
|
+
dir: computedDirection,
|
|
265
|
+
style: {
|
|
266
|
+
direction:
|
|
267
|
+
computedDirection as React.CSSProperties[ 'direction' ],
|
|
268
|
+
},
|
|
269
|
+
} ),
|
|
270
|
+
[ computedDirection ]
|
|
271
|
+
);
|
|
272
|
+
|
|
252
273
|
return (
|
|
253
274
|
<>
|
|
254
275
|
{ /* Menu trigger */ }
|
|
@@ -281,12 +302,7 @@ const UnconnectedDropdownMenu = (
|
|
|
281
302
|
hideOnHoverOutside={ false }
|
|
282
303
|
data-side={ appliedPlacementSide }
|
|
283
304
|
variant={ variant }
|
|
284
|
-
wrapperProps={
|
|
285
|
-
dir: computedDirection,
|
|
286
|
-
style: {
|
|
287
|
-
direction: computedDirection,
|
|
288
|
-
},
|
|
289
|
-
} }
|
|
305
|
+
wrapperProps={ wrapperProps }
|
|
290
306
|
hideOnEscape={ hideOnEscape }
|
|
291
307
|
unmountOnHide
|
|
292
308
|
>
|
|
@@ -40,6 +40,7 @@ const meta: Meta< typeof DropdownMenu > = {
|
|
|
40
40
|
},
|
|
41
41
|
argTypes: {
|
|
42
42
|
children: { control: { type: null } },
|
|
43
|
+
trigger: { control: { type: null } },
|
|
43
44
|
},
|
|
44
45
|
parameters: {
|
|
45
46
|
actions: { argTypesRegex: '^on.*' },
|
|
@@ -494,10 +495,6 @@ export const InsideModal: StoryFn< typeof DropdownMenu > = ( props ) => {
|
|
|
494
495
|
};
|
|
495
496
|
InsideModal.args = {
|
|
496
497
|
...Default.args,
|
|
497
|
-
hideOnEscape: ( e ) => {
|
|
498
|
-
e.stopPropagation();
|
|
499
|
-
return true;
|
|
500
|
-
},
|
|
501
498
|
};
|
|
502
499
|
InsideModal.parameters = {
|
|
503
500
|
docs: {
|
|
@@ -197,32 +197,6 @@ describe( 'DropdownMenu', () => {
|
|
|
197
197
|
);
|
|
198
198
|
} );
|
|
199
199
|
|
|
200
|
-
it( 'should not close when pressing the escape key if the `hideOnEscape` prop is set to `false`', async () => {
|
|
201
|
-
render(
|
|
202
|
-
<DropdownMenu
|
|
203
|
-
trigger={ <button>Open dropdown</button> }
|
|
204
|
-
hideOnEscape={ false }
|
|
205
|
-
>
|
|
206
|
-
<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
|
|
207
|
-
</DropdownMenu>
|
|
208
|
-
);
|
|
209
|
-
|
|
210
|
-
const trigger = screen.getByRole( 'button', {
|
|
211
|
-
name: 'Open dropdown',
|
|
212
|
-
} );
|
|
213
|
-
|
|
214
|
-
await click( trigger );
|
|
215
|
-
|
|
216
|
-
// Focuses menu on mouse click, focuses first item on keyboard press
|
|
217
|
-
// Can be changed with a custom useEffect
|
|
218
|
-
expect( screen.getByRole( 'menu' ) ).toHaveFocus();
|
|
219
|
-
|
|
220
|
-
// Pressing esc will close the menu and move focus to the toggle
|
|
221
|
-
await press.Escape();
|
|
222
|
-
|
|
223
|
-
expect( screen.getByRole( 'menu' ) ).toHaveFocus();
|
|
224
|
-
} );
|
|
225
|
-
|
|
226
200
|
it( 'should close when clicking outside of the content', async () => {
|
|
227
201
|
render(
|
|
228
202
|
<DropdownMenu
|
|
@@ -72,7 +72,7 @@ export interface DropdownMenuProps {
|
|
|
72
72
|
* Determines whether the menu popover will be hidden when the user presses
|
|
73
73
|
* the Escape key.
|
|
74
74
|
*
|
|
75
|
-
* @default true
|
|
75
|
+
* @default `( event ) => { event.preventDefault(); return true; }`
|
|
76
76
|
*/
|
|
77
77
|
hideOnEscape?:
|
|
78
78
|
| boolean
|