@astryxdesign/core 0.1.4-canary.cfe8ece → 0.1.4-canary.d209405
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/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +8 -1
- package/dist/Calendar/Calendar.js +5 -1
- package/dist/Card/Card.d.ts +4 -2
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +15 -7
- package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +3 -1
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +26 -3
- package/dist/InputGroup/InputGroup.js +2 -2
- package/dist/Item/Item.js +1 -1
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +39 -21
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +34 -7
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +2 -1
- package/dist/astryx.css +6 -0
- package/dist/astryx.umd.js +30 -30
- package/dist/astryx.umd.js.map +3 -3
- package/package.json +1 -1
- package/src/Banner/Banner.test.tsx +38 -0
- package/src/Banner/Banner.tsx +8 -1
- package/src/Calendar/Calendar.test.tsx +18 -0
- package/src/Calendar/Calendar.tsx +3 -0
- package/src/Card/Card.tsx +16 -6
- package/src/CheckboxInput/CheckboxInput.test.tsx +71 -4
- package/src/CheckboxInput/CheckboxInput.tsx +2 -0
- package/src/ClickableCard/ClickableCard.tsx +45 -2
- package/src/Field/FieldLabel.test.tsx +2 -2
- package/src/Icon/Icon.test.tsx +20 -20
- package/src/InputGroup/InputGroup.tsx +2 -2
- package/src/Item/Item.tsx +1 -1
- package/src/NumberInput/NumberInput.test.tsx +3 -3
- package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
- package/src/PowerSearch/PowerSearch.test.tsx +109 -1
- package/src/PowerSearch/PowerSearch.tsx +37 -16
- package/src/TabList/TabList.test.tsx +185 -1
- package/src/TabList/TabMenu.tsx +45 -9
- package/src/Table/BaseTable.tsx +2 -1
- package/src/TextArea/TextArea.test.tsx +3 -3
- package/src/TextInput/TextInput.test.tsx +3 -3
- package/src/__tests__/TestIcon.tsx +26 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCAiIb;yBAjJe,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
* - /apps/storybook/stories/Banner.stories.tsx (storybook stories)
|
|
31
31
|
* - /packages/cli/templates/blocks/components/Banner/ (showcase blocks)
|
|
32
32
|
*/
|
|
33
|
-
import { useState } from 'react';
|
|
33
|
+
import { useId, useState } from 'react';
|
|
34
34
|
import * as stylex from '@stylexjs/stylex';
|
|
35
35
|
import { Button } from "../Button/index.js";
|
|
36
36
|
import { Icon } from "../Icon/index.js";
|
|
@@ -249,6 +249,11 @@ export function Banner({
|
|
|
249
249
|
}) {
|
|
250
250
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
251
251
|
const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
|
|
252
|
+
// Links the expand/collapse toggle to the content region it shows/hides so
|
|
253
|
+
// assistive tech can move from the button to its controlled content
|
|
254
|
+
// (disclosure pattern). The region is conditionally rendered, so aria-controls
|
|
255
|
+
// below is set only while it's mounted to avoid a dangling reference.
|
|
256
|
+
const contentId = useId();
|
|
252
257
|
const defaultIconName = defaultIconNames[status];
|
|
253
258
|
const role = statusRole[status];
|
|
254
259
|
const iconColor = statusIconColor[status];
|
|
@@ -333,6 +338,7 @@ export function Banner({
|
|
|
333
338
|
}),
|
|
334
339
|
onClick: handleToggleExpand,
|
|
335
340
|
"aria-expanded": isExpanded,
|
|
341
|
+
"aria-controls": showContent ? contentId : undefined,
|
|
336
342
|
isIconOnly: true
|
|
337
343
|
}), isDismissable && /*#__PURE__*/_jsx(Button, {
|
|
338
344
|
variant: "ghost",
|
|
@@ -349,6 +355,7 @@ export function Banner({
|
|
|
349
355
|
})]
|
|
350
356
|
})]
|
|
351
357
|
}), showContent && /*#__PURE__*/_jsx("div", {
|
|
358
|
+
id: contentId,
|
|
352
359
|
...mergeProps(themeProps('banner-content', {
|
|
353
360
|
container,
|
|
354
361
|
status
|
|
@@ -660,7 +660,11 @@ function DayCell({
|
|
|
660
660
|
type: "button",
|
|
661
661
|
"data-date": day.iso,
|
|
662
662
|
"aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
|
|
663
|
-
"aria-disabled": state.effectivelyDisabled || undefined
|
|
663
|
+
"aria-disabled": state.effectivelyDisabled || undefined
|
|
664
|
+
// Mark today's cell programmatically (APG date-picker pattern), not just
|
|
665
|
+
// visually, so screen-reader users can identify the current date.
|
|
666
|
+
,
|
|
667
|
+
"aria-current": state.isToday ? 'date' : undefined,
|
|
664
668
|
disabled: isDisabled
|
|
665
669
|
// Initial roving tab-stop seed; useGridFocus owns it after mount.
|
|
666
670
|
,
|
package/dist/Card/Card.d.ts
CHANGED
|
@@ -21,8 +21,10 @@ import type { BaseProps } from '../BaseProps';
|
|
|
21
21
|
* - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
|
|
22
22
|
* Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
|
|
23
23
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
24
|
+
* Only `default` draws a visible border. Its border width is subtracted from
|
|
25
|
+
* the padding so the total inset (border + padding) equals the padding token —
|
|
26
|
+
* keeping content geometry faithful to the spacing scale and identical to the
|
|
27
|
+
* borderless variants. Themes can override borderWidth/borderColor.
|
|
26
28
|
*/
|
|
27
29
|
export type CardVariant = 'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow';
|
|
28
30
|
export type { SizeValue } from '../utils/types';
|
package/dist/Card/Card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AAwFb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA0DX;yBAvEe,IAAI"}
|
package/dist/Card/Card.js
CHANGED
|
@@ -34,8 +34,10 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
34
34
|
* - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
|
|
35
35
|
* Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
|
|
36
36
|
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
37
|
+
* Only `default` draws a visible border. Its border width is subtracted from
|
|
38
|
+
* the padding so the total inset (border + padding) equals the padding token —
|
|
39
|
+
* keeping content geometry faithful to the spacing scale and identical to the
|
|
40
|
+
* borderless variants. Themes can override borderWidth/borderColor.
|
|
39
41
|
*/
|
|
40
42
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
41
43
|
// =============================================================================
|
|
@@ -47,13 +49,16 @@ const styles = {
|
|
|
47
49
|
"--_card-radius": "x2kkz0m",
|
|
48
50
|
kaIpWk: "x153u1i6",
|
|
49
51
|
kVQacm: "x7giv3",
|
|
50
|
-
kMzoRj: "x1litavf",
|
|
51
|
-
ksu8eU: "x1y0btm7",
|
|
52
|
-
kVAM5u: "x9r1u3d",
|
|
53
52
|
$$css: true
|
|
54
53
|
},
|
|
55
54
|
withBorder: {
|
|
55
|
+
kMzoRj: "x1litavf",
|
|
56
|
+
ksu8eU: "x1y0btm7",
|
|
56
57
|
kVAM5u: "xvy26l8",
|
|
58
|
+
kZCmMZ: "xs19ii7",
|
|
59
|
+
kwRFfy: "x12frdag",
|
|
60
|
+
kLKAdn: "x1nex4ik",
|
|
61
|
+
kGO01o: "xbv1mwh",
|
|
57
62
|
$$css: true
|
|
58
63
|
},
|
|
59
64
|
scrollable: {
|
|
@@ -192,14 +197,17 @@ export function Card({
|
|
|
192
197
|
ref: ref,
|
|
193
198
|
...mergeProps(themeProps('card', {
|
|
194
199
|
variant
|
|
195
|
-
}), stylex.props(styles.card, variantStyles[variant],
|
|
200
|
+
}), stylex.props(styles.card, variantStyles[variant], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
|
|
196
201
|
useThemeDefault: 'card'
|
|
197
202
|
} : {
|
|
198
203
|
paddingInnerX: paddingToken,
|
|
199
204
|
paddingInnerY: paddingToken,
|
|
200
205
|
paddingOuterX: paddingToken,
|
|
201
206
|
paddingOuterY: paddingToken
|
|
202
|
-
}), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding],
|
|
207
|
+
}), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding],
|
|
208
|
+
// Applied after the container padding so the border-inset calc wins;
|
|
209
|
+
// it reads the --container-padding-* vars set above.
|
|
210
|
+
variant === 'default' && styles.withBorder, xstyle), className, style),
|
|
203
211
|
...props,
|
|
204
212
|
children: children
|
|
205
213
|
});
|
|
@@ -158,7 +158,7 @@ export interface CheckboxInputProps extends Omit<BaseProps, 'onChange'> {
|
|
|
158
158
|
* />
|
|
159
159
|
* ```
|
|
160
160
|
*/
|
|
161
|
-
export declare function CheckboxInput({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isReadOnly, isOptional, isRequired, size, onFocus, onBlur, labelIcon, status, width, xstyle, className, style, ref, }: CheckboxInputProps): import("react").JSX.Element;
|
|
161
|
+
export declare function CheckboxInput({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isReadOnly, isOptional, isRequired, size, onFocus, onBlur, labelIcon, status, width, xstyle, className, style, ref, ...rest }: CheckboxInputProps): import("react").JSX.Element;
|
|
162
162
|
export declare namespace CheckboxInput {
|
|
163
163
|
var displayName: string;
|
|
164
164
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,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;AA8IhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAmCH,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,
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,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;AA8IhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAmCH,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,+BAwNpB;yBAjPe,aAAa"}
|
|
@@ -219,7 +219,8 @@ export function CheckboxInput({
|
|
|
219
219
|
xstyle,
|
|
220
220
|
className,
|
|
221
221
|
style,
|
|
222
|
-
ref
|
|
222
|
+
ref,
|
|
223
|
+
...rest
|
|
223
224
|
}) {
|
|
224
225
|
const id = useId();
|
|
225
226
|
const descriptionID = useId();
|
|
@@ -292,6 +293,7 @@ export function CheckboxInput({
|
|
|
292
293
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
293
294
|
...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size]),
|
|
294
295
|
children: [/*#__PURE__*/_jsx("input", {
|
|
296
|
+
...rest,
|
|
295
297
|
ref: mergeRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
|
|
296
298
|
id: id,
|
|
297
299
|
type: "checkbox"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmG5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA8EpB;yBAhGe,aAAa"}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
import { useRef } from 'react';
|
|
31
31
|
import * as stylex from '@stylexjs/stylex';
|
|
32
32
|
import "../theme/tokens.stylex.js";
|
|
33
|
-
import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
33
|
+
import { borderVars, colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
34
34
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
35
35
|
import { Card } from "../Card/Card.js";
|
|
36
36
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
@@ -59,7 +59,6 @@ const styles = {
|
|
|
59
59
|
k5JduY: "x1s928wv",
|
|
60
60
|
kwXMNM: "x1j6awrg",
|
|
61
61
|
kv0HGH: "xarstr8",
|
|
62
|
-
kUfP38: "x1k48kgn",
|
|
63
62
|
kloYau: "x2q1x1w",
|
|
64
63
|
kRicXK: "x1ywzrc5",
|
|
65
64
|
kPNhGg: "x97pup0",
|
|
@@ -72,6 +71,25 @@ const styles = {
|
|
|
72
71
|
kJs8I2: "x1vwwndy",
|
|
73
72
|
$$css: true
|
|
74
73
|
},
|
|
74
|
+
borderless: {
|
|
75
|
+
kMzoRj: "xc342km",
|
|
76
|
+
$$css: true
|
|
77
|
+
},
|
|
78
|
+
bordered: {
|
|
79
|
+
kVAM5u: "x14i3s5s",
|
|
80
|
+
kZCmMZ: "xs19ii7",
|
|
81
|
+
kwRFfy: "x12frdag",
|
|
82
|
+
kLKAdn: "x1nex4ik",
|
|
83
|
+
kGO01o: "xbv1mwh",
|
|
84
|
+
k1ekBW: "xshfolx",
|
|
85
|
+
kIyJzY: "xuedmi6",
|
|
86
|
+
kAMwcw: "xlr8y92",
|
|
87
|
+
$$css: true
|
|
88
|
+
},
|
|
89
|
+
borderedHoverOnPointer: {
|
|
90
|
+
kbt25U: "x1ww4t2b",
|
|
91
|
+
$$css: true
|
|
92
|
+
},
|
|
75
93
|
disabled: {
|
|
76
94
|
kkrTdU: "x1h6gzvc",
|
|
77
95
|
kSiTet: "xbyyjgo",
|
|
@@ -157,6 +175,11 @@ export function ClickableCard({
|
|
|
157
175
|
onMouseUpProp(e);
|
|
158
176
|
} : onMouseUp;
|
|
159
177
|
const isLink = href != null;
|
|
178
|
+
|
|
179
|
+
// Only the `default` variant has a visible border. Card draws a transparent
|
|
180
|
+
// 1px border on every other variant purely to avoid layout jitter; we drop
|
|
181
|
+
// it here so the hover overlay covers the full box with no untinted ring.
|
|
182
|
+
const hasBorder = variant === 'default';
|
|
160
183
|
return /*#__PURE__*/_jsxs(Card, {
|
|
161
184
|
ref: mergeRefs(ref, containerRef),
|
|
162
185
|
width: width,
|
|
@@ -170,7 +193,7 @@ export function ClickableCard({
|
|
|
170
193
|
className: classNameProp,
|
|
171
194
|
style
|
|
172
195
|
}),
|
|
173
|
-
xstyle: [styles.interactive, styles.focusWithin, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, isDisabled && styles.disabled, xstyleProp],
|
|
196
|
+
xstyle: [styles.interactive, styles.focusWithin, hasBorder ? styles.bordered : styles.borderless, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
|
|
174
197
|
onClick: !isDisabled ? onClick : undefined,
|
|
175
198
|
onMouseUp: !isDisabled ? handleMouseUp : undefined,
|
|
176
199
|
...props,
|
|
@@ -122,11 +122,11 @@ export function InputGroup({
|
|
|
122
122
|
labelTooltip: labelTooltip,
|
|
123
123
|
children: /*#__PURE__*/_jsx("div", {
|
|
124
124
|
ref: ref,
|
|
125
|
+
"data-testid": testId,
|
|
126
|
+
...rest,
|
|
125
127
|
role: "group",
|
|
126
128
|
"aria-labelledby": labelID,
|
|
127
129
|
"aria-describedby": describedByIDs,
|
|
128
|
-
"data-testid": testId,
|
|
129
|
-
...rest,
|
|
130
130
|
...mergeProps(themeProps('input-group', {
|
|
131
131
|
size,
|
|
132
132
|
status: status?.type ?? null
|
package/dist/Item/Item.js
CHANGED
|
@@ -280,9 +280,9 @@ export function Item({
|
|
|
280
280
|
});
|
|
281
281
|
return /*#__PURE__*/_jsx(Component, {
|
|
282
282
|
ref: ref,
|
|
283
|
+
...restProps,
|
|
283
284
|
"aria-selected": isSelected || undefined,
|
|
284
285
|
"aria-disabled": isDisabled || undefined,
|
|
285
|
-
...restProps,
|
|
286
286
|
...mergeProps(themeProps('item', {
|
|
287
287
|
density,
|
|
288
288
|
align
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
* - /packages/core/src/PowerSearch/index.ts
|
|
14
14
|
* - /packages/cli/templates/blocks/components/PowerSearch/ (showcase blocks)
|
|
15
15
|
*/
|
|
16
|
-
import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
16
|
+
import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
17
17
|
import * as stylex from '@stylexjs/stylex';
|
|
18
18
|
import { Tokenizer } from "../Tokenizer/index.js";
|
|
19
19
|
import { TypeaheadItem } from "../Typeahead/TypeaheadItem.js";
|
|
@@ -22,6 +22,7 @@ import { Avatar } from "../Avatar/index.js";
|
|
|
22
22
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
23
23
|
import { Icon } from "../Icon/index.js";
|
|
24
24
|
import { usePopover } from "../Popover/usePopover.js";
|
|
25
|
+
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
25
26
|
import "../theme/tokens.stylex.js";
|
|
26
27
|
import { spacingVars, colorVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
27
28
|
import { mergeRefs } from "../utils/index.js";
|
|
@@ -697,34 +698,51 @@ export function PowerSearch({
|
|
|
697
698
|
}, popoverKey);
|
|
698
699
|
}, [popoverPartialFilter, popoverState, EditorOverride, configProp, config, handlePopoverSave, handlePopoverCancel, popoverSaveButtonLabel, isReadOnly]);
|
|
699
700
|
|
|
701
|
+
// Plain-text form of the result count, shared by the visible label and the
|
|
702
|
+
// screen-reader announcement so the two never drift.
|
|
703
|
+
const resultCountText = useMemo(() => {
|
|
704
|
+
if (resultCount == null) {
|
|
705
|
+
return null;
|
|
706
|
+
}
|
|
707
|
+
if (typeof resultCount === 'number') {
|
|
708
|
+
const formatted = new Intl.NumberFormat().format(resultCount);
|
|
709
|
+
return `${formatted} ${resultCount === 1 ? 'result' : 'results'}`;
|
|
710
|
+
}
|
|
711
|
+
return resultCount;
|
|
712
|
+
}, [resultCount]);
|
|
713
|
+
|
|
714
|
+
// Announce result-count changes to screen readers through a polite live
|
|
715
|
+
// region, mirroring the way Typeahead announces its dropdown result count.
|
|
716
|
+
// The count is otherwise only shown visually and stays silent to assistive
|
|
717
|
+
// tech. Skip the first run so the count already present on mount isn't
|
|
718
|
+
// announced unprompted — only user-driven changes are spoken.
|
|
719
|
+
const announce = useAnnounce();
|
|
720
|
+
const hasMountedRef = useRef(false);
|
|
721
|
+
useEffect(() => {
|
|
722
|
+
if (!hasMountedRef.current) {
|
|
723
|
+
hasMountedRef.current = true;
|
|
724
|
+
return;
|
|
725
|
+
}
|
|
726
|
+
if (resultCountText != null) {
|
|
727
|
+
announce(resultCountText);
|
|
728
|
+
}
|
|
729
|
+
}, [resultCountText, announce]);
|
|
730
|
+
|
|
700
731
|
// Build combined endContent from resultCount + endContent props
|
|
701
732
|
const combinedEndContent = useMemo(() => {
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
|
|
709
|
-
},
|
|
710
|
-
children: [formatted, " ", resultCount === 1 ? 'result' : 'results']
|
|
711
|
-
});
|
|
712
|
-
} else {
|
|
713
|
-
resultCountNode = /*#__PURE__*/_jsx("span", {
|
|
714
|
-
...{
|
|
715
|
-
className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
|
|
716
|
-
},
|
|
717
|
-
children: resultCount
|
|
718
|
-
});
|
|
719
|
-
}
|
|
720
|
-
}
|
|
733
|
+
const resultCountNode = resultCountText != null ? /*#__PURE__*/_jsx("span", {
|
|
734
|
+
...{
|
|
735
|
+
className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
|
|
736
|
+
},
|
|
737
|
+
children: resultCountText
|
|
738
|
+
}) : null;
|
|
721
739
|
if (resultCountNode && endContent) {
|
|
722
740
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
723
741
|
children: [resultCountNode, endContent]
|
|
724
742
|
});
|
|
725
743
|
}
|
|
726
744
|
return resultCountNode || endContent || undefined;
|
|
727
|
-
}, [
|
|
745
|
+
}, [resultCountText, endContent]);
|
|
728
746
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
729
747
|
children: [/*#__PURE__*/_jsx("div", {
|
|
730
748
|
ref: mergeRefs(ref, popover.triggerRef),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA8KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBAqLd;yBA5Le,OAAO"}
|
package/dist/TabList/TabMenu.js
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /packages/core/src/TabList/TabList.test.tsx
|
|
16
16
|
* - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import React, { useCallback, useId } from 'react';
|
|
18
|
+
import React, { useCallback, useId, useRef } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import { Icon } from "../Icon/index.js";
|
|
21
21
|
import { renderIconSlot } from "../Icon/index.js";
|
|
@@ -135,18 +135,31 @@ export function TabMenu({
|
|
|
135
135
|
}) {
|
|
136
136
|
const tabListCtx = useTabListContext();
|
|
137
137
|
const menuId = useId();
|
|
138
|
+
const buttonRef = useRef(null);
|
|
138
139
|
const popover = usePopover({
|
|
139
140
|
hasLightDismiss: true,
|
|
140
141
|
hasCloseButton: false,
|
|
141
142
|
hasAutoFocus: false,
|
|
142
143
|
// The popup's own role="menu" is the exposed semantics; a modal dialog
|
|
143
144
|
// wrapper would announce an unnamed dialog around the menu.
|
|
144
|
-
role: 'none'
|
|
145
|
+
role: 'none',
|
|
146
|
+
// Return focus to the trigger when the menu closes (Escape, Tab, select,
|
|
147
|
+
// or light dismiss) so keyboard focus is never dropped to <body>.
|
|
148
|
+
onHide: useCallback(() => {
|
|
149
|
+
buttonRef.current?.focus();
|
|
150
|
+
}, [])
|
|
145
151
|
});
|
|
152
|
+
|
|
153
|
+
// The overflow menu is a composite widget: a single roving tab stop with
|
|
154
|
+
// arrow-key navigation between items, per the APG menu pattern. The hook owns
|
|
155
|
+
// item tabindex — items render tabIndex={-1} and exactly one is promoted to 0.
|
|
146
156
|
const {
|
|
147
157
|
listRef,
|
|
148
|
-
handleKeyDown: handleListKeyDown
|
|
158
|
+
handleKeyDown: handleListKeyDown,
|
|
159
|
+
handleFocus,
|
|
160
|
+
focusFirst
|
|
149
161
|
} = useListFocus({
|
|
162
|
+
hasRovingTabIndex: true,
|
|
150
163
|
onEscape: () => popover.hide()
|
|
151
164
|
});
|
|
152
165
|
const handleToggle = useCallback(() => {
|
|
@@ -154,8 +167,21 @@ export function TabMenu({
|
|
|
154
167
|
popover.hide();
|
|
155
168
|
} else {
|
|
156
169
|
popover.show();
|
|
170
|
+
// Move focus into the menu on open so arrow navigation works and the
|
|
171
|
+
// roving tab stop lands on a real item (APG menu-button focus-on-open).
|
|
172
|
+
requestAnimationFrame(() => focusFirst());
|
|
173
|
+
}
|
|
174
|
+
}, [popover, focusFirst]);
|
|
175
|
+
const handleMenuKeyDown = useCallback(e => {
|
|
176
|
+
// APG menu-button: Tab leaves the menu rather than walking its items.
|
|
177
|
+
// Close and let onHide return focus to the trigger, from which the
|
|
178
|
+
// browser's default Tab continues to the next element.
|
|
179
|
+
if (e.key === 'Tab') {
|
|
180
|
+
popover.hide();
|
|
181
|
+
return;
|
|
157
182
|
}
|
|
158
|
-
|
|
183
|
+
handleListKeyDown(e);
|
|
184
|
+
}, [handleListKeyDown, popover]);
|
|
159
185
|
const selectedOption = options.find(o => o.value === tabListCtx.value);
|
|
160
186
|
const triggerLabel = selectedOption?.label ?? label;
|
|
161
187
|
const hasSelectedOption = selectedOption != null;
|
|
@@ -164,7 +190,7 @@ export function TabMenu({
|
|
|
164
190
|
tabListCtx.onChange(value);
|
|
165
191
|
popover.hide();
|
|
166
192
|
}, [tabListCtx, popover]);
|
|
167
|
-
const setButtonRef = mergeRefs(popover.triggerRef, ref);
|
|
193
|
+
const setButtonRef = mergeRefs(popover.triggerRef, buttonRef, ref);
|
|
168
194
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
169
195
|
children: [/*#__PURE__*/_jsxs("button", {
|
|
170
196
|
ref: setButtonRef,
|
|
@@ -222,7 +248,8 @@ export function TabMenu({
|
|
|
222
248
|
id: menuId,
|
|
223
249
|
role: "menu",
|
|
224
250
|
"aria-label": label,
|
|
225
|
-
onKeyDown:
|
|
251
|
+
onKeyDown: handleMenuKeyDown,
|
|
252
|
+
onFocus: handleFocus,
|
|
226
253
|
...mergeProps(themeProps('tab-menu-dropdown'), {
|
|
227
254
|
className: "x78zum5 xdt5ytf x1lsbc85 xu0wf1k x7a5moj"
|
|
228
255
|
}),
|
|
@@ -236,7 +263,7 @@ export function TabMenu({
|
|
|
236
263
|
const isSelected = tabListCtx.value === option.value;
|
|
237
264
|
return /*#__PURE__*/_jsxs("div", {
|
|
238
265
|
role: "menuitem",
|
|
239
|
-
tabIndex:
|
|
266
|
+
tabIndex: -1,
|
|
240
267
|
"aria-current": isSelected ? 'true' : undefined,
|
|
241
268
|
onClick: () => handleSelect(option.value),
|
|
242
269
|
onKeyDown: e => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AA0iBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
|
package/dist/Table/BaseTable.js
CHANGED
|
@@ -199,7 +199,8 @@ function areRowPropsEqual(prevProps, nextProps) {
|
|
|
199
199
|
return true;
|
|
200
200
|
}
|
|
201
201
|
|
|
202
|
-
// Different object reference - compare values
|
|
202
|
+
// Different object reference - compare values. This is intentionally a
|
|
203
|
+
// one-level shallow compare: nested fields rely on reference identity.
|
|
203
204
|
const prevItem = prevProps.item;
|
|
204
205
|
const nextItem = nextProps.item;
|
|
205
206
|
const keys = Object.keys(nextItem);
|
package/dist/astryx.css
CHANGED
|
@@ -439,6 +439,7 @@
|
|
|
439
439
|
@media (hover: hover){.x1jtjlen.x1jtjlen.x1jtjlen:where(.x1tspnpo:hover *):not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-emphasized),var(--color-tint-hover) 20%)}}
|
|
440
440
|
@media (hover: hover){.x70talc.x70talc.x70talc:where(.xklqth5:hover *):not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-emphasized),var(--color-tint-hover) 20%)}}
|
|
441
441
|
@media (hover: hover){.xmt8yqp.xmt8yqp.xmt8yqp:where(.x1tspnpo:hover *):not(#\#):not(#\#){border-color:var(--color-border)}}
|
|
442
|
+
@media (hover: hover){.x1ww4t2b.x1ww4t2b:hover:not(#\#):not(#\#){border-color:var(--color-border-emphasized)}}
|
|
442
443
|
@media (hover: hover){.x4ohgrr.x4ohgrr:hover:not(#\#):not(#\#){text-decoration:underline}}
|
|
443
444
|
.x67t5t6:not(#\#):not(#\#):not(#\#){-webkit-backdrop-filter:blur(12px)}
|
|
444
445
|
.x1ua5tub:not(#\#):not(#\#):not(#\#){-webkit-box-orient:vertical}
|
|
@@ -847,6 +848,7 @@
|
|
|
847
848
|
.x1mzt3pk:not(#\#):not(#\#):not(#\#){overflow-wrap:break-word}
|
|
848
849
|
.x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
|
|
849
850
|
.xyri2b:not(#\#):not(#\#):not(#\#){padding-inline-end:0}
|
|
851
|
+
.x12frdag:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--container-padding-inline-end) - var(--border-width))}
|
|
850
852
|
.x64h4k7:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--container-padding-inline-end)}
|
|
851
853
|
.x1peupej:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--layout-padding-inner-x,var(--spacing-4))}
|
|
852
854
|
.xpc6k2p:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--layout-padding-outer-x,var(--spacing-4))}
|
|
@@ -863,6 +865,7 @@
|
|
|
863
865
|
.x1q91b2g:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--spacing-8)}
|
|
864
866
|
.x1c1uobl:not(#\#):not(#\#):not(#\#){padding-inline-start:0}
|
|
865
867
|
.x1f43n9v:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(16px + var(--spacing-1-5))}
|
|
868
|
+
.xs19ii7:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--container-padding-inline-start) - var(--border-width))}
|
|
866
869
|
.x2a0j69:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-2) - var(--spacing-1) + 1px)}
|
|
867
870
|
.x1c35znw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--container-padding-inline-start)}
|
|
868
871
|
.xwjyata:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--layout-padding-inner-x,var(--spacing-4))}
|
|
@@ -979,6 +982,7 @@
|
|
|
979
982
|
.x12qzo2w:not(#\#):not(#\#):not(#\#){transition-property:background-image}
|
|
980
983
|
.x1tv3a4w:not(#\#):not(#\#):not(#\#){transition-property:border-color,box-shadow,background-color}
|
|
981
984
|
.x12zzom9:not(#\#):not(#\#):not(#\#){transition-property:border-color,box-shadow}
|
|
985
|
+
.xshfolx:not(#\#):not(#\#):not(#\#){transition-property:border-color}
|
|
982
986
|
.x16mfhj0:not(#\#):not(#\#):not(#\#){transition-property:box-shadow,border-color}
|
|
983
987
|
.x1vix5yk:not(#\#):not(#\#):not(#\#){transition-property:color,background-color,box-shadow}
|
|
984
988
|
.x1mpt4pi:not(#\#):not(#\#):not(#\#){transition-property:color,text-decoration}
|
|
@@ -1339,6 +1343,7 @@
|
|
|
1339
1343
|
.x18d9i69:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
|
|
1340
1344
|
.x1j85h84:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:1px}
|
|
1341
1345
|
.x9jihrk:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))}
|
|
1346
|
+
.xbv1mwh:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--container-padding-block-end) - var(--border-width))}
|
|
1342
1347
|
.xxbfulo:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--spacing-3) + var(--radius-chat))}
|
|
1343
1348
|
.xvpcij2:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_chat-composer-padding)}
|
|
1344
1349
|
.xc1wllq:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--container-padding-block-end)}
|
|
@@ -1358,6 +1363,7 @@
|
|
|
1358
1363
|
.xexx8yu:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:0}
|
|
1359
1364
|
.x1htvmrp:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))}
|
|
1360
1365
|
.x1enrzb7:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--border-width) + var(--spacing-1))}
|
|
1366
|
+
.x1nex4ik:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--container-padding-block-start) - var(--border-width))}
|
|
1361
1367
|
.x1ak3mig:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--spacing-1-5) + var(--spacing-2))}
|
|
1362
1368
|
.x2gtn7z:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_chat-composer-padding)}
|
|
1363
1369
|
.x14m0hsi:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--container-padding-block-start)}
|