@pixum/combobox 1.6.0 → 1.6.4

package/lib/ComboBox.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ComboBoxProps } from './types';
-import './styles.css';
-declare const ComboBox: React.FC<ComboBoxProps>;
-export default ComboBox;
+import React from 'react';
+import { ComboBoxProps } from './types';
+import './styles.css';
+declare const ComboBox: React.FC<ComboBoxProps>;
+export default ComboBox;

package/lib/ComboBox.js

@@ -1,106 +1,106 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var bottom_sheet_1 = __importDefault(require("@pixum/bottom-sheet"));
-var text_1 = __importStar(require("@pixum/text"));
-var user_input_1 = require("@pixum/user-input");
-var ComboboxOptions_1 = __importDefault(require("./ComboboxOptions"));
-var useIsDesktopScreenWidth_1 = __importDefault(require("./helper/useIsDesktopScreenWidth"));
-require("./styles.css");
-var clsx_1 = __importDefault(require("clsx"));
-var ComboBox = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, headline = _a.headline, label = _a.label, onClick = _a.onClick, onChange = _a.onChange, onOutsideClick = _a.onOutsideClick, onOptionItemClick = _a.onOptionItemClick, onSheetClose = _a.onSheetClose, _c = _a.searchPattern, searchPattern = _c === void 0 ? '' : _c, id = _a.id, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, options = _a.options, placeholder = _a.placeholder, value = _a.value, inputMode = _a.inputMode, noResultsText = _a.noResultsText, leadingType = _a.leadingType, optionDetails = _a.optionDetails, _d = _a.withSearch, withSearch = _d === void 0 ? true : _d;
-    var comboBoxRef = (0, react_1.useRef)(null);
-    var bottomSheetRef = (0, react_1.useRef)(null);
-    var _e = (0, react_1.useState)(''), searchQuery = _e[0], setSearchQuery = _e[1];
-    var _f = (0, react_1.useState)(placeholder), inputPlaceholder = _f[0], setPlaceholder = _f[1];
-    var isDesktop = (0, useIsDesktopScreenWidth_1.default)();
-    var optionsExist = Object.keys(options).length > 0;
-    var showSelectField = !withSearch || (isDesktop && !isOpen) || !isDesktop;
-    (0, react_1.useEffect)(function () {
-        !isOpen && (onSheetClose === null || onSheetClose === void 0 ? void 0 : onSheetClose());
-    }, [isOpen]);
-    var handleChange = function (e) {
-        var searchValue = e.target.value;
-        setSearchQuery(searchValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(searchValue);
-    };
-    var handleClearInput = function () {
-        setSearchQuery('');
-    };
-    var clearAndClose = function () {
-        setSearchQuery('');
-        setIsOpen(false);
-    };
-    var handleClickOutside = (0, react_1.useCallback)(function (event) {
-        var _a;
-        var node = event === null || event === void 0 ? void 0 : event.target;
-        var isOutside = !((_a = comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.contains(node));
-        setPlaceholder(placeholder);
-        isOutside && isDesktop && clearAndClose();
-        isOutside && isDesktop && (onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick());
-    }, [comboBoxRef, bottomSheetRef, placeholder]);
-    var handleOptionItemClick = function (optionValue) {
-        onOptionItemClick === null || onOptionItemClick === void 0 ? void 0 : onOptionItemClick(optionValue);
-    };
-    var handleOnArrowClick = function () {
-        clearAndClose();
-    };
-    var handleOnClick = function () {
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    };
-    var NoResultsTextComponent = function () {
-        return (react_1.default.createElement(text_1.default, { variant: text_1.TextVariant.SUBHEADLINE, className: "combobox--no-results-text" }, noResultsText));
-    };
-    var removePlaceholder = function () {
-        setPlaceholder('');
-    };
-    var handleKeyDown = function (e) {
-        var _a;
-        if (e.key === 'Tab') {
-            e.preventDefault();
-            (_a = document.querySelector('.combobox__options .menu-item')) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        showSelectField && (react_1.default.createElement(user_input_1.SelectInput, { className: (0, clsx_1.default)(isOpen && 'active', className), label: label, value: value, onClick: handleOnClick, onOutsideClick: handleClickOutside, isCompact: true, id: id, readOnly: true })),
-        isDesktop && isOpen && (react_1.default.createElement("div", { className: "combobox", ref: comboBoxRef },
-            withSearch && (react_1.default.createElement(user_input_1.SmallSearchInput, { value: searchQuery, pattern: searchPattern, label: label, onChange: handleChange, onClear: handleClearInput, onKeyDown: handleKeyDown, onArrowClick: handleOnArrowClick, onOutsideClick: handleClickOutside, show: isOpen, inputMode: inputMode, autoFocus: true, isCompact: true })),
-            optionsExist ? (react_1.default.createElement(ComboboxOptions_1.default, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType, optionDetails: optionDetails })) : (react_1.default.createElement(NoResultsTextComponent, null)),
-            react_1.default.createElement("div", null))),
-        !isDesktop && isOpen && (react_1.default.createElement(bottom_sheet_1.default, { open: isOpen, onClose: function () {
-                setIsOpen(false);
-            }, ref: bottomSheetRef },
-            react_1.default.createElement("div", { className: "combobox--header" },
-                react_1.default.createElement(text_1.default, { variant: text_1.TextVariant.HEADLINE, className: "combobox--headline" }, headline),
-                withSearch && (react_1.default.createElement(user_input_1.SmallSearchInput, { value: searchQuery, pattern: searchPattern, onChange: handleChange, onClear: handleClearInput, onFocus: removePlaceholder, placeholder: inputPlaceholder, inputMode: inputMode, show: isOpen, isCompact: true }))),
-            react_1.default.createElement("div", { className: "combobox__options scrollable" }, optionsExist ? (react_1.default.createElement(ComboboxOptions_1.default, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType, optionDetails: optionDetails })) : (react_1.default.createElement(NoResultsTextComponent, null)))))));
-};
-exports.default = ComboBox;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var bottom_sheet_1 = __importDefault(require("@pixum/bottom-sheet"));
+var text_1 = __importStar(require("@pixum/text"));
+var user_input_1 = require("@pixum/user-input");
+var ComboboxOptions_1 = __importDefault(require("./ComboboxOptions"));
+var useIsDesktopScreenWidth_1 = __importDefault(require("./helper/useIsDesktopScreenWidth"));
+require("./styles.css");
+var clsx_1 = __importDefault(require("clsx"));
+var ComboBox = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, headline = _a.headline, label = _a.label, onClick = _a.onClick, onChange = _a.onChange, onOutsideClick = _a.onOutsideClick, onOptionItemClick = _a.onOptionItemClick, onSheetClose = _a.onSheetClose, _c = _a.searchPattern, searchPattern = _c === void 0 ? '' : _c, id = _a.id, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, options = _a.options, placeholder = _a.placeholder, value = _a.value, inputMode = _a.inputMode, noResultsText = _a.noResultsText, leadingType = _a.leadingType, optionDetails = _a.optionDetails, _d = _a.withSearch, withSearch = _d === void 0 ? true : _d;
+    var comboBoxRef = (0, react_1.useRef)(null);
+    var bottomSheetRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(''), searchQuery = _e[0], setSearchQuery = _e[1];
+    var _f = (0, react_1.useState)(placeholder), inputPlaceholder = _f[0], setPlaceholder = _f[1];
+    var isDesktop = (0, useIsDesktopScreenWidth_1.default)();
+    var optionsExist = Object.keys(options).length > 0;
+    var showSelectField = !withSearch || (isDesktop && !isOpen) || !isDesktop;
+    (0, react_1.useEffect)(function () {
+        !isOpen && (onSheetClose === null || onSheetClose === void 0 ? void 0 : onSheetClose());
+    }, [isOpen]);
+    var handleChange = function (e) {
+        var searchValue = e.target.value;
+        setSearchQuery(searchValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(searchValue);
+    };
+    var handleClearInput = function () {
+        setSearchQuery('');
+    };
+    var clearAndClose = function () {
+        setSearchQuery('');
+        setIsOpen(false);
+    };
+    var handleClickOutside = (0, react_1.useCallback)(function (event) {
+        var _a;
+        var node = event === null || event === void 0 ? void 0 : event.target;
+        var isOutside = !((_a = comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.contains(node));
+        setPlaceholder(placeholder);
+        isOutside && isDesktop && clearAndClose();
+        isOutside && isDesktop && (onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick());
+    }, [comboBoxRef, bottomSheetRef, placeholder]);
+    var handleOptionItemClick = function (optionValue) {
+        onOptionItemClick === null || onOptionItemClick === void 0 ? void 0 : onOptionItemClick(optionValue);
+    };
+    var handleOnArrowClick = function () {
+        clearAndClose();
+    };
+    var handleOnClick = function () {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var NoResultsTextComponent = function () {
+        return (react_1.default.createElement(text_1.default, { variant: text_1.TextVariant.SUBHEADLINE, className: "combobox--no-results-text" }, noResultsText));
+    };
+    var removePlaceholder = function () {
+        setPlaceholder('');
+    };
+    var handleKeyDown = function (e) {
+        var _a;
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            (_a = document.querySelector('.combobox__options .menu-item')) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        showSelectField && (react_1.default.createElement(user_input_1.SelectInput, { className: (0, clsx_1.default)(isOpen && 'active', className), label: label, value: value, onClick: handleOnClick, onOutsideClick: handleClickOutside, isCompact: true, id: id, readOnly: true })),
+        isDesktop && isOpen && (react_1.default.createElement("div", { className: "combobox", ref: comboBoxRef },
+            withSearch && (react_1.default.createElement(user_input_1.SmallSearchInput, { value: searchQuery, pattern: searchPattern, label: label, onChange: handleChange, onClear: handleClearInput, onKeyDown: handleKeyDown, onArrowClick: handleOnArrowClick, onOutsideClick: handleClickOutside, show: isOpen, inputMode: inputMode, autoFocus: true, isCompact: true })),
+            optionsExist ? (react_1.default.createElement(ComboboxOptions_1.default, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType, optionDetails: optionDetails })) : (react_1.default.createElement(NoResultsTextComponent, null)),
+            react_1.default.createElement("div", null))),
+        !isDesktop && isOpen && (react_1.default.createElement(bottom_sheet_1.default, { open: isOpen, onClose: function () {
+                setIsOpen(false);
+            }, ref: bottomSheetRef },
+            react_1.default.createElement("div", { className: "combobox--header" },
+                react_1.default.createElement(text_1.default, { variant: text_1.TextVariant.HEADLINE, className: "combobox--headline" }, headline),
+                withSearch && (react_1.default.createElement(user_input_1.SmallSearchInput, { value: searchQuery, pattern: searchPattern, onChange: handleChange, onClear: handleClearInput, onFocus: removePlaceholder, placeholder: inputPlaceholder, inputMode: inputMode, show: isOpen, isCompact: true }))),
+            react_1.default.createElement("div", { className: "combobox__options scrollable" }, optionsExist ? (react_1.default.createElement(ComboboxOptions_1.default, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType, optionDetails: optionDetails })) : (react_1.default.createElement(NoResultsTextComponent, null)))))));
+};
+exports.default = ComboBox;
 //# sourceMappingURL=ComboBox.js.map

