@chayns-components/core 5.0.0-beta.89 → 5.0.0-beta.890

package/lib/cjs/components/combobox/ComboBox.js

@@ -0,0 +1,350 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _comboBox = require("../../types/comboBox");
+var _calculate = require("../../utils/calculate");
+var _environment = require("../../utils/environment");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem"));
+var _ComboBox = require("./ComboBox.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ComboBox = ({
+  direction = _comboBox.ComboBoxDirection.BOTTOM,
+  isDisabled = false,
+  lists,
+  maxHeight = '280px',
+  onSelect,
+  placeholder,
+  container = document.body,
+  selectedItem,
+  shouldShowBigImage,
+  shouldShowRoundImage,
+  onInputFocus,
+  shouldUseFullWidth = false,
+  onInputChange,
+  shouldUseCurrentItemWidth = false,
+  onInputBlur,
+  inputValue
+}) => {
+  const [internalSelectedItem, setInternalSelectedItem] = (0, _react.useState)();
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [minWidth, setMinWidth] = (0, _react.useState)(0);
+  const [bodyMinWidth, setBodyMinWidth] = (0, _react.useState)(0);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
+  const [overflowY, setOverflowY] = (0, _react.useState)('hidden');
+  const [portal, setPortal] = (0, _react.useState)();
+  const [internalCoordinates, setInternalCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const styledComboBoxElementRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const {
+    browser
+  } = (0, _chaynsApi.useDevice)();
+  const isTouch = (0, _environment.getIsTouch)();
+  const handleClick = (0, _react.useCallback)(event => {
+    if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
+      setIsAnimating(false);
+    }
+  }, [styledComboBoxElementRef]);
+  const handleOpen = (0, _react.useCallback)(() => {
+    if (styledComboBoxElementRef.current) {
+      const {
+        left: comboBoxLeft,
+        top: comboBoxTop,
+        height
+      } = styledComboBoxElementRef.current.getBoundingClientRect();
+      const {
+        left: containerLeft,
+        top: containerTop
+      } = container.getBoundingClientRect();
+      const x = comboBoxLeft - containerLeft + container.scrollLeft;
+      const y = comboBoxTop - containerTop + container.scrollTop;
+      setInternalCoordinates({
+        x,
+        y: direction === _comboBox.ComboBoxDirection.TOP ? y : y + height
+      });
+      setIsAnimating(true);
+    }
+  }, [container, direction]);
+  const handleClose = (0, _react.useCallback)(() => {
+    setIsAnimating(false);
+  }, []);
+
+  /**
+   * This function adds an event listener to the document to close the combobox when the user clicks outside of it
+   */
+  (0, _react.useEffect)(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [handleClick, styledComboBoxElementRef]);
+
+  /**
+   * This function sets the selected item
+   */
+  const handleSetSelectedItem = (0, _react.useCallback)(itemToSelect => {
+    if (typeof onSelect === 'function') {
+      const shouldPreventSelection = onSelect(itemToSelect) === false;
+      if (shouldPreventSelection) return;
+    }
+    setInternalSelectedItem(itemToSelect);
+    setIsAnimating(false);
+  }, [onSelect]);
+  (0, _react.useEffect)(() => {
+    const currentContent = contentRef.current;
+    if (portal && isAnimating && currentContent) {
+      const scrollHeight = currentContent.scrollHeight ?? 0;
+      const maxHeightInPixels = (0, _calculate.getMaxHeightInPixels)(maxHeight, styledComboBoxElementRef.current ?? document.body);
+      setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');
+    }
+  }, [isAnimating, maxHeight, portal]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = e => {
+      if (!isAnimating) {
+        return;
+      }
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        var _contentRef$current;
+        e.preventDefault();
+        const children = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.children;
+        if (children && children.length > 0) {
+          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          setFocusedIndex(newIndex);
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        var _contentRef$current2;
+        const element = (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.children[focusedIndex];
+        if (!element) {
+          return;
+        }
+        const {
+          id
+        } = element;
+        let newSelectedItem;
+        lists.some(list => {
+          newSelectedItem = list.list.find(({
+            value
+          }) => String(value) === id.replace('combobox-item__', ''));
+          return !!newSelectedItem;
+        });
+        if (!newSelectedItem) {
+          return;
+        }
+        handleSetSelectedItem(newSelectedItem);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
+
+  /**
+   * This function calculates the greatest width
+   */
+  (0, _react.useEffect)(() => {
+    var _styledComboBoxElemen;
+    const allItems = lists.flatMap(list => list.list);
+    const hasImage = allItems.some(({
+      imageUrl
+    }) => imageUrl);
+    const hasIcon = allItems.some(({
+      icons
+    }) => icons);
+    const parentWidth = ((_styledComboBoxElemen = styledComboBoxElementRef.current) === null || _styledComboBoxElemen === void 0 || (_styledComboBoxElemen = _styledComboBoxElemen.parentElement) === null || _styledComboBoxElemen === void 0 ? void 0 : _styledComboBoxElemen.getBoundingClientRect().width) ?? 0;
+    const paddingWidth = 45; // padding + border + arrow icon
+    const imageWidth = hasImage ? 32 : 0; // image width + gap if images present
+    const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present
+
+    const baseWidth = (0, _calculate.calculateContentWidth)([...allItems, {
+      text: placeholder,
+      value: 'placeholder'
+    }]);
+    const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;
+    let tmpMinWidth = calculatedWidth;
+    let tmpBodyMinWidth = calculatedWidth;
+
+    // Full width settings
+    if (shouldUseFullWidth) {
+      tmpMinWidth = parentWidth;
+      tmpBodyMinWidth = parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;
+    }
+
+    // Current item width settings
+    else if (shouldUseCurrentItemWidth && internalSelectedItem) {
+      const itemWidth = (0, _calculate.calculateContentWidth)([internalSelectedItem]) + paddingWidth + imageWidth + iconWidth;
+      tmpMinWidth = itemWidth;
+      tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
+    }
+    setMinWidth(tmpMinWidth);
+    setBodyMinWidth(tmpBodyMinWidth);
+  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);
+
+  /**
+   * This function sets the external selected item
+   */
+  (0, _react.useEffect)(() => {
+    setIsAnimating(false);
+    setInternalSelectedItem(selectedItem);
+  }, [selectedItem]);
+  const placeholderImageUrl = (0, _react.useMemo)(() => {
+    if (selectedItem) {
+      return selectedItem.imageUrl;
+    }
+    if (internalSelectedItem) {
+      return internalSelectedItem.imageUrl;
+    }
+    return undefined;
+  }, [internalSelectedItem, selectedItem]);
+  const placeholderIcon = (0, _react.useMemo)(() => {
+    if (selectedItem) {
+      return selectedItem.icons;
+    }
+    if (internalSelectedItem) {
+      return internalSelectedItem.icons;
+    }
+    return undefined;
+  }, [internalSelectedItem, selectedItem]);
+
+  /**
+   * This function resets the placeholder
+   */
+  const placeholderText = (0, _react.useMemo)(() => {
+    let text = placeholder;
+    if (selectedItem) {
+      text = selectedItem.text;
+    } else if (internalSelectedItem) {
+      text = internalSelectedItem.text;
+    }
+    return text;
+  }, [internalSelectedItem, placeholder, selectedItem]);
+
+  /**
+   * This function opens the content of the combobox
+   */
+  const handleHeaderClick = (0, _react.useCallback)(() => {
+    if (!isDisabled) {
+      if (isAnimating) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
+    }
+  }, [handleClose, handleOpen, isAnimating, isDisabled]);
+  const comboBoxGroups = (0, _react.useMemo)(() => lists.map(({
+    groupName,
+    list
+  }) => /*#__PURE__*/_react.default.createElement("div", {
+    key: groupName ?? 'default-group'
+  }, groupName && lists.length > 1 && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxTopic, null, groupName), list.map(item =>
+  /*#__PURE__*/
+  // ToDo: Cleanup this - item should be given as a prop to avoid full spreading
+  _react.default.createElement(_ComboBoxItem.default, {
+    icons: item.icons,
+    id: item.value,
+    imageUrl: item.imageUrl,
+    isDisabled: item.isDisabled,
+    isSelected: selectedItem ? item.value === selectedItem.value : false,
+    key: item.value,
+    onSelect: handleSetSelectedItem,
+    rightElement: item.rightElement,
+    shouldShowBigImage: shouldShowBigImage,
+    shouldShowRoundImage: shouldShowRoundImage,
+    subtext: item.subtext,
+    suffixElement: item.suffixElement,
+    text: item.text,
+    value: item.value,
+    textStyles: item.textStyles
+  })))), [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage]);
+  const bodyStyles = (0, _react.useMemo)(() => {
+    let styles = {
+      left: internalCoordinates.x,
+      top: internalCoordinates.y
+    };
+    if (direction === _comboBox.ComboBoxDirection.TOP) {
+      styles = {
+        ...styles,
+        transform: 'translateY(-100%)'
+      };
+    }
+    return styles;
+  }, [direction, internalCoordinates.x, internalCoordinates.y]);
+  (0, _react.useEffect)(() => {
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false
+    }, isAnimating && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
+      $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+      animate: {
+        height: 'fit-content',
+        opacity: 1
+      },
+      $overflowY: overflowY,
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      $maxHeight: maxHeight,
+      $minWidth: bodyMinWidth,
+      style: bodyStyles,
+      $direction: direction,
+      transition: {
+        duration: 0.2
+      },
+      tabIndex: 0,
+      ref: contentRef
+    }, comboBoxGroups)), container));
+  }, [bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
+    ref: styledComboBoxElementRef,
+    $shouldUseFullWidth: shouldUseFullWidth,
+    $minWidth: minWidth
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
+    $direction: direction,
+    onClick: handleHeaderClick,
+    $isOpen: isAnimating,
+    $isTouch: isTouch,
+    $isDisabled: isDisabled
+  }, typeof inputValue === 'string' ? /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxInput, {
+    disabled: isDisabled,
+    value: inputValue,
+    onChange: onInputChange,
+    onBlur: onInputBlur,
+    onFocus: onInputFocus,
+    placeholder: placeholderText
+  }) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
+    $shouldReduceOpacity: !selectedItem && !internalSelectedItem
+  }, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
+    src: placeholderImageUrl,
+    shouldShowRoundImage: shouldShowRoundImage
+  }), placeholderIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: placeholderIcon
+  }), placeholderText, internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-chevron-down']
+  }))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
+};
+ComboBox.displayName = 'ComboBox';
+var _default = exports.default = ComboBox;
+//# sourceMappingURL=ComboBox.js.map

