@pixum/combobox 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2023-07-17)
+
+
+### Features
+
+* **combobox:** add combobox component ([1fe4ec2](https://git.pixum.net/design-system/component-library/commits/1fe4ec254317fe65faa372cc82a51f1a4afcca9a))
+* **combobox:** apply code-review ([8e79167](https://git.pixum.net/design-system/component-library/commits/8e79167eeb196be32a66e67929864a63a351af36))
+* **combobox:** apply code-review ([2554747](https://git.pixum.net/design-system/component-library/commits/25547475a701273c06c75dc7c051849016ee63d4))

package/lib/ComboBox.d.ts

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

package/lib/ComboBox.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 });
+exports.ComboBox = void 0;
+var react_1 = __importStar(require("react"));
+var clsx_1 = __importDefault(require("clsx"));
+require("./styles.css");
+var user_input_1 = require("@pixum/user-input");
+var useIsDesktop_1 = require("./helper/useIsDesktop");
+var react_2 = require("react");
+var bottom_sheet_1 = __importDefault(require("@pixum/bottom-sheet"));
+var menu_1 = __importDefault(require("@pixum/menu"));
+var ComboBoxOptions_1 = __importDefault(require("./ComboBoxOptions"));
+var text_1 = __importDefault(require("@pixum/text"));
+var ComboBox = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, headline = _a.headline, label = _a.label, _c = _a.onFocus, onFocus = _c === void 0 ? function () { } : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.onOutsideClick, onOutsideClick = _e === void 0 ? function () { } : _e, _f = _a.searchPattern, searchPattern = _f === void 0 ? "" : _f, _g = _a.open, open = _g === void 0 ? false : _g, options = _a.options, value = _a.value, noResultsText = _a.noResultsText;
+    var comboBoxRef = (0, react_1.useRef)(null);
+    var isDesktop = (0, useIsDesktop_1.useIsDesktop)();
+    var _h = (0, react_2.useState)(''), searchQuery = _h[0], setSearchQuery = _h[1];
+    var _j = (0, react_2.useState)(value), selectedValue = _j[0], setSelectedValue = _j[1];
+    var _k = (0, react_2.useState)(open), isOpen = _k[0], setIsOpen = _k[1];
+    var optionsExist = Object.keys(options).length > 0;
+    var handleChange = function (e) {
+        setSearchQuery(e.target.value);
+        onChange(e.target.value);
+    };
+    var handleClearInput = function () {
+        setIsOpen(true);
+        setSearchQuery('');
+        onFocus();
+    };
+    var handleSelectInputClick = function () {
+        handleClearInput();
+    };
+    var handleClickOutside = function (event) {
+        if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {
+            setIsOpen(false);
+            setSearchQuery('');
+            onOutsideClick();
+        }
+    };
+    var handleBottomSheetOnClose = function () {
+        setIsOpen(false);
+    };
+    var onOptionItemClick = function (value) {
+        setSelectedValue(value);
+        setIsOpen(false);
+    };
+    var NoResultsTextCompoennt = function () {
+        return react_1.default.createElement(text_1.default, { variant: "headline", className: "combobox--no-results-text" }, noResultsText);
+    };
+    (0, react_1.useEffect)(function () {
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        !isOpen &&
+            react_1.default.createElement(user_input_1.SelectInput, { label: label, value: selectedValue, onClick: handleSelectInputClick, readOnly: true }),
+        isDesktop && isOpen &&
+            react_1.default.createElement("div", { className: (0, clsx_1.default)("combobox", className), ref: comboBoxRef },
+                react_1.default.createElement(user_input_1.SmallSearchInput, { value: searchQuery, pattern: searchPattern, label: label, onChange: handleChange, onClear: handleClearInput, show: isOpen, autoFocus: true }),
+                react_1.default.createElement(menu_1.default, { className: (0, clsx_1.default)('combobox__options') }, optionsExist ?
+                    react_1.default.createElement(ComboBoxOptions_1.default, { options: options, onClick: onOptionItemClick, selectedOption: selectedValue })
+                    :
+                        react_1.default.createElement(NoResultsTextCompoennt, null)),
+                react_1.default.createElement("div", null)),
+        !isDesktop && isOpen &&
+            react_1.default.createElement(bottom_sheet_1.default, { open: isOpen, onClose: handleBottomSheetOnClose },
+                react_1.default.createElement("div", { className: "combobox--header" },
+                    react_1.default.createElement(text_1.default, { variant: "headline", className: "combobox--headline" }, headline),
+                    react_1.default.createElement(user_input_1.SmallSearchInput, { value: searchQuery, pattern: searchPattern, onChange: handleChange, onClear: handleClearInput, show: isOpen, autoFocus: true })),
+                react_1.default.createElement("div", { className: "combobox__options" }, optionsExist ?
+                    react_1.default.createElement(ComboBoxOptions_1.default, { options: options, onClick: onOptionItemClick, selectedOption: selectedValue })
+                    :
+                        react_1.default.createElement(NoResultsTextCompoennt, null)))));
+};
+exports.ComboBox = ComboBox;
+//# sourceMappingURL=ComboBox.js.map

package/lib/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"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"}

package/lib/ComboBoxOptions.d.ts

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

package/lib/ComboBoxOptions.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 text_1 = __importDefault(require("@pixum/text"));
+var menu_item_1 = __importDefault(require("@pixum/menu-item"));
+var useIsDesktop_1 = require("./helper/useIsDesktop");
+var scrollOptionToViewport_1 = require("./helper/scrollOptionToViewport");
+var ComboBoxOptions = function (_a) {
+    var options = _a.options, selectedOption = _a.selectedOption, onClick = _a.onClick;
+    var isDesktop = (0, useIsDesktop_1.useIsDesktop)();
+    var handleOnItemClick = function (value) {
+        if (value) {
+            onClick(value);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        (0, scrollOptionToViewport_1.scrollOptionToViewport)(isDesktop);
+    }, [isDesktop]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(options).map(function (_a) {
+        var _b;
+        var group = _a[0], items = _a[1];
+        return (react_1.default.createElement(react_1.default.Fragment, null, isNaN(parseFloat(group)) ?
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(text_1.default, { variant: "headline", className: "sticky-header" }, group),
+                items.map(function (item, index) {
+                    var _a;
+                    return (react_1.default.createElement(menu_item_1.default, { key: "combobox-item-" + group + "-" + index, className: selectedOption === item.text ? 'selected' : '', onClick: function () { return handleOnItemClick(item.text); }, text: item.text, subtext: item.subtext, subItemProps: {
+                            text: (_a = item.subItemProps) === null || _a === void 0 ? void 0 : _a.text,
+                        } }));
+                }))
+            :
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(menu_item_1.default, { key: "combobox-item-" + items.text, className: selectedOption === items.text ? 'selected' : '', onClick: function () { return handleOnItemClick(items.text); }, text: items.text, subtext: items.subtext, subItemProps: {
+                            text: (_b = items.subItemProps) === null || _b === void 0 ? void 0 : _b.text,
+                        } }))));
+    })));
+};
+exports.default = ComboBoxOptions;
+//# sourceMappingURL=ComboBoxOptions.js.map