package/lib/ComboboxOptions/Options.d.ts

@@ -1,12 +1,12 @@
-import { LeadingType } from '@pixum/menu-item';
-import React from 'react';
-import { ComboBoxOptionProps } from '../types';
-interface OptionsProps {
-    items: ComboBoxOptionProps[];
-    selectedOption?: string;
-    onClick?: (value: string) => void;
-    onKeyDown: (e: React.KeyboardEvent, value: string) => void;
-    leadingType?: LeadingType;
-}
-declare const Options: React.FC<OptionsProps>;
-export default Options;
+import { LeadingType } from '@pixum/menu-item';
+import React from 'react';
+import { ComboBoxOptionProps } from '../types';
+interface OptionsProps {
+    items: ComboBoxOptionProps[];
+    selectedOption?: string;
+    onClick?: (value: string) => void;
+    onKeyDown: (e: React.KeyboardEvent, value: string) => void;
+    leadingType?: LeadingType;
+}
+declare const Options: React.FC<OptionsProps>;
+export default Options;

package/lib/ComboboxOptions/Options.js

@@ -1,24 +1,24 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var menu_item_1 = __importDefault(require("@pixum/menu-item"));
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = __importDefault(require("react"));
-var Options = function (_a) {
-    var items = _a.items, selectedOption = _a.selectedOption, onClick = _a.onClick, onKeyDown = _a.onKeyDown, leadingType = _a.leadingType;
-    return (react_1.default.createElement(react_1.default.Fragment, null, items.map(function (item, index) {
-        var _a;
-        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
-                ? {
-                    name: item.text,
-                    type: leadingType,
-                }
-                : undefined, selected: selectedOption === item.text, text: item.text, subtext: item.subtext, subItemProps: {
-                text: (_a = item.subItemProps) === null || _a === void 0 ? void 0 : _a.text,
-            } }));
-    })));
-};
-exports.default = Options;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var menu_item_1 = __importDefault(require("@pixum/menu-item"));
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = __importDefault(require("react"));
+var Options = function (_a) {
+    var items = _a.items, selectedOption = _a.selectedOption, onClick = _a.onClick, onKeyDown = _a.onKeyDown, leadingType = _a.leadingType;
+    return (react_1.default.createElement(react_1.default.Fragment, null, items.map(function (item, index) {
+        var _a;
+        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
+                ? {
+                    name: item.text,
+                    type: leadingType,
+                }
+                : undefined, selected: selectedOption === item.text, text: item.text, subtext: item.subtext, subItemProps: {
+                text: (_a = item.subItemProps) === null || _a === void 0 ? void 0 : _a.text,
+            } }));
+    })));
+};
+exports.default = Options;
 //# sourceMappingURL=Options.js.map