package/lib/cjs/components/combobox/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","baseWidth","calculateContentWidth","text","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","groupName","createElement","StyledComboBoxTopic","item","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = allItems.some(({ imageUrl }) => imageUrl);\n        const hasIcon = allItems.some(({ icons }) => icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n        ]);\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        container,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    {typeof inputValue === 'string' ? (\n                        <StyledComboBoxInput\n                            disabled={isDisabled}\n                            value={inputValue}\n                            onChange={onInputChange}\n                            onBlur={onInputBlur}\n                            onFocus={onInputFocus}\n                            placeholder={placeholderText}\n                        />\n                    ) : (\n                        <StyledComboBoxPlaceholder\n                            $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                        >\n                            {placeholderImageUrl && (\n                                <StyledComboBoxPlaceholderImage\n                                    src={placeholderImageUrl}\n                                    shouldShowRoundImage={shouldShowRoundImage}\n                                />\n                            )}\n                            {placeholderIcon && <Icon icons={placeholderIcon} />}\n                            {placeholderText}\n                            {internalSelectedItem &&\n                                internalSelectedItem.suffixElement &&\n                                internalSelectedItem.suffixElement}\n                        </StyledComboBoxPlaceholder>\n                    )}\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            shouldUseFullWidth,\n            minWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/combobox/ComboBox.styles.js

