@astryxdesign/core 0.2.0-canary.f306f13 → 0.2.0-canary.f7ec5f5
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/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +6 -2
- package/dist/Button/Button.d.ts +1 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +4 -2
- package/dist/Chat/ChatLayout.d.ts +7 -0
- package/dist/Chat/ChatLayout.d.ts.map +1 -1
- package/dist/Chat/ChatLayout.js +14 -3
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +2 -2
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +19 -4
- package/dist/CodeBlock/CodeBlock.js +2 -2
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +10 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +18 -12
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +38 -63
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts +8 -11
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioGroup.js +3 -1
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +9 -1
- package/dist/DropdownMenu/menuItemHover.d.ts +1 -0
- package/dist/DropdownMenu/menuItemHover.d.ts.map +1 -1
- package/dist/DropdownMenu/menuItemHover.js +1 -0
- package/dist/Field/FieldLabel.d.ts +2 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +7 -3
- package/dist/FieldStatus/FieldStatus.d.ts.map +1 -1
- package/dist/FieldStatus/FieldStatus.js +12 -2
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +3 -2
- package/dist/Item/Item.d.ts +16 -3
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +31 -6
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +15 -2
- package/dist/List/ListItem.d.ts +11 -1
- package/dist/List/ListItem.d.ts.map +1 -1
- package/dist/List/ListItem.js +2 -0
- package/dist/MetadataList/MetadataList.d.ts +1 -1
- package/dist/MetadataList/MetadataList.d.ts.map +1 -1
- package/dist/MetadataList/MetadataList.js +4 -2
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +20 -5
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +3 -2
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +11 -2
- package/dist/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/Skeleton/Skeleton.js +2 -2
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +15 -4
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +18 -3
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +22 -4
- package/dist/Table/plugins/tree/useTableTreeData.d.ts +11 -0
- package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -1
- package/dist/Table/plugins/tree/useTableTreeData.js +36 -2
- package/dist/Text/Text.d.ts +10 -1
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +25 -2
- package/dist/Text/index.d.ts +2 -2
- package/dist/Text/index.d.ts.map +1 -1
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +106 -38
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +51 -45
- package/dist/Timestamp/Timestamp.js +1 -1
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +61 -9
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +3 -1
- package/dist/Token/Token.d.ts +4 -1
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +68 -43
- package/dist/Token/TokenLink.d.ts +62 -0
- package/dist/Token/TokenLink.d.ts.map +1 -0
- package/dist/Token/TokenLink.js +76 -0
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +9 -3
- package/dist/Typeahead/BaseTypeahead.d.ts +9 -0
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +2 -0
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +8 -1
- package/dist/astryx.css +61 -8
- package/dist/astryx.umd.js +50 -50
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/containerReveal.pool.stylex.d.ts +281 -0
- package/dist/hooks/containerReveal.pool.stylex.d.ts.map +1 -0
- package/dist/hooks/containerReveal.pool.stylex.js +281 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -1
- package/dist/hooks/useContainerReveal.d.ts +83 -0
- package/dist/hooks/useContainerReveal.d.ts.map +1 -0
- package/dist/hooks/useContainerReveal.js +123 -0
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +11 -0
- package/dist/hooks/useKeyboardHint.d.ts +1 -1
- package/dist/hooks/useKeyboardHint.d.ts.map +1 -1
- package/dist/hooks/useKeyboardHint.js +4 -2
- package/dist/theme/defineTheme.d.ts +6 -0
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/expandColorScale.d.ts +19 -2
- package/dist/theme/expandColorScale.d.ts.map +1 -1
- package/dist/theme/expandColorScale.js +38 -10
- package/dist/theme/index.d.ts +3 -3
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/types.d.ts +39 -2
- package/dist/theme/types.d.ts.map +1 -1
- package/locales/en.json +40 -0
- package/locales/pseudo.json +30 -0
- package/package.json +3 -3
- package/src/AvatarGroup/AvatarGroup.test.tsx +21 -1
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +4 -2
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +1 -1
- package/src/Button/Button.test.tsx +16 -0
- package/src/Button/Button.tsx +4 -2
- package/src/Chat/ChatLayout.test.tsx +57 -0
- package/src/Chat/ChatLayout.tsx +22 -1
- package/src/CheckboxInput/CheckboxInput.test.tsx +23 -0
- package/src/CheckboxInput/CheckboxInput.tsx +17 -2
- package/src/CheckboxList/CheckboxList.test.tsx +94 -3
- package/src/CheckboxList/CheckboxListItem.tsx +17 -10
- package/src/CodeBlock/CodeBlock.test.tsx +17 -0
- package/src/CodeBlock/CodeBlock.tsx +2 -2
- package/src/ContextMenu/ContextMenu.test.tsx +17 -2
- package/src/ContextMenu/ContextMenu.tsx +10 -1
- package/src/DropdownMenu/DropdownMenu.doc.mjs +0 -5
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +41 -64
- package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs +4 -12
- package/src/DropdownMenu/DropdownMenuRadioGroup.tsx +9 -10
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +1 -1
- package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +51 -2
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +29 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +13 -5
- package/src/DropdownMenu/menuItemHover.ts +1 -0
- package/src/Field/Field.doc.mjs +4 -0
- package/src/Field/FieldLabel.test.tsx +25 -0
- package/src/Field/FieldLabel.tsx +11 -2
- package/src/FieldStatus/FieldStatus.doc.mjs +1 -0
- package/src/FieldStatus/FieldStatus.test.tsx +61 -0
- package/src/FieldStatus/FieldStatus.tsx +14 -3
- package/src/Heading/Heading.tsx +2 -1
- package/src/Item/Item.doc.mjs +5 -0
- package/src/Item/Item.test.tsx +88 -0
- package/src/Item/Item.tsx +57 -11
- package/src/Lightbox/Lightbox.test.tsx +33 -0
- package/src/Lightbox/Lightbox.tsx +15 -3
- package/src/List/ListItem.doc.mjs +12 -0
- package/src/List/ListItem.tsx +13 -0
- package/src/MetadataList/MetadataList.test.tsx +24 -0
- package/src/MetadataList/MetadataList.tsx +6 -2
- package/src/MultiSelector/MultiSelector.test.tsx +110 -0
- package/src/MultiSelector/MultiSelector.tsx +35 -10
- package/src/RadioList/RadioList.test.tsx +26 -4
- package/src/RadioList/RadioListItem.tsx +8 -1
- package/src/SegmentedControl/SegmentedControl.test.tsx +28 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +20 -2
- package/src/Selector/Selector.test.tsx +52 -0
- package/src/Selector/Selector.tsx +15 -4
- package/src/Skeleton/Skeleton.test.tsx +16 -0
- package/src/Skeleton/Skeleton.tsx +13 -1
- package/src/Switch/Switch.test.tsx +37 -0
- package/src/Switch/Switch.tsx +52 -3
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +19 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +24 -4
- package/src/Table/plugins/tree/useTableTreeData.test.tsx +161 -2
- package/src/Table/plugins/tree/useTableTreeData.tsx +54 -1
- package/src/Table/useTableRowExpansion.doc.mjs +55 -2
- package/src/Table/useTableTreeData.doc.mjs +9 -0
- package/src/Text/Heading.doc.mjs +3 -3
- package/src/Text/Text.doc.mjs +1 -1
- package/src/Text/Text.test.tsx +42 -0
- package/src/Text/Text.tsx +25 -1
- package/src/Text/index.ts +2 -6
- package/src/TextArea/TextArea.doc.mjs +2 -2
- package/src/TextArea/TextArea.test.tsx +112 -7
- package/src/TextArea/TextArea.tsx +142 -49
- package/src/Thumbnail/Thumbnail.test.tsx +24 -1
- package/src/Thumbnail/Thumbnail.tsx +27 -34
- package/src/Toast/ToastViewport.test.tsx +218 -8
- package/src/Toast/ToastViewport.tsx +71 -12
- package/src/ToggleButton/ToggleButton.test.tsx +24 -0
- package/src/ToggleButton/ToggleButton.tsx +19 -1
- package/src/Token/Token.test.tsx +145 -0
- package/src/Token/Token.tsx +73 -33
- package/src/Token/TokenLink.tsx +107 -0
- package/src/TopNav/TopNavMegaMenu.tsx +26 -2
- package/src/Typeahead/BaseTypeahead.tsx +12 -0
- package/src/Typeahead/Typeahead.test.tsx +62 -0
- package/src/Typeahead/Typeahead.tsx +6 -0
- package/src/__tests__/babelPluginAddExtensions.test.ts +190 -0
- package/src/__tests__/forcedColors.ts +60 -0
- package/src/hooks/containerReveal.pool.stylex.ts +464 -0
- package/src/hooks/index.ts +7 -0
- package/src/hooks/useContainerReveal.test.tsx +116 -0
- package/src/hooks/useContainerReveal.ts +180 -0
- package/src/hooks/useInputStatusIcon.test.tsx +59 -0
- package/src/hooks/useInputStatusIcon.tsx +12 -1
- package/src/hooks/useKeyboardHint.test.tsx +22 -0
- package/src/hooks/useKeyboardHint.tsx +6 -2
- package/src/theme/defineTheme.ts +6 -0
- package/src/theme/expandColorScale.test.ts +144 -0
- package/src/theme/expandColorScale.ts +53 -15
- package/src/theme/index.ts +4 -8
- package/src/theme/types.ts +43 -13
- package/dist/Thumbnail/thumbnail.markers.stylex.d.ts +0 -9
- package/dist/Thumbnail/thumbnail.markers.stylex.d.ts.map +0 -1
- package/dist/Thumbnail/thumbnail.markers.stylex.js +0 -14
- package/src/Thumbnail/thumbnail.markers.stylex.ts +0 -12
|
@@ -53,6 +53,7 @@ import { mergeProps } from "../utils/index.js";
|
|
|
53
53
|
import { themeProps } from "../utils/themeProps.js";
|
|
54
54
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "./menuItemRoles.js";
|
|
55
55
|
import { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
56
|
+
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
56
57
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
57
58
|
const triggerStyles = {
|
|
58
59
|
root: {
|
|
@@ -65,7 +66,6 @@ const triggerStyles = {
|
|
|
65
66
|
kGuDYH: "xcr08ib",
|
|
66
67
|
kMwMTN: "x1tgivj0",
|
|
67
68
|
kWkggS: "xjbqb8w x1c52tdz",
|
|
68
|
-
kHE3J0: "xe9uy6x",
|
|
69
69
|
kkrTdU: "x1ypdohk",
|
|
70
70
|
k9WMMc: "x1yc453h",
|
|
71
71
|
kI3sdo: "x1a2a7pz",
|
|
@@ -281,6 +281,13 @@ export function DropdownMenuSubMenu(props) {
|
|
|
281
281
|
}
|
|
282
282
|
}, [isDisabled, open]);
|
|
283
283
|
|
|
284
|
+
// Move the single focus-driven highlight onto the trigger as the pointer
|
|
285
|
+
// enters it, so a sibling item that still holds focus doesn't stay
|
|
286
|
+
// highlighted alongside the hovered trigger. This is separate from the
|
|
287
|
+
// hover-open intent (onMouseEnter/onMouseLeave) — the flyout still opens on
|
|
288
|
+
// the hover delay; this only keeps the highlight single.
|
|
289
|
+
const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
|
|
290
|
+
|
|
284
291
|
// Enter/Space activate the focused row; typeahead jumps by first character;
|
|
285
292
|
// the close key (Left, or Right in RTL) returns focus to the trigger;
|
|
286
293
|
// arrows/Home/End defer to useListFocus (RTL-aware).
|
|
@@ -378,6 +385,7 @@ export function DropdownMenuSubMenu(props) {
|
|
|
378
385
|
"data-testid": testId,
|
|
379
386
|
onMouseEnter: triggerProps.onMouseEnter,
|
|
380
387
|
onMouseLeave: triggerProps.onMouseLeave,
|
|
388
|
+
onPointerMove: handlePointerMove,
|
|
381
389
|
startContent: icon ? renderIconSlot(icon, {
|
|
382
390
|
size: 'sm',
|
|
383
391
|
color: 'secondary'
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
* - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
|
|
13
13
|
* - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
|
|
14
14
|
* - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
|
|
15
|
+
* - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
|
|
15
16
|
*/
|
|
16
17
|
import type { PointerEvent } from 'react';
|
|
17
18
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuItemHover.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemHover.ts"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"menuItemHover.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemHover.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,EAC5B,UAAU,CAAC,EAAE,OAAO,GACnB,IAAI,CAQN"}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
* - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
|
|
17
17
|
* - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
|
|
18
18
|
* - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
|
|
19
|
+
* - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
|
|
19
20
|
*/
|
|
20
21
|
/**
|
|
21
22
|
* Move focus to a menu item as the pointer moves over it, so hover and
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file FieldLabel.tsx
|
|
3
|
-
* @input Uses React, Icon, IconType
|
|
3
|
+
* @input Uses React, Icon, IconType, useTranslator
|
|
4
4
|
* @output Exports FieldLabel component, FieldLabelProps
|
|
5
5
|
* @position Core label implementation; used by Field, CheckboxInput, Switch
|
|
6
6
|
*
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
* - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
|
|
9
9
|
* - /packages/core/src/Field/index.ts (exports if types change)
|
|
10
10
|
* - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
|
|
11
|
+
* - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
|
|
11
12
|
*/
|
|
12
13
|
import type { ReactNode } from 'react';
|
|
13
14
|
import type { BaseProps } from '../BaseProps';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAmD5D,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,+BA+DjB;yBAjFe,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
3
5
|
/**
|
|
4
6
|
* @file FieldLabel.tsx
|
|
5
|
-
* @input Uses React, Icon, IconType
|
|
7
|
+
* @input Uses React, Icon, IconType, useTranslator
|
|
6
8
|
* @output Exports FieldLabel component, FieldLabelProps
|
|
7
9
|
* @position Core label implementation; used by Field, CheckboxInput, Switch
|
|
8
10
|
*
|
|
@@ -10,14 +12,15 @@
|
|
|
10
12
|
* - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
|
|
11
13
|
* - /packages/core/src/Field/index.ts (exports if types change)
|
|
12
14
|
* - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
|
|
15
|
+
* - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
|
|
13
16
|
*/
|
|
14
|
-
|
|
15
17
|
import * as stylex from '@stylexjs/stylex';
|
|
16
18
|
import { mergeProps } from "../utils/index.js";
|
|
17
19
|
import "../theme/tokens.stylex.js";
|
|
18
20
|
import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
19
21
|
import { Icon, renderIconSlot } from "../Icon/index.js";
|
|
20
22
|
import { Tooltip } from "../Tooltip/index.js";
|
|
23
|
+
import { useTranslator } from "../i18n/index.js";
|
|
21
24
|
import { themeProps } from "../utils/themeProps.js";
|
|
22
25
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
23
26
|
const styles = {
|
|
@@ -87,7 +90,8 @@ export function FieldLabel({
|
|
|
87
90
|
ref,
|
|
88
91
|
...rest
|
|
89
92
|
}) {
|
|
90
|
-
const
|
|
93
|
+
const t = useTranslator();
|
|
94
|
+
const statusText = isOptional ? t('@astryx.field.optional') : isRequired ? t('@astryx.field.required') : null;
|
|
91
95
|
|
|
92
96
|
// A group label (e.g. for a radiogroup) must not be a literal `<label>`
|
|
93
97
|
// element: a `<label>` semantically names a single form control and can't be
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAoEpD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAoEpD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAsDlB;yBAhEe,WAAW"}
|
|
@@ -48,8 +48,8 @@ const styles = {
|
|
|
48
48
|
kLKAdn: "x1ak3mig",
|
|
49
49
|
kGO01o: "x1wesfrj",
|
|
50
50
|
kg3NbH: "xf314gf",
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
kVL7Gh: "xquck67",
|
|
52
|
+
kT0f0o: "x14i3lts",
|
|
53
53
|
$$css: true
|
|
54
54
|
},
|
|
55
55
|
detached: {
|
|
@@ -172,6 +172,16 @@ export function FieldStatus({
|
|
|
172
172
|
icon: statusIconMap[type],
|
|
173
173
|
size: "sm",
|
|
174
174
|
color: "inherit"
|
|
175
|
+
// Stable theme target on the detached message box's leading glyph
|
|
176
|
+
// itself, so a theme can restyle just this icon (color, size) —
|
|
177
|
+
// and each status — via `defineTheme`. Same-element rules in
|
|
178
|
+
// @layer astryx-theme win over the icon's own base
|
|
179
|
+
// width/height/fontSize, which a field-level target could not
|
|
180
|
+
// reach.
|
|
181
|
+
,
|
|
182
|
+
...themeProps('field-status-icon', {
|
|
183
|
+
type
|
|
184
|
+
})
|
|
175
185
|
})
|
|
176
186
|
}), /*#__PURE__*/_jsx("span", {
|
|
177
187
|
children: message
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAiBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,kBAAkB,CAAC,EAC7B,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC;;;OAGG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,kBAAkB,EAClB,KAAiB,EACjB,OAAiB,EACjB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAmFd;yBAtGe,OAAO"}
|
package/dist/Heading/Heading.js
CHANGED
|
@@ -20,10 +20,11 @@ import { lazy, Suspense, useRef } from 'react';
|
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
21
|
import { colorStyles, sizeByLevelStyles, sizeByTypeStyles, defaultWeightByTypeStyles, displayStyles, justifyStyles, truncationStyles, wordBreakStyles, textWrapStyles, capsizeStyles, decorationStyles, truncationTooltipStyles } from "../Text/text.stylex.js";
|
|
22
22
|
import { useTruncation } from "../Text/useTruncation.js";
|
|
23
|
+
import { resolveStyleColor } from "../Text/Text.js";
|
|
23
24
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
24
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
25
26
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
|
-
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import(
|
|
27
|
+
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import("../Tooltip/Tooltip.js").then(mod => ({
|
|
27
28
|
default: mod.Tooltip
|
|
28
29
|
})));
|
|
29
30
|
|
|
@@ -119,7 +120,7 @@ export function Heading({
|
|
|
119
120
|
...(type && {
|
|
120
121
|
type
|
|
121
122
|
})
|
|
122
|
-
}), stylex.props(colorStyles[color], type ? sizeByTypeStyles[type] : sizeByLevelStyles[level], type && defaultWeightByTypeStyles[type],
|
|
123
|
+
}), stylex.props(colorStyles[resolveStyleColor(color)], type ? sizeByTypeStyles[type] : sizeByLevelStyles[level], type && defaultWeightByTypeStyles[type],
|
|
123
124
|
// Display: use truncation styles when maxLines > 0
|
|
124
125
|
maxLines === 1 ? truncationStyles.singleLine : maxLines > 1 ? truncationStyles.multiLine : displayStyles[resolvedDisplay],
|
|
125
126
|
// Word break when truncating
|
package/dist/Item/Item.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Item.tsx
|
|
3
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens
|
|
3
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
|
|
4
4
|
* @output Exports Item component, ItemProps type
|
|
5
5
|
* @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
|
|
6
6
|
*
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* - /apps/storybook/stories/Item.stories.tsx
|
|
12
12
|
* - /packages/cli/templates/blocks/components/Item/ (showcase blocks)
|
|
13
13
|
*/
|
|
14
|
-
import type
|
|
14
|
+
import { type ReactNode } from 'react';
|
|
15
15
|
import type { BaseProps } from '../BaseProps';
|
|
16
16
|
export type ItemAlign = 'center' | 'start';
|
|
17
17
|
export type ItemDensity = 'compact' | 'balanced' | 'spacious';
|
|
@@ -72,6 +72,19 @@ export interface ItemProps extends BaseProps<HTMLElement> {
|
|
|
72
72
|
* Click handler. Makes the item clickable with button semantics.
|
|
73
73
|
*/
|
|
74
74
|
onClick?: (event: React.MouseEvent) => void;
|
|
75
|
+
/**
|
|
76
|
+
* Ref to a nested control inside the item (e.g. a checkbox in
|
|
77
|
+
* `startContent`) that already provides the item's keyboard access and
|
|
78
|
+
* action. When set, the item becomes an enlarged click/tap target that
|
|
79
|
+
* delegates surface clicks to that control via the `useClickableContainer`
|
|
80
|
+
* pattern: it renders no invisible button/anchor, so the row adds no second
|
|
81
|
+
* tab stop (WCAG 4.1.2 — one focusable control per option). Clicks on the
|
|
82
|
+
* control itself, and on any other nested interactive element, are left to
|
|
83
|
+
* that element. Mutually exclusive with `onClick`/`href` — when
|
|
84
|
+
* `interactiveRef` is set those are ignored (the nested control is the sole
|
|
85
|
+
* action).
|
|
86
|
+
*/
|
|
87
|
+
interactiveRef?: React.RefObject<HTMLElement | null>;
|
|
75
88
|
/**
|
|
76
89
|
* Link URL. Makes the item a link via an invisible anchor element.
|
|
77
90
|
*/
|
|
@@ -126,7 +139,7 @@ export interface ItemProps extends BaseProps<HTMLElement> {
|
|
|
126
139
|
* />
|
|
127
140
|
* ```
|
|
128
141
|
*/
|
|
129
|
-
export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
|
|
142
|
+
export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, interactiveRef, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
|
|
130
143
|
export declare namespace Item {
|
|
131
144
|
var displayName: string;
|
|
132
145
|
}
|
package/dist/Item/Item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BA4MX;yBArOe,IAAI"}
|
package/dist/Item/Item.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Item.tsx
|
|
7
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens
|
|
7
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
|
|
8
8
|
* @output Exports Item component, ItemProps type
|
|
9
9
|
* @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
|
|
10
10
|
*
|
|
@@ -15,12 +15,15 @@
|
|
|
15
15
|
* - /apps/storybook/stories/Item.stories.tsx
|
|
16
16
|
* - /packages/cli/templates/blocks/components/Item/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
+
import { useRef } from 'react';
|
|
18
19
|
import * as stylex from '@stylexjs/stylex';
|
|
19
20
|
import "../theme/tokens.stylex.js";
|
|
20
21
|
import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
21
|
-
import { mergeProps } from "../utils/index.js";
|
|
22
|
+
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
22
23
|
import { computeTargetAndRel } from "../Link/computeTargetAndRel.js";
|
|
23
24
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
25
|
+
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
26
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
24
27
|
import { themeProps } from "../utils/themeProps.js";
|
|
25
28
|
|
|
26
29
|
// =============================================================================
|
|
@@ -176,6 +179,7 @@ export function Item({
|
|
|
176
179
|
labelLines,
|
|
177
180
|
descriptionLines,
|
|
178
181
|
onClick,
|
|
182
|
+
interactiveRef,
|
|
179
183
|
href,
|
|
180
184
|
target: targetFromProps,
|
|
181
185
|
rel: relFromProps,
|
|
@@ -190,7 +194,23 @@ export function Item({
|
|
|
190
194
|
...restProps
|
|
191
195
|
}) {
|
|
192
196
|
const LinkComponent = useLinkComponent();
|
|
193
|
-
|
|
197
|
+
|
|
198
|
+
// Delegation mode: the row is an enlarged click/tap target for a nested
|
|
199
|
+
// control (e.g. a checkbox) that owns the keyboard access and action. The
|
|
200
|
+
// control is the row's only tab stop; the row proxies surface clicks to it.
|
|
201
|
+
const isDelegate = interactiveRef != null;
|
|
202
|
+
const containerRef = useRef(null);
|
|
203
|
+
// Only onClick is needed: onMouseUp handles middle-click href navigation,
|
|
204
|
+
// which delegation mode never has (href is ignored here).
|
|
205
|
+
const {
|
|
206
|
+
onClick: delegatedOnClick
|
|
207
|
+
} = useClickableContainer({
|
|
208
|
+
containerRef,
|
|
209
|
+
interactiveRef: interactiveRef ?? undefined,
|
|
210
|
+
disabled: isDisabled
|
|
211
|
+
});
|
|
212
|
+
useDevWarning('Item', '`interactiveRef` is mutually exclusive with `onClick`/`href`. In ' + 'delegation mode the row only forwards clicks to the referenced control, ' + 'so `onClick`/`href` are ignored. Drop one of them.', isDelegate && (onClick != null || href != null));
|
|
213
|
+
const isInteractive = onClick != null || href != null || isDelegate;
|
|
194
214
|
const {
|
|
195
215
|
target,
|
|
196
216
|
rel
|
|
@@ -233,7 +253,12 @@ export function Item({
|
|
|
233
253
|
className: "x3psx0u x78zum5"
|
|
234
254
|
},
|
|
235
255
|
children: startContent
|
|
236
|
-
}), hasParentRole
|
|
256
|
+
}), hasParentRole || isDelegate ?
|
|
257
|
+
/*#__PURE__*/
|
|
258
|
+
// Delegation mode (and parent-role mode) put the label in a plain span:
|
|
259
|
+
// keyboard access lives on the nested control, so no invisible
|
|
260
|
+
// button/anchor is rendered and the row adds no second tab stop.
|
|
261
|
+
_jsx("span", {
|
|
237
262
|
...{
|
|
238
263
|
0: {
|
|
239
264
|
className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
|
|
@@ -294,7 +319,7 @@ export function Item({
|
|
|
294
319
|
})]
|
|
295
320
|
});
|
|
296
321
|
return /*#__PURE__*/_jsx(Component, {
|
|
297
|
-
ref: ref,
|
|
322
|
+
ref: isDelegate ? mergeRefs(ref, containerRef) : ref,
|
|
298
323
|
...restProps,
|
|
299
324
|
"aria-selected": allowsAriaSelected && isSelected || undefined
|
|
300
325
|
// aria-selected is invalid on roles that don't permit it (listitem, a
|
|
@@ -309,7 +334,7 @@ export function Item({
|
|
|
309
334
|
align
|
|
310
335
|
}), stylex.props(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && styles.focusVisibleOutline, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, xstyle), className, style),
|
|
311
336
|
role: role,
|
|
312
|
-
onClick: hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
|
|
337
|
+
onClick: isDelegate ? delegatedOnClick : hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
|
|
313
338
|
children: innerContent
|
|
314
339
|
});
|
|
315
340
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAwVf;yBAxWe,QAAQ"}
|
|
@@ -136,6 +136,7 @@ export function Lightbox({
|
|
|
136
136
|
}) {
|
|
137
137
|
const t = useTranslator();
|
|
138
138
|
const dialogRef = useRef(null);
|
|
139
|
+
const containerRef = useRef(null);
|
|
139
140
|
const imageWrapperRef = useRef(null);
|
|
140
141
|
const triggerElementRef = useRef(null);
|
|
141
142
|
|
|
@@ -237,9 +238,18 @@ export function Lightbox({
|
|
|
237
238
|
handleClose();
|
|
238
239
|
}, [handleClose]);
|
|
239
240
|
|
|
240
|
-
// Backdrop click
|
|
241
|
+
// Backdrop click. The layout container fills the whole transparent dialog,
|
|
242
|
+
// so clicks on the visual backdrop (the dark area around the media) land on
|
|
243
|
+
// the container, never on the dialog element itself — treat both as the
|
|
244
|
+
// backdrop. A pan drag that ends over the backdrop still fires a click on
|
|
245
|
+
// the common ancestor; ignore it so releasing a drag doesn't dismiss.
|
|
246
|
+
const didDragRef = useRef(false);
|
|
241
247
|
const handleBackdropClick = useCallback(e => {
|
|
242
|
-
if (
|
|
248
|
+
if (didDragRef.current) {
|
|
249
|
+
didDragRef.current = false;
|
|
250
|
+
return;
|
|
251
|
+
}
|
|
252
|
+
if (e.target === e.currentTarget || e.target === containerRef.current) {
|
|
243
253
|
handleClose();
|
|
244
254
|
}
|
|
245
255
|
}, [handleClose]);
|
|
@@ -293,6 +303,7 @@ export function Lightbox({
|
|
|
293
303
|
return;
|
|
294
304
|
}
|
|
295
305
|
setIsDragging(true);
|
|
306
|
+
didDragRef.current = false;
|
|
296
307
|
dragStartRef.current = {
|
|
297
308
|
x: e.clientX,
|
|
298
309
|
y: e.clientY,
|
|
@@ -305,6 +316,7 @@ export function Lightbox({
|
|
|
305
316
|
return;
|
|
306
317
|
}
|
|
307
318
|
const handlePointerMove = e => {
|
|
319
|
+
didDragRef.current = true;
|
|
308
320
|
const dx = e.clientX - dragStartRef.current.x;
|
|
309
321
|
const dy = e.clientY - dragStartRef.current.y;
|
|
310
322
|
setPan({
|
|
@@ -342,6 +354,7 @@ export function Lightbox({
|
|
|
342
354
|
...mergeProps(themeProps('lightbox'), stylex.props(styles.dialog, xstyle), className, style),
|
|
343
355
|
...props,
|
|
344
356
|
children: /*#__PURE__*/_jsxs("div", {
|
|
357
|
+
ref: containerRef,
|
|
345
358
|
...{
|
|
346
359
|
className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
|
|
347
360
|
},
|
package/dist/List/ListItem.d.ts
CHANGED
|
@@ -49,6 +49,16 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
|
|
|
49
49
|
* Automatically enables hover/press styles when provided.
|
|
50
50
|
*/
|
|
51
51
|
onClick?: (e: React.MouseEvent) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Ref to a nested control inside the item (e.g. a checkbox in
|
|
54
|
+
* `startContent`) that already provides the item's keyboard access and
|
|
55
|
+
* action. When set, the item becomes an enlarged click/tap target that
|
|
56
|
+
* delegates surface clicks to that control via the `useClickableContainer`
|
|
57
|
+
* pattern: it renders no invisible button/anchor, so the row adds no second
|
|
58
|
+
* tab stop (WCAG 4.1.2 — one focusable control per option). Mutually
|
|
59
|
+
* exclusive with `onClick`/`href` — when set those are ignored.
|
|
60
|
+
*/
|
|
61
|
+
interactiveRef?: React.RefObject<HTMLElement | null>;
|
|
52
62
|
/**
|
|
53
63
|
* URL for link items. Renders an invisible anchor element.
|
|
54
64
|
* Automatically enables hover/press styles when provided.
|
|
@@ -88,7 +98,7 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
|
|
|
88
98
|
* <ListItem label="Docs" href="/docs" target="_blank" rel="noreferrer" />
|
|
89
99
|
* ```
|
|
90
100
|
*/
|
|
91
|
-
export declare function ListItem({ label, description, startContent, endContent, onClick, href, target, rel, isDisabled, isSelected, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
|
|
101
|
+
export declare function ListItem({ label, description, startContent, endContent, onClick, interactiveRef, href, target, rel, isDisabled, isSelected, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
|
|
92
102
|
export declare namespace ListItem {
|
|
93
103
|
var displayName: string;
|
|
94
104
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BA+Cf;yBAhEe,QAAQ"}
|
package/dist/List/ListItem.js
CHANGED
|
@@ -85,6 +85,7 @@ export function ListItem({
|
|
|
85
85
|
startContent,
|
|
86
86
|
endContent,
|
|
87
87
|
onClick,
|
|
88
|
+
interactiveRef,
|
|
88
89
|
href,
|
|
89
90
|
target,
|
|
90
91
|
rel,
|
|
@@ -133,6 +134,7 @@ export function ListItem({
|
|
|
133
134
|
description: description,
|
|
134
135
|
endContent: endContent,
|
|
135
136
|
onClick: onClick,
|
|
137
|
+
interactiveRef: interactiveRef,
|
|
136
138
|
href: href,
|
|
137
139
|
target: target,
|
|
138
140
|
rel: rel,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file MetadataList.tsx
|
|
3
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens, MetadataListContext
|
|
3
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, MetadataListContext, i18n (useTranslator)
|
|
4
4
|
* @output Exports MetadataList component, MetadataListProps, MetadataListColumns types
|
|
5
5
|
* @position Core implementation; consumed by index.ts, tested by MetadataList.test.tsx
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetadataList.d.ts","sourceRoot":"","sources":["../../src/MetadataList/MetadataList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAqC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQzE,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"MetadataList.d.ts","sourceRoot":"","sources":["../../src/MetadataList/MetadataList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAqC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQzE,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuFD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAkB,EAClB,KAAK,EACL,aAAa,EACb,WAAwB,EACxB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,iBAAiB,+BAuGnB;yBAnHe,YAAY"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file MetadataList.tsx
|
|
7
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens, MetadataListContext
|
|
7
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, MetadataListContext, i18n (useTranslator)
|
|
8
8
|
* @output Exports MetadataList component, MetadataListProps, MetadataListColumns types
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by MetadataList.test.tsx
|
|
10
10
|
*
|
|
@@ -22,6 +22,7 @@ import { spacingVars, colorVars, typeScaleVars, fontWeightVars } from "../theme/
|
|
|
22
22
|
import { MetadataListContext } from "./MetadataListContext.js";
|
|
23
23
|
import { mergeProps } from "../utils/index.js";
|
|
24
24
|
import { themeProps } from "../utils/themeProps.js";
|
|
25
|
+
import { useTranslator } from "../i18n/index.js";
|
|
25
26
|
|
|
26
27
|
// =============================================================================
|
|
27
28
|
// Types
|
|
@@ -119,6 +120,7 @@ export function MetadataList({
|
|
|
119
120
|
const labelConfig = label ?? (isMultiColumn ? LABEL_TOP : LABEL_START);
|
|
120
121
|
const [isShowAll, setIsShowAll] = useState(false);
|
|
121
122
|
const contentId = useId();
|
|
123
|
+
const t = useTranslator();
|
|
122
124
|
const contextValue = useMemo(() => ({
|
|
123
125
|
labelConfig: orientation === 'horizontal' ? LABEL_TOP : labelConfig,
|
|
124
126
|
orientation
|
|
@@ -182,7 +184,7 @@ export function MetadataList({
|
|
|
182
184
|
...{
|
|
183
185
|
className: "xjyslct x15nmkw0 x1ypdohk xqwr325 xjm74w1 xw6l6zx x1e4wzip xjb2p0i x1yc453h xqcrz7y"
|
|
184
186
|
},
|
|
185
|
-
children: isShowAll ? '
|
|
187
|
+
children: isShowAll ? t('@astryx.metadataList.showLess') : t('@astryx.metadataList.showMore')
|
|
186
188
|
})]
|
|
187
189
|
})
|
|
188
190
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAiBlB,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAWjB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -606,10 +606,17 @@ export function MultiSelector({
|
|
|
606
606
|
const isSelectAll = item.value === SELECT_ALL_VALUE;
|
|
607
607
|
const isSelected = isSelectAll ? allEnabledSelected : optimisticValue.includes(item.value);
|
|
608
608
|
const checkboxValue = isSelectAll ? selectAllState : isSelected;
|
|
609
|
+
// aria-selected="mixed" is invalid on role="option", and the tri-state
|
|
610
|
+
// checkbox is inert/decorative, so the indeterminate state must be
|
|
611
|
+
// conveyed through the option's accessible name (WCAG 4.1.2).
|
|
612
|
+
const isPartiallySelected = isSelectAll && selectAllState === 'indeterminate';
|
|
609
613
|
return /*#__PURE__*/_jsxs("div", {
|
|
610
614
|
id: getItemId(flatIndex),
|
|
611
615
|
role: "option",
|
|
612
616
|
"aria-selected": isSelected,
|
|
617
|
+
"aria-label": isPartiallySelected ? t('@astryx.multiSelector.selectAllPartiallySelected', {
|
|
618
|
+
label: selectAllLabel
|
|
619
|
+
}) : undefined,
|
|
613
620
|
"aria-disabled": item.disabled,
|
|
614
621
|
onClick: () => {
|
|
615
622
|
if (!item.disabled) {
|
|
@@ -643,7 +650,7 @@ export function MultiSelector({
|
|
|
643
650
|
children: item.label ?? item.value
|
|
644
651
|
})]
|
|
645
652
|
}, item.value);
|
|
646
|
-
}, [renderOption, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, getItemId, handleNavigableToggle, onItemMouseEnter, size]);
|
|
653
|
+
}, [renderOption, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
|
|
647
654
|
|
|
648
655
|
// Render all options. Uses sortedItems as the single source of truth for
|
|
649
656
|
// item order — no independent sorting here. Structural elements (dividers,
|
|
@@ -667,9 +674,13 @@ export function MultiSelector({
|
|
|
667
674
|
cursor = 1;
|
|
668
675
|
}
|
|
669
676
|
|
|
670
|
-
// Empty state — no real items to show
|
|
677
|
+
// Empty state — no real items to show. role="presentation" keeps the
|
|
678
|
+
// message out of the listbox's accessibility tree (role="listbox" only
|
|
679
|
+
// permits option/group children); the no-results outcome is announced
|
|
680
|
+
// via the result-count live region instead.
|
|
671
681
|
if (realItemCount === 0) {
|
|
672
682
|
elements.push(/*#__PURE__*/_jsx("div", {
|
|
683
|
+
role: "presentation",
|
|
673
684
|
...{
|
|
674
685
|
className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
|
|
675
686
|
},
|
|
@@ -734,6 +745,10 @@ export function MultiSelector({
|
|
|
734
745
|
flushPending();
|
|
735
746
|
return elements;
|
|
736
747
|
}, [options, renderItem, sortedItems, searchQuery, hasSelectAll]);
|
|
748
|
+
|
|
749
|
+
// The detached message box renders its own leading status icon, so the
|
|
750
|
+
// on-field icon would duplicate it — keep the chevron indicator instead.
|
|
751
|
+
const showStatusIcon = status != null && statusVariant !== 'detached';
|
|
737
752
|
const multiSelectorContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
738
753
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
739
754
|
ref: el => {
|
|
@@ -782,7 +797,7 @@ export function MultiSelector({
|
|
|
782
797
|
onKeyDown: onKeyDown,
|
|
783
798
|
tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
|
|
784
799
|
...{
|
|
785
|
-
className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz
|
|
800
|
+
className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz xh6dtrn"
|
|
786
801
|
},
|
|
787
802
|
children: /*#__PURE__*/_jsx("span", {
|
|
788
803
|
...{
|
|
@@ -835,8 +850,8 @@ export function MultiSelector({
|
|
|
835
850
|
3: {
|
|
836
851
|
className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0 xq2gx43"
|
|
837
852
|
}
|
|
838
|
-
}[!!(!
|
|
839
|
-
children:
|
|
853
|
+
}[!!(!showStatusIcon && popover.isOpen) << 1 | !!showStatusIcon << 0],
|
|
854
|
+
children: showStatusIcon ? /*#__PURE__*/_jsx(Icon, {
|
|
840
855
|
icon: STATUS_ICON_MAP[status.type],
|
|
841
856
|
size: "sm",
|
|
842
857
|
color: STATUS_ICON_COLOR_MAP[status.type]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6J5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAsHpB;yBAlIe,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;
|
|
1
|
+
{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA+GD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,GAAG,IAAI,EACR,EAAE,yBAAyB,qBAiE3B;yBA3Ee,oBAAoB"}
|