package/lib/ComboboxOptions/OptionsGroup.d.ts

@@ -1,13 +1,13 @@
-import { LeadingType } from '@pixum/menu-item';
-import React from 'react';
-import { ComboBoxOptionProps } from '../types';
-interface OptionsGroupProps {
-    group: string;
-    items: ComboBoxOptionProps[];
-    selectedOption?: string;
-    onClick?: (value: string) => void;
-    onKeyDown: (e: React.KeyboardEvent, value: string) => void;
-    leadingType?: LeadingType;
-}
-declare const OptionsGroup: React.FC<OptionsGroupProps>;
-export default OptionsGroup;
+import { LeadingType } from '@pixum/menu-item';
+import React from 'react';
+import { ComboBoxOptionProps } from '../types';
+interface OptionsGroupProps {
+    group: string;
+    items: ComboBoxOptionProps[];
+    selectedOption?: string;
+    onClick?: (value: string) => void;
+    onKeyDown: (e: React.KeyboardEvent, value: string) => void;
+    leadingType?: LeadingType;
+}
+declare const OptionsGroup: React.FC<OptionsGroupProps>;
+export default OptionsGroup;

package/lib/ComboboxOptions/OptionsGroup.js

@@ -1,39 +1,39 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var text_1 = __importStar(require("@pixum/text"));
-var react_1 = __importDefault(require("react"));
-var Options_1 = __importDefault(require("./Options"));
-var OptionsGroup = function (_a) {
-    var group = _a.group, items = _a.items, selectedOption = _a.selectedOption, onClick = _a.onClick, onKeyDown = _a.onKeyDown, leadingType = _a.leadingType;
-    return (react_1.default.createElement("div", { className: "combobox__options-group", key: "combobox__options-group-".concat(group) },
-        react_1.default.createElement(text_1.default, { variant: text_1.TextVariant.HEADLINE, className: "combobox__sticky-header" }, group),
-        react_1.default.createElement(Options_1.default, { items: items, selectedOption: selectedOption, onClick: onClick, onKeyDown: onKeyDown, leadingType: leadingType })));
-};
-exports.default = OptionsGroup;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var text_1 = __importStar(require("@pixum/text"));
+var react_1 = __importDefault(require("react"));
+var Options_1 = __importDefault(require("./Options"));
+var OptionsGroup = function (_a) {
+    var group = _a.group, items = _a.items, selectedOption = _a.selectedOption, onClick = _a.onClick, onKeyDown = _a.onKeyDown, leadingType = _a.leadingType;
+    return (react_1.default.createElement("div", { className: "combobox__options-group", key: "combobox__options-group-".concat(group) },
+        react_1.default.createElement(text_1.default, { variant: text_1.TextVariant.HEADLINE, className: "combobox__sticky-header" }, group),
+        react_1.default.createElement(Options_1.default, { items: items, selectedOption: selectedOption, onClick: onClick, onKeyDown: onKeyDown, leadingType: leadingType })));
+};
+exports.default = OptionsGroup;
 //# sourceMappingURL=OptionsGroup.js.map