@@ -0,0 +1,190 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionComboBoxBody = exports.StyledComboBoxTopic = exports.StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholder = exports.StyledComboBoxInput = exports.StyledComboBoxIconWrapper = exports.StyledComboBoxHeader = exports.StyledComboBox = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _comboBox = require("../../types/comboBox");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledComboBox = exports.StyledComboBox = _styledComponents.default.div`
+    user-select: none;
+    position: relative;
+
+    ${({
+  $shouldUseFullWidth,
+  $minWidth
+}) => $shouldUseFullWidth ? (0, _styledComponents.css)`
+                  min-width: ${$minWidth}px;
+                  width: 100%;
+              ` : (0, _styledComponents.css)`
+                  min-width: ${$minWidth}px;
+                  max-width: ${$minWidth}px;
+              `}
+`;
+const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.default.div`
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    padding: 4px 10px;
+    cursor: ${({
+  $isDisabled
+}) => !$isDisabled ? 'pointer' : 'default'};
+    background: ${({
+  theme
+}) => theme['001']};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    transition: background-color 0.2s ease-in-out;
+
+    ${({
+  $isOpen,
+  $direction
+}) => {
+  if ($isOpen) {
+    return $direction === _comboBox.ComboBoxDirection.BOTTOM ? (0, _styledComponents.css)`
+                      border-top-left-radius: 3px;
+                      border-top-right-radius: 3px;
+                  ` : (0, _styledComponents.css)`
+                      border-bottom-left-radius: 3px;
+                      border-bottom-right-radius: 3px;
+                  `;
+  }
+  return (0, _styledComponents.css)`
+            border-radius: 3px;
+        `;
+}}
+
+    ${({
+  $isTouch,
+  $isDisabled,
+  theme
+}) => !$isTouch && !$isDisabled && (0, _styledComponents.css)`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `}
+`;
+const StyledComboBoxPlaceholder = exports.StyledComboBoxPlaceholder = _styledComponents.default.div`
+    align-items: center;
+    color: ${({
+  theme
+}) => theme.text};
+    display: flex;
+    gap: 10px;
+    opacity: ${({
+  $shouldReduceOpacity
+}) => $shouldReduceOpacity ? 0.5 : 1};
+`;
+const StyledComboBoxInput = exports.StyledComboBoxInput = _styledComponents.default.input`
+    border: none;
+    background-color: transparent;
+    width: 100%;
+`;
+const StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholderImage = _styledComponents.default.img`
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${({
+  shouldShowRoundImage
+}) => shouldShowRoundImage && (0, _styledComponents.css)`
+            border-radius: 50%;
+        `}
+`;
+const StyledComboBoxIconWrapper = exports.StyledComboBoxIconWrapper = _styledComponents.default.div`
+    margin-left: 5px;
+`;
+const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background: ${({
+  theme
+}) => theme['101']};
+    display: flex;
+    position: absolute;
+    z-index: 4;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    cursor: pointer;
+    max-height: ${({
+  $maxHeight
+}) => $maxHeight};
+    overflow-y: ${({
+  $overflowY
+}) => $overflowY};
+
+    min-width: ${({
+  $minWidth
+}) => $minWidth - 2}px;
+    max-width: ${({
+  $minWidth
+}) => $minWidth - 2}px;
+
+    ${({
+  $direction
+}) => {
+  if ($direction === _comboBox.ComboBoxDirection.BOTTOM) {
+    return (0, _styledComponents.css)`
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
+            `;
+  }
+  return (0, _styledComponents.css)`
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);
+        `;
+}}
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `}
+`;
+const StyledComboBoxTopic = exports.StyledComboBoxTopic = _styledComponents.default.div`
+    align-items: center;
+    color: rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.65);
+    position: sticky;
+    top: 0;
+    border: black 5px;
+    cursor: default;
+    font-weight: bold;
+    display: flex;
+    gap: 10px;
+    z-index: 10;
+    padding: 4px 10px;
+    background-color: ${({
+  theme
+}) => theme['secondary-101']};
+`;
+//# sourceMappingURL=ComboBox.styles.js.map

package/lib/cjs/components/combobox/ComboBox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","theme","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\ntype StyledComboBoxProps = WithTheme<{\n    $shouldUseFullWidth: boolean;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) =>\n        $shouldUseFullWidth\n            ? css`\n                  min-width: ${$minWidth}px;\n                  width: 100%;\n              `\n            : css`\n                  min-width: ${$minWidth}px;\n                  max-width: ${$minWidth}px;\n              `}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    border: none;\n    background-color: transparent;\n    width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n    $minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n\n    min-width: ${({ $minWidth }) => $minWidth - 2}px;\n    max-width: ${({ $minWidth }) => $minWidth - 2}px;\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}