@astryxdesign/core 0.7.2-canary.c68f5e8 → 0.7.2-canary.f16dc9f
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/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +3 -1
- package/dist/PowerSearch/PowerSearch.js +1 -1
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +6 -2
- package/dist/Switch/Switch.d.ts +1 -1
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +7 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +11 -0
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +26 -0
- package/package.json +3 -3
- package/src/List/ListItem.doc.mjs +8 -5
- package/src/MultiSelector/hooks.ts +3 -1
- package/src/MultiSelector/useMultiCombobox.doc.mjs +267 -0
- package/src/PowerSearch/PowerSearch.test.tsx +85 -0
- package/src/PowerSearch/PowerSearch.tsx +2 -2
- package/src/Selector/hooks.ts +6 -2
- package/src/Selector/useCombobox.doc.mjs +237 -0
- package/src/Switch/Switch.test.tsx +21 -0
- package/src/Switch/Switch.tsx +5 -0
- package/src/Tokenizer/Tokenizer.test.tsx +54 -1
- package/src/Tooltip/useTooltip.test.tsx +13 -0
- package/src/Tooltip/useTooltip.tsx +11 -0
- package/src/Typeahead/BaseTypeahead.tsx +26 -0
- package/src/Typeahead/Typeahead.test.tsx +260 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/hooks.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/hooks.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAC;AAErD,UAAU,uBAAuB;IAC/B,eAAe,EAAE,uBAAuB,EAAE,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,6DAA6D;AAC7D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,UAAU,sBAAsB;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,4EAA4E;IAC5E,eAAe,EAAE,iBAAiB,CAAC;IACnC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,iFAAiF;IACjF,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,+DAA+D;IAC/D,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,gBAAgB,EAAE,CAChB,IAAI,EAAE,uBAAuB,EAC7B,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,iBAAiB,KACrB,IAAI,CAAC;CACX;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAS,EACT,MAAc,EACd,YAAY,EACZ,gBAAgB,GACjB,EAAE,uBAAuB,GAAG,sBAAsB,CAwSlD"}
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
* @file hooks.ts
|
|
7
7
|
* @input Uses React hooks, MultiSelectorOptionData type
|
|
8
8
|
* @output Exports useMultiCombobox hook
|
|
9
|
-
* @position
|
|
9
|
+
* @position Public hook, exported from the MultiSelector entry point; used by
|
|
10
|
+
* MultiSelector.tsx
|
|
10
11
|
*
|
|
11
12
|
* SYNC: When modified, update:
|
|
12
13
|
* - /packages/core/src/MultiSelector/index.ts
|
|
14
|
+
* - /packages/core/src/MultiSelector/useMultiCombobox.doc.mjs
|
|
13
15
|
*/
|
|
14
16
|
import { useCallback, useRef, useState } from 'react';
|
|
15
17
|
import { isRtlElement } from "../hooks/isRtlElement.js";
|
|
@@ -532,7 +532,7 @@ export function PowerSearch({
|
|
|
532
532
|
} else if (change.type === 'remove' && change.item) {
|
|
533
533
|
const auxData = change.item.auxiliaryData;
|
|
534
534
|
if (auxData?.filterIndex != null) {
|
|
535
|
-
const newFilters = filters.filter((_, i) =>
|
|
535
|
+
const newFilters = filters.filter((_, i) => _items.some(item => item.auxiliaryData?.filterIndex === i));
|
|
536
536
|
onChange(newFilters, 'remove', auxData.filterIndex);
|
|
537
537
|
}
|
|
538
538
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyBhD,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1C;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,4BAA4B,GAAG,2BAA2B,CAgF5D;AAMD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,KAAK,EACL,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,GAAG,iBAAiB,CAqOxC"}
|
package/dist/Selector/hooks.js
CHANGED
|
@@ -6,8 +6,12 @@
|
|
|
6
6
|
* @file hooks.ts
|
|
7
7
|
* @input Uses untransformed DOM layout geometry from the Selector's outer
|
|
8
8
|
* anchor, listbox, and selected option
|
|
9
|
-
* @output Hooks for Selector
|
|
10
|
-
*
|
|
9
|
+
* @output Hooks for Selector: useSelectedItemOffset, and useCombobox (public,
|
|
10
|
+
* exported from the Selector entry point; also used by CommandPalette)
|
|
11
|
+
* @position Selector hooks; used by Selector.tsx and CommandPalette
|
|
12
|
+
*
|
|
13
|
+
* SYNC: When useCombobox's options or return change, update:
|
|
14
|
+
* - /packages/core/src/Selector/useCombobox.doc.mjs
|
|
11
15
|
*/
|
|
12
16
|
import { useCallback, useState } from 'react';
|
|
13
17
|
import { useHighlightedOptionScroll } from "../hooks/useHighlightedOptionScroll.js";
|
package/dist/Switch/Switch.d.ts
CHANGED
|
@@ -159,7 +159,7 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
|
|
|
159
159
|
* />
|
|
160
160
|
* ```
|
|
161
161
|
*/
|
|
162
|
-
export declare function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, size, width, xstyle, className, style, ref, 'aria-describedby': ariaDescribedByProp, ...rest }: SwitchProps): import("react").JSX.Element;
|
|
162
|
+
export declare function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, size, width, xstyle, className, style, ref, 'aria-describedby': ariaDescribedByProp, 'aria-labelledby': ariaLabelledByProp, ...rest }: SwitchProps): import("react").JSX.Element;
|
|
163
163
|
export declare namespace Switch {
|
|
164
164
|
var displayName: string;
|
|
165
165
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
package/dist/Switch/Switch.js
CHANGED
|
@@ -292,6 +292,7 @@ export function Switch({
|
|
|
292
292
|
style,
|
|
293
293
|
ref,
|
|
294
294
|
'aria-describedby': ariaDescribedByProp,
|
|
295
|
+
'aria-labelledby': ariaLabelledByProp,
|
|
295
296
|
...rest
|
|
296
297
|
}) {
|
|
297
298
|
const t = useTranslator();
|
|
@@ -388,7 +389,12 @@ export function Switch({
|
|
|
388
389
|
}
|
|
389
390
|
},
|
|
390
391
|
onFocus: onFocus,
|
|
391
|
-
onBlur: onBlur
|
|
392
|
+
onBlur: onBlur
|
|
393
|
+
// A caller's `aria-labelledby` names the control (a visible title
|
|
394
|
+
// elsewhere in the row, for example), so it reaches the input rather
|
|
395
|
+
// than the field wrapper via `...rest`.
|
|
396
|
+
,
|
|
397
|
+
"aria-labelledby": ariaLabelledByProp,
|
|
392
398
|
"aria-describedby": ariaDescribedBy,
|
|
393
399
|
"aria-invalid": status?.type === 'error' ? true : undefined,
|
|
394
400
|
"aria-busy": isBusy || undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA2ClC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,
|
|
1
|
+
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA2ClC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAwXtE"}
|
|
@@ -177,6 +177,17 @@ export function useTooltip(options = {}) {
|
|
|
177
177
|
}, delay);
|
|
178
178
|
}, [isEnabled, isOpen, clearTimeouts, showLayer, delay]);
|
|
179
179
|
|
|
180
|
+
// A show scheduled while the triggers were enabled must not outlive them:
|
|
181
|
+
// disabling also detaches the leave listener that would have cancelled it,
|
|
182
|
+
// so the timer would open a tooltip that nothing ever closes. Only the
|
|
183
|
+
// pending show is dropped; a pending hide still runs.
|
|
184
|
+
useEffect(() => {
|
|
185
|
+
if (!isEnabled && showTimeoutRef.current) {
|
|
186
|
+
clearTimeout(showTimeoutRef.current);
|
|
187
|
+
showTimeoutRef.current = null;
|
|
188
|
+
}
|
|
189
|
+
}, [isEnabled]);
|
|
190
|
+
|
|
180
191
|
// Schedule hide with delay (suppressed when isOpen is true).
|
|
181
192
|
// A small hover bridge (when hideDelay is 0) lets the pointer travel from the
|
|
182
193
|
// trigger onto the tooltip surface without the tooltip vanishing — required
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2BnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAW1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAEtD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAoKD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2BnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAW1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAEtD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAoKD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EA82BrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
|
|
@@ -340,6 +340,32 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
340
340
|
sourceGenRef.current = ++searchGenRef.current;
|
|
341
341
|
}
|
|
342
342
|
|
|
343
|
+
// The previous source is remembered in state, not a ref, so a render React
|
|
344
|
+
// discards cannot consume the comparison without its state updates.
|
|
345
|
+
const [sourceOfState, setSourceOfState] = useState(searchSource);
|
|
346
|
+
if (sourceOfState !== searchSource) {
|
|
347
|
+
setSourceOfState(searchSource);
|
|
348
|
+
if (isLoading) {
|
|
349
|
+
setIsLoading(false);
|
|
350
|
+
setHasSearched(false);
|
|
351
|
+
}
|
|
352
|
+
loadingRef.current = false;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
// When the search source is replaced, any in-flight load from the previous
|
|
356
|
+
// source is abandoned (generation bumped above). Notify the wrapper's busy lane
|
|
357
|
+
// in an effect so external store listeners run safely after commit.
|
|
358
|
+
const isInitialMountRef = useRef(true);
|
|
359
|
+
useEffect(() => {
|
|
360
|
+
if (isInitialMountRef.current) {
|
|
361
|
+
isInitialMountRef.current = false;
|
|
362
|
+
return;
|
|
363
|
+
}
|
|
364
|
+
if (!loadingRef.current) {
|
|
365
|
+
onLoadingChangeRef.current?.(false);
|
|
366
|
+
}
|
|
367
|
+
}, [searchSource]);
|
|
368
|
+
|
|
343
369
|
// Layer for dropdown
|
|
344
370
|
const handleLayerShow = useCallback(() => {
|
|
345
371
|
onOpenChange?.(true);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.7.2-canary.
|
|
3
|
+
"version": "0.7.2-canary.f16dc9f",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -787,8 +787,8 @@
|
|
|
787
787
|
"react-dom": ">=19.0.0"
|
|
788
788
|
},
|
|
789
789
|
"devDependencies": {
|
|
790
|
-
"@astryxdesign/a11y-spec": "0.7.2-canary.
|
|
791
|
-
"@astryxdesign/cli": "0.7.2-canary.
|
|
790
|
+
"@astryxdesign/a11y-spec": "0.7.2-canary.f16dc9f",
|
|
791
|
+
"@astryxdesign/cli": "0.7.2-canary.f16dc9f",
|
|
792
792
|
"@babel/cli": "^7.29.7",
|
|
793
793
|
"@babel/core": "^7.29.7",
|
|
794
794
|
"@babel/preset-react": "^7.29.7",
|
|
@@ -12,8 +12,9 @@ export const docs = {
|
|
|
12
12
|
props: [
|
|
13
13
|
{
|
|
14
14
|
name: 'label',
|
|
15
|
-
type: '
|
|
16
|
-
description:
|
|
15
|
+
type: 'ReactNode',
|
|
16
|
+
description:
|
|
17
|
+
'Primary content. A plain string gets single-line truncation automatically; a ReactNode renders as given, so child components control their own text behavior.',
|
|
17
18
|
required: true,
|
|
18
19
|
},
|
|
19
20
|
{
|
|
@@ -123,8 +124,9 @@ export const docsZh = {
|
|
|
123
124
|
props: [
|
|
124
125
|
{
|
|
125
126
|
name: 'label',
|
|
126
|
-
type: '
|
|
127
|
-
description:
|
|
127
|
+
type: 'ReactNode',
|
|
128
|
+
description:
|
|
129
|
+
'主要内容。纯字符串会自动应用单行截断;ReactNode 按原样渲染,由子组件自行控制文本行为。',
|
|
128
130
|
required: true,
|
|
129
131
|
},
|
|
130
132
|
{
|
|
@@ -205,7 +207,8 @@ export const docsDense = {
|
|
|
205
207
|
description:
|
|
206
208
|
'List item w/ label, description, start/end content slots, interactive patterns.',
|
|
207
209
|
propDescriptions: {
|
|
208
|
-
label:
|
|
210
|
+
label:
|
|
211
|
+
'Primary content. String auto-truncates; ReactNode renders as given.',
|
|
209
212
|
description: 'Secondary text below label.',
|
|
210
213
|
startContent: 'Content before label area (e.g. icon, avatar).',
|
|
211
214
|
endContent: 'Content after label area (e.g. badge, chevron).',
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
* @file hooks.ts
|
|
7
7
|
* @input Uses React hooks, MultiSelectorOptionData type
|
|
8
8
|
* @output Exports useMultiCombobox hook
|
|
9
|
-
* @position
|
|
9
|
+
* @position Public hook, exported from the MultiSelector entry point; used by
|
|
10
|
+
* MultiSelector.tsx
|
|
10
11
|
*
|
|
11
12
|
* SYNC: When modified, update:
|
|
12
13
|
* - /packages/core/src/MultiSelector/index.ts
|
|
14
|
+
* - /packages/core/src/MultiSelector/useMultiCombobox.doc.mjs
|
|
13
15
|
*/
|
|
14
16
|
|
|
15
17
|
import {useCallback, useRef, useState} from 'react';
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
|
|
4
|
+
export const docs = {
|
|
5
|
+
name: 'useMultiCombobox',
|
|
6
|
+
displayName: 'useMultiCombobox',
|
|
7
|
+
group: 'MultiSelector',
|
|
8
|
+
keywords: [
|
|
9
|
+
'combobox',
|
|
10
|
+
'multi-select',
|
|
11
|
+
'multiselect',
|
|
12
|
+
'listbox',
|
|
13
|
+
'grid',
|
|
14
|
+
'toggle',
|
|
15
|
+
'highlight',
|
|
16
|
+
'active option',
|
|
17
|
+
'aria-activedescendant',
|
|
18
|
+
'keyboard',
|
|
19
|
+
'headless',
|
|
20
|
+
'apg',
|
|
21
|
+
'accessibility',
|
|
22
|
+
'a11y',
|
|
23
|
+
],
|
|
24
|
+
params: [
|
|
25
|
+
{
|
|
26
|
+
name: 'options',
|
|
27
|
+
type: 'UseMultiComboboxOptions',
|
|
28
|
+
description: 'Configuration object.',
|
|
29
|
+
required: true,
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: 'options.selectableItems',
|
|
33
|
+
type: 'MultiSelectorOptionData[]',
|
|
34
|
+
description:
|
|
35
|
+
'The options in the same order as they render. Options with `disabled` cannot be toggled and are skipped while moving through the open list; ArrowDown or ArrowUp that opens the list still lands on the first or last option.',
|
|
36
|
+
required: true,
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: 'options.isOpen',
|
|
40
|
+
type: 'boolean',
|
|
41
|
+
description: 'Whether the list is shown. The caller owns this state.',
|
|
42
|
+
required: true,
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: 'options.onOpen',
|
|
46
|
+
type: '() => unknown',
|
|
47
|
+
description:
|
|
48
|
+
'Called to show the list. Return `false` to refuse; the hook then leaves the highlight alone.',
|
|
49
|
+
required: true,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
name: 'options.onClose',
|
|
53
|
+
type: '() => void',
|
|
54
|
+
description: 'Called to hide the list. The highlight resets first.',
|
|
55
|
+
required: true,
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
name: 'options.onToggle',
|
|
59
|
+
type: '(itemValue: string) => void',
|
|
60
|
+
description:
|
|
61
|
+
'Called with the value of the option to add or remove. Toggling keeps the list open.',
|
|
62
|
+
required: true,
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
name: 'options.listboxId',
|
|
66
|
+
type: 'string',
|
|
67
|
+
description:
|
|
68
|
+
"The listbox (or grid) element's id. Option and action-cell ids are derived from it.",
|
|
69
|
+
required: true,
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
name: 'options.hasSearch',
|
|
73
|
+
type: 'boolean',
|
|
74
|
+
description:
|
|
75
|
+
'Whether the list has its own search field. Space then types instead of toggling, opening by a press or Enter does not pre-highlight (ArrowDown and ArrowUp still open on the first and last option), Delete and Backspace edit the query, and type-to-select is off. Home and End still jump to the first and last option, so a search input that keeps them for the caret should stop them before this handler and rely on PageUp and PageDown.',
|
|
76
|
+
default: 'false',
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
name: 'options.onClear',
|
|
80
|
+
type: '() => void',
|
|
81
|
+
description:
|
|
82
|
+
'Clears every selected value. When provided, Delete or Backspace on the closed control clears them, so clearing is not pointer-only. Ignored while the list is open or with `hasSearch`.',
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
name: 'options.hasValue',
|
|
86
|
+
type: 'boolean',
|
|
87
|
+
description:
|
|
88
|
+
'Whether anything is selected. The Delete and Backspace clear is skipped when false.',
|
|
89
|
+
default: 'false',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
name: 'options.isGrid',
|
|
93
|
+
type: 'boolean',
|
|
94
|
+
description:
|
|
95
|
+
"Whether each row pairs an option cell with an action cell. The inline-end arrow then moves the highlight to the row's action and the inline-start arrow back, following visual direction in right-to-left layouts, and Enter on the action runs `onActivateAction` instead of toggling.",
|
|
96
|
+
default: 'false',
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
name: 'options.rowHasAction',
|
|
100
|
+
type: '(index: number) => boolean',
|
|
101
|
+
description:
|
|
102
|
+
'In a grid, whether the row at `index` has an action cell to move to.',
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
name: 'options.onActivateAction',
|
|
106
|
+
type: '(index: number) => void',
|
|
107
|
+
description:
|
|
108
|
+
"In a grid, runs the control in the highlighted row's action cell. The selection does not change.",
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
name: 'options.isDisabled',
|
|
112
|
+
type: 'boolean',
|
|
113
|
+
description: 'Whether the control ignores clicks and keys.',
|
|
114
|
+
default: 'false',
|
|
115
|
+
},
|
|
116
|
+
],
|
|
117
|
+
returns: [
|
|
118
|
+
{
|
|
119
|
+
name: 'highlightedIndex',
|
|
120
|
+
type: 'number',
|
|
121
|
+
description: 'Index of the active row, or -1 when none is active.',
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
name: 'setHighlightedIndex',
|
|
125
|
+
type: '(index: number) => void',
|
|
126
|
+
description:
|
|
127
|
+
"Sets the active row, for example after filtering. The highlight lands on the row's option cell.",
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
name: 'highlightedCell',
|
|
131
|
+
type: "'option' | 'action'",
|
|
132
|
+
description:
|
|
133
|
+
"Which cell of the active row is highlighted; `'action'` only in a grid.",
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
name: 'activeDescendantId',
|
|
137
|
+
type: 'string | undefined',
|
|
138
|
+
description:
|
|
139
|
+
"The id to pass as the control's `aria-activedescendant`: the active option, or its action cell in a grid. Undefined while the list is closed or nothing is active.",
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
name: 'getItemId',
|
|
143
|
+
type: '(index: number) => string',
|
|
144
|
+
description: 'The id to render on the option at `index`.',
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
name: 'getActionCellId',
|
|
148
|
+
type: '(index: number) => string',
|
|
149
|
+
description:
|
|
150
|
+
'In a grid, the id to render on the action cell of row `index`.',
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
name: 'onTriggerClick',
|
|
154
|
+
type: '() => void',
|
|
155
|
+
description: 'Toggles the list from a press on the control.',
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
name: 'onKeyDown',
|
|
159
|
+
type: '(e: React.KeyboardEvent) => void',
|
|
160
|
+
description:
|
|
161
|
+
'Key handler for the control that keeps focus. ArrowDown and ArrowUp open the list or move the active row; Enter (and Space without search) toggles the active option and keeps the list open; Escape and Tab close it; Home, End, PageUp and PageDown jump to the first or last option; without search, typed characters move to the first option whose label starts with them.',
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
name: 'onItemMouseEnter',
|
|
165
|
+
type: "(item: MultiSelectorOptionData, index: number, cell?: 'option' | 'action') => void",
|
|
166
|
+
description:
|
|
167
|
+
'Makes the hovered option, or its action cell, active without scrolling the list or moving focus.',
|
|
168
|
+
},
|
|
169
|
+
],
|
|
170
|
+
usage: {
|
|
171
|
+
description:
|
|
172
|
+
'Tracks the active option of a multi-select combobox and handles its keys, while DOM focus stays on the control. It powers MultiSelector; unlike useCombobox, toggling an option keeps the list open, and rows can carry an action cell. It renders nothing and sets no attributes: the caller renders the control and the list, and wires the ARIA attributes from what it returns.',
|
|
173
|
+
bestPractices: [
|
|
174
|
+
{
|
|
175
|
+
guidance: true,
|
|
176
|
+
description:
|
|
177
|
+
"Render each option with `id={getItemId(index)}` and pass `activeDescendantId` as the control's `aria-activedescendant`.",
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
guidance: true,
|
|
181
|
+
description:
|
|
182
|
+
'Use `isGrid` only when rows carry a control next to the option; give each action cell `id={getActionCellId(index)}`.',
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
guidance: true,
|
|
186
|
+
description:
|
|
187
|
+
'Announce the number of results through useAnnounce when the options change for a new query.',
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
guidance: false,
|
|
191
|
+
description:
|
|
192
|
+
'Close the list after each toggle; a multi-select stays open so several options can be picked in a row.',
|
|
193
|
+
},
|
|
194
|
+
],
|
|
195
|
+
},
|
|
196
|
+
relatedComponents: ['MultiSelector'],
|
|
197
|
+
relatedHooks: ['useCombobox', 'useAnnounce'],
|
|
198
|
+
importPath: '@astryxdesign/core/MultiSelector',
|
|
199
|
+
category: 'focus',
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
|
|
203
|
+
export const docsDense = {
|
|
204
|
+
description:
|
|
205
|
+
'Multi-select combobox state + keys; focus stays on control. Powers MultiSelector. Toggle keeps list open; rows may carry an action cell (grid). Renders nothing, sets no attrs: caller renders + wires ARIA.',
|
|
206
|
+
paramDescriptions: {
|
|
207
|
+
options: 'config.',
|
|
208
|
+
'options.selectableItems':
|
|
209
|
+
'options in render order; disabled ones not toggleable, skipped while moving in open list (ArrowDown/Up opening still lands first / last).',
|
|
210
|
+
'options.isOpen': 'list shown; caller owns state.',
|
|
211
|
+
'options.onOpen':
|
|
212
|
+
'show list; return false to refuse (highlight untouched).',
|
|
213
|
+
'options.onClose': 'hide list; highlight resets first.',
|
|
214
|
+
'options.onToggle': 'add / remove value; list stays open.',
|
|
215
|
+
'options.listboxId':
|
|
216
|
+
'listbox / grid id; option + action-cell ids derive from it.',
|
|
217
|
+
'options.hasSearch':
|
|
218
|
+
'own search field: Space types, press / Enter opening does not pre-highlight (ArrowDown/Up still first / last), Delete / Backspace edit query, no type-to-select. Home / End still jump; stop them first to keep them for the caret, use PageUp / PageDown.',
|
|
219
|
+
'options.onClear':
|
|
220
|
+
'clear all; Delete / Backspace on closed control. ignored when open or hasSearch.',
|
|
221
|
+
'options.hasValue': 'anything selected; clear skipped when false.',
|
|
222
|
+
'options.isGrid':
|
|
223
|
+
'rows = option + action cell; inline-end / inline-start arrows move between them (RTL-aware); Enter on action -> onActivateAction.',
|
|
224
|
+
'options.rowHasAction': 'grid: row at index has an action cell.',
|
|
225
|
+
'options.onActivateAction':
|
|
226
|
+
"grid: run highlighted row's action; selection unchanged.",
|
|
227
|
+
'options.isDisabled': 'ignore clicks + keys.',
|
|
228
|
+
},
|
|
229
|
+
returnDescriptions: {
|
|
230
|
+
highlightedIndex: 'active row index, -1 = none.',
|
|
231
|
+
setHighlightedIndex: 'set active row (lands on option cell).',
|
|
232
|
+
highlightedCell: "'option' | 'action' (action only in grid).",
|
|
233
|
+
activeDescendantId:
|
|
234
|
+
'control aria-activedescendant: active option or its action cell; undefined when closed / none.',
|
|
235
|
+
getItemId: 'id for option at index.',
|
|
236
|
+
getActionCellId: 'grid: id for action cell of row index.',
|
|
237
|
+
onTriggerClick: 'toggle list from a press on control.',
|
|
238
|
+
onKeyDown:
|
|
239
|
+
'control keydown: ArrowDown/Up open or move; Enter (Space w/o search) toggles, stays open; Escape / Tab close; Home / End / PageUp / PageDown jump; typed chars jump by label prefix (w/o search).',
|
|
240
|
+
onItemMouseEnter:
|
|
241
|
+
'hover makes option / action cell active; no scroll, no focus move.',
|
|
242
|
+
},
|
|
243
|
+
usage: {
|
|
244
|
+
description:
|
|
245
|
+
'Headless multi-select combobox: active option + keys, focus stays on control; toggle keeps list open. Caller renders + wires ARIA.',
|
|
246
|
+
bestPractices: [
|
|
247
|
+
{
|
|
248
|
+
guidance: true,
|
|
249
|
+
description:
|
|
250
|
+
'Option id = getItemId(index); control aria-activedescendant = activeDescendantId.',
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
guidance: true,
|
|
254
|
+
description:
|
|
255
|
+
'isGrid only when rows carry a control; action cell id = getActionCellId(index).',
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
guidance: true,
|
|
259
|
+
description: 'Announce result count via useAnnounce on new query.',
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
guidance: false,
|
|
263
|
+
description: 'Close after each toggle; multi-select stays open.',
|
|
264
|
+
},
|
|
265
|
+
],
|
|
266
|
+
},
|
|
267
|
+
};
|
|
@@ -165,6 +165,91 @@ describe('PowerSearch', () => {
|
|
|
165
165
|
expect(screen.getByRole('combobox')).toHaveFocus();
|
|
166
166
|
});
|
|
167
167
|
|
|
168
|
+
it('clears all added filters when the clear button is clicked', async () => {
|
|
169
|
+
const user = userEvent.setup();
|
|
170
|
+
render(<PowerSearchWrapper config={config} />);
|
|
171
|
+
const input = screen.getByRole('combobox', {name: 'Search'});
|
|
172
|
+
await user.type(input, 'status open');
|
|
173
|
+
await user.click(
|
|
174
|
+
await screen.findByRole('option', {name: 'Status is Open', hidden: true}),
|
|
175
|
+
);
|
|
176
|
+
await user.type(input, 'title login');
|
|
177
|
+
await user.click(
|
|
178
|
+
await screen.findByRole('option', {
|
|
179
|
+
name: 'Title contains "login"',
|
|
180
|
+
hidden: true,
|
|
181
|
+
}),
|
|
182
|
+
);
|
|
183
|
+
|
|
184
|
+
await user.type(input, 'status closed');
|
|
185
|
+
await user.click(
|
|
186
|
+
await screen.findByRole('option', {
|
|
187
|
+
name: 'Status is Closed',
|
|
188
|
+
hidden: true,
|
|
189
|
+
}),
|
|
190
|
+
);
|
|
191
|
+
|
|
192
|
+
expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(3);
|
|
193
|
+
|
|
194
|
+
await user.click(screen.getByRole('button', {name: 'Clear all'}));
|
|
195
|
+
|
|
196
|
+
expect(screen.queryAllByRole('button', {name: /^Remove /})).toHaveLength(0);
|
|
197
|
+
expect(
|
|
198
|
+
screen.queryByRole('button', {name: 'Clear all'}),
|
|
199
|
+
).not.toBeInTheDocument();
|
|
200
|
+
});
|
|
201
|
+
|
|
202
|
+
it('clicking the remove button on a filter removes only that filter', async () => {
|
|
203
|
+
const user = userEvent.setup();
|
|
204
|
+
render(<PowerSearchWrapper config={config} />);
|
|
205
|
+
const input = screen.getByRole('combobox', {name: 'Search'});
|
|
206
|
+
await user.type(input, 'status open');
|
|
207
|
+
await user.click(
|
|
208
|
+
await screen.findByRole('option', {name: 'Status is Open', hidden: true}),
|
|
209
|
+
);
|
|
210
|
+
await user.type(input, 'title login');
|
|
211
|
+
await user.click(
|
|
212
|
+
await screen.findByRole('option', {
|
|
213
|
+
name: 'Title contains "login"',
|
|
214
|
+
hidden: true,
|
|
215
|
+
}),
|
|
216
|
+
);
|
|
217
|
+
|
|
218
|
+
expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(2);
|
|
219
|
+
|
|
220
|
+
await user.click(
|
|
221
|
+
screen.getAllByRole('button', {name: 'Remove Status: is'})[0],
|
|
222
|
+
);
|
|
223
|
+
|
|
224
|
+
expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(1);
|
|
225
|
+
expect(screen.getByText('login')).toBeInTheDocument();
|
|
226
|
+
});
|
|
227
|
+
|
|
228
|
+
it('Backspace on an empty input removes only the last filter', async () => {
|
|
229
|
+
const user = userEvent.setup();
|
|
230
|
+
render(<PowerSearchWrapper config={config} />);
|
|
231
|
+
const input = screen.getByRole('combobox', {name: 'Search'});
|
|
232
|
+
await user.type(input, 'status open');
|
|
233
|
+
await user.click(
|
|
234
|
+
await screen.findByRole('option', {name: 'Status is Open', hidden: true}),
|
|
235
|
+
);
|
|
236
|
+
await user.type(input, 'title login');
|
|
237
|
+
await user.click(
|
|
238
|
+
await screen.findByRole('option', {
|
|
239
|
+
name: 'Title contains "login"',
|
|
240
|
+
hidden: true,
|
|
241
|
+
}),
|
|
242
|
+
);
|
|
243
|
+
|
|
244
|
+
expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(2);
|
|
245
|
+
|
|
246
|
+
await user.click(input);
|
|
247
|
+
await user.keyboard('{Backspace}');
|
|
248
|
+
|
|
249
|
+
expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(1);
|
|
250
|
+
expect(screen.getByText('Open')).toBeInTheDocument();
|
|
251
|
+
});
|
|
252
|
+
|
|
168
253
|
describe('token value truncation (#4759)', () => {
|
|
169
254
|
it('truncates token values by characters, not code units', () => {
|
|
170
255
|
const truncConfig: PowerSearchConfig = {
|
|
@@ -733,8 +733,8 @@ export function PowerSearch({
|
|
|
733
733
|
} else if (change.type === 'remove' && change.item) {
|
|
734
734
|
const auxData = change.item.auxiliaryData as PowerSearchAuxData;
|
|
735
735
|
if (auxData?.filterIndex != null) {
|
|
736
|
-
const newFilters = filters.filter(
|
|
737
|
-
(
|
|
736
|
+
const newFilters = filters.filter((_, i) =>
|
|
737
|
+
_items.some(item => item.auxiliaryData?.filterIndex === i),
|
|
738
738
|
);
|
|
739
739
|
onChange(newFilters, 'remove', auxData.filterIndex);
|
|
740
740
|
}
|
package/src/Selector/hooks.ts
CHANGED
|
@@ -6,8 +6,12 @@
|
|
|
6
6
|
* @file hooks.ts
|
|
7
7
|
* @input Uses untransformed DOM layout geometry from the Selector's outer
|
|
8
8
|
* anchor, listbox, and selected option
|
|
9
|
-
* @output Hooks for Selector
|
|
10
|
-
*
|
|
9
|
+
* @output Hooks for Selector: useSelectedItemOffset, and useCombobox (public,
|
|
10
|
+
* exported from the Selector entry point; also used by CommandPalette)
|
|
11
|
+
* @position Selector hooks; used by Selector.tsx and CommandPalette
|
|
12
|
+
*
|
|
13
|
+
* SYNC: When useCombobox's options or return change, update:
|
|
14
|
+
* - /packages/core/src/Selector/useCombobox.doc.mjs
|
|
11
15
|
*/
|
|
12
16
|
|
|
13
17
|
import {useCallback, useState} from 'react';
|