@pixum/combobox 5.10.4-alpha.18 → 5.10.4-alpha.21

package/lib/types.d.ts

@@ -1,78 +1,216 @@
-import { LeadingType, MenuItemProps } from '@pixum/menu-item';
-import { ThemeType } from '@pixum/theme-provider';
-import { InputModesType } from '@pixum/web-input';
+import type { LeadingType, MenuItemProps } from '@pixum/menu-item';
+import type { ThemeType } from '@pixum/theme-provider';
+import type { InputModesType } from '@pixum/web-input';
 /**
- * Props for the ComboBoxOptions component
+ * An option as handed in by the consumer.
+ *
+ * Everything a `MenuItem` understands is accepted and forwarded unchanged -
+ * the ComboBox only adds `key` and `disabled` on top. That keeps existing
+ * consumers working: they pass their MenuItem props as they always did, and
+ * props the ComboBox does not know about still reach the `MenuItem`.
+ */
+export interface ComboBoxOptionItemProps extends MenuItemProps {
+    /** Unique key for the option item */
+    key?: string;
+    /**
+     * Disabled options are rendered, but skipped by mouse and keyboard.
+     *
+     * Newly added. Consumer types that already carry a `disabled` field of a
+     * different type (e.g. `disabled: 'true' | 'false'`) are no longer
+     * assignable - widen it to `boolean` on the consumer side.
+     */
+    disabled?: boolean;
+}
+/** Options are accepted either as a flat list or grouped by a group headline. */
+export type ComboBoxOptionsInput = ComboBoxOptionItemProps[] | Record<string, ComboBoxOptionItemProps[]>;
+/**
+ * An option after normalisation. Flat and grouped options are reduced to this
+ * shape once, so keyboard navigation, rendering and ARIA ids all work on the
+ * very same list in the very same order.
+ */
+export interface ComboBoxOption {
+    /** The original option as handed in by the consumer. */
+    item: ComboBoxOptionItemProps;
+    /**
+     * Stable value of the option, reported by `onOptionItemClick` and compared
+     * against `value`. Resolved by `resolveOptionValue`: the option's `text` when
+     * it is a string, otherwise `key`, otherwise the render index.
+     */
+    value: string;
+    /** Position in render order. Drives the DOM id and the keyboard navigation. */
+    index: number;
+    /** DOM id, referenced by `aria-activedescendant`. */
+    id: string;
+    /** Group headline the option belongs to, `undefined` for flat lists. */
+    group?: string;
+    /** Whether the option can be activated. */
+    disabled: boolean;
+}
+/** Options of one render group, produced by `groupOptions`. */
+export interface ComboBoxOptionGroup {
+    /** Group headline, `undefined` for flat lists. */
+    group?: string;
+    /** Options of this group, still carrying their global render index. */
+    options: ComboBoxOption[];
+}
+/** ARIA props for the element that owns the `combobox` role. */
+export interface ComboBoxAriaProps {
+    role: 'combobox';
+    'aria-expanded': boolean;
+    'aria-haspopup': 'listbox';
+    'aria-controls': string | undefined;
+    'aria-activedescendant': string | undefined;
+    'aria-autocomplete': 'list' | 'none';
+}
+/** ARIA props for the element that owns the `listbox` role. */
+export interface ListboxAriaProps {
+    role: 'listbox';
+    id: string;
+    /** Only set for multi select; single select listboxes omit it. */
+    'aria-multiselectable'?: boolean;
+}
+/**
+ * Public options contract, kept for backwards compatibility.
+ *
+ * In the previous version this interface was the base of `ComboBoxProps` and
+ * the prop type of
+ * the exported options component. It describes the options as the *consumer*
+ * hands them in - not the normalised list the internal panel renders. The
+ * internal shape now lives in `ComboBoxOptionsPanelProps`.
+ *
+ * @deprecated Use `ComboBoxProps` (or `Pick<ComboBoxProps, 'options'>`)
+ * directly. Kept so existing imports do not silently change meaning; will be
+ * removed in the next major.
  */
 export interface ComboBoxOptionsProps {
-    /** Options to display in the combobox, can be grouped or a flat array */
-    options: Record<string, ComboBoxOptionItemProps[]> | ComboBoxOptionItemProps[];
-    /** Currently selected option value */
+    /** Options to display, either flat or grouped. */
+    options: ComboBoxOptionsInput;
+    /**
+     * Currently selected option value.
+     *
+     * @deprecated Use `value`. When both are set, `value` wins.
+     */
     selectedOption?: string;
-    /** Callback fired when an option is clicked */
+    /**
+     * Callback fired when an option is clicked.
+     *
+     * @deprecated Use `onOptionItemClick`. On `ComboBoxProps` this prop is
+     * narrowed to the trigger click handler `() => void`.
+     */
     onClick?: (value: string) => void;
-    /** Type of leading element to display (icon, avatar, etc.) */
+    /** Type of leading element to display (icon, avatar, checkbox …). */
+    leadingType?: LeadingType;
+    /** Additional details rendered below the options. */
+    optionDetails?: React.ReactNode;
+}
+/**
+ * Props of the rendered options panel - the internal, normalised shape.
+ *
+ * This is what `ComboBoxOptions` consumes. It is exported so custom panels can
+ * be typed against it, but it is not part of the consumer-facing API and may
+ * change without a major bump.
+ */
+export interface ComboBoxOptionsPanelProps {
+    /** Normalised options in render order. */
+    options: ComboBoxOption[];
+    /** ARIA props of the listbox element. */
+    listboxAriaProps: ListboxAriaProps;
+    /** Values that are currently selected. */
+    selectedValues: string[];
+    /** DOM id of the active option (`aria-activedescendant`). */
+    activeOptionId?: string;
+    /** Type of the leading element, e.g. a checkbox for multi select. */
     leadingType?: LeadingType;
-    /** Additional details to display below the options */
+    /** Additional details rendered as a sticky footer below the options. */
     optionDetails?: React.ReactNode;
+    /** Called with the value of the clicked option. */
+    onOptionClick: (value: string) => void;
 }
 /**
- * Props for the ComboBox component
+ * Props of the ComboBox component.
+ *
+ * Extends the deprecated `ComboBoxOptionsProps` so that consumers who built
+ * their own prop types on top of it keep compiling.
  */
 export interface ComboBoxProps extends ComboBoxOptionsProps {
-    /** Additional CSS class name for the component */
+    /** Additional CSS class name for the trigger field. */
     className?: string;
-    /** Name attribute for the input field */
+    /** Name attribute for the input field. */
     name?: string;
-    /** Headline text displayed in mobile bottom sheet */
+    /**
+     * ID attribute for the input field.
+     *
+     * @deprecated The trigger generates its own ids for the ARIA wiring; `id` is
+     * forwarded to the underlying input untouched and no longer used internally.
+     */
+    id?: string;
+    /** Headline text displayed in the mobile bottom sheet. */
     headline?: string;
-    /** Helper text displayed below the input */
+    /** Helper text displayed below the input field. */
     helperText?: string;
-    /** ID attribute for the input field */
-    id?: string;
-    /** Label text for the input field */
+    /** Label text for the input field. */
     label?: string;
-    /** Whether the dropdown/bottom sheet is currently open */
+    /** Options to display, either flat or grouped. */
+    options: ComboBoxOptionsInput;
+    /** Whether the popover / bottom sheet is currently open. */
     isOpen: boolean;
-    /** State setter function to control open/close state */
+    /** State setter that controls the open state. */
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    /** Callback fired when the search input value changes */
-    onChange?: (value: string) => void;
-    /** Callback fired when an option item is clicked */
+    /**
+     * Selected value: a string for single select, an array of strings when
+     * `multiple` is set.
+     *
+     * The array member is new in this version. Code that *reads* this prop back
+     * out of
+     * a props object has to narrow it (`Array.isArray(value)`).
+     */
+    value?: string | string[];
+    /** Allows selecting several options; combine with a checkbox `leadingType`. */
+    multiple?: boolean;
+    /** Called with the value of the selected (in multi select: toggled) option. */
     onOptionItemClick?: (value: string) => void;
-    /** Callback fired when user clicks outside the component */
+    /** Called when the search input value changes. */
+    onChange?: (value: string) => void;
+    /** Called when the user clicks outside of the component. */
     onOutsideClick?: () => void;
-    /** Callback fired when the input field is clicked */
+    /** Called when the trigger field is clicked. */
     onClick?: () => void;
-    /** Callback fired when the bottom sheet is closed */
+    /** Called when the bottom sheet has been closed. */
     onSheetClose?: () => void;
-    /** Placeholder text for the input field */
+    /** Placeholder text for the input field. */
     placeholder?: string;
-    /** Search pattern/regex for input validation */
+    /** Search pattern for input validation. */
     searchPattern?: string;
-    /** Current value of the combobox */
-    value?: string;
-    /** Text to display when no results are found */
+    /** Text to display when there is no option to show. */
     noResultsText?: string;
-    /** Input mode for mobile keyboards (text, numeric, etc.) */
+    /** Input mode for mobile keyboards. */
     inputMode?: InputModesType;
-    /** Whether to show the search input field */
+    /** Renders a search input inside the popover / bottom sheet. */
     withSearch?: boolean;
-    /** Whether the combobox is disabled */
+    /** Enter opens the closed list. Disable it inside forms with implicit submit. */
+    openOnEnter?: boolean;
+    /** Whether the combobox is disabled. */
     disabled?: boolean;
-    /** Show disabled style + horizontal shimmer animation while content is loading */
+    /** Disabled style plus shimmer animation while content is loading. */
     loading?: boolean;
-    /** Theme configuration for the component */
+    /** Type of the leading element of an option (icon, avatar, checkbox …). */
+    leadingType?: LeadingType;
+    /** Additional details rendered below the options. */
+    optionDetails?: React.ReactNode;
+    /** Theme configuration for the component. */
     theme?: ThemeType;
-    /** Custom slot that replaces the standard options/no-results block */
+    /** Custom slot that replaces the standard options / no-results block. */
     optionsSlot?: React.ReactNode;
-    /** Icon element displayed at the leading (left) side of the trigger input */
+    /**
+     * Icon element displayed at the leading side of the trigger input.
+     *
+     * Deliberately `ReactNode`, not `ReactElement`: fragments, strings and
+     * conditional `false` have always been accepted here.
+     */
     leadingIcon?: React.ReactNode;
-}
-/**
- * Props for individual ComboBox option items
- */
-export interface ComboBoxOptionItemProps extends MenuItemProps {
-    /** Unique key for the option item */
-    key?: string;
+    /**
+     * Formats the selected values for the trigger field.
+     * Defaults to the labels of the selected options joined by a comma.
+     */
+    renderValue?: (labels: string[]) => string;
 }

