@simplybusiness/mobius 5.25.2 → 5.25.4

package/dist/esm/components/Combobox/Combobox.js

@@ -1,210 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames/dedupe";
-import { forwardRef, useEffect, useId, useRef, useState } from "react";
-import { useOnUnmount, useBreakpoint } from "../../hooks";
-import { TextField } from "../TextField";
-import { VisuallyHidden } from "../VisuallyHidden";
-import { Listbox } from "./Listbox"; // Import Listbox component
-import { useComboboxHighlight } from "./useComboboxHighlight";
-import { useComboboxOptions } from "./useComboboxOptions";
-import { getOptionLabel, getOptionValue, isOptionGroup } from "./utils";
-const ComboboxInner = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { id, defaultValue, value, options, asyncOptions, delay, minSearchLength, onSelected, className, placeholder, icon, onBlur, onFocus, onChange, onSearched, optionComponent, errorMessage, ...otherProps } = props;
-    // Avoid re-fetching after selecting an option
-    const skipNextDebounceRef = useRef(false);
-    const fallbackRef = useRef(null);
-    const [inputValue, setInputValue] = useState(defaultValue || "");
-    const [isOpen, setIsOpen] = useState(false);
-    const { filteredOptions, updateFilteredOptions, isLoading, error } = useComboboxOptions({
-        options,
-        asyncOptions,
-        inputValue,
-        delay,
-        minSearchLength,
-        skipNextDebounceRef
-    });
-    const { highlightedIndex, highlightedGroupIndex, highlightNextOption, highlightPreviousOption, highlightFirstOption, highlightLastOption, clearHighlight } = useComboboxHighlight(filteredOptions);
-    const showListbox = isOpen && filteredOptions && filteredOptions.length > 0;
-    const inputRef = ref || fallbackRef;
-    const listboxId = useId();
-    const statusId = useId();
-    const blurTimeoutRef = useRef(null);
-    const { down } = useBreakpoint();
-    const isMobile = down("md");
-    const handleFocus = (e)=>{
-        if (!filteredOptions || filteredOptions.length === 0) return;
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-            blurTimeoutRef.current = null;
-        } else {
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-        }
-        setIsOpen(true);
-    };
-    useOnUnmount(()=>{
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-    });
-    const handleInputChange = (e)=>{
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        setIsOpen(true);
-        clearHighlight();
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    };
-    const handleOptionSelect = (option)=>{
-        const val = getOptionValue(option);
-        if (!val) return;
-        // TODO: Declare this in the types
-        if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
-            // @ts-expect-error ref types are hard
-            setTimeout(()=>inputRef.current.focus(), 0);
-            updateFilteredOptions(option.callback());
-            return;
-        }
-        // Prevent re-fetching options after selecting an option
-        skipNextDebounceRef.current = true;
-        setIsOpen(false);
-        setInputValue(val);
-        onSelected === null || onSelected === void 0 ? void 0 : onSelected(option);
-    };
-    const getFirstOption = ()=>{
-        if (!filteredOptions) return undefined;
-        if (isOptionGroup(filteredOptions)) {
-            var _filteredOptions_;
-            return (_filteredOptions_ = filteredOptions[0]) === null || _filteredOptions_ === void 0 ? void 0 : _filteredOptions_.options[0];
-        }
-        return filteredOptions[0];
-    };
-    const getHighlightedOption = ()=>{
-        if (!filteredOptions) return undefined;
-        if (highlightedIndex === -1) return undefined;
-        if (isOptionGroup(filteredOptions)) {
-            const group = filteredOptions[highlightedGroupIndex];
-            return group === null || group === void 0 ? void 0 : group.options[highlightedIndex];
-        }
-        return filteredOptions[highlightedIndex];
-    };
-    const getHighlightedOptionId = ()=>{
-        const option = getHighlightedOption();
-        if (!option) return undefined;
-        if (isOptionGroup(filteredOptions)) {
-            return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;
-        }
-        return `${listboxId}-option-${highlightedIndex}`;
-    };
-    const handleBlur = (e)=>{
-        // Force selection if user has matched an entry
-        const typedText = inputValue.trim().toLowerCase();
-        const highlightedOption = getHighlightedOption();
-        const label = getOptionLabel(highlightedOption);
-        if (typedText === (label === null || label === void 0 ? void 0 : label.toLowerCase())) {
-            handleOptionSelect(highlightedOption);
-        }
-        blurTimeoutRef.current = setTimeout(()=>{
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-            setIsOpen(false);
-        }, 150);
-    };
-    const handleKeyDown = (e)=>{
-        switch(e.key){
-            case "ArrowDown":
-                e.preventDefault();
-                setIsOpen(true);
-                highlightNextOption();
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                setIsOpen(true);
-                highlightPreviousOption();
-                break;
-            case "Home":
-                e.preventDefault();
-                setIsOpen(true);
-                highlightFirstOption();
-                break;
-            case "End":
-                e.preventDefault();
-                setIsOpen(true);
-                highlightLastOption();
-                break;
-            case "Enter":
-                e.preventDefault();
-                if (isOpen) {
-                    const selectedOption = getHighlightedOption() || getFirstOption();
-                    if (selectedOption) {
-                        handleOptionSelect(selectedOption);
-                    }
-                }
-                break;
-            case "Escape":
-                e.preventDefault();
-                setInputValue("");
-                setIsOpen(false);
-                clearHighlight();
-                break;
-            default:
-        }
-    };
-    useEffect(()=>{
-        if (value) {
-            setInputValue(value);
-        }
-    }, [
-        value
-    ]);
-    const classes = classNames("mobius mobius-combobox", {
-        "mobius-combobox--is-expanded": isOpen,
-        "mobius-combobox--is-loading": isLoading,
-        "mobius-combobox--is-mobile": isMobile
-    }, className);
-    return /*#__PURE__*/ _jsxs("div", {
-        id: id,
-        "data-testid": "mobius-combobox__wrapper",
-        className: classes,
-        children: [
-            isLoading && /*#__PURE__*/ _jsx(VisuallyHidden, {
-                role: "status",
-                "aria-live": "polite",
-                id: statusId,
-                elementType: "div",
-                className: "mobius-combobox__status",
-                children: "Loading options"
-            }),
-            /*#__PURE__*/ _jsx(TextField, {
-                ...otherProps,
-                className: "mobius-combobox__input",
-                role: "combobox",
-                value: inputValue,
-                placeholder: placeholder,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                onKeyDown: handleKeyDown,
-                onChange: handleInputChange,
-                autoComplete: "off",
-                "aria-describedby": isLoading ? statusId : undefined,
-                "aria-autocomplete": "list",
-                "aria-haspopup": "listbox",
-                "aria-controls": showListbox ? listboxId : undefined,
-                "aria-expanded": showListbox ? true : undefined,
-                "aria-activedescendant": highlightedIndex === -1 ? undefined : getHighlightedOptionId(),
-                prefixInside: icon,
-                ref: inputRef,
-                errorMessage: errorMessage || (error === null || error === void 0 ? void 0 : error.message) || undefined
-            }),
-            showListbox && /*#__PURE__*/ _jsx(Listbox, {
-                id: listboxId,
-                isLoading: isLoading,
-                options: filteredOptions,
-                highlightedIndex: highlightedIndex,
-                highlightedGroupIndex: highlightedGroupIndex,
-                onOptionSelect: handleOptionSelect,
-                optionComponent: optionComponent
-            })
-        ]
-    });
-});
-export const Combobox = ComboboxInner;
-
-//# sourceMappingURL=Combobox.js.map