package/lib/ComboboxOptions/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { ComboBoxOptionsProps } from '../types';
-declare const ComboBoxOptions: React.FC<ComboBoxOptionsProps>;
-export default ComboBoxOptions;
+import React from 'react';
+import { ComboBoxOptionsProps } from '../types';
+declare const ComboBoxOptions: React.FC<ComboBoxOptionsProps>;
+export default ComboBoxOptions;

package/lib/ComboboxOptions/index.js

@@ -1,54 +1,54 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var menu_1 = __importDefault(require("@pixum/menu"));
-var scrollOptionToViewport_1 = require("../helper/scrollOptionToViewport");
-var OptionsGroup_1 = __importDefault(require("./OptionsGroup"));
-var Options_1 = __importDefault(require("./Options"));
-var useIsDesktopScreenWidth_1 = __importDefault(require("../helper/useIsDesktopScreenWidth"));
-var ComboBoxOptions = function (_a) {
-    var options = _a.options, onClick = _a.onClick, selectedOption = _a.selectedOption, leadingType = _a.leadingType, optionDetails = _a.optionDetails;
-    var isDesktop = (0, useIsDesktopScreenWidth_1.default)();
-    var handleOnKeyDown = function (e, value) {
-        if (e.key === 'Enter') {
-            onClick === null || onClick === void 0 ? void 0 : onClick(value);
-        }
-    };
-    (0, react_1.useEffect)(function () {
-        (0, scrollOptionToViewport_1.scrollOptionToViewport)(isDesktop);
-    }, [isDesktop]);
-    return (react_1.default.createElement(menu_1.default, { className: "combobox__options" },
-        Array.isArray(options) ? (react_1.default.createElement(Options_1.default, { items: options, selectedOption: selectedOption, onClick: onClick, onKeyDown: handleOnKeyDown, leadingType: leadingType })) : (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(options).map(function (_a) {
-            var group = _a[0], items = _a[1];
-            return (react_1.default.createElement(OptionsGroup_1.default, { group: group, items: items, selectedOption: selectedOption, onClick: onClick, onKeyDown: handleOnKeyDown, leadingType: leadingType }));
-        }))),
-        optionDetails && (react_1.default.createElement("div", { className: "combobox__option-details text--caption" }, optionDetails))));
-};
-exports.default = ComboBoxOptions;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var menu_1 = __importDefault(require("@pixum/menu"));
+var scrollOptionToViewport_1 = require("../helper/scrollOptionToViewport");
+var OptionsGroup_1 = __importDefault(require("./OptionsGroup"));
+var Options_1 = __importDefault(require("./Options"));
+var useIsDesktopScreenWidth_1 = __importDefault(require("../helper/useIsDesktopScreenWidth"));
+var ComboBoxOptions = function (_a) {
+    var options = _a.options, onClick = _a.onClick, selectedOption = _a.selectedOption, leadingType = _a.leadingType, optionDetails = _a.optionDetails;
+    var isDesktop = (0, useIsDesktopScreenWidth_1.default)();
+    var handleOnKeyDown = function (e, value) {
+        if (e.key === 'Enter') {
+            onClick === null || onClick === void 0 ? void 0 : onClick(value);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        (0, scrollOptionToViewport_1.scrollOptionToViewport)(isDesktop);
+    }, [isDesktop]);
+    return (react_1.default.createElement(menu_1.default, { className: "combobox__options" },
+        Array.isArray(options) ? (react_1.default.createElement(Options_1.default, { items: options, selectedOption: selectedOption, onClick: onClick, onKeyDown: handleOnKeyDown, leadingType: leadingType })) : (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(options).map(function (_a) {
+            var group = _a[0], items = _a[1];
+            return (react_1.default.createElement(OptionsGroup_1.default, { group: group, items: items, selectedOption: selectedOption, onClick: onClick, onKeyDown: handleOnKeyDown, leadingType: leadingType }));
+        }))),
+        optionDetails && (react_1.default.createElement("div", { className: "combobox__option-details text--caption" }, optionDetails))));
+};
+exports.default = ComboBoxOptions;
 //# sourceMappingURL=index.js.map

