@astryxdesign/core 0.3.0-canary.9b5eaa0 → 0.3.0-canary.9bf8949
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/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/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +1 -0
- 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 +51 -13
- package/dist/Indicator/CheckboxIndicator.d.ts +1 -1
- package/dist/Indicator/CheckboxIndicator.d.ts.map +1 -1
- package/dist/Indicator/CheckboxIndicator.js +4 -4
- package/dist/Indicator/RadioIndicator.d.ts +1 -1
- package/dist/Indicator/RadioIndicator.d.ts.map +1 -1
- package/dist/Indicator/RadioIndicator.js +8 -8
- 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 +20 -2
- 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/NumberInput/NumberInput.d.ts +10 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +7 -5
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +1 -0
- package/dist/TextArea/TextArea.d.ts +10 -1
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +12 -4
- package/dist/TextInput/TextInput.d.ts +10 -1
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +6 -4
- 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 +55 -55
- package/dist/astryx.umd.js.map +3 -3
- package/dist/hooks/useTreeFocus.d.ts.map +1 -1
- package/dist/hooks/useTreeFocus.js +9 -3
- package/package.json +2 -2
- 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/CheckboxInput/CheckboxInput.test.tsx +32 -0
- package/src/CheckboxInput/CheckboxInput.tsx +1 -0
- 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 +68 -12
- package/src/Indicator/CheckboxIndicator.tsx +11 -5
- package/src/Indicator/Indicator.doc.mjs +16 -7
- package/src/Indicator/Indicator.test.tsx +224 -0
- package/src/Indicator/RadioIndicator.tsx +29 -19
- 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 +23 -2
- 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/NumberInput/NumberInput.doc.mjs +18 -2
- package/src/NumberInput/NumberInput.test.tsx +112 -0
- package/src/NumberInput/NumberInput.tsx +15 -4
- package/src/ProgressBar/ProgressBar.doc.mjs +1 -1
- package/src/Switch/Switch.test.tsx +32 -0
- package/src/Switch/Switch.tsx +1 -0
- package/src/TextArea/TextArea.doc.mjs +18 -2
- package/src/TextArea/TextArea.test.tsx +145 -0
- package/src/TextArea/TextArea.tsx +20 -4
- package/src/TextInput/TextInput.doc.mjs +18 -2
- package/src/TextInput/TextInput.test.tsx +112 -0
- package/src/TextInput/TextInput.tsx +14 -3
- package/src/TopNav/TopNavMegaMenu.test.tsx +433 -33
- package/src/TopNav/TopNavMegaMenu.tsx +83 -24
- package/src/hooks/useTreeFocus.test.tsx +50 -0
- package/src/hooks/useTreeFocus.ts +14 -3
- package/src/i18n/InternationalizationProvider.doc.mjs +7 -2
|
@@ -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":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA0DhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA0DhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAmMpB;yBA5Ne,aAAa"}
|
|
@@ -233,6 +233,7 @@ export function CheckboxInput({
|
|
|
233
233
|
,
|
|
234
234
|
disabled: isDisabled && !isFocusableDisabled,
|
|
235
235
|
"aria-disabled": isFocusableDisabled ? 'true' : undefined,
|
|
236
|
+
form: isFocusableDisabled ? '' : undefined,
|
|
236
237
|
readOnly: isReadOnly,
|
|
237
238
|
required: isRequired,
|
|
238
239
|
onChange: e => {
|
|
@@ -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":"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;AAkB5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAgH9C,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,WAAW,0BAA0B;IACzC,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB,CAAC,KAAK,CAAE,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,wEAAwE;IACxE,QAAQ,EAAE,CACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EAChC,KAAK,EAAE,MAAM,IAAI,EACjB,KAAK,EAAE,0BAA0B,KAC9B,SAAS,CAAC;IACf,iDAAiD;IACjD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,wBAAwB;IACxB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;IAChD,qDAAqD;IACrD,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,EACrC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,WAAW,EAAE,oBAAoB,EACjC,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAiB,EACjB,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,IAAW,EACX,KAAK,EACL,SAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,qBAgK7B;yBA3Le,eAAe"}
|
|
@@ -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,sCA6EnC;yBAvFe,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.
|
|
@@ -99,6 +132,11 @@ export function CheckIndicator({
|
|
|
99
132
|
// runtime; the cast only reconciles the two declarations.
|
|
100
133
|
, {
|
|
101
134
|
...rest,
|
|
135
|
+
// After the spread, deliberately. Icon puts its own a11y defaults BEFORE
|
|
136
|
+
// `{...props}` as a documented escape hatch (Icon.tsx), which is right
|
|
137
|
+
// for an icon and wrong for an indicator — this one is decorative by
|
|
138
|
+
// contract, so it re-asserts it here rather than inheriting the hatch.
|
|
139
|
+
"aria-hidden": "true",
|
|
102
140
|
icon: "check",
|
|
103
141
|
size: iconSizeForIndicator[size],
|
|
104
142
|
color: isDisabled ? 'disabled' : 'accent'
|
|
@@ -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,+BAwElC;yBAlFe,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
|
*/
|
|
@@ -139,6 +139,7 @@ export function CheckboxIndicator({
|
|
|
139
139
|
const isIndeterminate = state === 'indeterminate';
|
|
140
140
|
const isCheckedOrIndeterminate = isChecked || isIndeterminate;
|
|
141
141
|
return /*#__PURE__*/_jsx("span", {
|
|
142
|
+
...rest,
|
|
142
143
|
ref: ref,
|
|
143
144
|
"aria-hidden": "true",
|
|
144
145
|
...mergeProps(themeProps('checkbox-indicator', {
|
|
@@ -151,8 +152,7 @@ export function CheckboxIndicator({
|
|
|
151
152
|
{
|
|
152
153
|
legacyNames: ['checkbox']
|
|
153
154
|
}), stylex.props(styles.box, boxSizeStyles[size], isCheckedOrIndeterminate ? styles.checked : styles.unchecked, isDisabled && styles.disabled, isDisabled && !isCheckedOrIndeterminate && styles.disabledUnchecked, xstyle), className, style),
|
|
154
|
-
|
|
155
|
-
children: children ?? /*#__PURE__*/_jsxs(_Fragment, {
|
|
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),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/RadioIndicator.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/RadioIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAuG5C;;;;;;;;;;;;;;;;GAgBG;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,+BAqDnC;yBA/De,cAAc"}
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
import * as stylex from '@stylexjs/stylex';
|
|
12
12
|
import "../theme/tokens.stylex.js";
|
|
13
|
-
import { borderVars, colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
14
|
-
import { mergeProps, themeProps } from "../utils/index.js";
|
|
13
|
+
import { borderVars, colorVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.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 } from "react/jsx-runtime";
|
|
@@ -24,7 +24,7 @@ const styles = {
|
|
|
24
24
|
kmuXW: "x2lah0s",
|
|
25
25
|
kMzoRj: "x1litavf",
|
|
26
26
|
ksu8eU: "x1y0btm7",
|
|
27
|
-
kaIpWk: "
|
|
27
|
+
kaIpWk: "xjspbzw",
|
|
28
28
|
k1ekBW: "xts7igz",
|
|
29
29
|
kIyJzY: "xuedmi6 x12w9bfk",
|
|
30
30
|
kAMwcw: "xlr8y92",
|
|
@@ -50,7 +50,7 @@ const styles = {
|
|
|
50
50
|
$$css: true
|
|
51
51
|
},
|
|
52
52
|
dot: {
|
|
53
|
-
kaIpWk: "
|
|
53
|
+
kaIpWk: "xjspbzw",
|
|
54
54
|
kWkggS: "x1azo05 xwvh9j7",
|
|
55
55
|
$$css: true
|
|
56
56
|
}
|
|
@@ -93,7 +93,7 @@ const dotSizeStyles = {
|
|
|
93
93
|
* components whose default is "a checkmark when selected, nothing otherwise".
|
|
94
94
|
*
|
|
95
95
|
* @example
|
|
96
|
-
* ```
|
|
96
|
+
* ```
|
|
97
97
|
* <RadioIndicator state="checked" size="md" />
|
|
98
98
|
* ```
|
|
99
99
|
*/
|
|
@@ -112,6 +112,7 @@ export function RadioIndicator({
|
|
|
112
112
|
// selected.
|
|
113
113
|
const isChecked = state !== 'unchecked';
|
|
114
114
|
return /*#__PURE__*/_jsx("span", {
|
|
115
|
+
...rest,
|
|
115
116
|
ref: ref,
|
|
116
117
|
"aria-hidden": "true",
|
|
117
118
|
...mergeProps(themeProps('radio-indicator', {
|
|
@@ -124,14 +125,13 @@ export function RadioIndicator({
|
|
|
124
125
|
{
|
|
125
126
|
legacyNames: ['radio']
|
|
126
127
|
}), stylex.props(styles.circle, circleSizeStyles[size], isChecked ? styles.checked : styles.unchecked, isDisabled && styles.disabled, isDisabled && !isChecked && styles.disabledUnchecked, xstyle), className, style),
|
|
127
|
-
|
|
128
|
-
children: children ?? (isChecked && /*#__PURE__*/_jsx("span", {
|
|
128
|
+
children: isRenderable(children) ? children : isChecked && /*#__PURE__*/_jsx("span", {
|
|
129
129
|
...mergeProps(themeProps('radio-indicator-dot', {
|
|
130
130
|
size
|
|
131
131
|
}, {
|
|
132
132
|
legacyNames: ['radio-dot']
|
|
133
133
|
}), stylex.props(styles.dot, dotSizeStyles[size]))
|
|
134
|
-
})
|
|
134
|
+
})
|
|
135
135
|
});
|
|
136
136
|
}
|
|
137
137
|
RadioIndicator.displayName = 'RadioIndicator';
|
|
@@ -17,7 +17,7 @@ export { CheckboxIndicator } from './CheckboxIndicator';
|
|
|
17
17
|
export { CheckIndicator } from './CheckIndicator';
|
|
18
18
|
export { RadioIndicator } from './RadioIndicator';
|
|
19
19
|
export { defaultIndicators, getIndicator } from './indicatorRegistry';
|
|
20
|
-
export type { IndicatorRegistrySource } from './indicatorRegistry';
|
|
20
|
+
export type { CoreIndicatorName, IndicatorRegistrySource, } from './indicatorRegistry';
|
|
21
21
|
export { useIndicator } from './useIndicator';
|
|
22
22
|
export { indicatorScope } from './indicator.markers.stylex';
|
|
23
23
|
export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from './types';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Indicator/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACpE,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Indicator/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACpE,YAAY,EACV,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAC,cAAc,EAAC,MAAM,4BAA4B,CAAC;AAE1D,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,qBAAqB,EACrB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,cAAc,GACf,MAAM,SAAS,CAAC"}
|
|
@@ -4,9 +4,34 @@
|
|
|
4
4
|
* @output Exports the default indicator map and getIndicator resolution
|
|
5
5
|
* @position Server-safe indicator resolver; no 'use client' so it is
|
|
6
6
|
* importable from RSC
|
|
7
|
+
*
|
|
8
|
+
* Two name spaces meet here, and keeping them apart is the whole design:
|
|
9
|
+
*
|
|
10
|
+
* - {@link CoreIndicatorName} — the indicators Astryx itself ships. Closed,
|
|
11
|
+
* and every one of them has a default, so resolving one always yields a
|
|
12
|
+
* component.
|
|
13
|
+
* - {@link IndicatorName} — every indicator name that exists, including the
|
|
14
|
+
* ones other packages add by augmenting `IndicatorMap`. Open, and core has
|
|
15
|
+
* no default for a name it has never heard of.
|
|
16
|
+
*
|
|
17
|
+
* `getIndicator` is overloaded along that seam: a core name resolves to a
|
|
18
|
+
* component, an augmented name resolves to a component *or* `undefined`, and
|
|
19
|
+
* the caller has to say what to do about it. Typing the map as total over the
|
|
20
|
+
* open union instead — which is what shipped in #4712 — made the compiler
|
|
21
|
+
* promise a component for `getIndicator('brand-star')` and hand back
|
|
22
|
+
* `undefined` at runtime.
|
|
7
23
|
*/
|
|
8
24
|
import type { DefinedTheme } from '../theme/defineTheme';
|
|
9
25
|
import type { IndicatorComponent, IndicatorMap, IndicatorName } from './types';
|
|
26
|
+
/**
|
|
27
|
+
* The indicator names Astryx ships a default for.
|
|
28
|
+
*
|
|
29
|
+
* Written out rather than derived from {@link IndicatorMap}, because that
|
|
30
|
+
* interface is open to augmentation and this set is not: it is exactly what is
|
|
31
|
+
* in {@link defaultIndicators} below. `indicatorRegistry.test.tsx` pins the two
|
|
32
|
+
* together in both directions.
|
|
33
|
+
*/
|
|
34
|
+
export type CoreIndicatorName = 'check' | 'checkbox' | 'radio';
|
|
10
35
|
/**
|
|
11
36
|
* The indicators Astryx ships. A theme's `indicators` entries override these
|
|
12
37
|
* by name.
|
|
@@ -16,7 +41,7 @@ import type { IndicatorComponent, IndicatorMap, IndicatorName } from './types';
|
|
|
16
41
|
* {@link IndicatorRegistry} holds replacements to.
|
|
17
42
|
*/
|
|
18
43
|
export declare const defaultIndicators: {
|
|
19
|
-
[N in
|
|
44
|
+
[N in CoreIndicatorName]: IndicatorComponent<IndicatorMap[N]>;
|
|
20
45
|
};
|
|
21
46
|
export type IndicatorRegistrySource = DefinedTheme | string | null | undefined;
|
|
22
47
|
/**
|
|
@@ -27,10 +52,20 @@ export type IndicatorRegistrySource = DefinedTheme | string | null | undefined;
|
|
|
27
52
|
* the {@link useIndicator} hook, which resolves against the nearest `<Theme>`.
|
|
28
53
|
*
|
|
29
54
|
* @example
|
|
30
|
-
* ```
|
|
55
|
+
* ```
|
|
31
56
|
* const Radio = getIndicator('radio', themeName);
|
|
32
57
|
* <Radio state="checked" />
|
|
33
58
|
* ```
|
|
59
|
+
*
|
|
60
|
+
* For a name contributed by augmentation there is no built-in to fall back to,
|
|
61
|
+
* so the result is `undefined` unless a theme supplies one — the package that
|
|
62
|
+
* added the name owns its default:
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* ```
|
|
66
|
+
* const Star = getIndicator('brand-star', themeName) ?? BrandStar;
|
|
67
|
+
* ```
|
|
34
68
|
*/
|
|
35
|
-
export declare function getIndicator<N extends
|
|
69
|
+
export declare function getIndicator<N extends CoreIndicatorName>(name: N, source?: IndicatorRegistrySource): IndicatorComponent<IndicatorMap[N]>;
|
|
70
|
+
export declare function getIndicator<N extends IndicatorName>(name: N, source?: IndicatorRegistrySource): IndicatorComponent<IndicatorMap[N]> | undefined;
|
|
36
71
|
//# sourceMappingURL=indicatorRegistry.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"indicatorRegistry.d.ts","sourceRoot":"","sources":["../../src/Indicator/indicatorRegistry.ts"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"indicatorRegistry.d.ts","sourceRoot":"","sources":["../../src/Indicator/indicatorRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAKvD,OAAO,KAAK,EACV,kBAAkB,EAClB,YAAY,EACZ,aAAa,EAEd,MAAM,SAAS,CAAC;AAEjB;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE;KAC7B,CAAC,IAAI,iBAAiB,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;CAK9D,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAe/E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,iBAAiB,EACtD,IAAI,EAAE,CAAC,EACP,MAAM,CAAC,EAAE,uBAAuB,GAC/B,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AACvC,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,EAClD,IAAI,EAAE,CAAC,EACP,MAAM,CAAC,EAAE,uBAAuB,GAC/B,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC"}
|