package/lib/utils/index.d.ts

@@ -1,2 +1 @@
-export * from './calculateListMaxHeight';
-export * from './scrollOptionToViewport';
+export * from './options';

package/lib/utils/index.js

@@ -1,3 +1,2 @@
-export * from './calculateListMaxHeight';
-export * from './scrollOptionToViewport';
+export * from './options';
 //# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/lib/utils/options.d.ts

@@ -1,4 +1,41 @@
-import type { ComboBoxOption, ComboBoxOptionGroup, ComboBoxOptionsInput } from '../types';
+import type { MenuItemProps } from '@pixum/menu-item';
+import type { ComboBoxOption, ComboBoxOptionGroup, ComboBoxOptionItemProps, ComboBoxOptionsInput } from '../types';
+/**
+ * Resolves the stable value of an option.
+ *
+ * `MenuItemProps` does not guarantee a plain string `text`, so the value is
+ * resolved in three steps: the visible label first - that is the value existing
+ * consumers pass in as `value` and get back from `onOptionItemClick` -, then
+ * the explicit `key`, and finally the render index as a last resort so that
+ * options without a label still get a unique value.
+ *
+ * @param item - The option as handed in by the consumer
+ * @param index - Position of the option in render order
+ * @returns The stable value of the option
+ */
+export declare function resolveOptionValue(item: ComboBoxOptionItemProps, index: number): string;
+/**
+ * Returns the label of an option for the trigger field.
+ *
+ * Falls back to the resolved value when the option renders a custom node
+ * instead of a plain string.
+ *
+ * @param option - A normalised option
+ * @returns The label to display in the trigger field
+ */
+export declare function getOptionLabel(option: ComboBoxOption): string;
+/**
+ * Strips the ComboBox specific props from an option so the rest can be spread
+ * onto the `MenuItem`.
+ *
+ * `key` is a reserved React prop and `disabled` is handled by the option
+ * wrapper (`aria-disabled` plus the click guard); everything else belongs to
+ * `MenuItem` and is forwarded untouched.
+ *
+ * @param item - The option as handed in by the consumer
+ * @returns The props meant for the `MenuItem`
+ */
+export declare function toMenuItemProps({ key, disabled, ...menuItemProps }: ComboBoxOptionItemProps): MenuItemProps;
 /**
  * Normalises flat and grouped options into one list in render order.
  *

package/lib/utils/options.js

@@ -1,3 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * Resolves the stable value of an option.
+ *
+ * `MenuItemProps` does not guarantee a plain string `text`, so the value is
+ * resolved in three steps: the visible label first - that is the value existing
+ * consumers pass in as `value` and get back from `onOptionItemClick` -, then
+ * the explicit `key`, and finally the render index as a last resort so that
+ * options without a label still get a unique value.
+ *
+ * @param item - The option as handed in by the consumer
+ * @param index - Position of the option in render order
+ * @returns The stable value of the option
+ */
+export function resolveOptionValue(item, index) {
+    if (typeof item.text === 'string' && item.text)
+        return item.text;
+    if (item.key)
+        return item.key;
+    return `option-${index}`;
+}
+/**
+ * Returns the label of an option for the trigger field.
+ *
+ * Falls back to the resolved value when the option renders a custom node
+ * instead of a plain string.
+ *
+ * @param option - A normalised option
+ * @returns The label to display in the trigger field
+ */
+export function getOptionLabel(option) {
+    if (typeof option.item.text === 'string' && option.item.text) {
+        return option.item.text;
+    }
+    return option.value;
+}
+/**
+ * Strips the ComboBox specific props from an option so the rest can be spread
+ * onto the `MenuItem`.
+ *
+ * `key` is a reserved React prop and `disabled` is handled by the option
+ * wrapper (`aria-disabled` plus the click guard); everything else belongs to
+ * `MenuItem` and is forwarded untouched.
+ *
+ * @param item - The option as handed in by the consumer
+ * @returns The props meant for the `MenuItem`
+ */
+export function toMenuItemProps(_a) {
+    var { key, disabled } = _a, menuItemProps = __rest(_a, ["key", "disabled"]);
+    return menuItemProps;
+}
 /**
  * Normalises flat and grouped options into one list in render order.
  *
@@ -16,12 +77,11 @@ export function normaliseOptions(options, listboxId) {
     const normalised = [];
     groups.forEach(([group, items]) => {
         items.forEach(item => {
-            var _a;
             const index = normalised.length;
             normalised.push({
                 item,
                 group: group || undefined,
-                value: (_a = item.value) !== null && _a !== void 0 ? _a : item.text,
+                value: resolveOptionValue(item, index),
                 index,
                 id: `${listboxId}-option-${index}`,
                 disabled: item.disabled === true,

package/lib/utils/options.js.map

@@ -1 +1 @@
-{"version":3,"file":"options.js","sourceRoot":"","sources":["../../src/utils/options.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAA6B,EAC7B,SAAiB;IAEjB,MAAM,MAAM,GAA0C,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAC1E,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;QACjB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAE3B,MAAM,UAAU,GAAqB,EAAE,CAAA;IAEvC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE;QAChC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;;YACnB,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAA;YAE/B,UAAU,CAAC,IAAI,CAAC;gBACd,IAAI;gBACJ,KAAK,EAAE,KAAK,IAAI,SAAS;gBACzB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,IAAI;gBAC9B,KAAK;gBACL,EAAE,EAAE,GAAG,SAAS,WAAW,KAAK,EAAE;gBAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;aACjC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,UAAU,CAAA;AACnB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,OAAyB;IACpD,OAAO,OAAO,CAAC,MAAM,CAAwB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QAC9D,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QAEzC,IAAI,OAAO,IAAI,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,EAAE,CAAC;YAC9C,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAE5B,OAAO,MAAM,CAAA;QACf,CAAC;QAED,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAEvD,OAAO,MAAM,CAAA;IACf,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,KAAoC;IAC/D,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAA;IAEtC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AAC7B,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAAyB,EACzB,KAAa,EACb,KAAa;IAEb,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAA;IAC1B,IAAI,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAE7B,IAAI,KAAK,GAAG,KAAK,CAAA;IAEjB,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC;QAC5C,KAAK,GAAG,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG,MAAM,CAAA;QAEzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ;YAAE,OAAO,KAAK,CAAA;IAC5C,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC"}
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../src/utils/options.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@pixum/combobox",
-  "version": "5.10.4-alpha.18+d1e52db7f",
+  "version": "5.10.4-alpha.21+b5dfcedf0",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "license": "UNLICENSED",
   "peerDependencies": {
-    "@pixum/bottom-sheet": "3.0.18",
-    "@pixum/menu": "3.0.14",
-    "@pixum/menu-item": "2.0.14",
-    "@pixum/text": ">=3.7.0",
-    "@pixum/theme-provider": "4.2.20",
-    "@pixum/web-input": "2.1.0"
+    "@pixum/bottom-sheet": "4.9.0",
+    "@pixum/menu": "4.4.2",
+    "@pixum/menu-item": "3.4.3",
+    "@pixum/text": "3.7.0",
+    "@pixum/theme-provider": "^6.0.0",
+    "@pixum/web-input": "2.5.6"
   },
   "files": [
     "lib"
@@ -18,5 +18,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "d1e52db7fc60033d1e40fedde10ee6e52216e657"
+  "gitHead": "b5dfcedf09cddc006962439c0a7338cd2b457ba4"
 }

package/lib/ComboboxOptions/Options.d.ts

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

package/lib/ComboboxOptions/Options.js

@@ -1,19 +0,0 @@
-import MenuItem from '@pixum/menu-item';
-import clsx from 'clsx';
-import React from 'react';
-const Options = ({ items, selectedOption, onClick, leadingType, }) => (React.createElement(React.Fragment, null, items.map((item) => {
-    var _a;
-    const itemText = item.text;
-    const isSelected = selectedOption === ((item === null || item === void 0 ? void 0 : item.label) || itemText);
-    return (React.createElement("div", { key: `combobox-item-wrapper-${itemText}`, className: "combobox__option-wrapper", role: "button", tabIndex: 0, onPointerDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onClickCapture: (e) => {
-            e.stopPropagation();
-            onClick === null || onClick === void 0 ? void 0 : onClick(itemText);
-        } },
-        React.createElement(MenuItem, { tabIndex: -1, className: clsx(isSelected && 'selected'), onMouseEnter: item.onMouseEnter, leadingProps: leadingType
-                ? { name: itemText, type: leadingType }
-                : undefined, selected: selectedOption === itemText, text: itemText, subtext: item.subtext, subItemProps: {
-                text: (_a = item.subItemProps) === null || _a === void 0 ? void 0 : _a.text,
-            } })));
-})));
-export default Options;
-//# sourceMappingURL=Options.js.map

package/lib/ComboboxOptions/Options.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Options.js","sourceRoot":"","sources":["../../src/ComboboxOptions/Options.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAwC,MAAM,kBAAkB,CAAA;AACvE,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,OAAO,GAA2B,CAAC,EACvC,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACZ,EAAE,EAAE,CAAC,CACJ,0CACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAmB,EAAE,EAAE;;IACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAA;IAC1B,MAAM,UAAU,GAAG,cAAc,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,QAAQ,CAAC,CAAA;IAE/D,OAAO,CACL,6BACE,GAAG,EAAE,yBAAyB,QAAQ,EAAE,EACxC,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACzC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACxC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;YACpB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,QAAQ,CAAC,CAAA;QACrB,CAAC;QAED,oBAAC,QAAQ,IACP,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,EACzC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EACV,WAAW;gBACT,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE;gBACvC,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,cAAc,KAAK,QAAQ,EACrC,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE;gBACZ,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;aAC9B,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CACD,CACJ,CAAA;AAED,eAAe,OAAO,CAAA"}

package/lib/ComboboxOptions/OptionsGroup.d.ts

@@ -1,12 +0,0 @@
-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;
-    leadingType?: LeadingType;
-}
-declare const OptionsGroup: React.FC<OptionsGroupProps>;
-export default OptionsGroup;

package/lib/ComboboxOptions/OptionsGroup.js

@@ -1,8 +0,0 @@
-import Text, { TextVariant } from '@pixum/text';
-import React from 'react';
-import Options from './Options';
-const OptionsGroup = ({ group, items, selectedOption, onClick, leadingType, }) => (React.createElement("div", { className: "combobox__options-group", key: `combobox__options-group-${group}` },
-    React.createElement(Text, { variant: TextVariant.HEADLINE, className: "combobox__sticky-header" }, group),
-    React.createElement(Options, { items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })));
-export default OptionsGroup;
-//# sourceMappingURL=OptionsGroup.js.map

package/lib/ComboboxOptions/OptionsGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionsGroup.js","sourceRoot":"","sources":["../../src/ComboboxOptions/OptionsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,OAAO,MAAM,WAAW,CAAA;AAW/B,MAAM,YAAY,GAAgC,CAAC,EACjD,KAAK,EACL,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACZ,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,2BAA2B,KAAK,EAAE;IAEvC,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,EAAC,yBAAyB,IACrE,KAAK,CACD;IACP,oBAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACE,CACP,CAAA;AAED,eAAe,YAAY,CAAA"}

package/lib/ComboboxOptions/index.d.ts

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

package/lib/ComboboxOptions/index.js

@@ -1,19 +0,0 @@
-import React, { useEffect } from 'react';
-import Menu from '@pixum/menu';
-import { scrollOptionToViewport } from '../helper/scrollOptionToViewport';
-import OptionsGroup from './OptionsGroup';
-import Options from './Options';
-import useIsDesktopScreenWidth from '../helper/useIsDesktopScreenWidth';
-const ComboBoxOptions = ({ options, onClick, selectedOption, leadingType, optionDetails, }) => {
-    const isDesktop = useIsDesktopScreenWidth();
-    const optionsWithoutGroup = Array.isArray(options);
-    const optionsWithGroup = Object.entries(options);
-    useEffect(() => {
-        scrollOptionToViewport(isDesktop);
-    }, [isDesktop]);
-    return (React.createElement(Menu, { className: "combobox__options scrollable", "data-tappable": "true" },
-        optionsWithoutGroup ? (React.createElement(Options, { items: options, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })) : (React.createElement(React.Fragment, null, optionsWithGroup.map(([group, items]) => (React.createElement(OptionsGroup, { group: group, items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType }))))),
-        optionDetails && (React.createElement("div", { className: "combobox__option-details text--caption" }, optionDetails))));
-};
-export default ComboBoxOptions;
-//# sourceMappingURL=index.js.map

package/lib/ComboboxOptions/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ComboboxOptions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AAEzE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,uBAAuB,MAAM,mCAAmC,CAAA;AAEvE,MAAM,eAAe,GAAmC,CAAC,EACvD,OAAO,EACP,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,GACd,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAA;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAClD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB,CAAC,SAAS,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAC,8BAA8B,mBAC1B,MAAM;QAEnB,mBAAmB,CAAC,CAAC,CAAC,CACrB,oBAAC,OAAO,IACN,KAAK,EAAE,OAAO,EACd,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,0CACG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACxC,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CACD,CACJ;QACA,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAC,wCAAwC,IACpD,aAAa,CACV,CACP,CACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/lib/helper/calculateListMaxHeight.d.ts

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

package/lib/helper/calculateListMaxHeight.js

@@ -1,8 +0,0 @@
-export const calculateListMaxHeight = () => {
-    const windowHeight = window.innerHeight;
-    const headerHeight = 50;
-    const inputFieldHeight = 35;
-    const maxListHeight = windowHeight - headerHeight - inputFieldHeight;
-    return maxListHeight;
-};
-//# sourceMappingURL=calculateListMaxHeight.js.map

package/lib/helper/calculateListMaxHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"calculateListMaxHeight.js","sourceRoot":"","sources":["../../src/helper/calculateListMaxHeight.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACvC,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;AAEvB,CAAC,CAAA"}

package/lib/helper/scrollOptionToViewport.d.ts

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

package/lib/helper/scrollOptionToViewport.js

@@ -1,19 +0,0 @@
-export const scrollOptionToViewport = (isDesktop) => {
-    const comboboxOptions = isDesktop
-        ? document.querySelector('.menu')
-        : document.querySelector('.combobox__options');
-    const selectedItem = document.querySelector('.menu-item.selected');
-    if (selectedItem && comboboxOptions) {
-        let comboboxOptionsGroup = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.parentElement;
-        if (comboboxOptionsGroup) {
-            const stickyHeader = comboboxOptionsGroup === null || comboboxOptionsGroup === void 0 ? void 0 : comboboxOptionsGroup.querySelector('.sticky-header');
-            const stickyHeaderOffset = stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.offsetTop;
-            comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: stickyHeaderOffset });
-        }
-        else {
-            const selectedItemOffset = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.offsetTop;
-            comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: selectedItemOffset });
-        }
-    }
-};
-//# sourceMappingURL=scrollOptionToViewport.js.map

package/lib/helper/scrollOptionToViewport.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scrollOptionToViewport.js","sourceRoot":"","sources":["../../src/helper/scrollOptionToViewport.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAkB,EAAE,EAAE;IAC3D,MAAM,eAAe,GAAG,SAAS;QAC/B,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAiB;QAClD,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAiB,CAAA;IACjE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CACzC,qBAAqB,CACP,CAAA;IAEhB,IAAI,YAAY,IAAI,eAAe,EAAE,CAAC;QACpC,IAAI,oBAAoB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,aAAa,CAAA;QAEtD,IAAI,oBAAoB,EAAE,CAAC;YACzB,MAAM,YAAY,GAAG,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,CACtD,gBAAgB,CACF,CAAA;YAChB,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,CAAC,CAAA;QACxD,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,CAAC,CAAA;QACxD,CAAC;IACH,CAAC;AACH,CAAC,CAAA"}

package/lib/helper/useIsDesktopScreenWidth.d.ts

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

package/lib/helper/useIsDesktopScreenWidth.js

@@ -1,20 +0,0 @@
-import { useState, useEffect } from 'react';
-const useIsDesktopScreenWidth = () => {
-    const hasWindowObject = typeof window !== 'undefined';
-    if (hasWindowObject) {
-        const [screenWidth, setScreenWidth] = useState(window.innerWidth);
-        useEffect(() => {
-            const handleResize = () => {
-                setScreenWidth(window.innerWidth);
-            };
-            window.addEventListener('resize', handleResize);
-            return () => {
-                window.removeEventListener('resize', handleResize);
-            };
-        }, []);
-        return screenWidth > 960;
-    }
-    return false;
-};
-export default useIsDesktopScreenWidth;
-//# sourceMappingURL=useIsDesktopScreenWidth.js.map

package/lib/helper/useIsDesktopScreenWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsDesktopScreenWidth.js","sourceRoot":"","sources":["../../src/helper/useIsDesktopScreenWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACnC,MAAM,eAAe,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;IAErD,IAAI,eAAe,EAAE,CAAC;QACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;QAEjE,SAAS,CAAC,GAAG,EAAE;YACb,MAAM,YAAY,GAAG,GAAG,EAAE;gBACxB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;YACnC,CAAC,CAAA;YAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;YAE/C,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;YACpD,CAAC,CAAA;QACH,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,OAAO,WAAW,GAAG,GAAG,CAAA;IAC1B,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED,eAAe,uBAAuB,CAAA"}