@pixum/combobox 5.13.3-alpha.4 → 5.13.3
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 +1 -1
- package/lib/ComboBox.js +2 -2
- package/lib/ComboBox.js.map +1 -1
- package/lib/ComboBox.test.d.ts +1 -0
- package/lib/ComboBox.test.js +33 -0
- package/lib/ComboBox.test.js.map +1 -0
- package/lib/partials/ComboBoxOptionsWithGrouping.d.ts +26 -0
- package/lib/partials/ComboBoxOptionsWithGrouping.js +14 -0
- package/lib/partials/ComboBoxOptionsWithGrouping.js.map +1 -0
- package/lib/styles.css +1 -0
- package/lib/types.d.ts +0 -2
- package/lib/utils/calculateListMaxHeight.d.ts +7 -0
- package/lib/utils/calculateListMaxHeight.js +14 -0
- package/lib/utils/calculateListMaxHeight.js.map +1 -0
- package/lib/utils/scrollOptionToViewport.d.ts +7 -0
- package/lib/utils/scrollOptionToViewport.js +26 -0
- package/lib/utils/scrollOptionToViewport.js.map +1 -0
- package/package.json +2 -2
package/lib/ComboBox.d.ts
CHANGED
|
@@ -33,5 +33,5 @@ import type { ComboBoxProps } from './types';
|
|
|
33
33
|
* @param props - The props for the ComboBox component
|
|
34
34
|
* @returns A responsive, accessible combobox
|
|
35
35
|
*/
|
|
36
|
-
export declare function ComboBox({ className, name, id, helperText,
|
|
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.Element;
|
|
37
37
|
export default ComboBox;
|
package/lib/ComboBox.js
CHANGED
|
@@ -44,7 +44,7 @@ import styles from './ComboBox.module.css';
|
|
|
44
44
|
* @param props - The props for the ComboBox component
|
|
45
45
|
* @returns A responsive, accessible combobox
|
|
46
46
|
*/
|
|
47
|
-
export function ComboBox({ className = '', name, id, helperText,
|
|
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
48
|
const listboxId = useId();
|
|
49
49
|
const rootRef = useRef(null);
|
|
50
50
|
const isDesktop = useIsDesktopScreenWidth();
|
|
@@ -237,7 +237,7 @@ export function ComboBox({ className = '', name, id, helperText, hasError, headl
|
|
|
237
237
|
* the bottom sheet.
|
|
238
238
|
*/
|
|
239
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: isDesktop ? undefined : optionDetails, onOptionClick: handleSelect })) : (_jsx(ComboBoxNoResults, { text: noResultsText })));
|
|
240
|
-
const comboBoxElement = (_jsxs("div", { className: clsx(styles.comboBox, 'combobox'), ref: rootRef, onMouseDownCapture: handleRootPointerDown, children: [showTrigger && (_jsx(SelectInput, Object.assign({ ref: triggerRef, className: clsx(isOpen && 'active', className), name: name, inputInfo: helperText,
|
|
240
|
+
const comboBoxElement = (_jsxs("div", { className: clsx(styles.comboBox, '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
241
|
// The focus has to stay in the field, even when clicking next to it.
|
|
242
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
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] }));
|
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,EACL,cAAc,EACd,WAAW,EACX,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,aAAa,MAAM,uBAAuB,CAAA;AACjD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAChF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACxE,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,EAAE,EACF,UAAU,EACV,QAAQ,EACR,
|
|
1
|
+
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/// <reference types="@testing-library/jest-dom" />
|
|
3
|
+
import { fireEvent, render } from '@testing-library/react';
|
|
4
|
+
import { ComboBox } from './ComboBox';
|
|
5
|
+
// jsdom sets window.innerWidth to 0, so useIsDesktopScreenWidth returns false.
|
|
6
|
+
// When !isDesktop, showSelectField is always true — SelectInput always renders.
|
|
7
|
+
const baseProps = {
|
|
8
|
+
isOpen: false,
|
|
9
|
+
setIsOpen: jest.fn(),
|
|
10
|
+
options: [],
|
|
11
|
+
label: 'Test',
|
|
12
|
+
};
|
|
13
|
+
describe('ComboBox disabled', () => {
|
|
14
|
+
it('does not fire onClick when disabled', () => {
|
|
15
|
+
const onClick = jest.fn();
|
|
16
|
+
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { disabled: true, onClick: onClick })));
|
|
17
|
+
fireEvent.click(container.querySelector('.input-inner-container'));
|
|
18
|
+
expect(onClick).not.toHaveBeenCalled();
|
|
19
|
+
});
|
|
20
|
+
it('passes disabled to the trigger input', () => {
|
|
21
|
+
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { disabled: true, value: "some option" })));
|
|
22
|
+
expect(container.querySelector('input')).toBeDisabled();
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
describe('ComboBox enabled', () => {
|
|
26
|
+
it('fires onClick when not disabled', () => {
|
|
27
|
+
const onClick = jest.fn();
|
|
28
|
+
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { onClick: onClick })));
|
|
29
|
+
fireEvent.click(container.querySelector('.input-inner-container'));
|
|
30
|
+
expect(onClick).toHaveBeenCalledTimes(1);
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
//# sourceMappingURL=ComboBox.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBox.test.js","sourceRoot":"","sources":["../src/ComboBox.test.tsx"],"names":[],"mappings":";AAAA,mDAAmD;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,+EAA+E;AAC/E,gFAAgF;AAEhF,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;IACpB,OAAO,EAAE,EAA+B;IACxC,KAAK,EAAE,MAAM;CACd,CAAA;AAED,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;QACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,QAAQ,QAAC,OAAO,EAAE,OAAO,IAAI,CACvD,CAAA;QACD,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC,CAAA;QACnE,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,QAAQ,QAAC,KAAK,EAAC,aAAa,IAAG,CACzD,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,CAAA;IACzD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;QACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,OAAO,EAAE,OAAO,IAAI,CAC9C,CAAA;QACD,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC,CAAA;QACnE,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { LeadingType } from '@pixum/menu-item';
|
|
2
|
+
import type { ComboBoxOptionItemProps } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the ComboBoxOptionsWithGrouping component
|
|
5
|
+
*/
|
|
6
|
+
interface ComboBoxOptionsWithGroupingProps {
|
|
7
|
+
/** Group name/header text */
|
|
8
|
+
group: string;
|
|
9
|
+
/** Array of option items in this group */
|
|
10
|
+
items: ComboBoxOptionItemProps[];
|
|
11
|
+
/** Currently selected option value */
|
|
12
|
+
selectedOption?: string;
|
|
13
|
+
/** Callback fired when an option is clicked */
|
|
14
|
+
onClick?: (value: string) => void;
|
|
15
|
+
/** Type of leading element to display (icon, avatar, etc.) */
|
|
16
|
+
leadingType?: LeadingType;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* ComboBoxOptionsWithGrouping component that renders a group of options with a header.
|
|
20
|
+
* Used to display categorized/grouped options in the combobox.
|
|
21
|
+
*
|
|
22
|
+
* @param props - The props for the ComboBoxOptionsWithGrouping component
|
|
23
|
+
* @returns A group container with a sticky header and option items
|
|
24
|
+
*/
|
|
25
|
+
export declare function ComboxBoxOptionsWithGrouping({ group, items, selectedOption, onClick, leadingType, }: ComboBoxOptionsWithGroupingProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import Text, { TextVariant } from '@pixum/text';
|
|
3
|
+
import { ComboBoxOptionsItems } from './ComboBoxOptionsItems';
|
|
4
|
+
/**
|
|
5
|
+
* ComboBoxOptionsWithGrouping component that renders a group of options with a header.
|
|
6
|
+
* Used to display categorized/grouped options in the combobox.
|
|
7
|
+
*
|
|
8
|
+
* @param props - The props for the ComboBoxOptionsWithGrouping component
|
|
9
|
+
* @returns A group container with a sticky header and option items
|
|
10
|
+
*/
|
|
11
|
+
export function ComboxBoxOptionsWithGrouping({ group, items, selectedOption, onClick, leadingType, }) {
|
|
12
|
+
return (_jsxs("div", { className: "combobox__options-group", children: [group && (_jsx(Text, { variant: TextVariant.HEADLINE, className: "combobox__sticky-header", children: group })), _jsx(ComboBoxOptionsItems, { items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })] }, `combobox__options-group-${group}`));
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=ComboBoxOptionsWithGrouping.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBoxOptionsWithGrouping.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptionsWithGrouping.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAkB7D;;;;;;GAMG;AACH,MAAM,UAAU,4BAA4B,CAAC,EAC3C,KAAK,EACL,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACsB;IACjC,OAAO,CACL,eACE,SAAS,EAAC,yBAAyB,aAGlC,KAAK,IAAI,CACR,KAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,QAAQ,EAC7B,SAAS,EAAC,yBAAyB,YAElC,KAAK,GACD,CACR,EACD,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,KAfG,2BAA2B,KAAK,EAAE,CAgBnC,CACP,CAAA;AACH,CAAC"}
|
package/lib/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.combobox{position:relative;width:100%}.combobox .combobox--headline[class*=text--]+*{margin-top:var(--spacing)}.combobox .combobox--header,.combobox .combobox__options,.combobox .combobox__options-slot,.combobox__bottom-sheet .combobox__options,.combobox__bottom-sheet .combobox__options-slot{position:relative}.combobox__bottom-sheet .combobox--header{align-items:flex-start;height:auto;margin:var(--spacing-5) auto var(--spacing-2);padding:0 var(--spacing-2);width:100%}.combobox .combobox__options,.combobox .combobox__options-slot,.combobox__bottom-sheet .combobox__options,.combobox__bottom-sheet .combobox__options-slot{display:flex;flex-direction:column;max-height:none;overflow:scroll;width:100%}.combobox__bottom-sheet ul.combobox__options-slot{margin:0;padding:0}.combobox .combobox__option-wrapper,.combobox__bottom-sheet .combobox__option-wrapper{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;user-select:none}.combobox .combobox__options .combobox__sticky-header,.combobox__bottom-sheet .combobox__options .combobox__sticky-header{background-color:var(--color-surface);border-bottom:1px solid var(--color-dim);padding:var(--spacing-1_25) var(--spacing-2);position:-webkit-sticky;position:sticky;top:0}.combobox__options .text--caption{color:var(--color-on-secondary)}.combobox .combobox__options .item-header,.combobox__bottom-sheet .combobox__options .item-header{display:flex;justify-content:space-between}.combobox .combobox__options .combobox__option-details,.combobox__bottom-sheet .combobox__options .combobox__option-details{background-color:var(--color-surface);bottom:0;padding-left:var(--spacing);padding-right:var(--spacing);position:-webkit-sticky;position:sticky}.combobox .combobox--no-results-text,.combobox__bottom-sheet .combobox--no-results-text{padding:var(--spacing-2) var(--spacing);text-align:center}@media screen and (min-width:960px){.combobox .combobox__options,.combobox .combobox__options-slot{border-radius:12px;margin-top:var(--spacing);max-height:330px;overflow:auto;position:absolute}}.combobox ul.combobox__options-slot{list-style:none;padding:0}.combobox .combobox__options-slot{margin-top:var(--spacing)}
|
package/lib/types.d.ts
CHANGED
|
@@ -148,8 +148,6 @@ export interface ComboBoxProps extends ComboBoxOptionsProps {
|
|
|
148
148
|
headline?: string;
|
|
149
149
|
/** Helper text displayed below the input field. */
|
|
150
150
|
helperText?: string;
|
|
151
|
-
/** Whether the input is in an error state (red border, red label, red helper text). */
|
|
152
|
-
hasError?: boolean;
|
|
153
151
|
/** Label text for the input field. */
|
|
154
152
|
label?: string;
|
|
155
153
|
/** Options to display, either flat or grouped. */
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calculates the maximum height for the options list based on viewport height.
|
|
3
|
+
* Subtracts the header and input field heights from the window height.
|
|
4
|
+
*
|
|
5
|
+
* @returns The maximum height in pixels for the options list
|
|
6
|
+
*/
|
|
7
|
+
export declare function calculateListMaxHeight(): number;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calculates the maximum height for the options list based on viewport height.
|
|
3
|
+
* Subtracts the header and input field heights from the window height.
|
|
4
|
+
*
|
|
5
|
+
* @returns The maximum height in pixels for the options list
|
|
6
|
+
*/
|
|
7
|
+
export function calculateListMaxHeight() {
|
|
8
|
+
const windowHeight = window.innerHeight;
|
|
9
|
+
const headerHeight = 50;
|
|
10
|
+
const inputFieldHeight = 35;
|
|
11
|
+
const maxListHeight = windowHeight - headerHeight - inputFieldHeight;
|
|
12
|
+
return maxListHeight;
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=calculateListMaxHeight.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculateListMaxHeight.js","sourceRoot":"","sources":["../../src/utils/calculateListMaxHeight.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB;IAClC,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAA;IACvC,MAAM,YAAY,GAAG,EAAE,CAAA;IACvB,MAAM,gBAAgB,GAAG,EAAE,CAAA;IAC3B,MAAM,aAAa,GAAG,YAAY,GAAG,YAAY,GAAG,gBAAgB,CAAA;IAErE,OAAO,aAAa,CAAA;AACvB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scrolls the selected option into view within the options container.
|
|
3
|
+
* Handles both desktop dropdown and mobile bottom sheet layouts.
|
|
4
|
+
*
|
|
5
|
+
* @param isDesktop - Whether the viewport is desktop size
|
|
6
|
+
*/
|
|
7
|
+
export declare function scrollOptionToViewport(isDesktop: boolean): void;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scrolls the selected option into view within the options container.
|
|
3
|
+
* Handles both desktop dropdown and mobile bottom sheet layouts.
|
|
4
|
+
*
|
|
5
|
+
* @param isDesktop - Whether the viewport is desktop size
|
|
6
|
+
*/
|
|
7
|
+
export function scrollOptionToViewport(isDesktop) {
|
|
8
|
+
const comboboxOptions = isDesktop
|
|
9
|
+
? document.querySelector('.menu')
|
|
10
|
+
: document.querySelector('.menu.combobox__options');
|
|
11
|
+
const selectedItem = comboboxOptions.querySelector('.menu-item.selected');
|
|
12
|
+
if (selectedItem && comboboxOptions) {
|
|
13
|
+
let comboboxOptionWrapper = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.parentElement;
|
|
14
|
+
let comboboxOptionsGroup = comboboxOptionWrapper === null || comboboxOptionWrapper === void 0 ? void 0 : comboboxOptionWrapper.parentElement;
|
|
15
|
+
if (comboboxOptionsGroup) {
|
|
16
|
+
const stickyHeader = comboboxOptionsGroup === null || comboboxOptionsGroup === void 0 ? void 0 : comboboxOptionsGroup.querySelector('.combobox__sticky-header');
|
|
17
|
+
const stickyHeaderOffset = stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.offsetTop;
|
|
18
|
+
comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: stickyHeaderOffset, behavior: 'smooth' });
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
const selectedItemOffset = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.offsetTop;
|
|
22
|
+
comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: selectedItemOffset, behavior: 'smooth' });
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=scrollOptionToViewport.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollOptionToViewport.js","sourceRoot":"","sources":["../../src/utils/scrollOptionToViewport.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,SAAkB;IACvD,MAAM,eAAe,GAAG,SAAS;QAC/B,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAiB;QAClD,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAiB,CAAA;IAEtE,MAAM,YAAY,GAAG,eAAe,CAAC,aAAa,CAChD,qBAAqB,CACP,CAAA;IAEhB,IAAI,YAAY,IAAI,eAAe,EAAE,CAAC;QACpC,IAAI,qBAAqB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,aAAa,CAAA;QACvD,IAAI,oBAAoB,GAAG,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,aAAa,CAAA;QAE/D,IAAI,oBAAoB,EAAE,CAAC;YACzB,MAAM,YAAY,GAAG,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,CACtD,0BAA0B,CACZ,CAAA;YAEhB,MAAM,kBAAkB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA;YAElD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;QAC5E,CAAC;aAAM,CAAC;YACN,MAAM,kBAAkB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA;YAElD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;QAC5E,CAAC;IACH,CAAC;AACH,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixum/combobox",
|
|
3
|
-
"version": "5.13.3
|
|
3
|
+
"version": "5.13.3",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "lib/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
"sideEffects": [
|
|
19
19
|
"*.css"
|
|
20
20
|
],
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "fe046cc0a53f5b40ded47b3ff85948459b3d1c89"
|
|
22
22
|
}
|