npm - @chayns-components/core - Versions diffs - 5.4.5-alpha.0 → 5.4.5 - Mend

@chayns-components/core 5.4.5-alpha.0 → 5.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (472) hide show

package/lib/esm/components/combobox/ComboBox.js CHANGED Viewed

@@ -10,7 +10,6 @@ import { DropdownDirection } from '../../types/dropdown';
 import { useElementSize } from '../../hooks/element';
 import { ComboBoxSize } from './ComboBox.types';
 import { getComboBoxWidthResult } from './ComboBox.utils';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const ComboBox = /*#__PURE__*/forwardRef(({
   bodyWidth,
   direction = DropdownDirection.RIGHT,
@@ -37,18 +36,16 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   onInputBlur,
   shouldShowTransparentBackground = false,
   inputValue,
-  shouldDropDownUseMaxItemWidth = false,
-  shouldEnableKeyboardHighlighting
+  shouldDropDownUseMaxItemWidth = false
 }, ref) => {
   const [internalSelectedItem, setInternalSelectedItem] = useState();
   const [isAnimating, setIsAnimating] = useState(false);
   const [minWidth, setMinWidth] = useState(undefined);
   const [bodyMinWidth, setBodyMinWidth] = useState(0);
   const [focusedIndex, setFocusedIndex] = useState(null);
+  const [availableMaxHeight, setAvailableMaxHeight] = useState(undefined);
   const isInputFocused = useRef(false);
   const styledComboBoxElementRef = useRef(null);
-  const comboBoxHeaderRef = useRef(null);
-  const comboBoxInputRef = useRef(null);
   const contentRef = useRef(null);
   const parentSize = useElementSize(styledComboBoxElementRef, {
     shouldUseParentElement: true
@@ -84,7 +81,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     setBodyMinWidth(calculatedBodyMinWidth);
   }, [functions, internalSelectedItem, lists, parentSize, placeholder, prefix, prefixMinWidth, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldShowClearIcon, shouldUseCurrentItemWidth, shouldUseFullWidth, values]);
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const shouldDisableActions = useMemo(() => {
     if (!selectedItem) {
       return false;
@@ -92,6 +88,16 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     const combinedLists = lists.flatMap(list => list.list);
     return combinedLists.length === 1 && combinedLists.some(item => item.value === selectedItem.value);
   }, [lists, selectedItem]);
+  // Limits the configured maxHeight by the height that is actually available inside the
+  // container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut
+  // off when it is opened to the top or bottom and there is not enough space.
+  const effectiveMaxHeight = useMemo(() => {
+    if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {
+      return Math.min(maxHeight, availableMaxHeight);
+    }
+    return maxHeight;
+  }, [availableMaxHeight, maxHeight]);
   const contentHeight = useMemo(() => {
     const flatItems = lists.flatMap(list => list.list);
     let height = flatItems.reduce((value, item) => {
@@ -101,11 +107,11 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     if (lists.length > 1) {
       height += lists.length * 38;
     }
-    if (maxHeight < height) {
-      height = maxHeight;
+    if (effectiveMaxHeight < height) {
+      height = effectiveMaxHeight;
     }
     return height;
-  }, [lists, maxHeight, shouldShowBigImage]);
+  }, [effectiveMaxHeight, lists, shouldShowBigImage]);
   const handleInputFocus = useCallback(event => {
     isInputFocused.current = true;
     onInputFocus?.(event);
@@ -126,23 +132,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     }
     setIsAnimating(false);
   }, [onHide]);
-  const handleContainerBlur = useCallback(event => {
-    const nextFocusedElement = event.relatedTarget;
-    const currentContainer = event.currentTarget;
-    if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !contentRef.current?.contains(nextFocusedElement)) {
-      handleClose();
-    }
-  }, [handleClose]);
-  const restoreTriggerFocus = useCallback(() => {
-    // Delay is needed so focus happens after dropdown close/render cycle.
-    requestAnimationFrame(() => {
-      if (typeof inputValue === 'string') {
-        comboBoxInputRef.current?.focus();
-        return;
-      }
-      comboBoxHeaderRef.current?.focus();
-    });
-  }, [inputValue]);
   /**
    * This function sets the selected item
@@ -158,15 +147,13 @@ const ComboBox = /*#__PURE__*/forwardRef(({
           if (shouldPreventSelection) return;
           setInternalSelectedItem(itemToSelect);
           handleClose();
-          restoreTriggerFocus();
         });
         return;
       }
     }
     setInternalSelectedItem(itemToSelect);
     handleClose();
-    restoreTriggerFocus();
-  }, [handleClose, onSelect, restoreTriggerFocus]);
+  }, [handleClose, onSelect]);
   const handleClear = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -175,12 +162,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     const handleKeyDown = e => {
       if (!isAnimating) return;
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        handleClose();
-        restoreTriggerFocus();
-        return;
-      }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault();
         const children = contentRef.current?.children;
