@simplybusiness/mobius 5.25.2 → 5.25.4

package/dist/cjs/components/Checkbox/CheckboxGroup.js

@@ -1,119 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "CheckboxGroup", {
-    enumerable: true,
-    get: function() {
-        return CheckboxGroup;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
-const _react = require("react");
-const _hooks = require("../../hooks");
-const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
-const _ErrorMessage = require("../ErrorMessage");
-const _Label = require("../Label");
-const _Checkbox = require("./Checkbox");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, lastItemDisables = false, ...rest } = props;
-    const [selected, setSelected] = (0, _react.useState)(defaultValue);
-    const checkboxGroupClasses = (0, _dedupe.default)("mobius", "mobius-checkbox-group", className, {
-        "--is-horizontal": orientation === "horizontal",
-        "--is-vertical": orientation === "vertical",
-        "--is-required": typeof isRequired === "boolean" && isRequired,
-        "--is-optional": typeof isRequired === "boolean" && !isRequired
-    });
-    const validationClasses = (0, _hooks.useValidationClasses)({
-        validationState,
-        isInvalid
-    });
-    const labelClasses = (0, _dedupe.default)({
-        "--is-disabled": isDisabled
-    }, validationClasses);
-    const errorMessageId = (0, _react.useId)();
-    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
-    const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([
-        shouldErrorMessageShow,
-        props["aria-describedby"]
-    ]);
-    const labelId = (0, _react.useId)();
-    const handleChange = (event, isLastItem = false)=>{
-        const { target: { value, checked } } = event;
-        let newValue = [
-            ...selected
-        ];
-        if (!checked) {
-            newValue = selected.filter((item)=>item !== value);
-        }
-        if (checked) {
-            newValue = [
-                ...selected,
-                value
-            ];
-        }
-        if (checked && lastItemDisables && isLastItem) {
-            newValue = [
-                value
-            ];
-        }
-        setSelected(newValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    };
-    const childrenArray = _react.Children.toArray(children);
-    const lastCheckbox = childrenArray.filter((child)=>/*#__PURE__*/ (0, _react.isValidElement)(child) && child.type === _Checkbox.Checkbox).pop();
-    const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        ...rest,
-        "aria-labelledby": props["aria-labelledby"] || labelId,
-        ref: ref,
-        className: checkboxGroupClasses,
-        role: "group",
-        style: {
-            "--checkbox-items-per-row": itemsPerRow || _react.Children.count(children)
-        },
-        children: [
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
-                elementType: "span",
-                id: labelId,
-                className: labelClasses,
-                children: label
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "mobius-checkbox-group__wrapper",
-                children: childrenArray.map((child)=>{
-                    if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
-                        // lastItemDisables support
-                        const isLastItem = child === lastCheckbox;
-                        const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
-                        return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                            isDisabled: isChildDisabled,
-                            isRequired,
-                            isReadOnly,
-                            isInvalid,
-                            isLastItem,
-                            selected: selected.includes(child.props.value),
-                            onChange: handleChange,
-                            "aria-describedby": describedBy
-                        });
-                    }
-                    return child;
-                })
-            }),
-            errorMessage && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorMessage.ErrorMessage, {
-                id: errorMessageId,
-                errorMessage: errorMessage
-            })
-        ]
-    });
-});
-CheckboxGroup.displayName = "CheckboxGroup";
-
-//# sourceMappingURL=CheckboxGroup.js.map

package/dist/cjs/components/Checkbox/CheckboxGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  type ChangeEvent,\n  type ReactElement,\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  useState,\n} from \"react\";\nimport { useValidationClasses } from \"../../hooks\";\nimport type { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Checkbox } from \"./Checkbox\";\nimport type {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    lastItemDisables = false,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox-group\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (\n    event: ChangeEvent<CheckboxElementType>,\n    isLastItem = false,\n  ) => {\n    const {\n      target: { value, checked },\n    } = event;\n    let newValue = [...selected];\n\n    if (!checked) {\n      newValue = selected.filter(item => item !== value);\n    }\n\n    if (checked) {\n      newValue = [...selected, value];\n    }\n\n    if (checked && lastItemDisables && isLastItem) {\n      newValue = [value];\n    }\n\n    setSelected(newValue);\n    onChange?.(newValue);\n  };\n\n  const childrenArray = Children.toArray(children);\n  const lastCheckbox = childrenArray\n    .filter(\n      child =>\n        isValidElement(child) && (child as ReactElement).type === Checkbox,\n    )\n    .pop() as ReactElement<CheckboxElementType> | undefined;\n  const lastCheckboxIsChecked =\n    lastCheckbox && selected.includes(lastCheckbox.props.value);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-checkbox-group__wrapper\">\n        {childrenArray.map(child => {\n          if (isValidElement(child)) {\n            // lastItemDisables support\n            const isLastItem = child === lastCheckbox;\n            const isChildDisabled =\n              isDisabled ||\n              (lastItemDisables && lastCheckboxIsChecked && !isLastItem);\n\n            return cloneElement(child as ReactElement, {\n              isDisabled: isChildDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              isLastItem,\n              selected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\n"],"names":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","lastItemDisables","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","validationClasses","useValidationClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","isLastItem","target","value","checked","newValue","filter","item","childrenArray","Children","toArray","lastCheckbox","child","isValidElement","type","Checkbox","pop","lastCheckboxIsChecked","includes","div","aria-labelledby","role","style","count","Label","elementType","id","map","isChildDisabled","cloneElement","ErrorMessage","displayName"],"mappings":"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"}

