@pixum/combobox 5.10.4-alpha.24 → 5.10.4-alpha.30
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/lib/ComboBox.d.ts +5 -1
- package/lib/ComboBox.js +49 -8
- package/lib/ComboBox.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/partials/ComboBoxOptions.d.ts +2 -2
- package/lib/partials/ComboBoxOptions.js.map +1 -1
- package/lib/types.d.ts +73 -6
- package/package.json +5 -5
package/lib/ComboBox.d.ts
CHANGED
|
@@ -26,8 +26,12 @@ import type { ComboBoxProps } from './types';
|
|
|
26
26
|
* option is its `text`, so `value` can be compared against the visible label as
|
|
27
27
|
* before.
|
|
28
28
|
*
|
|
29
|
+
* Legacy props: `id`, `selectedOption` and a non-element `leadingIcon` are
|
|
30
|
+
* still accepted so existing consumers keep working. They are marked
|
|
31
|
+
* `@deprecated` in the types.
|
|
32
|
+
*
|
|
29
33
|
* @param props - The props for the ComboBox component
|
|
30
34
|
* @returns A responsive, accessible combobox
|
|
31
35
|
*/
|
|
32
|
-
export declare function ComboBox({ className, name, helperText, headline, label, options, isOpen, setIsOpen, value, multiple, placeholder, searchPattern, noResultsText, inputMode, leadingType, leadingIcon, optionDetails, optionsSlot, withSearch, openOnEnter, disabled, loading, theme, renderValue, onClick, onChange, onOptionItemClick, onOutsideClick, onSheetClose, }: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
export declare function ComboBox({ className, name, id, helperText, headline, label, options, isOpen, setIsOpen, value, selectedOption, multiple, placeholder, searchPattern, noResultsText, inputMode, leadingType, leadingIcon, optionDetails, optionsSlot, withSearch, openOnEnter, disabled, loading, theme, renderValue, onClick, onChange, onOptionItemClick, onOutsideClick, onSheetClose, }: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
|
|
33
37
|
export default ComboBox;
|
package/lib/ComboBox.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import {
|
|
3
|
-
import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
|
|
4
4
|
import BottomSheet from '@pixum/bottom-sheet';
|
|
5
5
|
import Text, { TEXT_VARIANT } from '@pixum/text';
|
|
6
6
|
import { SearchInput, SelectInput } from '@pixum/web-input';
|
|
7
|
-
import ThemeProvider
|
|
7
|
+
import ThemeProvider from '@pixum/theme-provider';
|
|
8
8
|
import clsx from 'clsx';
|
|
9
9
|
import { ComboBoxNoResults, ComboBoxOptions } from './partials';
|
|
10
10
|
import { useComboBox, useComboBoxFocus, useIsDesktopScreenWidth } from './hooks';
|
|
@@ -37,10 +37,14 @@ import styles from './ComboBox.module.css';
|
|
|
37
37
|
* option is its `text`, so `value` can be compared against the visible label as
|
|
38
38
|
* before.
|
|
39
39
|
*
|
|
40
|
+
* Legacy props: `id`, `selectedOption` and a non-element `leadingIcon` are
|
|
41
|
+
* still accepted so existing consumers keep working. They are marked
|
|
42
|
+
* `@deprecated` in the types.
|
|
43
|
+
*
|
|
40
44
|
* @param props - The props for the ComboBox component
|
|
41
45
|
* @returns A responsive, accessible combobox
|
|
42
46
|
*/
|
|
43
|
-
export function ComboBox({ className = '', name, helperText, headline, label, options, isOpen, setIsOpen, value, multiple = false, placeholder, searchPattern = '', noResultsText, inputMode, leadingType, leadingIcon, optionDetails, optionsSlot, withSearch = true, openOnEnter = true, disabled = false, loading = false, theme
|
|
47
|
+
export function ComboBox({ className = '', name, id, helperText, headline, label, options, isOpen, setIsOpen, value, selectedOption, multiple = false, placeholder, searchPattern = '', noResultsText, inputMode, leadingType, leadingIcon, optionDetails, optionsSlot, withSearch = true, openOnEnter = true, disabled = false, loading = false, theme, renderValue, onClick, onChange, onOptionItemClick, onOutsideClick, onSheetClose, }) {
|
|
44
48
|
const listboxId = useId();
|
|
45
49
|
const rootRef = useRef(null);
|
|
46
50
|
const isDesktop = useIsDesktopScreenWidth();
|
|
@@ -53,7 +57,25 @@ export function ComboBox({ className = '', name, helperText, headline, label, op
|
|
|
53
57
|
const [hasTyped, setHasTyped] = useState(false);
|
|
54
58
|
const { triggerRef, searchInputRef, returnFocusToTrigger, isReturningFocus } = useComboBoxFocus();
|
|
55
59
|
const normalisedOptions = useMemo(() => normaliseOptions(options, listboxId), [options, listboxId]);
|
|
56
|
-
|
|
60
|
+
/**
|
|
61
|
+
* In the previous version `value` drove both the trigger text and the
|
|
62
|
+
* selection, while
|
|
63
|
+
* `selectedOption` was accepted but never read by this component - it was
|
|
64
|
+
* only passed down internally, filled with `value`.
|
|
65
|
+
*
|
|
66
|
+
* `value` therefore keeps full priority. `selectedOption` is honoured as a
|
|
67
|
+
* fallback so consumers that always set it now get a working selection, but
|
|
68
|
+
* only when it is actually a string: several consumers type it as their own
|
|
69
|
+
* option object, and previously that object was silently ignored rather than
|
|
70
|
+
* stringified.
|
|
71
|
+
*/
|
|
72
|
+
const selectedValues = useMemo(() => {
|
|
73
|
+
if (value !== undefined)
|
|
74
|
+
return toValueArray(value);
|
|
75
|
+
return typeof selectedOption === 'string'
|
|
76
|
+
? toValueArray(selectedOption)
|
|
77
|
+
: [];
|
|
78
|
+
}, [value, selectedOption]);
|
|
57
79
|
/**
|
|
58
80
|
* Labels of the selected options; falls back to the raw values, both for
|
|
59
81
|
* options that render a custom node instead of a plain `text` and for values
|
|
@@ -66,6 +88,20 @@ export function ComboBox({ className = '', name, helperText, headline, label, op
|
|
|
66
88
|
const selectedLabels = labels.length > 0 ? labels : selectedValues;
|
|
67
89
|
return renderValue ? renderValue(selectedLabels) : selectedLabels.join(', ');
|
|
68
90
|
}, [normalisedOptions, selectedValues, renderValue]);
|
|
91
|
+
/**
|
|
92
|
+
* `leadingIcon` is typed as `ReactNode` for backwards compatibility, while
|
|
93
|
+
* `SelectInput` wants a single element. Strings, numbers and fragments are
|
|
94
|
+
* wrapped instead of rejected; `false`/`null`/`undefined` stay empty.
|
|
95
|
+
*/
|
|
96
|
+
const triggerLeadingIcon = useMemo(() => {
|
|
97
|
+
if (leadingIcon === null || leadingIcon === undefined)
|
|
98
|
+
return null;
|
|
99
|
+
if (typeof leadingIcon === 'boolean')
|
|
100
|
+
return null;
|
|
101
|
+
if (isValidElement(leadingIcon))
|
|
102
|
+
return leadingIcon;
|
|
103
|
+
return _jsx(_Fragment, { children: leadingIcon });
|
|
104
|
+
}, [leadingIcon]);
|
|
69
105
|
const open = useCallback(() => {
|
|
70
106
|
if (disabled || loading)
|
|
71
107
|
return;
|
|
@@ -201,9 +237,14 @@ export function ComboBox({ className = '', name, helperText, headline, label, op
|
|
|
201
237
|
* the bottom sheet.
|
|
202
238
|
*/
|
|
203
239
|
const optionsPanel = optionsSlot !== null && optionsSlot !== void 0 ? optionsSlot : (normalisedOptions.length > 0 ? (_jsx(ComboBoxOptions, { options: normalisedOptions, listboxAriaProps: listboxAriaProps, selectedValues: selectedValues, activeOptionId: activeOptionId, leadingType: leadingType, optionDetails: optionDetails, onOptionClick: handleSelect })) : (_jsx(ComboBoxNoResults, { text: noResultsText })));
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
240
|
+
const comboBoxElement = (_jsxs("div", { className: styles.comboBox, ref: rootRef, onMouseDownCapture: handleRootPointerDown, children: [showTrigger && (_jsx(SelectInput, Object.assign({ ref: triggerRef, className: clsx(isOpen && 'active', className), name: name, inputInfo: helperText, label: label, value: displayValue, placeholder: placeholder, leadingIcon: triggerLeadingIcon, disabled: disabled, loading: loading, readOnly: true, disableTrailingIconButton: true,
|
|
241
|
+
// The focus has to stay in the field, even when clicking next to it.
|
|
242
|
+
blurOnOutsideClick: false, onClick: handleTriggerClick, onFocus: handleTriggerFocus, onKeyDown: onKeyDown }, triggerAriaProps))), isDesktop && isOpen && (_jsxs(_Fragment, { children: [showSearchField && (_jsx(SearchInput, Object.assign({}, searchInputProps, { label: label }))), optionsPanel] }))] }));
|
|
243
|
+
const bottomSheetElement = !isDesktop && isOpen && (_jsxs(BottomSheet, { className: styles.sheet, open: isOpen, onClose: () => close(), children: [_jsxs("div", { className: styles.header, children: [headline && (_jsx(Text, { variant: TEXT_VARIANT.HEADLINE, className: styles.headline, children: headline })), showSearchField && _jsx(SearchInput, Object.assign({}, searchInputProps, { isCompact: true }))] }), optionsPanel] }));
|
|
244
|
+
if (theme) {
|
|
245
|
+
return (_jsxs(ThemeProvider, { theme: theme, children: [comboBoxElement, bottomSheetElement] }));
|
|
246
|
+
}
|
|
247
|
+
return (_jsxs(_Fragment, { children: [comboBoxElement, bottomSheetElement] }));
|
|
207
248
|
}
|
|
208
249
|
export default ComboBox;
|
|
209
250
|
//# sourceMappingURL=ComboBox.js.map
|
package/lib/ComboBox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,
|
|
1
|
+
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EACL,cAAc,EACd,WAAW,EACX,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,aAAa,MAAM,uBAAuB,CAAA;AACjD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAChF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACxE,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,EAAE,EACF,UAAU,EACV,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,aAAa,GAAG,EAAE,EAClB,aAAa,EACb,SAAS,EACT,WAAW,EACX,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,YAAY,GACE;IACd,MAAM,SAAS,GAAG,KAAK,EAAE,CAAA;IACzB,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAA;IAE3C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAElD;;;;OAIG;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE/C,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAC1E,gBAAgB,EAAE,CAAA;IAEpB,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,EAC1C,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB,CAAA;IACD;;;;;;;;;;;OAWG;IACH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO,YAAY,CAAC,KAAK,CAAC,CAAA;QAEnD,OAAO,OAAO,cAAc,KAAK,QAAQ;YACvC,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC;YAC9B,CAAC,CAAC,EAAE,CAAA;IACR,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAA;IAE3B;;;;OAIG;IACH,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,MAAM,GAAG,iBAAiB;aAC7B,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACvD,GAAG,CAAC,cAAc,CAAC,CAAA;QAEtB,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAA;QAElE,OAAO,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC9E,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAA;IAEpD;;;;OAIG;IACH,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,SAAS;YAAE,OAAO,IAAI,CAAA;QAClE,IAAI,OAAO,WAAW,KAAK,SAAS;YAAE,OAAO,IAAI,CAAA;QACjD,IAAI,cAAc,CAAC,WAAW,CAAC;YAAE,OAAO,WAAW,CAAA;QAEnD,OAAO,4BAAG,WAAW,GAAI,CAAA;IAC3B,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,IAAI,QAAQ,IAAI,OAAO;YAAE,OAAM;QAE/B,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAElC;;;;;OAKG;IACH,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,YAAY,GAAG,IAAI,EAAE,EAAE;QACtB,cAAc,CAAC,EAAE,CAAC,CAAA;QAClB,WAAW,CAAC,KAAK,CAAC,CAAA;QAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAA;QACd,SAAS,CAAC,KAAK,CAAC,CAAA;QAEhB,IAAI,YAAY;YAAE,oBAAoB,EAAE,CAAA;IAC1C,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAC5C,CAAA;IAED;;;;;OAKG;IACH,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,WAAmB,EAAE,EAAE;QACtB,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,WAAW,CAAC,CAAA;QAEhC,IAAI,CAAC,QAAQ;YAAE,KAAK,EAAE,CAAA;IACxB,CAAC,EACD,CAAC,QAAQ,EAAE,iBAAiB,EAAE,KAAK,CAAC,CACrC,CAAA;IAED,MAAM,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,GACtE,WAAW,CAAC;QACV,OAAO,EAAE,iBAAiB;QAC1B,MAAM;QACN,IAAI;QACJ,KAAK;QACL,cAAc;QACd,QAAQ,EAAE,YAAY;QACtB,SAAS;QACT,UAAU,EAAE,UAAU;QACtB,QAAQ;QACR,WAAW;KACZ,CAAC,CAAA;IAEJ;;;OAGG;IACH,MAAM,eAAe,GAAG,UAAU,IAAI,MAAM,CAAA;IAE5C,iEAAiE;IACjE,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,CAAC,eAAe,CAAA;IAElD;;;OAGG;IACH,MAAM,gBAAgB,GAAG,eAAe;QACtC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE;QACvC,CAAC,CAAC,iBAAiB,CAAA;IAErB,uEAAuE;IACvE,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,MAAM;YAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAA;QAEhD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAA;IAC1B,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1B;;;;OAIG;IACH,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC1C,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,oBAAoB,CAAC,OAAO,GAAG,MAAM,CAAA;IACvC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ;;;OAGG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,MAAM;YAAE,OAAM;QAEjC,MAAM,yBAAyB,GAAG,CAAC,KAAiB,EAAE,EAAE;;YACtD,IAAI,MAAA,OAAO,CAAC,OAAO,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBAAE,OAAM;YAE3D,0CAA0C;YAC1C,KAAK,CAAC,KAAK,CAAC,CAAA;YACZ,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAA;QACpB,CAAC,CAAA;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,yBAAyB,CAAC,CAAA;QAEjE,OAAO,GAAG,EAAE,CACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,yBAAyB,CAAC,CAAA;IACxE,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAA;IAE9C;;;OAGG;IACH,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,gBAAgB,EAAE;YAAE,OAAM;QAE9B,IAAI,EAAE,CAAA;IACR,CAAC,EAAE,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAAA;IAE5B,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,QAAQ;YAAE,OAAM;QAEpB,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;QAEX,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;YACjC,KAAK,EAAE,CAAA;YAEP,OAAM;QACR,CAAC;QAED,IAAI,EAAE,CAAA;IACR,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpC,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAA0C,EAAE,EAAE;QAC7C,WAAW,CAAC,IAAI,CAAC,CAAA;QACjB,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAClC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,WAAW,CAAC,IAAI,CAAC,CAAA;QACjB,cAAc,CAAC,EAAE,CAAC,CAAA;QAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAA;IAChB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd;;;OAGG;IACH,MAAM,gBAAgB,mBACpB,GAAG,EAAE,cAAc,EACnB,IAAI;QACJ,yEAAyE;QACzE,2CAA2C;QAC3C,KAAK,EAAE,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EACxD,OAAO,EAAE,aAAa,EACtB,WAAW;QACX,SAAS;QACT,+EAA+E;QAC/E,YAAY,EAAE,KAAK,EACnB,kBAAkB,EAAE,IAAI,EACxB,kBAAkB,EAAE,KAAK,EACzB,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,SAAS,IACN,iBAAiB,CACrB,CAAA;IAED;;;OAGG;IACH,MAAM,YAAY,GAChB,WAAW,aAAX,WAAW,cAAX,WAAW,GACX,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC9B,KAAC,eAAe,IACd,OAAO,EAAE,iBAAiB,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,YAAY,GAC3B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,IAAI,EAAE,aAAa,GAAI,CAC3C,CAAC,CAAA;IAEJ,MAAM,eAAe,GAAG,CACtB,eACE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,GAAG,EAAE,OAAO,EACZ,kBAAkB,EAAE,qBAAqB,aAExC,WAAW,IAAI,CACd,KAAC,WAAW,kBACV,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,SAAS,CAAC,EAC9C,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,kBAAkB,EAC/B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,QACR,yBAAyB;gBACzB,qEAAqE;gBACrE,kBAAkB,EAAE,KAAK,EACzB,OAAO,EAAE,kBAAkB,EAC3B,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,SAAS,IAChB,gBAAgB,EACpB,CACH,EAEA,SAAS,IAAI,MAAM,IAAI,CACtB,8BACG,eAAe,IAAI,CAClB,KAAC,WAAW,oBAAK,gBAAgB,IAAE,KAAK,EAAE,KAAK,IAAI,CACpD,EACA,YAAY,IACZ,CACJ,IACG,CACP,CAAA;IAED,MAAM,kBAAkB,GAAG,CAAC,SAAS,IAAI,MAAM,IAAI,CACjD,MAAC,WAAW,IACV,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,aAEtB,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC1B,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7D,QAAQ,GACJ,CACR,EACA,eAAe,IAAI,KAAC,WAAW,oBAAK,gBAAgB,IAAE,SAAS,UAAG,IAC/D,EACL,YAAY,IACD,CACf,CAAA;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,CACL,MAAC,aAAa,IAAC,KAAK,EAAE,KAAK,aACxB,eAAe,EACf,kBAAkB,IACL,CACjB,CAAA;IACH,CAAC;IAED,OAAO,CACL,8BACG,eAAe,EACf,kBAAkB,IAClB,CACJ,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAA"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { ComboBox, default } from './ComboBox';
|
|
2
2
|
export { ComboBoxOptionsSlot, type ComboBoxOptionsSlotProps } from './partials';
|
|
3
3
|
export { useComboBox, useIsDesktopScreenWidth } from './hooks';
|
|
4
|
-
export type { ComboBoxAriaProps, ComboBoxOption, ComboBoxOptionGroup, ComboBoxOptionItemProps, ComboBoxOptionsInput, ComboBoxOptionsProps, ComboBoxProps, ListboxAriaProps, } from './types';
|
|
4
|
+
export type { ComboBoxAriaProps, ComboBoxOption, ComboBoxOptionGroup, ComboBoxOptionItemProps, ComboBoxOptionsInput, ComboBoxOptionsProps, ComboBoxOptionsPanelProps, ComboBoxProps, ListboxAriaProps, } from './types';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ComboBoxOptionsPanelProps } from '../types';
|
|
2
2
|
/**
|
|
3
3
|
* Renders the options panel of the ComboBox.
|
|
4
4
|
*
|
|
@@ -17,5 +17,5 @@ import type { ComboBoxOptionsProps } from '../types';
|
|
|
17
17
|
* @param props - The props for the ComboBoxOptions component
|
|
18
18
|
* @returns The options panel
|
|
19
19
|
*/
|
|
20
|
-
export declare function ComboBoxOptions({ options, listboxAriaProps, selectedValues, activeOptionId, leadingType, optionDetails, onOptionClick, }:
|
|
20
|
+
export declare function ComboBoxOptions({ options, listboxAriaProps, selectedValues, activeOptionId, leadingType, optionDetails, onOptionClick, }: ComboBoxOptionsPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
export default ComboBoxOptions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxOptions.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAG3C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,EACb,aAAa,
|
|
1
|
+
{"version":3,"file":"ComboBoxOptions.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAG3C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,EACb,aAAa,GACa;IAC1B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,mBAAgB,MAAM,aACjD,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,EAC7C,QAAQ,EAAE,CAAC,CAAC,IACR,gBAAgB,cAEnB,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;;oBAAC,OAAA,CAClC,KAAC,oBAAoB,IAEnB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,IANvB,2BAA2B,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,EAAE,CAO1D,CACH,CAAA;iBAAA,CAAC,IACE,EAEL,aAAa,IAAI,CAChB,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,aAAa,YACjE,aAAa,GACT,CACR,IACI,CACR,CAAA;AACH,CAAC;AAED,eAAe,eAAe,CAAA"}
|
package/lib/types.d.ts
CHANGED
|
@@ -12,7 +12,13 @@ import type { InputModesType } from '@pixum/web-input';
|
|
|
12
12
|
export interface ComboBoxOptionItemProps extends MenuItemProps {
|
|
13
13
|
/** Unique key for the option item */
|
|
14
14
|
key?: string;
|
|
15
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* Disabled options are rendered, but skipped by mouse and keyboard.
|
|
17
|
+
*
|
|
18
|
+
* Newly added. Consumer types that already carry a `disabled` field of a
|
|
19
|
+
* different type (e.g. `disabled: 'true' | 'false'`) are no longer
|
|
20
|
+
* assignable - widen it to `boolean` on the consumer side.
|
|
21
|
+
*/
|
|
16
22
|
disabled?: boolean;
|
|
17
23
|
}
|
|
18
24
|
/** Options are accepted either as a flat list or grouped by a group headline. */
|
|
@@ -63,8 +69,48 @@ export interface ListboxAriaProps {
|
|
|
63
69
|
/** Only set for multi select; single select listboxes omit it. */
|
|
64
70
|
'aria-multiselectable'?: boolean;
|
|
65
71
|
}
|
|
66
|
-
/**
|
|
72
|
+
/**
|
|
73
|
+
* Public options contract, kept for backwards compatibility.
|
|
74
|
+
*
|
|
75
|
+
* In the previous version this interface was the base of `ComboBoxProps` and
|
|
76
|
+
* the prop type of
|
|
77
|
+
* the exported options component. It describes the options as the *consumer*
|
|
78
|
+
* hands them in - not the normalised list the internal panel renders. The
|
|
79
|
+
* internal shape now lives in `ComboBoxOptionsPanelProps`.
|
|
80
|
+
*
|
|
81
|
+
* @deprecated Use `ComboBoxProps` (or `Pick<ComboBoxProps, 'options'>`)
|
|
82
|
+
* directly. Kept so existing imports do not silently change meaning; will be
|
|
83
|
+
* removed in the next major.
|
|
84
|
+
*/
|
|
67
85
|
export interface ComboBoxOptionsProps {
|
|
86
|
+
/** Options to display, either flat or grouped. */
|
|
87
|
+
options: ComboBoxOptionsInput;
|
|
88
|
+
/**
|
|
89
|
+
* Currently selected option value.
|
|
90
|
+
*
|
|
91
|
+
* @deprecated Use `value`. When both are set, `value` wins.
|
|
92
|
+
*/
|
|
93
|
+
selectedOption?: string;
|
|
94
|
+
/**
|
|
95
|
+
* Callback fired when an option is clicked.
|
|
96
|
+
*
|
|
97
|
+
* @deprecated Use `onOptionItemClick`. On `ComboBoxProps` this prop is
|
|
98
|
+
* narrowed to the trigger click handler `() => void`.
|
|
99
|
+
*/
|
|
100
|
+
onClick?: (value: string) => void;
|
|
101
|
+
/** Type of leading element to display (icon, avatar, checkbox …). */
|
|
102
|
+
leadingType?: LeadingType;
|
|
103
|
+
/** Additional details rendered below the options. */
|
|
104
|
+
optionDetails?: React.ReactNode;
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Props of the rendered options panel - the internal, normalised shape.
|
|
108
|
+
*
|
|
109
|
+
* This is what `ComboBoxOptions` consumes. It is exported so custom panels can
|
|
110
|
+
* be typed against it, but it is not part of the consumer-facing API and may
|
|
111
|
+
* change without a major bump.
|
|
112
|
+
*/
|
|
113
|
+
export interface ComboBoxOptionsPanelProps {
|
|
68
114
|
/** Normalised options in render order. */
|
|
69
115
|
options: ComboBoxOption[];
|
|
70
116
|
/** ARIA props of the listbox element. */
|
|
@@ -80,12 +126,24 @@ export interface ComboBoxOptionsProps {
|
|
|
80
126
|
/** Called with the value of the clicked option. */
|
|
81
127
|
onOptionClick: (value: string) => void;
|
|
82
128
|
}
|
|
83
|
-
/**
|
|
84
|
-
|
|
129
|
+
/**
|
|
130
|
+
* Props of the ComboBox component.
|
|
131
|
+
*
|
|
132
|
+
* Extends the deprecated `ComboBoxOptionsProps` so that consumers who built
|
|
133
|
+
* their own prop types on top of it keep compiling.
|
|
134
|
+
*/
|
|
135
|
+
export interface ComboBoxProps extends ComboBoxOptionsProps {
|
|
85
136
|
/** Additional CSS class name for the trigger field. */
|
|
86
137
|
className?: string;
|
|
87
138
|
/** Name attribute for the input field. */
|
|
88
139
|
name?: string;
|
|
140
|
+
/**
|
|
141
|
+
* ID attribute for the input field.
|
|
142
|
+
*
|
|
143
|
+
* @deprecated The trigger generates its own ids for the ARIA wiring; `id` is
|
|
144
|
+
* forwarded to the underlying input untouched and no longer used internally.
|
|
145
|
+
*/
|
|
146
|
+
id?: string;
|
|
89
147
|
/** Headline text displayed in the mobile bottom sheet. */
|
|
90
148
|
headline?: string;
|
|
91
149
|
/** Helper text displayed below the input field. */
|
|
@@ -101,6 +159,10 @@ export interface ComboBoxProps {
|
|
|
101
159
|
/**
|
|
102
160
|
* Selected value: a string for single select, an array of strings when
|
|
103
161
|
* `multiple` is set.
|
|
162
|
+
*
|
|
163
|
+
* The array member is new in this version. Code that *reads* this prop back
|
|
164
|
+
* out of
|
|
165
|
+
* a props object has to narrow it (`Array.isArray(value)`).
|
|
104
166
|
*/
|
|
105
167
|
value?: string | string[];
|
|
106
168
|
/** Allows selecting several options; combine with a checkbox `leadingType`. */
|
|
@@ -139,8 +201,13 @@ export interface ComboBoxProps {
|
|
|
139
201
|
theme?: ThemeType;
|
|
140
202
|
/** Custom slot that replaces the standard options / no-results block. */
|
|
141
203
|
optionsSlot?: React.ReactNode;
|
|
142
|
-
/**
|
|
143
|
-
|
|
204
|
+
/**
|
|
205
|
+
* Icon element displayed at the leading side of the trigger input.
|
|
206
|
+
*
|
|
207
|
+
* Deliberately `ReactNode`, not `ReactElement`: fragments, strings and
|
|
208
|
+
* conditional `false` have always been accepted here.
|
|
209
|
+
*/
|
|
210
|
+
leadingIcon?: React.ReactNode;
|
|
144
211
|
/**
|
|
145
212
|
* Formats the selected values for the trigger field.
|
|
146
213
|
* Defaults to the labels of the selected options joined by a comma.
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixum/combobox",
|
|
3
|
-
"version": "5.10.4-alpha.
|
|
3
|
+
"version": "5.10.4-alpha.30+afe0b17be",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "lib/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"peerDependencies": {
|
|
8
8
|
"@pixum/bottom-sheet": "4.9.0",
|
|
9
|
-
"@pixum/menu": "4.4.
|
|
10
|
-
"@pixum/menu-item": "3.4.
|
|
9
|
+
"@pixum/menu": "4.4.2",
|
|
10
|
+
"@pixum/menu-item": "3.4.3",
|
|
11
11
|
"@pixum/text": "3.7.0",
|
|
12
12
|
"@pixum/theme-provider": "5.6.0",
|
|
13
|
-
"@pixum/web-input": "2.5.
|
|
13
|
+
"@pixum/web-input": "2.5.6"
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
16
16
|
"lib"
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
"sideEffects": [
|
|
19
19
|
"*.css"
|
|
20
20
|
],
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "afe0b17beb76971a8620a75b4ce62f7a8f428de3"
|
|
22
22
|
}
|