@astryxdesign/core 0.1.7-canary.c0ff997 → 0.1.7-canary.cbfb48e
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 +4 -6
- package/dist/Avatar/Avatar.d.ts +5 -10
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +8 -12
- 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 +14 -16
- package/dist/Carousel/Carousel.d.ts +2 -3
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +2 -32
- 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/Icon/Icon.d.ts +1 -26
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +7 -34
- package/dist/Table/Table.d.ts +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +2 -24
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +7 -18
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +14 -5
- package/dist/TreeList/treeListItem.markers.stylex.d.ts +16 -0
- package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +1 -0
- package/dist/TreeList/treeListItem.markers.stylex.js +22 -0
- package/dist/astryx.css +2 -6
- package/dist/astryx.umd.js +44 -44
- package/dist/astryx.umd.js.map +4 -4
- package/docs.mjs +461 -32
- package/locales/en.json +172 -192
- package/locales/pseudo.json +0 -15
- package/package.json +1 -1
- package/src/Avatar/Avatar.doc.mjs +6 -6
- package/src/Avatar/Avatar.tsx +11 -16
- 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 +3 -17
- package/src/AvatarGroup/AvatarGroup.tsx +3 -3
- package/src/AvatarGroup/AvatarGroupOverflow.doc.mjs +4 -4
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +5 -21
- package/src/Carousel/Carousel.doc.mjs +0 -1
- package/src/Carousel/Carousel.test.tsx +1 -96
- package/src/Carousel/Carousel.tsx +2 -29
- package/src/Chat/Chat.doc.mjs +1 -1
- package/src/Chat/ChatMessage.tsx +2 -4
- package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs +3 -3
- package/src/Icon/Icon.doc.mjs +0 -12
- package/src/Icon/Icon.test.tsx +0 -96
- package/src/Icon/Icon.tsx +6 -61
- package/src/Item/Item.doc.mjs +1 -1
- package/src/TabList/TabList.doc.mjs +3 -3
- package/src/Table/Table.tsx +1 -1
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +1 -90
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +5 -37
- package/src/Table/plugins/sortable/useTableSortable.test.tsx +9 -95
- package/src/Table/plugins/sortable/useTableSortable.tsx +7 -23
- package/src/Table/useTableTreeData.doc.mjs +1 -1
- package/src/Table/useTableTreeState.doc.mjs +3 -3
- package/src/TreeList/TreeList.test.tsx +1 -32
- package/src/TreeList/TreeListItem.tsx +10 -19
- package/src/TreeList/treeListItem.markers.stylex.ts +20 -0
- package/src/docs-script.test.mjs +13 -18
package/README.md
CHANGED
|
@@ -13,16 +13,14 @@ Core UI components, theme system, and utilities for the Astryx design system. Fo
|
|
|
13
13
|
|
|
14
14
|
## Component Docs
|
|
15
15
|
|
|
16
|
-
Look up any component's full API (props,
|
|
16
|
+
Look up any component's full API (props, types, best practices, and theming):
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
node node_modules/@astryxdesign/core/docs.mjs Button # full docs for a component
|
|
20
|
+
node node_modules/@astryxdesign/core/docs.mjs --list # list all components
|
|
21
|
+
node node_modules/@astryxdesign/core/docs.mjs --list --brief # brief summaries
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
> Use the scoped `@astryxdesign/cli` to run without installing; bare `npx astryx` only resolves once the CLI is a dependency.
|
|
25
|
-
|
|
26
24
|
## Page Layouts
|
|
27
25
|
|
|
28
26
|
Building a full page? Start with a template rather than composing from scratch.
|
package/dist/Avatar/Avatar.d.ts
CHANGED
|
@@ -13,13 +13,9 @@
|
|
|
13
13
|
import { type ReactNode } from 'react';
|
|
14
14
|
import type { BaseProps } from '../BaseProps';
|
|
15
15
|
/**
|
|
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.
|
|
16
|
+
* Named size options
|
|
21
17
|
*/
|
|
22
|
-
type AvatarNamedSize = '
|
|
18
|
+
type AvatarNamedSize = 'tiny' | 'xsmall' | 'small' | 'medium' | 'large';
|
|
23
19
|
/**
|
|
24
20
|
* Numeric size options (in pixels)
|
|
25
21
|
*/
|
|
@@ -56,9 +52,8 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
|
56
52
|
*/
|
|
57
53
|
name?: string;
|
|
58
54
|
/**
|
|
59
|
-
* The size of the avatar.
|
|
60
|
-
*
|
|
61
|
-
* @default 'md'
|
|
55
|
+
* The size of the avatar.
|
|
56
|
+
* @default 'small'
|
|
62
57
|
*/
|
|
63
58
|
size?: AvatarSize;
|
|
64
59
|
/**
|
|
@@ -80,7 +75,7 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
|
80
75
|
* @example
|
|
81
76
|
* ```
|
|
82
77
|
* <Avatar src="/user.jpg" name="John Doe" />
|
|
83
|
-
* <Avatar name="Jane Smith" size="
|
|
78
|
+
* <Avatar name="Jane Smith" size="large" />
|
|
84
79
|
* <Avatar src="/user.jpg" status={<OnlineIndicator />} />
|
|
85
80
|
* ```
|
|
86
81
|
*/
|
|
@@ -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;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;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;;;OAGG;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,IAAc,EACd,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,11 +50,7 @@ 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
|
|
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.
|
|
53
|
+
* Named size options
|
|
58
54
|
*/
|
|
59
55
|
|
|
60
56
|
/**
|
|
@@ -73,15 +69,15 @@ export function resolveSize(size) {
|
|
|
73
69
|
return size;
|
|
74
70
|
}
|
|
75
71
|
switch (size) {
|
|
76
|
-
case '
|
|
72
|
+
case 'tiny':
|
|
77
73
|
return 20;
|
|
78
|
-
case '
|
|
74
|
+
case 'xsmall':
|
|
79
75
|
return 24;
|
|
80
|
-
case '
|
|
76
|
+
case 'small':
|
|
81
77
|
return 36;
|
|
82
|
-
case '
|
|
78
|
+
case 'medium':
|
|
83
79
|
return 48;
|
|
84
|
-
case '
|
|
80
|
+
case 'large':
|
|
85
81
|
return 128;
|
|
86
82
|
}
|
|
87
83
|
}
|
|
@@ -227,7 +223,7 @@ function DefaultIcon({
|
|
|
227
223
|
* @example
|
|
228
224
|
* ```
|
|
229
225
|
* <Avatar src="/user.jpg" name="John Doe" />
|
|
230
|
-
* <Avatar name="Jane Smith" size="
|
|
226
|
+
* <Avatar name="Jane Smith" size="large" />
|
|
231
227
|
* <Avatar src="/user.jpg" status={<OnlineIndicator />} />
|
|
232
228
|
* ```
|
|
233
229
|
*/
|
|
@@ -236,7 +232,7 @@ export function Avatar({
|
|
|
236
232
|
'data-testid': testId,
|
|
237
233
|
fallbackSrc,
|
|
238
234
|
name,
|
|
239
|
-
size = '
|
|
235
|
+
size = 'small',
|
|
240
236
|
src,
|
|
241
237
|
status,
|
|
242
238
|
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 'small' 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 'small' 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="medium"
|
|
80
80
|
* status={<AvatarStatusDot variant="success" label="Online" />}
|
|
81
81
|
* />
|
|
82
82
|
* <Avatar
|
|
83
83
|
* name="Jane Smith"
|
|
84
|
-
* size="
|
|
84
|
+
* size="large"
|
|
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="medium"
|
|
152
152
|
* status={<AvatarStatusDot variant="success" label="Online" />}
|
|
153
153
|
* />
|
|
154
154
|
* <Avatar
|
|
155
155
|
* name="Jane Smith"
|
|
156
|
-
* size="
|
|
156
|
+
* size="large"
|
|
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 'small'
|
|
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="medium">
|
|
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,IAAc,EACd,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="medium">
|
|
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 = 'small',
|
|
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="medium">
|
|
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;AAU5C,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;AA6DD;;;;;;;;;;;;;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
|
|
18
|
+
import { colorVars, typographyVars, fontWeightVars, radiusVars } 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,14 +37,13 @@ const styles = {
|
|
|
37
37
|
kMzoRj: "xdh2fpr",
|
|
38
38
|
ksu8eU: "x1y0btm7",
|
|
39
39
|
kVAM5u: "x1touxvs",
|
|
40
|
-
kB7OPa: "
|
|
41
|
-
kg3NbH: "xf314gf",
|
|
40
|
+
kB7OPa: "x1afcbsf",
|
|
42
41
|
kKwaWg: "x14bno8m",
|
|
43
42
|
$$css: true
|
|
44
43
|
},
|
|
45
44
|
button: {
|
|
46
45
|
kkrTdU: "x1ypdohk",
|
|
47
|
-
|
|
46
|
+
kmVPX3: "x1717udv",
|
|
48
47
|
kKwaWg: "x14bno8m xbfmc0r x1nocapi",
|
|
49
48
|
kI3sdo: "x1a2a7pz x17nn4n9",
|
|
50
49
|
kInvED: "x7s97pk",
|
|
@@ -56,27 +55,26 @@ const styles = {
|
|
|
56
55
|
}
|
|
57
56
|
};
|
|
58
57
|
const _temp = {
|
|
59
|
-
k7Eaqz: "xkj4a21",
|
|
60
|
-
kZKoxP: "x16ye13r",
|
|
61
|
-
"$$css": true
|
|
62
|
-
};
|
|
63
|
-
const _temp2 = {
|
|
64
58
|
kGuDYH: "xdmh292",
|
|
65
59
|
"$$css": true
|
|
66
60
|
};
|
|
67
|
-
const
|
|
61
|
+
const _temp2 = {
|
|
68
62
|
"--_avatar-group-overlap": "xlz5hwt",
|
|
69
63
|
"$$css": true
|
|
70
64
|
};
|
|
71
65
|
const dynamicStyles = {
|
|
72
|
-
size: s => [
|
|
73
|
-
|
|
74
|
-
|
|
66
|
+
size: s => [{
|
|
67
|
+
kzqmXN: s != null ? "x5lhr3w" : s,
|
|
68
|
+
kZKoxP: s != null ? "x16ye13r" : s,
|
|
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)
|
|
75
73
|
}],
|
|
76
|
-
fontSize: s => [
|
|
74
|
+
fontSize: s => [_temp, {
|
|
77
75
|
"--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s * OVERFLOW_FONT_RATIO)
|
|
78
76
|
}],
|
|
79
|
-
overlap: offset => [
|
|
77
|
+
overlap: offset => [_temp2, {
|
|
80
78
|
"--x---_avatar-group-overlap": `${offset}px` != null ? `${offset}px` : undefined
|
|
81
79
|
}]
|
|
82
80
|
};
|
|
@@ -87,7 +85,7 @@ const dynamicStyles = {
|
|
|
87
85
|
*
|
|
88
86
|
* @example
|
|
89
87
|
* ```
|
|
90
|
-
* <AvatarGroup size="
|
|
88
|
+
* <AvatarGroup size="medium">
|
|
91
89
|
* {users.slice(0, 3).map(u => (
|
|
92
90
|
* <Avatar key={u.id} src={u.src} name={u.name} />
|
|
93
91
|
* ))}
|
|
@@ -3,9 +3,8 @@
|
|
|
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, a 1px
|
|
7
|
-
* visual bleed allowance for child selection indicators
|
|
8
|
-
* mapping so mouse users can scroll horizontally.
|
|
6
|
+
* optional prev/next buttons on the top layer, scroll-snap, and a 1px
|
|
7
|
+
* visual bleed allowance for child selection indicators.
|
|
9
8
|
*
|
|
10
9
|
* SYNC: When modified, update:
|
|
11
10
|
* - /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;;;;;;;;;;;;GAYG;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,+BAmJf;yBAjKe,QAAQ"}
|
|
@@ -7,9 +7,8 @@
|
|
|
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, a 1px
|
|
11
|
-
* visual bleed allowance for child selection indicators
|
|
12
|
-
* mapping so mouse users can scroll horizontally.
|
|
10
|
+
* optional prev/next buttons on the top layer, scroll-snap, and a 1px
|
|
11
|
+
* visual bleed allowance for child selection indicators.
|
|
13
12
|
*
|
|
14
13
|
* SYNC: When modified, update:
|
|
15
14
|
* - /packages/core/src/Carousel/index.ts (exports)
|
|
@@ -235,34 +234,6 @@ export function Carousel({
|
|
|
235
234
|
scrollElRef.current = el;
|
|
236
235
|
scrollRef(el);
|
|
237
236
|
}, [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
|
-
}, []);
|
|
266
237
|
const scrollBy = useCallback(direction => {
|
|
267
238
|
const el = scrollElRef.current;
|
|
268
239
|
if (!el) {
|
|
@@ -300,7 +271,6 @@ export function Carousel({
|
|
|
300
271
|
children: [/*#__PURE__*/_jsx("div", {
|
|
301
272
|
ref: composedRef,
|
|
302
273
|
tabIndex: 0,
|
|
303
|
-
onWheel: handleWheel,
|
|
304
274
|
...stylex.props(styles.scroller, gapStyles[gap], padding != null && paddingStyles[padding], hasSnap && styles.snap, fadeStyle),
|
|
305
275
|
children: Children.map(children, child => /*#__PURE__*/_jsx("div", {
|
|
306
276
|
...{
|
|
@@ -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="small" />}>
|
|
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,+BAyFlB;yBAtGe,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="small" />}>
|
|
126
126
|
* <ChatMessageBubble>Hello!</ChatMessageBubble>
|
|
127
127
|
* <ChatMessageMetadata timestamp="2:30 PM" />
|
|
128
128
|
* </ChatMessage>
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -140,31 +140,6 @@ 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;
|
|
168
143
|
}
|
|
169
144
|
/**
|
|
170
145
|
* Renders an icon from the icon registry or a custom SVG component.
|
|
@@ -174,7 +149,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
174
149
|
* <Icon icon="close" size="md" color="primary" />
|
|
175
150
|
* ```
|
|
176
151
|
*/
|
|
177
|
-
export declare function Icon({ icon, color, size,
|
|
152
|
+
export declare function Icon({ icon, color, size, ref, ...props }: IconProps): React.JSX.Element;
|
|
178
153
|
export declare namespace Icon {
|
|
179
154
|
var displayName: string;
|
|
180
155
|
}
|
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;CACjB;AAMD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX;yBAhCe,IAAI;;;AAiFpB;;;;;;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"}
|
package/dist/Icon/Icon.js
CHANGED
|
@@ -205,26 +205,6 @@ const spanSizeStyles = {
|
|
|
205
205
|
* Extends SVGProps to allow passing additional SVG attributes (used when icon is a component).
|
|
206
206
|
*/
|
|
207
207
|
|
|
208
|
-
/**
|
|
209
|
-
* Derives the ARIA attributes for an icon from its `label` prop.
|
|
210
|
-
*
|
|
211
|
-
* - Non-empty `label` → meaningful image: `role="img"` + `aria-label`, and no
|
|
212
|
-
* `aria-hidden` (an `aria-hidden` element is removed from the accessibility
|
|
213
|
-
* tree, so its accessible name would be ignored).
|
|
214
|
-
* - Omitted or empty `label` → decorative default: `aria-hidden="true"`.
|
|
215
|
-
*
|
|
216
|
-
* The result is spread BEFORE `{...props}` in both render modes so an explicit
|
|
217
|
-
* `aria-hidden` / `role` / `aria-label` from the consumer always wins.
|
|
218
|
-
*/
|
|
219
|
-
function getIconA11yProps(label) {
|
|
220
|
-
return label != null && label !== '' ? {
|
|
221
|
-
role: 'img',
|
|
222
|
-
'aria-label': label
|
|
223
|
-
} : {
|
|
224
|
-
'aria-hidden': 'true'
|
|
225
|
-
};
|
|
226
|
-
}
|
|
227
|
-
|
|
228
208
|
// =============================================================================
|
|
229
209
|
// Component
|
|
230
210
|
// =============================================================================
|
|
@@ -241,21 +221,15 @@ export function Icon({
|
|
|
241
221
|
icon,
|
|
242
222
|
color = 'inherit',
|
|
243
223
|
size = 'md',
|
|
244
|
-
label,
|
|
245
224
|
ref,
|
|
246
225
|
...props
|
|
247
226
|
}) {
|
|
248
|
-
// Derive ARIA from `label`: decorative (aria-hidden) by default, or a
|
|
249
|
-
// meaningful image (role="img" + aria-label) when `label` is non-empty.
|
|
250
|
-
const a11yProps = getIconA11yProps(label);
|
|
251
|
-
|
|
252
227
|
// String mode: resolve from icon registry, wrap in styled span
|
|
253
228
|
if (typeof icon === 'string') {
|
|
254
229
|
return /*#__PURE__*/_jsx(IconFromRegistry, {
|
|
255
230
|
name: icon,
|
|
256
231
|
color: color,
|
|
257
232
|
size: size,
|
|
258
|
-
a11yProps: a11yProps,
|
|
259
233
|
spanProps: props
|
|
260
234
|
});
|
|
261
235
|
}
|
|
@@ -263,12 +237,8 @@ export function Icon({
|
|
|
263
237
|
// Component mode: render SVG component directly with ref forwarding
|
|
264
238
|
const IconComponent = icon;
|
|
265
239
|
return /*#__PURE__*/_jsx(IconComponent, {
|
|
266
|
-
ref: ref
|
|
267
|
-
|
|
268
|
-
// BEFORE {...props} so an explicit aria-hidden/role/aria-label from the
|
|
269
|
-
// consumer still wins as an escape hatch.
|
|
270
|
-
,
|
|
271
|
-
...a11yProps,
|
|
240
|
+
ref: ref,
|
|
241
|
+
"aria-hidden": "true",
|
|
272
242
|
...mergeProps(themeProps('icon', {
|
|
273
243
|
size,
|
|
274
244
|
color
|
|
@@ -293,7 +263,6 @@ function IconFromRegistry({
|
|
|
293
263
|
name,
|
|
294
264
|
color,
|
|
295
265
|
size,
|
|
296
|
-
a11yProps,
|
|
297
266
|
spanProps
|
|
298
267
|
}) {
|
|
299
268
|
const resolvedIcon = getIcon(name);
|
|
@@ -301,7 +270,11 @@ function IconFromRegistry({
|
|
|
301
270
|
return null;
|
|
302
271
|
}
|
|
303
272
|
return /*#__PURE__*/_jsx("span", {
|
|
304
|
-
|
|
273
|
+
// Decorative by default, but placed BEFORE the prop spread so consumers
|
|
274
|
+
// can override it (e.g. `aria-hidden={false}` + `role="img"` +
|
|
275
|
+
// `aria-label`) to expose a meaningful standalone icon. This matches
|
|
276
|
+
// component-mode Icon, which already sets aria-hidden before its spread.
|
|
277
|
+
"aria-hidden": "true",
|
|
305
278
|
...spanProps,
|
|
306
279
|
...mergeProps(themeProps('icon', {
|
|
307
280
|
size,
|
package/dist/Table/Table.d.ts
CHANGED
|
@@ -88,7 +88,7 @@ export interface TableProps<T extends Record<string, unknown>> extends Omit<Base
|
|
|
88
88
|
* columns={[
|
|
89
89
|
* { key: 'name', header: 'Name', width: proportional(1), renderCell: (u) => (
|
|
90
90
|
* <HStack gap={2} align="center">
|
|
91
|
-
* <Avatar name={u.name} size="
|
|
91
|
+
* <Avatar name={u.name} size="small" />
|
|
92
92
|
* <Text weight="semibold">{u.name}</Text>
|
|
93
93
|
* </HStack>
|
|
94
94
|
* )},
|
package/dist/Table/Table.js
CHANGED
|
@@ -186,7 +186,7 @@ function TableInner({
|
|
|
186
186
|
* columns={[
|
|
187
187
|
* { key: 'name', header: 'Name', width: proportional(1), renderCell: (u) => (
|
|
188
188
|
* <HStack gap={2} align="center">
|
|
189
|
-
* <Avatar name={u.name} size="
|
|
189
|
+
* <Avatar name={u.name} size="small" />
|
|
190
190
|
* <Text weight="semibold">{u.name}</Text>
|
|
191
191
|
* </HStack>
|
|
192
192
|
* )},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,WAAW,EAKZ,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,sEAAsE;IACtE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,mCAAmC;IACnC,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,qDAAqD;IACrD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,+CAA+C;IAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,qEAAqE;IACrE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,4DAA4D;IAC5D,eAAe,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3E,QAAQ,EACR,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,eAAe,GAChB,EAAE,+BAA+B,CAAC,CAAC,CAAC,GAAG,+BAA+B,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,WAAW,EAKZ,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,sEAAsE;IACtE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,mCAAmC;IACnC,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,qDAAqD;IACrD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,+CAA+C;IAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,qEAAqE;IACrE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,4DAA4D;IAC5D,eAAe,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3E,QAAQ,EACR,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,eAAe,GAChB,EAAE,+BAA+B,CAAC,CAAC,CAAC,GAAG,+BAA+B,CAAC,CAAC,CAAC,CAyHzE;AAuGD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAwOhB"}
|
|
@@ -72,19 +72,12 @@ export function useTableRowExpansionState({
|
|
|
72
72
|
const isExpandable = useCallback(item => getIsItemExpandable ? getIsItemExpandable(item) : getChildren(item).length > 0, [getIsItemExpandable, getChildren]);
|
|
73
73
|
const depthMap = useMemo(() => {
|
|
74
74
|
const map = new Map();
|
|
75
|
-
// Ancestor keys on the current walk path — guards against cyclic data.
|
|
76
|
-
const path = new Set();
|
|
77
75
|
function walk(items, depth) {
|
|
78
76
|
for (const item of items) {
|
|
79
77
|
const key = getRowKey(item);
|
|
80
|
-
if (path.has(key)) {
|
|
81
|
-
continue; // cyclic edge — skip
|
|
82
|
-
}
|
|
83
78
|
map.set(key, depth);
|
|
84
79
|
if (expandedKeys.has(key)) {
|
|
85
|
-
path.add(key);
|
|
86
80
|
walk(getChildren(item), depth + 1);
|
|
87
|
-
path.delete(key);
|
|
88
81
|
}
|
|
89
82
|
}
|
|
90
83
|
}
|
|
@@ -93,19 +86,12 @@ export function useTableRowExpansionState({
|
|
|
93
86
|
}, [baseData, getChildren, getRowKey, expandedKeys]);
|
|
94
87
|
const data = useMemo(() => {
|
|
95
88
|
const result = [];
|
|
96
|
-
// Ancestor keys on the current walk path — guards against cyclic data.
|
|
97
|
-
const path = new Set();
|
|
98
89
|
function walk(items) {
|
|
99
90
|
for (const item of items) {
|
|
100
|
-
const key = getRowKey(item);
|
|
101
|
-
if (path.has(key)) {
|
|
102
|
-
continue; // cyclic edge — skip
|
|
103
|
-
}
|
|
104
91
|
result.push(item);
|
|
92
|
+
const key = getRowKey(item);
|
|
105
93
|
if (expandedKeys.has(key)) {
|
|
106
|
-
path.add(key);
|
|
107
94
|
walk(getChildren(item));
|
|
108
|
-
path.delete(key);
|
|
109
95
|
}
|
|
110
96
|
}
|
|
111
97
|
}
|
|
@@ -116,19 +102,11 @@ export function useTableRowExpansionState({
|
|
|
116
102
|
// Every expandable key across the whole tree (drives expand-all).
|
|
117
103
|
const allExpandableKeys = useMemo(() => {
|
|
118
104
|
const keys = [];
|
|
119
|
-
// Ancestor keys on the current walk path — guards against cyclic data.
|
|
120
|
-
const path = new Set();
|
|
121
105
|
function walk(items) {
|
|
122
106
|
for (const item of items) {
|
|
123
|
-
const key = getRowKey(item);
|
|
124
|
-
if (path.has(key)) {
|
|
125
|
-
continue; // cyclic edge — skip
|
|
126
|
-
}
|
|
127
107
|
if (isExpandable(item)) {
|
|
128
|
-
keys.push(
|
|
129
|
-
path.add(key);
|
|
108
|
+
keys.push(getRowKey(item));
|
|
130
109
|
walk(getChildren(item));
|
|
131
|
-
path.delete(key);
|
|
132
110
|
}
|
|
133
111
|
}
|
|
134
112
|
}
|