@astryxdesign/core 0.3.0-canary.505ccaa → 0.3.0-canary.52992ae
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AlertDialog/AlertDialog.d.ts +10 -2
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +22 -3
- package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
- package/dist/Chat/ChatDictationButton.js +2 -1
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +2 -1
- package/dist/Chat/ChatSendButton.d.ts.map +1 -1
- package/dist/Chat/ChatSendButton.js +4 -3
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +40 -47
- package/dist/CommandPalette/CommandPaletteItem.d.ts +1 -1
- package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +6 -3
- package/dist/CommandPalette/CommandPaletteList.js +1 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts +1 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +4 -2
- package/dist/ContextMenu/ContextMenu.js +1 -1
- package/dist/EmptyState/EmptyState.js +1 -1
- package/dist/Indicator/CheckIndicator.d.ts +2 -2
- package/dist/Indicator/CheckIndicator.d.ts.map +1 -1
- package/dist/Indicator/CheckIndicator.js +46 -13
- package/dist/Indicator/CheckboxIndicator.d.ts +1 -1
- package/dist/Indicator/CheckboxIndicator.d.ts.map +1 -1
- package/dist/Indicator/CheckboxIndicator.js +3 -3
- package/dist/Indicator/RadioIndicator.d.ts +1 -1
- package/dist/Indicator/RadioIndicator.d.ts.map +1 -1
- package/dist/Indicator/RadioIndicator.js +7 -7
- package/dist/Indicator/index.d.ts +1 -1
- package/dist/Indicator/index.d.ts.map +1 -1
- package/dist/Indicator/indicatorRegistry.d.ts +38 -3
- package/dist/Indicator/indicatorRegistry.d.ts.map +1 -1
- package/dist/Indicator/indicatorRegistry.js +42 -2
- package/dist/Indicator/types.d.ts +6 -1
- package/dist/Indicator/types.d.ts.map +1 -1
- package/dist/Indicator/useIndicator.d.ts +8 -2
- package/dist/Indicator/useIndicator.d.ts.map +1 -1
- package/dist/Indicator/useIndicator.js +7 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +18 -8
- package/dist/Timestamp/TimestampHoverCard.d.ts.map +1 -1
- package/dist/Timestamp/TimestampHoverCard.js +16 -34
- package/dist/TopNav/TopNavMegaMenu.d.ts +7 -0
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +67 -20
- package/dist/astryx.css +1 -0
- package/dist/astryx.umd.js +51 -51
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useClipboard.d.ts +59 -0
- package/dist/hooks/useClipboard.d.ts.map +1 -0
- package/dist/hooks/useClipboard.js +106 -0
- package/dist/hooks/useTreeFocus.d.ts.map +1 -1
- package/dist/hooks/useTreeFocus.js +9 -3
- package/package.json +2 -2
- package/src/AlertDialog/AlertDialog.doc.mjs +16 -3
- package/src/AlertDialog/AlertDialog.test.tsx +208 -1
- package/src/AlertDialog/AlertDialog.tsx +21 -3
- package/src/Chat/Chat.doc.mjs +2 -0
- package/src/Chat/ChatDictationButton.tsx +7 -1
- package/src/Chat/ChatLayoutScrollButton.tsx +7 -1
- package/src/Chat/ChatSendButton.tsx +2 -3
- package/src/CodeBlock/CodeBlock.doc.mjs +1 -0
- package/src/CodeBlock/CodeBlock.test.tsx +24 -0
- package/src/CodeBlock/CodeBlock.tsx +30 -61
- package/src/CommandPalette/CommandPaletteItem.tsx +7 -4
- package/src/CommandPalette/CommandPaletteList.tsx +2 -2
- package/src/ComplexSelector/ComplexSelector.tsx +4 -2
- package/src/ContextMenu/ContextMenu.tsx +1 -1
- package/src/DateInput/DateInput.doc.mjs +1 -1
- package/src/DateRangeInput/DateRangeInput.doc.mjs +1 -1
- package/src/DateTimeInput/DateTimeInput.doc.mjs +1 -1
- package/src/EmptyState/EmptyState.tsx +2 -2
- package/src/Indicator/CheckIndicator.tsx +61 -12
- package/src/Indicator/CheckboxIndicator.tsx +5 -3
- package/src/Indicator/Indicator.doc.mjs +5 -4
- package/src/Indicator/Indicator.test.tsx +139 -0
- package/src/Indicator/RadioIndicator.tsx +23 -17
- package/src/Indicator/index.ts +4 -1
- package/src/Indicator/indicatorRegistry.test.tsx +106 -0
- package/src/Indicator/indicatorRegistry.ts +52 -4
- package/src/Indicator/types.ts +6 -1
- package/src/Indicator/useIndicator.ts +13 -3
- package/src/MultiSelector/MultiSelector.doc.mjs +5 -0
- package/src/MultiSelector/MultiSelector.test.tsx +117 -0
- package/src/MultiSelector/MultiSelector.tsx +66 -54
- package/src/ProgressBar/ProgressBar.doc.mjs +1 -1
- package/src/Timestamp/TimestampHoverCard.tsx +13 -35
- package/src/TopNav/TopNavMegaMenu.test.tsx +433 -33
- package/src/TopNav/TopNavMegaMenu.tsx +83 -24
- package/src/hooks/index.ts +3 -0
- package/src/hooks/useClipboard.doc.mjs +86 -0
- package/src/hooks/useClipboard.test.tsx +151 -0
- package/src/hooks/useClipboard.ts +135 -0
- package/src/hooks/useTreeFocus.test.tsx +50 -0
- package/src/hooks/useTreeFocus.ts +14 -3
- package/src/i18n/InternationalizationProvider.doc.mjs +7 -2
|
@@ -22,7 +22,8 @@ export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
|
|
|
22
22
|
isOpen: boolean;
|
|
23
23
|
/**
|
|
24
24
|
* Renders alert dialog content inline without modal behavior.
|
|
25
|
-
* For documentation previews and showcases only.
|
|
25
|
+
* For documentation previews and showcases only. The inline path is not a
|
|
26
|
+
* modal, so it renders `role="group"` rather than `role="alertdialog"`.
|
|
26
27
|
* @default false
|
|
27
28
|
*/
|
|
28
29
|
isInline?: boolean;
|
|
@@ -73,9 +74,16 @@ export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
|
|
|
73
74
|
/**
|
|
74
75
|
* A confirmation dialog for destructive or irreversible actions.
|
|
75
76
|
*
|
|
77
|
+
* Implements the WAI-ARIA APG Alert Dialog pattern:
|
|
78
|
+
* https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
|
|
79
|
+
*
|
|
76
80
|
* Uses `role="alertdialog"` and requires explicit user action to dismiss.
|
|
77
81
|
* Cannot be dismissed by clicking outside. Escape key triggers cancel.
|
|
78
|
-
* Initial focus goes to the cancel button (least destructive action)
|
|
82
|
+
* Initial focus goes to the cancel button (least destructive action), pinned
|
|
83
|
+
* with `data-autofocus` so it survives any change to the footer's order.
|
|
84
|
+
*
|
|
85
|
+
* The `isInline` preview path is not modal, so it renders `role="group"`
|
|
86
|
+
* instead — the alertdialog role would promise modality it does not have.
|
|
79
87
|
*
|
|
80
88
|
* @example
|
|
81
89
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB
|
|
1
|
+
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAkElB;yBApFe,WAAW"}
|
|
@@ -31,9 +31,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
31
31
|
/**
|
|
32
32
|
* A confirmation dialog for destructive or irreversible actions.
|
|
33
33
|
*
|
|
34
|
+
* Implements the WAI-ARIA APG Alert Dialog pattern:
|
|
35
|
+
* https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
|
|
36
|
+
*
|
|
34
37
|
* Uses `role="alertdialog"` and requires explicit user action to dismiss.
|
|
35
38
|
* Cannot be dismissed by clicking outside. Escape key triggers cancel.
|
|
36
|
-
* Initial focus goes to the cancel button (least destructive action)
|
|
39
|
+
* Initial focus goes to the cancel button (least destructive action), pinned
|
|
40
|
+
* with `data-autofocus` so it survives any change to the footer's order.
|
|
41
|
+
*
|
|
42
|
+
* The `isInline` preview path is not modal, so it renders `role="group"`
|
|
43
|
+
* instead — the alertdialog role would promise modality it does not have.
|
|
37
44
|
*
|
|
38
45
|
* @example
|
|
39
46
|
* ```
|
|
@@ -80,8 +87,14 @@ export function AlertDialog({
|
|
|
80
87
|
isInline: isInline,
|
|
81
88
|
onOpenChange: onOpenChange,
|
|
82
89
|
width: width,
|
|
83
|
-
purpose: "form"
|
|
84
|
-
role:
|
|
90
|
+
purpose: "form"
|
|
91
|
+
// `alertdialog` is a modal role: it promises an interruption the user
|
|
92
|
+
// has to deal with, a focus trap, and an inert page behind it. The
|
|
93
|
+
// inline path renders a plain always-present div with none of that, so
|
|
94
|
+
// the role would misdescribe it. `group` keeps the title and
|
|
95
|
+
// description associated with a container without claiming a dialog.
|
|
96
|
+
,
|
|
97
|
+
role: isInline ? 'group' : 'alertdialog',
|
|
85
98
|
"aria-labelledby": titleId,
|
|
86
99
|
"aria-describedby": descriptionId,
|
|
87
100
|
...mergeProps(themeProps('alert-dialog'), {
|
|
@@ -111,6 +124,12 @@ export function AlertDialog({
|
|
|
111
124
|
variant: "ghost",
|
|
112
125
|
label: cancelLabel,
|
|
113
126
|
onClick: handleCancel
|
|
127
|
+
// Dialog focuses [data-autofocus] itself after showModal(),
|
|
128
|
+
// because React's autoFocus runs during commit while the
|
|
129
|
+
// dialog is still invisible. Cancel is the least destructive
|
|
130
|
+
// choice, so it is the one that should be preselected.
|
|
131
|
+
,
|
|
132
|
+
"data-autofocus": true
|
|
114
133
|
}), /*#__PURE__*/_jsx(Button, {
|
|
115
134
|
variant: actionVariant,
|
|
116
135
|
label: actionLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiDD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,IAAW,EACX,uBAA8B,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,4BAyE1B;yBAnFe,mBAAmB"}
|
|
@@ -24,6 +24,7 @@ import { colorVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
|
24
24
|
import { Button } from "../Button/index.js";
|
|
25
25
|
import { Icon } from "../Icon/index.js";
|
|
26
26
|
import { mergeProps } from "../utils/index.js";
|
|
27
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
27
28
|
import { useTranslator } from "../i18n/index.js";
|
|
28
29
|
|
|
29
30
|
// =============================================================================
|
|
@@ -112,7 +113,7 @@ export function ChatDictationButton({
|
|
|
112
113
|
} = SIZE_CONFIG[size];
|
|
113
114
|
return /*#__PURE__*/_jsxs("span", {
|
|
114
115
|
ref: ref,
|
|
115
|
-
...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
|
|
116
|
+
...mergeProps(themeProps('chat-dictation-button'), stylex.props(styles.wrapper, xstyle), className, style),
|
|
116
117
|
...rest,
|
|
117
118
|
children: [isListening && /*#__PURE__*/_jsx("span", {
|
|
118
119
|
"aria-hidden": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAkC7B;yBA3Ce,sBAAsB"}
|
|
@@ -22,6 +22,7 @@ import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars
|
|
|
22
22
|
import { Icon } from "../Icon/index.js";
|
|
23
23
|
import { Button } from "../Button/index.js";
|
|
24
24
|
import { mergeProps } from "../utils/index.js";
|
|
25
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
25
26
|
import { useTranslator } from "../i18n/index.js";
|
|
26
27
|
|
|
27
28
|
// =============================================================================
|
|
@@ -76,7 +77,7 @@ export function ChatLayoutScrollButton({
|
|
|
76
77
|
const t = useTranslator();
|
|
77
78
|
return /*#__PURE__*/_jsx("div", {
|
|
78
79
|
ref: ref,
|
|
79
|
-
...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
|
|
80
|
+
...mergeProps(themeProps('chat-layout-scroll-button'), stylex.props(styles.wrapper, xstyle), className, style),
|
|
80
81
|
...rest,
|
|
81
82
|
children: /*#__PURE__*/_jsx("div", {
|
|
82
83
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CA8CpE;yBA9Ce,cAAc"}
|
|
@@ -21,6 +21,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
21
21
|
import { Button } from "../Button/index.js";
|
|
22
22
|
import { useIcon } from "../Icon/index.js";
|
|
23
23
|
import { useChatComposerContext } from "./ChatContext.js";
|
|
24
|
+
import { mergeProps } from "../utils/index.js";
|
|
24
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
25
26
|
import { useTranslator } from "../i18n/index.js";
|
|
26
27
|
|
|
@@ -85,9 +86,9 @@ export function ChatSendButton(props) {
|
|
|
85
86
|
isDisabled: !isStopShown && isDisabled,
|
|
86
87
|
onClick: isStopShown ? onStop : handleSend,
|
|
87
88
|
...rest,
|
|
88
|
-
...themeProps('chat-send-button'),
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
...mergeProps(themeProps('chat-send-button'), {
|
|
90
|
+
className
|
|
91
|
+
}, style),
|
|
91
92
|
xstyle: [styles.root, xstyle]
|
|
92
93
|
});
|
|
93
94
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAwWxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAsNhB;yBA9Oe,SAAS"}
|
|
@@ -14,8 +14,9 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
14
14
|
import "../theme/tokens.stylex.js";
|
|
15
15
|
import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
16
16
|
import { mergeProps } from "../utils/index.js";
|
|
17
|
-
import {
|
|
17
|
+
import { useClipboard } from "../hooks/useClipboard.js";
|
|
18
18
|
import { Icon } from "../Icon/index.js";
|
|
19
|
+
import { IconButton } from "../IconButton/index.js";
|
|
19
20
|
import { tokenize, tokenizeAsync, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
|
|
20
21
|
import { ensureHighlightStyles } from "./highlightStyles.js";
|
|
21
22
|
import { applyHighlightRangesChunked } from "./highlightRanges.js";
|
|
@@ -148,6 +149,16 @@ const styles = {
|
|
|
148
149
|
sizeMd: {
|
|
149
150
|
kGuDYH: "xp03k98",
|
|
150
151
|
$$css: true
|
|
152
|
+
},
|
|
153
|
+
copyButton: {
|
|
154
|
+
kMwMTN: "x1mjzq1q",
|
|
155
|
+
$$css: true
|
|
156
|
+
},
|
|
157
|
+
copyButtonAbsolute: {
|
|
158
|
+
kVAEAm: "x10l6tqk",
|
|
159
|
+
k87sOh: "xctzyg",
|
|
160
|
+
kt4wiu: "x72tfeb",
|
|
161
|
+
$$css: true
|
|
151
162
|
}
|
|
152
163
|
};
|
|
153
164
|
|
|
@@ -437,18 +448,15 @@ export function CodeBlock({
|
|
|
437
448
|
...props
|
|
438
449
|
}) {
|
|
439
450
|
const t = useTranslator();
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
}
|
|
450
|
-
};
|
|
451
|
-
}, []);
|
|
451
|
+
// Owns the clipboard write, the transient copied flag, its reset timer, and
|
|
452
|
+
// the polite copy announcement (a swapped aria-label alone is not reliably
|
|
453
|
+
// announced) — shared with Timestamp via the same hook.
|
|
454
|
+
const {
|
|
455
|
+
copy,
|
|
456
|
+
isCopied: copied
|
|
457
|
+
} = useClipboard({
|
|
458
|
+
announce: t('@astryx.codeBlock.copied')
|
|
459
|
+
});
|
|
452
460
|
const useSpans = highlightMode === 'spans' || highlightMode === 'auto' && !hasHighlightAPI() || highlightMode === 'auto' && isSafari();
|
|
453
461
|
const lines = useMemo(() => {
|
|
454
462
|
const l = code.split('\n');
|
|
@@ -460,26 +468,11 @@ export function CodeBlock({
|
|
|
460
468
|
const tokenLines = useTokenLines(code, language, customTokenizer);
|
|
461
469
|
const highlightSet = useMemo(() => highlightLines ? new Set(highlightLines) : null, [highlightLines]);
|
|
462
470
|
const handleCopy = useCallback(async () => {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
setCopied(true);
|
|
466
|
-
// Swapping the button's aria-label alone isn't reliably announced by
|
|
467
|
-
// screen readers, so confirm the copy via a polite live region.
|
|
468
|
-
announce(t('@astryx.codeBlock.copied'));
|
|
471
|
+
const didCopy = await copy(code);
|
|
472
|
+
if (didCopy) {
|
|
469
473
|
onCopy?.();
|
|
470
|
-
// Restart the reset timer on every copy — otherwise a rapid re-copy
|
|
471
|
-
// is reverted early by the previous click's timer.
|
|
472
|
-
if (copyResetTimerRef.current != null) {
|
|
473
|
-
clearTimeout(copyResetTimerRef.current);
|
|
474
|
-
}
|
|
475
|
-
copyResetTimerRef.current = setTimeout(() => {
|
|
476
|
-
copyResetTimerRef.current = null;
|
|
477
|
-
setCopied(false);
|
|
478
|
-
}, 2000);
|
|
479
|
-
} catch {
|
|
480
|
-
// Clipboard failures leave the copied state unchanged.
|
|
481
474
|
}
|
|
482
|
-
}, [code,
|
|
475
|
+
}, [code, copy, onCopy]);
|
|
483
476
|
const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
|
|
484
477
|
// Digits in the largest line number — sizes the gutter column width.
|
|
485
478
|
const maxLineDigits = String(lines.length).length;
|
|
@@ -496,28 +489,28 @@ export function CodeBlock({
|
|
|
496
489
|
const scrollStyle = maxHeight ? {
|
|
497
490
|
maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
|
|
498
491
|
} : undefined;
|
|
499
|
-
const
|
|
500
|
-
|
|
492
|
+
const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx(IconButton, {
|
|
493
|
+
variant: "ghost",
|
|
501
494
|
size: "sm",
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
495
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
|
496
|
+
icon: copied ? 'check' : 'copy',
|
|
497
|
+
size: "sm",
|
|
498
|
+
color: "inherit"
|
|
499
|
+
})
|
|
500
|
+
// A visible "Copy" hover/focus hint via Button's built-in tooltip. It
|
|
501
|
+
// stays "Copy" after copying — the copy → check icon flip is the
|
|
502
|
+
// confirmation, not a tooltip change. The aria-label still swaps to the
|
|
503
|
+
// localized "Copied" for assistive tech, backed by the announcement.
|
|
504
|
+
,
|
|
505
|
+
tooltip: t('@astryx.codeBlock.copyCode'),
|
|
506
|
+
label: copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode'),
|
|
506
507
|
onClick: e => {
|
|
507
508
|
// Stop propagation so copying does not toggle the collapsible header.
|
|
508
509
|
e.stopPropagation();
|
|
509
510
|
void handleCopy();
|
|
510
511
|
},
|
|
511
|
-
|
|
512
|
-
...
|
|
513
|
-
0: {
|
|
514
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x9epnlk x3kzqx6 xx3sua9 xjbqb8w xe9uy6x x1mjzq1q x1ypdohk x14ju556"
|
|
515
|
-
},
|
|
516
|
-
1: {
|
|
517
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x9epnlk x3kzqx6 xx3sua9 xjbqb8w xe9uy6x x1mjzq1q x1ypdohk x14ju556 x10l6tqk xctzyg x72tfeb"
|
|
518
|
-
}
|
|
519
|
-
}[!!!showHeader << 0],
|
|
520
|
-
children: copyIcon
|
|
512
|
+
xstyle: [styles.copyButton, !showHeader && styles.copyButtonAbsolute],
|
|
513
|
+
...themeProps('codeblock-copy-button')
|
|
521
514
|
}) : null;
|
|
522
515
|
const headerEl = showHeader ? /*#__PURE__*/_jsxs("div", {
|
|
523
516
|
...{
|
|
@@ -52,7 +52,7 @@ export interface CommandPaletteItemProps extends Omit<BaseProps<HTMLDivElement>,
|
|
|
52
52
|
* </CommandPaletteItem>
|
|
53
53
|
* ```
|
|
54
54
|
*/
|
|
55
|
-
export declare function CommandPaletteItem({ value, onSelect, isHighlighted: controlledHighlighted, isSelected: controlledSelected, isDisabled, children, ref, xstyle, className, style, ...props }: CommandPaletteItemProps): import("react").JSX.Element;
|
|
55
|
+
export declare function CommandPaletteItem({ value, onSelect, isHighlighted: controlledHighlighted, isSelected: controlledSelected, isDisabled, children, ref, xstyle, className, style, onClick: onClickProp, onMouseEnter: onMouseEnterProp, ...props }: CommandPaletteItemProps): import("react").JSX.Element;
|
|
56
56
|
export declare namespace CommandPaletteItem {
|
|
57
57
|
var displayName: string;
|
|
58
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAA0C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAA0C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyD5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+EAA+E;IAC/E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,aAAa,EAAE,qBAAqB,EACpC,UAAU,EAAE,kBAAkB,EAC9B,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,GAAG,KAAK,EACT,EAAE,uBAAuB,+BAkFzB;yBAhGe,kBAAkB"}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
15
15
|
import * as stylex from '@stylexjs/stylex';
|
|
16
16
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
17
|
+
import { composeEventHandlers } from "../utils/composeEventHandlers.js";
|
|
17
18
|
import "../theme/tokens.stylex.js";
|
|
18
19
|
import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
19
20
|
import { useCommandPaletteContext } from "./CommandPaletteContext.js";
|
|
@@ -87,6 +88,8 @@ export function CommandPaletteItem({
|
|
|
87
88
|
xstyle,
|
|
88
89
|
className,
|
|
89
90
|
style,
|
|
91
|
+
onClick: onClickProp,
|
|
92
|
+
onMouseEnter: onMouseEnterProp,
|
|
90
93
|
...props
|
|
91
94
|
}) {
|
|
92
95
|
const ctx = useCommandPaletteContext();
|
|
@@ -135,15 +138,15 @@ export function CommandPaletteItem({
|
|
|
135
138
|
}, [isDisabled, itemIndex, ctx]);
|
|
136
139
|
return /*#__PURE__*/_jsx("div", {
|
|
137
140
|
ref: mergeRefs(ref, itemRef),
|
|
141
|
+
...props,
|
|
138
142
|
id: ctx && itemIndex >= 0 ? ctx.getItemId(itemIndex) : undefined,
|
|
139
143
|
role: "option",
|
|
140
144
|
"aria-selected": isSelected,
|
|
141
145
|
"aria-disabled": isDisabled || undefined,
|
|
142
146
|
"data-value": value,
|
|
143
|
-
onClick: handleClick,
|
|
144
|
-
onMouseEnter: handleMouseEnter,
|
|
147
|
+
onClick: composeEventHandlers(onClickProp, handleClick),
|
|
148
|
+
onMouseEnter: composeEventHandlers(onMouseEnterProp, handleMouseEnter),
|
|
145
149
|
...mergeProps(themeProps('command-palette-item'), stylex.props(styles.item, !isDisabled && styles.itemHover, isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, isDisabled && styles.itemDisabled, xstyle), className, style),
|
|
146
|
-
...props,
|
|
147
150
|
children: children
|
|
148
151
|
});
|
|
149
152
|
}
|
|
@@ -66,11 +66,11 @@ export function CommandPaletteList({
|
|
|
66
66
|
const ctx = useCommandPaletteContext();
|
|
67
67
|
return /*#__PURE__*/_jsx("div", {
|
|
68
68
|
ref: ref,
|
|
69
|
+
...props,
|
|
69
70
|
id: ctx?.listId,
|
|
70
71
|
role: "listbox",
|
|
71
72
|
"aria-label": label,
|
|
72
73
|
...mergeProps(themeProps('command-palette-list'), stylex.props(styles.list, xstyle), className, style),
|
|
73
|
-
...props,
|
|
74
74
|
children: children
|
|
75
75
|
});
|
|
76
76
|
}
|
|
@@ -101,7 +101,7 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
|
|
|
101
101
|
* </ComplexSelector>
|
|
102
102
|
* ```
|
|
103
103
|
*/
|
|
104
|
-
export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, width, placement, contentXstyle, xstyle, className, style, 'data-testid': testId, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
|
|
104
|
+
export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, width, placement, contentXstyle, xstyle, className, style, 'data-testid': testId, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
|
|
105
105
|
export declare namespace ComplexSelector {
|
|
106
106
|
var displayName: string;
|
|
107
107
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAA4B,KAAK,kBAAkB,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,6 +25,7 @@ import { usePopover } from "../Popover/usePopover.js";
|
|
|
25
25
|
import "../theme/tokens.stylex.js";
|
|
26
26
|
import { colorVars, durationVars, easeVars, radiusVars, sizeVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
27
27
|
import { mergeProps } from "../utils/index.js";
|
|
28
|
+
import { composeEventHandlers } from "../utils/composeEventHandlers.js";
|
|
28
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
30
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
30
31
|
const styles = {
|
|
@@ -182,6 +183,7 @@ export function ComplexSelector({
|
|
|
182
183
|
className,
|
|
183
184
|
style,
|
|
184
185
|
'data-testid': testId,
|
|
186
|
+
onClick: onClickProp,
|
|
185
187
|
...props
|
|
186
188
|
}) {
|
|
187
189
|
const t = useTranslator();
|
|
@@ -228,11 +230,11 @@ export function ComplexSelector({
|
|
|
228
230
|
ref: popover.triggerRef,
|
|
229
231
|
"data-testid": testId,
|
|
230
232
|
...props,
|
|
231
|
-
onClick: () => {
|
|
233
|
+
onClick: composeEventHandlers(onClickProp, () => {
|
|
232
234
|
if (!isDisabled) {
|
|
233
235
|
popover.toggle();
|
|
234
236
|
}
|
|
235
|
-
},
|
|
237
|
+
}),
|
|
236
238
|
...mergeProps(themeProps('complex-selector', {
|
|
237
239
|
size,
|
|
238
240
|
status: status?.type ?? null
|
|
@@ -337,9 +337,9 @@ export function ContextMenu({
|
|
|
337
337
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
338
338
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
339
339
|
ref: mergeRefs(ref, triggerRef),
|
|
340
|
+
...triggerProps,
|
|
340
341
|
onContextMenu: handleContextMenu,
|
|
341
342
|
...longPressHandlers,
|
|
342
|
-
...triggerProps,
|
|
343
343
|
"data-testid": testId,
|
|
344
344
|
...stylex.props(styles.trigger, ...(triggerXstyle ? Array.isArray(triggerXstyle) ? triggerXstyle : [triggerXstyle] : [])),
|
|
345
345
|
children: [children, /*#__PURE__*/_jsx("span", {
|
|
@@ -77,11 +77,11 @@ export function EmptyState({
|
|
|
77
77
|
const HeadingTag = `h${headingLevel}`;
|
|
78
78
|
return /*#__PURE__*/_jsxs("div", {
|
|
79
79
|
ref: ref,
|
|
80
|
+
...props,
|
|
80
81
|
role: "status",
|
|
81
82
|
...mergeProps(themeProps('empty-state', {
|
|
82
83
|
variant: isCompact ? 'compact' : null
|
|
83
84
|
}), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
|
|
84
|
-
...props,
|
|
85
85
|
children: [icon != null && /*#__PURE__*/_jsx("div", {
|
|
86
86
|
"aria-hidden": "true",
|
|
87
87
|
children: icon
|
|
@@ -6,14 +6,14 @@ import type { IndicatorProps } from './types';
|
|
|
6
6
|
* state, or focus behavior; the option or row that hosts it keeps all of that.
|
|
7
7
|
*
|
|
8
8
|
* @example
|
|
9
|
-
* ```
|
|
9
|
+
* ```
|
|
10
10
|
* <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
|
|
11
11
|
* ```
|
|
12
12
|
*
|
|
13
13
|
* Swap every single-selection mark for a radio:
|
|
14
14
|
*
|
|
15
15
|
* @example
|
|
16
|
-
* ```
|
|
16
|
+
* ```
|
|
17
17
|
* import {RadioIndicator} from '@astryxdesign/core/Indicator';
|
|
18
18
|
*
|
|
19
19
|
* defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckIndicator.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckIndicator.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AA6B5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,iBAAiB,CAAC,sCAsEnC;yBAhFe,cAAc"}
|
|
@@ -29,13 +29,36 @@
|
|
|
29
29
|
* is an icon, and `astryx-icon` plus the host's target already reach it.
|
|
30
30
|
*/
|
|
31
31
|
|
|
32
|
+
import * as stylex from '@stylexjs/stylex';
|
|
32
33
|
import { Icon } from "../Icon/Icon.js";
|
|
34
|
+
import "../theme/tokens.stylex.js";
|
|
35
|
+
import { colorVars } from "../theme/tokens.stylex.js";
|
|
36
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
33
37
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
34
38
|
/** The check glyph matches the control sizes the indicator families share. */
|
|
35
39
|
const iconSizeForIndicator = {
|
|
36
40
|
sm: 'sm',
|
|
37
41
|
md: 'sm'
|
|
38
42
|
};
|
|
43
|
+
const styles = {
|
|
44
|
+
slot: {
|
|
45
|
+
k1xSpc: "x3nfvp2",
|
|
46
|
+
kGNEyG: "x6s0dn4",
|
|
47
|
+
kjj79g: "xl56j7k",
|
|
48
|
+
kmuXW: "x2lah0s",
|
|
49
|
+
kzqmXN: "xcdlrvm",
|
|
50
|
+
kZKoxP: "x1l36t39",
|
|
51
|
+
$$css: true
|
|
52
|
+
},
|
|
53
|
+
enabled: {
|
|
54
|
+
kMwMTN: "xqwr325",
|
|
55
|
+
$$css: true
|
|
56
|
+
},
|
|
57
|
+
disabled: {
|
|
58
|
+
kMwMTN: "xqa6c3m",
|
|
59
|
+
$$css: true
|
|
60
|
+
}
|
|
61
|
+
};
|
|
39
62
|
|
|
40
63
|
/**
|
|
41
64
|
* The default single-selection mark: a checkmark when chosen, nothing when not.
|
|
@@ -44,14 +67,14 @@ const iconSizeForIndicator = {
|
|
|
44
67
|
* state, or focus behavior; the option or row that hosts it keeps all of that.
|
|
45
68
|
*
|
|
46
69
|
* @example
|
|
47
|
-
* ```
|
|
70
|
+
* ```
|
|
48
71
|
* <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
|
|
49
72
|
* ```
|
|
50
73
|
*
|
|
51
74
|
* Swap every single-selection mark for a radio:
|
|
52
75
|
*
|
|
53
76
|
* @example
|
|
54
|
-
* ```
|
|
77
|
+
* ```
|
|
55
78
|
* import {RadioIndicator} from '@astryxdesign/core/Indicator';
|
|
56
79
|
*
|
|
57
80
|
* defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
|
|
@@ -70,24 +93,34 @@ export function CheckIndicator({
|
|
|
70
93
|
}) {
|
|
71
94
|
const isChecked = state === 'checked';
|
|
72
95
|
|
|
73
|
-
// Nothing to draw, and no box to reserve: an unmarked row keeps the layout
|
|
74
|
-
// it would have without this indicator.
|
|
75
|
-
if (!isChecked) {
|
|
76
|
-
return null;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
96
|
// `children` (a pending Spinner, say) replaces the mark but keeps the
|
|
80
|
-
// indicator's place, matching the other indicators' contract.
|
|
81
|
-
//
|
|
82
|
-
|
|
97
|
+
// indicator's place, matching the other indicators' contract. It is checked
|
|
98
|
+
// BEFORE `state`: a host passes a busy visual through in whatever state the
|
|
99
|
+
// row happens to be in, and an unchecked listbox row is the common one.
|
|
100
|
+
//
|
|
101
|
+
// `isRenderable`, not `children != null`: the idiom a host actually writes is
|
|
102
|
+
// `children={isBusy && <Spinner/>}`, which passes `false` when it is not
|
|
103
|
+
// busy. `false` is non-null, so a null check takes this branch, renders
|
|
104
|
+
// nothing inside it, and DELETES the mark on a chosen row (#4893).
|
|
105
|
+
//
|
|
106
|
+
// There is no glyph to hang the caller's props on in this branch, so they go
|
|
107
|
+
// on a span — every one of them, so a `data-testid`, an `id`, a handler or
|
|
108
|
+
// an `xstyle` behaves the same whether or not children are present.
|
|
109
|
+
if (isRenderable(children)) {
|
|
83
110
|
return /*#__PURE__*/_jsx("span", {
|
|
111
|
+
...rest,
|
|
84
112
|
ref: ref,
|
|
85
113
|
"aria-hidden": "true",
|
|
86
|
-
|
|
87
|
-
style: style,
|
|
114
|
+
...mergeProps(stylex.props(styles.slot, isDisabled ? styles.disabled : styles.enabled, xstyle), className, style),
|
|
88
115
|
children: children
|
|
89
116
|
});
|
|
90
117
|
}
|
|
118
|
+
|
|
119
|
+
// Nothing to draw, and no box to reserve: an unmarked row keeps the layout
|
|
120
|
+
// it would have without this indicator.
|
|
121
|
+
if (!isChecked) {
|
|
122
|
+
return null;
|
|
123
|
+
}
|
|
91
124
|
return /*#__PURE__*/_jsx(Icon
|
|
92
125
|
// Spread first so the indicator's own contract (below) wins over any
|
|
93
126
|
// same-named DOM attribute a caller passed through.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckboxIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAwI5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+
|
|
1
|
+
{"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckboxIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAwI5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAoElC;yBA9Ee,iBAAiB"}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
import * as stylex from '@stylexjs/stylex';
|
|
12
12
|
import "../theme/tokens.stylex.js";
|
|
13
13
|
import { borderVars, colorVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
14
|
-
import { mergeProps, themeProps } from "../utils/index.js";
|
|
14
|
+
import { isRenderable, mergeProps, themeProps } from "../utils/index.js";
|
|
15
15
|
import "./indicator.markers.stylex.js";
|
|
16
16
|
import { indicatorScope } from "./indicator.markers.stylex.js";
|
|
17
17
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -120,7 +120,7 @@ const indeterminateSizeStyles = {
|
|
|
120
120
|
* the `checkbox` theme target like any other component.
|
|
121
121
|
*
|
|
122
122
|
* @example
|
|
123
|
-
* ```
|
|
123
|
+
* ```
|
|
124
124
|
* <CheckboxIndicator state="indeterminate" size="sm" />
|
|
125
125
|
* ```
|
|
126
126
|
*/
|
|
@@ -152,7 +152,7 @@ export function CheckboxIndicator({
|
|
|
152
152
|
legacyNames: ['checkbox']
|
|
153
153
|
}), stylex.props(styles.box, boxSizeStyles[size], isCheckedOrIndeterminate ? styles.checked : styles.unchecked, isDisabled && styles.disabled, isDisabled && !isCheckedOrIndeterminate && styles.disabledUnchecked, xstyle), className, style),
|
|
154
154
|
...rest,
|
|
155
|
-
children: children
|
|
155
|
+
children: isRenderable(children) ? children : /*#__PURE__*/_jsxs(_Fragment, {
|
|
156
156
|
children: [/*#__PURE__*/_jsx("svg", {
|
|
157
157
|
viewBox: "0 0 10 10",
|
|
158
158
|
...stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible),
|