@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.
- package/CHANGELOG.md +35 -0
- package/dist/BottomSheet/BottomSheet.d.ts +1 -0
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +54 -15
- package/dist/BottomSheet/BottomSheetEdgeTint.d.ts +6 -0
- package/dist/BottomSheet/BottomSheetEdgeTint.d.ts.map +1 -0
- package/dist/BottomSheet/BottomSheetEdgeTint.js +62 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +1 -0
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts +1 -0
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +10 -4
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +23 -5
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +5 -5
- package/dist/Calendar/Calendar.d.ts +3 -1
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +13 -14
- package/dist/Calendar/getInitialFocusDate.d.ts +46 -0
- package/dist/Calendar/getInitialFocusDate.d.ts.map +1 -0
- package/dist/Calendar/getInitialFocusDate.js +62 -0
- package/dist/Chat/ChatMessageList.d.ts +22 -3
- package/dist/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +6 -3
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +34 -1
- package/dist/Dialog/Dialog.d.ts +7 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +48 -22
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +6 -2
- package/dist/Kbd/Kbd.d.ts.map +1 -1
- package/dist/Kbd/Kbd.js +10 -3
- package/dist/Markdown/index.d.ts +1 -1
- package/dist/Markdown/index.d.ts.map +1 -1
- package/dist/Markdown/parser.d.ts +38 -1
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +149 -23
- package/dist/MultiSelector/MultiSelector.d.ts +15 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +17 -6
- package/dist/MultiSelector/index.d.ts +1 -1
- package/dist/MultiSelector/index.d.ts.map +1 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +5 -0
- package/dist/Stepper/Step.d.ts +140 -0
- package/dist/Stepper/Step.d.ts.map +1 -0
- package/dist/Stepper/Step.js +1045 -0
- package/dist/Stepper/StepStatus.d.ts +24 -0
- package/dist/Stepper/StepStatus.d.ts.map +1 -0
- package/dist/Stepper/StepStatus.js +1 -0
- package/dist/Stepper/Stepper.d.ts +93 -0
- package/dist/Stepper/Stepper.d.ts.map +1 -0
- package/dist/Stepper/Stepper.js +184 -0
- package/dist/Stepper/StepperContext.d.ts +41 -0
- package/dist/Stepper/StepperContext.d.ts.map +1 -0
- package/dist/Stepper/StepperContext.js +34 -0
- package/dist/Stepper/index.d.ts +8 -0
- package/dist/Stepper/index.d.ts.map +1 -0
- package/dist/Stepper/index.js +7 -0
- package/dist/Stepper/stepper.stylex.d.ts +15 -0
- package/dist/Stepper/stepper.stylex.d.ts.map +1 -0
- package/dist/Stepper/stepper.stylex.js +20 -0
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +5 -1
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +4 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +20 -8
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map +1 -1
- package/dist/Table/plugins/rowStatus/useTableRowStatus.js +10 -3
- package/dist/Table/plugins/selection/useTableSelection.d.ts +16 -0
- package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
- package/dist/Table/plugins/selection/useTableSelection.js +19 -5
- package/dist/Table/types.d.ts +22 -4
- package/dist/Table/types.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +5 -0
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +6 -2
- package/dist/astryx.css +41 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useHotkeys.d.ts.map +1 -1
- package/dist/hooks/useHotkeys.js +10 -3
- package/dist/hooks/useListFocus.d.ts +5 -2
- package/dist/hooks/useListFocus.d.ts.map +1 -1
- package/dist/hooks/useListFocus.js +12 -6
- package/dist/hooks/useMergedRefs.d.ts +18 -0
- package/dist/hooks/useMergedRefs.d.ts.map +1 -0
- package/dist/hooks/useMergedRefs.js +25 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/utils/timeParser.d.ts +1 -1
- package/dist/utils/timeParser.d.ts.map +1 -1
- package/dist/utils/timeParser.js +26 -12
- package/locales/en.json +14 -6
- package/locales/pseudo.json +6 -0
- package/package.json +8 -3
- package/src/Avatar/Avatar.doc.mjs +2 -1
- package/src/BottomSheet/BottomSheet.test.tsx +123 -0
- package/src/BottomSheet/BottomSheet.tsx +36 -4
- package/src/BottomSheet/BottomSheetEdgeTint.test.tsx +225 -0
- package/src/BottomSheet/BottomSheetEdgeTint.tsx +82 -0
- package/src/BottomSheet/BottomSheetPanel.test.tsx +66 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +19 -0
- package/src/BottomSheet/BottomSheetSwitcher.tsx +13 -0
- package/src/BottomSheet/useSheetGestures.test.ts +27 -0
- package/src/BottomSheet/useSheetGestures.ts +25 -5
- package/src/Breadcrumbs/BreadcrumbItem.tsx +2 -1
- package/src/Button/Button.doc.mjs +22 -0
- package/src/Calendar/Calendar.doc.mjs +4 -3
- package/src/Calendar/Calendar.test.tsx +52 -0
- package/src/Calendar/Calendar.tsx +18 -15
- package/src/Calendar/getInitialFocusDate.test.ts +94 -0
- package/src/Calendar/getInitialFocusDate.ts +93 -0
- package/src/Chat/ChatMessageList.doc.mjs +9 -1
- package/src/Chat/ChatMessageList.test.tsx +46 -0
- package/src/Chat/ChatMessageList.tsx +28 -4
- package/src/CodeBlock/CodeBlock.doc.mjs +6 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +5 -0
- package/src/DateInput/DateInputTouch.test.tsx +36 -0
- package/src/DateInput/TouchDateField.tsx +35 -1
- package/src/Dialog/Dialog.doc.mjs +8 -3
- package/src/Dialog/Dialog.test.tsx +71 -0
- package/src/Dialog/Dialog.tsx +72 -20
- package/src/Field/Field.doc.mjs +11 -0
- package/src/Heading/Heading.test.tsx +23 -1
- package/src/Heading/Heading.tsx +6 -2
- package/src/Kbd/Kbd.test.tsx +17 -0
- package/src/Kbd/Kbd.tsx +10 -3
- package/src/Link/Link.doc.mjs +11 -0
- package/src/Markdown/index.ts +1 -0
- package/src/Markdown/parser.perf.test.ts +71 -1
- package/src/Markdown/parser.test.ts +145 -2
- package/src/Markdown/parser.ts +208 -22
- package/src/MoreMenu/MoreMenu.doc.mjs +7 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +10 -0
- package/src/MultiSelector/MultiSelector.test.tsx +105 -0
- package/src/MultiSelector/MultiSelector.tsx +50 -6
- package/src/MultiSelector/index.ts +1 -0
- package/src/NumberInput/NumberInput.doc.mjs +5 -0
- package/src/Popover/Popover.test.tsx +27 -1
- package/src/PowerSearch/PowerSearch.doc.mjs +10 -0
- package/src/Selector/Selector.doc.mjs +11 -0
- package/src/Selector/Selector.test.tsx +21 -0
- package/src/Selector/Selector.tsx +11 -1
- package/src/Stepper/Step.doc.mjs +98 -0
- package/src/Stepper/Step.tsx +1638 -0
- package/src/Stepper/StepStatus.ts +26 -0
- package/src/Stepper/Stepper.doc.mjs +370 -0
- package/src/Stepper/Stepper.test.tsx +1024 -0
- package/src/Stepper/Stepper.tsx +258 -0
- package/src/Stepper/StepperContext.ts +71 -0
- package/src/Stepper/index.ts +18 -0
- package/src/Stepper/stepper.stylex.ts +19 -0
- package/src/TabList/Tab.tsx +5 -1
- package/src/TabList/TabList.test.tsx +21 -4
- package/src/Table/BaseTable.tsx +6 -3
- package/src/Table/Table.test.tsx +35 -0
- package/src/Table/plugins/groupedRows/useTableGroupedRows-perf.test.tsx +112 -0
- package/src/Table/plugins/groupedRows/useTableGroupedRows.test.tsx +100 -0
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +17 -8
- package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx +13 -7
- package/src/Table/plugins/rowStatus/useTableRowStatus.tsx +12 -3
- package/src/Table/plugins/selection/useTableSelection.test.tsx +76 -0
- package/src/Table/plugins/selection/useTableSelection.tsx +40 -7
- package/src/Table/types.ts +22 -4
- package/src/Table/useBaseTablePlugins.ts +5 -0
- package/src/Table/useTableGroupedRows.doc.mjs +5 -4
- package/src/Table/useTableRowStatus.doc.mjs +1 -1
- package/src/Table/useTableSelection.doc.mjs +31 -0
- package/src/Text/Text.test.tsx +23 -1
- package/src/Text/Text.tsx +6 -2
- package/src/TextInput/TextInput.doc.mjs +10 -0
- package/src/Toast/Toast.doc.mjs +6 -0
- package/src/Tokenizer/Tokenizer.doc.mjs +10 -0
- package/src/Toolbar/Toolbar.doc.mjs +5 -0
- package/src/__tests__/apiContractDrift.test.tsx +80 -0
- package/src/__tests__/fieldContract.test.tsx +24 -0
- package/src/__tests__/structuralComponentContract.test.tsx +39 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useHotkeys.test.ts +18 -0
- package/src/hooks/useHotkeys.ts +10 -3
- package/src/hooks/useListFocus.doc.mjs +2 -2
- package/src/hooks/useListFocus.test.tsx +65 -3
- package/src/hooks/useListFocus.ts +15 -7
- package/src/hooks/useMergedRefs.doc.mjs +79 -0
- package/src/hooks/useMergedRefs.test.tsx +62 -0
- package/src/hooks/useMergedRefs.ts +36 -0
- package/src/index.ts +1 -0
- package/src/theme/MediaTheme.doc.mjs +5 -5
- package/src/utils/timeParser.test.ts +6 -1
- 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,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,
|
|
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"}
|
package/dist/TabList/Tab.js
CHANGED
|
@@ -186,7 +186,11 @@ export function Tab({
|
|
|
186
186
|
} : {}),
|
|
187
187
|
[EDGE_COMP_ATTR]: '',
|
|
188
188
|
'data-tab-value': value,
|
|
189
|
-
|
|
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;
|
|
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"}
|
package/dist/Table/BaseTable.js
CHANGED
|
@@ -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
|
-
|
|
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,
|
|
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
|
-
//
|
|
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
|
|
43
|
-
*
|
|
44
|
-
*
|
|
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;
|
|
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
|
-
|
|
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":"
|
|
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"}
|