@astryxdesign/core 0.4.6 → 0.4.7-canary.29be96d

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.
Files changed (197) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/BottomSheet/BottomSheet.d.ts +1 -0
  3. package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
  4. package/dist/BottomSheet/BottomSheet.js +54 -15
  5. package/dist/BottomSheet/BottomSheetEdgeTint.d.ts +6 -0
  6. package/dist/BottomSheet/BottomSheetEdgeTint.d.ts.map +1 -0
  7. package/dist/BottomSheet/BottomSheetEdgeTint.js +62 -0
  8. package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
  9. package/dist/BottomSheet/BottomSheetPanel.js +1 -0
  10. package/dist/BottomSheet/BottomSheetSwitcher.d.ts +1 -0
  11. package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
  12. package/dist/BottomSheet/BottomSheetSwitcher.js +10 -4
  13. package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
  14. package/dist/BottomSheet/useSheetGestures.js +23 -5
  15. package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
  16. package/dist/Breadcrumbs/BreadcrumbItem.js +5 -5
  17. package/dist/Calendar/Calendar.d.ts +3 -1
  18. package/dist/Calendar/Calendar.d.ts.map +1 -1
  19. package/dist/Calendar/Calendar.js +13 -14
  20. package/dist/Calendar/getInitialFocusDate.d.ts +46 -0
  21. package/dist/Calendar/getInitialFocusDate.d.ts.map +1 -0
  22. package/dist/Calendar/getInitialFocusDate.js +62 -0
  23. package/dist/Chat/ChatMessageList.d.ts +22 -3
  24. package/dist/Chat/ChatMessageList.d.ts.map +1 -1
  25. package/dist/Chat/ChatMessageList.js +6 -3
  26. package/dist/DateInput/TouchDateField.d.ts.map +1 -1
  27. package/dist/DateInput/TouchDateField.js +34 -1
  28. package/dist/Dialog/Dialog.d.ts +7 -1
  29. package/dist/Dialog/Dialog.d.ts.map +1 -1
  30. package/dist/Dialog/Dialog.js +48 -22
  31. package/dist/Heading/Heading.d.ts.map +1 -1
  32. package/dist/Heading/Heading.js +6 -2
  33. package/dist/Kbd/Kbd.d.ts.map +1 -1
  34. package/dist/Kbd/Kbd.js +10 -3
  35. package/dist/Markdown/index.d.ts +1 -1
  36. package/dist/Markdown/index.d.ts.map +1 -1
  37. package/dist/Markdown/parser.d.ts +38 -1
  38. package/dist/Markdown/parser.d.ts.map +1 -1
  39. package/dist/Markdown/parser.js +149 -23
  40. package/dist/MultiSelector/MultiSelector.d.ts +15 -1
  41. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  42. package/dist/MultiSelector/MultiSelector.js +17 -6
  43. package/dist/MultiSelector/index.d.ts +1 -1
  44. package/dist/MultiSelector/index.d.ts.map +1 -1
  45. package/dist/Selector/Selector.d.ts.map +1 -1
  46. package/dist/Selector/Selector.js +5 -0
  47. package/dist/Stepper/Step.d.ts +140 -0
  48. package/dist/Stepper/Step.d.ts.map +1 -0
  49. package/dist/Stepper/Step.js +1045 -0
  50. package/dist/Stepper/StepStatus.d.ts +24 -0
  51. package/dist/Stepper/StepStatus.d.ts.map +1 -0
  52. package/dist/Stepper/StepStatus.js +1 -0
  53. package/dist/Stepper/Stepper.d.ts +93 -0
  54. package/dist/Stepper/Stepper.d.ts.map +1 -0
  55. package/dist/Stepper/Stepper.js +184 -0
  56. package/dist/Stepper/StepperContext.d.ts +41 -0
  57. package/dist/Stepper/StepperContext.d.ts.map +1 -0
  58. package/dist/Stepper/StepperContext.js +34 -0
  59. package/dist/Stepper/index.d.ts +8 -0
  60. package/dist/Stepper/index.d.ts.map +1 -0
  61. package/dist/Stepper/index.js +7 -0
  62. package/dist/Stepper/stepper.stylex.d.ts +15 -0
  63. package/dist/Stepper/stepper.stylex.d.ts.map +1 -0
  64. package/dist/Stepper/stepper.stylex.js +20 -0
  65. package/dist/TabList/Tab.d.ts.map +1 -1
  66. package/dist/TabList/Tab.js +5 -1
  67. package/dist/Table/BaseTable.d.ts.map +1 -1
  68. package/dist/Table/BaseTable.js +4 -1
  69. package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
  70. package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +20 -8
  71. package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map +1 -1
  72. package/dist/Table/plugins/rowStatus/useTableRowStatus.js +10 -3
  73. package/dist/Table/plugins/selection/useTableSelection.d.ts +16 -0
  74. package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
  75. package/dist/Table/plugins/selection/useTableSelection.js +19 -5
  76. package/dist/Table/types.d.ts +22 -4
  77. package/dist/Table/types.d.ts.map +1 -1
  78. package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
  79. package/dist/Table/useBaseTablePlugins.js +5 -0
  80. package/dist/Text/Text.d.ts.map +1 -1
  81. package/dist/Text/Text.js +6 -2
  82. package/dist/astryx.css +41 -1
  83. package/dist/hooks/index.d.ts +1 -0
  84. package/dist/hooks/index.d.ts.map +1 -1
  85. package/dist/hooks/index.js +1 -0
  86. package/dist/hooks/useHotkeys.d.ts.map +1 -1
  87. package/dist/hooks/useHotkeys.js +10 -3
  88. package/dist/hooks/useListFocus.d.ts +5 -2
  89. package/dist/hooks/useListFocus.d.ts.map +1 -1
  90. package/dist/hooks/useListFocus.js +12 -6
  91. package/dist/hooks/useMergedRefs.d.ts +18 -0
  92. package/dist/hooks/useMergedRefs.d.ts.map +1 -0
  93. package/dist/hooks/useMergedRefs.js +25 -0
  94. package/dist/index.d.ts +1 -0
  95. package/dist/index.d.ts.map +1 -1
  96. package/dist/index.js +1 -0
  97. package/dist/utils/timeParser.d.ts +1 -1
  98. package/dist/utils/timeParser.d.ts.map +1 -1
  99. package/dist/utils/timeParser.js +26 -12
  100. package/locales/en.json +14 -6
  101. package/locales/pseudo.json +6 -0
  102. package/package.json +8 -3
  103. package/src/Avatar/Avatar.doc.mjs +2 -1
  104. package/src/BottomSheet/BottomSheet.test.tsx +123 -0
  105. package/src/BottomSheet/BottomSheet.tsx +36 -4
  106. package/src/BottomSheet/BottomSheetEdgeTint.test.tsx +225 -0
  107. package/src/BottomSheet/BottomSheetEdgeTint.tsx +82 -0
  108. package/src/BottomSheet/BottomSheetPanel.test.tsx +66 -0
  109. package/src/BottomSheet/BottomSheetPanel.tsx +19 -0
  110. package/src/BottomSheet/BottomSheetSwitcher.tsx +13 -0
  111. package/src/BottomSheet/useSheetGestures.test.ts +27 -0
  112. package/src/BottomSheet/useSheetGestures.ts +25 -5
  113. package/src/Breadcrumbs/BreadcrumbItem.tsx +2 -1
  114. package/src/Button/Button.doc.mjs +22 -0
  115. package/src/Calendar/Calendar.doc.mjs +4 -3
  116. package/src/Calendar/Calendar.test.tsx +52 -0
  117. package/src/Calendar/Calendar.tsx +18 -15
  118. package/src/Calendar/getInitialFocusDate.test.ts +94 -0
  119. package/src/Calendar/getInitialFocusDate.ts +93 -0
  120. package/src/Chat/ChatMessageList.doc.mjs +9 -1
  121. package/src/Chat/ChatMessageList.test.tsx +46 -0
  122. package/src/Chat/ChatMessageList.tsx +28 -4
  123. package/src/CodeBlock/CodeBlock.doc.mjs +6 -0
  124. package/src/ContextMenu/ContextMenu.doc.mjs +5 -0
  125. package/src/DateInput/DateInputTouch.test.tsx +36 -0
  126. package/src/DateInput/TouchDateField.tsx +35 -1
  127. package/src/Dialog/Dialog.doc.mjs +8 -3
  128. package/src/Dialog/Dialog.test.tsx +71 -0
  129. package/src/Dialog/Dialog.tsx +72 -20
  130. package/src/Field/Field.doc.mjs +11 -0
  131. package/src/Heading/Heading.test.tsx +23 -1
  132. package/src/Heading/Heading.tsx +6 -2
  133. package/src/Kbd/Kbd.test.tsx +17 -0
  134. package/src/Kbd/Kbd.tsx +10 -3
  135. package/src/Link/Link.doc.mjs +11 -0
  136. package/src/Markdown/index.ts +1 -0
  137. package/src/Markdown/parser.perf.test.ts +71 -1
  138. package/src/Markdown/parser.test.ts +145 -2
  139. package/src/Markdown/parser.ts +208 -22
  140. package/src/MoreMenu/MoreMenu.doc.mjs +7 -1
  141. package/src/MultiSelector/MultiSelector.doc.mjs +10 -0
  142. package/src/MultiSelector/MultiSelector.test.tsx +105 -0
  143. package/src/MultiSelector/MultiSelector.tsx +50 -6
  144. package/src/MultiSelector/index.ts +1 -0
  145. package/src/NumberInput/NumberInput.doc.mjs +5 -0
  146. package/src/Popover/Popover.test.tsx +27 -1
  147. package/src/PowerSearch/PowerSearch.doc.mjs +10 -0
  148. package/src/Selector/Selector.doc.mjs +11 -0
  149. package/src/Selector/Selector.test.tsx +21 -0
  150. package/src/Selector/Selector.tsx +11 -1
  151. package/src/Stepper/Step.doc.mjs +98 -0
  152. package/src/Stepper/Step.tsx +1638 -0
  153. package/src/Stepper/StepStatus.ts +26 -0
  154. package/src/Stepper/Stepper.doc.mjs +370 -0
  155. package/src/Stepper/Stepper.test.tsx +1024 -0
  156. package/src/Stepper/Stepper.tsx +258 -0
  157. package/src/Stepper/StepperContext.ts +71 -0
  158. package/src/Stepper/index.ts +18 -0
  159. package/src/Stepper/stepper.stylex.ts +19 -0
  160. package/src/TabList/Tab.tsx +5 -1
  161. package/src/TabList/TabList.test.tsx +21 -4
  162. package/src/Table/BaseTable.tsx +6 -3
  163. package/src/Table/Table.test.tsx +35 -0
  164. package/src/Table/plugins/groupedRows/useTableGroupedRows-perf.test.tsx +112 -0
  165. package/src/Table/plugins/groupedRows/useTableGroupedRows.test.tsx +100 -0
  166. package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +17 -8
  167. package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx +13 -7
  168. package/src/Table/plugins/rowStatus/useTableRowStatus.tsx +12 -3
  169. package/src/Table/plugins/selection/useTableSelection.test.tsx +76 -0
  170. package/src/Table/plugins/selection/useTableSelection.tsx +40 -7
  171. package/src/Table/types.ts +22 -4
  172. package/src/Table/useBaseTablePlugins.ts +5 -0
  173. package/src/Table/useTableGroupedRows.doc.mjs +5 -4
  174. package/src/Table/useTableRowStatus.doc.mjs +1 -1
  175. package/src/Table/useTableSelection.doc.mjs +31 -0
  176. package/src/Text/Text.test.tsx +23 -1
  177. package/src/Text/Text.tsx +6 -2
  178. package/src/TextInput/TextInput.doc.mjs +10 -0
  179. package/src/Toast/Toast.doc.mjs +6 -0
  180. package/src/Tokenizer/Tokenizer.doc.mjs +10 -0
  181. package/src/Toolbar/Toolbar.doc.mjs +5 -0
  182. package/src/__tests__/apiContractDrift.test.tsx +80 -0
  183. package/src/__tests__/fieldContract.test.tsx +24 -0
  184. package/src/__tests__/structuralComponentContract.test.tsx +39 -0
  185. package/src/hooks/index.ts +2 -0
  186. package/src/hooks/useHotkeys.test.ts +18 -0
  187. package/src/hooks/useHotkeys.ts +10 -3
  188. package/src/hooks/useListFocus.doc.mjs +2 -2
  189. package/src/hooks/useListFocus.test.tsx +65 -3
  190. package/src/hooks/useListFocus.ts +15 -7
  191. package/src/hooks/useMergedRefs.doc.mjs +79 -0
  192. package/src/hooks/useMergedRefs.test.tsx +62 -0
  193. package/src/hooks/useMergedRefs.ts +36 -0
  194. package/src/index.ts +1 -0
  195. package/src/theme/MediaTheme.doc.mjs +5 -5
  196. package/src/utils/timeParser.test.ts +6 -1
  197. package/src/utils/timeParser.ts +35 -13
