@pixum/combobox 5.10.4-alpha.9 → 5.10.5

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 (68) 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/ComboboxOptions/Options.d.ts +1 -0
  5. package/lib/ComboboxOptions/Options.js +22 -17
  6. package/lib/ComboboxOptions/Options.js.map +1 -1
  7. package/lib/ComboboxOptions/OptionsGroup.d.ts +1 -0
  8. package/lib/ComboboxOptions/OptionsGroup.js +48 -7
  9. package/lib/ComboboxOptions/OptionsGroup.js.map +1 -1
  10. package/lib/ComboboxOptions/index.js +61 -16
  11. package/lib/ComboboxOptions/index.js.map +1 -1
  12. package/lib/helper/calculateListMaxHeight.js +9 -5
  13. package/lib/helper/calculateListMaxHeight.js.map +1 -1
  14. package/lib/helper/index.d.ts +2 -0
  15. package/lib/helper/index.js +3 -0
  16. package/lib/helper/index.js.map +1 -0
  17. package/lib/helper/scrollOptionToViewport.js +12 -9
  18. package/lib/helper/scrollOptionToViewport.js.map +1 -1
  19. package/lib/helper/useIsDesktopScreenWidth.js +11 -9
  20. package/lib/helper/useIsDesktopScreenWidth.js.map +1 -1
  21. package/lib/hooks/index.d.ts +0 -2
  22. package/lib/hooks/index.js +0 -2
  23. package/lib/hooks/index.js.map +1 -1
  24. package/lib/hooks/useIsDesktopScreenWidth.d.ts +0 -5
  25. package/lib/hooks/useIsDesktopScreenWidth.js +24 -34
  26. package/lib/hooks/useIsDesktopScreenWidth.js.map +1 -1
  27. package/lib/index.d.ts +4 -4
  28. package/lib/index.js +3 -2
  29. package/lib/index.js.map +1 -1
  30. package/lib/partials/ComboBoxGroupedOptions.d.ts +13 -0
  31. package/lib/partials/ComboBoxGroupedOptions.js +10 -0
  32. package/lib/partials/ComboBoxGroupedOptions.js.map +1 -0
  33. package/lib/partials/ComboBoxMenu.d.ts +3 -0
  34. package/lib/partials/ComboBoxMenu.js +22 -0
  35. package/lib/partials/ComboBoxMenu.js.map +1 -0
  36. package/lib/partials/ComboBoxOptions.d.ts +5 -16
  37. package/lib/partials/ComboBoxOptions.js +21 -25
  38. package/lib/partials/ComboBoxOptions.js.map +1 -1
  39. package/lib/partials/ComboBoxOptionsItems.d.ts +17 -32
  40. package/lib/partials/ComboBoxOptionsItems.js +14 -46
  41. package/lib/partials/ComboBoxOptionsItems.js.map +1 -1
  42. package/lib/partials/ComboBoxOptionsSlot.d.ts +16 -17
  43. package/lib/partials/ComboBoxOptionsSlot.js +11 -26
  44. package/lib/partials/ComboBoxOptionsSlot.js.map +1 -1
  45. package/lib/partials/index.d.ts +1 -2
  46. package/lib/partials/index.js +1 -2
  47. package/lib/partials/index.js.map +1 -1
  48. package/lib/types.d.ts +45 -183
  49. package/lib/utils/index.d.ts +2 -1
  50. package/lib/utils/index.js +2 -1
  51. package/lib/utils/index.js.map +1 -1
  52. package/package.json +8 -8
  53. package/lib/ComboBox.module.css +0 -1
  54. package/lib/hooks/useComboBox.d.ts +0 -60
  55. package/lib/hooks/useComboBox.js +0 -226
  56. package/lib/hooks/useComboBox.js.map +0 -1
  57. package/lib/hooks/useComboBoxFocus.d.ts +0 -35
  58. package/lib/hooks/useComboBoxFocus.js +0 -49
  59. package/lib/hooks/useComboBoxFocus.js.map +0 -1
  60. package/lib/partials/ComboBoxNoResults.d.ts +0 -14
  61. package/lib/partials/ComboBoxNoResults.js +0 -18
  62. package/lib/partials/ComboBoxNoResults.js.map +0 -1
  63. package/lib/partials/ComboBoxOptionsGroup.d.ts +0 -15
  64. package/lib/partials/ComboBoxOptionsGroup.js +0 -31
  65. package/lib/partials/ComboBoxOptionsGroup.js.map +0 -1
  66. package/lib/utils/options.d.ts +0 -77
  67. package/lib/utils/options.js +0 -145
  68. 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":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAIL,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,cAAc,CAAA;AAErB;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,aAAa,GAAG,EAAE,EAClB,MAAM,EACN,OAAO,EACP,WAAW,EACX,KAAK,EACL,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,UAAU,GAAG,IAAI,EACjB,KAAK,GAAG,aAAa,EACrB,WAAW,EACX,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,YAAY,GACE;IACd,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAChD,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,gBAAgB,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAEhE,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAA;IAE3C,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;IACpD,MAAM,eAAe,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAA;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,MAAM,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAA,CAAA;IAC7B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ;;;;OAIG;IACH,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;QAEvC,cAAc,CAAC,WAAW,CAAC,CAAA;QAC3B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,WAAW,CAAC,CAAA;IACzB,CAAC,CAAA;IAED;;OAEG;IACH,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,cAAc,CAAC,EAAE,CAAC,CAAA;IACpB,CAAC,CAAA;IAED;;OAEG;IACH,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,cAAc,CAAC,EAAE,CAAC,CAAA;QAClB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,iBAAiB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IAExC,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,MAAM;YAAE,OAAM;QAEjC,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;;YAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAc,CAAA;YACjC,MAAM,SAAS,GAAG,CAAC,CAAA,MAAA,WAAW,CAAC,OAAO,0CAAE,QAAQ,CAAC,IAAI,CAAC,CAAA,CAAA;YAEtD,IAAI,SAAS,EAAE,CAAC;gBACd,aAAa,EAAE,CAAA;gBACf,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAA;YACpB,CAAC;QACH,CAAC,CAAA;QAED,wEAAwE;QACxE,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAA;QAC7D,CAAC,EAAE,GAAG,CAAC,CAAA;QAEP,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,SAAS,CAAC,CAAA;YACvB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAA;QAChE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAA;IAEvC;;;;OAIG;IACH,MAAM,qBAAqB,GAAG,CAAC,WAAmB,EAAE,EAAE;QACpD,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,WAAW,CAAC,CAAA;IAClC,CAAC,CAAA;IAED;;OAEG;IACH,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAM;QACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;IACb,CAAC,CAAA;IAED;;;;OAIG;IACH,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,WAAW,EAChC,SAAS,EAAC,2BAA2B,YAEpC,aAAa,GACT,CACR,CAAA;IACH,CAAC,CAAA;IAED;;OAEG;IACH,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,cAAc,CAAC,EAAE,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,CACL,MAAC,aAAa,IAAC,KAAK,EAAE,KAAK,aACxB,eAAe,IAAI,CAClB,KAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,SAAS,CAAC,EAC9C,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,aAAa,EACtB,yBAAyB,QACzB,WAAW,EAAE,WAAwC,EACrD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,SACR,CACH,EACA,SAAS,IAAI,MAAM,IAAI,CACtB,eAAK,SAAS,EAAC,UAAU,EAAC,GAAG,EAAE,WAAW,aACvC,UAAU,IAAI,CACb,KAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,gBAAgB,EACzB,kBAAkB,EAAE,MAAM,EAC1B,SAAS,QACT,SAAS,EAAE,SAAS,EACpB,SAAS,SACT,CACH,EACA,WAAW,aAAX,WAAW,cAAX,WAAW,GACV,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,EAC9B,cAAc,EAAE,KAAK,EACrB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,KAAG,CAC3B,CAAC,EACJ,eAAO,IACH,CACP,EACA,CAAC,SAAS,IAAI,MAAM,IAAI,CACvB,MAAC,WAAW,IACV,SAAS,EAAC,wBAAwB,EAClC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,aAAa,EACtB,GAAG,EAAE,cAAc,aAEnB,eAAK,SAAS,EAAC,kBAAkB,aAC/B,KAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,EAAC,oBAAoB,YAChE,QAAQ,GACJ,EACN,UAAU,IAAI,CACb,KAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW,EAAE,gBAAgB,EAC7B,SAAS,QACT,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,MAAM,GAC1B,CACH,IACG,EACN,cAAK,SAAS,EAAC,mBAAmB,YAC/B,WAAW,aAAX,WAAW,cAAX,WAAW,GACV,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,EAC9B,cAAc,EAAE,KAAK,EACrB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,KAAG,CAC3B,CAAC,GACA,IACM,CACf,IACa,CACjB,CAAA;AACH,CAAC"}
