@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.
- package/lib/ComboBox.d.ts +6 -32
- package/lib/ComboBox.js +77 -217
- package/lib/ComboBox.js.map +1 -1
- package/lib/hooks/index.d.ts +0 -2
- package/lib/hooks/index.js +0 -2
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useIsDesktopScreenWidth.d.ts +0 -5
- package/lib/hooks/useIsDesktopScreenWidth.js +24 -34
- package/lib/hooks/useIsDesktopScreenWidth.js.map +1 -1
- package/lib/index.d.ts +4 -4
- package/lib/index.js +3 -2
- package/lib/index.js.map +1 -1
- package/lib/partials/ComboBoxOptions.d.ts +5 -16
- package/lib/partials/ComboBoxOptions.js +21 -25
- package/lib/partials/ComboBoxOptions.js.map +1 -1
- package/lib/partials/ComboBoxOptionsItems.d.ts +17 -32
- package/lib/partials/ComboBoxOptionsItems.js +14 -46
- package/lib/partials/ComboBoxOptionsItems.js.map +1 -1
- package/lib/partials/ComboBoxOptionsSlot.d.ts +16 -17
- package/lib/partials/ComboBoxOptionsSlot.js +11 -26
- package/lib/partials/ComboBoxOptionsSlot.js.map +1 -1
- package/lib/partials/index.d.ts +1 -2
- package/lib/partials/index.js +1 -2
- package/lib/partials/index.js.map +1 -1
- package/lib/types.d.ts +45 -183
- package/lib/utils/index.d.ts +2 -1
- package/lib/utils/index.js +2 -1
- package/lib/utils/index.js.map +1 -1
- package/package.json +8 -8
- package/lib/ComboBox.module.css +0 -1
- package/lib/hooks/useComboBox.d.ts +0 -60
- package/lib/hooks/useComboBox.js +0 -226
- package/lib/hooks/useComboBox.js.map +0 -1
- package/lib/hooks/useComboBoxFocus.d.ts +0 -35
- package/lib/hooks/useComboBoxFocus.js +0 -49
- package/lib/hooks/useComboBoxFocus.js.map +0 -1
- package/lib/partials/ComboBoxNoResults.d.ts +0 -14
- package/lib/partials/ComboBoxNoResults.js +0 -18
- package/lib/partials/ComboBoxNoResults.js.map +0 -1
- package/lib/partials/ComboBoxOptionsGroup.d.ts +0 -15
- package/lib/partials/ComboBoxOptionsGroup.js +0 -31
- package/lib/partials/ComboBoxOptionsGroup.js.map +0 -1
- package/lib/utils/options.d.ts +0 -77
- package/lib/utils/options.js +0 -145
- 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
|
-
*
|
|
4
|
-
*
|
|
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
|
|
9
|
+
* @returns A responsive combobox component with search and selection capabilities
|
|
35
10
|
*/
|
|
36
|
-
export declare function ComboBox({ className, name,
|
|
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 {
|
|
3
|
-
import {
|
|
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, {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
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 {
|
|
10
|
-
import
|
|
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
|
-
*
|
|
15
|
-
*
|
|
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
|
|
19
|
+
* @returns A responsive combobox component with search and selection capabilities
|
|
46
20
|
*/
|
|
47
|
-
export function ComboBox({ className = '', name,
|
|
48
|
-
const
|
|
49
|
-
const
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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
|
-
*
|
|
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
|
|
97
|
-
|
|
98
|
-
|
|
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
|
-
*
|
|
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
|
|
51
|
+
const clearAndClose = () => {
|
|
117
52
|
setSearchQuery('');
|
|
118
|
-
setHasTyped(false);
|
|
119
|
-
onChange === null || onChange === void 0 ? void 0 : onChange('');
|
|
120
53
|
setIsOpen(false);
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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
|
|
60
|
+
const handleDocumentClick = (event) => {
|
|
185
61
|
var _a;
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
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
|
-
|
|
193
|
-
|
|
194
|
-
|
|
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
|
-
*
|
|
197
|
-
*
|
|
79
|
+
* Handles click on an option item
|
|
80
|
+
*
|
|
81
|
+
* @param optionValue - The value of the clicked option
|
|
198
82
|
*/
|
|
199
|
-
const
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
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
|
-
|
|
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
|
-
*
|
|
226
|
-
*
|
|
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
|
|
229
|
-
|
|
230
|
-
|
|
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
|
-
*
|
|
237
|
-
* the bottom sheet.
|
|
103
|
+
* Removes the placeholder text from the input field
|
|
238
104
|
*/
|
|
239
|
-
const
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
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
|
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":"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"}
|
package/lib/hooks/index.d.ts
CHANGED
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA"}
|
|
@@ -1,46 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
import { useSyncExternalStore } from 'react';
|
|
3
|
-
const DESKTOP_MEDIA_QUERY = '(min-width: 960px)';
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
4
2
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
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
|
|
6
|
+
* @returns True if the viewport width is 960px or greater, false otherwise
|
|
23
7
|
*/
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
return false;
|
|
27
|
-
return window.matchMedia(DESKTOP_MEDIA_QUERY).matches;
|
|
8
|
+
function isBrowser() {
|
|
9
|
+
return typeof window !== 'undefined';
|
|
28
10
|
}
|
|
29
11
|
/**
|
|
30
|
-
*
|
|
31
|
-
* render and the first client render match deterministically.
|
|
12
|
+
* Checks if the current viewport width is desktop size (>= 960px).
|
|
32
13
|
*
|
|
33
|
-
* @returns
|
|
14
|
+
* @returns True if the viewport is desktop size, false otherwise or in non-browser environments
|
|
34
15
|
*/
|
|
35
|
-
function
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
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
|
-
|
|
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,
|
|
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 {
|
|
1
|
+
import type { ComboBoxOptionsProps } from '../types';
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
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
|
|
7
|
+
* @returns A menu containing the combobox options
|
|
19
8
|
*/
|
|
20
|
-
export declare function ComboBoxOptions({ options,
|
|
9
|
+
export declare function ComboBoxOptions({ options, onClick, selectedOption, leadingType, optionDetails, }: ComboBoxOptionsProps): import("react/jsx-runtime").JSX.Element;
|
|
21
10
|
export default ComboBoxOptions;
|