@@ -0,0 +1,24 @@
1
+ /**
2
+ * @file StepStatus.ts
3
+ * @input None
4
+ * @output Exports StepStatus type
5
+ * @position Shared type used by Step and the stepper docs
6
+ */
7
+ /**
8
+ * Semantic status for a step, mapped directly onto the Astryx global semantic
9
+ * tokens. In the default `auto` indicator mode it sets both the indicator color
10
+ * and a matching glyph (see below); it never recolors the connector/track.
11
+ *
12
+ * Plain string values aligned with the global token semantics:
13
+ * - 'accent' → `--color-accent` (default emphasis / in-progress; color only)
14
+ * - 'success' → `--color-success` (green check-circle glyph)
15
+ * - 'warning' → `--color-warning` (shared Input `warning` glyph)
16
+ * - 'error' → `--color-error` (shared Input `error` glyph)
17
+ *
18
+ * `status` is intentionally NOT a lifecycle enum (completed/active/etc.) — the
19
+ * step's progress is derived from the parent's `activeStep`. The current
20
+ * (in-progress) step always keeps its current-step indicator regardless of
21
+ * `status`.
22
+ */
23
+ export type StepStatus = 'accent' | 'success' | 'warning' | 'error';
24
+ //# sourceMappingURL=StepStatus.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StepStatus.d.ts","sourceRoot":"","sources":["../../src/Stepper/StepStatus.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC"}
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,93 @@
1
+ /**
2
+ * @file Stepper.tsx
3
+ * @input Uses React, stylex, theme tokens, StepperContext
4
+ * @output Exports Stepper component and StepperProps
5
+ * @position Core container component; consumed by index.ts
6
+ *
7
+ * Besides the props it is given, this component tracks the `activeStep` it
8
+ * last rendered with and publishes it on the context. Steps need the distance
9
+ * and direction of a change to choreograph their connector fill; see the
10
+ * CONNECTOR FILL block in Step.tsx.
11
+ *
12
+ * SYNC: When modified, update these files to stay in sync:
13
+ * - /packages/core/src/Stepper/Stepper.doc.mjs (props table, features, implementation notes)
14
+ * - /packages/core/src/Stepper/Stepper.test.tsx (tests for new/changed behavior)
15
+ * - /packages/core/src/Stepper/index.ts (exports if types change)
16
+ * - /apps/storybook/stories/Stepper.stories.tsx (storybook stories)
17
+ * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
18
+ */
19
+ import { type ReactNode } from 'react';
20
+ import type { BaseProps } from '../BaseProps';
21
+ import { type StepperOrientation, type StepperIndicatorPosition } from './StepperContext';
22
+ export interface StepperProps extends BaseProps<HTMLOListElement> {
23
+ /** Ref forwarded to the root element */
24
+ ref?: React.Ref<HTMLOListElement>;
25
+ /**
26
+ * Zero-based index of the active step.
27
+ */
28
+ activeStep: number;
29
+ /**
30
+ * Step elements to render.
31
+ */
32
+ children: ReactNode;
33
+ /**
34
+ * Layout direction of the stepper.
35
+ * @default 'horizontal'
36
+ */
37
+ orientation?: StepperOrientation;
38
+ /**
39
+ * Called when a step indicator is clicked. Enables non-linear navigation.
40
+ * When provided, completed and current steps become clickable.
41
+ */
42
+ onStepClick?: (index: number) => void;
43
+ /**
44
+ * Accessible label describing the set of steps. Defaults to a translated
45
+ * "Progress" when unset.
46
+ */
47
+ label?: string;
48
+ /**
49
+ * Controls density (padding) of all steps.
50
+ * @default 'balanced'
51
+ */
52
+ density?: 'compact' | 'balanced' | 'spacious';
53
+ /**
54
+ * Controls where each step's indicator sits relative to the connector track.
55
+ * - 'separated': indicator lives in the label row, distinct from the progress
56
+ * bar (the original Astryx layout).
57
+ * - 'on-track': indicator is slotted into the connector line as a node on the
58
+ * track (the on-track indicator design).
59
+ * @default 'separated'
60
+ */
61
+ indicatorPosition?: StepperIndicatorPosition;
62
+ }
63
+ /**
64
+ * A stepper component for multi-step workflows. Displays numbered steps
65
+ * with visual indicators for completed, active, and upcoming states.
66
+ *
67
+ * Each Step child must provide a `step` prop (zero-based index) so it
68
+ * can derive its state from the parent's activeStep. The on-track layout
69
+ * hides the leading connector on the first step and the trailing connector
70
+ * on the last step structurally, from each step's own `<li>` position, so
71
+ * it works regardless of how the steps are grouped.
72
+ *
73
+ * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
74
+ * landmark: a stepper communicates *progress through a sequence*, not a
75
+ * set of site navigation links. The active step is marked with
76
+ * `aria-current="step"` (handled per-step) and the list carries an
77
+ * accessible `label`. This follows the WAI-ARIA pattern for steppers /
78
+ * progress sequences and avoids polluting the page's landmark map.
79
+ *
80
+ * @example
81
+ * ```
82
+ * <Stepper activeStep={1}>
83
+ * <Step step={0} label="Account" />
84
+ * <Step step={1} label="Profile" />
85
+ * <Step step={2} label="Review" />
86
+ * </Stepper>
87
+ * ```
88
+ */
89
+ export declare function Stepper({ activeStep, children, orientation, onStepClick, label: labelFromProps, density, indicatorPosition, xstyle, className, style, ref, ...rest }: StepperProps): import("react").JSX.Element;
90
+ export declare namespace Stepper {
91
+ var displayName: string;
92
+ }
93
+ //# sourceMappingURL=Stepper.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAyC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAE9B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;CAC9C;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,WAA0B,EAC1B,WAAW,EACX,KAAK,EAAE,cAAc,EACrB,OAAoB,EACpB,iBAA+B,EAC/B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,+BA0Gd;yBAvHe,OAAO"}
@@ -0,0 +1,184 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ 'use client';
4
+
5
+ /**
6
+ * @file Stepper.tsx
7
+ * @input Uses React, stylex, theme tokens, StepperContext
8
+ * @output Exports Stepper component and StepperProps
9
+ * @position Core container component; consumed by index.ts
10
+ *
11
+ * Besides the props it is given, this component tracks the `activeStep` it
12
+ * last rendered with and publishes it on the context. Steps need the distance
13
+ * and direction of a change to choreograph their connector fill; see the
14
+ * CONNECTOR FILL block in Step.tsx.
15
+ *
16
+ * SYNC: When modified, update these files to stay in sync:
17
+ * - /packages/core/src/Stepper/Stepper.doc.mjs (props table, features, implementation notes)
18
+ * - /packages/core/src/Stepper/Stepper.test.tsx (tests for new/changed behavior)
19
+ * - /packages/core/src/Stepper/index.ts (exports if types change)
20
+ * - /apps/storybook/stories/Stepper.stories.tsx (storybook stories)
21
+ * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
22
+ */
23
+ import { useCallback, useMemo, useRef, useState } from 'react';
24
+ import * as stylex from '@stylexjs/stylex';
25
+ import "../theme/tokens.stylex.js";
26
+ import { spacingVars } from "../theme/tokens.stylex.js";
27
+ import { mergeProps } from "../utils/index.js";
28
+ import { themeProps } from "../utils/index.js";
29
+ import { useTranslator } from "../i18n/index.js";
30
+ import { StepperContext } from "./StepperContext.js";
31
+ import { jsx as _jsx } from "react/jsx-runtime";
32
+ const styles = {
33
+ root: {
34
+ k1xSpc: "x78zum5",
35
+ kzqmXN: "xh8yej3",
36
+ kH6xsr: "x3ct3a4",
37
+ kogj98: "x1ghz6dp",
38
+ kmVPX3: "x1717udv",
39
+ $$css: true
40
+ },
41
+ horizontal: {
42
+ kXwgrk: "x1q0g3np",
43
+ kGNEyG: "x1cy8zhl",
44
+ kOIVth: "x1lsbc85",
45
+ $$css: true
46
+ },
47
+ vertical: {
48
+ kXwgrk: "xdt5ytf",
49
+ kOIVth: "x1lsbc85",
50
+ $$css: true
51
+ },
52
+ horizontalOnTrack: {
53
+ kXwgrk: "x1q0g3np",
54
+ kGNEyG: "x1cy8zhl",
55
+ kOIVth: "xxhr3t",
56
+ $$css: true
57
+ },
58
+ verticalOnTrack: {
59
+ kXwgrk: "xdt5ytf",
60
+ kOIVth: "xxhr3t",
61
+ $$css: true
62
+ }
63
+ };
64
+
65
+ /**
66
+ * A stepper component for multi-step workflows. Displays numbered steps
67
+ * with visual indicators for completed, active, and upcoming states.
68
+ *
69
+ * Each Step child must provide a `step` prop (zero-based index) so it
70
+ * can derive its state from the parent's activeStep. The on-track layout
71
+ * hides the leading connector on the first step and the trailing connector
72
+ * on the last step structurally, from each step's own `<li>` position, so
73
+ * it works regardless of how the steps are grouped.
74
+ *
75
+ * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
76
+ * landmark: a stepper communicates *progress through a sequence*, not a
77
+ * set of site navigation links. The active step is marked with
78
+ * `aria-current="step"` (handled per-step) and the list carries an
79
+ * accessible `label`. This follows the WAI-ARIA pattern for steppers /
80
+ * progress sequences and avoids polluting the page's landmark map.
81
+ *
82
+ * @example
83
+ * ```
84
+ * <Stepper activeStep={1}>
85
+ * <Step step={0} label="Account" />
86
+ * <Step step={1} label="Profile" />
87
+ * <Step step={2} label="Review" />
88
+ * </Stepper>
89
+ * ```
90
+ */
91
+ export function Stepper({
92
+ activeStep,
93
+ children,
94
+ orientation = 'horizontal',
95
+ onStepClick,
96
+ label: labelFromProps,
97
+ density = 'balanced',
98
+ indicatorPosition = 'separated',
99
+ xstyle,
100
+ className,
101
+ style,
102
+ ref,
103
+ ...rest
104
+ }) {
105
+ const t = useTranslator();
106
+ const label = labelFromProps ?? t('@astryx.stepper.label');
107
+
108
+ // Dev-mode duplicate step index detection. Steps register on mount and
109
+ // deregister on unmount; a Map tracks count per index so we can warn when
110
+ // two Steps share the same `step` value (which breaks aria-current).
111
+ const stepCountsRef = useRef(new Map());
112
+ const registerStep = useCallback(index => {
113
+ const counts = stepCountsRef.current;
114
+ const prev = counts.get(index) ?? 0;
115
+ counts.set(index, prev + 1);
116
+ if (process.env.NODE_ENV !== 'production' && prev + 1 > 1) {
117
+ console.warn(`[Stepper] Duplicate step index ${index}: two <Step> elements share the same \`step\` value. ` + `This breaks \`aria-current="step"\` and causes both to show as active simultaneously.`);
118
+ }
119
+ return () => {
120
+ const cur = counts.get(index) ?? 1;
121
+ if (cur <= 1) {
122
+ counts.delete(index);
123
+ } else {
124
+ counts.set(index, cur - 1);
125
+ }
126
+ };
127
+ }, []);
128
+
129
+ // The step we came *from*. Steps need it to stagger their connector fill:
130
+ // the distance and direction of the change decide which segment moves first
131
+ // and how long the whole sweep may take (see Step.tsx's CONNECTOR FILL).
132
+ //
133
+ // Derived during render from state rather than written in an effect. An
134
+ // effect runs after paint, so the browser would already have committed the
135
+ // new fill states with last render's delays — the first frame of the sweep
136
+ // would be wrong, and on a jump of one that is the entire animation. React
137
+ // discards and re-runs a render that sets its own state before committing,
138
+ // so this costs a re-render but never a wrong frame.
139
+ //
140
+ // Seeding both halves from the current `activeStep` is what suppresses the
141
+ // cascade on mount: a stepper that opens on step 3 has no previous step to
142
+ // have travelled from, so its completed segments paint filled at once. That
143
+ // also makes the first render pure and identical on the server, so there is
144
+ // nothing for hydration to disagree about. Storing the pair in one state
145
+ // object keeps the update idempotent under StrictMode's double render — both
146
+ // invocations read the same `seen` and queue the same successor.
147
+ const [seen, setSeen] = useState(() => ({
148
+ current: activeStep,
149
+ previous: activeStep
150
+ }));
151
+ if (seen.current !== activeStep) {
152
+ setSeen({
153
+ current: activeStep,
154
+ previous: seen.current
155
+ });
156
+ }
157
+ const previousActiveStep = seen.current === activeStep ? seen.previous : seen.current;
158
+ const ctxValue = useMemo(() => ({
159
+ activeStep,
160
+ previousActiveStep,
161
+ orientation,
162
+ isNonLinear: onStepClick != null,
163
+ onStepClick: onStepClick ?? null,
164
+ density,
165
+ indicatorPosition,
166
+ registerStep
167
+ }), [activeStep, previousActiveStep, orientation, onStepClick, density, indicatorPosition, registerStep]);
168
+ const isOnTrack = indicatorPosition === 'on-track';
169
+ const orientationStyle = orientation === 'horizontal' ? isOnTrack ? styles.horizontalOnTrack : styles.horizontal : isOnTrack ? styles.verticalOnTrack : styles.vertical;
170
+ return /*#__PURE__*/_jsx(StepperContext, {
171
+ value: ctxValue,
172
+ children: /*#__PURE__*/_jsx("ol", {
173
+ ref: ref,
174
+ "aria-label": label,
175
+ ...rest,
176
+ ...mergeProps(themeProps('stepper', {
177
+ orientation,
178
+ indicatorPosition
179
+ }), stylex.props(styles.root, orientationStyle, xstyle), className, style),
180
+ children: children
181
+ })
182
+ });
183
+ }
184
+ Stepper.displayName = 'Stepper';
@@ -0,0 +1,41 @@
1
+ export type StepperOrientation = 'horizontal' | 'vertical';
2
+ export type StepperDensity = 'compact' | 'balanced' | 'spacious';
3
+ /**
4
+ * Controls where each step's indicator sits relative to the connector track.
5
+ * - 'separated': indicator lives in the label row, distinct from the progress
6
+ * bar (Astryx's original layout).
7
+ * - 'on-track': indicator is slotted *into* the connector line as a node on the
8
+ * track, with the label beside (vertical) or below (horizontal). Aligns with
9
+ * the on-track stepper design.
10
+ */
11
+ export type StepperIndicatorPosition = 'separated' | 'on-track';
12
+ export interface StepperContextValue {
13
+ activeStep: number;
14
+ /**
15
+ * The `activeStep` this stepper last rendered with, so a Step can tell
16
+ * whether the change it is reacting to was a single step forward — the one
17
+ * change that animates the connector fill — and which span that change
18
+ * crossed (see the CONNECTOR FILL block in Step.tsx). Equal to `activeStep`
19
+ * on the first render, which is what keeps a stepper that mounts mid-flow
20
+ * from animating its way to the step it opened on.
21
+ *
22
+ * Internal: not part of the public API, and deliberately not a Stepper prop.
23
+ * When the connector animates is behaviour the stepper owns, not something a
24
+ * consumer configures.
25
+ */
26
+ previousActiveStep: number;
27
+ orientation: StepperOrientation;
28
+ isNonLinear: boolean;
29
+ onStepClick: ((index: number) => void) | null;
30
+ density: StepperDensity;
31
+ indicatorPosition: StepperIndicatorPosition;
32
+ /**
33
+ * Dev-mode index registration. Each Step calls this on mount with its `step`
34
+ * index. The Stepper tracks the set and warns if two Steps share the same
35
+ * index. Returns a cleanup function to call on unmount.
36
+ */
37
+ registerStep: (index: number) => () => void;
38
+ }
39
+ export declare const StepperContext: import("react").Context<StepperContextValue | null>;
40
+ export declare function useStepperContext(): StepperContextValue;
41
+ //# sourceMappingURL=StepperContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StepperContext.d.ts","sourceRoot":"","sources":["../../src/Stepper/StepperContext.ts"],"names":[],"mappings":"AAiBA,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAAG,UAAU,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,cAAc,CAAC;IACxB,iBAAiB,EAAE,wBAAwB,CAAC;IAC5C;;;;OAIG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,qDAAkD,CAAC;AAG9E,wBAAgB,iBAAiB,IAAI,mBAAmB,CASvD"}
@@ -0,0 +1,34 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ 'use client';
4
+
5
+ /**
6
+ * @file StepperContext.ts
7
+ * @input Uses React createContext/use
8
+ * @output Exports StepperContext, useStepperContext, and context types
9
+ * @position Context for Stepper <-> Step communication
10
+ *
11
+ * SYNC: When modified, update these files to stay in sync:
12
+ * - /packages/core/src/Stepper/Stepper.doc.mjs
13
+ * - /packages/core/src/Stepper/index.ts
14
+ */
15
+ import { createContext, use } from 'react';
16
+
17
+ /**
18
+ * Controls where each step's indicator sits relative to the connector track.
19
+ * - 'separated': indicator lives in the label row, distinct from the progress
20
+ * bar (Astryx's original layout).
21
+ * - 'on-track': indicator is slotted *into* the connector line as a node on the
22
+ * track, with the label beside (vertical) or below (horizontal). Aligns with
23
+ * the on-track stepper design.
24
+ */
25
+
26
+ export const StepperContext = /*#__PURE__*/createContext(null);
27
+ StepperContext.displayName = 'StepperContext';
28
+ export function useStepperContext() {
29
+ const ctx = use(StepperContext);
30
+ if (ctx == null) {
31
+ throw new Error('useStepperContext must be used within Stepper. ' + 'Wrap your Step in <Stepper>.');
32
+ }
33
+ return ctx;
34
+ }
@@ -0,0 +1,8 @@
1
+ export { Stepper } from './Stepper';
2
+ export type { StepperProps } from './Stepper';
3
+ export { Step } from './Step';
4
+ export type { StepProps, StepIndicatorPreset } from './Step';
5
+ export type { StepStatus } from './StepStatus';
6
+ export { useStepperContext } from './StepperContext';
7
+ export type { StepperContextValue, StepperOrientation, StepperIndicatorPosition, } from './StepperContext';
8
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Stepper/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAE5C,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,QAAQ,CAAC;AAE3D,YAAY,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AACnD,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,kBAAkB,CAAC"}
@@ -0,0 +1,7 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ 'use client';
4
+
5
+ export { Stepper } from "./Stepper.js";
6
+ export { Step } from "./Step.js";
7
+ export { useStepperContext } from "./StepperContext.js";
@@ -0,0 +1,15 @@
1
+ /**
2
+ * @file stepper.stylex.ts
3
+ * @input StyleX marker system
4
+ * @output stepMarker — a scoped marker applied to each Step's <li>
5
+ * @position Shared StyleX marker consumed by Step for structural selectors
6
+ *
7
+ * Applied to each Step's root `<li>` so the on-track connector segments can
8
+ * key their first/last-node visibility off `stylex.when.ancestor(':first-child'
9
+ * | ':last-child', stepMarker)` — matching only the parent step row, never the
10
+ * outer `<ol>`. This replaces counting children in the parent, so steps behave
11
+ * correctly regardless of how the consumer groups them (arrays, fragments).
12
+ */
13
+ import * as stylex from '@stylexjs/stylex';
14
+ export declare const stepMarker: ReturnType<typeof stylex.defineMarker>;
15
+ //# sourceMappingURL=stepper.stylex.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stepper.stylex.d.ts","sourceRoot":"","sources":["../../src/Stepper/stepper.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C,eAAO,MAAM,UAAU,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CACvC,CAAC"}
@@ -0,0 +1,20 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ /**
4
+ * @file stepper.stylex.ts
5
+ * @input StyleX marker system
6
+ * @output stepMarker — a scoped marker applied to each Step's <li>
7
+ * @position Shared StyleX marker consumed by Step for structural selectors
8
+ *
9
+ * Applied to each Step's root `<li>` so the on-track connector segments can
10
+ * key their first/last-node visibility off `stylex.when.ancestor(':first-child'
11
+ * | ':last-child', stepMarker)` — matching only the parent step row, never the
12
+ * outer `<ol>`. This replaces counting children in the parent, so steps behave
13
+ * correctly regardless of how the consumer groups them (arrays, fragments).
14
+ */
15
+
16
+ import * as stylex from '@stylexjs/stylex';
17
+ export const stepMarker = {
18
+ x1twag4g: "x1twag4g",
19
+ $$css: true
20
+ };
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,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,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA2GV;yBAzHe,GAAG"}
1
+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,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,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA+GV;yBA7He,GAAG"}
@@ -186,7 +186,11 @@ export function Tab({
186
186
  } : {}),