@@ -226,7 +207,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     };
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [focusedIndex, handleClose, handleSetSelectedItem, isAnimating, lists, restoreTriggerFocus]);
+  }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
   /**
    * This function sets the external selected item
@@ -285,21 +266,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const handleHeaderKeyDown = useCallback(event => {
-    if (isDisabled || typeof inputValue === 'string') {
-      return;
-    }
-    if (event.key === 'Escape' && isAnimating) {
-      event.preventDefault();
-      handleClose();
-      restoreTriggerFocus();
-      return;
-    }
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleHeaderClick();
-    }
-  }, [handleClose, handleHeaderClick, inputValue, isAnimating, isDisabled, restoreTriggerFocus]);
   useImperativeHandle(ref, () => ({
     hide: handleClose,
     show: handleOpen
@@ -319,10 +285,8 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
-    $shouldUseFullWidth: shouldUseFullWidth,
-    onBlur: handleContainerBlur
+    $shouldUseFullWidth: shouldUseFullWidth
   }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
-    ref: comboBoxHeaderRef,
     $direction: direction,
     onClick: handleHeaderClick,
     $isOpen: isAnimating,
@@ -331,12 +295,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
-    $shouldShowBigImage: shouldShowBigImage,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
-    onKeyDown: handleHeaderKeyDown,
-    tabIndex: !isDisabled && typeof inputValue !== 'string' ? 0 : undefined,
-    role: !isDisabled && typeof inputValue !== 'string' ? 'button' : undefined,
-    "aria-expanded": !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined
+    $shouldShowBigImage: shouldShowBigImage
   }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, {
     $prefixMinWidth: prefixMinWidth
   }, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
@@ -348,7 +307,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
     icons: placeholderIcon
   }), typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
-    ref: comboBoxInputRef,
     disabled: isDisabled,
     value: inputValue,
     onChange: onInputChange,
@@ -372,18 +330,19 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     bodyWidth: bodyWidth,
     contentHeight: contentHeight,
     shouldCaptureEvents: shouldCaptureEvents,
+    onAvailableMaxHeightChange: setAvailableMaxHeight,
     onClose: handleClose,
     direction: direction,
     container: container,
     shouldShowDropdown: isAnimating,
     minBodyWidth: bodyWidth ?? bodyMinWidth
   }, /*#__PURE__*/React.createElement(StyledComboBoxBody, {
-    $maxHeight: maxHeight,
+    $maxHeight: effectiveMaxHeight,
     $minWidth: bodyWidth ?? bodyMinWidth,
     className: "chayns-scrollbar",
     ref: contentRef,
     tabIndex: 0
-  }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleHeaderKeyDown, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, maxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowKeyboardHighlighting, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
+  }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, effectiveMaxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
 });
 ComboBox.displayName = 'ComboBox';
 export default ComboBox;