package/dist/esm/components/Combobox/Combobox.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport type { FocusEvent } from \"react\";\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport { useOnUnmount, useBreakpoint } from \"../../hooks\";\nimport { TextField } from \"../TextField\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type { ComboboxOption, ComboboxProps, ComboboxRef } from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { useComboboxOptions } from \"./useComboboxOptions\";\nimport { getOptionLabel, getOptionValue, isOptionGroup } from \"./utils\";\n\nconst ComboboxInner = forwardRef(\n  <T extends ComboboxOption>(props: ComboboxProps<T>, ref: ComboboxRef) => {\n    const {\n      id,\n      defaultValue,\n      value,\n      options,\n      asyncOptions,\n      delay,\n      minSearchLength,\n      onSelected,\n      className,\n      placeholder,\n      icon,\n      onBlur,\n      onFocus,\n      onChange,\n      onSearched,\n      optionComponent,\n      errorMessage,\n      ...otherProps\n    } = props;\n\n    // Avoid re-fetching after selecting an option\n    const skipNextDebounceRef = useRef(false);\n    const fallbackRef = useRef<HTMLInputElement>(null);\n    const [inputValue, setInputValue] = useState(defaultValue || \"\");\n    const [isOpen, setIsOpen] = useState(false);\n    const { filteredOptions, updateFilteredOptions, isLoading, error } =\n      useComboboxOptions({\n        options,\n        asyncOptions,\n        inputValue,\n        delay,\n        minSearchLength,\n        skipNextDebounceRef,\n      });\n    const {\n      highlightedIndex,\n      highlightedGroupIndex,\n      highlightNextOption,\n      highlightPreviousOption,\n      highlightFirstOption,\n      highlightLastOption,\n      clearHighlight,\n    } = useComboboxHighlight(filteredOptions);\n\n    const showListbox = isOpen && filteredOptions && filteredOptions.length > 0;\n\n    const inputRef = ref || fallbackRef;\n    const listboxId = useId();\n    const statusId = useId();\n    const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n    const { down } = useBreakpoint();\n    const isMobile = down(\"md\");\n\n    const handleFocus = (e: FocusEvent) => {\n      if (!filteredOptions || filteredOptions.length === 0) return;\n      if (blurTimeoutRef.current) {\n        clearTimeout(blurTimeoutRef.current);\n        blurTimeoutRef.current = null;\n      } else {\n        onFocus?.(e);\n      }\n      setIsOpen(true);\n    };\n\n    useOnUnmount(() => {\n      if (blurTimeoutRef.current) {\n        clearTimeout(blurTimeoutRef.current);\n      }\n    });\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setInputValue(newValue);\n      setIsOpen(true);\n      clearHighlight();\n      onChange?.(e);\n    };\n\n    const handleOptionSelect = (option: T) => {\n      const val = getOptionValue(option);\n      if (!val) return;\n\n      // TODO: Declare this in the types\n      if (\n        typeof option === \"object\" &&\n        \"callback\" in option &&\n        option.callback &&\n        typeof option.callback === \"function\"\n      ) {\n        // @ts-expect-error ref types are hard\n        setTimeout(() => inputRef.current.focus(), 0);\n        updateFilteredOptions(option.callback());\n        return;\n      }\n\n      // Prevent re-fetching options after selecting an option\n      skipNextDebounceRef.current = true;\n\n      setIsOpen(false);\n      setInputValue(val);\n      onSelected?.(option);\n    };\n\n    const getFirstOption = () => {\n      if (!filteredOptions) return undefined;\n      if (isOptionGroup(filteredOptions)) {\n        return filteredOptions[0]?.options[0];\n      }\n\n      return filteredOptions[0];\n    };\n\n    const getHighlightedOption = () => {\n      if (!filteredOptions) return undefined;\n      if (highlightedIndex === -1) return undefined;\n\n      if (isOptionGroup(filteredOptions)) {\n        const group = filteredOptions[highlightedGroupIndex];\n        return group?.options[highlightedIndex];\n      }\n\n      return filteredOptions[highlightedIndex];\n    };\n\n    const getHighlightedOptionId = () => {\n      const option = getHighlightedOption();\n      if (!option) return undefined;\n\n      if (isOptionGroup(filteredOptions)) {\n        return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;\n      }\n\n      return `${listboxId}-option-${highlightedIndex}`;\n    };\n\n    const handleBlur = (e: FocusEvent<Element, Element>) => {\n      // Force selection if user has matched an entry\n      const typedText = inputValue.trim().toLowerCase();\n      const highlightedOption = getHighlightedOption();\n      const label = getOptionLabel(highlightedOption);\n\n      if (typedText === label?.toLowerCase()) {\n        handleOptionSelect(highlightedOption as T);\n      }\n\n      blurTimeoutRef.current = setTimeout(() => {\n        onBlur?.(e);\n        setIsOpen(false);\n      }, 150);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      switch (e.key) {\n        case \"ArrowDown\":\n          e.preventDefault();\n          setIsOpen(true);\n          highlightNextOption();\n          break;\n        case \"ArrowUp\":\n          e.preventDefault();\n          setIsOpen(true);\n          highlightPreviousOption();\n          break;\n        case \"Home\":\n          e.preventDefault();\n          setIsOpen(true);\n          highlightFirstOption();\n          break;\n        case \"End\":\n          e.preventDefault();\n          setIsOpen(true);\n          highlightLastOption();\n          break;\n        case \"Enter\":\n          e.preventDefault();\n          if (isOpen) {\n            const selectedOption = getHighlightedOption() || getFirstOption();\n            if (selectedOption) {\n              handleOptionSelect(selectedOption);\n            }\n          }\n          break;\n        case \"Escape\":\n          e.preventDefault();\n          setInputValue(\"\");\n          setIsOpen(false);\n          clearHighlight();\n          break;\n        default:\n        // Do nothing\n      }\n    };\n\n    useEffect(() => {\n      if (value) {\n        setInputValue(value);\n      }\n    }, [value]);\n\n    const classes = classNames(\n      \"mobius mobius-combobox\",\n      {\n        \"mobius-combobox--is-expanded\": isOpen,\n        \"mobius-combobox--is-loading\": isLoading,\n        \"mobius-combobox--is-mobile\": isMobile,\n      },\n      className,\n    );\n\n    return (\n      <div id={id} data-testid=\"mobius-combobox__wrapper\" className={classes}>\n        {isLoading && (\n          <VisuallyHidden\n            role=\"status\"\n            aria-live=\"polite\"\n            id={statusId}\n            elementType=\"div\"\n            className=\"mobius-combobox__status\"\n          >\n            Loading options\n          </VisuallyHidden>\n        )}\n        <TextField\n          {...otherProps}\n          className=\"mobius-combobox__input\"\n          role=\"combobox\"\n          value={inputValue}\n          placeholder={placeholder}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          onChange={handleInputChange}\n          autoComplete=\"off\"\n          aria-describedby={isLoading ? statusId : undefined}\n          aria-autocomplete=\"list\"\n          aria-haspopup=\"listbox\"\n          aria-controls={showListbox ? listboxId : undefined}\n          aria-expanded={showListbox ? true : undefined}\n          aria-activedescendant={\n            highlightedIndex === -1 ? undefined : getHighlightedOptionId()\n          }\n          prefixInside={icon}\n          ref={inputRef}\n          errorMessage={errorMessage || error?.message || undefined}\n        />\n        {showListbox && (\n          <Listbox\n            id={listboxId}\n            isLoading={isLoading}\n            options={filteredOptions}\n            highlightedIndex={highlightedIndex}\n            highlightedGroupIndex={highlightedGroupIndex}\n            onOptionSelect={handleOptionSelect}\n            optionComponent={optionComponent}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nexport const Combobox = ComboboxInner as <T extends ComboboxOption>(\n  props: ComboboxProps<T> & { ref?: ComboboxRef },\n) => JSX.Element;\n"],"names":["classNames","forwardRef","useEffect","useId","useRef","useState","useOnUnmount","useBreakpoint","TextField","VisuallyHidden","Listbox","useComboboxHighlight","useComboboxOptions","getOptionLabel","getOptionValue","isOptionGroup","ComboboxInner","props","ref","id","defaultValue","value","options","asyncOptions","delay","minSearchLength","onSelected","className","placeholder","icon","onBlur","onFocus","onChange","onSearched","optionComponent","errorMessage","otherProps","skipNextDebounceRef","fallbackRef","inputValue","setInputValue","isOpen","setIsOpen","filteredOptions","updateFilteredOptions","isLoading","error","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","showListbox","length","inputRef","listboxId","statusId","blurTimeoutRef","down","isMobile","handleFocus","e","current","clearTimeout","handleInputChange","newValue","target","handleOptionSelect","option","val","callback","setTimeout","focus","getFirstOption","undefined","getHighlightedOption","group","getHighlightedOptionId","handleBlur","typedText","trim","toLowerCase","highlightedOption","label","handleKeyDown","key","preventDefault","selectedOption","classes","div","data-testid","role","aria-live","elementType","onKeyDown","autoComplete","aria-describedby","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","message","onOptionSelect","Combobox"],"mappings":"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"}