@@ -5,6 +5,7 @@ interface OptionsProps {
5
5
  items: ComboBoxOptionProps[];
6
6
  selectedOption?: string;
7
7
  onClick?: (value: string) => void;
8
+ onKeyDown: (e: React.KeyboardEvent, value: string) => void;
8
9
  leadingType?: LeadingType;
9
10
  }
10
11
  declare const Options: React.FC<OptionsProps>;
@@ -1,19 +1,24 @@
1
- import MenuItem from '@pixum/menu-item';
2
- import clsx from 'clsx';
3
- import React from 'react';
4
- const Options = ({ items, selectedOption, onClick, leadingType, }) => (React.createElement(React.Fragment, null, items.map((item) => {
5
- var _a;
6
- const itemText = item.text;
7
- const isSelected = selectedOption === ((item === null || item === void 0 ? void 0 : item.label) || itemText);
8
- return (React.createElement("div", { key: `combobox-item-wrapper-${itemText}`, className: "combobox__option-wrapper", role: "button", tabIndex: 0, onPointerDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onClickCapture: (e) => {
9
- e.stopPropagation();
10
- onClick === null || onClick === void 0 ? void 0 : onClick(itemText);
11
- } },
12
- React.createElement(MenuItem, { tabIndex: -1, className: clsx(isSelected && 'selected'), onMouseEnter: item.onMouseEnter, leadingProps: leadingType
13
- ? { name: itemText, type: leadingType }
14
- : undefined, selected: selectedOption === itemText, text: itemText, subtext: item.subtext, subItemProps: {
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var menu_item_1 = __importDefault(require("@pixum/menu-item"));
7
+ var clsx_1 = __importDefault(require("clsx"));
8
+ var react_1 = __importDefault(require("react"));
9
+ var Options = function (_a) {
10
+ var items = _a.items, selectedOption = _a.selectedOption, onClick = _a.onClick, onKeyDown = _a.onKeyDown, leadingType = _a.leadingType;
11
+ return (react_1.default.createElement(react_1.default.Fragment, null, items.map(function (item, index) {
12
+ var _a;
13
+ return (react_1.default.createElement(menu_item_1.default, { key: "combobox-item-".concat(item.text), tabIndex: index, className: (0, clsx_1.default)(selectedOption === item.text && 'selected'), onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(item.text); }, onKeyDown: function (e) { return onKeyDown(e, item.text); }, onMouseEnter: item.onMouseEnter, leadingProps: leadingType
14
+ ? {
15
+ name: item.text,
16
+ type: leadingType,
17
+ }
18
+ : undefined, selected: selectedOption === item.text, text: item.text, subtext: item.subtext, subItemProps: {
15
19
  text: (_a = item.subItemProps) === null || _a === void 0 ? void 0 : _a.text,
16
- } })));
17
- })));
18
- export default Options;
20
+ } }));
21
+ })));
22
+ };
23
+ exports.default = Options;
19
24
  //# sourceMappingURL=Options.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Options.js","sourceRoot":"","sources":["../../src/ComboboxOptions/Options.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAwC,MAAM,kBAAkB,CAAA;AACvE,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,OAAO,GAA2B,CAAC,EACvC,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACZ,EAAE,EAAE,CAAC,CACJ,0CACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAmB,EAAE,EAAE;;IACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAA;IAC1B,MAAM,UAAU,GAAG,cAAc,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,QAAQ,CAAC,CAAA;IAE/D,OAAO,CACL,6BACE,GAAG,EAAE,yBAAyB,QAAQ,EAAE,EACxC,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACzC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACxC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;YACpB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,QAAQ,CAAC,CAAA;QACrB,CAAC;QAED,oBAAC,QAAQ,IACP,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,EACzC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EACV,WAAW;gBACT,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE;gBACvC,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,cAAc,KAAK,QAAQ,EACrC,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE;gBACZ,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;aAC9B,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CACD,CACJ,CAAA;AAED,eAAe,OAAO,CAAA"}