package/lib/ComboBoxOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxOptions.js","sourceRoot":"","sources":["../src/ComboBoxOptions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAC1C,qDAA+B;AAC/B,+DAAyD;AAEzD,sDAAoD;AACpD,0EAAuE;AAEvE,IAAM,eAAe,GAAmC,UAAC,EAIxD;QAHG,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,OAAO,aAAA;IAEP,IAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAA;IAEhC,IAAM,iBAAiB,GAAG,UAAC,KAAuB;QAC9C,IAAI,KAAK,EAAE;YACP,OAAO,CAAC,KAAK,CAAC,CAAA;SACjB;IACL,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACN,IAAA,+CAAsB,EAAC,SAAS,CAAC,CAAA;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACH,8DACK,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAc;;YAAb,KAAK,QAAA,EAAE,KAAK,QAAA;QAAM,OAAA,CAC7C,8DACK,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAE,CAAC;YACxB;gBACI,8BAAC,cAAI,IAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,eAAe,IAAE,KAAK,CAAQ;gBAChE,KAAK,CAAC,GAAG,CAAC,UAAC,IAAmB,EAAE,KAAa;;oBAAK,OAAA,CAC/C,8BAAC,mBAAQ,IAAC,GAAG,EAAE,mBAAiB,KAAK,SAAI,KAAO,EAC9C,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACzD,OAAO,EAAE,cAAM,OAAA,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAA5B,CAA4B,EAC3C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE;4BACV,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;yBAChC,GACD,CACL,CAAA;iBAAA,CAAC,CACH;YACN,CAAC;gBACE;oBACI,8BAAC,mBAAQ,IAAC,GAAG,EAAE,mBAAiB,KAAK,CAAC,IAAM,EAC1C,SAAS,EAAE,cAAc,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAC1D,OAAO,EAAE,cAAM,OAAA,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,EAA7B,CAA6B,EAC5C,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,YAAY,EAAE;4BACV,IAAI,EAAE,MAAA,KAAK,CAAC,YAAY,0CAAE,IAAI;yBACjC,GACD,CACH,CAER,CACN,CAAA;KAAA,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}