187
187
  [EDGE_COMP_ATTR]: '',
188
188
  'data-tab-value': value,
189
- 'aria-current': isSelected ? 'page' : undefined,
189
+ // Generic `true` ("the current item within a set"), not `page`: the strip
190
+ // switches views in place at least as often as it navigates, and claiming
191
+ // "current page" when no page changed is a false statement to a screen
192
+ // reader. Stays truthful for the `href` case too, just less specific.
193
+ 'aria-current': isSelected ? 'true' : undefined,
190
194
  // Roving tabindex: the tab strip is a single Tab stop. The selected tab is
191
195
  // the tabbable one; the rest are reachable via arrow keys (handled by
192
196
  // TabList's onKeyDown). When no tab is selected, TabList's repair effect
@@ -1 +1 @@
1
- {"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAmmBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
1
+ {"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAsmBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
@@ -124,7 +124,10 @@ function TableRowInner({
124
124
  };
125
125
  const cellRenderProps = applyPlugins(plugins, p => p.transformBodyCell, initialBodyCellRenderProps, col, item, columnIndex, columns);
126
126
  const isDefaultRenderer = !col.renderCell;
127
- const rawContent = isDefaultRenderer ? defaultCellRenderer(item, col.key) : col.renderCell?.(item) ?? null;
127
+ let rawContent = null;
128
+ if (!cellRenderProps.isContentSuppressed) {
129
+ rawContent = isDefaultRenderer ? defaultCellRenderer(item, col.key) : col.renderCell?.(item) ?? null;
130
+ }
128
131
 
129
132
  // In truncate mode, wrap default-rendered string content in
130
133
  // <Text maxLines={1}> for smart tooltips that only appear
@@ -1 +1 @@
1
- {"version":3,"file":"useTableGroupedRows.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/groupedRows/useTableGroupedRows.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAqD7C,qDAAqD;AACrD,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,8BAA8B;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,8EAA8E;IAC9E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,6CAA6C;IAC7C,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,OAAO,KACf,SAAS,CAAC;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,iDAAiD;IACjD,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACvB,0EAA0E;IAC1E,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC5B;AAiFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACnC,yBAAyB,CAAC,CAAC,CAAC,CAyJ9B"}
1
+ {"version":3,"file":"useTableGroupedRows.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/groupedRows/useTableGroupedRows.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAqD7C,qDAAqD;AACrD,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,8BAA8B;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,8EAA8E;IAC9E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,6CAA6C;IAC7C,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,OAAO,KACf,SAAS,CAAC;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,iDAAiD;IACjD,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACvB,0EAA0E;IAC1E,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC5B;AAiFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACnC,yBAAyB,CAAC,CAAC,CAAC,CAkK9B"}
@@ -26,8 +26,11 @@ function isGroupHeader(item) {
26
26
  return typeof item === 'object' && item !== null && item[GROUP_HEADER] === true;
27
27
  }
28
28
 
29
- // Proxy handler: any field access beyond the marker fields resolves to `''`
30
- // so user cell renderers (`item.name.toUpperCase()`) never throw on a header.
29
+ // Proxy handler: any field access beyond the marker fields resolves to `''`,
30
+ // which keeps anything that reads a header's data — the sortable and filtering
31
+ // plugins, a consumer's own row handler — off `undefined`. Cell renderers are
32
+ // handled at render time instead (see `transformBodyCell` below); the Proxy
33
+ // never protected them, because `''` fails a lookup exactly as `undefined` does.
31
34
  const HEADER_PROXY_HANDLER = {
32
35
  // eslint-disable-next-line @typescript-eslint/promise-function-async -- Proxy get trap, not a promise-returning fn
33
36
  get(t, prop) {
@@ -39,12 +42,9 @@ const HEADER_PROXY_HANDLER = {
39
42
  };
40
43
 
41
44
  /**
42
- * Build a synthetic header row wrapped in a Proxy so arbitrary field access
43
- * from user cell renderers (e.g. `item.name.toUpperCase()`) resolves to `''`
44
- * instead of throwing — BaseTable evaluates `col.renderCell(item)` on every
45
- * row (including synthetic headers) before `transformBodyRow` can replace the
46
- * row's cells. `transformBodyRow` then discards those cells and renders a
47
- * single full-width header cell.
45
+ * Build a synthetic header row wrapped in a Proxy so field access resolves to
46
+ * `''` instead of `undefined`. `transformBodyRow` then discards the row's
47
+ * cells and renders a single full-width header cell.
48
48
  */
49
49
  function makeHeader(groupKey, count) {
50
50
  const target = {
@@ -183,6 +183,18 @@ export function useTableGroupedRows(config) {
183
183
  return String(positionByItem?.get(item) ?? -1);
184
184
  }, [getRowKeyProp, positionByItem]);
185
185
  const plugin = useMemo(() => ({
186
+ // A header row is not one of the caller's rows, so running a cell
187
+ // renderer against it can only misread it or throw — and the cells are
188
+ // discarded by `transformBodyRow` below regardless.
189
+ transformBodyCell(props, _column, item) {
190
+ if (!isGroupHeader(item)) {
191
+ return props;
192
+ }
193
+ return {
194
+ ...props,
195
+ isContentSuppressed: true
196
+ };
197
+ },
186
198
  // Replace a header row's pre-rendered cells with one full-width cell.
187
199
  transformBodyRow(props, item) {
188
200
  if (!isGroupHeader(item)) {
@@ -1 +1 @@
1
- {"version":3,"file":"useTableRowStatus.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowStatus/useTableRowStatus.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,eAAe,CAAC;AAElE,OAAO,KAAK,EAAc,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,KAAK,GACL,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;AA6BX;;;;;;;;GAQG;AACH,MAAM,WAAW,cAAc;IAC7B,mEAAmE;IACnE,KAAK,EAAE,mBAAmB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3C,oGAAoG;IACpG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mDAAmD;AACnD,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE;;;;;;;;;OASG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,cAAc,GAAG,IAAI,CAAC;CAC/C;AA2BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CA6ChB"}
1
+ {"version":3,"file":"useTableRowStatus.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowStatus/useTableRowStatus.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIlE,OAAO,KAAK,EAAc,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,KAAK,GACL,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;AA6BX;;;;;;;;GAQG;AACH,MAAM,WAAW,cAAc;IAC7B,mEAAmE;IACnE,KAAK,EAAE,mBAAmB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3C,oGAAoG;IACpG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mDAAmD;AACnD,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE;;;;;;;;;OASG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,cAAc,GAAG,IAAI,CAAC;CAC/C;AA2BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CAoDhB"}
@@ -4,7 +4,7 @@
4
4
 
5
5
  /**
6
6
  * @file useTableRowStatus.tsx
7
- * @input React, StyleX, Icon, Table types
7
+ * @input React, StyleX, Icon, i18n, VisuallyHidden, Table types
8
8
  * @output Exports useTableRowStatus hook + config type
9
9
  * @position Row-status plugin; consumed by Table via plugins prop
10
10
  *
@@ -15,6 +15,8 @@ import { useMemo } from 'react';
15
15
  import * as stylex from '@stylexjs/stylex';
16
16
  import { Icon } from "../../../Icon/index.js";
17
17
  import { Tooltip } from "../../../Tooltip/index.js";
18
+ import { useTranslator } from "../../../i18n/index.js";
19
+ import { VisuallyHidden } from "../../../VisuallyHidden/index.js";
18
20
 
19
21
  /**
20
22
  * Semantic status colors, resolved to the design system's icon color tokens.
@@ -104,6 +106,7 @@ const styles = {
104
106
  * ```
105
107
  */
106
108
  export function useTableRowStatus(config) {
109
+ const t = useTranslator();
107
110
  const {
108
111
  getStatus
109
112
  } = config;
@@ -111,7 +114,11 @@ export function useTableRowStatus(config) {
111
114
  transformColumns(columns) {
112
115
  const statusColumn = {
113
116
  key: '__rowStatus',
114
- header: '',
117
+ // The gutter stays visually blank, but the th needs a discernible
118
+ // name for assistive technology (axe: empty-table-header).
119
+ header: /*#__PURE__*/_jsx(VisuallyHidden, {
120
+ children: t('@astryx.table.rowStatus.columnHeader')
121
+ }),
115
122
  width: STATUS_COLUMN_WIDTH,
116
123
  resizable: false,
117
124
  renderCell: item => {
@@ -141,5 +148,5 @@ export function useTableRowStatus(config) {
141
148
  };
142
149
  return [statusColumn, ...columns];
143
150
  }
144
- }), [getStatus]);
151
+ }), [getStatus, t]);
145
152
  }
@@ -32,6 +32,22 @@ export interface UseTableSelectionConfig<T extends Record<string, unknown>> {
32
32
  * ```
33
33
  */
34
34
  getRowLabel?: (item: T) => string;
35
+ /**
36
+ * Paint checked rows with the accent wash. Set false when the surrounding
37
+ * UI already uses row background to mean something else — a row that is
38
+ * open in a detail panel, for instance. The wash is an inline style, so
39
+ * it cannot be overridden from userland; this flag is the way off it.
40
+ *
41
+ * Only the background is dropped. `aria-selected` is still set on checked
42
+ * rows either way, so the selection stays legible to screen readers.
43
+ *
44
+ * @default true
45
+ * @example
46
+ * ```
47
+ * useTableSelection({...config, hasRowHighlight: false})
48
+ * ```
49
+ */
50
+ hasRowHighlight?: boolean;
35
51
  }
36
52
  export declare function useTableSelection<T extends Record<string, unknown>>(config: UseTableSelectionConfig<T>): TablePlugin<T>;
37
53
  //# sourceMappingURL=useTableSelection.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTableSelection.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/selection/useTableSelection.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAC,WAAW,EAAkC,MAAM,aAAa,CAAC;AAQ9E,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,uCAAuC;IACvC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,YAAY,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAC9D,kDAAkD;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE;QAAC,aAAa,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IACvD,mDAAmD;IACnD,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC;IACnC,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CACnC;AAuND,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CAsFhB"}
1
+ {"version":3,"file":"useTableSelection.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/selection/useTableSelection.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAC,WAAW,EAAkC,MAAM,aAAa,CAAC;AAQ9E,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,uCAAuC;IACvC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,YAAY,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAC9D,kDAAkD;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE;QAAC,aAAa,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IACvD,mDAAmD;IACnD,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC;IACnC,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAClC;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6ND,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CA2FhB"}