@pixum/combobox 5.10.4-alpha.9 → 5.10.4

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.
Files changed (45) hide show
  1. package/lib/ComboBox.d.ts +6 -32
  2. package/lib/ComboBox.js +77 -217
  3. package/lib/ComboBox.js.map +1 -1
  4. package/lib/hooks/index.d.ts +0 -2
  5. package/lib/hooks/index.js +0 -2
  6. package/lib/hooks/index.js.map +1 -1
  7. package/lib/hooks/useIsDesktopScreenWidth.d.ts +0 -5
  8. package/lib/hooks/useIsDesktopScreenWidth.js +24 -34
  9. package/lib/hooks/useIsDesktopScreenWidth.js.map +1 -1
  10. package/lib/index.d.ts +4 -4
  11. package/lib/index.js +3 -2
  12. package/lib/index.js.map +1 -1
  13. package/lib/partials/ComboBoxOptions.d.ts +5 -16
  14. package/lib/partials/ComboBoxOptions.js +21 -25
  15. package/lib/partials/ComboBoxOptions.js.map +1 -1
  16. package/lib/partials/ComboBoxOptionsItems.d.ts +17 -32
  17. package/lib/partials/ComboBoxOptionsItems.js +14 -46
  18. package/lib/partials/ComboBoxOptionsItems.js.map +1 -1
  19. package/lib/partials/ComboBoxOptionsSlot.d.ts +16 -17
  20. package/lib/partials/ComboBoxOptionsSlot.js +11 -26
  21. package/lib/partials/ComboBoxOptionsSlot.js.map +1 -1
  22. package/lib/partials/index.d.ts +1 -2
  23. package/lib/partials/index.js +1 -2
  24. package/lib/partials/index.js.map +1 -1
  25. package/lib/types.d.ts +45 -183
  26. package/lib/utils/index.d.ts +2 -1
  27. package/lib/utils/index.js +2 -1
  28. package/lib/utils/index.js.map +1 -1
  29. package/package.json +8 -8
  30. package/lib/ComboBox.module.css +0 -1
  31. package/lib/hooks/useComboBox.d.ts +0 -60
  32. package/lib/hooks/useComboBox.js +0 -226
  33. package/lib/hooks/useComboBox.js.map +0 -1
  34. package/lib/hooks/useComboBoxFocus.d.ts +0 -35
  35. package/lib/hooks/useComboBoxFocus.js +0 -49
  36. package/lib/hooks/useComboBoxFocus.js.map +0 -1
  37. package/lib/partials/ComboBoxNoResults.d.ts +0 -14
  38. package/lib/partials/ComboBoxNoResults.js +0 -18
  39. package/lib/partials/ComboBoxNoResults.js.map +0 -1
  40. package/lib/partials/ComboBoxOptionsGroup.d.ts +0 -15
  41. package/lib/partials/ComboBoxOptionsGroup.js +0 -31
  42. package/lib/partials/ComboBoxOptionsGroup.js.map +0 -1
  43. package/lib/utils/options.d.ts +0 -77
  44. package/lib/utils/options.js +0 -145
  45. package/lib/utils/options.js.map +0 -1
package/lib/ComboBox.d.ts CHANGED
@@ -1,37 +1,11 @@
1
1
  import type { ComboBoxProps } from './types';
