@wordpress/components 28.7.0 → 28.8.1-next.5368f64a9.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 +30 -0
- package/build/composite/context.js +1 -1
- package/build/composite/context.js.map +1 -1
- package/build/composite/group-label.js +1 -1
- package/build/composite/group-label.js.map +1 -1
- package/build/composite/group.js +1 -1
- package/build/composite/group.js.map +1 -1
- package/build/composite/hover.js +1 -1
- package/build/composite/hover.js.map +1 -1
- package/build/composite/index.js +17 -26
- package/build/composite/index.js.map +1 -1
- package/build/composite/item.js +1 -1
- package/build/composite/item.js.map +1 -1
- package/build/composite/legacy/index.js +59 -8
- package/build/composite/legacy/index.js.map +1 -1
- package/build/composite/row.js +1 -1
- package/build/composite/row.js.map +1 -1
- package/build/composite/typeahead.js +1 -1
- package/build/composite/typeahead.js.map +1 -1
- package/build/composite/types.js.map +1 -1
- package/build/date-time/date/index.js +1 -1
- package/build/date-time/date/index.js.map +1 -1
- package/build/date-time/date/styles.js +35 -24
- package/build/date-time/date/styles.js.map +1 -1
- package/build/date-time/date/use-lilius/index.js +163 -0
- package/build/date-time/date/use-lilius/index.js.map +1 -0
- package/build/index.js +7 -0
- package/build/index.js.map +1 -1
- package/build/modal/index.js +11 -4
- package/build/modal/index.js.map +1 -1
- package/build/navigator/navigator-screen/component.js +5 -0
- package/build/navigator/navigator-screen/component.js.map +1 -1
- package/build/private-apis.js +0 -9
- package/build/private-apis.js.map +1 -1
- package/build/slot-fill/index.js +1 -0
- package/build/slot-fill/index.js.map +1 -1
- package/build/tabs/styles.js +3 -3
- package/build/tabs/styles.js.map +1 -1
- package/build/tabs/tablist.js +5 -4
- package/build/tabs/tablist.js.map +1 -1
- package/build/utils/element-rect.js +73 -105
- package/build/utils/element-rect.js.map +1 -1
- package/build-module/composite/context.js +1 -1
- package/build-module/composite/context.js.map +1 -1
- package/build-module/composite/group-label.js +1 -1
- package/build-module/composite/group-label.js.map +1 -1
- package/build-module/composite/group.js +1 -1
- package/build-module/composite/group.js.map +1 -1
- package/build-module/composite/hover.js +1 -1
- package/build-module/composite/hover.js.map +1 -1
- package/build-module/composite/index.js +17 -26
- package/build-module/composite/index.js.map +1 -1
- package/build-module/composite/item.js +1 -1
- package/build-module/composite/item.js.map +1 -1
- package/build-module/composite/legacy/index.js +56 -8
- package/build-module/composite/legacy/index.js.map +1 -1
- package/build-module/composite/row.js +1 -1
- package/build-module/composite/row.js.map +1 -1
- package/build-module/composite/typeahead.js +1 -1
- package/build-module/composite/typeahead.js.map +1 -1
- package/build-module/composite/types.js.map +1 -1
- package/build-module/date-time/date/index.js +1 -2
- package/build-module/date-time/date/index.js.map +1 -1
- package/build-module/date-time/date/styles.js +31 -24
- package/build-module/date-time/date/styles.js.map +1 -1
- package/build-module/date-time/date/use-lilius/index.js +158 -0
- package/build-module/date-time/date/use-lilius/index.js.map +1 -0
- package/build-module/index.js +1 -0
- package/build-module/index.js.map +1 -1
- package/build-module/modal/index.js +12 -4
- package/build-module/modal/index.js.map +1 -1
- package/build-module/navigator/navigator-screen/component.js +4 -0
- package/build-module/navigator/navigator-screen/component.js.map +1 -1
- package/build-module/private-apis.js +0 -9
- package/build-module/private-apis.js.map +1 -1
- package/build-module/slot-fill/index.js +1 -0
- package/build-module/slot-fill/index.js.map +1 -1
- package/build-module/tabs/styles.js +3 -3
- package/build-module/tabs/styles.js.map +1 -1
- package/build-module/tabs/tablist.js +5 -4
- package/build-module/tabs/tablist.js.map +1 -1
- package/build-module/utils/element-rect.js +74 -105
- package/build-module/utils/element-rect.js.map +1 -1
- package/build-style/style-rtl.css +0 -4
- package/build-style/style.css +0 -4
- package/build-types/composite/context.d.ts.map +1 -1
- package/build-types/composite/index.d.ts +36 -24
- package/build-types/composite/index.d.ts.map +1 -1
- package/build-types/composite/legacy/index.d.ts +25 -2
- package/build-types/composite/legacy/index.d.ts.map +1 -1
- package/build-types/composite/legacy/stories/index.story.d.ts.map +1 -1
- package/build-types/composite/stories/index.story.d.ts +9 -9
- package/build-types/composite/stories/index.story.d.ts.map +1 -1
- package/build-types/composite/types.d.ts +11 -10
- package/build-types/composite/types.d.ts.map +1 -1
- package/build-types/date-time/date/index.d.ts +0 -3
- package/build-types/date-time/date/index.d.ts.map +1 -1
- package/build-types/date-time/date/styles.d.ts.map +1 -1
- package/build-types/date-time/date/test/use-lilius.d.ts +2 -0
- package/build-types/date-time/date/test/use-lilius.d.ts.map +1 -0
- package/build-types/date-time/date/use-lilius/index.d.ts +169 -0
- package/build-types/date-time/date/use-lilius/index.d.ts.map +1 -0
- package/build-types/index.d.ts +1 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/modal/index.d.ts.map +1 -1
- package/build-types/modal/stories/index.story.d.ts +3 -0
- package/build-types/modal/stories/index.story.d.ts.map +1 -1
- package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
- package/build-types/private-apis.d.ts.map +1 -1
- package/build-types/slot-fill/index.d.ts +3 -0
- package/build-types/slot-fill/index.d.ts.map +1 -1
- package/build-types/tabs/styles.d.ts.map +1 -1
- package/build-types/tabs/tablist.d.ts.map +1 -1
- package/build-types/utils/element-rect.d.ts +32 -74
- package/build-types/utils/element-rect.d.ts.map +1 -1
- package/package.json +19 -20
- package/src/composite/README.md +5 -24
- package/src/composite/{context.ts → context.tsx} +1 -2
- package/src/composite/group-label.tsx +1 -1
- package/src/composite/group.tsx +1 -1
- package/src/composite/hover.tsx +1 -1
- package/src/composite/index.tsx +17 -28
- package/src/composite/item.tsx +1 -1
- package/src/composite/legacy/index.tsx +72 -11
- package/src/composite/legacy/stories/index.story.tsx +2 -1
- package/src/composite/legacy/test/index.tsx +57 -1
- package/src/composite/row.tsx +1 -1
- package/src/composite/stories/index.story.tsx +185 -169
- package/src/composite/typeahead.tsx +1 -1
- package/src/composite/types.ts +13 -15
- package/src/date-time/date/index.tsx +1 -1
- package/src/date-time/date/styles.ts +31 -11
- package/src/date-time/date/test/use-lilius.ts +417 -0
- package/src/date-time/date/use-lilius/index.ts +394 -0
- package/src/index.ts +1 -0
- package/src/modal/index.tsx +16 -7
- package/src/modal/stories/index.story.tsx +8 -14
- package/src/modal/style.scss +0 -5
- package/src/navigator/navigator-screen/component.tsx +7 -0
- package/src/navigator/test/index.tsx +8 -0
- package/src/private-apis.ts +0 -9
- package/src/select-control/README.md +2 -2
- package/src/slot-fill/index.tsx +1 -0
- package/src/tabs/styles.ts +40 -11
- package/src/tabs/tablist.tsx +5 -4
- package/src/utils/element-rect.ts +93 -130
- package/tsconfig.tsbuildinfo +1 -1
- package/build/composite/store.js +0 -54
- package/build/composite/store.js.map +0 -1
- package/build-module/composite/store.js +0 -46
- package/build-module/composite/store.js.map +0 -1
- package/build-types/composite/store.d.ts +0 -25
- package/build-types/composite/store.d.ts.map +0 -1
- package/build-types/composite/stories/utils.d.ts +0 -29
- package/build-types/composite/stories/utils.d.ts.map +0 -1
- package/src/composite/store.ts +0 -46
- package/src/composite/stories/utils.tsx +0 -76
package/build/composite/store.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useCompositeStore = useCompositeStore;
|
|
7
|
-
var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
|
|
8
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
9
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
10
|
-
/**
|
|
11
|
-
* External dependencies
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Internal dependencies
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
// Props are already documented in TypeScript types.
|
|
19
|
-
// eslint-disable-next-line jsdoc/require-param
|
|
20
|
-
/**
|
|
21
|
-
* Creates a composite store.
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* ```jsx
|
|
25
|
-
* import { Composite, useCompositeStore } from '@wordpress/components';
|
|
26
|
-
*
|
|
27
|
-
* const store = useCompositeStore();
|
|
28
|
-
* <Composite store={store}>
|
|
29
|
-
* <Composite.Item>Item</Composite.Item>
|
|
30
|
-
* <Composite.Item>Item</Composite.Item>
|
|
31
|
-
* <Composite.Item>Item</Composite.Item>
|
|
32
|
-
* </Composite>
|
|
33
|
-
* ```
|
|
34
|
-
*/
|
|
35
|
-
function useCompositeStore({
|
|
36
|
-
focusLoop = false,
|
|
37
|
-
focusWrap = false,
|
|
38
|
-
focusShift = false,
|
|
39
|
-
virtualFocus = false,
|
|
40
|
-
orientation = 'both',
|
|
41
|
-
rtl = false,
|
|
42
|
-
...props
|
|
43
|
-
} = {}) {
|
|
44
|
-
return Ariakit.useCompositeStore({
|
|
45
|
-
focusLoop,
|
|
46
|
-
focusWrap,
|
|
47
|
-
focusShift,
|
|
48
|
-
virtualFocus,
|
|
49
|
-
orientation,
|
|
50
|
-
rtl,
|
|
51
|
-
...props
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
//# sourceMappingURL=store.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useCompositeStore","focusLoop","focusWrap","focusShift","virtualFocus","orientation","rtl","props"],"sources":["@wordpress/components/src/composite/store.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * Internal dependencies\n */\nimport type { CompositeStoreProps } from './types';\n\n// Props are already documented in TypeScript types.\n// eslint-disable-next-line jsdoc/require-param\n/**\n * Creates a composite store.\n *\n * @example\n * ```jsx\n * import { Composite, useCompositeStore } from '@wordpress/components';\n *\n * const store = useCompositeStore();\n * <Composite store={store}>\n * <Composite.Item>Item</Composite.Item>\n * <Composite.Item>Item</Composite.Item>\n * <Composite.Item>Item</Composite.Item>\n * </Composite>\n * ```\n */\nexport function useCompositeStore( {\n\tfocusLoop = false,\n\tfocusWrap = false,\n\tfocusShift = false,\n\tvirtualFocus = false,\n\torientation = 'both',\n\trtl = false,\n\t...props\n}: CompositeStoreProps = {} ) {\n\treturn Ariakit.useCompositeStore( {\n\t\tfocusLoop,\n\t\tfocusWrap,\n\t\tfocusShift,\n\t\tvirtualFocus,\n\t\torientation,\n\t\trtl,\n\t\t...props,\n\t} );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA0C,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAH1C;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASW,iBAAiBA,CAAE;EAClCC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,KAAK;EACjBC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,KAAK;EACpBC,WAAW,GAAG,MAAM;EACpBC,GAAG,GAAG,KAAK;EACX,GAAGC;AACiB,CAAC,GAAG,CAAC,CAAC,EAAG;EAC7B,OAAO9B,OAAO,CAACuB,iBAAiB,CAAE;IACjCC,SAAS;IACTC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,GAAG;IACH,GAAGC;EACJ,CAAE,CAAC;AACJ","ignoreList":[]}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import * as Ariakit from '@ariakit/react';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Internal dependencies
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
// Props are already documented in TypeScript types.
|
|
11
|
-
// eslint-disable-next-line jsdoc/require-param
|
|
12
|
-
/**
|
|
13
|
-
* Creates a composite store.
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* ```jsx
|
|
17
|
-
* import { Composite, useCompositeStore } from '@wordpress/components';
|
|
18
|
-
*
|
|
19
|
-
* const store = useCompositeStore();
|
|
20
|
-
* <Composite store={store}>
|
|
21
|
-
* <Composite.Item>Item</Composite.Item>
|
|
22
|
-
* <Composite.Item>Item</Composite.Item>
|
|
23
|
-
* <Composite.Item>Item</Composite.Item>
|
|
24
|
-
* </Composite>
|
|
25
|
-
* ```
|
|
26
|
-
*/
|
|
27
|
-
export function useCompositeStore({
|
|
28
|
-
focusLoop = false,
|
|
29
|
-
focusWrap = false,
|
|
30
|
-
focusShift = false,
|
|
31
|
-
virtualFocus = false,
|
|
32
|
-
orientation = 'both',
|
|
33
|
-
rtl = false,
|
|
34
|
-
...props
|
|
35
|
-
} = {}) {
|
|
36
|
-
return Ariakit.useCompositeStore({
|
|
37
|
-
focusLoop,
|
|
38
|
-
focusWrap,
|
|
39
|
-
focusShift,
|
|
40
|
-
virtualFocus,
|
|
41
|
-
orientation,
|
|
42
|
-
rtl,
|
|
43
|
-
...props
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
//# sourceMappingURL=store.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","useCompositeStore","focusLoop","focusWrap","focusShift","virtualFocus","orientation","rtl","props"],"sources":["@wordpress/components/src/composite/store.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * Internal dependencies\n */\nimport type { CompositeStoreProps } from './types';\n\n// Props are already documented in TypeScript types.\n// eslint-disable-next-line jsdoc/require-param\n/**\n * Creates a composite store.\n *\n * @example\n * ```jsx\n * import { Composite, useCompositeStore } from '@wordpress/components';\n *\n * const store = useCompositeStore();\n * <Composite store={store}>\n * <Composite.Item>Item</Composite.Item>\n * <Composite.Item>Item</Composite.Item>\n * <Composite.Item>Item</Composite.Item>\n * </Composite>\n * ```\n */\nexport function useCompositeStore( {\n\tfocusLoop = false,\n\tfocusWrap = false,\n\tfocusShift = false,\n\tvirtualFocus = false,\n\torientation = 'both',\n\trtl = false,\n\t...props\n}: CompositeStoreProps = {} ) {\n\treturn Ariakit.useCompositeStore( {\n\t\tfocusLoop,\n\t\tfocusWrap,\n\t\tfocusShift,\n\t\tvirtualFocus,\n\t\torientation,\n\t\trtl,\n\t\t...props,\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAE;EAClCC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,KAAK;EACjBC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,KAAK;EACpBC,WAAW,GAAG,MAAM;EACpBC,GAAG,GAAG,KAAK;EACX,GAAGC;AACiB,CAAC,GAAG,CAAC,CAAC,EAAG;EAC7B,OAAOR,OAAO,CAACC,iBAAiB,CAAE;IACjCC,SAAS;IACTC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,GAAG;IACH,GAAGC;EACJ,CAAE,CAAC;AACJ","ignoreList":[]}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import * as Ariakit from '@ariakit/react';
|
|
5
|
-
/**
|
|
6
|
-
* Internal dependencies
|
|
7
|
-
*/
|
|
8
|
-
import type { CompositeStoreProps } from './types';
|
|
9
|
-
/**
|
|
10
|
-
* Creates a composite store.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```jsx
|
|
14
|
-
* import { Composite, useCompositeStore } from '@wordpress/components';
|
|
15
|
-
*
|
|
16
|
-
* const store = useCompositeStore();
|
|
17
|
-
* <Composite store={store}>
|
|
18
|
-
* <Composite.Item>Item</Composite.Item>
|
|
19
|
-
* <Composite.Item>Item</Composite.Item>
|
|
20
|
-
* <Composite.Item>Item</Composite.Item>
|
|
21
|
-
* </Composite>
|
|
22
|
-
* ```
|
|
23
|
-
*/
|
|
24
|
-
export declare function useCompositeStore({ focusLoop, focusWrap, focusShift, virtualFocus, orientation, rtl, ...props }?: CompositeStoreProps): Ariakit.CompositeStore<import("@ariakit/react-core/cjs/composite/composite-store").CompositeStoreItem>;
|
|
25
|
-
//# sourceMappingURL=store.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/composite/store.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAE1C;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAiB,EACjB,SAAiB,EACjB,UAAkB,EAClB,YAAoB,EACpB,WAAoB,EACpB,GAAW,EACX,GAAG,KAAK,EACR,GAAE,mBAAwB,0GAU1B"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import type { StoryContext } from '@storybook/react';
|
|
5
|
-
/**
|
|
6
|
-
* Internal dependencies
|
|
7
|
-
*/
|
|
8
|
-
import type { CompositeStoreProps } from '../types';
|
|
9
|
-
/**
|
|
10
|
-
* Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
|
|
11
|
-
* role, which provides a single tab stop on the page and arrow key navigation
|
|
12
|
-
* through the focusable descendants.
|
|
13
|
-
*
|
|
14
|
-
* ```jsx
|
|
15
|
-
* import { Composite, useCompositeStore } from '@wordpress/components';
|
|
16
|
-
*
|
|
17
|
-
* const store = useCompositeStore();
|
|
18
|
-
* <Composite store={ store }>
|
|
19
|
-
* <Composite.Item>Item 1</Composite.Item>
|
|
20
|
-
* <Composite.Item>Item 2</Composite.Item>
|
|
21
|
-
* </Composite>
|
|
22
|
-
* ```
|
|
23
|
-
*/
|
|
24
|
-
export declare function UseCompositeStorePlaceholder(props: CompositeStoreProps): import("react").JSX.Element;
|
|
25
|
-
export declare namespace UseCompositeStorePlaceholder {
|
|
26
|
-
var displayName: string;
|
|
27
|
-
}
|
|
28
|
-
export declare function transform(code: string, context: StoryContext): string;
|
|
29
|
-
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/composite/stories/utils.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,4BAA4B,CAAE,KAAK,EAAE,mBAAmB,+BAWvE;yBAXe,4BAA4B;;;AAiB5C,wBAAgB,SAAS,CAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,UAiC7D"}
|
package/src/composite/store.ts
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import * as Ariakit from '@ariakit/react';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Internal dependencies
|
|
8
|
-
*/
|
|
9
|
-
import type { CompositeStoreProps } from './types';
|
|
10
|
-
|
|
11
|
-
// Props are already documented in TypeScript types.
|
|
12
|
-
// eslint-disable-next-line jsdoc/require-param
|
|
13
|
-
/**
|
|
14
|
-
* Creates a composite store.
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```jsx
|
|
18
|
-
* import { Composite, useCompositeStore } from '@wordpress/components';
|
|
19
|
-
*
|
|
20
|
-
* const store = useCompositeStore();
|
|
21
|
-
* <Composite store={store}>
|
|
22
|
-
* <Composite.Item>Item</Composite.Item>
|
|
23
|
-
* <Composite.Item>Item</Composite.Item>
|
|
24
|
-
* <Composite.Item>Item</Composite.Item>
|
|
25
|
-
* </Composite>
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
export function useCompositeStore( {
|
|
29
|
-
focusLoop = false,
|
|
30
|
-
focusWrap = false,
|
|
31
|
-
focusShift = false,
|
|
32
|
-
virtualFocus = false,
|
|
33
|
-
orientation = 'both',
|
|
34
|
-
rtl = false,
|
|
35
|
-
...props
|
|
36
|
-
}: CompositeStoreProps = {} ) {
|
|
37
|
-
return Ariakit.useCompositeStore( {
|
|
38
|
-
focusLoop,
|
|
39
|
-
focusWrap,
|
|
40
|
-
focusShift,
|
|
41
|
-
virtualFocus,
|
|
42
|
-
orientation,
|
|
43
|
-
rtl,
|
|
44
|
-
...props,
|
|
45
|
-
} );
|
|
46
|
-
}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import type { StoryContext } from '@storybook/react';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Internal dependencies
|
|
8
|
-
*/
|
|
9
|
-
import type { CompositeStoreProps } from '../types';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
|
|
13
|
-
* role, which provides a single tab stop on the page and arrow key navigation
|
|
14
|
-
* through the focusable descendants.
|
|
15
|
-
*
|
|
16
|
-
* ```jsx
|
|
17
|
-
* import { Composite, useCompositeStore } from '@wordpress/components';
|
|
18
|
-
*
|
|
19
|
-
* const store = useCompositeStore();
|
|
20
|
-
* <Composite store={ store }>
|
|
21
|
-
* <Composite.Item>Item 1</Composite.Item>
|
|
22
|
-
* <Composite.Item>Item 2</Composite.Item>
|
|
23
|
-
* </Composite>
|
|
24
|
-
* ```
|
|
25
|
-
*/
|
|
26
|
-
export function UseCompositeStorePlaceholder( props: CompositeStoreProps ) {
|
|
27
|
-
return (
|
|
28
|
-
<dl>
|
|
29
|
-
{ Object.entries( props ).map( ( [ name, value ] ) => (
|
|
30
|
-
<>
|
|
31
|
-
<dt>{ name }</dt>
|
|
32
|
-
<dd>{ JSON.stringify( value ) }</dd>
|
|
33
|
-
</>
|
|
34
|
-
) ) }
|
|
35
|
-
</dl>
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
UseCompositeStorePlaceholder.displayName = 'useCompositeStore';
|
|
39
|
-
|
|
40
|
-
// The output generated by Storybook for these components is
|
|
41
|
-
// messy, so we apply this transform to make it more useful
|
|
42
|
-
// for anyone reading the docs.
|
|
43
|
-
export function transform( code: string, context: StoryContext ) {
|
|
44
|
-
const storeConfig = ` ${ JSON.stringify( context.args, null, 2 ) } `;
|
|
45
|
-
const formattedStoreConfig = storeConfig.replace( ' {} ', '' );
|
|
46
|
-
return [
|
|
47
|
-
// Include a setup line, showing how to make use of
|
|
48
|
-
// `useCompositeStore` to convert store options into
|
|
49
|
-
// a composite store prop.
|
|
50
|
-
`const store = useCompositeStore(${ formattedStoreConfig });`,
|
|
51
|
-
'',
|
|
52
|
-
'return (',
|
|
53
|
-
' ' +
|
|
54
|
-
code
|
|
55
|
-
// The generated output includes a full dump of everything
|
|
56
|
-
// in the store; the reader probably isn't interested in
|
|
57
|
-
// what that looks like, so instead we drop all of that
|
|
58
|
-
// in favor of the store generated above.
|
|
59
|
-
.replaceAll( /store=\{\{[\s\S]*?\}\}/g, 'store={ store }' )
|
|
60
|
-
// Now we tidy the output by removing any unnecessary
|
|
61
|
-
// whitespace...
|
|
62
|
-
.replaceAll( /<Composite\w+[\s\S]*?>/g, ( match ) =>
|
|
63
|
-
match.replaceAll( /\s+\s/g, ' ' )
|
|
64
|
-
)
|
|
65
|
-
// ...including around <Composite*> children...
|
|
66
|
-
.replaceAll(
|
|
67
|
-
/>\s*(\w[\w ]*?)\s*<\//g,
|
|
68
|
-
( _, value ) => `>${ value }</`
|
|
69
|
-
)
|
|
70
|
-
// ...and inside JSX definitions.
|
|
71
|
-
.replaceAll( '} >', '}>' )
|
|
72
|
-
// Finally we indent everything to make it more readable.
|
|
73
|
-
.replaceAll( /\n/g, '\n ' ),
|
|
74
|
-
');',
|
|
75
|
-
].join( '\n' );
|
|
76
|
-
}
|