package/lib/helper/calculateListMaxHeight.d.ts

@@ -1 +1 @@
-export declare const calculateListMaxHeight: () => number;
+export declare const calculateListMaxHeight: () => number;

package/lib/helper/calculateListMaxHeight.js

@@ -1,12 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateListMaxHeight = void 0;
-var calculateListMaxHeight = function () {
-    var windowHeight = window.innerHeight;
-    var headerHeight = 50;
-    var inputFieldHeight = 35;
-    var maxListHeight = windowHeight - headerHeight - inputFieldHeight;
-    return maxListHeight;
-};
-exports.calculateListMaxHeight = calculateListMaxHeight;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateListMaxHeight = void 0;
+var calculateListMaxHeight = function () {
+    var windowHeight = window.innerHeight;
+    var headerHeight = 50;
+    var inputFieldHeight = 35;
+    var maxListHeight = windowHeight - headerHeight - inputFieldHeight;
+    return maxListHeight;
+};
+exports.calculateListMaxHeight = calculateListMaxHeight;
 //# sourceMappingURL=calculateListMaxHeight.js.map

package/lib/helper/scrollOptionToViewport.d.ts

@@ -1 +1 @@
-export declare const scrollOptionToViewport: (isDesktop: boolean) => void;
+export declare const scrollOptionToViewport: (isDesktop: boolean) => void;