1
+ {"version":3,"file":"Options.js","sourceRoot":"","sources":["../../src/ComboboxOptions/Options.tsx"],"names":[],"mappings":";;;;;AAAA,+DAAuE;AACvE,8CAAuB;AACvB,gDAAyB;AAWzB,IAAM,OAAO,GAA2B,UAAC,EAMxC;QALC,KAAK,WAAA,EACL,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA;IACP,OAAA,CACJ,8DACG,KAAK,CAAC,GAAG,CAAC,UAAC,IAAmB,EAAE,KAAa;;QAAK,OAAA,CACjD,8BAAC,mBAAQ,IACP,GAAG,EAAE,wBAAiB,IAAI,CAAC,IAAI,CAAE,EACjC,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,KAAK,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,EAC3D,OAAO,EAAE,cAAM,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,CAAC,EAApB,CAAoB,EACnC,SAAS,EAAE,UAAA,CAAC,IAAI,OAAA,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,EAAvB,CAAuB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EACV,WAAW;gBACT,CAAC,CAAC;oBACE,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,IAAI,EAAE,WAAW;iBAClB;gBACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC,IAAI,EACtC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE;gBACZ,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;aAC9B,GACD,CACH,CAAA;KAAA,CAAC,CACD,CACJ;AA3BK,CA2BL,CAAA;AAED,kBAAe,OAAO,CAAA"}
@@ -6,6 +6,7 @@ interface OptionsGroupProps {
6
6
  items: ComboBoxOptionProps[];
7
7
  selectedOption?: string;
8
8
  onClick?: (value: string) => void;
9
+ onKeyDown: (e: React.KeyboardEvent, value: string) => void;
9
10
  leadingType?: LeadingType;
10
11
  }