package/dist/esm/components/Combobox/Listbox.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import { Option } from "./Option";
-import { isOptionGroup } from "./utils";
-export const Listbox = ({ id, options, highlightedIndex, highlightedGroupIndex, onOptionSelect, optionComponent })=>{
-    const classes = classNames("mobius-combobox__list");
-    function getOptionId(option, groupIndex, index) {
-        if (typeof option === "object" && "id" in option && typeof option.id === "string") {
-            return option.id;
-        }
-        return isOptionGroup(options) ? `${id}-option-${groupIndex}-${index}` : `${id}-option-${index}`;
-    }
-    if (options && options.length === 0) {
-        return /*#__PURE__*/ _jsx("div", {
-            role: "listbox",
-            id: id,
-            className: classes,
-            children: /*#__PURE__*/ _jsx("div", {
-                className: "mobius-combobox__no-options",
-                children: "No options"
-            })
-        });
-    }
-    return /*#__PURE__*/ _jsx("div", {
-        role: "listbox",
-        id: id,
-        className: classes,
-        children: isOptionGroup(options) ? options.map((option, groupIndex)=>/*#__PURE__*/ _jsxs("ul", {
-                role: "group",
-                "aria-labelledby": `${id}-group-${groupIndex}`,
-                className: "mobius-combobox__group",
-                children: [
-                    /*#__PURE__*/ _jsx("li", {
-                        role: "presentation",
-                        id: `${id}-group-${groupIndex}`,
-                        className: "mobius-combobox__group-label",
-                        children: option.heading
-                    }),
-                    option.options.map((groupOption, index)=>/*#__PURE__*/ _jsx(Option, {
-                            option: groupOption,
-                            isHighlighted: highlightedIndex === index && highlightedGroupIndex === groupIndex,
-                            onOptionSelect: onOptionSelect,
-                            optionComponent: optionComponent,
-                            id: getOptionId(groupOption, groupIndex, index)
-                        }, `${id}-option-${groupIndex}-${index}`))
-                ]
-            }, option.heading)) : typeof options !== "undefined" ? options.map((option, index)=>/*#__PURE__*/ _jsx(Option, {
-                option: option,
-                isHighlighted: highlightedIndex === index,
-                onOptionSelect: onOptionSelect,
-                optionComponent: optionComponent,
-                id: getOptionId(option, 0, index)
-            }, index)) : null
-    });
-};
-
-//# sourceMappingURL=Listbox.js.map