package/lib/helper/calculateListMaxHeight.d.ts

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

package/lib/helper/calculateListMaxHeight.js

@@ -0,0 +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;
+//# sourceMappingURL=calculateListMaxHeight.js.map

package/lib/helper/calculateListMaxHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateListMaxHeight.js","sourceRoot":"","sources":["../../src/helper/calculateListMaxHeight.ts"],"names":[],"mappings":";;;AAAO,IAAM,sBAAsB,GAAG;IAClC,IAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAA;IACvC,IAAM,YAAY,GAAG,EAAE,CAAA;IACvB,IAAM,gBAAgB,GAAG,EAAE,CAAA;IAC3B,IAAM,aAAa,GAAG,YAAY,GAAG,YAAY,GAAG,gBAAgB,CAAA;IAErE,OAAO,aAAa,CAAA;AAEvB,CAAC,CAAA;AARY,QAAA,sBAAsB,0BAQlC"}

package/lib/helper/scrollOptionToViewport.d.ts

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

package/lib/helper/scrollOptionToViewport.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollOptionToViewport = void 0;
+var scrollOptionToViewport = function (isDesktop) {
+    var selectedOption = document.querySelector('.menu-item.selected');
+    var container = isDesktop ? document.querySelector('.menu') :
+        document.querySelector('.combobox__options');
+    if (selectedOption && container) {
+        var selectedOptionHeight = selectedOption.offsetHeight;
+        var selectedOptionOffsetTop = selectedOption.offsetTop;
+        var selectedOptionOffsetBottom = selectedOptionOffsetTop - selectedOptionHeight;
+        if (isDesktop) {
+            container.scrollTop = selectedOptionOffsetBottom;
+        }
+        else {
+            selectedOption.scrollIntoView({ behavior: "smooth" });
+        }
+    }
+};
+exports.scrollOptionToViewport = scrollOptionToViewport;
+//# sourceMappingURL=scrollOptionToViewport.js.map

package/lib/helper/scrollOptionToViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollOptionToViewport.js","sourceRoot":"","sources":["../../src/helper/scrollOptionToViewport.ts"],"names":[],"mappings":";;;AAAO,IAAM,sBAAsB,GAAG,UAAC,SAAkB;IACrD,IAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAgB,CAAC;IACpF,IAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAgB,CAAC,CAAC;QAC1E,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAgB,CAAA;IAE/D,IAAI,cAAc,IAAI,SAAS,EAAE;QAC7B,IAAM,oBAAoB,GAAG,cAAc,CAAC,YAAY,CAAC;QACzD,IAAM,uBAAuB,GAAG,cAAc,CAAC,SAAS,CAAC;QACzD,IAAM,0BAA0B,GAAG,uBAAuB,GAAG,oBAAoB,CAAC;QAElF,IAAI,SAAS,EAAE;YACX,SAAS,CAAC,SAAS,GAAG,0BAA0B,CAAC;SACpD;aAAM;YACH,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACzD;KACJ;AACL,CAAC,CAAA;AAhBY,QAAA,sBAAsB,0BAgBlC"}

package/lib/helper/useIsDesktop.d.ts

@@ -0,0 +1 @@
+export declare const useIsDesktop: () => boolean;

package/lib/helper/useIsDesktop.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsDesktop = void 0;
+var react_1 = require("react");
+var react_device_detect_1 = require("react-device-detect");
+var useIsDesktop = function () {
+    var _a = (0, react_1.useState)(false), isPageLoaded = _a[0], setPageLoaded = _a[1];
+    (0, react_1.useEffect)(function () {
+        setPageLoaded(true);
+    }, []);
+    return (0, react_1.useMemo)(function () { return isPageLoaded && react_device_detect_1.isDesktop; }, [react_device_detect_1.isDesktop, isPageLoaded]);
+};
+exports.useIsDesktop = useIsDesktop;
+//# sourceMappingURL=useIsDesktop.js.map

