@chayns-components/core 5.5.60 → 5.5.62
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.
- package/AGENTS.md +23 -0
- package/lib/cjs/components/combobox/ComboBox.js +12 -5
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.styles.js +39 -2
- package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.types.js +4 -0
- package/lib/cjs/components/combobox/ComboBox.types.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +12 -5
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js +39 -2
- package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.types.js +4 -0
- package/lib/esm/components/combobox/ComboBox.types.js.map +1 -1
- package/lib/types/components/combobox/ComboBox.styles.d.ts +12 -5
- package/lib/types/components/combobox/ComboBox.types.d.ts +5 -1
- package/package.json +2 -2
package/AGENTS.md
CHANGED
|
@@ -897,6 +897,25 @@ import { ComboBox } from '@chayns-components/core';
|
|
|
897
897
|
/>
|
|
898
898
|
```
|
|
899
899
|
|
|
900
|
+
#### Mini
|
|
901
|
+
|
|
902
|
+
```tsx
|
|
903
|
+
<ComboBox
|
|
904
|
+
lists={[
|
|
905
|
+
{
|
|
906
|
+
list: [
|
|
907
|
+
{
|
|
908
|
+
text: 'Margherita',
|
|
909
|
+
value: 1,
|
|
910
|
+
},
|
|
911
|
+
],
|
|
912
|
+
},
|
|
913
|
+
]}
|
|
914
|
+
placeholder={'Select Pizza'}
|
|
915
|
+
size={ComboBoxSize.MINI}
|
|
916
|
+
/>
|
|
917
|
+
```
|
|
918
|
+
|
|
900
919
|
#### Custom
|
|
901
920
|
|
|
902
921
|
```tsx
|
|
@@ -1437,6 +1456,10 @@ import { ComboBox } from '@chayns-components/core';
|
|
|
1437
1456
|
* Compact height and spacing.
|
|
1438
1457
|
*/
|
|
1439
1458
|
SMALL = 'small',
|
|
1459
|
+
/**
|
|
1460
|
+
* Minimal height and spacing.
|
|
1461
|
+
*/
|
|
1462
|
+
MINI = 'mini',
|
|
1440
1463
|
}`
|
|
1441
1464
|
- `DropdownDirection` -> `enum DropdownDirection {
|
|
1442
1465
|
BOTTOM,
|
|
@@ -368,10 +368,14 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
368
368
|
tabIndex: !isDisabled && typeof inputValue !== 'string' ? 0 : undefined,
|
|
369
369
|
role: !isDisabled && typeof inputValue !== 'string' ? 'button' : undefined,
|
|
370
370
|
"aria-expanded": !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined
|
|
371
|
-
}, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper,
|
|
372
|
-
$
|
|
371
|
+
}, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, {
|
|
372
|
+
$size: size
|
|
373
|
+
}, prefix && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefix, {
|
|
374
|
+
$prefixMinWidth: prefixMinWidth,
|
|
375
|
+
$size: size
|
|
373
376
|
}, prefix), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
|
|
374
|
-
$shouldReduceOpacity: !selectedItem && !internalSelectedItem
|
|
377
|
+
$shouldReduceOpacity: !selectedItem && !internalSelectedItem,
|
|
378
|
+
$size: size
|
|
375
379
|
}, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
|
|
376
380
|
src: placeholderImageUrl,
|
|
377
381
|
$shouldShowBigImage: shouldShowBigImage,
|
|
@@ -388,16 +392,19 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
388
392
|
placeholder: placeholderText
|
|
389
393
|
}) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxClearIconWrapper, {
|
|
390
394
|
$isDisabled: isDisabled,
|
|
395
|
+
$size: size,
|
|
391
396
|
onClick: handleClear
|
|
392
397
|
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
393
|
-
icons: ['fa fa-times']
|
|
398
|
+
icons: ['fa fa-times'],
|
|
399
|
+
size: size === _ComboBox2.ComboBoxSize.MINI ? 13 : 15
|
|
394
400
|
})), !shouldDisableActions && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, {
|
|
395
401
|
$isDisabled: isDisabled,
|
|
396
402
|
$size: size,
|
|
397
403
|
$shouldShowBorderLeft: shouldShowClearIcon === true && internalSelectedItem !== undefined
|
|
398
404
|
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
399
405
|
icons: ['fa fa-chevron-down'],
|
|
400
|
-
isDisabled: isDisabled
|
|
406
|
+
isDisabled: isDisabled,
|
|
407
|
+
size: size === _ComboBox2.ComboBoxSize.MINI ? 13 : 15
|
|
401
408
|
}))), styledComboBoxElementRef.current && /*#__PURE__*/_react.default.createElement(_DropdownBodyWrapper.default, {
|
|
402
409
|
anchorElement: styledComboBoxElementRef.current,
|
|
403
410
|
bodyWidth: bodyWidth,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","_ComboBox2","_ComboBox3","_useFocusRingPortal","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBox","forwardRef","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","ComboBoxSize","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","shouldEnableKeyboardHighlighting","ref","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","availableMaxHeight","setAvailableMaxHeight","isInputFocused","useRef","styledComboBoxElementRef","comboBoxHeaderRef","comboBoxInputRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","useIsTouch","areaProvider","useContext","AreaContext","useEffect","calculatedMinWidth","calculatedBodyMinWidth","getComboBoxWidthResult","parentWidth","width","shouldChangeColor","useMemo","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleContainerBlur","_contentRef$current","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","restoreTriggerFocus","requestAnimationFrame","_comboBoxHeaderRef$cu","_comboBoxInputRef$cur","focus","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current2","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","_contentRef$current3","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","handleHeaderKeyDown","useImperativeHandle","hide","show","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","$minWidth","$shouldUseFullWidth","onBlur","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","onKeyDown","role","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onAvailableMaxHeightChange","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","className","displayName","_default","exports"],"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 { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\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 const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\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 useFocusRingPortal(comboBoxHeaderRef, {\n isEnabled: shouldShowKeyboardHighlighting && typeof inputValue !== 'string',\n });\n useFocusRingPortal(comboBoxInputRef, {\n isEnabled: shouldShowKeyboardHighlighting && typeof inputValue === 'string',\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 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' || e.key === ' ') && focusedIndex !== null) {\n e.preventDefault();\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 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 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 handleHeaderKeyDown,\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 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":["_chaynsApi","require","_react","_interopRequireWildcard","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","_ComboBox2","_ComboBox3","_useFocusRingPortal","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBox","forwardRef","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","ComboBoxSize","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","shouldEnableKeyboardHighlighting","ref","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","availableMaxHeight","setAvailableMaxHeight","isInputFocused","useRef","styledComboBoxElementRef","comboBoxHeaderRef","comboBoxInputRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","useIsTouch","areaProvider","useContext","AreaContext","useEffect","calculatedMinWidth","calculatedBodyMinWidth","getComboBoxWidthResult","parentWidth","width","shouldChangeColor","useMemo","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleContainerBlur","_contentRef$current","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","restoreTriggerFocus","requestAnimationFrame","_comboBoxHeaderRef$cu","_comboBoxInputRef$cur","focus","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current2","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","_contentRef$current3","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","handleHeaderKeyDown","useImperativeHandle","hide","show","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","$minWidth","$shouldUseFullWidth","onBlur","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","onKeyDown","role","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","MINI","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onAvailableMaxHeightChange","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","className","displayName","_default","exports"],"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 { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\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 const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\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 useFocusRingPortal(comboBoxHeaderRef, {\n isEnabled: shouldShowKeyboardHighlighting && typeof inputValue !== 'string',\n });\n useFocusRingPortal(comboBoxInputRef, {\n isEnabled: shouldShowKeyboardHighlighting && typeof inputValue === 'string',\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 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' || e.key === ' ') && focusedIndex !== null) {\n e.preventDefault();\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 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 $size={size}>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth} $size={size}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n $size={size}\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 $size={size}\n onClick={handleClear}\n >\n <Icon\n icons={['fa fa-times']}\n size={size === ComboBoxSize.MINI ? 13 : 15}\n />\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\n icons={['fa fa-chevron-down']}\n isDisabled={isDisabled}\n size={size === ComboBoxSize.MINI ? 13 : 15}\n />\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 handleHeaderKeyDown,\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 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":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAaA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,aAAA,GAAAD,sBAAA,CAAAN,OAAA;AACA,IAAAQ,SAAA,GAAAR,OAAA;AAcA,IAAAS,oBAAA,GAAAH,sBAAA,CAAAN,OAAA;AACA,IAAAU,SAAA,GAAAV,OAAA;AACA,IAAAW,QAAA,GAAAX,OAAA;AACA,IAAAY,UAAA,GAAAZ,OAAA;AACA,IAAAa,UAAA,GAAAb,OAAA;AACA,IAAAc,mBAAA,GAAAd,OAAA;AACA,IAAAe,6BAAA,GAAAf,OAAA;AAAwF,SAAAM,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAd,wBAAAc,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAlB,uBAAA,YAAAA,CAAAc,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAExF,MAAMgB,QAAQ,gBAAG,IAAAC,iBAAU,EACvB,CACI;EACIC,SAAS;EACTC,SAAS,GAAGC,2BAAiB,CAACC,KAAK;EACnCC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,SAAS,GAAG,GAAG;EACfC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,SAAS;EACTC,mBAAmB;EACnBC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,kBAAkB;EAClBC,mBAAmB;EACnBC,oBAAoB;EACpBC,YAAY;EACZC,cAAc;EACdC,IAAI,GAAGC,uBAAY,CAACC,MAAM;EAC1BC,kBAAkB,GAAG,KAAK;EAC1BC,aAAa;EACbC,yBAAyB,GAAG,KAAK;EACjCC,WAAW;EACXC,+BAA+B,GAAG,KAAK;EACvCC,UAAU;EACVC,6BAA6B,GAAG,KAAK;EACrCC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAG,IAAAC,eAAQ,EAAgB,CAAC;EACjF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EACrD,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAJ,eAAQ,EAAqBK,SAAS,CAAC;EACvE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAP,eAAQ,EAAC,CAAC,CAAC;EACnD,MAAM,CAACQ,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAT,eAAQ,EAAgB,IAAI,CAAC;EACrE,MAAM,CAACU,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAX,eAAQ,EAAqBK,SAAS,CAAC;EAE3F,MAAMO,cAAc,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EACpC,MAAMC,wBAAwB,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EAC7D,MAAME,iBAAiB,GAAG,IAAAF,aAAM,EAAiB,IAAI,CAAC;EACtD,MAAMG,gBAAgB,GAAG,IAAAH,aAAM,EAAmB,IAAI,CAAC;EACvD,MAAMI,UAAU,GAAG,IAAAJ,aAAM,EAAwB,IAAI,CAAC;EAEtD,MAAMK,UAAU,GAAG,IAAAC,uBAAc,EAACL,wBAAwB,EAAE;IACxDM,sBAAsB,EAAE;EAC5B,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAChC,MAAMC,MAAM,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAC1B,MAAMC,OAAO,GAAG,IAAAC,uBAAU,EAAC,CAAC;EAC5B,MAAMC,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACZ,UAAU,EAAE;MACb;IACJ;IAEA,MAAM;MAAEf,QAAQ,EAAE4B,kBAAkB;MAAEzB,YAAY,EAAE0B;IAAuB,CAAC,GACxE,IAAAC,iCAAsB,EAAC;MACnBZ,SAAS;MACTvB,oBAAoB;MACpB3B,KAAK;MACL+D,WAAW,EAAEhB,UAAU,CAACiB,KAAK;MAC7B7D,WAAW;MACXC,MAAM;MACNU,cAAc;MACdP,YAAY;MACZiB,6BAA6B;MAC7Bd,kBAAkB;MAClBC,mBAAmB;MACnBS,yBAAyB;MACzBF,kBAAkB;MAClBkC;IACJ,CAAC,CAAC;IAENnB,WAAW,CAAC2B,kBAAkB,CAAC;IAC/BxB,eAAe,CAACyB,sBAAsB,CAAC;EAC3C,CAAC,EAAE,CACCX,SAAS,EACTvB,oBAAoB,EACpB3B,KAAK,EACL+C,UAAU,EACV5C,WAAW,EACXC,MAAM,EACNU,cAAc,EACdP,YAAY,EACZiB,6BAA6B,EAC7Bd,kBAAkB,EAClBC,mBAAmB,EACnBS,yBAAyB,EACzBF,kBAAkB,EAClBkC,MAAM,CACT,CAAC;EAEF,MAAMa,iBAAiB,GAAG,IAAAC,cAAO,EAC7B,MAAMV,YAAY,CAACS,iBAAiB,IAAI,KAAK,EAC7C,CAACT,YAAY,CAACS,iBAAiB,CACnC,CAAC;EAED,MAAME,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/D3C,gCAAgC,IAAI,CAAC1B,UACzC,CAAC;EACD,IAAAsE,sCAAkB,EAACzB,iBAAiB,EAAE;IAClC0B,SAAS,EAAEH,8BAA8B,IAAI,OAAO5C,UAAU,KAAK;EACvE,CAAC,CAAC;EACF,IAAA8C,sCAAkB,EAACxB,gBAAgB,EAAE;IACjCyB,SAAS,EAAEH,8BAA8B,IAAI,OAAO5C,UAAU,KAAK;EACvE,CAAC,CAAC;EAEF,MAAMgD,oBAAoB,GAAG,IAAAL,cAAO,EAAC,MAAM;IACvC,IAAI,CAAC3D,YAAY,EAAE;MACf,OAAO,KAAK;IAChB;IAEA,MAAMiE,aAAa,GAAGxE,KAAK,CAACyE,OAAO,CAAEC,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IAExD,OACIF,aAAa,CAACG,MAAM,KAAK,CAAC,IAC1BH,aAAa,CAACI,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,KAAK,KAAKvE,YAAY,CAACuE,KAAK,CAAC;EAEvE,CAAC,EAAE,CAAC9E,KAAK,EAAEO,YAAY,CAAC,CAAC;;EAEzB;EACA;EACA;EACA,MAAMwE,kBAAkB,GAAG,IAAAb,cAAO,EAAC,MAAM;IACrC,IAAI,OAAO3B,kBAAkB,KAAK,QAAQ,IAAIA,kBAAkB,GAAG,CAAC,EAAE;MAClE,OAAOyC,IAAI,CAACC,GAAG,CAAChF,SAAS,EAAEsC,kBAAkB,CAAC;IAClD;IAEA,OAAOtC,SAAS;EACpB,CAAC,EAAE,CAACsC,kBAAkB,EAAEtC,SAAS,CAAC,CAAC;EAEnC,MAAMiF,aAAa,GAAG,IAAAhB,cAAO,EAAC,MAAM;IAChC,MAAMiB,SAAS,GAAGnF,KAAK,CAACyE,OAAO,CAAEC,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IAEpD,IAAIU,MAAM,GAAGD,SAAS,CAACE,MAAM,CAAC,CAACP,KAAK,EAAED,IAAI,KAAK;MAC3C,MAAMS,SAAS,GACX5E,kBAAkB,IACjB,OAAOmE,IAAI,CAACU,OAAO,KAAK,QAAQ,IAAIV,IAAI,CAACU,OAAO,CAACC,IAAI,CAAC,CAAC,KAAK,EAAG;MAEpE,OAAOV,KAAK,IAAIQ,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,CAAC,EAAE,CAAC,CAAC;IAEL,IAAItF,KAAK,CAAC2E,MAAM,GAAG,CAAC,EAAE;MAClBS,MAAM,IAAIpF,KAAK,CAAC2E,MAAM,GAAG,EAAE;IAC/B;IAEA,IAAII,kBAAkB,GAAGK,MAAM,EAAE;MAC7BA,MAAM,GAAGL,kBAAkB;IAC/B;IAEA,OAAOK,MAAM;EACjB,CAAC,EAAE,CAACL,kBAAkB,EAAE/E,KAAK,EAAEU,kBAAkB,CAAC,CAAC;EAEnD,MAAM+E,gBAAqD,GAAG,IAAAC,kBAAW,EACpEC,KAAK,IAAK;IACPlD,cAAc,CAACmD,OAAO,GAAG,IAAI;IAC7B/E,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAG8E,KAAK,CAAC;EACzB,CAAC,EACD,CAAC9E,YAAY,CACjB,CAAC;EAED,MAAMgF,eAAoD,GAAG,IAAAH,kBAAW,EACnEC,KAAK,IAAK;IACPlD,cAAc,CAACmD,OAAO,GAAG,KAAK;IAC9BvE,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAGsE,KAAK,CAAC;EACxB,CAAC,EACD,CAACtE,WAAW,CAChB,CAAC;EAED,MAAMyE,UAAU,GAAG,IAAAJ,kBAAW,EAAC,MAAM;IACjC,IAAI,OAAOjF,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAAC,CAAC;IACZ;IAEAsB,cAAc,CAAC,IAAI,CAAC;EACxB,CAAC,EAAE,CAACtB,MAAM,CAAC,CAAC;EAEZ,MAAMsF,WAAW,GAAG,IAAAL,kBAAW,EAAC,MAAM;IAClC,IAAI,OAAOlF,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAAC,CAAC;IACZ;IAEAuB,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,CAACvB,MAAM,CAAC,CAAC;EAEZ,MAAMwF,mBAAmB,GAAG,IAAAN,kBAAW,EAClCC,KAAuC,IAAK;IAAA,IAAAM,mBAAA;IACzC,MAAMC,kBAAkB,GAAGP,KAAK,CAACQ,aAA4B;IAC7D,MAAMC,gBAAgB,GAAGT,KAAK,CAACU,aAA4B;IAE3D,IACI,CAACH,kBAAkB,IAClB,CAACE,gBAAgB,CAACE,QAAQ,CAACJ,kBAAkB,CAAC,IAC3C,GAAAD,mBAAA,GAACnD,UAAU,CAAC8C,OAAO,cAAAK,mBAAA,eAAlBA,mBAAA,CAAoBK,QAAQ,CAACJ,kBAAkB,CAAC,CAAC,EACxD;MACEH,WAAW,CAAC,CAAC;IACjB;EACJ,CAAC,EACD,CAACA,WAAW,CAChB,CAAC;EAED,MAAMQ,mBAAmB,GAAG,IAAAb,kBAAW,EAAC,MAAM;IAC1C;IACAc,qBAAqB,CAAC,MAAM;MAAA,IAAAC,qBAAA;MACxB,IAAI,OAAOlF,UAAU,KAAK,QAAQ,EAAE;QAAA,IAAAmF,qBAAA;QAChC,CAAAA,qBAAA,GAAA7D,gBAAgB,CAAC+C,OAAO,cAAAc,qBAAA,eAAxBA,qBAAA,CAA0BC,KAAK,CAAC,CAAC;QACjC;MACJ;MAEA,CAAAF,qBAAA,GAAA7D,iBAAiB,CAACgD,OAAO,cAAAa,qBAAA,eAAzBA,qBAAA,CAA2BE,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC;EACN,CAAC,EAAE,CAACpF,UAAU,CAAC,CAAC;;EAEhB;AACR;AACA;EACQ,MAAMqF,qBAAqB,GAAG,IAAAlB,kBAAW,EACpCmB,YAA4B,IAAK;IAC9B,IAAI,OAAO3G,QAAQ,KAAK,UAAU,EAAE;MAChC,MAAM4G,cAAc,GAAG5G,QAAQ,CAAC2G,YAAY,CAAC;MAE7C,IAAIC,cAAc,KAAK,KAAK,EAAE;QAC1B;MACJ;MAEA,IAAIA,cAAc,YAAYC,OAAO,EAAE;QACnC,KAAKD,cAAc,CAACE,IAAI,CAAEC,sBAAsB,IAAK;UACjD,IAAIA,sBAAsB,EAAE;UAE5BrF,uBAAuB,CAACiF,YAAY,CAAC;UACrCd,WAAW,CAAC,CAAC;UACbQ,mBAAmB,CAAC,CAAC;QACzB,CAAC,CAAC;QAEF;MACJ;IACJ;IAEA3E,uBAAuB,CAACiF,YAAY,CAAC;IACrCd,WAAW,CAAC,CAAC;IACbQ,mBAAmB,CAAC,CAAC;EACzB,CAAC,EACD,CAACR,WAAW,EAAE7F,QAAQ,EAAEqG,mBAAmB,CAC/C,CAAC;EAED,MAAMW,WAAW,GAAG,IAAAxB,kBAAW,EAC1BC,KAAuC,IAAK;IACzCA,KAAK,CAACwB,cAAc,CAAC,CAAC;IACtBxB,KAAK,CAACyB,eAAe,CAAC,CAAC;IAEvBR,qBAAqB,CAAC1E,SAAS,CAAC;EACpC,CAAC,EACD,CAAC0E,qBAAqB,CAC1B,CAAC;EAED,IAAAjD,gBAAS,EAAC,MAAM;IACZ,MAAM0D,aAAa,GAAI/I,CAAgB,IAAK;MACxC,IAAI,CAACwD,WAAW,EAAE;MAElB,IAAIxD,CAAC,CAACgJ,GAAG,KAAK,QAAQ,EAAE;QACpBhJ,CAAC,CAAC6I,cAAc,CAAC,CAAC;QAClBpB,WAAW,CAAC,CAAC;QACbQ,mBAAmB,CAAC,CAAC;QACrB;MACJ;MAEA,IAAIjI,CAAC,CAACgJ,GAAG,KAAK,SAAS,IAAIhJ,CAAC,CAACgJ,GAAG,KAAK,WAAW,EAAE;QAAA,IAAAC,oBAAA;QAC9CjJ,CAAC,CAAC6I,cAAc,CAAC,CAAC;QAElB,MAAMK,QAAQ,IAAAD,oBAAA,GAAGzE,UAAU,CAAC8C,OAAO,cAAA2B,oBAAA,uBAAlBA,oBAAA,CAAoBC,QAAQ;QAE7C,IAAI,CAACA,QAAQ,IAAIA,QAAQ,CAAC7C,MAAM,KAAK,CAAC,EAAE;QAExC,MAAM8C,aAAa,GAAGnJ,CAAC,CAACgJ,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC;QAElD,IAAII,QAAQ,GAAGrF,YAAY,IAAI,CAAC,CAAC;QAEjC,IAAIsF,QAAQ,GAAG,CAAC;QAEhB,GAAG;UACCD,QAAQ,GAAG,CAACA,QAAQ,GAAGD,aAAa,GAAGD,QAAQ,CAAC7C,MAAM,IAAI6C,QAAQ,CAAC7C,MAAM;UAEzE,MAAMiD,UAAU,GAAGJ,QAAQ,CAACE,QAAQ,CAAmB;UAEvD,IAAIG,UAAU,GAAG,KAAK;UAEtB,IACID,UAAU,CAACE,EAAE,CAACC,UAAU,CAAC,kBAAkB,CAAC,IAC5CH,UAAU,CAACE,EAAE,CAACE,QAAQ,CAAC,iBAAiB,CAAC,EAC3C;YACEH,UAAU,GAAG,IAAI;UACrB;UAEA,IAAI,CAACA,UAAU,EAAE;UAEjBF,QAAQ,EAAE;QACd,CAAC,QAAQA,QAAQ,GAAGH,QAAQ,CAAC7C,MAAM;QAEnC,IAAItC,YAAY,KAAK,IAAI,EAAE;UACvB,MAAM4F,WAAW,GAAGT,QAAQ,CAACnF,YAAY,CAAmB;UAE5D4F,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;QAC7B;QAEA5F,eAAe,CAACoF,QAAQ,CAAC;QAEzB,MAAMS,cAAc,GAAGX,QAAQ,CAACE,QAAQ,CAAmB;QAE3DS,cAAc,CAACD,QAAQ,GAAG,CAAC;QAC3BC,cAAc,CAACxB,KAAK,CAAC,CAAC;MAC1B,CAAC,MAAM,IAAI,CAACrI,CAAC,CAACgJ,GAAG,KAAK,OAAO,IAAIhJ,CAAC,CAACgJ,GAAG,KAAK,GAAG,KAAKjF,YAAY,KAAK,IAAI,EAAE;QAAA,IAAA+F,oBAAA;QACtE9J,CAAC,CAAC6I,cAAc,CAAC,CAAC;QAClB,MAAMkB,OAAO,IAAAD,oBAAA,GAAGtF,UAAU,CAAC8C,OAAO,cAAAwC,oBAAA,uBAAlBA,oBAAA,CAAoBZ,QAAQ,CAACnF,YAAY,CAAC;QAE1D,IAAI,CAACgG,OAAO,EAAE;QAEd,MAAM;UAAEP;QAAG,CAAC,GAAGO,OAAO;QAEtB,IAAIC,eAA0C;QAE9CtI,KAAK,CAAC4E,IAAI,CAAEF,IAAI,IAAK;UACjB4D,eAAe,GAAG5D,IAAI,CAACA,IAAI,CAAC6D,IAAI,CAC5B,CAAC;YAAEzD;UAAM,CAAC,KAAK0D,MAAM,CAAC1D,KAAK,CAAC,KAAKgD,EAAE,CAACW,OAAO,CAAC,iBAAiB,EAAE,EAAE,CACrE,CAAC;UAED,OAAO,CAAC,CAACH,eAAe;QAC5B,CAAC,CAAC;QAEF,IAAIA,eAAe,EAAE;UACjB1B,qBAAqB,CAAC0B,eAAe,CAAC;QAC1C;MACJ;IACJ,CAAC;IAEDI,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEtB,aAAa,CAAC;IAEnD,OAAO,MAAMqB,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEvB,aAAa,CAAC;EACvE,CAAC,EAAE,CACChF,YAAY,EACZ0D,WAAW,EACXa,qBAAqB,EACrB9E,WAAW,EACX9B,KAAK,EACLuG,mBAAmB,CACtB,CAAC;;EAEF;AACR;AACA;EACQ,IAAA5C,gBAAS,EAAC,MAAM;IACZ5B,cAAc,CAAC,KAAK,CAAC;IACrBH,uBAAuB,CAACrB,YAAY,CAAC;EACzC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMsI,mBAAmB,GAAG,IAAA3E,cAAO,EAAC,MAAM;IACtC,IAAI3D,YAAY,EAAE;MACd,OAAOA,YAAY,CAACuI,QAAQ;IAChC;IAEA,IAAInH,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAACmH,QAAQ;IACxC;IAEA,OAAO5G,SAAS;EACpB,CAAC,EAAE,CAACP,oBAAoB,EAAEpB,YAAY,CAAC,CAAC;EAExC,MAAMwI,eAAe,GAAG,IAAA7E,cAAO,EAAC,MAAM;IAClC,IAAI3D,YAAY,EAAE;MACd,OAAOA,YAAY,CAACyI,KAAK;IAC7B;IAEA,IAAIrH,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAACqH,KAAK;IACrC;IAEA,OAAO9G,SAAS;EACpB,CAAC,EAAE,CAACP,oBAAoB,EAAEpB,YAAY,CAAC,CAAC;;EAExC;AACR;AACA;EACQ,MAAM0I,eAAe,GAAG,IAAA/E,cAAO,EAAC,MAAM;IAClC,IAAIgF,IAAI,GAAG/I,WAAW;IAEtB,IAAII,YAAY,EAAE;MACd2I,IAAI,GAAG3I,YAAY,CAAC2I,IAAI;IAC5B,CAAC,MAAM,IAAIvH,oBAAoB,EAAE;MAC7BuH,IAAI,GAAGvH,oBAAoB,CAACuH,IAAI;IACpC;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAACvH,oBAAoB,EAAExB,WAAW,EAAEI,YAAY,CAAC,CAAC;EAErD,MAAM4I,+BAA+B,GAAG,IAAAjF,cAAO,EAAC,MAAM;IAClD,MAAMkF,gBAAgB,GAAGpJ,KAAK,CAACuI,IAAI,CAAE7D,IAAI,IACrCA,IAAI,CAACA,IAAI,CAACE,IAAI,CACV,CAAC;MAAEE;IAAM,CAAC,KAAKA,KAAK,MAAM,CAAAvE,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEuE,KAAK,MAAInD,oBAAoB,aAApBA,oBAAoB,uBAApBA,oBAAoB,CAAEmD,KAAK,EAChF,CACJ,CAAC;IAED,OAAO,CAAAsE,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAExI,oBAAoB,KAAIA,oBAAoB;EACzE,CAAC,EAAE,CAACe,oBAAoB,aAApBA,oBAAoB,uBAApBA,oBAAoB,CAAEmD,KAAK,EAAE9E,KAAK,EAAEO,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEuE,KAAK,EAAElE,oBAAoB,CAAC,CAAC;;EAEnF;AACR;AACA;EACQ,MAAMyI,iBAAiB,GAAG,IAAA3D,kBAAW,EAAC,MAAM;IACxC,IAAI,CAAC3F,UAAU,IAAI,CAAC0C,cAAc,CAACmD,OAAO,EAAE;MACxC,IAAI9D,WAAW,EAAE;QACbiE,WAAW,CAAC,CAAC;MACjB,CAAC,MAAM;QACHD,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACC,WAAW,EAAED,UAAU,EAAEhE,WAAW,EAAE/B,UAAU,CAAC,CAAC;EAEtD,MAAMuJ,mBAAyD,GAAG,IAAA5D,kBAAW,EACxEC,KAAK,IAAK;IACP,IAAI5F,UAAU,IAAI,OAAOwB,UAAU,KAAK,QAAQ,EAAE;MAC9C;IACJ;IAEA,IAAIoE,KAAK,CAAC2B,GAAG,KAAK,QAAQ,IAAIxF,WAAW,EAAE;MACvC6D,KAAK,CAACwB,cAAc,CAAC,CAAC;MACtBpB,WAAW,CAAC,CAAC;MACbQ,mBAAmB,CAAC,CAAC;MACrB;IACJ;IAEA,IAAIZ,KAAK,CAAC2B,GAAG,KAAK,OAAO,IAAI3B,KAAK,CAAC2B,GAAG,KAAK,GAAG,EAAE;MAC5C3B,KAAK,CAACwB,cAAc,CAAC,CAAC;MACtBkC,iBAAiB,CAAC,CAAC;IACvB;EACJ,CAAC,EACD,CACItD,WAAW,EACXsD,iBAAiB,EACjB9H,UAAU,EACVO,WAAW,EACX/B,UAAU,EACVwG,mBAAmB,CAE3B,CAAC;EAED,IAAAgD,0BAAmB,EACf7H,GAAG,EACH,OAAO;IACH8H,IAAI,EAAEzD,WAAW;IACjB0D,IAAI,EAAE3D;EACV,CAAC,CAAC,EACF,CAACC,WAAW,EAAED,UAAU,CAC5B,CAAC;EAED,MAAM4D,cAAc,GAAG,IAAAxF,cAAO,EAC1B,MACIlE,KAAK,CAAC2J,GAAG,CAAEjF,IAAI,iBACXnH,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAACrM,MAAA,CAAAsM,QAAQ;IAACvC,GAAG,EAAE5C,IAAI,CAACoF,SAAS,IAAI;EAAgB,GAC5CpF,IAAI,CAACoF,SAAS,IAAI9J,KAAK,CAAC2E,MAAM,GAAG,CAAC,iBAC/BpH,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAiM,mBAAmB;IAACjC,EAAE,EAAE,mBAAmBpD,IAAI,CAACoF,SAAS;EAAG,GACxDpF,IAAI,CAACoF,SACW,CACxB,EACApF,IAAI,CAACA,IAAI,CAACiF,GAAG,CAAE9E,IAAI,iBAChBtH,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC/L,aAAA,CAAAW,OAAY;IACT8I,GAAG,EAAE,QAAQzC,IAAI,CAACqE,IAAI,EAAG;IACzBrE,IAAI,EAAEA,IAAK;IACXmF,UAAU,EACNzJ,YAAY,GAAGsE,IAAI,CAACC,KAAK,KAAKvE,YAAY,CAACuE,KAAK,GAAG,KACtD;IACD5E,QAAQ,EAAE0G,qBAAsB;IAChClG,kBAAkB,EAAEA,kBAAmB;IACvCE,oBAAoB,EAChB8D,IAAI,CAAC9D,oBAAoB,IAAIA;EAChC,CACJ,CACJ,CACK,CACb,CAAC,EACN,CAACgG,qBAAqB,EAAE5G,KAAK,EAAEO,YAAY,EAAEG,kBAAkB,EAAEE,oBAAoB,CACzF,CAAC;EAED,OAAO,IAAAsD,cAAO,EACV,mBACI3G,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAmM,cAAc;IACXvI,GAAG,EAAEiB,wBAAyB;IAC9BuH,SAAS,EAAElI,QAAS;IACpBmI,mBAAmB,EAAEjJ,kBAAmB;IACxCkJ,MAAM,EAAEpE;EAAoB,gBAE5BzI,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAuM,oBAAoB;IACjB3I,GAAG,EAAEkB,iBAAkB;IACvB0H,UAAU,EAAE1K,SAAU;IACtB2K,OAAO,EAAElB,iBAAkB;IAC3BmB,OAAO,EAAE1I,WAAY;IACrB2I,QAAQ,EAAEnH,OAAQ;IAClBoH,KAAK,EAAE3J,IAAK;IACZ4J,gCAAgC,EAAErJ,+BAAgC;IAClEsJ,WAAW,EAAE7K,UAAW;IACxB8K,kBAAkB,EAAE5G,iBAAkB;IACtC6G,mBAAmB,EAAEpK,kBAAmB;IACxCqK,SAAS,EAAEzB,mBAAoB;IAC/BpB,QAAQ,EAAE,CAACnI,UAAU,IAAI,OAAOwB,UAAU,KAAK,QAAQ,GAAG,CAAC,GAAGW,SAAU;IACxE8I,IAAI,EAAE,CAACjL,UAAU,IAAI,OAAOwB,UAAU,KAAK,QAAQ,GAAG,QAAQ,GAAGW,SAAU;IAC3E,iBACI,CAACnC,UAAU,IAAI,OAAOwB,UAAU,KAAK,QAAQ,GAAGO,WAAW,GAAGI;EACjE,gBAED3E,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAmN,yCAAyC;IAACP,KAAK,EAAE3J;EAAK,GAClDX,MAAM,iBACH7C,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAoN,oBAAoB;IAACC,eAAe,EAAErK,cAAe;IAAC4J,KAAK,EAAE3J;EAAK,GAC9DX,MACiB,CACzB,eACD7C,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAsN,yBAAyB;IACtBC,oBAAoB,EAAE,CAAC9K,YAAY,IAAI,CAACoB,oBAAqB;IAC7D+I,KAAK,EAAE3J;EAAK,GAEX8H,mBAAmB,iBAChBtL,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAwN,8BAA8B;IAC3BC,GAAG,EAAE1C,mBAAoB;IACzBiC,mBAAmB,EAAEpK,kBAAmB;IACxC8K,qBAAqB,EAAErC;EAAgC,CAC1D,CACJ,EACAJ,eAAe,iBAAIxL,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAACjM,KAAA,CAAAa,OAAI;IAACwK,KAAK,EAAED;EAAgB,CAAE,CAAC,EACnD,OAAOxH,UAAU,KAAK,QAAQ,gBAC3BhE,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAA2N,mBAAmB;IAChB/J,GAAG,EAAEmB,gBAAiB;IACtB6I,QAAQ,EAAE3L,UAAW;IACrB+E,KAAK,EAAEvD,UAAW;IAClBoK,QAAQ,EAAExK,aAAc;IACxBiJ,MAAM,EAAEvE,eAAgB;IACxB+F,OAAO,EAAEnG,gBAAiB;IAC1BtF,WAAW,EAAE8I;EAAgB,CAChC,CAAC,gBAEF1L,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAA+N,6BAA6B,QACzB5C,eAC0B,CAClC,EACAtH,oBAAoB,IACjBA,oBAAoB,CAACmK,aAAa,IAClCnK,oBAAoB,CAACmK,aACF,CACY,CAAC,EAC3CnL,mBAAmB,IAAIgB,oBAAoB,iBACxCpE,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAiO,8BAA8B;IAC3BnB,WAAW,EAAE7K,UAAW;IACxB2K,KAAK,EAAE3J,IAAK;IACZwJ,OAAO,EAAErD;EAAY,gBAErB3J,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAACjM,KAAA,CAAAa,OAAI;IACDwK,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBjI,IAAI,EAAEA,IAAI,KAAKC,uBAAY,CAACgL,IAAI,GAAG,EAAE,GAAG;EAAG,CAC9C,CAC2B,CACnC,EACA,CAACzH,oBAAoB,iBAClBhH,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAAmO,yBAAyB;IACtBrB,WAAW,EAAE7K,UAAW;IACxB2K,KAAK,EAAE3J,IAAK;IACZmL,qBAAqB,EACjBvL,mBAAmB,KAAK,IAAI,IAC5BgB,oBAAoB,KAAKO;EAC5B,gBAED3E,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAACjM,KAAA,CAAAa,OAAI;IACDwK,KAAK,EAAE,CAAC,oBAAoB,CAAE;IAC9BjJ,UAAU,EAAEA,UAAW;IACvBgB,IAAI,EAAEA,IAAI,KAAKC,uBAAY,CAACgL,IAAI,GAAG,EAAE,GAAG;EAAG,CAC9C,CACsB,CAEb,CAAC,EACtBrJ,wBAAwB,CAACiD,OAAO,iBAC7BrI,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC7L,oBAAA,CAAAS,OAAmB;IAChB2N,aAAa,EAAExJ,wBAAwB,CAACiD,OAAQ;IAChDjG,SAAS,EAAEA,SAAU;IACrBuF,aAAa,EAAEA,aAAc;IAC7B5E,mBAAmB,EAAEA,mBAAoB;IACzC8L,0BAA0B,EAAE5J,qBAAsB;IAClD6J,OAAO,EAAEtG,WAAY;IACrBnG,SAAS,EAAEA,SAAU;IACrBS,SAAS,EAAEA,SAAU;IACrBiM,kBAAkB,EAAExK,WAAY;IAChCyK,YAAY,EAAE5M,SAAS,IAAIwC;EAAa,gBAExC5E,MAAA,CAAAiB,OAAA,CAAAoL,aAAA,CAAC9L,SAAA,CAAA0O,kBAAkB;IACfC,UAAU,EAAE1H,kBAAmB;IAC/BmF,SAAS,EAAEvK,SAAS,IAAIwC,YAAa;IACrCuK,SAAS,EAAC,kBAAkB;IAC5BhL,GAAG,EAAEoB,UAAW;IAChBoF,QAAQ,EAAE;EAAE,GAEXwB,cACe,CACH,CAEb,CACnB,EACD,CACIvH,YAAY,EACZxC,SAAS,EACT+J,cAAc,EACdrJ,SAAS,EACT6E,aAAa,EACbtF,SAAS,EACTsH,WAAW,EACXnB,WAAW,EACXsD,iBAAiB,EACjBC,mBAAmB,EACnBzD,eAAe,EACfJ,gBAAgB,EAChBlE,UAAU,EACVI,oBAAoB,EACpBG,WAAW,EACX/B,UAAU,EACVuD,OAAO,EACPyB,kBAAkB,EAClB/C,QAAQ,EACRb,aAAa,EACb4H,eAAe,EACfF,mBAAmB,EACnBI,eAAe,EACf7I,MAAM,EACNU,cAAc,EACdP,YAAY,EACZ0D,iBAAiB,EACjBM,oBAAoB,EACpBjE,mBAAmB,EACnB6D,8BAA8B,EAC9BzD,kBAAkB,EAClBC,mBAAmB,EACnBwI,+BAA+B,EAC/B7H,+BAA+B,EAC/BJ,kBAAkB,EAClBH,IAAI,CAEZ,CAAC;AACL,CACJ,CAAC;AAEDtB,QAAQ,CAACkN,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArO,OAAA,GAEnBiB,QAAQ","ignoreList":[]}
|
|
@@ -54,6 +54,11 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
|
|
|
54
54
|
$size
|
|
55
55
|
}) => {
|
|
56
56
|
switch ($size) {
|
|
57
|
+
case _ComboBox.ComboBoxSize.MINI:
|
|
58
|
+
return (0, _styledComponents.css)`
|
|
59
|
+
box-sizing: border-box;
|
|
60
|
+
height: 28px;
|
|
61
|
+
`;
|
|
57
62
|
case _ComboBox.ComboBoxSize.SMALL:
|
|
58
63
|
return (0, _styledComponents.css)`
|
|
59
64
|
height: 34px;
|
|
@@ -74,12 +79,12 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
|
|
|
74
79
|
if ($shouldShowTransparentBackground) {
|
|
75
80
|
if (theme.colorMode === 'dark') {
|
|
76
81
|
return (0, _styledComponents.css)`
|
|
77
|
-
border-color: rgba(255, 255, 255, 0.
|
|
82
|
+
border-color: rgba(255, 255, 255, 0.3);
|
|
78
83
|
background-color: transparent;
|
|
79
84
|
`;
|
|
80
85
|
}
|
|
81
86
|
return (0, _styledComponents.css)`
|
|
82
|
-
border-color: rgba(0, 0, 0, 0.
|
|
87
|
+
border-color: rgba(0, 0, 0, 0.3);
|
|
83
88
|
background-color: transparent;
|
|
84
89
|
`;
|
|
85
90
|
}
|
|
@@ -139,6 +144,12 @@ const StyledComboBoxPlaceholder = exports.StyledComboBoxPlaceholder = _styledCom
|
|
|
139
144
|
opacity: ${({
|
|
140
145
|
$shouldReduceOpacity
|
|
141
146
|
}) => $shouldReduceOpacity ? 0.5 : 1};
|
|
147
|
+
|
|
148
|
+
${({
|
|
149
|
+
$size
|
|
150
|
+
}) => $size === _ComboBox.ComboBoxSize.MINI && (0, _styledComponents.css)`
|
|
151
|
+
font-size: 13px;
|
|
152
|
+
`}
|
|
142
153
|
`;
|
|
143
154
|
const StyledComboBoxPlaceholderText = exports.StyledComboBoxPlaceholderText = _styledComponents.default.div`
|
|
144
155
|
overflow: hidden;
|
|
@@ -151,6 +162,12 @@ const StyledComboBoxPrefixAndPlaceholderWrapper = exports.StyledComboBoxPrefixAn
|
|
|
151
162
|
flex: 1 1 auto;
|
|
152
163
|
min-width: 0;
|
|
153
164
|
padding: 4px 10px;
|
|
165
|
+
|
|
166
|
+
${({
|
|
167
|
+
$size
|
|
168
|
+
}) => $size === _ComboBox.ComboBoxSize.MINI && (0, _styledComponents.css)`
|
|
169
|
+
padding: 2px;
|
|
170
|
+
`}
|
|
154
171
|
`;
|
|
155
172
|
const StyledComboBoxPrefix = exports.StyledComboBoxPrefix = _styledComponents.default.div`
|
|
156
173
|
flex: 0 0 auto;
|
|
@@ -158,6 +175,13 @@ const StyledComboBoxPrefix = exports.StyledComboBoxPrefix = _styledComponents.de
|
|
|
158
175
|
$prefixMinWidth
|
|
159
176
|
}) => $prefixMinWidth ?? 0}px;
|
|
160
177
|
padding-right: 5px;
|
|
178
|
+
|
|
179
|
+
${({
|
|
180
|
+
$size
|
|
181
|
+
}) => $size === _ComboBox.ComboBoxSize.MINI && (0, _styledComponents.css)`
|
|
182
|
+
font-size: 13px;
|
|
183
|
+
padding-right: 4px;
|
|
184
|
+
`}
|
|
161
185
|
`;
|
|
162
186
|
const StyledComboBoxInput = exports.StyledComboBoxInput = _styledComponents.default.input`
|
|
163
187
|
color: ${({
|
|
@@ -165,6 +189,7 @@ const StyledComboBoxInput = exports.StyledComboBoxInput = _styledComponents.defa
|
|
|
165
189
|
}) => theme.text};
|
|
166
190
|
border: none;
|
|
167
191
|
background-color: transparent;
|
|
192
|
+
font: inherit;
|
|
168
193
|
width: 100%;
|
|
169
194
|
min-width: 0;
|
|
170
195
|
`;
|
|
@@ -196,6 +221,13 @@ const StyledComboBoxClearIconWrapper = exports.StyledComboBoxClearIconWrapper =
|
|
|
196
221
|
height: 40px;
|
|
197
222
|
justify-content: center;
|
|
198
223
|
width: 40px;
|
|
224
|
+
|
|
225
|
+
${({
|
|
226
|
+
$size
|
|
227
|
+
}) => $size === _ComboBox.ComboBoxSize.MINI && (0, _styledComponents.css)`
|
|
228
|
+
height: 26px;
|
|
229
|
+
width: 28px;
|
|
230
|
+
`}
|
|
199
231
|
`;
|
|
200
232
|
const StyledComboBoxIconWrapper = exports.StyledComboBoxIconWrapper = _styledComponents.default.div`
|
|
201
233
|
align-items: center;
|
|
@@ -214,6 +246,11 @@ const StyledComboBoxIconWrapper = exports.StyledComboBoxIconWrapper = _styledCom
|
|
|
214
246
|
$size
|
|
215
247
|
}) => {
|
|
216
248
|
switch ($size) {
|
|
249
|
+
case _ComboBox.ComboBoxSize.MINI:
|
|
250
|
+
return (0, _styledComponents.css)`
|
|
251
|
+
height: 26px;
|
|
252
|
+
width: 28px;
|
|
253
|
+
`;
|
|
217
254
|
case _ComboBox.ComboBoxSize.SMALL:
|
|
218
255
|
return (0, _styledComponents.css)`
|
|
219
256
|
height: 30px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","_ComboBox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","$size","ComboBoxSize","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","DropdownDirection","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 &:focus-visible {\n outline: none;\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":["_styledComponents","_interopRequireWildcard","require","_dropdown","_ComboBox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","$size","ComboBoxSize","MINI","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","DropdownDirection","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.MINI:\n return css`\n box-sizing: border-box;\n height: 28px;\n `;\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.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']\n };\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 &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{\n $shouldReduceOpacity: boolean;\n $size: ComboBoxSize;\n}>;\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 ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n `}\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\ntype StyledComboBoxPrefixAndPlaceholderWrapperProps = {\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div<StyledComboBoxPrefixAndPlaceholderWrapperProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n padding: 2px;\n `}\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n $size: ComboBoxSize;\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 ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n padding-right: 4px;\n `}\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n font: inherit;\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 = {\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\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 ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n height: 26px;\n width: 28px;\n `}\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.MINI:\n return css`\n height: 26px;\n width: 28px;\n `;\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":[]}
|
|
@@ -28,6 +28,10 @@ let ComboBoxSize = exports.ComboBoxSize = /*#__PURE__*/function (ComboBoxSize) {
|
|
|
28
28
|
* Compact height and spacing.
|
|
29
29
|
*/
|
|
30
30
|
ComboBoxSize["SMALL"] = "small";
|
|
31
|
+
/**
|
|
32
|
+
* Minimal height and spacing.
|
|
33
|
+
*/
|
|
34
|
+
ComboBoxSize["MINI"] = "mini";
|
|
31
35
|
return ComboBoxSize;
|
|
32
36
|
}({});
|
|
33
37
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.types.js","names":["ComboBoxSize","exports"],"sources":["../../../../src/components/combobox/ComboBox.types.ts"],"sourcesContent":["import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode, type JSX } 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 JSX.IntrinsicElements;\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;AAFA,IAGYA,YAAY,GAAAC,OAAA,CAAAD,YAAA,0BAAZA,YAAY;EACpB;AACJ;AACA;EAHYA,YAAY;EAKpB;AACJ;AACA;EAPYA,YAAY;EAAA,OAAZA,YAAY;AAAA;
|
|
1
|
+
{"version":3,"file":"ComboBox.types.js","names":["ComboBoxSize","exports"],"sources":["../../../../src/components/combobox/ComboBox.types.ts"],"sourcesContent":["import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode, type JSX } 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 JSX.IntrinsicElements;\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 * Minimal height and spacing.\n */\n MINI = 'mini',\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;AAFA,IAGYA,YAAY,GAAAC,OAAA,CAAAD,YAAA,0BAAZA,YAAY;EACpB;AACJ;AACA;EAHYA,YAAY;EAKpB;AACJ;AACA;EAPYA,YAAY;EASpB;AACJ;AACA;EAXYA,YAAY;EAAA,OAAZA,YAAY;AAAA;AAexB;AACA;AACA","ignoreList":[]}
|
|
@@ -355,10 +355,14 @@ const ComboBox = /*#__PURE__*/forwardRef(({
|
|
|
355
355
|
tabIndex: !isDisabled && typeof inputValue !== 'string' ? 0 : undefined,
|
|
356
356
|
role: !isDisabled && typeof inputValue !== 'string' ? 'button' : undefined,
|
|
357
357
|
"aria-expanded": !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined
|
|
358
|
-
}, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper,
|
|
359
|
-
$
|
|
358
|
+
}, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, {
|
|
359
|
+
$size: size
|
|
360
|
+
}, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, {
|
|
361
|
+
$prefixMinWidth: prefixMinWidth,
|
|
362
|
+
$size: size
|
|
360
363
|
}, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
|
|
361
|
-
$shouldReduceOpacity: !selectedItem && !internalSelectedItem
|
|
364
|
+
$shouldReduceOpacity: !selectedItem && !internalSelectedItem,
|
|
365
|
+
$size: size
|
|
362
366
|
}, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
|
|
363
367
|
src: placeholderImageUrl,
|
|
364
368
|
$shouldShowBigImage: shouldShowBigImage,
|
|
@@ -375,16 +379,19 @@ const ComboBox = /*#__PURE__*/forwardRef(({
|
|
|
375
379
|
placeholder: placeholderText
|
|
376
380
|
}) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/React.createElement(StyledComboBoxClearIconWrapper, {
|
|
377
381
|
$isDisabled: isDisabled,
|
|
382
|
+
$size: size,
|
|
378
383
|
onClick: handleClear
|
|
379
384
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
380
|
-
icons: ['fa fa-times']
|
|
385
|
+
icons: ['fa fa-times'],
|
|
386
|
+
size: size === ComboBoxSize.MINI ? 13 : 15
|
|
381
387
|
})), !shouldDisableActions && /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, {
|
|
382
388
|
$isDisabled: isDisabled,
|
|
383
389
|
$size: size,
|
|
384
390
|
$shouldShowBorderLeft: shouldShowClearIcon === true && internalSelectedItem !== undefined
|
|
385
391
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
386
392
|
icons: ['fa fa-chevron-down'],
|
|
387
|
-
isDisabled: isDisabled
|
|
393
|
+
isDisabled: isDisabled,
|
|
394
|
+
size: size === ComboBoxSize.MINI ? 13 : 15
|
|
388
395
|
}))), styledComboBoxElementRef.current && /*#__PURE__*/React.createElement(DropdownBodyWrapper, {
|
|
389
396
|
anchorElement: styledComboBoxElementRef.current,
|
|
390
397
|
bodyWidth: bodyWidth,
|
|
@@ -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","useFocusRingPortal","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","availableMaxHeight","setAvailableMaxHeight","isInputFocused","styledComboBoxElementRef","comboBoxHeaderRef","comboBoxInputRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldShowKeyboardHighlighting","isEnabled","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","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","onKeyDown","role","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","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 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 { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\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 const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\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 useFocusRingPortal(comboBoxHeaderRef, {\n isEnabled: shouldShowKeyboardHighlighting && typeof inputValue !== 'string',\n });\n useFocusRingPortal(comboBoxInputRef, {\n isEnabled: shouldShowKeyboardHighlighting && typeof inputValue === 'string',\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 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' || e.key === ' ') && focusedIndex !== null) {\n e.preventDefault();\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 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 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 handleHeaderKeyDown,\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 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","useFocusRingPortal","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","availableMaxHeight","setAvailableMaxHeight","isInputFocused","styledComboBoxElementRef","comboBoxHeaderRef","comboBoxInputRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldShowKeyboardHighlighting","isEnabled","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","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","onKeyDown","role","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onFocus","suffixElement","MINI","$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 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 { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\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 const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\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 useFocusRingPortal(comboBoxHeaderRef, {\n isEnabled: shouldShowKeyboardHighlighting && typeof inputValue !== 'string',\n });\n useFocusRingPortal(comboBoxInputRef, {\n isEnabled: shouldShowKeyboardHighlighting && typeof inputValue === 'string',\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 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' || e.key === ' ') && focusedIndex !== null) {\n e.preventDefault();\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 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 $size={size}>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth} $size={size}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n $size={size}\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 $size={size}\n onClick={handleClear}\n >\n <Icon\n icons={['fa fa-times']}\n size={size === ComboBoxSize.MINI ? 13 : 15}\n />\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\n icons={['fa fa-chevron-down']}\n isDisabled={isDisabled}\n size={size === ComboBoxSize.MINI ? 13 : 15}\n />\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 handleHeaderKeyDown,\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 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":[]}
|
|
@@ -47,6 +47,11 @@ export const StyledComboBoxHeader = styled.div`
|
|
|
47
47
|
$size
|
|
48
48
|
}) => {
|
|
49
49
|
switch ($size) {
|
|
50
|
+
case ComboBoxSize.MINI:
|
|
51
|
+
return css`
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
height: 28px;
|
|
54
|
+
`;
|
|
50
55
|
case ComboBoxSize.SMALL:
|
|
51
56
|
return css`
|
|
52
57
|
height: 34px;
|
|
@@ -67,12 +72,12 @@ export const StyledComboBoxHeader = styled.div`
|
|
|
67
72
|
if ($shouldShowTransparentBackground) {
|
|
68
73
|
if (theme.colorMode === 'dark') {
|
|
69
74
|
return css`
|
|
70
|
-
border-color: rgba(255, 255, 255, 0.
|
|
75
|
+
border-color: rgba(255, 255, 255, 0.3);
|
|
71
76
|
background-color: transparent;
|
|
72
77
|
`;
|
|
73
78
|
}
|
|
74
79
|
return css`
|
|
75
|
-
border-color: rgba(0, 0, 0, 0.
|
|
80
|
+
border-color: rgba(0, 0, 0, 0.3);
|
|
76
81
|
background-color: transparent;
|
|
77
82
|
`;
|
|
78
83
|
}
|
|
@@ -132,6 +137,12 @@ export const StyledComboBoxPlaceholder = styled.div`
|
|
|
132
137
|
opacity: ${({
|
|
133
138
|
$shouldReduceOpacity
|
|
134
139
|
}) => $shouldReduceOpacity ? 0.5 : 1};
|
|
140
|
+
|
|
141
|
+
${({
|
|
142
|
+
$size
|
|
143
|
+
}) => $size === ComboBoxSize.MINI && css`
|
|
144
|
+
font-size: 13px;
|
|
145
|
+
`}
|
|
135
146
|
`;
|
|
136
147
|
export const StyledComboBoxPlaceholderText = styled.div`
|
|
137
148
|
overflow: hidden;
|
|
@@ -144,6 +155,12 @@ export const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`
|
|
|
144
155
|
flex: 1 1 auto;
|
|
145
156
|
min-width: 0;
|
|
146
157
|
padding: 4px 10px;
|
|
158
|
+
|
|
159
|
+
${({
|
|
160
|
+
$size
|
|
161
|
+
}) => $size === ComboBoxSize.MINI && css`
|
|
162
|
+
padding: 2px;
|
|
163
|
+
`}
|
|
147
164
|
`;
|
|
148
165
|
export const StyledComboBoxPrefix = styled.div`
|
|
149
166
|
flex: 0 0 auto;
|
|
@@ -151,6 +168,13 @@ export const StyledComboBoxPrefix = styled.div`
|
|
|
151
168
|
$prefixMinWidth
|
|
152
169
|
}) => $prefixMinWidth ?? 0}px;
|
|
153
170
|
padding-right: 5px;
|
|
171
|
+
|
|
172
|
+
${({
|
|
173
|
+
$size
|
|
174
|
+
}) => $size === ComboBoxSize.MINI && css`
|
|
175
|
+
font-size: 13px;
|
|
176
|
+
padding-right: 4px;
|
|
177
|
+
`}
|
|
154
178
|
`;
|
|
155
179
|
export const StyledComboBoxInput = styled.input`
|
|
156
180
|
color: ${({
|
|
@@ -158,6 +182,7 @@ export const StyledComboBoxInput = styled.input`
|
|
|
158
182
|
}) => theme.text};
|
|
159
183
|
border: none;
|
|
160
184
|
background-color: transparent;
|
|
185
|
+
font: inherit;
|
|
161
186
|
width: 100%;
|
|
162
187
|
min-width: 0;
|
|
163
188
|
`;
|
|
@@ -189,6 +214,13 @@ export const StyledComboBoxClearIconWrapper = styled.div`
|
|
|
189
214
|
height: 40px;
|
|
190
215
|
justify-content: center;
|
|
191
216
|
width: 40px;
|
|
217
|
+
|
|
218
|
+
${({
|
|
219
|
+
$size
|
|
220
|
+
}) => $size === ComboBoxSize.MINI && css`
|
|
221
|
+
height: 26px;
|
|
222
|
+
width: 28px;
|
|
223
|
+
`}
|
|
192
224
|
`;
|
|
193
225
|
export const StyledComboBoxIconWrapper = styled.div`
|
|
194
226
|
align-items: center;
|
|
@@ -207,6 +239,11 @@ export const StyledComboBoxIconWrapper = styled.div`
|
|
|
207
239
|
$size
|
|
208
240
|
}) => {
|
|
209
241
|
switch ($size) {
|
|
242
|
+
case ComboBoxSize.MINI:
|
|
243
|
+
return css`
|
|
244
|
+
height: 26px;
|
|
245
|
+
width: 28px;
|
|
246
|
+
`;
|
|
210
247
|
case ComboBoxSize.SMALL:
|
|
211
248
|
return css`
|
|
212
249
|
height: 30px;
|
|
@@ -1 +1 @@
|
|
|
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 &:focus-visible {\n outline: none;\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","MINI","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.MINI:\n return css`\n box-sizing: border-box;\n height: 28px;\n `;\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.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']\n };\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 &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{\n $shouldReduceOpacity: boolean;\n $size: ComboBoxSize;\n}>;\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 ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n `}\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\ntype StyledComboBoxPrefixAndPlaceholderWrapperProps = {\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div<StyledComboBoxPrefixAndPlaceholderWrapperProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n padding: 2px;\n `}\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n $size: ComboBoxSize;\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 ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n padding-right: 4px;\n `}\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n font: inherit;\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 = {\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\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 ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n height: 26px;\n width: 28px;\n `}\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.MINI:\n return css`\n height: 26px;\n width: 28px;\n `;\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":[]}
|
|
@@ -26,6 +26,10 @@ export let ComboBoxSize = /*#__PURE__*/function (ComboBoxSize) {
|
|
|
26
26
|
* Compact height and spacing.
|
|
27
27
|
*/
|
|
28
28
|
ComboBoxSize["SMALL"] = "small";
|
|
29
|
+
/**
|
|
30
|
+
* Minimal height and spacing.
|
|
31
|
+
*/
|
|
32
|
+
ComboBoxSize["MINI"] = "mini";
|
|
29
33
|
return ComboBoxSize;
|
|
30
34
|
}({});
|
|
31
35
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.types.js","names":["ComboBoxSize"],"sources":["../../../../src/components/combobox/ComboBox.types.ts"],"sourcesContent":["import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode, type JSX } 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 JSX.IntrinsicElements;\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;;
|
|
1
|
+
{"version":3,"file":"ComboBox.types.js","names":["ComboBoxSize"],"sources":["../../../../src/components/combobox/ComboBox.types.ts"],"sourcesContent":["import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode, type JSX } 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 JSX.IntrinsicElements;\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 * Minimal height and spacing.\n */\n MINI = 'mini',\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;EASpB;AACJ;AACA;EAXYA,YAAY;EAAA,OAAZA,YAAY;AAAA;;AAexB;AACA;AACA","ignoreList":[]}
|
|
@@ -35,21 +35,27 @@ export declare const StyledComboBoxHeader: import("styled-components/dist/types"
|
|
|
35
35
|
} & {
|
|
36
36
|
theme: Theme;
|
|
37
37
|
}, never>>> & string;
|
|
38
|
-
export declare const StyledComboBoxPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldReduceOpacity"> & {
|
|
38
|
+
export declare const StyledComboBoxPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$size" | "$shouldReduceOpacity"> & {
|
|
39
39
|
$shouldReduceOpacity: boolean;
|
|
40
|
+
$size: ComboBoxSize;
|
|
40
41
|
} & {
|
|
41
42
|
theme: Theme;
|
|
42
|
-
}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldReduceOpacity"> & {
|
|
43
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$size" | "$shouldReduceOpacity"> & {
|
|
43
44
|
$shouldReduceOpacity: boolean;
|
|
45
|
+
$size: ComboBoxSize;
|
|
44
46
|
} & {
|
|
45
47
|
theme: Theme;
|
|
46
48
|
}, never>>> & string;
|
|
47
49
|
export declare const StyledComboBoxPlaceholderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
48
|
-
|
|
50
|
+
type StyledComboBoxPrefixAndPlaceholderWrapperProps = {
|
|
51
|
+
$size: ComboBoxSize;
|
|
52
|
+
};
|
|
53
|
+
export declare const StyledComboBoxPrefixAndPlaceholderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$size"> & StyledComboBoxPrefixAndPlaceholderWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$size"> & StyledComboBoxPrefixAndPlaceholderWrapperProps, never>>> & string;
|
|
49
54
|
type StyledComboBoxPrefixProps = {
|
|
50
55
|
$prefixMinWidth?: number;
|
|
56
|
+
$size: ComboBoxSize;
|
|
51
57
|
};
|
|
52
|
-
export declare const StyledComboBoxPrefix: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
58
|
+
export declare const StyledComboBoxPrefix: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledComboBoxPrefixProps> & StyledComboBoxPrefixProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledComboBoxPrefixProps> & StyledComboBoxPrefixProps, never>>> & string;
|
|
53
59
|
export declare const StyledComboBoxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
|
|
54
60
|
export declare const StyledComboBoxPlaceholderImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme" | "$shouldShowBigImage" | "$shouldShowRoundImage"> & {
|
|
55
61
|
$shouldShowBigImage: ComboBoxProps["shouldShowBigImage"];
|
|
@@ -64,8 +70,9 @@ export declare const StyledComboBoxPlaceholderImage: import("styled-components/d
|
|
|
64
70
|
}, never>>> & string;
|
|
65
71
|
type StyledComboBoxClearIconWrapperProps = {
|
|
66
72
|
$isDisabled: boolean;
|
|
73
|
+
$size: ComboBoxSize;
|
|
67
74
|
};
|
|
68
|
-
export declare const StyledComboBoxClearIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
75
|
+
export declare const StyledComboBoxClearIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledComboBoxClearIconWrapperProps> & StyledComboBoxClearIconWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledComboBoxClearIconWrapperProps> & StyledComboBoxClearIconWrapperProps, never>>> & string;
|
|
69
76
|
type StyledComboBoxIconWrapperProps = {
|
|
70
77
|
$shouldShowBorderLeft: boolean;
|
|
71
78
|
$isDisabled: boolean;
|
|
@@ -104,7 +104,11 @@ export declare enum ComboBoxSize {
|
|
|
104
104
|
/**
|
|
105
105
|
* Compact height and spacing.
|
|
106
106
|
*/
|
|
107
|
-
SMALL = "small"
|
|
107
|
+
SMALL = "small",
|
|
108
|
+
/**
|
|
109
|
+
* Minimal height and spacing.
|
|
110
|
+
*/
|
|
111
|
+
MINI = "mini"
|
|
108
112
|
}
|
|
109
113
|
/**
|
|
110
114
|
* Props for the `ComboBox` component.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.62",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -93,5 +93,5 @@
|
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"access": "public"
|
|
95
95
|
},
|
|
96
|
-
"gitHead": "
|
|
96
|
+
"gitHead": "f6abf3dafcf964c234dd21babdd5a26ff07e87eb"
|
|
97
97
|
}
|