package/dist/esm/components/Combobox/Listbox.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Combobox/Listbox.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { Option } from \"./Option\";\nimport type {\n  ComboboxBaseProps,\n  ComboboxOption,\n  ComboboxOptions,\n} from \"./types\";\nimport { isOptionGroup } from \"./utils\";\n\nexport type ListboxProps<T extends ComboboxOption> = {\n  id: string;\n  isLoading?: boolean;\n  options: ComboboxOptions<T> | undefined;\n  highlightedIndex: number;\n  highlightedGroupIndex: number;\n  onOptionSelect: (option: T) => void;\n  optionComponent?: ComboboxBaseProps<T>[\"optionComponent\"];\n};\n\nexport const Listbox = <T extends ComboboxOption>({\n  id,\n  options,\n  highlightedIndex,\n  highlightedGroupIndex,\n  onOptionSelect,\n  optionComponent,\n}: ListboxProps<T>) => {\n  const classes = classNames(\"mobius-combobox__list\");\n\n  function getOptionId(\n    option: ComboboxOption,\n    groupIndex: number,\n    index: number,\n  ) {\n    if (\n      typeof option === \"object\" &&\n      \"id\" in option &&\n      typeof option.id === \"string\"\n    ) {\n      return option.id;\n    }\n    return isOptionGroup(options)\n      ? `${id}-option-${groupIndex}-${index}`\n      : `${id}-option-${index}`;\n  }\n\n  if (options && options.length === 0) {\n    return (\n      <div role=\"listbox\" id={id} className={classes}>\n        <div className=\"mobius-combobox__no-options\">No options</div>\n      </div>\n    );\n  }\n\n  return (\n    <div role=\"listbox\" id={id} className={classes}>\n      {isOptionGroup(options)\n        ? options.map((option, groupIndex) => (\n            <ul\n              role=\"group\"\n              key={option.heading}\n              aria-labelledby={`${id}-group-${groupIndex}`}\n              className=\"mobius-combobox__group\"\n            >\n              <li\n                role=\"presentation\"\n                id={`${id}-group-${groupIndex}`}\n                className=\"mobius-combobox__group-label\"\n              >\n                {option.heading}\n              </li>\n              {option.options.map((groupOption, index) => (\n                <Option\n                  key={`${id}-option-${groupIndex}-${index}`}\n                  option={groupOption}\n                  isHighlighted={\n                    highlightedIndex === index &&\n                    highlightedGroupIndex === groupIndex\n                  }\n                  onOptionSelect={onOptionSelect}\n                  optionComponent={optionComponent}\n                  id={getOptionId(groupOption, groupIndex, index)}\n                />\n              ))}\n            </ul>\n          ))\n        : typeof options !== \"undefined\"\n          ? options.map((option, index) => (\n              <Option\n                key={index}\n                option={option}\n                isHighlighted={highlightedIndex === index}\n                onOptionSelect={onOptionSelect}\n                optionComponent={optionComponent}\n                id={getOptionId(option, 0, index)}\n              />\n            ))\n          : null}\n    </div>\n  );\n};\n"],"names":["classNames","Option","isOptionGroup","Listbox","id","options","highlightedIndex","highlightedGroupIndex","onOptionSelect","optionComponent","classes","getOptionId","option","groupIndex","index","length","div","role","className","map","ul","aria-labelledby","li","heading","groupOption","isHighlighted"],"mappings":";AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAASC,MAAM,QAAQ,WAAW;AAMlC,SAASC,aAAa,QAAQ,UAAU;AAYxC,OAAO,MAAMC,UAAU,CAA2B,EAChDC,EAAE,EACFC,OAAO,EACPC,gBAAgB,EAChBC,qBAAqB,EACrBC,cAAc,EACdC,eAAe,EACC;IAChB,MAAMC,UAAUV,WAAW;IAE3B,SAASW,YACPC,MAAsB,EACtBC,UAAkB,EAClBC,KAAa;QAEb,IACE,OAAOF,WAAW,YAClB,QAAQA,UACR,OAAOA,OAAOR,EAAE,KAAK,UACrB;YACA,OAAOQ,OAAOR,EAAE;QAClB;QACA,OAAOF,cAAcG,WACjB,GAAGD,GAAG,QAAQ,EAAES,WAAW,CAAC,EAAEC,OAAO,GACrC,GAAGV,GAAG,QAAQ,EAAEU,OAAO;IAC7B;IAEA,IAAIT,WAAWA,QAAQU,MAAM,KAAK,GAAG;QACnC,qBACE,KAACC;YAAIC,MAAK;YAAUb,IAAIA;YAAIc,WAAWR;sBACrC,cAAA,KAACM;gBAAIE,WAAU;0BAA8B;;;IAGnD;IAEA,qBACE,KAACF;QAAIC,MAAK;QAAUb,IAAIA;QAAIc,WAAWR;kBACpCR,cAAcG,WACXA,QAAQc,GAAG,CAAC,CAACP,QAAQC,2BACnB,MAACO;gBACCH,MAAK;gBAELI,mBAAiB,GAAGjB,GAAG,OAAO,EAAES,YAAY;gBAC5CK,WAAU;;kCAEV,KAACI;wBACCL,MAAK;wBACLb,IAAI,GAAGA,GAAG,OAAO,EAAES,YAAY;wBAC/BK,WAAU;kCAETN,OAAOW,OAAO;;oBAEhBX,OAAOP,OAAO,CAACc,GAAG,CAAC,CAACK,aAAaV,sBAChC,KAACb;4BAECW,QAAQY;4BACRC,eACEnB,qBAAqBQ,SACrBP,0BAA0BM;4BAE5BL,gBAAgBA;4BAChBC,iBAAiBA;4BACjBL,IAAIO,YAAYa,aAAaX,YAAYC;2BARpC,GAAGV,GAAG,QAAQ,EAAES,WAAW,CAAC,EAAEC,OAAO;;eAbzCF,OAAOW,OAAO,KA0BvB,OAAOlB,YAAY,cACjBA,QAAQc,GAAG,CAAC,CAACP,QAAQE,sBACnB,KAACb;gBAECW,QAAQA;gBACRa,eAAenB,qBAAqBQ;gBACpCN,gBAAgBA;gBAChBC,iBAAiBA;gBACjBL,IAAIO,YAAYC,QAAQ,GAAGE;eALtBA,UAQT;;AAGZ,EAAE"}