package/lib/helper/useIsDesktop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsDesktop.js","sourceRoot":"","sources":["../../src/helper/useIsDesktop.ts"],"names":[],"mappings":";;;AAAA,+BAAoD;AACpD,2DAA+C;AAExC,IAAM,YAAY,GAAG;IACpB,IAAA,KAAgC,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA9C,YAAY,QAAA,EAAE,aAAa,QAAmB,CAAA;IAErD,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,IAAA,eAAO,EAAC,cAAM,OAAA,YAAY,IAAI,+BAAS,EAAzB,CAAyB,EAAE,CAAC,+BAAS,EAAE,YAAY,CAAC,CAAC,CAAA;AAC5E,CAAC,CAAA;AARY,QAAA,YAAY,gBAQxB"}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import { ComboBox } from './ComboBox';
+export * from './ComboBox';
+export * from './types';
+export default ComboBox;

package/lib/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ComboBox_1 = require("./ComboBox");
+__exportStar(require("./ComboBox"), exports);
+__exportStar(require("./types"), exports);
+exports.default = ComboBox_1.ComboBox;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,uCAAqC;AAErC,6CAA0B;AAC1B,0CAAuB;AAEvB,kBAAe,mBAAQ,CAAA"}

package/lib/styles.css

@@ -0,0 +1 @@
+.combobox{width:100%;position:relative}.combobox--headline{margin-bottom:var(--spacing-2)}.combobox--header,.combobox__options{position:relative}.combobox--header{width:100%;flex-direction:column;align-items:flex-start;gap:var(--spacing-1_5);height:auto;padding:var(--spacing-3) var(--spacing) var(--spacing)}.combobox__options{width:100%;max-height:none;display:flex;flex-direction:column;overflow:scroll;height:100vh}.combobox .user-input__label-container{align-self:baseline;padding-left:var(--spacing-2)}.combobox__options .menu-item[data-background-color=default],.combobox__options .sticky-header{padding-left:0}.combobox .search.user-input__compact{margin-bottom:var(--spacing-2)}.combobox__options .sticky-header{position:-webkit-sticky;position:sticky;top:0;background-color:var(--palette-white);padding:var(--spacing) var(--spacing) 0}.combobox__options .menu-item[data-background-color=default]{padding:var(--spacing)}.combobox__options .text--caption{color:var(--color-on-secondary)}.combobox__options .item-header{display:flex;justify-content:space-between}.combobox .user-input__label--active{color:var(--color-on)}.combobox--no-results-text{padding:var(--spacing-2) var(--spacing)}@media screen and (min-width:960px){.combobox__options{display:none;max-height:330px}.combobox .search.user-input__compact{margin-bottom:0}}

package/lib/types.d.ts

@@ -0,0 +1,25 @@
+import { MenuItemProps } from "@pixum/menu-item";
+interface ComboBoxOptionsProps {
+    options: Record<string, ComboBoxOptionProps[]> | ComboBoxOptionProps[];
+    selectedOption?: string | number;
+    onClick: (index: string | number) => void;
+}
+interface ComboBoxProps extends ComboBoxOptionsProps {
+    className?: string;
+    headline?: string;
+    helperText?: string;
+    id?: string;
+    label?: string;
+    onChange?: (value: string) => void;
+    onOutsideClick?: () => void;
+    onFocus?: () => void;
+    placeholder?: string;
+    searchPattern?: string;
+    open?: boolean;
+    value?: string | number;
+    noResultsText?: string;
+}
+interface ComboBoxOptionProps extends MenuItemProps {
+    value: string;
+}
+export { ComboBoxProps, ComboBoxOptionProps, ComboBoxOptionsProps };

package/lib/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@pixum/combobox",
+  "version": "0.1.0",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@pixum/button": "^1.14.0",
+    "@pixum/svg-icon": "^1.14.4",
+    "@pixum/text": "^1.2.2"
+  },
+  "sideEffects": false,
+  "files": [
+    "lib"
+  ],
+  "gitHead": "7a6023c7fb3514f07ebd2cf24cc026a8dcfe9f40"
+}