2
+ import './styles.css';
2
3
  /**
3
- * Searchable select field. On desktop the options appear in a popover, on
4
- * mobile in a bottom sheet - the behaviour is identical in both cases.
5
- *
6
- * This file is the only client boundary of the package: all partials, hooks and
7
- * utils are plain modules without a `'use client'` directive, so they can be
8
- * imported from server components as well and only end up in the client bundle
9
- * through this component.
10
- *
11
- * Focus choreography:
12
- * - focusing the trigger opens the options,
13
- * - with `withSearch` the focus moves into the search field as soon as it is
14
- * mounted, and its content is selected so the first keystroke replaces it,
15
- * - selecting an option, Escape, Alt+ArrowUp and closing the sheet move the
16
- * focus back to the trigger without re-opening the list,
17
- * - Tab closes the list and lets the focus move on.
18
- *
19
- * Keyboard: ArrowUp/ArrowDown navigate, Home/End jump, Enter selects. Space
20
- * selects as well - unless an open search field needs it as a real space
21
- * character, which is what the ARIA authoring practices ask for.
22
- *
23
- * Selection: pass a string for single select, or `multiple` plus an array of
24
- * strings for a checkbox list. `onOptionItemClick` reports the toggled value;
25
- * the selection itself stays fully controlled by the consumer. The value of an
26
- * option is its `text`, so `value` can be compared against the visible label as
27
- * before.
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.
4
+ * ComboBox component that provides a searchable dropdown with options.
5
+ * Adapts to mobile (bottom sheet) and desktop (dropdown) viewports.
6
+ * Supports both flat and grouped options, search functionality, and keyboard navigation.
32
7
  *
33
8
  * @param props - The props for the ComboBox component
34
- * @returns A responsive, accessible combobox
9
+ * @returns A responsive combobox component with search and selection capabilities
35
10
  */
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;
37
- export default ComboBox;
11
+ export declare function ComboBox({ className, name, headline, label, searchPattern, isOpen, options, placeholder, value, inputMode, noResultsText, leadingType, optionDetails, withSearch, theme, optionsSlot, leadingIcon, disabled, loading, setIsOpen, onClick, onChange, onOutsideClick, onOptionItemClick, onSheetClose, }: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
package/lib/ComboBox.js CHANGED
@@ -1,250 +1,110 @@
1
1
  'use client';
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';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { useEffect, useRef, useState, } from 'react';
4
4
  import BottomSheet from '@pixum/bottom-sheet';
5
- import Text, { TEXT_VARIANT } from '@pixum/text';
6
- import { SearchInput, SelectInput } from '@pixum/web-input';
7
- import ThemeProvider from '@pixum/theme-provider';
5
+ import Text, { TextVariant } from '@pixum/text';
6
+ import { useEscapeKeyPress } from '@pixum/utils';
7
+ import { ComboBoxOptions } from './partials';
8
+ import { SelectInput, SearchInput } from '@pixum/web-input';
9
+ import { useIsDesktopScreenWidth } from './hooks';
8
10
  import clsx from 'clsx';
9
- import { ComboBoxNoResults, ComboBoxOptions } from './partials';
10
- import { useComboBox, useComboBoxFocus, useIsDesktopScreenWidth } from './hooks';
11
- import { getOptionLabel, normaliseOptions, toValueArray } from './utils';
12
- import styles from './ComboBox.module.css';
11
+ import ThemeProvider, { DEFAULT_THEME } from '@pixum/theme-provider';
12
+ import './styles.css';
13
13
  /**
14
- * Searchable select field. On desktop the options appear in a popover, on
15
- * mobile in a bottom sheet - the behaviour is identical in both cases.
16
- *
17
- * This file is the only client boundary of the package: all partials, hooks and
18
- * utils are plain modules without a `'use client'` directive, so they can be
19
- * imported from server components as well and only end up in the client bundle
20
- * through this component.
21
- *
22
- * Focus choreography:
23
- * - focusing the trigger opens the options,
24
- * - with `withSearch` the focus moves into the search field as soon as it is
25
- * mounted, and its content is selected so the first keystroke replaces it,
26
- * - selecting an option, Escape, Alt+ArrowUp and closing the sheet move the
27
- * focus back to the trigger without re-opening the list,
28
- * - Tab closes the list and lets the focus move on.
29
- *
30
- * Keyboard: ArrowUp/ArrowDown navigate, Home/End jump, Enter selects. Space
31
- * selects as well - unless an open search field needs it as a real space
32
- * character, which is what the ARIA authoring practices ask for.
33
- *
34
- * Selection: pass a string for single select, or `multiple` plus an array of
35
- * strings for a checkbox list. `onOptionItemClick` reports the toggled value;
36
- * the selection itself stays fully controlled by the consumer. The value of an
37
- * option is its `text`, so `value` can be compared against the visible label as
38
- * before.
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.
14
+ * ComboBox component that provides a searchable dropdown with options.
15
+ * Adapts to mobile (bottom sheet) and desktop (dropdown) viewports.
16
+ * Supports both flat and grouped options, search functionality, and keyboard navigation.
43
17
  *
44
18
  * @param props - The props for the ComboBox component
45
- * @returns A responsive, accessible combobox
19
+ * @returns A responsive combobox component with search and selection capabilities
46
20
  */
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, }) {
48
- const listboxId = useId();
49
- const rootRef = useRef(null);
50
- const isDesktop = useIsDesktopScreenWidth();
21
+ export function ComboBox({ className = '', name, headline, label, searchPattern = '', isOpen, options, placeholder, value, inputMode, noResultsText, leadingType, optionDetails, withSearch = true, theme = DEFAULT_THEME, optionsSlot, leadingIcon, disabled = false, loading = false, setIsOpen, onClick, onChange, onOutsideClick, onOptionItemClick, onSheetClose, }) {
22
+ const comboBoxRef = useRef(null);
23
+ const bottomSheetRef = useRef(null);
51
24
  const [searchQuery, setSearchQuery] = useState('');
25
+ const [inputPlaceholder, setPlaceholder] = useState(placeholder);
26
+ const isDesktop = useIsDesktopScreenWidth();
27
+ const optionsExist = Object.keys(options).length > 0;
28
+ const showSelectField = !withSearch || (isDesktop && !isOpen) || !isDesktop;
29
+ useEffect(() => {
30
+ !isOpen && (onSheetClose === null || onSheetClose === void 0 ? void 0 : onSheetClose());
31
+ }, [isOpen]);
52
32
  /**
53
- * Until the first keystroke the trigger text stays visible and the search
54
- * query stays empty, so consumers do not filter down to the option that is
55
- * already selected.
56
- */
57
- const [hasTyped, setHasTyped] = useState(false);
58
- const { triggerRef, searchInputRef, returnFocusToTrigger, isReturningFocus } = useComboBoxFocus();
59
- const normalisedOptions = useMemo(() => normaliseOptions(options, listboxId), [options, listboxId]);
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`.
33
+ * Handles changes to the search input field
65
34
  *
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]);
79
- /**
80
- * Labels of the selected options; falls back to the raw values, both for
81
- * options that render a custom node instead of a plain `text` and for values
82
- * that have no matching option at all.
35
+ * @param e - The change event from the input
83
36
  */
84
- const displayValue = useMemo(() => {
85
- const labels = normalisedOptions
86
- .filter(option => selectedValues.includes(option.value))
87
- .map(getOptionLabel);
88
- const selectedLabels = labels.length > 0 ? labels : selectedValues;
89
- return renderValue ? renderValue(selectedLabels) : selectedLabels.join(', ');
90
- }, [normalisedOptions, selectedValues, renderValue]);
37
+ const handleChange = (e) => {
38
+ const { value: searchValue } = e.target;
39
+ setSearchQuery(searchValue);
40
+ onChange === null || onChange === void 0 ? void 0 : onChange(searchValue);
41
+ };
91
42
  /**
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.
43
+ * Clears the search input field
95
44
  */
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]);
105
- const open = useCallback(() => {
106
- if (disabled || loading)
107
- return;
108
- setIsOpen(true);
109
- }, [disabled, loading, setIsOpen]);
45
+ const handleClearInput = () => {
46
+ setSearchQuery('');
47
+ };
110
48
  /**
111
- * Closes the list, resets the search and - unless the focus was moved away
112
- * deliberately (Tab, outside click) - returns the focus to the trigger.
113
- *
114
- * @param restoreFocus - Whether the focus goes back to the trigger
49
+ * Clears the search input and closes the dropdown/bottom sheet
115
50
  */
116
- const close = useCallback((restoreFocus = true) => {
51
+ const clearAndClose = () => {
117
52
  setSearchQuery('');
118
- setHasTyped(false);
119
- onChange === null || onChange === void 0 ? void 0 : onChange('');
120
53
  setIsOpen(false);
121
- if (restoreFocus)
122
- returnFocusToTrigger();
123
- }, [onChange, setIsOpen, returnFocusToTrigger]);
124
- /**
125
- * Applies a selection. Single select closes the list, multi select keeps it
126
- * open so further checkboxes can be toggled.
127
- *
128
- * @param optionValue - Value of the selected option
129
- */
130
- const handleSelect = useCallback((optionValue) => {
131
- onOptionItemClick === null || onOptionItemClick === void 0 ? void 0 : onOptionItemClick(optionValue);
132
- if (!multiple && (isDesktop || !optionDetails))
133
- close();
134
- }, [multiple, isDesktop, optionDetails, close, onOptionItemClick]);
135
- const { comboboxAriaProps, listboxAriaProps, onKeyDown, activeOptionId } = useComboBox({
136
- options: normalisedOptions,
137
- isOpen,
138
- open,
139
- close,
140
- selectedValues,
141
- onSelect: handleSelect,
142
- listboxId,
143
- searchable: withSearch,
144
- multiple,
145
- openOnEnter,
146
- });
147
- /**
148
- * While the search field is open it owns the `combobox` role: it is the
149
- * element the focus lives in, so it has to carry the ARIA state.
150
- */
151
- const showSearchField = withSearch && isOpen;
152
- /** On desktop the search field replaces the trigger in place. */
153
- const showTrigger = !isDesktop || !showSearchField;
154
- /**
155
- * There must never be two comboboxes at once: while the bottom sheet holds
156
- * the search field, the trigger behind it is inert.
157
- */
158
- const triggerAriaProps = showSearchField
159
- ? { 'aria-hidden': true, tabIndex: -1 }
160
- : comboboxAriaProps;
161
- /** Notifies the consumer once the bottom sheet has actually closed. */
162
- const wasOpen = useRef(isOpen);
163
- useEffect(() => {
164
- if (wasOpen.current && !isOpen)
165
- onSheetClose === null || onSheetClose === void 0 ? void 0 : onSheetClose();
166
- wasOpen.current = isOpen;
167
- }, [isOpen, onSheetClose]);
168
- /**
169
- * State of the list at `mousedown` time. The subsequent `click` toggles based
170
- * on this value - otherwise the focus handler would open the list and the
171
- * click would close it again straight away.
172
- */
173
- const wasOpenOnPointerDown = useRef(false);
174
- const handleRootPointerDown = useCallback(() => {
175
- wasOpenOnPointerDown.current = isOpen;
176
- }, [isOpen]);
177
- /**
178
- * Outside clicks are checked against the root: label, trigger, arrow and
179
- * popover all live inside it and therefore never count as "outside".
180
- */
54
+ };
55
+ useEscapeKeyPress(clearAndClose, isOpen);
56
+ // Handle outside clicks for desktop dropdown
181
57
  useEffect(() => {
182
58
  if (!isDesktop || !isOpen)
183
59
  return;
184
- const handleDocumentPointerDown = (event) => {
60
+ const handleDocumentClick = (event) => {
185
61
  var _a;
186
- if ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))
187
- return;
188
- // The focus stays where the user clicked.
189
- close(false);
190
- onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick();
62
+ const node = event.target;
63
+ const isOutside = !((_a = comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.contains(node));
64
+ if (isOutside) {
65
+ clearAndClose();
66
+ onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick();
67
+ }
191
68
  };
192
- document.addEventListener('mousedown', handleDocumentPointerDown);
193
- return () => document.removeEventListener('mousedown', handleDocumentPointerDown);
194
- }, [isDesktop, isOpen, close, onOutsideClick]);
69
+ // Add listener after a small delay to avoid closing immediately on open
70
+ const timeoutId = setTimeout(() => {
71
+ document.addEventListener('mousedown', handleDocumentClick);
72
+ }, 100);
73
+ return () => {
74
+ clearTimeout(timeoutId);
75
+ document.removeEventListener('mousedown', handleDocumentClick);
76
+ };
77
+ }, [isDesktop, isOpen, onOutsideClick]);
195
78
  /**
196
- * Opens the list when the trigger receives the focus - but not when the focus
197
- * is only coming back from a close.
79
+ * Handles click on an option item
80
+ *
81
+ * @param optionValue - The value of the clicked option
198
82
  */
199
- const handleTriggerFocus = useCallback(() => {
200
- if (isReturningFocus())
201
- return;
202
- open();
203
- }, [isReturningFocus, open]);
204
- const handleTriggerClick = useCallback(() => {
83
+ const handleOptionItemClick = (optionValue) => {
84
+ onOptionItemClick === null || onOptionItemClick === void 0 ? void 0 : onOptionItemClick(optionValue);
85
+ };
86
+ /**
87
+ * Handles click on the input field
88
+ */
89
+ const handleOnClick = () => {
205
90
  if (disabled)
206
91
  return;
207
92
  onClick === null || onClick === void 0 ? void 0 : onClick();
208
- if (wasOpenOnPointerDown.current) {
209
- close();
210
- return;
211
- }
212
- open();
213
- }, [disabled, onClick, open, close]);
214
- const handleSearchChange = useCallback((event) => {
215
- setHasTyped(true);
216
- setSearchQuery(event.target.value);
217
- onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
218
- }, [onChange]);
219
- const handleSearchClear = useCallback(() => {
220
- setHasTyped(true);
221
- setSearchQuery('');
222
- onChange === null || onChange === void 0 ? void 0 : onChange('');
223
- }, [onChange]);
93
+ };
224
94
  /**
225
- * Props shared by the desktop and the mobile search field. Both render the
226
- * same field, only placement and compact styling differ.
95
+ * Renders the "no results" message when no options match the search
96
+ *
97
+ * @returns A text component displaying the no results message
227
98
  */
228
- const searchInputProps = Object.assign({ ref: searchInputRef, name,
229
- // Multi select would show a comma separated list, which cannot be edited
230
- // sensibly - there the field starts empty.
231
- value: hasTyped || multiple ? searchQuery : displayValue, pattern: searchPattern, placeholder,
232
- inputMode,
233
- // The mobile sheet has no visible label, so the field needs a name of its own.
234
- 'aria-label': label, displayLeadingIcon: true, blurOnOutsideClick: false, onChange: handleSearchChange, onClear: handleSearchClear, onKeyDown }, comboboxAriaProps);
99
+ const NoResultsTextComponent = () => {
100
+ return (_jsx(Text, { variant: TextVariant.SUBHEADLINE, className: "combobox--no-results-text", children: noResultsText }));
101
+ };
235
102
  /**
236
- * The options block is built once and rendered either in the popover or in
237
- * the bottom sheet.
103
+ * Removes the placeholder text from the input field
238
104
  */
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 })));
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] }));
105
+ const removePlaceholder = () => {
106
+ setPlaceholder('');
107
+ };
108
+ return (_jsxs(ThemeProvider, { theme: theme, children: [showSelectField && (_jsx(SelectInput, { className: clsx(isOpen && 'active', className), name: name, label: label, value: value, placeholder: placeholder, onClick: handleOnClick, disableTrailingIconButton: true, leadingIcon: leadingIcon, disabled: disabled, loading: loading, readOnly: true })), isDesktop && isOpen && (_jsxs("div", { className: "combobox", ref: comboBoxRef, children: [withSearch && (_jsx(SearchInput, { name: name, value: searchQuery, pattern: searchPattern, label: label, onChange: handleChange, onClear: handleClearInput, displayLeadingIcon: isOpen, isCompact: true, inputMode: inputMode, autoFocus: true })), optionsSlot !== null && optionsSlot !== void 0 ? optionsSlot : (optionsExist ? (_jsx(ComboBoxOptions, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType })) : (_jsx(NoResultsTextComponent, {}))), _jsx("div", {})] })), !isDesktop && isOpen && (_jsxs(BottomSheet, { className: "combobox__bottom-sheet", open: isOpen, onClose: clearAndClose, ref: bottomSheetRef, children: [_jsxs("div", { className: "combobox--header", children: [_jsx(Text, { variant: TextVariant.HEADLINE, className: "combobox--headline", children: headline }), withSearch && (_jsx(SearchInput, { name: name, value: searchQuery, pattern: searchPattern, onChange: handleChange, onClear: handleClearInput, onFocus: removePlaceholder, placeholder: inputPlaceholder, isCompact: true, inputMode: inputMode, displayLeadingIcon: isOpen }))] }), _jsx("div", { className: "combobox__options", children: optionsSlot !== null && optionsSlot !== void 0 ? optionsSlot : (optionsExist ? (_jsx(ComboBoxOptions, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType, optionDetails: optionDetails })) : (_jsx(NoResultsTextComponent, {}))) })] }))] }));
248
109
  }
249
- export default ComboBox;
250
110
  //# sourceMappingURL=ComboBox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"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"}
@@ -1,3 +1 @@
1
1
  export * from './useIsDesktopScreenWidth';
2
- export * from './useComboBox';
3
- export * from './useComboBoxFocus';
@@ -1,4 +1,2 @@
1
1
  export * from './useIsDesktopScreenWidth';
2
- export * from './useComboBox';
3
- export * from './useComboBoxFocus';
4
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA"}
@@ -1,6 +1 @@
1
- /**
2
- * Custom hook that detects whether the viewport width is desktop size (>= 960px).
3
- *
4
- * @returns True if the viewport width is 960px or greater, false otherwise
5
- */
6
1
  export declare function useIsDesktopScreenWidth(): boolean;
@@ -1,46 +1,36 @@
1
- 'use client';
2
- import { useSyncExternalStore } from 'react';
3
- const DESKTOP_MEDIA_QUERY = '(min-width: 960px)';
1
+ import { useState, useEffect } from 'react';
4
2
  /**
5
- * Subscribes to the MediaQueryList. Using `change` instead of `resize` means
6
- * there is only one re-render when the breakpoint is actually crossed.
7
- *
8
- * @param onStoreChange - Callback invoked when the breakpoint match changes
9
- * @returns An unsubscribe function that removes the listener
10
- */
11
- function subscribe(onStoreChange) {
12
- if (typeof window === 'undefined' || !window.matchMedia) {
13
- return () => { };
14
- }
15
- const mediaQueryList = window.matchMedia(DESKTOP_MEDIA_QUERY);
16
- mediaQueryList.addEventListener('change', onStoreChange);
17
- return () => mediaQueryList.removeEventListener('change', onStoreChange);
18
- }
19
- /**
20
- * Client snapshot: the current match state of the desktop breakpoint.
3
+ * Custom hook that detects whether the viewport width is desktop size (>= 960px).
4
+ * Listens to window resize events to update the state dynamically.
21
5
  *
22
- * @returns True if the desktop breakpoint currently matches, false otherwise
6
+ * @returns True if the viewport width is 960px or greater, false otherwise
23
7
  */
24
- function getSnapshot() {
25
- if (typeof window === 'undefined' || !window.matchMedia)
26
- return false;
27
- return window.matchMedia(DESKTOP_MEDIA_QUERY).matches;
8
+ function isBrowser() {
9
+ return typeof window !== 'undefined';
28
10
  }
29
11
  /**
30
- * Server snapshot: deliberately `false` (mobile first), so that the server
31
- * render and the first client render match deterministically.
12
+ * Checks if the current viewport width is desktop size (>= 960px).
32
13
  *
33
- * @returns Always false
14
+ * @returns True if the viewport is desktop size, false otherwise or in non-browser environments
34
15
  */
35
- function getServerSnapshot() {
16
+ function isInitialScreenDesktop() {
17
+ if (isBrowser()) {
18
+ return window.innerWidth >= 960;
19
+ }
36
20
  return false;
37
21
  }
38
- /**
39
- * Custom hook that detects whether the viewport width is desktop size (>= 960px).
40
- *
41
- * @returns True if the viewport width is 960px or greater, false otherwise
42
- */
43
22
  export function useIsDesktopScreenWidth() {
44
- return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
23
+ const [isDesktop, setIsDesktop] = useState(isInitialScreenDesktop);
24
+ useEffect(() => {
25
+ const checkScreenSize = () => {
26
+ setIsDesktop(window.innerWidth >= 960);
27
+ };
28
+ checkScreenSize();
29
+ window.addEventListener('resize', checkScreenSize);
30
+ return () => {
31
+ window.removeEventListener('resize', checkScreenSize);
32
+ };
33
+ }, []);
34
+ return isDesktop;
45
35
  }
46
36
  //# sourceMappingURL=useIsDesktopScreenWidth.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useIsDesktopScreenWidth.js","sourceRoot":"","sources":["../../src/hooks/useIsDesktopScreenWidth.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,mBAAmB,GAAG,oBAAoB,CAAA;AAEhD;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,aAAyB;IAC1C,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;QACxD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAA;IAC7D,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;IAExD,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;AAC1E,CAAC;AAED;;;;GAIG;AACH,SAAS,WAAW;IAClB,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,UAAU;QAAE,OAAO,KAAK,CAAA;IAErE,OAAO,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAA;AACvD,CAAC;AAED;;;;;GAKG;AACH,SAAS,iBAAiB;IACxB,OAAO,KAAK,CAAA;AACd,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,uBAAuB;IACrC,OAAO,oBAAoB,CAAC,SAAS,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAA;AACxE,CAAC"}
1
+ {"version":3,"file":"useIsDesktopScreenWidth.js","sourceRoot":"","sources":["../../src/hooks/useIsDesktopScreenWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C;;;;;GAKG;AAEH,SAAS,SAAS;IAChB,OAAO,OAAO,MAAM,KAAK,WAAW,CAAA;AACtC,CAAC;AAED;;;;GAIG;AACH,SAAS,sBAAsB;IAC7B,IAAI,SAAS,EAAE,EAAE,CAAC;QAChB,OAAO,MAAM,CAAC,UAAU,IAAI,GAAG,CAAA;IACjC,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,sBAAsB,CAAC,CAAA;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,YAAY,CAAC,MAAM,CAAC,UAAU,IAAI,GAAG,CAAC,CAAA;QACxC,CAAC,CAAA;QAED,eAAe,EAAE,CAAA;QACjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;QAElD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;QACvD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,SAAS,CAAA;AAClB,CAAC"}
package/lib/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { ComboBox, default } from './ComboBox';
2
- export { ComboBoxOptionsSlot, type ComboBoxOptionsSlotProps } from './partials';
3
- export { useComboBox, useIsDesktopScreenWidth } from './hooks';
4
- export type { ComboBoxAriaProps, ComboBoxOption, ComboBoxOptionGroup, ComboBoxOptionItemProps, ComboBoxOptionsInput, ComboBoxOptionsProps, ComboBoxOptionsPanelProps, ComboBoxProps, ListboxAriaProps, } from './types';
1
+ import { ComboBox } from './ComboBox';
2
+ export default ComboBox;
3
+ export * from './types';
4
+ export { ComboBoxOptionsSlot } from './partials';
package/lib/index.js CHANGED
@@ -1,4 +1,5 @@
1
- export { ComboBox, default } from './ComboBox';
1
+ import { ComboBox } from './ComboBox';
2
+ export default ComboBox;
3
+ export * from './types';
2
4
  export { ComboBoxOptionsSlot } from './partials';
3
- export { useComboBox, useIsDesktopScreenWidth } from './hooks';
4
5
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAiC,MAAM,YAAY,CAAA;AAC/E,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,eAAe,QAAQ,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA"}
@@ -1,21 +1,10 @@
1
- import type { ComboBoxOptionsPanelProps } from '../types';
1
+ import type { ComboBoxOptionsProps } from '../types';
2
2
  /**
3
- * Renders the options panel of the ComboBox.
4
- *
5
- * The panel is split in two: the `Menu` provides the visible box, the element
6
- * inside it carries the `listbox` role and is the only part that scrolls. That
7
- * keeps `optionDetails` a real footer - it stays visible without
8
- * `position: sticky` and can no longer cover the active option - and it keeps
9
- * the listbox free of anything that is not an option or a group, as ARIA
10
- * requires.
11
- *
12
- * Flat and grouped options share one render path: the options arrive already
13
- * normalised, `groupOptions` only splits them into their visual groups again.
14
- * The listbox is not focusable - the focus stays in the input field, the active
15
- * option is announced through `aria-activedescendant`.
3
+ * ComboBoxOptions component that renders a list of options in a menu.
4
+ * Handles both grouped and ungrouped options and automatically scrolls to the selected option.
16
5
  *
17
6
  * @param props - The props for the ComboBoxOptions component
18
- * @returns The options panel
7
+ * @returns A menu containing the combobox options
19
8
  */
20
- export declare function ComboBoxOptions({ options, listboxAriaProps, selectedValues, activeOptionId, leadingType, optionDetails, onOptionClick, }: ComboBoxOptionsPanelProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function ComboBoxOptions({ options, onClick, selectedOption, leadingType, optionDetails, }: ComboBoxOptionsProps): import("react/jsx-runtime").JSX.Element;
21
10
  export default ComboBoxOptions;