package/dist/esm/components/Combobox/Option.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import classNames from "classnames/dedupe";
-import { getOptionValue, getOptionLabel } from "./utils";
-export const Option = ({ option, isHighlighted, onOptionSelect, optionComponent: OptionComponent, id })=>{
-    const optionRef = useRef(null);
-    useEffect(()=>{
-        if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
-            optionRef.current.scrollIntoView({
-                block: "nearest"
-            });
-        }
-    }, [
-        isHighlighted
-    ]);
-    return /*#__PURE__*/ _jsx("li", {
-        ref: optionRef,
-        role: "option",
-        id: id,
-        "aria-selected": isHighlighted,
-        onMouseDown: ()=>onOptionSelect(option),
-        className: classNames("mobius-combobox__option", "has-pii", {
-            "mobius-combobox__option--is-highlighted": isHighlighted
-        }),
-        children: OptionComponent ? /*#__PURE__*/ _jsx(OptionComponent, {
-            option: option,
-            isHighlighted: isHighlighted
-        }) : getOptionLabel(option)
-    }, getOptionValue(option));
-};
-
-//# sourceMappingURL=Option.js.map

package/dist/esm/components/Combobox/Option.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Combobox/Option.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { getOptionValue, getOptionLabel } from \"./utils\";\nimport type { ComboboxOption, ComboboxOptionProps } from \"./types\";\n\nexport const Option = <T extends ComboboxOption>({\n  option,\n  isHighlighted,\n  onOptionSelect,\n  optionComponent: OptionComponent,\n  id,\n}: ComboboxOptionProps<T>) => {\n  const optionRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (\n      isHighlighted &&\n      optionRef.current &&\n      optionRef.current.scrollIntoView\n    ) {\n      optionRef.current.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [isHighlighted]);\n\n  return (\n    <li\n      ref={optionRef}\n      role=\"option\"\n      key={getOptionValue(option)}\n      id={id}\n      aria-selected={isHighlighted}\n      onMouseDown={() => onOptionSelect(option)}\n      className={classNames(\"mobius-combobox__option\", \"has-pii\", {\n        \"mobius-combobox__option--is-highlighted\": isHighlighted,\n      })}\n    >\n      {OptionComponent ? (\n        <OptionComponent option={option} isHighlighted={isHighlighted} />\n      ) : (\n        getOptionLabel(option)\n      )}\n    </li>\n  );\n};\n"],"names":["useEffect","useRef","classNames","getOptionValue","getOptionLabel","Option","option","isHighlighted","onOptionSelect","optionComponent","OptionComponent","id","optionRef","current","scrollIntoView","block","li","ref","role","aria-selected","onMouseDown","className"],"mappings":";AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAC1C,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,cAAc,EAAEC,cAAc,QAAQ,UAAU;AAGzD,OAAO,MAAMC,SAAS,CAA2B,EAC/CC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,iBAAiBC,eAAe,EAChCC,EAAE,EACqB;IACvB,MAAMC,YAAYX,OAAsB;IAExCD,UAAU;QACR,IACEO,iBACAK,UAAUC,OAAO,IACjBD,UAAUC,OAAO,CAACC,cAAc,EAChC;YACAF,UAAUC,OAAO,CAACC,cAAc,CAAC;gBAAEC,OAAO;YAAU;QACtD;IACF,GAAG;QAACR;KAAc;IAElB,qBACE,KAACS;QACCC,KAAKL;QACLM,MAAK;QAELP,IAAIA;QACJQ,iBAAeZ;QACfa,aAAa,IAAMZ,eAAeF;QAClCe,WAAWnB,WAAW,2BAA2B,WAAW;YAC1D,2CAA2CK;QAC7C;kBAECG,gCACC,KAACA;YAAgBJ,QAAQA;YAAQC,eAAeA;aAEhDH,eAAeE;OAXZH,eAAeG;AAe1B,EAAE"}