package/lib/esm/components/combobox/ComboBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","names":["useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","getComboBoxWidthResult","useKeyboardFocusHighlighting","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","shouldEnableKeyboardHighlighting","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","comboBoxHeaderRef","comboBoxInputRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldShowKeyboardHighlighting","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleContainerBlur","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","restoreTriggerFocus","requestAnimationFrame","focus","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","handleHeaderKeyDown","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","onBlur","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldShowKeyboardHighlighting","onKeyDown","role","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","className","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n FocusEventHandler,\n KeyboardEventHandler,\n forwardRef,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxBody,\n StyledComboBoxClearIconWrapper,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n (\n {\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n shouldCaptureEvents,\n selectedItem,\n onHide,\n onShow,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n prefixMinWidth,\n size = ComboBoxSize.NORMAL,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n shouldShowTransparentBackground = false,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number \| undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n\n const isInputFocused = useRef(false);\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const comboBoxHeaderRef = useRef<HTMLDivElement>(null);\n const comboBoxInputRef = useRef<HTMLInputElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, {\n shouldUseParentElement: true,\n });\n\n const functions = useFunctions();\n const values = useValues();\n const isTouch = useIsTouch();\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (!parentSize) {\n return;\n }\n\n const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n getComboBoxWidthResult({\n functions,\n internalSelectedItem,\n lists,\n parentWidth: parentSize.width,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n });\n\n setMinWidth(calculatedMinWidth);\n setBodyMinWidth(calculatedBodyMinWidth);\n }, [\n functions,\n internalSelectedItem,\n lists,\n parentSize,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n ]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let height = flatItems.reduce((value, item) => {\n const isBigItem =\n shouldShowBigImage \|\|\n (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n return value + (isBigItem ? 56 : 38);\n }, 0);\n\n if (lists.length > 1) {\n height += lists.length * 38;\n }\n\n if (maxHeight < height) {\n height = maxHeight;\n }\n\n return height;\n }, [lists, maxHeight, shouldShowBigImage]);\n\n const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = true;\n onInputFocus?.(event);\n },\n [onInputFocus],\n );\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = false;\n onInputBlur?.(event);\n },\n [onInputBlur],\n );\n\n const handleOpen = useCallback(() => {\n if (typeof onShow === 'function') {\n onShow();\n }\n\n setIsAnimating(true);\n }, [onShow]);\n\n const handleClose = useCallback(() => {\n if (typeof onHide === 'function') {\n onHide();\n }\n\n setIsAnimating(false);\n }, [onHide]);\n\n const handleContainerBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n const nextFocusedElement = event.relatedTarget as Node \| null;\n const currentContainer = event.currentTarget as HTMLElement;\n\n if (\n !nextFocusedElement \|\|\n (!currentContainer.contains(nextFocusedElement) &&\n !contentRef.current?.contains(nextFocusedElement))\n ) {\n handleClose();\n }\n },\n [handleClose],\n );\n\n const restoreTriggerFocus = useCallback(() => {\n // Delay is needed so focus happens after dropdown close/render cycle.\n requestAnimationFrame(() => {\n if (typeof inputValue === 'string') {\n comboBoxInputRef.current?.focus();\n return;\n }\n\n comboBoxHeaderRef.current?.focus();\n });\n }, [inputValue]);\n\n /*\n This function sets the selected item\n /\n const handleSetSelectedItem = useCallback(\n (itemToSelect?: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const onSelectResult = onSelect(itemToSelect);\n\n if (onSelectResult === false) {\n return;\n }\n\n if (onSelectResult instanceof Promise) {\n void onSelectResult.then((shouldPreventSelection) => {\n if (shouldPreventSelection) return;\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n restoreTriggerFocus();\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n restoreTriggerFocus();\n },\n [handleClose, onSelect, restoreTriggerFocus],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'Escape') {\n e.preventDefault();\n handleClose();\n restoreTriggerFocus();\n return;\n }\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children \|\| children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') \|\|\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\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\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [\n focusedIndex,\n handleClose,\n handleSetSelectedItem,\n isAnimating,\n lists,\n restoreTriggerFocus,\n ]);\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 const shouldShowRoundPlaceholderImage = useMemo(() => {\n const selectedItemList = lists.find((list) =>\n list.list.some(\n ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n ),\n );\n\n return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n /\n This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled && !isInputFocused.current) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const handleHeaderKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(\n (event) => {\n if (isDisabled \|\| typeof inputValue === 'string') {\n return;\n }\n\n if (event.key === 'Escape' && isAnimating) {\n event.preventDefault();\n handleClose();\n restoreTriggerFocus();\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleHeaderClick();\n }\n },\n [\n handleClose,\n handleHeaderClick,\n inputValue,\n isAnimating,\n isDisabled,\n restoreTriggerFocus,\n ],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleClose,\n show: handleOpen,\n }),\n [handleClose, handleOpen],\n );\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <Fragment key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n {list.groupName}\n </StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n <ComboBoxItem\n key={`item-${item.text}`}\n item={item}\n isSelected={\n selectedItem ? item.value === selectedItem.value : false\n }\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={\n list.shouldShowRoundImage ?? shouldShowRoundImage\n }\n />\n ))}\n </Fragment>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n onBlur={handleContainerBlur}\n >\n <StyledComboBoxHeader\n ref={comboBoxHeaderRef}\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $size={size}\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n onKeyDown={handleHeaderKeyDown}\n tabIndex={!isDisabled && typeof inputValue !== 'string' ? 0 : undefined}\n role={!isDisabled && typeof inputValue !== 'string' ? 'button' : undefined}\n aria-expanded={\n !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined\n }\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n ref={comboBoxInputRef}\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper\n $isDisabled={isDisabled}\n onClick={handleClear}\n >\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $isDisabled={isDisabled}\n $size={size}\n $shouldShowBorderLeft={\n shouldShowClearIcon === true &&\n internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n shouldCaptureEvents={shouldCaptureEvents}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n >\n <StyledComboBoxBody\n $maxHeight={maxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n className=\"chayns-scrollbar\"\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n bodyMinWidth,\n bodyWidth,\n comboBoxGroups,\n container,\n contentHeight,\n direction,\n handleClear,\n handleClose,\n handleHeaderClick,\n handleHeaderKeyDown,\n handleInputBlur,\n handleInputFocus,\n inputValue,\n internalSelectedItem,\n isAnimating,\n isDisabled,\n isTouch,\n maxHeight,\n minWidth,\n onInputChange,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldChangeColor,\n shouldDisableActions,\n shouldCaptureEvents,\n shouldShowKeyboardHighlighting,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundPlaceholderImage,\n shouldShowTransparentBackground,\n shouldUseFullWidth,\n size,\n ],\n );\n },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ComboBox.js","names":["useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","getComboBoxWidthResult","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","availableMaxHeight","setAvailableMaxHeight","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onAvailableMaxHeightChange","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","className","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n FocusEventHandler,\n forwardRef,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxBody,\n StyledComboBoxClearIconWrapper,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n (\n {\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n shouldCaptureEvents,\n selectedItem,\n onHide,\n onShow,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n prefixMinWidth,\n size = ComboBoxSize.NORMAL,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n shouldShowTransparentBackground = false,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n },\n ref,\n ) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number \| undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [availableMaxHeight, setAvailableMaxHeight] = useState<number \| undefined>(undefined);\n\n const isInputFocused = useRef(false);\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, {\n shouldUseParentElement: true,\n });\n\n const functions = useFunctions();\n const values = useValues();\n const isTouch = useIsTouch();\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (!parentSize) {\n return;\n }\n\n const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n getComboBoxWidthResult({\n functions,\n internalSelectedItem,\n lists,\n parentWidth: parentSize.width,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n });\n\n setMinWidth(calculatedMinWidth);\n setBodyMinWidth(calculatedBodyMinWidth);\n }, [\n functions,\n internalSelectedItem,\n lists,\n parentSize,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n ]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n // Limits the configured maxHeight by the height that is actually available inside the\n // container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut\n // off when it is opened to the top or bottom and there is not enough space.\n const effectiveMaxHeight = useMemo(() => {\n if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {\n return Math.min(maxHeight, availableMaxHeight);\n }\n\n return maxHeight;\n }, [availableMaxHeight, maxHeight]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let height = flatItems.reduce((value, item) => {\n const isBigItem =\n shouldShowBigImage \|\|\n (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n return value + (isBigItem ? 56 : 38);\n }, 0);\n\n if (lists.length > 1) {\n height += lists.length * 38;\n }\n\n if (effectiveMaxHeight < height) {\n height = effectiveMaxHeight;\n }\n\n return height;\n }, [effectiveMaxHeight, lists, shouldShowBigImage]);\n\n const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = true;\n onInputFocus?.(event);\n },\n [onInputFocus],\n );\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = false;\n onInputBlur?.(event);\n },\n [onInputBlur],\n );\n\n const handleOpen = useCallback(() => {\n if (typeof onShow === 'function') {\n onShow();\n }\n\n setIsAnimating(true);\n }, [onShow]);\n\n const handleClose = useCallback(() => {\n if (typeof onHide === 'function') {\n onHide();\n }\n\n setIsAnimating(false);\n }, [onHide]);\n\n /*\n This function sets the selected item\n /\n const handleSetSelectedItem = useCallback(\n (itemToSelect?: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const onSelectResult = onSelect(itemToSelect);\n\n if (onSelectResult === false) {\n return;\n }\n\n if (onSelectResult instanceof Promise) {\n void onSelectResult.then((shouldPreventSelection) => {\n if (shouldPreventSelection) return;\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n },\n [handleClose, onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children \|\| children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') \|\|\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\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\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\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 const shouldShowRoundPlaceholderImage = useMemo(() => {\n const selectedItemList = lists.find((list) =>\n list.list.some(\n ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n ),\n );\n\n return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n /\n This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled && !isInputFocused.current) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleClose,\n show: handleOpen,\n }),\n [handleClose, handleOpen],\n );\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <Fragment key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n {list.groupName}\n </StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n <ComboBoxItem\n key={`item-${item.text}`}\n item={item}\n isSelected={\n selectedItem ? item.value === selectedItem.value : false\n }\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={\n list.shouldShowRoundImage ?? shouldShowRoundImage\n }\n />\n ))}\n </Fragment>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $size={size}\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper\n $isDisabled={isDisabled}\n onClick={handleClear}\n >\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $isDisabled={isDisabled}\n $size={size}\n $shouldShowBorderLeft={\n shouldShowClearIcon === true &&\n internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n shouldCaptureEvents={shouldCaptureEvents}\n onAvailableMaxHeightChange={setAvailableMaxHeight}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n >\n <StyledComboBoxBody\n $maxHeight={effectiveMaxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n className=\"chayns-scrollbar\"\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n bodyMinWidth,\n bodyWidth,\n comboBoxGroups,\n container,\n contentHeight,\n direction,\n handleClear,\n handleClose,\n handleHeaderClick,\n handleInputBlur,\n handleInputFocus,\n inputValue,\n internalSelectedItem,\n isAnimating,\n isDisabled,\n isTouch,\n effectiveMaxHeight,\n minWidth,\n onInputChange,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldChangeColor,\n shouldDisableActions,\n shouldCaptureEvents,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundPlaceholderImage,\n shouldShowTransparentBackground,\n shouldUseFullWidth,\n size,\n ],\n );\n },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/combobox/ComboBox.styles.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import { DropdownDirection } from '../../types/dropdown';
 import { ComboBoxSize } from './ComboBox.types';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledComboBox = styled.div`
     min-width: 0;
     user-select: none;
@@ -116,16 +115,6 @@ export const StyledComboBoxHeader = styled.div`
                 background-color: ${theme['secondary-102']};
             }
         `}
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible,
-            &:focus-within {
-                transition: none;
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
 `;
 export const StyledComboBoxPlaceholder = styled.div`
     align-items: center;

package/lib/esm/components/combobox/ComboBox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.styles.js","names":["styled","css","DropdownDirection","ComboBoxSize","keyboardFocusHighlightingRingCss","StyledComboBox","div","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","$isDisabled","$size","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","$shouldShowKeyboardHighlighting","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { ComboBoxProps, ComboBoxSize } from './ComboBox.types';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n min-width: 0;\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) => {\n if ($shouldUseFullWidth) {\n return css`\n width: 100%;\n max-width: 100%;\n min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};\n `;\n }\n\n if (typeof $minWidth === 'number') {\n return css`\n width: fit-content;\n max-width: 100%;\n min-width: ${$minWidth}px;\n `;\n }\n\n return css`\n width: fit-content;\n max-width: 100%;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: DropdownDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowTransparentBackground: boolean;\n $size: ComboBoxSize;\n $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n min-width: 0;\n border: 1px solid transparent;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n justify-content: space-between;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.SMALL:\n return css`\n height: 34px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n min-height: 42px;\n `;\n }\n }}\n\n ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${theme.colorMode === 'classic' \|\| $shouldChangeColor\n ? theme['000']\n : theme['100']};\n `;\n }}\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes($direction)\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 ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible,\n &:focus-within {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\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 flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n flex: 0 0 auto;\n min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n width: 100%;\n min-width: 0;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['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: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = { $isDisabled: boolean };\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = {\n $shouldShowBorderLeft: boolean;\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n align-items: center;\n border-left: ${({ $shouldShowBorderLeft }) =>\n $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.SMALL:\n return css`\n height: 30px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n height: 40px;\n `;\n }\n }}\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $maxHeight: number;\n $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n min-width: ${({ $minWidth }) => $minWidth}px;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n max-height: ${({ $maxHeight }) => $maxHeight}px;\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n cursor: default;\n display: flex;\n flex: 0 0 auto;\n font-weight: bold;\n min-height: 38px;\n line-height: normal;\n padding: 8px 10px;\n position: sticky;\n top: 0;\n z-index: 10;\n`;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ComboBox.styles.js","names":["styled","css","DropdownDirection","ComboBoxSize","StyledComboBox","div","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","$isDisabled","$size","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { ComboBoxProps, ComboBoxSize } from './ComboBox.types';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n min-width: 0;\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) => {\n if ($shouldUseFullWidth) {\n return css`\n width: 100%;\n max-width: 100%;\n min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};\n `;\n }\n\n if (typeof $minWidth === 'number') {\n return css`\n width: fit-content;\n max-width: 100%;\n min-width: ${$minWidth}px;\n `;\n }\n\n return css`\n width: fit-content;\n max-width: 100%;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: DropdownDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowTransparentBackground: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n min-width: 0;\n border: 1px solid transparent;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n justify-content: space-between;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.SMALL:\n return css`\n height: 34px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n min-height: 42px;\n `;\n }\n }}\n\n ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${theme.colorMode === 'classic' \|\| $shouldChangeColor\n ? theme['000']\n : theme['100']};\n `;\n }}\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes($direction)\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 flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n flex: 0 0 auto;\n min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n width: 100%;\n min-width: 0;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['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: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = { $isDisabled: boolean };\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = {\n $shouldShowBorderLeft: boolean;\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n align-items: center;\n border-left: ${({ $shouldShowBorderLeft }) =>\n $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.SMALL:\n return css`\n height: 30px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n height: 40px;\n `;\n }\n }}\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $maxHeight: number;\n $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n min-width: ${({ $minWidth }) => $minWidth}px;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n max-height: ${({ $maxHeight }) => $maxHeight}px;\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n cursor: default;\n display: flex;\n flex: 0 0 auto;\n font-weight: bold;\n min-height: 38px;\n line-height: normal;\n padding: 8px 10px;\n position: sticky;\n top: 0;\n z-index: 10;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/combobox/ComboBox.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.types.js","names":["ComboBoxSize"],"sources":["../../../../src/components/combobox/ComboBox.types.ts"],"sourcesContent":["import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactHTML, ReactNode } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { DropdownDirection } from '../../types/dropdown';\n\n/*\n Ref interface for the `ComboBox` component.\n /\nexport interface ComboBoxRef {\n /\n Hides the dropdown content.\n /\n hide: VoidFunction;\n /\n Shows the dropdown content.\n /\n show: VoidFunction;\n}\n\n/\n A grouped list definition used by the `ComboBox` component.\n /\nexport interface IComboBoxItems {\n /\n Optional group label shown above the list.\n /\n groupName?: string;\n /\n The items that should be rendered inside the group.\n /\n list: Array<IComboBoxItem>;\n /\n Whether the items in this group should use round images.\n /\n shouldShowRoundImage?: boolean;\n}\n\n/\n Optional text styling configuration for a combobox item.\n /\nexport interface ComboBoxTextStyles {\n /\n The HTML tag that should be used for the text wrapper.\n /\n tagName?: keyof ReactHTML;\n /\n Additional inline styles applied to the text wrapper.\n /\n styles?: CSSPropertiesWithVars;\n /\n Additional class name applied to the text wrapper.\n /\n className?: string;\n}\n\n/\n Single selectable item configuration for the `ComboBox` component.\n /\nexport interface IComboBoxItem {\n /\n Optional icon classes rendered before the text.\n /\n icons?: string[];\n /\n Optional background style used for the image placeholder.\n /\n imageBackground?: CSSProperties['background'];\n /\n Optional image URL rendered for the item.\n /\n imageUrl?: string;\n /\n Whether the item should be disabled.\n /\n isDisabled?: boolean;\n /\n Optional element rendered on the right side of the item.\n /\n rightElement?: ReactNode;\n /\n Optional secondary text rendered below the main text.\n /\n subtext?: string;\n /\n Optional suffix element rendered after the text.\n /\n suffixElement?: ReactNode;\n /\n Main label of the item.\n /\n text: string;\n /\n Stable item value used for selection and matching.\n /\n value: string \| number;\n /\n Optional text styling overrides for the item label.\n /\n textStyles?: ComboBoxTextStyles;\n}\n\n/\n Available size variants for the `ComboBox` header.\n /\nexport enum ComboBoxSize {\n /\n Standard height and spacing.\n /\n NORMAL = 'normal',\n /\n Compact height and spacing.\n /\n SMALL = 'small',\n}\n\n/\n Props for the `ComboBox` component.\n /\nexport type ComboBoxProps = {\n /\n The width of the body.\n * @default undefined\n /\n bodyWidth?: number;\n /\n The element where the content of the `ComboBox` should be rendered via React Portal.\n * @default undefined\n /\n container?: Element;\n /\n The direction in which the combobox should open.\n * @default DropdownDirection.RIGHT\n /\n direction?: DropdownDirection;\n /\n The value of the optional input.\n * @default undefined\n /\n inputValue?: string;\n /\n Whether the combobox should be disabled.\n * @default false\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 * @default 280\n /\n maxHeight?: number;\n /\n Function to be executed when the value of the optional input is changed.\n * @default undefined\n /\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function to be executed when the optional input lost its focus.\n * @default undefined\n /\n onInputBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function to be executed when the optional input gets its focus.\n * @default undefined\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 * @default undefined\n /\n onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> \| boolean \| void;\n /\n Function to be executed when the content of the `ComboBox` is shown.\n * @default undefined\n /\n onShow?: () => void;\n /\n Function to be executed when the content of the `ComboBox` is hidden.\n * @default undefined\n /\n onHide?: () => void;\n /\n A text that should be displayed when no item is selected.\n /\n placeholder: string;\n /\n A prefix that should be displayed before the placeholder.\n * @default undefined\n /\n prefix?: string;\n /\n An item that should be preselected.\n * @default undefined\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 * @default false\n /\n shouldShowBigImage?: boolean;\n /\n If true, a clear icon is displayed at the end of the combo box if an item is selected.\n * @default false\n /\n shouldShowClearIcon?: boolean;\n /\n Whether the background should be transparent.\n * @default false\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the images of the items are displayed in a round shape.\n * @default false\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the width of the ComboBox should be the width of the current item.\n * @default false\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 * @default false\n /\n shouldUseFullWidth?: boolean;\n /\n If true, the dropdown will use the maximum width of the items.\n * @default false\n /\n shouldDropDownUseMaxItemWidth?: boolean;\n /\n Whether the outside events should be captured.\n * @default undefined\n /\n shouldCaptureEvents?: boolean;\n /\n The size of the ComboBox.\n * @default ComboBoxSize.NORMAL\n /\n size?: ComboBoxSize;\n /\n Enables the shared keyboard-only focus ring for the combobox header.\n * @default false\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Optional min width for the prefix element.\n * @default undefined\n */\n prefixMinWidth?: number;\n};\n"],"mappings":"AAIA;AACA;AACA;;AAYA;AACA;AACA;;AAgBA;AACA;AACA;;AAgBA;AACA;AACA;;AA4CA;AACA;AACA;AACA,WAAYA,YAAY,0BAAZA,YAAY;EACpB;AACJ;AACA;EAHYA,YAAY;EAKpB;AACJ;AACA;EAPYA,YAAY;EAAA,OAAZA,YAAY;AAAA;;AAWxB;AACA;AACA","ignoreList":[]}
1	+ {"version":3,"file":"ComboBox.types.js","names":["ComboBoxSize"],"sources":["../../../../src/components/combobox/ComboBox.types.ts"],"sourcesContent":["import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactHTML, ReactNode } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { DropdownDirection } from '../../types/dropdown';\n\n/*\n Ref interface for the `ComboBox` component.\n /\nexport interface ComboBoxRef {\n /\n Hides the dropdown content.\n /\n hide: VoidFunction;\n /\n Shows the dropdown content.\n /\n show: VoidFunction;\n}\n\n/\n A grouped list definition used by the `ComboBox` component.\n /\nexport interface IComboBoxItems {\n /\n Optional group label shown above the list.\n /\n groupName?: string;\n /\n The items that should be rendered inside the group.\n /\n list: Array<IComboBoxItem>;\n /\n Whether the items in this group should use round images.\n /\n shouldShowRoundImage?: boolean;\n}\n\n/\n Optional text styling configuration for a combobox item.\n /\nexport interface ComboBoxTextStyles {\n /\n The HTML tag that should be used for the text wrapper.\n /\n tagName?: keyof ReactHTML;\n /\n Additional inline styles applied to the text wrapper.\n /\n styles?: CSSPropertiesWithVars;\n /\n Additional class name applied to the text wrapper.\n /\n className?: string;\n}\n\n/\n Single selectable item configuration for the `ComboBox` component.\n /\nexport interface IComboBoxItem {\n /\n Optional icon classes rendered before the text.\n /\n icons?: string[];\n /\n Optional background style used for the image placeholder.\n /\n imageBackground?: CSSProperties['background'];\n /\n Optional image URL rendered for the item.\n /\n imageUrl?: string;\n /\n Whether the item should be disabled.\n /\n isDisabled?: boolean;\n /\n Optional element rendered on the right side of the item.\n /\n rightElement?: ReactNode;\n /\n Optional secondary text rendered below the main text.\n /\n subtext?: string;\n /\n Optional suffix element rendered after the text.\n /\n suffixElement?: ReactNode;\n /\n Main label of the item.\n /\n text: string;\n /\n Stable item value used for selection and matching.\n /\n value: string \| number;\n /\n Optional text styling overrides for the item label.\n /\n textStyles?: ComboBoxTextStyles;\n}\n\n/\n Available size variants for the `ComboBox` header.\n /\nexport enum ComboBoxSize {\n /\n Standard height and spacing.\n /\n NORMAL = 'normal',\n /\n Compact height and spacing.\n /\n SMALL = 'small',\n}\n\n/\n Props for the `ComboBox` component.\n /\nexport type ComboBoxProps = {\n /\n The width of the body.\n * @default undefined\n /\n bodyWidth?: number;\n /\n The element where the content of the `ComboBox` should be rendered via React Portal.\n * @default undefined\n /\n container?: Element;\n /\n The direction in which the combobox should open.\n * @default DropdownDirection.RIGHT\n /\n direction?: DropdownDirection;\n /\n The value of the optional input.\n * @default undefined\n /\n inputValue?: string;\n /\n Whether the combobox should be disabled.\n * @default false\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 * @default 280\n /\n maxHeight?: number;\n /\n Function to be executed when the value of the optional input is changed.\n * @default undefined\n /\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function to be executed when the optional input lost its focus.\n * @default undefined\n /\n onInputBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function to be executed when the optional input gets its focus.\n * @default undefined\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 * @default undefined\n /\n onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> \| boolean \| void;\n /\n Function to be executed when the content of the `ComboBox` is shown.\n * @default undefined\n /\n onShow?: () => void;\n /\n Function to be executed when the content of the `ComboBox` is hidden.\n * @default undefined\n /\n onHide?: () => void;\n /\n A text that should be displayed when no item is selected.\n /\n placeholder: string;\n /\n A prefix that should be displayed before the placeholder.\n * @default undefined\n /\n prefix?: string;\n /\n An item that should be preselected.\n * @default undefined\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 * @default false\n /\n shouldShowBigImage?: boolean;\n /\n If true, a clear icon is displayed at the end of the combo box if an item is selected.\n * @default false\n /\n shouldShowClearIcon?: boolean;\n /\n Whether the background should be transparent.\n * @default false\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the images of the items are displayed in a round shape.\n * @default false\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the width of the ComboBox should be the width of the current item.\n * @default false\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 * @default false\n /\n shouldUseFullWidth?: boolean;\n /\n If true, the dropdown will use the maximum width of the items.\n * @default false\n /\n shouldDropDownUseMaxItemWidth?: boolean;\n /\n Whether the outside events should be captured.\n * @default undefined\n /\n shouldCaptureEvents?: boolean;\n /\n The size of the ComboBox.\n * @default ComboBoxSize.NORMAL\n /\n size?: ComboBoxSize;\n /\n Optional min width for the prefix element.\n * @default undefined\n */\n prefixMinWidth?: number;\n};\n"],"mappings":"AAIA;AACA;AACA;;AAYA;AACA;AACA;;AAgBA;AACA;AACA;;AAgBA;AACA;AACA;;AA4CA;AACA;AACA;AACA,WAAYA,YAAY,0BAAZA,YAAY;EACpB;AACJ;AACA;EAHYA,YAAY;EAKpB;AACJ;AACA;EAPYA,YAAY;EAAA,OAAZA,YAAY;AAAA;;AAWxB;AACA;AACA","ignoreList":[]}