@astryxdesign/core 0.4.0-canary.aba744c → 0.4.0-canary.e144ea7
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/Indicator/index.d.ts +1 -1
- package/dist/Indicator/index.d.ts.map +1 -1
- package/dist/Indicator/types.d.ts +10 -0
- package/dist/Indicator/types.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts +8 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +23 -16
- package/dist/Selector/Selector.d.ts +10 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +39 -16
- package/dist/astryx.css +1 -0
- package/dist/astryx.umd.js +46 -46
- package/dist/astryx.umd.js.map +3 -3
- package/package.json +2 -2
- package/src/Indicator/index.ts +1 -0
- package/src/Indicator/types.ts +11 -0
- package/src/MultiSelector/MultiSelector.doc.mjs +7 -0
- package/src/MultiSelector/MultiSelector.test.tsx +69 -0
- package/src/MultiSelector/MultiSelector.tsx +38 -10
- package/src/Selector/Selector.doc.mjs +7 -0
- package/src/Selector/Selector.test.tsx +105 -0
- package/src/Selector/Selector.tsx +66 -22
|
@@ -20,5 +20,5 @@ export { defaultIndicators, getIndicator } from './indicatorRegistry';
|
|
|
20
20
|
export type { CoreIndicatorName, IndicatorRegistrySource, } from './indicatorRegistry';
|
|
21
21
|
export { useIndicator } from './useIndicator';
|
|
22
22
|
export { indicatorScope } from './indicator.markers.stylex';
|
|
23
|
-
export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from './types';
|
|
23
|
+
export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorPosition, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from './types';
|
|
24
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -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,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"}
|
|
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,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,cAAc,GACf,MAAM,SAAS,CAAC"}
|
|
@@ -58,6 +58,16 @@ export type IndicatorFamily = keyof IndicatorFamilyMap & string;
|
|
|
58
58
|
export type IndicatorState<F extends IndicatorFamily = IndicatorFamily> = IndicatorFamilyMap[F];
|
|
59
59
|
/** Indicator size scale — matches the control sizes of the owning inputs. */
|
|
60
60
|
export type IndicatorSize = 'sm' | 'md';
|
|
61
|
+
/**
|
|
62
|
+
* Which edge of its row an indicator sits on.
|
|
63
|
+
*
|
|
64
|
+
* Logical, not physical: `start` is the left edge in LTR and the right edge in
|
|
65
|
+
* RTL. Owned by the host component, not by the indicator — an indicator draws a
|
|
66
|
+
* picture and has no say in where the row puts it — which is why this is a prop
|
|
67
|
+
* on the components that lay out rows rather than part of
|
|
68
|
+
* {@link IndicatorProps}.
|
|
69
|
+
*/
|
|
70
|
+
export type IndicatorPosition = 'start' | 'end';
|
|
61
71
|
/**
|
|
62
72
|
* Props every indicator accepts.
|
|
63
73
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Indicator/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAE,GAAG,EAAC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IACzC,0EAA0E;IAC1E,cAAc,EAAE,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;CAC3D;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAEhE,kEAAkE;AAClE,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACpE,kBAAkB,CAAC,CAAC,CAAC,CAAC;AAExB,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,cAAc,CAC7B,CAAC,SAAS,eAAe,GAAG,eAAe,CAC3C,SAAQ,IAAI,CACZ,SAAS,CAAC,eAAe,CAAC,EAC1B,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,UAAU,CACvE;IACC,qDAAqD;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,mEAAmE;IACnE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACxE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,YAAY;IAC3B,4DAA4D;IAC5D,KAAK,EAAE,iBAAiB,CAAC;IACzB,4CAA4C;IAC5C,KAAK,EAAE,iBAAiB,CAAC;IACzB,kEAAkE;IAClE,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,YAAY,GAAG,MAAM,CAAC;AAExD,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,eAAe,IAAI;KAC5D,CAAC,IAAI,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK;CAC5D,CAAC,aAAa,CAAC,CAAC;AAEjB;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG;KAC7B,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3D,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Indicator/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAE,GAAG,EAAC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IACzC,0EAA0E;IAC1E,cAAc,EAAE,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;CAC3D;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAEhE,kEAAkE;AAClE,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACpE,kBAAkB,CAAC,CAAC,CAAC,CAAC;AAExB,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,cAAc,CAC7B,CAAC,SAAS,eAAe,GAAG,eAAe,CAC3C,SAAQ,IAAI,CACZ,SAAS,CAAC,eAAe,CAAC,EAC1B,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,UAAU,CACvE;IACC,qDAAqD;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,mEAAmE;IACnE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACxE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,YAAY;IAC3B,4DAA4D;IAC5D,KAAK,EAAE,iBAAiB,CAAC;IACzB,4CAA4C;IAC5C,KAAK,EAAE,iBAAiB,CAAC;IACzB,kEAAkE;IAClE,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,YAAY,GAAG,MAAM,CAAC;AAExD,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,eAAe,IAAI;KAC5D,CAAC,IAAI,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK;CAC5D,CAAC,aAAa,CAAC,CAAC;AAEjB;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG;KAC7B,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3D,CAAC"}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
import React, { type ReactNode } from 'react';
|
|
15
15
|
import { type IconType } from '../Icon';
|
|
16
16
|
import { type FieldStatusVariant } from '../Field';
|
|
17
|
+
import type { IndicatorPosition } from '../Indicator';
|
|
17
18
|
import type { MultiSelectorOptionType, MultiSelectorOptionData, MultiSelectorStatus } from './types';
|
|
18
19
|
import type { BaseProps } from '../BaseProps';
|
|
19
20
|
import type { SizeValue } from '../utils/types';
|
|
@@ -189,6 +190,12 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
189
190
|
* Only called for selectable options (not dividers/sections or the select-all row).
|
|
190
191
|
*/
|
|
191
192
|
renderOption?: (option: MultiSelectorOptionData) => ReactNode;
|
|
193
|
+
/**
|
|
194
|
+
* Which edge of the option row carries the checkbox.
|
|
195
|
+
*
|
|
196
|
+
* @default 'start'
|
|
197
|
+
*/
|
|
198
|
+
indicatorPosition?: IndicatorPosition;
|
|
192
199
|
/**
|
|
193
200
|
* Whether the dropdown starts open on mount.
|
|
194
201
|
* Useful for showcases and previews.
|
|
@@ -215,7 +222,7 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
215
222
|
* />
|
|
216
223
|
* ```
|
|
217
224
|
*/
|
|
218
|
-
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, triggerDisplay, maxBadges, renderOption, isDefaultOpen, 'data-testid': testId, htmlName, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
|
|
225
|
+
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, triggerDisplay, maxBadges, renderOption, indicatorPosition, isDefaultOpen, 'data-testid': testId, htmlName, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
|
|
219
226
|
export declare namespace MultiSelector {
|
|
220
227
|
var displayName: string;
|
|
221
228
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -281,6 +281,7 @@ export function MultiSelector({
|
|
|
281
281
|
triggerDisplay = 'count',
|
|
282
282
|
maxBadges = 3,
|
|
283
283
|
renderOption,
|
|
284
|
+
indicatorPosition = 'start',
|
|
284
285
|
isDefaultOpen = false,
|
|
285
286
|
'data-testid': testId,
|
|
286
287
|
htmlName,
|
|
@@ -706,6 +707,25 @@ export function MultiSelector({
|
|
|
706
707
|
// checkbox is inert/decorative, so the indeterminate state must be
|
|
707
708
|
// conveyed through the option's accessible name (WCAG 4.1.2).
|
|
708
709
|
const isPartiallySelected = isSelectAll && selectAllState === 'indeterminate';
|
|
710
|
+
const checkbox = /*#__PURE__*/_jsx("div", {
|
|
711
|
+
inert: true,
|
|
712
|
+
...{
|
|
713
|
+
0: {
|
|
714
|
+
className: "x47corl x78zum5 x2lah0s"
|
|
715
|
+
},
|
|
716
|
+
1: {
|
|
717
|
+
className: "x47corl x78zum5 x2lah0s xvc5jky"
|
|
718
|
+
}
|
|
719
|
+
}[!!(indicatorPosition === 'end') << 0],
|
|
720
|
+
children: /*#__PURE__*/_jsx(CheckboxInput, {
|
|
721
|
+
label: "",
|
|
722
|
+
isLabelHidden: true,
|
|
723
|
+
value: checkboxValue,
|
|
724
|
+
onChange: () => {},
|
|
725
|
+
isDisabled: item.disabled,
|
|
726
|
+
size: size === 'lg' ? 'md' : size
|
|
727
|
+
})
|
|
728
|
+
});
|
|
709
729
|
return /*#__PURE__*/_jsxs("div", {
|
|
710
730
|
id: getItemId(flatIndex),
|
|
711
731
|
role: "option",
|
|
@@ -731,27 +751,14 @@ export function MultiSelector({
|
|
|
731
751
|
selected: isSelected ? 'selected' : null,
|
|
732
752
|
disabled: item.disabled ? 'disabled' : null
|
|
733
753
|
}), stylex.props(styles.item, isSelectAll ? selectAllSizeStyles[size] : itemSizeStyles[size], isSelectAll && styles.selectAllWrapper, isHighlighted && styles.itemHighlighted, item.disabled && styles.itemDisabled)),
|
|
734
|
-
children: [/*#__PURE__*/_jsx("
|
|
735
|
-
inert: true,
|
|
736
|
-
...{
|
|
737
|
-
className: "x47corl x78zum5 x2lah0s"
|
|
738
|
-
},
|
|
739
|
-
children: /*#__PURE__*/_jsx(CheckboxInput, {
|
|
740
|
-
label: "",
|
|
741
|
-
isLabelHidden: true,
|
|
742
|
-
value: checkboxValue,
|
|
743
|
-
onChange: () => {},
|
|
744
|
-
isDisabled: item.disabled,
|
|
745
|
-
size: size === 'lg' ? 'md' : size
|
|
746
|
-
})
|
|
747
|
-
}), renderOption && !isSelectAll ? renderOption(item) : /*#__PURE__*/_jsx("span", {
|
|
754
|
+
children: [indicatorPosition === 'start' && checkbox, renderOption && !isSelectAll ? renderOption(item) : /*#__PURE__*/_jsx("span", {
|
|
748
755
|
...{
|
|
749
756
|
className: "xeuugli xb3r6kr xlyipyv xuxw1ft"
|
|
750
757
|
},
|
|
751
758
|
children: item.label ?? item.value
|
|
752
|
-
})]
|
|
759
|
+
}), indicatorPosition === 'end' && checkbox]
|
|
753
760
|
}, item.value);
|
|
754
|
-
}, [renderOption, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
|
|
761
|
+
}, [renderOption, indicatorPosition, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
|
|
755
762
|
|
|
756
763
|
// Render all options. Uses sortedItems as the single source of truth for
|
|
757
764
|
// item order — no independent sorting here. Structural elements (dividers,
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
*/
|
|
15
15
|
import React, { type ReactNode } from 'react';
|
|
16
16
|
import { type IconType } from '../Icon';
|
|
17
|
+
import type { IndicatorPosition } from '../Indicator';
|
|
17
18
|
import { type FieldStatusVariant } from '../Field';
|
|
18
19
|
import type { LayerPlacement } from '../Layer/useLayer';
|
|
19
20
|
import type { SelectorOptionType, SelectorOptionData } from './types';
|
|
@@ -144,6 +145,15 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
|
|
|
144
145
|
* Only called for selectable options (not dividers/sections).
|
|
145
146
|
*/
|
|
146
147
|
renderOption?: (option: SelectorOptionData) => ReactNode;
|
|
148
|
+
/**
|
|
149
|
+
* Which edge of the option row carries the selected mark. `start` reserves a
|
|
150
|
+
* mark column ahead of every label so they stay aligned, the way a native
|
|
151
|
+
* menu does; `end` is the house convention shared with Typeahead and
|
|
152
|
+
* CommandPalette.
|
|
153
|
+
*
|
|
154
|
+
* @default 'end'
|
|
155
|
+
*/
|
|
156
|
+
indicatorPosition?: IndicatorPosition;
|
|
147
157
|
/**
|
|
148
158
|
* Whether to show a search input for filtering options.
|
|
149
159
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -43,7 +43,7 @@ import { groupStyles } from "../InputGroup/groupStyles.js";
|
|
|
43
43
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
44
44
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
45
45
|
import { useTranslator } from "../i18n/index.js";
|
|
46
|
-
import { jsx as _jsx,
|
|
46
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
47
47
|
const styles = {
|
|
48
48
|
triggerContainer: {
|
|
49
49
|
kVAEAm: "x1n2onr6",
|
|
@@ -281,6 +281,7 @@ export function Selector(props) {
|
|
|
281
281
|
startIcon,
|
|
282
282
|
htmlName,
|
|
283
283
|
renderOption,
|
|
284
|
+
indicatorPosition = 'end',
|
|
284
285
|
hasSearch = false,
|
|
285
286
|
searchPlaceholder: searchPlaceholderFromProps,
|
|
286
287
|
placement,
|
|
@@ -632,7 +633,41 @@ export function Selector(props) {
|
|
|
632
633
|
const renderItem = useCallback((item, flatIndex) => {
|
|
633
634
|
const isHighlighted = flatIndex === highlightedIndex;
|
|
634
635
|
const isSelected = item.value === normalizedValue;
|
|
635
|
-
|
|
636
|
+
|
|
637
|
+
/*
|
|
638
|
+
* Rendered UNCONDITIONALLY, with the state passed down: the default
|
|
639
|
+
* check draws nothing when unchecked, but a theme that replaces the
|
|
640
|
+
* `check` indicator with a radio needs the unselected state to draw
|
|
641
|
+
* its empty circle. `{isSelected && …}` would make that impossible.
|
|
642
|
+
*
|
|
643
|
+
* `selector-check` stays the stable target for the mark's position
|
|
644
|
+
* in the row; the indicator owns what the mark looks like.
|
|
645
|
+
*/
|
|
646
|
+
const mark = /*#__PURE__*/_jsx("span", {
|
|
647
|
+
...{
|
|
648
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s xgomdpo"
|
|
649
|
+
},
|
|
650
|
+
children: /*#__PURE__*/_jsx(SelectionMark, {
|
|
651
|
+
state: isSelected ? 'checked' : 'unchecked',
|
|
652
|
+
size: "sm",
|
|
653
|
+
isDisabled: item.disabled ?? false,
|
|
654
|
+
...themeProps('selector-check')
|
|
655
|
+
})
|
|
656
|
+
});
|
|
657
|
+
const optionContent = /*#__PURE__*/_jsx("span", {
|
|
658
|
+
...{
|
|
659
|
+
className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
|
|
660
|
+
},
|
|
661
|
+
children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
|
|
662
|
+
option: item
|
|
663
|
+
})
|
|
664
|
+
});
|
|
665
|
+
const content = indicatorPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
666
|
+
children: [mark, optionContent]
|
|
667
|
+
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
668
|
+
children: [optionContent, mark]
|
|
669
|
+
});
|
|
670
|
+
return /*#__PURE__*/_jsx("div", {
|
|
636
671
|
id: getItemId(flatIndex),
|
|
637
672
|
role: "option",
|
|
638
673
|
"aria-selected": isSelected,
|
|
@@ -640,21 +675,9 @@ export function Selector(props) {
|
|
|
640
675
|
onClick: () => onItemSelect(item),
|
|
641
676
|
onMouseEnter: () => onItemMouseEnter(item, flatIndex),
|
|
642
677
|
...stylex.props(styles.item, itemSizeStyles[size], isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled),
|
|
643
|
-
children:
|
|
644
|
-
...{
|
|
645
|
-
className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
|
|
646
|
-
},
|
|
647
|
-
children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
|
|
648
|
-
option: item
|
|
649
|
-
})
|
|
650
|
-
}), /*#__PURE__*/_jsx(SelectionMark, {
|
|
651
|
-
state: isSelected ? 'checked' : 'unchecked',
|
|
652
|
-
size: "sm",
|
|
653
|
-
isDisabled: item.disabled ?? false,
|
|
654
|
-
...themeProps('selector-check')
|
|
655
|
-
})]
|
|
678
|
+
children: content
|
|
656
679
|
}, item.value);
|
|
657
|
-
}, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
|
|
680
|
+
}, [renderOption, indicatorPosition, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
|
|
658
681
|
|
|
659
682
|
// Render all options (handling sections/dividers)
|
|
660
683
|
const renderOptions = useCallback(() => {
|
package/dist/astryx.css
CHANGED
|
@@ -1440,6 +1440,7 @@
|
|
|
1440
1440
|
.x1d77m7x:not(#\#):not(#\#):not(#\#):not(#\#){min-width:140px}
|
|
1441
1441
|
.x5w4yej:not(#\#):not(#\#):not(#\#):not(#\#){min-width:160px}
|
|
1442
1442
|
.xfb3i0g:not(#\#):not(#\#):not(#\#):not(#\#){min-width:180px}
|
|
1443
|
+
.xgomdpo:not(#\#):not(#\#):not(#\#):not(#\#){min-width:1rem}
|
|
1443
1444
|
.x1jzhcrs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:200px}
|
|
1444
1445
|
.xt4ypqs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:20px}
|
|
1445
1446
|
.x12rczxh:not(#\#):not(#\#):not(#\#):not(#\#){min-width:220px}
|