@astryxdesign/core 0.2.0-canary.85f5022 → 0.2.0-canary.bdc7cde
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/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/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/Item/Item.d.ts +16 -3
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +31 -6
- 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 +13 -2
- 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 +5 -0
- 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.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.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/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 +16 -3
- package/dist/astryx.umd.js +48 -48
- package/dist/astryx.umd.js.map +4 -4
- 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/locales/en.json +24 -0
- package/locales/pseudo.json +18 -0
- package/package.json +1 -1
- 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/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/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 +20 -2
- 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/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 +76 -0
- package/src/MultiSelector/MultiSelector.tsx +22 -2
- 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 +22 -0
- package/src/Selector/Selector.tsx +8 -1
- 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 +3 -1
- 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/Typeahead/BaseTypeahead.tsx +12 -0
- package/src/Typeahead/Typeahead.test.tsx +62 -0
- package/src/Typeahead/Typeahead.tsx +6 -0
- package/src/__tests__/forcedColors.ts +60 -0
- package/src/hooks/useKeyboardHint.test.tsx +22 -0
- package/src/hooks/useKeyboardHint.tsx +6 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file AvatarGroupOverflow.tsx
|
|
3
|
-
* @input Uses React, StyleX, AvatarGroupContext
|
|
3
|
+
* @input Uses React, StyleX, AvatarGroupContext, i18n (useTranslator)
|
|
4
4
|
* @output Exports AvatarGroupOverflow for overflow indicator
|
|
5
5
|
* @position Slot component used inside AvatarGroup
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CA0DtC;yBAnEe,mBAAmB"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* @file AvatarGroupOverflow.tsx
|
|
6
|
-
* @input Uses React, StyleX, AvatarGroupContext
|
|
6
|
+
* @input Uses React, StyleX, AvatarGroupContext, i18n (useTranslator)
|
|
7
7
|
* @output Exports AvatarGroupOverflow for overflow indicator
|
|
8
8
|
* @position Slot component used inside AvatarGroup
|
|
9
9
|
*
|
|
@@ -19,6 +19,7 @@ import { colorVars, typographyVars, fontWeightVars, radiusVars, spacingVars } fr
|
|
|
19
19
|
import { mergeProps } from "../utils/index.js";
|
|
20
20
|
import { useAvatarGroup } from "./AvatarGroupContext.js";
|
|
21
21
|
import { themeProps } from "../utils/themeProps.js";
|
|
22
|
+
import { useTranslator } from "../i18n/index.js";
|
|
22
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
24
|
const BORDER_WIDTH = 2;
|
|
24
25
|
const OVERFLOW_FONT_RATIO = 0.35;
|
|
@@ -105,10 +106,13 @@ export function AvatarGroupOverflow({
|
|
|
105
106
|
style,
|
|
106
107
|
...rest
|
|
107
108
|
}) {
|
|
109
|
+
const t = useTranslator();
|
|
108
110
|
const group = useAvatarGroup();
|
|
109
111
|
const numericSize = group?.numericSize ?? 36;
|
|
110
112
|
const overlap = group?.overlap ?? 0;
|
|
111
|
-
const label =
|
|
113
|
+
const label = t('@astryx.avatarGroup.overflow', {
|
|
114
|
+
count
|
|
115
|
+
});
|
|
112
116
|
const content = children ?? `+${count}`;
|
|
113
117
|
if (onClick) {
|
|
114
118
|
return /*#__PURE__*/_jsx("button", {
|
package/dist/Button/Button.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Button.tsx
|
|
3
|
-
* @input Uses React, ButtonHTMLAttributes, ReactNode
|
|
3
|
+
* @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator)
|
|
4
4
|
* @output Exports Button component, ButtonProps, ButtonVariant types
|
|
5
5
|
* @position Core implementation; consumed by index.ts, tested by Button.test.tsx
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAsB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Button.tsx
|
|
7
|
-
* @input Uses React, ButtonHTMLAttributes, ReactNode
|
|
7
|
+
* @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator)
|
|
8
8
|
* @output Exports Button component, ButtonProps, ButtonVariant types
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by Button.test.tsx
|
|
10
10
|
*
|
|
@@ -30,6 +30,7 @@ import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
|
30
30
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
31
31
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
32
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
33
|
+
import { useTranslator } from "../i18n/index.js";
|
|
33
34
|
|
|
34
35
|
/**
|
|
35
36
|
* Base button styles
|
|
@@ -376,6 +377,7 @@ export function Button({
|
|
|
376
377
|
ref,
|
|
377
378
|
...props
|
|
378
379
|
}) {
|
|
380
|
+
const t = useTranslator();
|
|
379
381
|
const size = useSize(sizeProp, 'md');
|
|
380
382
|
const buttonGroup = useButtonGroup();
|
|
381
383
|
const [isPending, startTransition] = useTransition();
|
|
@@ -498,7 +500,7 @@ export function Button({
|
|
|
498
500
|
}), /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
499
501
|
role: "status",
|
|
500
502
|
"aria-live": "polite",
|
|
501
|
-
children: isLoadingState ? '
|
|
503
|
+
children: isLoadingState ? t('@astryx.button.loading') : ''
|
|
502
504
|
})]
|
|
503
505
|
});
|
|
504
506
|
|
|
@@ -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;
|
|
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;AA6JhD,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,+BA0NpB;yBAnPe,aAAa"}
|
|
@@ -102,7 +102,7 @@ const styles = {
|
|
|
102
102
|
},
|
|
103
103
|
checkmark: {
|
|
104
104
|
k1xSpc: "x1s85apg",
|
|
105
|
-
kMwMTN: "x17wrial",
|
|
105
|
+
kMwMTN: "x17wrial xs5hli",
|
|
106
106
|
$$css: true
|
|
107
107
|
},
|
|
108
108
|
checkmarkVisible: {
|
|
@@ -111,7 +111,7 @@ const styles = {
|
|
|
111
111
|
},
|
|
112
112
|
indeterminateMark: {
|
|
113
113
|
k1xSpc: "x1s85apg",
|
|
114
|
-
kWkggS: "x1azo05",
|
|
114
|
+
kWkggS: "x1azo05 xwvh9j7",
|
|
115
115
|
kaIpWk: "xjspbzw",
|
|
116
116
|
$$css: true
|
|
117
117
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAqIvB;yBArJe,gBAAgB"}
|
|
@@ -15,11 +15,10 @@
|
|
|
15
15
|
* - /apps/storybook/stories/CheckboxList.stories.tsx
|
|
16
16
|
* - /packages/cli/templates/blocks/components/CheckboxList/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { use } from 'react';
|
|
18
|
+
import { use, useRef } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars } from "../theme/tokens.stylex.js";
|
|
22
|
-
import { composeEventHandlers } from "../utils/index.js";
|
|
23
22
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
24
23
|
import { CheckboxInput } from "../CheckboxInput/CheckboxInput.js";
|
|
25
24
|
import { ListItem } from "../List/ListItem.js";
|
|
@@ -122,6 +121,14 @@ export function CheckboxListItem({
|
|
|
122
121
|
|
|
123
122
|
// Whether this item is interactive (has a toggle handler)
|
|
124
123
|
const isInteractive = !effectiveReadOnly && (ctx != null || onCheck != null);
|
|
124
|
+
|
|
125
|
+
// The checkbox is the row's single keyboard control and action. The row is
|
|
126
|
+
// an enlarged click/tap target that delegates surface clicks to it via
|
|
127
|
+
// ListItem's `interactiveRef` (useClickableContainer), so each option is
|
|
128
|
+
// exactly one tab stop. Delegate whenever the row should respond to clicks:
|
|
129
|
+
// a toggleable item, or one carrying a consumer `onClick`.
|
|
130
|
+
const checkboxRef = useRef(null);
|
|
131
|
+
const hasRowInteraction = isInteractive || onClickProp != null;
|
|
125
132
|
const handleToggle = () => {
|
|
126
133
|
if (effectiveDisabled || effectiveReadOnly || isBusy) {
|
|
127
134
|
return;
|
|
@@ -147,17 +154,25 @@ export function CheckboxListItem({
|
|
|
147
154
|
label: label,
|
|
148
155
|
description: description,
|
|
149
156
|
endContent: endContent,
|
|
150
|
-
isDisabled: effectiveDisabled
|
|
151
|
-
|
|
157
|
+
isDisabled: effectiveDisabled
|
|
158
|
+
// Delegate row clicks to the checkbox instead of wiring onClick (which
|
|
159
|
+
// would add an invisible row button = a second tab stop). The checkbox
|
|
160
|
+
// stays the option's sole focusable control (WCAG 4.1.2 / APG checkbox
|
|
161
|
+
// pattern). A consumer onClick rides on the checkbox itself (below), so
|
|
162
|
+
// it still fires for both direct and delegated (row-surface) clicks.
|
|
163
|
+
,
|
|
164
|
+
interactiveRef: hasRowInteraction ? checkboxRef : undefined,
|
|
152
165
|
"aria-busy": isBusy || undefined,
|
|
153
166
|
xstyle: [resolvedChecked === true && !effectiveDisabled && !effectiveReadOnly && styles.selected, xstyle],
|
|
154
167
|
className: className,
|
|
155
168
|
style: style,
|
|
156
169
|
startContent: /*#__PURE__*/_jsx(CheckboxInput, {
|
|
170
|
+
ref: checkboxRef,
|
|
157
171
|
label: checkboxLabel,
|
|
158
172
|
isLabelHidden: true,
|
|
159
173
|
value: resolvedChecked,
|
|
160
174
|
onChange: () => handleToggle(),
|
|
175
|
+
onClick: onClickProp,
|
|
161
176
|
isDisabled: effectiveDisabled,
|
|
162
177
|
isReadOnly: effectiveReadOnly,
|
|
163
178
|
isLoading: isBusy,
|
|
@@ -437,7 +437,7 @@ export function CodeBlock({
|
|
|
437
437
|
setCopied(true);
|
|
438
438
|
// Swapping the button's aria-label alone isn't reliably announced by
|
|
439
439
|
// screen readers, so confirm the copy via a polite live region.
|
|
440
|
-
announce('
|
|
440
|
+
announce(t('@astryx.codeBlock.copied'));
|
|
441
441
|
onCopy?.();
|
|
442
442
|
// Restart the reset timer on every copy — otherwise a rapid re-copy
|
|
443
443
|
// is reverted early by the previous click's timer.
|
|
@@ -451,7 +451,7 @@ export function CodeBlock({
|
|
|
451
451
|
} catch {
|
|
452
452
|
// Clipboard failures leave the copied state unchanged.
|
|
453
453
|
}
|
|
454
|
-
}, [code, onCopy, announce]);
|
|
454
|
+
}, [code, onCopy, announce, t]);
|
|
455
455
|
const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
|
|
456
456
|
// Digits in the largest line number — sizes the gutter column width.
|
|
457
457
|
const maxLineDigits = String(lines.length).length;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA0BrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAqDtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA0BrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAqDtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA4RlB;yBA1Se,WAAW"}
|
|
@@ -253,12 +253,21 @@ export function ContextMenu({
|
|
|
253
253
|
}
|
|
254
254
|
return;
|
|
255
255
|
}
|
|
256
|
+
// APG menu pattern: Tab closes the menu. Menu items are tabIndex={-1}
|
|
257
|
+
// so Tab would otherwise leak focus into the page while the menu stayed
|
|
258
|
+
// open (menus-5). Do NOT preventDefault — closing restores focus to the
|
|
259
|
+
// previously focused element, and the browser's default Tab then
|
|
260
|
+
// continues from there to the next element.
|
|
261
|
+
if (e.key === 'Tab') {
|
|
262
|
+
closeMenu();
|
|
263
|
+
return;
|
|
264
|
+
}
|
|
256
265
|
if (typeahead.onKeyDown(e)) {
|
|
257
266
|
e.preventDefault();
|
|
258
267
|
return;
|
|
259
268
|
}
|
|
260
269
|
listNavKeyDown(e);
|
|
261
|
-
}, [listNavKeyDown, typeahead, ownsEvent]);
|
|
270
|
+
}, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
|
|
262
271
|
|
|
263
272
|
// Place the zero-size cursor anchor at a point in the trigger's local
|
|
264
273
|
// coordinate space and open the menu. Positioning the anchor inside the
|
|
@@ -22,16 +22,13 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
|
|
|
22
22
|
*/
|
|
23
23
|
onChange: (value: string) => void;
|
|
24
24
|
/**
|
|
25
|
-
* Accessible
|
|
26
|
-
*
|
|
27
|
-
*
|
|
25
|
+
* Accessible name for the group, announced by screen readers so the radios
|
|
26
|
+
* read as a named set (e.g. "Sort by"). Applied as the group's `aria-label`.
|
|
27
|
+
* Required -- an unnamed radio group is an accessibility defect. Pass
|
|
28
|
+
* `aria-labelledby` (via base props) instead if the name already exists as a
|
|
29
|
+
* visible element on the page.
|
|
28
30
|
*/
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* The id of an element that labels the group, as an alternative to
|
|
32
|
-
* `aria-label`.
|
|
33
|
-
*/
|
|
34
|
-
'aria-labelledby'?: string;
|
|
31
|
+
label: string;
|
|
35
32
|
/**
|
|
36
33
|
* Whether selecting a value closes the menu. Radio items default to closing
|
|
37
34
|
* on selection (a single-choice commit), unlike checkbox items which stay
|
|
@@ -54,14 +51,14 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
|
|
|
54
51
|
* DropdownMenuRadioItem,
|
|
55
52
|
* } from '@astryxdesign/core/DropdownMenu';
|
|
56
53
|
* <DropdownMenu button={{label: 'Sort'}}>
|
|
57
|
-
* <DropdownMenuRadioGroup value={sort} onChange={setSort}
|
|
54
|
+
* <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
|
|
58
55
|
* <DropdownMenuRadioItem value="newest" label="Newest" />
|
|
59
56
|
* <DropdownMenuRadioItem value="oldest" label="Oldest" />
|
|
60
57
|
* </DropdownMenuRadioGroup>
|
|
61
58
|
* </DropdownMenu>
|
|
62
59
|
* ```
|
|
63
60
|
*/
|
|
64
|
-
export declare function DropdownMenuRadioGroup({ value, onChange, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
|
|
61
|
+
export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
|
|
65
62
|
export declare namespace DropdownMenuRadioGroup {
|
|
66
63
|
var displayName: string;
|
|
67
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC
|
|
1
|
+
{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;yBA1Be,sBAAsB"}
|
|
@@ -30,7 +30,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
30
30
|
* DropdownMenuRadioItem,
|
|
31
31
|
* } from '@astryxdesign/core/DropdownMenu';
|
|
32
32
|
* <DropdownMenu button={{label: 'Sort'}}>
|
|
33
|
-
* <DropdownMenuRadioGroup value={sort} onChange={setSort}
|
|
33
|
+
* <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
|
|
34
34
|
* <DropdownMenuRadioItem value="newest" label="Newest" />
|
|
35
35
|
* <DropdownMenuRadioItem value="oldest" label="Oldest" />
|
|
36
36
|
* </DropdownMenuRadioGroup>
|
|
@@ -40,6 +40,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
40
40
|
export function DropdownMenuRadioGroup({
|
|
41
41
|
value,
|
|
42
42
|
onChange,
|
|
43
|
+
label,
|
|
43
44
|
hasCloseOnSelect = true,
|
|
44
45
|
children,
|
|
45
46
|
className,
|
|
@@ -54,6 +55,7 @@ export function DropdownMenuRadioGroup({
|
|
|
54
55
|
return /*#__PURE__*/_jsx("div", {
|
|
55
56
|
...rest,
|
|
56
57
|
role: "group",
|
|
58
|
+
"aria-label": label,
|
|
57
59
|
...mergeProps({
|
|
58
60
|
className: "x78zum5 xdt5ytf x1lsbc85"
|
|
59
61
|
}, {
|
|
@@ -56,7 +56,7 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
|
|
|
56
56
|
*
|
|
57
57
|
* @example
|
|
58
58
|
* ```
|
|
59
|
-
* <DropdownMenuRadioGroup value={sort} onChange={setSort}
|
|
59
|
+
* <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
|
|
60
60
|
* <DropdownMenuRadioItem value="newest" label="Newest" />
|
|
61
61
|
* <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
|
|
62
62
|
* </DropdownMenuRadioGroup>
|
|
@@ -107,7 +107,7 @@ const dotSizeStyles = {
|
|
|
107
107
|
*
|
|
108
108
|
* @example
|
|
109
109
|
* ```
|
|
110
|
-
* <DropdownMenuRadioGroup value={sort} onChange={setSort}
|
|
110
|
+
* <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
|
|
111
111
|
* <DropdownMenuRadioItem value="newest" label="Newest" />
|
|
112
112
|
* <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
|
|
113
113
|
* </DropdownMenuRadioGroup>
|
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
|
}
|
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":"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
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
|