11
12
  declare const OptionsGroup: React.FC<OptionsGroupProps>;
@@ -1,8 +1,49 @@
1
- import Text, { TextVariant } from '@pixum/text';
2
- import React from 'react';
3
- import Options from './Options';
4
- const OptionsGroup = ({ group, items, selectedOption, onClick, leadingType, }) => (React.createElement("div", { className: "combobox__options-group", key: `combobox__options-group-${group}` },
5
- React.createElement(Text, { variant: TextVariant.HEADLINE, className: "combobox__sticky-header" }, group),
6
- React.createElement(Options, { items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })));
7
- export default OptionsGroup;
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ var __importDefault = (this && this.__importDefault) || function (mod) {
36
+ return (mod && mod.__esModule) ? mod : { "default": mod };
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ var text_1 = __importStar(require("@pixum/text"));
40
+ var react_1 = __importDefault(require("react"));
41
+ var Options_1 = __importDefault(require("./Options"));
42
+ var OptionsGroup = function (_a) {
43
+ var group = _a.group, items = _a.items, selectedOption = _a.selectedOption, onClick = _a.onClick, onKeyDown = _a.onKeyDown, leadingType = _a.leadingType;
44
+ return (react_1.default.createElement("div", { className: "combobox__options-group", key: "combobox__options-group-".concat(group) },
45
+ react_1.default.createElement(text_1.default, { variant: text_1.TextVariant.HEADLINE, className: "combobox__sticky-header" }, group),
46
+ react_1.default.createElement(Options_1.default, { items: items, selectedOption: selectedOption, onClick: onClick, onKeyDown: onKeyDown, leadingType: leadingType })));
47
+ };
48
+ exports.default = OptionsGroup;
8
49
  //# sourceMappingURL=OptionsGroup.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"OptionsGroup.js","sourceRoot":"","sources":["../../src/ComboboxOptions/OptionsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,OAAO,MAAM,WAAW,CAAA;AAW/B,MAAM,YAAY,GAAgC,CAAC,EACjD,KAAK,EACL,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACZ,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,2BAA2B,KAAK,EAAE;IAEvC,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,EAAC,yBAAyB,IACrE,KAAK,CACD;IACP,oBAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACE,CACP,CAAA;AAED,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"OptionsGroup.js","sourceRoot":"","sources":["../../src/ComboboxOptions/OptionsGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAA+C;AAC/C,gDAAyB;AACzB,sDAA+B;AAY/B,IAAM,YAAY,GAAgC,UAAC,EAOlD;QANC,KAAK,WAAA,EACL,KAAK,WAAA,EACL,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA;IACP,OAAA,CACJ,uCACE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,kCAA2B,KAAK,CAAE;QAEvC,8BAAC,cAAI,IAAC,OAAO,EAAE,kBAAW,CAAC,QAAQ,EAAE,SAAS,EAAC,yBAAyB,IACrE,KAAK,CACD;QACP,8BAAC,iBAAO,IACN,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,GACxB,CACE,CACP;AAhBK,CAgBL,CAAA;AAED,kBAAe,YAAY,CAAA"}