package/lib/helper/scrollOptionToViewport.js

@@ -1,22 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.scrollOptionToViewport = void 0;
-var scrollOptionToViewport = function (isDesktop) {
-    var comboboxOptions = isDesktop ? document.querySelector('.menu') :
-        document.querySelector('.combobox__options');
-    var selectedItem = document.querySelector(".menu-item.selected");
-    if (selectedItem && comboboxOptions) {
-        var comboboxOptionsGroup = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.parentElement;
-        if (comboboxOptionsGroup) {
-            var stickyHeader = comboboxOptionsGroup === null || comboboxOptionsGroup === void 0 ? void 0 : comboboxOptionsGroup.querySelector('.sticky-header');
-            var stickyHeaderOffset = stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.offsetTop;
-            comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: stickyHeaderOffset });
-        }
-        else {
-            var selectedItemOffset = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.offsetTop;
-            comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: selectedItemOffset });
-        }
-    }
-};
-exports.scrollOptionToViewport = scrollOptionToViewport;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollOptionToViewport = void 0;
+var scrollOptionToViewport = function (isDesktop) {
+    var comboboxOptions = isDesktop ? document.querySelector('.menu') :
+        document.querySelector('.combobox__options');
+    var selectedItem = document.querySelector(".menu-item.selected");
+    if (selectedItem && comboboxOptions) {
+        var comboboxOptionsGroup = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.parentElement;
+        if (comboboxOptionsGroup) {
+            var stickyHeader = comboboxOptionsGroup === null || comboboxOptionsGroup === void 0 ? void 0 : comboboxOptionsGroup.querySelector('.sticky-header');
+            var stickyHeaderOffset = stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.offsetTop;
+            comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: stickyHeaderOffset });
+        }
+        else {
+            var selectedItemOffset = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.offsetTop;
+            comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: selectedItemOffset });
+        }
+    }
+};
+exports.scrollOptionToViewport = scrollOptionToViewport;
 //# sourceMappingURL=scrollOptionToViewport.js.map

package/lib/helper/useIsDesktopScreenWidth.d.ts

@@ -1,2 +1,2 @@
-declare const useIsDesktopScreenWidth: () => boolean;
-export default useIsDesktopScreenWidth;
+declare const useIsDesktopScreenWidth: () => boolean;
+export default useIsDesktopScreenWidth;