@astryxdesign/core 0.5.0-canary.c050bc5 → 0.5.0-canary.cd1a2da
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/dist/Avatar/Avatar.d.ts +25 -1
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +43 -9
- package/dist/Avatar/index.d.ts +2 -2
- package/dist/Avatar/index.d.ts.map +1 -1
- package/dist/Avatar/index.js +1 -1
- package/dist/AvatarGroup/AvatarGroup.d.ts +9 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroup.js +5 -2
- package/dist/AvatarGroup/AvatarGroupContext.d.ts +2 -1
- package/dist/AvatarGroup/AvatarGroupContext.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +10 -6
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +7 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +9 -1
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +52 -3
- package/dist/HoverCard/useHoverCard.d.ts +11 -2
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +2 -0
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +5 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +3 -4
- package/dist/astryx.css +10 -4
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +4 -0
- package/package.json +2 -2
- package/src/Avatar/Avatar.doc.mjs +12 -2
- package/src/Avatar/Avatar.test.tsx +80 -0
- package/src/Avatar/Avatar.tsx +64 -14
- package/src/Avatar/index.ts +2 -2
- package/src/AvatarGroup/AvatarGroup.doc.mjs +8 -2
- package/src/AvatarGroup/AvatarGroup.test.tsx +24 -0
- package/src/AvatarGroup/AvatarGroup.tsx +12 -4
- package/src/AvatarGroup/AvatarGroupContext.ts +5 -3
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +10 -4
- package/src/CheckboxInput/CheckboxInput.doc.mjs +2 -0
- package/src/CheckboxInput/CheckboxInput.test.tsx +15 -0
- package/src/CheckboxInput/CheckboxInput.tsx +5 -0
- package/src/Field/FieldLabel.test.tsx +29 -0
- package/src/Field/FieldLabel.tsx +7 -0
- package/src/HoverCard/HoverCard.test.tsx +84 -4
- package/src/HoverCard/HoverCard.tsx +65 -3
- package/src/HoverCard/useHoverCard.tsx +15 -2
- package/src/Switch/Switch.doc.mjs +2 -0
- package/src/Switch/Switch.test.tsx +10 -0
- package/src/Switch/Switch.tsx +3 -0
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +1 -2
- package/src/theme/derivedVarRegistry.test.ts +1 -0
- package/src/theme/derivedVarRegistry.ts +1 -0
package/dist/Avatar/Avatar.d.ts
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
*/
|
|
17
17
|
import { type ReactNode } from 'react';
|
|
18
18
|
import type { BaseProps } from '../BaseProps';
|
|
19
|
+
import * as stylex from '@stylexjs/stylex';
|
|
19
20
|
import type { LinkComponentType } from '../Link/types';
|
|
20
21
|
/**
|
|
21
22
|
* Named size options.
|
|
@@ -33,10 +34,25 @@ type AvatarNumericSize = 16 | 20 | 24 | 32 | 36 | 40 | 48 | 60 | 64 | 72 | 96 |
|
|
|
33
34
|
* Avatar size - can be a named size or a specific pixel value
|
|
34
35
|
*/
|
|
35
36
|
export type AvatarSize = AvatarNamedSize | AvatarNumericSize;
|
|
37
|
+
/**
|
|
38
|
+
* Avatar shape options
|
|
39
|
+
*/
|
|
40
|
+
export type AvatarShape = 'circle' | 'rounded' | 'square';
|
|
36
41
|
/**
|
|
37
42
|
* Resolves named sizes to their numeric pixel values
|
|
38
43
|
*/
|
|
39
44
|
export declare function resolveSize(size: AvatarSize): number;
|
|
45
|
+
export declare const shapeStyles: Readonly<{
|
|
46
|
+
readonly circle: Readonly<{
|
|
47
|
+
readonly '--_avatar-radius': stylex.StyleXClassNameFor<"--_avatar-radius", "9999px">;
|
|
48
|
+
}>;
|
|
49
|
+
readonly rounded: Readonly<{
|
|
50
|
+
readonly '--_avatar-radius': stylex.StyleXClassNameFor<"--_avatar-radius", "8px">;
|
|
51
|
+
}>;
|
|
52
|
+
readonly square: Readonly<{
|
|
53
|
+
readonly '--_avatar-radius': stylex.StyleXClassNameFor<"--_avatar-radius", "0px">;
|
|
54
|
+
}>;
|
|
55
|
+
}>;
|
|
40
56
|
export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
41
57
|
/** Ref forwarded to the root element */
|
|
42
58
|
ref?: React.Ref<HTMLDivElement>;
|
|
@@ -69,6 +85,14 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
|
69
85
|
* @default 'md'
|
|
70
86
|
*/
|
|
71
87
|
size?: AvatarSize;
|
|
88
|
+
/**
|
|
89
|
+
* Shape variant of the avatar.
|
|
90
|
+
* - 'circle': Full circle (default)
|
|
91
|
+
* - 'rounded': Rounded square
|
|
92
|
+
* - 'square': Sharp square
|
|
93
|
+
* @default 'circle'
|
|
94
|
+
*/
|
|
95
|
+
shape?: AvatarShape;
|
|
72
96
|
/**
|
|
73
97
|
* The primary image source for the avatar.
|
|
74
98
|
*/
|
|
@@ -147,7 +171,7 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
|
147
171
|
* <Avatar src="/user.jpg" name="John Doe" onClick={() => openProfile()} />
|
|
148
172
|
* ```
|
|
149
173
|
*/
|
|
150
|
-
export declare function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, src, status, tooltip, href, as, target, rel, onClick, xstyle, className, style, ref, ...props }: AvatarProps): import("react").JSX.Element;
|
|
174
|
+
export declare function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, shape, src, status, tooltip, href, as, target, rel, onClick, xstyle, className, style, ref, ...props }: AvatarProps): import("react").JSX.Element;
|
|
151
175
|
export declare namespace Avatar {
|
|
152
176
|
var displayName: string;
|
|
153
177
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;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,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AASD,eAAO,MAAM,WAAW;;;;;;;;;;EAUtB,CAAC;AA6IH,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;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAwHD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,KAAgB,EAChB,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAsVb;yBA1We,MAAM"}
|
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -77,6 +77,10 @@ const INITIALS_FONT_SIZE_RATIO = 0.4;
|
|
|
77
77
|
* Avatar size - can be a named size or a specific pixel value
|
|
78
78
|
*/
|
|
79
79
|
|
|
80
|
+
/**
|
|
81
|
+
* Avatar shape options
|
|
82
|
+
*/
|
|
83
|
+
|
|
80
84
|
/**
|
|
81
85
|
* Resolves named sizes to their numeric pixel values
|
|
82
86
|
*/
|
|
@@ -98,6 +102,28 @@ export function resolveSize(size) {
|
|
|
98
102
|
}
|
|
99
103
|
}
|
|
100
104
|
|
|
105
|
+
// Sets one local custom property rather than `borderRadius` directly, so
|
|
106
|
+
// every clipping/ring surface that needs the shape's radius (the wrapper,
|
|
107
|
+
// the interactive focus ring, the content div that actually clips via
|
|
108
|
+
// `overflow: hidden`, and AvatarGroupOverflow's "+N" indicator) reads the
|
|
109
|
+
// same value instead of each hardcoding its own borderRadius independently.
|
|
110
|
+
// A theme override only has to reach this one property, not fight the
|
|
111
|
+
// per-surface StyleX class order to change the shape everywhere at once.
|
|
112
|
+
export const shapeStyles = {
|
|
113
|
+
circle: {
|
|
114
|
+
"--_avatar-radius": "xeincmr",
|
|
115
|
+
$$css: true
|
|
116
|
+
},
|
|
117
|
+
rounded: {
|
|
118
|
+
"--_avatar-radius": "xdarwi0",
|
|
119
|
+
$$css: true
|
|
120
|
+
},
|
|
121
|
+
square: {
|
|
122
|
+
"--_avatar-radius": "x877142",
|
|
123
|
+
$$css: true
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
|
|
101
127
|
/**
|
|
102
128
|
* Base styles for the avatar
|
|
103
129
|
* Uses a wrapper/content structure so status isn't clipped by overflow:hidden
|
|
@@ -107,7 +133,7 @@ const styles = {
|
|
|
107
133
|
kVAEAm: "x1n2onr6",
|
|
108
134
|
k1xSpc: "x3nfvp2",
|
|
109
135
|
kmuXW: "x2lah0s",
|
|
110
|
-
kaIpWk: "
|
|
136
|
+
kaIpWk: "xbc78cj",
|
|
111
137
|
$$css: true
|
|
112
138
|
},
|
|
113
139
|
fallback: {
|
|
@@ -138,7 +164,7 @@ const styles = {
|
|
|
138
164
|
kVVagm: "xln7xf2",
|
|
139
165
|
kybGjl: "x1hl2dhg",
|
|
140
166
|
kkrTdU: "x1ypdohk x16khyan",
|
|
141
|
-
kaIpWk: "
|
|
167
|
+
kaIpWk: "xbc78cj",
|
|
142
168
|
$$css: true
|
|
143
169
|
}
|
|
144
170
|
};
|
|
@@ -168,15 +194,20 @@ const dynamicStyles = {
|
|
|
168
194
|
fontSize: size => [_temp, {
|
|
169
195
|
"--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`${size * INITIALS_FONT_SIZE_RATIO}px`)
|
|
170
196
|
}],
|
|
171
|
-
|
|
197
|
+
statusPositionCircle: size => [_temp2, {
|
|
172
198
|
"--x-bottom": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * CIRCLE_EDGE_OFFSET_RATIO),
|
|
173
199
|
"--x-insetInlineEnd": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * CIRCLE_EDGE_OFFSET_RATIO)
|
|
174
|
-
}]
|
|
200
|
+
}],
|
|
201
|
+
statusPositionCorner: {
|
|
202
|
+
krVfgx: "x1ey2m1c",
|
|
203
|
+
kt4wiu: "xtijo5x",
|
|
204
|
+
k3aq6I: "xv8yid9 x10fxb7p",
|
|
205
|
+
$$css: true
|
|
206
|
+
}
|
|
175
207
|
};
|
|
176
208
|
const BORDER_WIDTH = 2;
|
|
177
209
|
const groupStyles = {
|
|
178
210
|
ring: {
|
|
179
|
-
kaIpWk: "xjspbzw",
|
|
180
211
|
kMzoRj: "xdh2fpr",
|
|
181
212
|
ksu8eU: "x1y0btm7",
|
|
182
213
|
kVAM5u: "x1touxvs",
|
|
@@ -333,6 +364,7 @@ export function Avatar({
|
|
|
333
364
|
fallbackSrc,
|
|
334
365
|
name,
|
|
335
366
|
size = 'md',
|
|
367
|
+
shape = 'circle',
|
|
336
368
|
src,
|
|
337
369
|
status,
|
|
338
370
|
tooltip = true,
|
|
@@ -384,6 +416,7 @@ export function Avatar({
|
|
|
384
416
|
} : undefined;
|
|
385
417
|
const avatarGroup = useAvatarGroup();
|
|
386
418
|
const resolvedSize = avatarGroup?.size ?? size;
|
|
419
|
+
const resolvedShape = avatarGroup?.shape ?? shape;
|
|
387
420
|
const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
|
|
388
421
|
|
|
389
422
|
// Resolve the tooltip content:
|
|
@@ -487,7 +520,7 @@ export function Avatar({
|
|
|
487
520
|
const visualContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
488
521
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
489
522
|
...{
|
|
490
|
-
className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d
|
|
523
|
+
className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xb3r6kr x87ps6o xbc78cj"
|
|
491
524
|
},
|
|
492
525
|
children: [showImage && /*#__PURE__*/_jsx("img", {
|
|
493
526
|
src: src,
|
|
@@ -519,7 +552,7 @@ export function Avatar({
|
|
|
519
552
|
})
|
|
520
553
|
})]
|
|
521
554
|
}), status && /*#__PURE__*/_jsx("div", {
|
|
522
|
-
...stylex.props(styles.status, dynamicStyles.
|
|
555
|
+
...stylex.props(styles.status, resolvedShape === 'circle' ? dynamicStyles.statusPositionCircle(numericSize) : dynamicStyles.statusPositionCorner),
|
|
523
556
|
children: status
|
|
524
557
|
})]
|
|
525
558
|
});
|
|
@@ -529,8 +562,9 @@ export function Avatar({
|
|
|
529
562
|
// tooltip tab-stop focus ring all live here so the interactive
|
|
530
563
|
// `<a>`/`<button>` and the static `<div>` carry the exact same box.
|
|
531
564
|
const rootStylexProps = mergeProps(themeProps('avatar', {
|
|
532
|
-
size: resolvedSize
|
|
533
|
-
|
|
565
|
+
size: resolvedSize,
|
|
566
|
+
shape: resolvedShape
|
|
567
|
+
}), focusOutlineProps.focusVisible(styles.wrapper, dynamicStyles.size(numericSize), isInteractive && styles.interactive, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), shapeStyles[resolvedShape], xstyle), className, style);
|
|
534
568
|
let rootElement;
|
|
535
569
|
|
|
536
570
|
// `props` is typed for the default `<div>` root (its event handlers are
|
package/dist/Avatar/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file index.ts
|
|
3
3
|
* @input Imports Avatar component and types from Avatar.tsx, AvatarStatusDot from AvatarStatusDot.tsx
|
|
4
|
-
* @output Exports Avatar, AvatarProps, AvatarSize, AvatarStatusDot, AvatarStatusDotProps, AvatarStatusDotVariant
|
|
4
|
+
* @output Exports Avatar, AvatarProps, AvatarSize, AvatarShape, resolveSize, AvatarStatusDot, AvatarStatusDotProps, AvatarStatusDotVariant
|
|
5
5
|
* @position Component entry point; re-exported by /packages/core/src/index.ts
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update this header and /packages/core/src/Avatar/Avatar.doc.mjs
|
|
@@ -32,7 +32,7 @@ export interface AvatarStatusDotVariantMap {
|
|
|
32
32
|
error: true;
|
|
33
33
|
}
|
|
34
34
|
export { Avatar, resolveSize } from './Avatar';
|
|
35
|
-
export type { AvatarProps, AvatarSize } from './Avatar';
|
|
35
|
+
export type { AvatarProps, AvatarSize, AvatarShape } from './Avatar';
|
|
36
36
|
export { AvatarStatusDot } from './AvatarStatusDot';
|
|
37
37
|
export type { AvatarStatusDotProps, AvatarStatusDotVariant, } from './AvatarStatusDot';
|
|
38
38
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Avatar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Avatar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AACnE,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC"}
|
package/dist/Avatar/index.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file index.ts
|
|
7
7
|
* @input Imports Avatar component and types from Avatar.tsx, AvatarStatusDot from AvatarStatusDot.tsx
|
|
8
|
-
* @output Exports Avatar, AvatarProps, AvatarSize, AvatarStatusDot, AvatarStatusDotProps, AvatarStatusDotVariant
|
|
8
|
+
* @output Exports Avatar, AvatarProps, AvatarSize, AvatarShape, resolveSize, AvatarStatusDot, AvatarStatusDotProps, AvatarStatusDotVariant
|
|
9
9
|
* @position Component entry point; re-exported by /packages/core/src/index.ts
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update this header and /packages/core/src/Avatar/Avatar.doc.mjs
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
*/
|
|
23
23
|
import { type ReactNode } from 'react';
|
|
24
24
|
import type { BaseProps } from '../BaseProps';
|
|
25
|
-
import { type AvatarSize } from '../Avatar';
|
|
25
|
+
import { type AvatarShape, type AvatarSize } from '../Avatar';
|
|
26
26
|
export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
|
|
27
27
|
/** Ref forwarded to the root element. */
|
|
28
28
|
ref?: React.Ref<HTMLDivElement>;
|
|
@@ -38,6 +38,13 @@ export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
|
|
|
38
38
|
* @default 'md'
|
|
39
39
|
*/
|
|
40
40
|
size?: AvatarSize;
|
|
41
|
+
/**
|
|
42
|
+
* Shape applied to all avatars via context, overriding each avatar's own
|
|
43
|
+
* `shape` prop so a group stays visually uniform. Also applied to the
|
|
44
|
+
* `AvatarGroupOverflow` "+N" indicator, so it matches the group.
|
|
45
|
+
* @default 'circle'
|
|
46
|
+
*/
|
|
47
|
+
shape?: AvatarShape;
|
|
41
48
|
/**
|
|
42
49
|
* Test ID for integration testing.
|
|
43
50
|
*/
|
|
@@ -61,7 +68,7 @@ export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
|
|
|
61
68
|
* </AvatarGroup>
|
|
62
69
|
* ```
|
|
63
70
|
*/
|
|
64
|
-
export declare function AvatarGroup({ children, size, 'data-testid': testId, 'aria-label': ariaLabelFromProps, 'aria-describedby': ariaDescribedByFromProps, onKeyDown, onFocus, xstyle, className, style, ref, ...props }: AvatarGroupProps): ReactNode;
|
|
71
|
+
export declare function AvatarGroup({ children, size, shape, 'data-testid': testId, 'aria-label': ariaLabelFromProps, 'aria-describedby': ariaDescribedByFromProps, onKeyDown, onFocus, xstyle, className, style, ref, ...props }: AvatarGroupProps): ReactNode;
|
|
65
72
|
export declare namespace AvatarGroup {
|
|
66
73
|
var displayName: string;
|
|
67
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAczE,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;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,KAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,kBAAkB,EAAE,wBAAwB,EAC5C,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAmE9B;yBAjFe,WAAW"}
|
|
@@ -66,6 +66,7 @@ const styles = {
|
|
|
66
66
|
export function AvatarGroup({
|
|
67
67
|
children,
|
|
68
68
|
size = 'md',
|
|
69
|
+
shape = 'circle',
|
|
69
70
|
'data-testid': testId,
|
|
70
71
|
'aria-label': ariaLabelFromProps,
|
|
71
72
|
'aria-describedby': ariaDescribedByFromProps,
|
|
@@ -83,9 +84,10 @@ export function AvatarGroup({
|
|
|
83
84
|
const overlap = Math.round(numericSize * OVERLAP_RATIO);
|
|
84
85
|
const contextValue = useMemo(() => ({
|
|
85
86
|
size,
|
|
87
|
+
shape,
|
|
86
88
|
overlap,
|
|
87
89
|
numericSize
|
|
88
|
-
}), [size, overlap, numericSize]);
|
|
90
|
+
}), [size, shape, overlap, numericSize]);
|
|
89
91
|
|
|
90
92
|
// The keyboard hint and roving tab stop only make sense once the group has
|
|
91
93
|
// interactive children. Detect their presence from the rendered DOM after
|
|
@@ -127,7 +129,8 @@ export function AvatarGroup({
|
|
|
127
129
|
onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
|
|
128
130
|
onFocus: composeEventHandlers(onFocus, handleFocus),
|
|
129
131
|
...mergeProps(themeProps('avatar-group', {
|
|
130
|
-
size
|
|
132
|
+
size,
|
|
133
|
+
shape
|
|
131
134
|
}), stylex.props(styles.root, xstyle), className, style),
|
|
132
135
|
children: [children, hasInteractiveItems && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
133
136
|
id: hintId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupContext.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupContext.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarGroupContext.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupContext.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AAEvD,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yDAE9B,CAAC;AAGF,wBAAgB,cAAc,IAAI,uBAAuB,GAAG,IAAI,CAE/D"}
|
|
@@ -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;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,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;
|
|
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;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,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;AAwFD;;;;;;;;;;;;;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,CAkEtC;yBA3Ee,mBAAmB"}
|
|
@@ -15,7 +15,8 @@
|
|
|
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, typeScaleVars, fontWeightVars,
|
|
18
|
+
import { colorVars, typographyVars, typeScaleVars, fontWeightVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
19
|
+
import { shapeStyles } from "../Avatar/Avatar.js";
|
|
19
20
|
import { mergeProps } from "../utils/index.js";
|
|
20
21
|
import { resolveSize } from "../Avatar/index.js";
|
|
21
22
|
import { useAvatarGroup } from "./AvatarGroupContext.js";
|
|
@@ -31,7 +32,7 @@ const styles = {
|
|
|
31
32
|
k1xSpc: "x3nfvp2",
|
|
32
33
|
kGNEyG: "x6s0dn4",
|
|
33
34
|
kjj79g: "xl56j7k",
|
|
34
|
-
kaIpWk: "
|
|
35
|
+
kaIpWk: "xbc78cj",
|
|
35
36
|
kWkggS: "x10xzikg",
|
|
36
37
|
kMwMTN: "xv1l7n4",
|
|
37
38
|
kMv6JI: "x9ynric",
|
|
@@ -109,6 +110,7 @@ export function AvatarGroupOverflow({
|
|
|
109
110
|
const t = useTranslator();
|
|
110
111
|
const group = useAvatarGroup();
|
|
111
112
|
const size = group?.size ?? 'md';
|
|
113
|
+
const shape = group?.shape ?? 'circle';
|
|
112
114
|
const numericSize = group?.numericSize ?? resolveSize('md');
|
|
113
115
|
const overlap = group?.overlap ?? 0;
|
|
114
116
|
|
|
@@ -129,8 +131,9 @@ export function AvatarGroupOverflow({
|
|
|
129
131
|
"aria-label": label,
|
|
130
132
|
"data-avatar-item": "",
|
|
131
133
|
...mergeProps(themeProps('avatar-group-overflow', {
|
|
132
|
-
size
|
|
133
|
-
|
|
134
|
+
size,
|
|
135
|
+
shape
|
|
136
|
+
}), focusOutlineProps.focusVisible(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), shapeStyles[shape], xstyle), className, style),
|
|
134
137
|
children: content
|
|
135
138
|
});
|
|
136
139
|
}
|
|
@@ -139,8 +142,9 @@ export function AvatarGroupOverflow({
|
|
|
139
142
|
...rest,
|
|
140
143
|
"aria-label": label,
|
|
141
144
|
...mergeProps(themeProps('avatar-group-overflow', {
|
|
142
|
-
size
|
|
143
|
-
|
|
145
|
+
size,
|
|
146
|
+
shape
|
|
147
|
+
}), stylex.props(styles.base, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), shapeStyles[shape], xstyle), className, style),
|
|
144
148
|
children: content
|
|
145
149
|
});
|
|
146
150
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAmFhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAmFhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BA6MpB;yBAtOe,aAAa"}
|
|
@@ -290,7 +290,13 @@ export function CheckboxInput({
|
|
|
290
290
|
...{
|
|
291
291
|
className: "x78zum5 xdt5ytf x1lsbc85"
|
|
292
292
|
},
|
|
293
|
-
children: /*#__PURE__*/_jsx(FieldLabel
|
|
293
|
+
children: /*#__PURE__*/_jsx(FieldLabel
|
|
294
|
+
// A checkbox's label shares a row with its control, unlike a form
|
|
295
|
+
// field's label above its input. Naming the label rather than the
|
|
296
|
+
// arrangement means a theme asks for the thing it wants, and the
|
|
297
|
+
// component that actually knows what this is says so.
|
|
298
|
+
, {
|
|
299
|
+
...themeProps('checkbox-label'),
|
|
294
300
|
label: label,
|
|
295
301
|
inputID: id,
|
|
296
302
|
isLabelHidden: isLabelHidden,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAgE5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAgE5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA6HjB;yBA/Ie,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -178,7 +178,15 @@ export function FieldLabel({
|
|
|
178
178
|
,
|
|
179
179
|
htmlFor: isGroupLabel ? undefined : inputID,
|
|
180
180
|
...rest,
|
|
181
|
-
...mergeProps(
|
|
181
|
+
...mergeProps(
|
|
182
|
+
// A control that knows what kind of label this is passes its own
|
|
183
|
+
// target down (CheckboxInput's `checkbox-label`, Switch's
|
|
184
|
+
// `switch-label`); it arrives as `className` and composes onto this
|
|
185
|
+
// one. The label itself does not describe its own placement — it
|
|
186
|
+
// cannot know it, and any encoding it guessed would be wrong for a
|
|
187
|
+
// caller that arranges labels differently (Field's
|
|
188
|
+
// `horizontal-labels`).
|
|
189
|
+
themeProps('field-label'), stylex.props(styles.label, isDisabled && styles.labelDisabled, isLabelHidden && styles.srOnly, xstyle), className, style),
|
|
182
190
|
children: labelContent
|
|
183
191
|
}), description && /*#__PURE__*/_jsx("span", {
|
|
184
192
|
ref: forwardsDescriptionClick ? descriptionRef : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAiBxB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAiBxB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAwK/B;yBA1Le,SAAS"}
|
|
@@ -115,8 +115,54 @@ export function HoverCard({
|
|
|
115
115
|
|
|
116
116
|
// Use combined ref for position + interaction
|
|
117
117
|
hoverCard.ref(firstChild);
|
|
118
|
+
if (label) {
|
|
119
|
+
// When named, the hover card is a dialog. The trigger should advertise the
|
|
120
|
+
// popup relationship with aria-haspopup/aria-expanded, not describe the
|
|
121
|
+
// trigger with the dialog's content (aria-describedby is for plain-text
|
|
122
|
+
// descriptions, not navigable regions). See #5049.
|
|
123
|
+
//
|
|
124
|
+
// Merge rather than overwrite: the trigger may already carry its own
|
|
125
|
+
// popup semantics (e.g. a menu button wrapped in a labelled HoverCard),
|
|
126
|
+
// so preserve the existing values and restore them on cleanup.
|
|
127
|
+
const existingHaspopup = firstChild.getAttribute('aria-haspopup');
|
|
128
|
+
const existingControls = firstChild.getAttribute('aria-controls');
|
|
129
|
+
const existingExpanded = firstChild.getAttribute('aria-expanded');
|
|
130
|
+
firstChild.setAttribute('aria-haspopup', 'dialog');
|
|
131
|
+
// Only point aria-controls at the layer while it is open and in the DOM.
|
|
132
|
+
// While closed, useLayer leaves only an inert <template> marker, so the
|
|
133
|
+
// id would reference nothing. DateInput gates it the same way. The
|
|
134
|
+
// trigger's own aria-controls (if any) is preserved either way.
|
|
135
|
+
if (hoverCard.isOpen) {
|
|
136
|
+
firstChild.setAttribute('aria-controls', mergeIds(existingControls, hoverCard.id) ?? '');
|
|
137
|
+
} else if (existingControls) {
|
|
138
|
+
firstChild.setAttribute('aria-controls', existingControls);
|
|
139
|
+
} else {
|
|
140
|
+
firstChild.removeAttribute('aria-controls');
|
|
141
|
+
}
|
|
142
|
+
firstChild.setAttribute('aria-expanded', String(hoverCard.isOpen));
|
|
143
|
+
return () => {
|
|
144
|
+
hoverCard.ref(null);
|
|
145
|
+
if (existingHaspopup) {
|
|
146
|
+
firstChild.setAttribute('aria-haspopup', existingHaspopup);
|
|
147
|
+
} else {
|
|
148
|
+
firstChild.removeAttribute('aria-haspopup');
|
|
149
|
+
}
|
|
150
|
+
if (existingControls) {
|
|
151
|
+
firstChild.setAttribute('aria-controls', existingControls);
|
|
152
|
+
} else {
|
|
153
|
+
firstChild.removeAttribute('aria-controls');
|
|
154
|
+
}
|
|
155
|
+
if (existingExpanded) {
|
|
156
|
+
firstChild.setAttribute('aria-expanded', existingExpanded);
|
|
157
|
+
} else {
|
|
158
|
+
firstChild.removeAttribute('aria-expanded');
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
}
|
|
118
162
|
|
|
119
|
-
//
|
|
163
|
+
// Unnamed fallback: the popup remains role="group", which is not a dialog,
|
|
164
|
+
// so keep the previous description relationship until a naming decision is
|
|
165
|
+
// made for the no-label case (tracked in #5049).
|
|
120
166
|
const existingDescribedBy = firstChild.getAttribute('aria-describedby');
|
|
121
167
|
firstChild.setAttribute('aria-describedby', mergeIds(existingDescribedBy, hoverCard.describedBy) ?? '');
|
|
122
168
|
return () => {
|
|
@@ -127,7 +173,7 @@ export function HoverCard({
|
|
|
127
173
|
firstChild.removeAttribute('aria-describedby');
|
|
128
174
|
}
|
|
129
175
|
};
|
|
130
|
-
}, [textOnly, hoverCard.ref, hoverCard.describedBy]);
|
|
176
|
+
}, [textOnly, label, hoverCard.ref, hoverCard.id, hoverCard.isOpen, hoverCard.describedBy]);
|
|
131
177
|
|
|
132
178
|
// While closed, useLayer leaves only an inert <template> marker at this JSX
|
|
133
179
|
// position. When the card needs to open, it uses that marker to keep the
|
|
@@ -145,7 +191,10 @@ export function HoverCard({
|
|
|
145
191
|
children: [/*#__PURE__*/_jsx("span", {
|
|
146
192
|
ref: hoverCard.ref,
|
|
147
193
|
tabIndex: 0,
|
|
148
|
-
"aria-
|
|
194
|
+
"aria-haspopup": label ? 'dialog' : undefined,
|
|
195
|
+
"aria-controls": label && hoverCard.isOpen ? hoverCard.id : undefined,
|
|
196
|
+
"aria-expanded": label ? hoverCard.isOpen : undefined,
|
|
197
|
+
"aria-describedby": label ? undefined : hoverCard.describedBy,
|
|
149
198
|
...{
|
|
150
199
|
0: {
|
|
151
200
|
className: "xt0psk2"
|
|
@@ -124,10 +124,19 @@ export interface HoverCardReturn {
|
|
|
124
124
|
*/
|
|
125
125
|
anchorId: string;
|
|
126
126
|
/**
|
|
127
|
-
* ID for
|
|
128
|
-
*
|
|
127
|
+
* Unique ID for the hover card container.
|
|
128
|
+
* Useful for `aria-controls` or `aria-owns` on the trigger.
|
|
129
|
+
*/
|
|
130
|
+
id: string;
|
|
131
|
+
/**
|
|
132
|
+
* Deprecated alias of `id`. Kept for backwards compatibility; prefer `id`.
|
|
129
133
|
*/
|
|
130
134
|
describedBy: string;
|
|
135
|
+
/**
|
|
136
|
+
* Whether the hover card is currently open.
|
|
137
|
+
* Useful for driving `aria-expanded` on the trigger.
|
|
138
|
+
*/
|
|
139
|
+
isOpen: boolean;
|
|
131
140
|
/**
|
|
132
141
|
* Render function for hover card content.
|
|
133
142
|
* Returns anchor-positioned popover element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA6BlC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,
|
|
1
|
+
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA6BlC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CA6a5E"}
|
|
@@ -425,7 +425,9 @@ export function useHoverCard(options = {}) {
|
|
|
425
425
|
positionRef: layer.ref,
|
|
426
426
|
interactionRef,
|
|
427
427
|
anchorId: layer.anchorId,
|
|
428
|
+
id: layer.id,
|
|
428
429
|
describedBy: layer.id,
|
|
430
|
+
isOpen: layer.isOpen,
|
|
429
431
|
renderHoverCard,
|
|
430
432
|
show: layer.show,
|
|
431
433
|
hide: layer.hide
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
package/dist/Switch/Switch.js
CHANGED
|
@@ -381,7 +381,11 @@ export function Switch({
|
|
|
381
381
|
});
|
|
382
382
|
const labelElement = /*#__PURE__*/_jsx("div", {
|
|
383
383
|
...stylex.props(styles.labelWrapper, labelWrapperSizeStyles[size]),
|
|
384
|
-
children: /*#__PURE__*/_jsx(FieldLabel
|
|
384
|
+
children: /*#__PURE__*/_jsx(FieldLabel
|
|
385
|
+
// See CheckboxInput: the control names its own label target rather
|
|
386
|
+
// than the label guessing at its placement.
|
|
387
|
+
, {
|
|
388
|
+
...themeProps('switch-label'),
|
|
385
389
|
label: label,
|
|
386
390
|
inputID: id,
|
|
387
391
|
isLabelHidden: isLabelHidden,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/useTableStickyColumns.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB;;;;;;;;;GASG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"useTableStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/useTableStickyColumns.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB;;;;;;;;;GASG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAiOD,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,MAAM,EAAE,2BAA2B,GAClC,WAAW,CAAC,CAAC,CAAC,CA2JhB"}
|
|
@@ -174,8 +174,7 @@ const stickyStyles = {
|
|
|
174
174
|
// ::after gradient strip just past the pinned edge (visible thanks to the cell's
|
|
175
175
|
// overflow: visible). Opacity is gated by the scroll-state variable above.
|
|
176
176
|
const SHADOW_WIDTH = '6px';
|
|
177
|
-
|
|
178
|
-
const SHADOW_TINT = 'light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.32))';
|
|
177
|
+
const SHADOW_TINT = colorVars['--color-shadow'];
|
|
179
178
|
const shadowStyles = {
|
|
180
179
|
start: {
|
|
181
180
|
k5JduY: "x1s928wv",
|
|
@@ -188,7 +187,7 @@ const shadowStyles = {
|
|
|
188
187
|
kloYau: "x2q1x1w",
|
|
189
188
|
kFJxch: "x17s1k9h",
|
|
190
189
|
kypkao: "x1sggmfs",
|
|
191
|
-
kNctxI: "
|
|
190
|
+
kNctxI: "x1ppu1g5 xk7vujl",
|
|
192
191
|
$$css: true
|
|
193
192
|
},
|
|
194
193
|
end: {
|
|
@@ -202,7 +201,7 @@ const shadowStyles = {
|
|
|
202
201
|
kloYau: "x2q1x1w",
|
|
203
202
|
kFJxch: "x17s1k9h",
|
|
204
203
|
kypkao: "x1c2idit",
|
|
205
|
-
kNctxI: "
|
|
204
|
+
kNctxI: "xccdyz0 xlptwl5",
|
|
206
205
|
$$css: true
|
|
207
206
|
}
|
|
208
207
|
};
|