package/dist/cjs/components/Checkbox/index.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-_export_star(require("./Checkbox"), exports);
-_export_star(require("./CheckboxGroup"), exports);
-_export_star(require("./types"), exports);
-function _export_star(from, to) {
-    Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
-            Object.defineProperty(to, k, {
-                enumerable: true,
-                get: function() {
-                    return from[k];
-                }
-            });
-        }
-    });
-    return from;
-}
-
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/Checkbox/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["export * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./types\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA"}

package/dist/cjs/components/Checkbox/types.js

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

package/dist/cjs/components/Checkbox/types.js.map

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

package/dist/cjs/components/Combobox/Combobox.js

@@ -1,225 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Combobox", {
-    enumerable: true,
-    get: function() {
-        return Combobox;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
-const _react = require("react");
-const _hooks = require("../../hooks");
-const _TextField = require("../TextField");
-const _VisuallyHidden = require("../VisuallyHidden");
-const _Listbox = require("./Listbox");
-const _useComboboxHighlight = require("./useComboboxHighlight");
-const _useComboboxOptions = require("./useComboboxOptions");
-const _utils = require("./utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const ComboboxInner = /*#__PURE__*/ (0, _react.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 = (0, _react.useRef)(false);
-    const fallbackRef = (0, _react.useRef)(null);
-    const [inputValue, setInputValue] = (0, _react.useState)(defaultValue || "");
-    const [isOpen, setIsOpen] = (0, _react.useState)(false);
-    const { filteredOptions, updateFilteredOptions, isLoading, error } = (0, _useComboboxOptions.useComboboxOptions)({
-        options,
-        asyncOptions,
-        inputValue,
-        delay,
-        minSearchLength,
-        skipNextDebounceRef
-    });
-    const { highlightedIndex, highlightedGroupIndex, highlightNextOption, highlightPreviousOption, highlightFirstOption, highlightLastOption, clearHighlight } = (0, _useComboboxHighlight.useComboboxHighlight)(filteredOptions);
-    const showListbox = isOpen && filteredOptions && filteredOptions.length > 0;
-    const inputRef = ref || fallbackRef;
-    const listboxId = (0, _react.useId)();
-    const statusId = (0, _react.useId)();
-    const blurTimeoutRef = (0, _react.useRef)(null);
-    const { down } = (0, _hooks.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);
-    };
-    (0, _hooks.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 = (0, _utils.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 ((0, _utils.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 ((0, _utils.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 ((0, _utils.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 = (0, _utils.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:
-        }
-    };
-    (0, _react.useEffect)(()=>{
-        if (value) {
-            setInputValue(value);
-        }
-    }, [
-        value
-    ]);
-    const classes = (0, _dedupe.default)("mobius mobius-combobox", {
-        "mobius-combobox--is-expanded": isOpen,
-        "mobius-combobox--is-loading": isLoading,
-        "mobius-combobox--is-mobile": isMobile
-    }, className);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        id: id,
-        "data-testid": "mobius-combobox__wrapper",
-        className: classes,
-        children: [
-            isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
-                role: "status",
-                "aria-live": "polite",
-                id: statusId,
-                elementType: "div",
-                className: "mobius-combobox__status",
-                children: "Loading options"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.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__*/ (0, _jsxruntime.jsx)(_Listbox.Listbox, {
-                id: listboxId,
-                isLoading: isLoading,
-                options: filteredOptions,
-                highlightedIndex: highlightedIndex,
-                highlightedGroupIndex: highlightedGroupIndex,
-                onOptionSelect: handleOptionSelect,
-                optionComponent: optionComponent
-            })
-        ]
-    });
-});
-const Combobox = ComboboxInner;
-
-//# sourceMappingURL=Combobox.js.map

package/dist/cjs/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":["Combobox","ComboboxInner","forwardRef","props","ref","id","defaultValue","value","options","asyncOptions","delay","minSearchLength","onSelected","className","placeholder","icon","onBlur","onFocus","onChange","onSearched","optionComponent","errorMessage","otherProps","skipNextDebounceRef","useRef","fallbackRef","inputValue","setInputValue","useState","isOpen","setIsOpen","filteredOptions","updateFilteredOptions","isLoading","error","useComboboxOptions","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","useComboboxHighlight","showListbox","length","inputRef","listboxId","useId","statusId","blurTimeoutRef","down","useBreakpoint","isMobile","handleFocus","e","current","clearTimeout","useOnUnmount","handleInputChange","newValue","target","handleOptionSelect","option","val","getOptionValue","callback","setTimeout","focus","getFirstOption","undefined","isOptionGroup","getHighlightedOption","group","getHighlightedOptionId","handleBlur","typedText","trim","toLowerCase","highlightedOption","label","getOptionLabel","handleKeyDown","key","preventDefault","selectedOption","useEffect","classes","classNames","div","data-testid","VisuallyHidden","role","aria-live","elementType","TextField","onKeyDown","autoComplete","aria-describedby","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","message","Listbox","onOptionSelect"],"mappings":"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"}

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

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Listbox", {
-    enumerable: true,
-    get: function() {
-        return Listbox;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _Option = require("./Option");
-const _utils = require("./utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const Listbox = ({ id, options, highlightedIndex, highlightedGroupIndex, onOptionSelect, optionComponent })=>{
-    const classes = (0, _classnames.default)("mobius-combobox__list");
-    function getOptionId(option, groupIndex, index) {
-        if (typeof option === "object" && "id" in option && typeof option.id === "string") {
-            return option.id;
-        }
-        return (0, _utils.isOptionGroup)(options) ? `${id}-option-${groupIndex}-${index}` : `${id}-option-${index}`;
-    }
-    if (options && options.length === 0) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            role: "listbox",
-            id: id,
-            className: classes,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "mobius-combobox__no-options",
-                children: "No options"
-            })
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        role: "listbox",
-        id: id,
-        className: classes,
-        children: (0, _utils.isOptionGroup)(options) ? options.map((option, groupIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("ul", {
-                role: "group",
-                "aria-labelledby": `${id}-group-${groupIndex}`,
-                className: "mobius-combobox__group",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
-                        role: "presentation",
-                        id: `${id}-group-${groupIndex}`,
-                        className: "mobius-combobox__group-label",
-                        children: option.heading
-                    }),
-                    option.options.map((groupOption, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Option.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__*/ (0, _jsxruntime.jsx)(_Option.Option, {
-                option: option,
-                isHighlighted: highlightedIndex === index,
-                onOptionSelect: onOptionSelect,
-                optionComponent: optionComponent,
-                id: getOptionId(option, 0, index)
-            }, index)) : null
-    });
-};
-
-//# sourceMappingURL=Listbox.js.map

package/dist/cjs/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":["Listbox","id","options","highlightedIndex","highlightedGroupIndex","onOptionSelect","optionComponent","classes","classNames","getOptionId","option","groupIndex","index","isOptionGroup","length","div","role","className","map","ul","aria-labelledby","li","heading","groupOption","Option","isHighlighted"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;mEAnBU;wBACA;uBAMO;;;;;;AAYvB,MAAMA,UAAU,CAA2B,EAChDC,EAAE,EACFC,OAAO,EACPC,gBAAgB,EAChBC,qBAAqB,EACrBC,cAAc,EACdC,eAAe,EACC;IAChB,MAAMC,UAAUC,IAAAA,mBAAU,EAAC;IAE3B,SAASC,YACPC,MAAsB,EACtBC,UAAkB,EAClBC,KAAa;QAEb,IACE,OAAOF,WAAW,YAClB,QAAQA,UACR,OAAOA,OAAOT,EAAE,KAAK,UACrB;YACA,OAAOS,OAAOT,EAAE;QAClB;QACA,OAAOY,IAAAA,oBAAa,EAACX,WACjB,GAAGD,GAAG,QAAQ,EAAEU,WAAW,CAAC,EAAEC,OAAO,GACrC,GAAGX,GAAG,QAAQ,EAAEW,OAAO;IAC7B;IAEA,IAAIV,WAAWA,QAAQY,MAAM,KAAK,GAAG;QACnC,qBACE,qBAACC;YAAIC,MAAK;YAAUf,IAAIA;YAAIgB,WAAWV;sBACrC,cAAA,qBAACQ;gBAAIE,WAAU;0BAA8B;;;IAGnD;IAEA,qBACE,qBAACF;QAAIC,MAAK;QAAUf,IAAIA;QAAIgB,WAAWV;kBACpCM,IAAAA,oBAAa,EAACX,WACXA,QAAQgB,GAAG,CAAC,CAACR,QAAQC,2BACnB,sBAACQ;gBACCH,MAAK;gBAELI,mBAAiB,GAAGnB,GAAG,OAAO,EAAEU,YAAY;gBAC5CM,WAAU;;kCAEV,qBAACI;wBACCL,MAAK;wBACLf,IAAI,GAAGA,GAAG,OAAO,EAAEU,YAAY;wBAC/BM,WAAU;kCAETP,OAAOY,OAAO;;oBAEhBZ,OAAOR,OAAO,CAACgB,GAAG,CAAC,CAACK,aAAaX,sBAChC,qBAACY,cAAM;4BAELd,QAAQa;4BACRE,eACEtB,qBAAqBS,SACrBR,0BAA0BO;4BAE5BN,gBAAgBA;4BAChBC,iBAAiBA;4BACjBL,IAAIQ,YAAYc,aAAaZ,YAAYC;2BARpC,GAAGX,GAAG,QAAQ,EAAEU,WAAW,CAAC,EAAEC,OAAO;;eAbzCF,OAAOY,OAAO,KA0BvB,OAAOpB,YAAY,cACjBA,QAAQgB,GAAG,CAAC,CAACR,QAAQE,sBACnB,qBAACY,cAAM;gBAELd,QAAQA;gBACRe,eAAetB,qBAAqBS;gBACpCP,gBAAgBA;gBAChBC,iBAAiBA;gBACjBL,IAAIQ,YAAYC,QAAQ,GAAGE;eALtBA,UAQT;;AAGZ"}

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

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Option", {
-    enumerable: true,
-    get: function() {
-        return Option;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
-const _utils = require("./utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const Option = ({ option, isHighlighted, onOptionSelect, optionComponent: OptionComponent, id })=>{
-    const optionRef = (0, _react.useRef)(null);
-    (0, _react.useEffect)(()=>{
-        if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
-            optionRef.current.scrollIntoView({
-                block: "nearest"
-            });
-        }
-    }, [
-        isHighlighted
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
-        ref: optionRef,
-        role: "option",
-        id: id,
-        "aria-selected": isHighlighted,
-        onMouseDown: ()=>onOptionSelect(option),
-        className: (0, _dedupe.default)("mobius-combobox__option", "has-pii", {
-            "mobius-combobox__option--is-highlighted": isHighlighted
-        }),
-        children: OptionComponent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionComponent, {
-            option: option,
-            isHighlighted: isHighlighted
-        }) : (0, _utils.getOptionLabel)(option)
-    }, (0, _utils.getOptionValue)(option));
-};
-
-//# sourceMappingURL=Option.js.map

package/dist/cjs/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":["Option","option","isHighlighted","onOptionSelect","optionComponent","OptionComponent","id","optionRef","useRef","useEffect","current","scrollIntoView","block","li","ref","role","aria-selected","onMouseDown","className","classNames","getOptionLabel","getOptionValue"],"mappings":";;;;+BAKaA;;;eAAAA;;;;uBALqB;+DACX;uBACwB;;;;;;AAGxC,MAAMA,SAAS,CAA2B,EAC/CC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,iBAAiBC,eAAe,EAChCC,EAAE,EACqB;IACvB,MAAMC,YAAYC,IAAAA,aAAM,EAAgB;IAExCC,IAAAA,gBAAS,EAAC;QACR,IACEP,iBACAK,UAAUG,OAAO,IACjBH,UAAUG,OAAO,CAACC,cAAc,EAChC;YACAJ,UAAUG,OAAO,CAACC,cAAc,CAAC;gBAAEC,OAAO;YAAU;QACtD;IACF,GAAG;QAACV;KAAc;IAElB,qBACE,qBAACW;QACCC,KAAKP;QACLQ,MAAK;QAELT,IAAIA;QACJU,iBAAed;QACfe,aAAa,IAAMd,eAAeF;QAClCiB,WAAWC,IAAAA,eAAU,EAAC,2BAA2B,WAAW;YAC1D,2CAA2CjB;QAC7C;kBAECG,gCACC,qBAACA;YAAgBJ,QAAQA;YAAQC,eAAeA;aAEhDkB,IAAAA,qBAAc,EAACnB;OAXZoB,IAAAA,qBAAc,EAACpB;AAe1B"}