@astryxdesign/core 0.1.7-canary.0a6de96 → 0.1.7-canary.1055df2
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/README.md +30 -19
- package/dist/Avatar/Avatar.d.ts +10 -5
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +12 -8
- package/dist/Avatar/AvatarSizeContext.d.ts +1 -1
- package/dist/Avatar/AvatarSizeContext.js +1 -1
- package/dist/Avatar/AvatarStatusDot.d.ts +2 -2
- package/dist/Avatar/AvatarStatusDot.js +2 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts +2 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroup.js +2 -2
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +16 -14
- package/dist/Carousel/Carousel.d.ts +3 -2
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +32 -2
- package/dist/Chat/ChatMessage.d.ts +1 -1
- package/dist/Chat/ChatMessage.d.ts.map +1 -1
- package/dist/Chat/ChatMessage.js +1 -1
- package/dist/Collapsible/Collapsible.d.ts +11 -1
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +28 -3
- package/dist/Icon/Icon.d.ts +26 -1
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +34 -7
- package/dist/Outline/Outline.d.ts +69 -3
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +129 -26
- package/dist/Outline/useScrollSpy.d.ts +27 -7
- package/dist/Outline/useScrollSpy.d.ts.map +1 -1
- package/dist/Outline/useScrollSpy.js +202 -70
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +2 -2
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +2 -0
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +1 -1
- package/dist/Table/Table.d.ts +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/index.d.ts +2 -0
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +1 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +24 -2
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +18 -7
- package/dist/Table/plugins/tree/index.d.ts +5 -0
- package/dist/Table/plugins/tree/index.d.ts.map +1 -0
- package/dist/Table/plugins/tree/index.js +4 -0
- package/dist/Table/plugins/tree/useTableTreeData.d.ts +38 -0
- package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -0
- package/dist/Table/plugins/tree/useTableTreeData.js +358 -0
- package/dist/Table/plugins/tree/useTableTreeState.d.ts +51 -0
- package/dist/Table/plugins/tree/useTableTreeState.d.ts.map +1 -0
- package/dist/Table/plugins/tree/useTableTreeState.js +175 -0
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +6 -3
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +8 -1
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +5 -14
- package/dist/astryx.css +9 -3
- package/dist/astryx.umd.js +51 -51
- package/dist/astryx.umd.js.map +4 -4
- package/dist/theme/Theme.js +1 -1
- package/dist/theme/defineTheme.d.ts +1 -1
- package/dist/theme/defineTheme.js +1 -1
- package/docs.mjs +32 -461
- package/locales/en.json +200 -172
- package/locales/pseudo.json +21 -0
- package/package.json +3 -1
- package/scripts/postinstall.mjs +93 -0
- package/src/Avatar/Avatar.doc.mjs +6 -6
- package/src/Avatar/Avatar.tsx +16 -11
- package/src/Avatar/AvatarSizeContext.ts +1 -1
- package/src/Avatar/AvatarStatusDot.tsx +2 -2
- package/src/AvatarGroup/AvatarGroup.doc.mjs +1 -1
- package/src/AvatarGroup/AvatarGroup.test.tsx +17 -3
- package/src/AvatarGroup/AvatarGroup.tsx +3 -3
- package/src/AvatarGroup/AvatarGroupOverflow.doc.mjs +4 -4
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +21 -5
- package/src/Carousel/Carousel.doc.mjs +1 -0
- package/src/Carousel/Carousel.test.tsx +96 -1
- package/src/Carousel/Carousel.tsx +29 -2
- package/src/Chat/Chat.doc.mjs +1 -1
- package/src/Chat/ChatMessage.tsx +4 -2
- package/src/CheckboxInput/CheckboxInput.doc.mjs +1 -1
- package/src/Collapsible/Collapsible.doc.mjs +6 -0
- package/src/Collapsible/Collapsible.test.tsx +74 -0
- package/src/Collapsible/Collapsible.tsx +39 -1
- package/src/DropdownMenu/DropdownMenuItem.doc.mjs +1 -1
- package/src/Field/Field.doc.mjs +1 -1
- package/src/Field/FieldLabel.doc.mjs +1 -1
- package/src/Icon/Icon.doc.mjs +12 -0
- package/src/Icon/Icon.test.tsx +96 -0
- package/src/Icon/Icon.tsx +61 -6
- package/src/Item/Item.doc.mjs +1 -1
- package/src/NumberInput/NumberInput.doc.mjs +2 -2
- package/src/Outline/Outline.doc.mjs +123 -3
- package/src/Outline/Outline.test.tsx +735 -0
- package/src/Outline/Outline.tsx +184 -33
- package/src/Outline/useScrollSpy.ts +248 -72
- package/src/Selector/SelectorOption.doc.mjs +1 -1
- package/src/SideNav/SideNavItem.doc.mjs +2 -2
- package/src/Switch/Switch.doc.mjs +1 -1
- package/src/TabList/Tab.tsx +5 -1
- package/src/TabList/TabList.doc.mjs +3 -3
- package/src/TabList/TabList.test.tsx +66 -0
- package/src/TabList/TabList.tsx +8 -0
- package/src/TabList/TabMenu.tsx +4 -1
- package/src/Table/Table.doc.mjs +2 -0
- package/src/Table/Table.tsx +1 -1
- package/src/Table/index.ts +7 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +90 -1
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +37 -5
- package/src/Table/plugins/sortable/useTableSortable.test.tsx +95 -9
- package/src/Table/plugins/sortable/useTableSortable.tsx +23 -7
- package/src/Table/plugins/tree/index.ts +12 -0
- package/src/Table/plugins/tree/useTableTreeData-perf.test.tsx +163 -0
- package/src/Table/plugins/tree/useTableTreeData.test.tsx +594 -0
- package/src/Table/plugins/tree/useTableTreeData.tsx +495 -0
- package/src/Table/plugins/tree/useTableTreeState.test.tsx +636 -0
- package/src/Table/plugins/tree/useTableTreeState.tsx +253 -0
- package/src/Table/useBaseTablePlugins.ts +6 -2
- package/src/Table/useTableTreeData.doc.mjs +75 -0
- package/src/Table/useTableTreeState.doc.mjs +98 -0
- package/src/TextArea/TextArea.doc.mjs +1 -1
- package/src/TextInput/TextInput.doc.mjs +1 -1
- package/src/Toolbar/Toolbar.tsx +10 -3
- package/src/TreeList/TreeList.test.tsx +32 -1
- package/src/TreeList/TreeListItem.tsx +19 -10
- package/src/docs-script.test.mjs +18 -13
- package/src/postinstall.test.mjs +71 -0
- package/src/theme/Theme.doc.mjs +4 -4
- package/src/theme/Theme.tsx +1 -1
- package/src/theme/defineTheme.ts +1 -1
- package/dist/TreeList/treeListItem.markers.stylex.d.ts +0 -16
- package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +0 -1
- package/dist/TreeList/treeListItem.markers.stylex.js +0 -22
- package/src/TreeList/treeListItem.markers.stylex.ts +0 -20
package/README.md
CHANGED
|
@@ -2,18 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
Core UI components, theme system, and utilities for the Astryx design system. For project setup, see [Quick Start](#quick-start) below.
|
|
4
4
|
|
|
5
|
-
> **Building with an AI agent?**
|
|
5
|
+
> **Building with an AI agent?** Add the CLI, then run `init`:
|
|
6
|
+
>
|
|
7
|
+
> ```bash
|
|
8
|
+
> npm install -D @astryxdesign/cli # or: pnpm add -D / yarn add -D / bun add -d
|
|
9
|
+
> npx astryx init # resolves to the CLI you just installed
|
|
10
|
+
> ```
|
|
11
|
+
>
|
|
12
|
+
> `init` writes the Astryx component index into your `AGENTS.md`/`CLAUDE.md` so your agent discovers components, templates, and design tokens instead of guessing. Need a single command without installing? Use the scoped package directly — `npx @astryxdesign/cli <cmd>` (or `pnpm dlx`/`bunx @astryxdesign/cli`). Bare `npx astryx` only works once `@astryxdesign/cli` is a dependency; before that npm resolves it to an unrelated package. See [XDS CLI](#xds-cli).
|
|
6
13
|
|
|
7
14
|
## Component Docs
|
|
8
15
|
|
|
9
|
-
Look up any component's full API (props,
|
|
16
|
+
Look up any component's full API (props, variants, examples, best practices, and theming) via the Astryx CLI:
|
|
10
17
|
|
|
11
18
|
```bash
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
19
|
+
npx @astryxdesign/cli init # one-time: writes the component guide into AGENTS.md / CLAUDE.md
|
|
20
|
+
npx @astryxdesign/cli component Button # full docs for a component
|
|
21
|
+
npx @astryxdesign/cli component --list # list all components
|
|
15
22
|
```
|
|
16
23
|
|
|
24
|
+
> Use the scoped `@astryxdesign/cli` to run without installing; bare `npx astryx` only resolves once the CLI is a dependency.
|
|
25
|
+
|
|
17
26
|
## Page Layouts
|
|
18
27
|
|
|
19
28
|
Building a full page? Start with a template rather than composing from scratch.
|
|
@@ -25,9 +34,9 @@ global navigation.
|
|
|
25
34
|
Requires `@astryxdesign/cli` (`npm install -D @astryxdesign/cli`):
|
|
26
35
|
|
|
27
36
|
```bash
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
37
|
+
astryx template --list # browse all page and block templates
|
|
38
|
+
astryx template dashboard # emit full page source
|
|
39
|
+
astryx template settings --skeleton # layout skeleton with spatial annotations
|
|
31
40
|
```
|
|
32
41
|
|
|
33
42
|
## Astryx CLI
|
|
@@ -35,19 +44,21 @@ npx astryx template settings --skeleton # layout skeleton with spatial annotatio
|
|
|
35
44
|
The CLI (`@astryxdesign/cli`) provides additional tooling:
|
|
36
45
|
|
|
37
46
|
```bash
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
astryx --help # full listing of all commands
|
|
48
|
+
astryx component Button # full docs + related block templates
|
|
49
|
+
astryx docs # reference docs (principles, tokens, theming, styling)
|
|
50
|
+
astryx docs theme # theming guide (Theme, defineTheme, light/dark)
|
|
51
|
+
astryx docs tokens # spacing, color, radius, typography token reference
|
|
52
|
+
astryx init # initialize Astryx in your project
|
|
53
|
+
astryx theme build # build theme CSS for production
|
|
54
|
+
astryx swizzle Button # eject component source for customization
|
|
55
|
+
astryx upgrade --apply # run codemods to migrate between versions
|
|
56
|
+
astryx discover # discover external Astryx packages
|
|
57
|
+
astryx gap-report # report a missing capability
|
|
49
58
|
```
|
|
50
59
|
|
|
60
|
+
> Prefix these with your runner: `npx astryx …` / `pnpm exec astryx …` once the CLI is installed, or `npx @astryxdesign/cli …` to run without installing.
|
|
61
|
+
|
|
51
62
|
## Related Packages
|
|
52
63
|
|
|
53
64
|
| Package | Description |
|
package/dist/Avatar/Avatar.d.ts
CHANGED
|
@@ -13,9 +13,13 @@
|
|
|
13
13
|
import { type ReactNode } from 'react';
|
|
14
14
|
import type { BaseProps } from '../BaseProps';
|
|
15
15
|
/**
|
|
16
|
-
* Named size options
|
|
16
|
+
* Named size options.
|
|
17
|
+
*
|
|
18
|
+
* Avatar uses the same abbreviated scale as Icon (`xsm`/`sm`/`md`/`lg`/`xl`),
|
|
19
|
+
* but the values are larger because avatars align with media rather than
|
|
20
|
+
* glyphs. The tiers match EPS's avatar sizes.
|
|
17
21
|
*/
|
|
18
|
-
type AvatarNamedSize = '
|
|
22
|
+
type AvatarNamedSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
|
|
19
23
|
/**
|
|
20
24
|
* Numeric size options (in pixels)
|
|
21
25
|
*/
|
|
@@ -52,8 +56,9 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
|
52
56
|
*/
|
|
53
57
|
name?: string;
|
|
54
58
|
/**
|
|
55
|
-
* The size of the avatar.
|
|
56
|
-
*
|
|
59
|
+
* The size of the avatar. A named size (`xsm` 20px, `sm` 24px, `md` 36px,
|
|
60
|
+
* `lg` 48px, `xl` 128px) or a specific pixel value.
|
|
61
|
+
* @default 'md'
|
|
57
62
|
*/
|
|
58
63
|
size?: AvatarSize;
|
|
59
64
|
/**
|
|
@@ -75,7 +80,7 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
|
75
80
|
* @example
|
|
76
81
|
* ```
|
|
77
82
|
* <Avatar src="/user.jpg" name="John Doe" />
|
|
78
|
-
* <Avatar name="Jane Smith" size="
|
|
83
|
+
* <Avatar name="Jane Smith" size="xl" />
|
|
79
84
|
* <Avatar src="/user.jpg" status={<OnlineIndicator />} />
|
|
80
85
|
* ```
|
|
81
86
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAwFb;yBArGe,MAAM"}
|
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -50,7 +50,11 @@ const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
|
|
|
50
50
|
const INITIALS_FONT_SIZE_RATIO = 0.4;
|
|
51
51
|
|
|
52
52
|
/**
|
|
53
|
-
* Named size options
|
|
53
|
+
* Named size options.
|
|
54
|
+
*
|
|
55
|
+
* Avatar uses the same abbreviated scale as Icon (`xsm`/`sm`/`md`/`lg`/`xl`),
|
|
56
|
+
* but the values are larger because avatars align with media rather than
|
|
57
|
+
* glyphs. The tiers match EPS's avatar sizes.
|
|
54
58
|
*/
|
|
55
59
|
|
|
56
60
|
/**
|
|
@@ -69,15 +73,15 @@ export function resolveSize(size) {
|
|
|
69
73
|
return size;
|
|
70
74
|
}
|
|
71
75
|
switch (size) {
|
|
72
|
-
case '
|
|
76
|
+
case 'xsm':
|
|
73
77
|
return 20;
|
|
74
|
-
case '
|
|
78
|
+
case 'sm':
|
|
75
79
|
return 24;
|
|
76
|
-
case '
|
|
80
|
+
case 'md':
|
|
77
81
|
return 36;
|
|
78
|
-
case '
|
|
82
|
+
case 'lg':
|
|
79
83
|
return 48;
|
|
80
|
-
case '
|
|
84
|
+
case 'xl':
|
|
81
85
|
return 128;
|
|
82
86
|
}
|
|
83
87
|
}
|
|
@@ -223,7 +227,7 @@ function DefaultIcon({
|
|
|
223
227
|
* @example
|
|
224
228
|
* ```
|
|
225
229
|
* <Avatar src="/user.jpg" name="John Doe" />
|
|
226
|
-
* <Avatar name="Jane Smith" size="
|
|
230
|
+
* <Avatar name="Jane Smith" size="xl" />
|
|
227
231
|
* <Avatar src="/user.jpg" status={<OnlineIndicator />} />
|
|
228
232
|
* ```
|
|
229
233
|
*/
|
|
@@ -232,7 +236,7 @@ export function Avatar({
|
|
|
232
236
|
'data-testid': testId,
|
|
233
237
|
fallbackSrc,
|
|
234
238
|
name,
|
|
235
|
-
size = '
|
|
239
|
+
size = 'md',
|
|
236
240
|
src,
|
|
237
241
|
status,
|
|
238
242
|
xstyle,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Context that provides the resolved numeric avatar size (in pixels)
|
|
3
3
|
* to child components like AvatarStatusDot.
|
|
4
4
|
*
|
|
5
|
-
* Default value of 36 matches the default '
|
|
5
|
+
* Default value of 36 matches the default 'md' avatar size.
|
|
6
6
|
*/
|
|
7
7
|
export declare const AvatarSizeContext: import("react").Context<number>;
|
|
8
8
|
//# sourceMappingURL=AvatarSizeContext.d.ts.map
|
|
@@ -17,7 +17,7 @@ import { createContext } from 'react';
|
|
|
17
17
|
* Context that provides the resolved numeric avatar size (in pixels)
|
|
18
18
|
* to child components like AvatarStatusDot.
|
|
19
19
|
*
|
|
20
|
-
* Default value of 36 matches the default '
|
|
20
|
+
* Default value of 36 matches the default 'md' avatar size.
|
|
21
21
|
*/
|
|
22
22
|
export const AvatarSizeContext = /*#__PURE__*/createContext(36);
|
|
23
23
|
AvatarSizeContext.displayName = 'AvatarSizeContext';
|
|
@@ -76,12 +76,12 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
|
|
|
76
76
|
* ```
|
|
77
77
|
* <Avatar
|
|
78
78
|
* name="John Doe"
|
|
79
|
-
* size="
|
|
79
|
+
* size="lg"
|
|
80
80
|
* status={<AvatarStatusDot variant="success" label="Online" />}
|
|
81
81
|
* />
|
|
82
82
|
* <Avatar
|
|
83
83
|
* name="Jane Smith"
|
|
84
|
-
* size="
|
|
84
|
+
* size="xl"
|
|
85
85
|
* status={<AvatarStatusDot variant="success" label="Verified" icon={<CheckIcon />} />}
|
|
86
86
|
* />
|
|
87
87
|
* ```
|
|
@@ -148,12 +148,12 @@ const variantStyleMap = {
|
|
|
148
148
|
* ```
|
|
149
149
|
* <Avatar
|
|
150
150
|
* name="John Doe"
|
|
151
|
-
* size="
|
|
151
|
+
* size="lg"
|
|
152
152
|
* status={<AvatarStatusDot variant="success" label="Online" />}
|
|
153
153
|
* />
|
|
154
154
|
* <Avatar
|
|
155
155
|
* name="Jane Smith"
|
|
156
|
-
* size="
|
|
156
|
+
* size="xl"
|
|
157
157
|
* status={<AvatarStatusDot variant="success" label="Verified" icon={<CheckIcon />} />}
|
|
158
158
|
* />
|
|
159
159
|
* ```
|
|
@@ -27,7 +27,7 @@ export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
|
|
|
27
27
|
children: ReactNode;
|
|
28
28
|
/**
|
|
29
29
|
* Size applied to all avatars via context.
|
|
30
|
-
* @default '
|
|
30
|
+
* @default 'md'
|
|
31
31
|
*/
|
|
32
32
|
size?: AvatarSize;
|
|
33
33
|
/**
|
|
@@ -45,7 +45,7 @@ export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
|
|
|
45
45
|
*
|
|
46
46
|
* @example
|
|
47
47
|
* ```
|
|
48
|
-
* <AvatarGroup size="
|
|
48
|
+
* <AvatarGroup size="lg">
|
|
49
49
|
* {users.slice(0, 3).map(u => (
|
|
50
50
|
* <Avatar key={u.id} src={u.src} name={u.name} />
|
|
51
51
|
* ))}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AASvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,
|
|
1
|
+
{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AASvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CA6B9B;yBAvCe,WAAW"}
|
|
@@ -44,7 +44,7 @@ const styles = {
|
|
|
44
44
|
*
|
|
45
45
|
* @example
|
|
46
46
|
* ```
|
|
47
|
-
* <AvatarGroup size="
|
|
47
|
+
* <AvatarGroup size="lg">
|
|
48
48
|
* {users.slice(0, 3).map(u => (
|
|
49
49
|
* <Avatar key={u.id} src={u.src} name={u.name} />
|
|
50
50
|
* ))}
|
|
@@ -54,7 +54,7 @@ const styles = {
|
|
|
54
54
|
*/
|
|
55
55
|
export function AvatarGroup({
|
|
56
56
|
children,
|
|
57
|
-
size = '
|
|
57
|
+
size = 'md',
|
|
58
58
|
'data-testid': testId,
|
|
59
59
|
'aria-label': ariaLabelFromProps,
|
|
60
60
|
xstyle,
|
|
@@ -33,7 +33,7 @@ export interface AvatarGroupOverflowProps extends Omit<BaseProps<HTMLElement>, '
|
|
|
33
33
|
*
|
|
34
34
|
* @example
|
|
35
35
|
* ```
|
|
36
|
-
* <AvatarGroup size="
|
|
36
|
+
* <AvatarGroup size="lg">
|
|
37
37
|
* {users.slice(0, 3).map(u => (
|
|
38
38
|
* <Avatar key={u.id} src={u.src} name={u.name} />
|
|
39
39
|
* ))}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAwDtC;yBAjEe,mBAAmB"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
import React from 'react';
|
|
16
16
|
import * as stylex from '@stylexjs/stylex';
|
|
17
17
|
import "../theme/tokens.stylex.js";
|
|
18
|
-
import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
18
|
+
import { colorVars, typographyVars, fontWeightVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
19
19
|
import { mergeProps } from "../utils/index.js";
|
|
20
20
|
import { useAvatarGroup } from "./AvatarGroupContext.js";
|
|
21
21
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -37,13 +37,14 @@ const styles = {
|
|
|
37
37
|
kMzoRj: "xdh2fpr",
|
|
38
38
|
ksu8eU: "x1y0btm7",
|
|
39
39
|
kVAM5u: "x1touxvs",
|
|
40
|
-
kB7OPa: "
|
|
40
|
+
kB7OPa: "x9f619",
|
|
41
|
+
kg3NbH: "xf314gf",
|
|
41
42
|
kKwaWg: "x14bno8m",
|
|
42
43
|
$$css: true
|
|
43
44
|
},
|
|
44
45
|
button: {
|
|
45
46
|
kkrTdU: "x1ypdohk",
|
|
46
|
-
|
|
47
|
+
k8WAf4: "xt970qd",
|
|
47
48
|
kKwaWg: "x14bno8m xbfmc0r x1nocapi",
|
|
48
49
|
kI3sdo: "x1a2a7pz x17nn4n9",
|
|
49
50
|
kInvED: "x7s97pk",
|
|
@@ -55,26 +56,27 @@ const styles = {
|
|
|
55
56
|
}
|
|
56
57
|
};
|
|
57
58
|
const _temp = {
|
|
58
|
-
|
|
59
|
+
k7Eaqz: "xkj4a21",
|
|
60
|
+
kZKoxP: "x16ye13r",
|
|
59
61
|
"$$css": true
|
|
60
62
|
};
|
|
61
63
|
const _temp2 = {
|
|
64
|
+
kGuDYH: "xdmh292",
|
|
65
|
+
"$$css": true
|
|
66
|
+
};
|
|
67
|
+
const _temp3 = {
|
|
62
68
|
"--_avatar-group-overlap": "xlz5hwt",
|
|
63
69
|
"$$css": true
|
|
64
70
|
};
|
|
65
71
|
const dynamicStyles = {
|
|
66
|
-
size: s => [{
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
$$css: true
|
|
70
|
-
}, {
|
|
71
|
-
"--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s),
|
|
72
|
-
"--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s)
|
|
72
|
+
size: s => [_temp, {
|
|
73
|
+
"--x-minWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s + BORDER_WIDTH * 2),
|
|
74
|
+
"--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s + BORDER_WIDTH * 2)
|
|
73
75
|
}],
|
|
74
|
-
fontSize: s => [
|
|
76
|
+
fontSize: s => [_temp2, {
|
|
75
77
|
"--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s * OVERFLOW_FONT_RATIO)
|
|
76
78
|
}],
|
|
77
|
-
overlap: offset => [
|
|
79
|
+
overlap: offset => [_temp3, {
|
|
78
80
|
"--x---_avatar-group-overlap": `${offset}px` != null ? `${offset}px` : undefined
|
|
79
81
|
}]
|
|
80
82
|
};
|
|
@@ -85,7 +87,7 @@ const dynamicStyles = {
|
|
|
85
87
|
*
|
|
86
88
|
* @example
|
|
87
89
|
* ```
|
|
88
|
-
* <AvatarGroup size="
|
|
90
|
+
* <AvatarGroup size="lg">
|
|
89
91
|
* {users.slice(0, 3).map(u => (
|
|
90
92
|
* <Avatar key={u.id} src={u.src} name={u.name} />
|
|
91
93
|
* ))}
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
* @input Uses React, StyleX, useScrollOverflow, useLayer, Button, Icon, theme tokens
|
|
4
4
|
* @output Exports Carousel component
|
|
5
5
|
* @position Horizontal scroll container with fade-edge overflow indication,
|
|
6
|
-
* optional prev/next buttons on the top layer, scroll-snap,
|
|
7
|
-
* visual bleed allowance for child selection indicators
|
|
6
|
+
* optional prev/next buttons on the top layer, scroll-snap, a 1px
|
|
7
|
+
* visual bleed allowance for child selection indicators, and Shift + wheel
|
|
8
|
+
* mapping so mouse users can scroll horizontally.
|
|
8
9
|
*
|
|
9
10
|
* SYNC: When modified, update:
|
|
10
11
|
* - /packages/core/src/Carousel/index.ts (exports)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA6Kf;yBA3Le,QAAQ"}
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
* @input Uses React, StyleX, useScrollOverflow, useLayer, Button, Icon, theme tokens
|
|
8
8
|
* @output Exports Carousel component
|
|
9
9
|
* @position Horizontal scroll container with fade-edge overflow indication,
|
|
10
|
-
* optional prev/next buttons on the top layer, scroll-snap,
|
|
11
|
-
* visual bleed allowance for child selection indicators
|
|
10
|
+
* optional prev/next buttons on the top layer, scroll-snap, a 1px
|
|
11
|
+
* visual bleed allowance for child selection indicators, and Shift + wheel
|
|
12
|
+
* mapping so mouse users can scroll horizontally.
|
|
12
13
|
*
|
|
13
14
|
* SYNC: When modified, update:
|
|
14
15
|
* - /packages/core/src/Carousel/index.ts (exports)
|
|
@@ -234,6 +235,34 @@ export function Carousel({
|
|
|
234
235
|
scrollElRef.current = el;
|
|
235
236
|
scrollRef(el);
|
|
236
237
|
}, [scrollRef]);
|
|
238
|
+
|
|
239
|
+
// Map Shift + vertical wheel to horizontal scroll. Trackpads emit
|
|
240
|
+
// horizontal deltas natively, but a standard mouse only produces deltaY —
|
|
241
|
+
// so mouse users can't wheel-scroll a horizontal container. Shift + wheel
|
|
242
|
+
// is the long-established convention for horizontal scroll containers; we
|
|
243
|
+
// honor it by translating the vertical delta into a horizontal scroll.
|
|
244
|
+
//
|
|
245
|
+
// Only kicks in when Shift is held and the wheel is purely vertical
|
|
246
|
+
// (deltaX === 0), so native trackpad horizontal scrolling is untouched.
|
|
247
|
+
const handleWheel = useCallback(event => {
|
|
248
|
+
if (!event.shiftKey || event.deltaY === 0 || event.deltaX !== 0) {
|
|
249
|
+
return;
|
|
250
|
+
}
|
|
251
|
+
const el = scrollElRef.current;
|
|
252
|
+
if (!el) {
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
// Nothing to scroll horizontally — let the event fall through so the page
|
|
256
|
+
// can scroll as it normally would.
|
|
257
|
+
if (el.scrollWidth <= el.clientWidth) {
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
event.preventDefault();
|
|
261
|
+
el.scrollBy({
|
|
262
|
+
left: event.deltaY,
|
|
263
|
+
behavior: 'auto'
|
|
264
|
+
});
|
|
265
|
+
}, []);
|
|
237
266
|
const scrollBy = useCallback(direction => {
|
|
238
267
|
const el = scrollElRef.current;
|
|
239
268
|
if (!el) {
|
|
@@ -271,6 +300,7 @@ export function Carousel({
|
|
|
271
300
|
children: [/*#__PURE__*/_jsx("div", {
|
|
272
301
|
ref: composedRef,
|
|
273
302
|
tabIndex: 0,
|
|
303
|
+
onWheel: handleWheel,
|
|
274
304
|
...stylex.props(styles.scroller, gapStyles[gap], padding != null && paddingStyles[padding], hasSnap && styles.snap, fadeStyle),
|
|
275
305
|
children: Children.map(children, child => /*#__PURE__*/_jsx("div", {
|
|
276
306
|
...{
|
|
@@ -46,7 +46,7 @@ export interface ChatMessageProps extends BaseProps<HTMLElement> {
|
|
|
46
46
|
*
|
|
47
47
|
* @example
|
|
48
48
|
* ```
|
|
49
|
-
* <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="
|
|
49
|
+
* <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="md" />}>
|
|
50
50
|
* <ChatMessageBubble>Hello!</ChatMessageBubble>
|
|
51
51
|
* <ChatMessageMetadata timestamp="2:30 PM" />
|
|
52
52
|
* </ChatMessage>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAQrD,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+
|
|
1
|
+
{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAQrD,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA2FlB;yBAxGe,WAAW"}
|
package/dist/Chat/ChatMessage.js
CHANGED
|
@@ -122,7 +122,7 @@ const styles = {
|
|
|
122
122
|
*
|
|
123
123
|
* @example
|
|
124
124
|
* ```
|
|
125
|
-
* <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="
|
|
125
|
+
* <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="md" />}>
|
|
126
126
|
* <ChatMessageBubble>Hello!</ChatMessageBubble>
|
|
127
127
|
* <ChatMessageMetadata timestamp="2:30 PM" />
|
|
128
128
|
* </ChatMessage>
|
|
@@ -45,6 +45,16 @@ export interface CollapsibleProps extends BaseProps {
|
|
|
45
45
|
* Controlled open state. When provided, the component is fully controlled.
|
|
46
46
|
*/
|
|
47
47
|
isOpen?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Whether the collapsible is disabled. A disabled item can't be toggled —
|
|
50
|
+
* its trigger is non-interactive and dimmed. Following the system-wide
|
|
51
|
+
* disabled convention, the trigger uses `aria-disabled` (not the native
|
|
52
|
+
* `disabled` attribute) and drops out of the tab order, staying perceivable
|
|
53
|
+
* to assistive tech. The content stays in whatever open state it was;
|
|
54
|
+
* disabling doesn't collapse an already-open item.
|
|
55
|
+
* @default false
|
|
56
|
+
*/
|
|
57
|
+
isDisabled?: boolean;
|
|
48
58
|
/**
|
|
49
59
|
* Callback when the open state changes.
|
|
50
60
|
*/
|
|
@@ -96,7 +106,7 @@ export interface CollapsibleProps extends BaseProps {
|
|
|
96
106
|
* </CollapsibleGroup>
|
|
97
107
|
* ```
|
|
98
108
|
*/
|
|
99
|
-
export declare function Collapsible({ trigger, children, defaultIsOpen, isOpen: controlledIsOpen, onOpenChange, value, ref, xstyle, className, style, ...props }: CollapsibleProps): import("react").JSX.Element;
|
|
109
|
+
export declare function Collapsible({ trigger, children, defaultIsOpen, isOpen: controlledIsOpen, isDisabled, onOpenChange, value, ref, xstyle, className, style, ...props }: CollapsibleProps): import("react").JSX.Element;
|
|
100
110
|
export declare namespace Collapsible {
|
|
101
111
|
var displayName: string;
|
|
102
112
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkH5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA6FlB;yBA1Ge,WAAW"}
|
|
@@ -58,6 +58,11 @@ const styles = {
|
|
|
58
58
|
kInvED: "x1wfwxd8 x7s97pk",
|
|
59
59
|
$$css: true
|
|
60
60
|
},
|
|
61
|
+
triggerDisabled: {
|
|
62
|
+
kkrTdU: "x1h6gzvc",
|
|
63
|
+
kSiTet: "xbyyjgo",
|
|
64
|
+
$$css: true
|
|
65
|
+
},
|
|
61
66
|
contentHidden: {
|
|
62
67
|
k1xSpc: "x1s85apg",
|
|
63
68
|
$$css: true
|
|
@@ -160,6 +165,7 @@ export function Collapsible({
|
|
|
160
165
|
children,
|
|
161
166
|
defaultIsOpen,
|
|
162
167
|
isOpen: controlledIsOpen,
|
|
168
|
+
isDisabled = false,
|
|
163
169
|
onOpenChange,
|
|
164
170
|
value,
|
|
165
171
|
ref,
|
|
@@ -183,6 +189,17 @@ export function Collapsible({
|
|
|
183
189
|
isCollapsible: collapsibleConfig,
|
|
184
190
|
value
|
|
185
191
|
});
|
|
192
|
+
|
|
193
|
+
// Activation is blocked by this guard rather than the native `disabled`
|
|
194
|
+
// attribute, so the trigger keeps `aria-disabled` semantics and stays
|
|
195
|
+
// discoverable. A native `disabled` button would silently swallow events
|
|
196
|
+
// (e.g. a wrapping tooltip's hover) — the system-wide disabled convention.
|
|
197
|
+
const handleToggle = () => {
|
|
198
|
+
if (isDisabled) {
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
toggle();
|
|
202
|
+
};
|
|
186
203
|
const presentation = use(CollapsibleGroupPresentationContext);
|
|
187
204
|
const isDivided = presentation?.hasDividers ?? false;
|
|
188
205
|
const density = presentation?.density ?? null;
|
|
@@ -199,10 +216,18 @@ export function Collapsible({
|
|
|
199
216
|
...props,
|
|
200
217
|
children: [/*#__PURE__*/_jsxs("button", {
|
|
201
218
|
type: "button",
|
|
202
|
-
onClick:
|
|
219
|
+
onClick: handleToggle,
|
|
220
|
+
"aria-disabled": isDisabled || undefined,
|
|
203
221
|
"aria-expanded": isOpen,
|
|
204
|
-
"aria-controls": contentId
|
|
205
|
-
|
|
222
|
+
"aria-controls": contentId
|
|
223
|
+
// A disabled trigger drops out of the tab order so it isn't a silently
|
|
224
|
+
// dead tab stop; activation stays blocked by the handleToggle guard,
|
|
225
|
+
// and aria-disabled keeps the state perceivable to assistive tech —
|
|
226
|
+
// the system-wide disabled convention (never native `disabled`, which
|
|
227
|
+
// would swallow events like a wrapping tooltip's hover).
|
|
228
|
+
,
|
|
229
|
+
tabIndex: isDisabled ? -1 : undefined,
|
|
230
|
+
...stylex.props(styles.trigger, density != null && triggerDensity[density], isDisabled && styles.triggerDisabled),
|
|
206
231
|
children: [/*#__PURE__*/_jsx("span", {
|
|
207
232
|
...{
|
|
208
233
|
className: "x1b2iylo xwgcxoh"
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -140,6 +140,31 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
140
140
|
* @default 'md'
|
|
141
141
|
*/
|
|
142
142
|
size?: IconSize;
|
|
143
|
+
/**
|
|
144
|
+
* Accessible name for the icon. Set this only when the icon is MEANINGFUL on
|
|
145
|
+
* its own — a standalone status glyph or an icon-only indicator with no
|
|
146
|
+
* adjacent text conveying the same information. Providing it exposes the icon
|
|
147
|
+
* to assistive tech as `role="img"` with this string as the accessible name
|
|
148
|
+
* (via `aria-label`) and drops the default `aria-hidden="true"`.
|
|
149
|
+
*
|
|
150
|
+
* Omit it (the default) for decorative icons — the common case, e.g. an icon
|
|
151
|
+
* beside a text label — and the icon stays hidden from assistive tech
|
|
152
|
+
* (`aria-hidden="true"`). An empty string (`''`) is treated the same as
|
|
153
|
+
* omitting it (decorative), since an empty accessible name is meaningless.
|
|
154
|
+
*
|
|
155
|
+
* Don't set `label` when an interactive parent (Button, IconButton, link)
|
|
156
|
+
* already names the control — that produces a duplicate announcement.
|
|
157
|
+
*
|
|
158
|
+
* @example
|
|
159
|
+
* ```
|
|
160
|
+
* // Meaningful, standalone icon
|
|
161
|
+
* <Icon icon="success" label="Completed" />
|
|
162
|
+
*
|
|
163
|
+
* // Decorative icon (default) — omit label
|
|
164
|
+
* <Icon icon="search" />
|
|
165
|
+
* ```
|
|
166
|
+
*/
|
|
167
|
+
label?: string;
|
|
143
168
|
}
|
|
144
169
|
/**
|
|
145
170
|
* Renders an icon from the icon registry or a custom SVG component.
|
|
@@ -149,7 +174,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
149
174
|
* <Icon icon="close" size="md" color="primary" />
|
|
150
175
|
* ```
|
|
151
176
|
*/
|
|
152
|
-
export declare function Icon({ icon, color, size, ref, ...props }: IconProps): React.JSX.Element;
|
|
177
|
+
export declare function Icon({ icon, color, size, label, ref, ...props }: IconProps): React.JSX.Element;
|
|
153
178
|
export declare namespace Icon {
|
|
154
179
|
var displayName: string;
|
|
155
180
|
}
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBAkCX;yBAzCe,IAAI;;;AA4FpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|