@chayns-components/core 5.0.0-beta.878 → 5.0.0-beta.880
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/lib/cjs/components/combobox/ComboBox.js +34 -12
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +34 -12
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/types/components/combobox/ComboBox.d.ts +8 -1
- package/package.json +2 -2
|
@@ -28,14 +28,17 @@ const ComboBox = ({
|
|
|
28
28
|
selectedItem,
|
|
29
29
|
shouldShowBigImage,
|
|
30
30
|
shouldShowRoundImage,
|
|
31
|
+
onInputFocus,
|
|
31
32
|
shouldUseFullWidth = false,
|
|
32
33
|
onInputChange,
|
|
34
|
+
shouldUseCurrentItemWidth = false,
|
|
33
35
|
onInputBlur,
|
|
34
36
|
inputValue
|
|
35
37
|
}) => {
|
|
36
38
|
const [internalSelectedItem, setInternalSelectedItem] = (0, _react.useState)();
|
|
37
39
|
const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
|
|
38
40
|
const [minWidth, setMinWidth] = (0, _react.useState)(0);
|
|
41
|
+
const [bodyMinWidth, setBodyMinWidth] = (0, _react.useState)(0);
|
|
39
42
|
const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
|
|
40
43
|
const [overflowY, setOverflowY] = (0, _react.useState)('hidden');
|
|
41
44
|
const [portal, setPortal] = (0, _react.useState)();
|
|
@@ -160,22 +163,40 @@ const ComboBox = ({
|
|
|
160
163
|
(0, _react.useEffect)(() => {
|
|
161
164
|
var _styledComboBoxElemen;
|
|
162
165
|
const allItems = lists.flatMap(list => list.list);
|
|
163
|
-
const
|
|
166
|
+
const hasImage = allItems.some(({
|
|
164
167
|
imageUrl
|
|
165
168
|
}) => imageUrl);
|
|
166
|
-
const
|
|
169
|
+
const hasIcon = allItems.some(({
|
|
167
170
|
icons
|
|
168
171
|
}) => icons);
|
|
169
|
-
const
|
|
172
|
+
const parentWidth = ((_styledComboBoxElemen = styledComboBoxElementRef.current) === null || _styledComboBoxElemen === void 0 || (_styledComboBoxElemen = _styledComboBoxElemen.parentElement) === null || _styledComboBoxElemen === void 0 ? void 0 : _styledComboBoxElemen.getBoundingClientRect().width) ?? 0;
|
|
173
|
+
const paddingWidth = 45; // padding + border + arrow icon
|
|
174
|
+
const imageWidth = hasImage ? 32 : 0; // image width + gap if images present
|
|
175
|
+
const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present
|
|
170
176
|
|
|
171
|
-
|
|
172
|
-
// 32px = image width + flex gap
|
|
173
|
-
// 40px = icon width + flex gap
|
|
174
|
-
setMinWidth(shouldUseFullWidth ? width : (0, _calculate.calculateContentWidth)([...allItems, {
|
|
177
|
+
const baseWidth = (0, _calculate.calculateContentWidth)([...allItems, {
|
|
175
178
|
text: placeholder,
|
|
176
179
|
value: 'placeholder'
|
|
177
|
-
}])
|
|
178
|
-
|
|
180
|
+
}]);
|
|
181
|
+
const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;
|
|
182
|
+
let tmpMinWidth = calculatedWidth;
|
|
183
|
+
let tmpBodyMinWidth = calculatedWidth;
|
|
184
|
+
|
|
185
|
+
// Full width settings
|
|
186
|
+
if (shouldUseFullWidth) {
|
|
187
|
+
tmpMinWidth = parentWidth;
|
|
188
|
+
tmpBodyMinWidth = calculatedWidth > parentWidth ? calculatedWidth : parentWidth;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
// Current item width settings
|
|
192
|
+
else if (shouldUseCurrentItemWidth && internalSelectedItem) {
|
|
193
|
+
const itemWidth = (0, _calculate.calculateContentWidth)([internalSelectedItem]) + paddingWidth + imageWidth + iconWidth;
|
|
194
|
+
tmpMinWidth = itemWidth;
|
|
195
|
+
tmpBodyMinWidth = itemWidth < calculatedWidth ? calculatedWidth : itemWidth;
|
|
196
|
+
}
|
|
197
|
+
setMinWidth(tmpMinWidth);
|
|
198
|
+
setBodyMinWidth(tmpBodyMinWidth);
|
|
199
|
+
}, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);
|
|
179
200
|
|
|
180
201
|
/**
|
|
181
202
|
* This function sets the external selected item
|
|
@@ -284,7 +305,7 @@ const ComboBox = ({
|
|
|
284
305
|
opacity: 0
|
|
285
306
|
},
|
|
286
307
|
$maxHeight: maxHeight,
|
|
287
|
-
$minWidth:
|
|
308
|
+
$minWidth: bodyMinWidth,
|
|
288
309
|
style: bodyStyles,
|
|
289
310
|
$direction: direction,
|
|
290
311
|
transition: {
|
|
@@ -293,7 +314,7 @@ const ComboBox = ({
|
|
|
293
314
|
tabIndex: 0,
|
|
294
315
|
ref: contentRef
|
|
295
316
|
}, comboBoxGroups)), container));
|
|
296
|
-
}, [bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
|
|
317
|
+
}, [bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
|
|
297
318
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
|
|
298
319
|
ref: styledComboBoxElementRef,
|
|
299
320
|
$shouldUseFullWidth: shouldUseFullWidth,
|
|
@@ -309,6 +330,7 @@ const ComboBox = ({
|
|
|
309
330
|
value: inputValue,
|
|
310
331
|
onChange: onInputChange,
|
|
311
332
|
onBlur: onInputBlur,
|
|
333
|
+
onFocus: onInputFocus,
|
|
312
334
|
placeholder: placeholderText
|
|
313
335
|
}) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
|
|
314
336
|
$shouldReduceOpacity: !selectedItem && !internalSelectedItem
|
|
@@ -319,7 +341,7 @@ const ComboBox = ({
|
|
|
319
341
|
icons: placeholderIcon
|
|
320
342
|
}), placeholderText, internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
321
343
|
icons: ['fa fa-chevron-down']
|
|
322
|
-
}))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
|
|
344
|
+
}))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
|
|
323
345
|
};
|
|
324
346
|
ComboBox.displayName = 'ComboBox';
|
|
325
347
|
var _default = exports.default = ComboBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","shouldUseFullWidth","onInputChange","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","isAtLeastOneItemWithImageGiven","imageUrl","isAtLeastOneItemWithIconGiven","icons","width","parentElement","calculateContentWidth","text","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","groupName","createElement","StyledComboBoxTopic","item","isSelected","rightElement","subtext","suffixElement","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxInput","disabled","onChange","onBlur","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n ChangeEventHandler,\n FocusEventHandler,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * The value of the optional input.\n */\n inputValue?: string;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n lists: IComboBoxItems[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function to be executed when the value of the optional input is changed.\n */\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the optional input lost its focus.\n */\n onInputBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that should be executed when an item is selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n */\n shouldShowBigImage?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n */\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowBigImage,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n onInputChange,\n onInputBlur,\n inputValue,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + container.scrollLeft;\n const y = comboBoxTop - containerTop + container.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n const currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const width =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map((item) => (\n // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n <ComboBoxItem\n icons={item.icons}\n id={item.value}\n imageUrl={item.imageUrl}\n isDisabled={item.isDisabled}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n key={item.value}\n onSelect={handleSetSelectedItem}\n rightElement={item.rightElement}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={shouldShowRoundImage}\n subtext={item.subtext}\n suffixElement={item.suffixElement}\n text={item.text}\n value={item.value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={onInputBlur}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n )}\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n shouldUseFullWidth,\n minWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n inputValue,\n onInputChange,\n onInputBlur,\n placeholderText,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundImage,\n placeholderIcon,\n portal,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","baseWidth","calculateContentWidth","text","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","groupName","createElement","StyledComboBoxTopic","item","isSelected","rightElement","subtext","suffixElement","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n ChangeEventHandler,\n FocusEventHandler,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * The value of the optional input.\n */\n inputValue?: string;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n lists: IComboBoxItems[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function to be executed when the value of the optional input is changed.\n */\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the optional input lost its focus.\n */\n onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n * Function to be executed when the optional input gets its focus.\n */;\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that should be executed when an item is selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n */\n shouldShowBigImage?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether the width of the ComboBox should be the width of the current item.\n */\n shouldUseCurrentItemWidth?: boolean;\n /**\n * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n */\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowBigImage,\n shouldShowRoundImage,\n onInputFocus,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n inputValue,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + container.scrollLeft;\n const y = comboBoxTop - containerTop + container.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n const currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n const hasImage = allItems.some(({ imageUrl }) => imageUrl);\n const hasIcon = allItems.some(({ icons }) => icons);\n\n const parentWidth =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n const paddingWidth = 45; // padding + border + arrow icon\n const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n const baseWidth = calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]);\n const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;\n\n let tmpMinWidth = calculatedWidth;\n let tmpBodyMinWidth = calculatedWidth;\n\n // Full width settings\n if (shouldUseFullWidth) {\n tmpMinWidth = parentWidth;\n tmpBodyMinWidth = calculatedWidth > parentWidth ? calculatedWidth : parentWidth;\n }\n\n // Current item width settings\n else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n const itemWidth =\n calculateContentWidth([internalSelectedItem]) +\n paddingWidth +\n imageWidth +\n iconWidth;\n\n tmpMinWidth = itemWidth;\n\n tmpBodyMinWidth = itemWidth < calculatedWidth ? calculatedWidth : itemWidth;\n }\n\n setMinWidth(tmpMinWidth);\n setBodyMinWidth(tmpBodyMinWidth);\n }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map((item) => (\n // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n <ComboBoxItem\n icons={item.icons}\n id={item.value}\n imageUrl={item.imageUrl}\n isDisabled={item.isDisabled}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n key={item.value}\n onSelect={handleSetSelectedItem}\n rightElement={item.rightElement}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={shouldShowRoundImage}\n subtext={item.subtext}\n suffixElement={item.suffixElement}\n text={item.text}\n value={item.value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={bodyMinWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyMinWidth,\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={onInputBlur}\n onFocus={onInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n )}\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n shouldUseFullWidth,\n minWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n inputValue,\n onInputChange,\n onInputBlur,\n onInputFocus,\n placeholderText,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundImage,\n placeholderIcon,\n portal,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -20,14 +20,17 @@ const ComboBox = _ref => {
|
|
|
20
20
|
selectedItem,
|
|
21
21
|
shouldShowBigImage,
|
|
22
22
|
shouldShowRoundImage,
|
|
23
|
+
onInputFocus,
|
|
23
24
|
shouldUseFullWidth = false,
|
|
24
25
|
onInputChange,
|
|
26
|
+
shouldUseCurrentItemWidth = false,
|
|
25
27
|
onInputBlur,
|
|
26
28
|
inputValue
|
|
27
29
|
} = _ref;
|
|
28
30
|
const [internalSelectedItem, setInternalSelectedItem] = useState();
|
|
29
31
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
30
32
|
const [minWidth, setMinWidth] = useState(0);
|
|
33
|
+
const [bodyMinWidth, setBodyMinWidth] = useState(0);
|
|
31
34
|
const [focusedIndex, setFocusedIndex] = useState(null);
|
|
32
35
|
const [overflowY, setOverflowY] = useState('hidden');
|
|
33
36
|
const [portal, setPortal] = useState();
|
|
@@ -152,28 +155,46 @@ const ComboBox = _ref => {
|
|
|
152
155
|
*/
|
|
153
156
|
useEffect(() => {
|
|
154
157
|
const allItems = lists.flatMap(list => list.list);
|
|
155
|
-
const
|
|
158
|
+
const hasImage = allItems.some(_ref3 => {
|
|
156
159
|
let {
|
|
157
160
|
imageUrl
|
|
158
161
|
} = _ref3;
|
|
159
162
|
return imageUrl;
|
|
160
163
|
});
|
|
161
|
-
const
|
|
164
|
+
const hasIcon = allItems.some(_ref4 => {
|
|
162
165
|
let {
|
|
163
166
|
icons
|
|
164
167
|
} = _ref4;
|
|
165
168
|
return icons;
|
|
166
169
|
});
|
|
167
|
-
const
|
|
170
|
+
const parentWidth = styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;
|
|
171
|
+
const paddingWidth = 45; // padding + border + arrow icon
|
|
172
|
+
const imageWidth = hasImage ? 32 : 0; // image width + gap if images present
|
|
173
|
+
const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present
|
|
168
174
|
|
|
169
|
-
|
|
170
|
-
// 32px = image width + flex gap
|
|
171
|
-
// 40px = icon width + flex gap
|
|
172
|
-
setMinWidth(shouldUseFullWidth ? width : calculateContentWidth([...allItems, {
|
|
175
|
+
const baseWidth = calculateContentWidth([...allItems, {
|
|
173
176
|
text: placeholder,
|
|
174
177
|
value: 'placeholder'
|
|
175
|
-
}])
|
|
176
|
-
|
|
178
|
+
}]);
|
|
179
|
+
const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;
|
|
180
|
+
let tmpMinWidth = calculatedWidth;
|
|
181
|
+
let tmpBodyMinWidth = calculatedWidth;
|
|
182
|
+
|
|
183
|
+
// Full width settings
|
|
184
|
+
if (shouldUseFullWidth) {
|
|
185
|
+
tmpMinWidth = parentWidth;
|
|
186
|
+
tmpBodyMinWidth = calculatedWidth > parentWidth ? calculatedWidth : parentWidth;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
// Current item width settings
|
|
190
|
+
else if (shouldUseCurrentItemWidth && internalSelectedItem) {
|
|
191
|
+
const itemWidth = calculateContentWidth([internalSelectedItem]) + paddingWidth + imageWidth + iconWidth;
|
|
192
|
+
tmpMinWidth = itemWidth;
|
|
193
|
+
tmpBodyMinWidth = itemWidth < calculatedWidth ? calculatedWidth : itemWidth;
|
|
194
|
+
}
|
|
195
|
+
setMinWidth(tmpMinWidth);
|
|
196
|
+
setBodyMinWidth(tmpBodyMinWidth);
|
|
197
|
+
}, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);
|
|
177
198
|
|
|
178
199
|
/**
|
|
179
200
|
* This function sets the external selected item
|
|
@@ -285,7 +306,7 @@ const ComboBox = _ref => {
|
|
|
285
306
|
opacity: 0
|
|
286
307
|
},
|
|
287
308
|
$maxHeight: maxHeight,
|
|
288
|
-
$minWidth:
|
|
309
|
+
$minWidth: bodyMinWidth,
|
|
289
310
|
style: bodyStyles,
|
|
290
311
|
$direction: direction,
|
|
291
312
|
transition: {
|
|
@@ -294,7 +315,7 @@ const ComboBox = _ref => {
|
|
|
294
315
|
tabIndex: 0,
|
|
295
316
|
ref: contentRef
|
|
296
317
|
}, comboBoxGroups)), container));
|
|
297
|
-
}, [bodyStyles, browser?.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
|
|
318
|
+
}, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
|
|
298
319
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
|
|
299
320
|
ref: styledComboBoxElementRef,
|
|
300
321
|
$shouldUseFullWidth: shouldUseFullWidth,
|
|
@@ -310,6 +331,7 @@ const ComboBox = _ref => {
|
|
|
310
331
|
value: inputValue,
|
|
311
332
|
onChange: onInputChange,
|
|
312
333
|
onBlur: onInputBlur,
|
|
334
|
+
onFocus: onInputFocus,
|
|
313
335
|
placeholder: placeholderText
|
|
314
336
|
}) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
|
|
315
337
|
$shouldReduceOpacity: !selectedItem && !internalSelectedItem
|
|
@@ -320,7 +342,7 @@ const ComboBox = _ref => {
|
|
|
320
342
|
icons: placeholderIcon
|
|
321
343
|
}), placeholderText, internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
|
|
322
344
|
icons: ['fa fa-chevron-down']
|
|
323
|
-
}))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
|
|
345
|
+
}))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
|
|
324
346
|
};
|
|
325
347
|
ComboBox.displayName = 'ComboBox';
|
|
326
348
|
export default ComboBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","shouldUseFullWidth","onInputChange","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","width","parentElement","text","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","item","isSelected","rightElement","subtext","suffixElement","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","disabled","onChange","onBlur","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n ChangeEventHandler,\n FocusEventHandler,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * The value of the optional input.\n */\n inputValue?: string;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n lists: IComboBoxItems[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function to be executed when the value of the optional input is changed.\n */\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the optional input lost its focus.\n */\n onInputBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that should be executed when an item is selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n */\n shouldShowBigImage?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n */\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowBigImage,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n onInputChange,\n onInputBlur,\n inputValue,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + container.scrollLeft;\n const y = comboBoxTop - containerTop + container.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n const currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const width =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map((item) => (\n // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n <ComboBoxItem\n icons={item.icons}\n id={item.value}\n imageUrl={item.imageUrl}\n isDisabled={item.isDisabled}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n key={item.value}\n onSelect={handleSetSelectedItem}\n rightElement={item.rightElement}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={shouldShowRoundImage}\n subtext={item.subtext}\n suffixElement={item.suffixElement}\n text={item.text}\n value={item.value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={onInputBlur}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n )}\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n shouldUseFullWidth,\n minWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n inputValue,\n onInputChange,\n onInputBlur,\n placeholderText,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundImage,\n placeholderIcon,\n portal,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","_ref3","imageUrl","hasIcon","_ref4","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","baseWidth","text","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","item","isSelected","rightElement","subtext","suffixElement","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","disabled","onChange","onBlur","onFocus","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n ChangeEventHandler,\n FocusEventHandler,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * The value of the optional input.\n */\n inputValue?: string;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n lists: IComboBoxItems[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function to be executed when the value of the optional input is changed.\n */\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the optional input lost its focus.\n */\n onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n * Function to be executed when the optional input gets its focus.\n */;\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that should be executed when an item is selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n */\n shouldShowBigImage?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether the width of the ComboBox should be the width of the current item.\n */\n shouldUseCurrentItemWidth?: boolean;\n /**\n * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n */\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowBigImage,\n shouldShowRoundImage,\n onInputFocus,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n inputValue,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + container.scrollLeft;\n const y = comboBoxTop - containerTop + container.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n const currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n const hasImage = allItems.some(({ imageUrl }) => imageUrl);\n const hasIcon = allItems.some(({ icons }) => icons);\n\n const parentWidth =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n const paddingWidth = 45; // padding + border + arrow icon\n const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n const baseWidth = calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]);\n const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;\n\n let tmpMinWidth = calculatedWidth;\n let tmpBodyMinWidth = calculatedWidth;\n\n // Full width settings\n if (shouldUseFullWidth) {\n tmpMinWidth = parentWidth;\n tmpBodyMinWidth = calculatedWidth > parentWidth ? calculatedWidth : parentWidth;\n }\n\n // Current item width settings\n else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n const itemWidth =\n calculateContentWidth([internalSelectedItem]) +\n paddingWidth +\n imageWidth +\n iconWidth;\n\n tmpMinWidth = itemWidth;\n\n tmpBodyMinWidth = itemWidth < calculatedWidth ? calculatedWidth : itemWidth;\n }\n\n setMinWidth(tmpMinWidth);\n setBodyMinWidth(tmpBodyMinWidth);\n }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map((item) => (\n // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n <ComboBoxItem\n icons={item.icons}\n id={item.value}\n imageUrl={item.imageUrl}\n isDisabled={item.isDisabled}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n key={item.value}\n onSelect={handleSetSelectedItem}\n rightElement={item.rightElement}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={shouldShowRoundImage}\n subtext={item.subtext}\n suffixElement={item.suffixElement}\n text={item.text}\n value={item.value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={bodyMinWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyMinWidth,\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={onInputBlur}\n onFocus={onInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n )}\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n shouldUseFullWidth,\n minWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n inputValue,\n onInputChange,\n onInputBlur,\n onInputFocus,\n placeholderText,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundImage,\n placeholderIcon,\n portal,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAGRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAKL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,qBAAqB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACnF,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SACIC,cAAc,EACdC,oBAAoB,EACpBC,yBAAyB,EACzBC,mBAAmB,EACnBC,yBAAyB,EACzBC,8BAA8B,EAC9BC,mBAAmB,EACnBC,wBAAwB,QACrB,mBAAmB;AAoF1B,MAAMC,QAA2B,GAAGC,IAAA,IAiB9B;EAAA,IAjB+B;IACjCC,SAAS,GAAGhB,iBAAiB,CAACiB,MAAM;IACpCC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,QAAQ;IACRC,WAAW;IACXC,SAAS,GAAGC,QAAQ,CAACC,IAAI;IACzBC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,YAAY;IACZC,kBAAkB,GAAG,KAAK;IAC1BC,aAAa;IACbC,yBAAyB,GAAG,KAAK;IACjCC,WAAW;IACXC;EACJ,CAAC,GAAAnB,IAAA;EACG,MAAM,CAACoB,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGtC,QAAQ,CAAgB,CAAC;EACjF,MAAM,CAACuC,WAAW,EAAEC,cAAc,CAAC,GAAGxC,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACyC,QAAQ,EAAEC,WAAW,CAAC,GAAG1C,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAM,CAAC2C,YAAY,EAAEC,eAAe,CAAC,GAAG5C,QAAQ,CAAC,CAAC,CAAC;EACnD,MAAM,CAAC6C,YAAY,EAAEC,eAAe,CAAC,GAAG9C,QAAQ,CAAgB,IAAI,CAAC;EACrE,MAAM,CAAC+C,SAAS,EAAEC,YAAY,CAAC,GAAGhD,QAAQ,CAA6B,QAAQ,CAAC;EAChF,MAAM,CAACiD,MAAM,EAAEC,SAAS,CAAC,GAAGlD,QAAQ,CAAc,CAAC;EACnD,MAAM,CAACmD,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGpD,QAAQ,CAAyB;IACnFqD,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAMC,wBAAwB,GAAGxD,MAAM,CAAiB,IAAI,CAAC;EAC7D,MAAMyD,UAAU,GAAGzD,MAAM,CAAwB,IAAI,CAAC;EAEtD,MAAM;IAAE0D;EAAQ,CAAC,GAAGhE,SAAS,CAAC,CAAC;EAE/B,MAAMiE,OAAO,GAAGrD,UAAU,CAAC,CAAC;EAE5B,MAAMsD,WAAW,GAAG/D,WAAW,CAC1BgE,KAAiB,IAAK;IACnB,IACIL,wBAAwB,CAACM,OAAO,IAChC,CAACN,wBAAwB,CAACM,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,IAChEP,UAAU,CAACK,OAAO,IAClB,CAACL,UAAU,CAACK,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EACpD;MACEvB,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACe,wBAAwB,CAC7B,CAAC;EAED,MAAMS,UAAU,GAAGpE,WAAW,CAAC,MAAM;IACjC,IAAI2D,wBAAwB,CAACM,OAAO,EAAE;MAClC,MAAM;QACFI,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBC;MACJ,CAAC,GAAGd,wBAAwB,CAACM,OAAO,CAACS,qBAAqB,CAAC,CAAC;MAC5D,MAAM;QAAEL,IAAI,EAAEM,aAAa;QAAEJ,GAAG,EAAEK;MAAa,CAAC,GAAG/C,SAAS,CAAC6C,qBAAqB,CAAC,CAAC;MAEpF,MAAMjB,CAAC,GAAGa,YAAY,GAAGK,aAAa,GAAG9C,SAAS,CAACgD,UAAU;MAC7D,MAAMnB,CAAC,GAAGc,WAAW,GAAGI,YAAY,GAAG/C,SAAS,CAACiD,SAAS;MAE1DtB,sBAAsB,CAAC;QACnBC,CAAC;QACDC,CAAC,EAAEpC,SAAS,KAAKhB,iBAAiB,CAACyE,GAAG,GAAGrB,CAAC,GAAGA,CAAC,GAAGe;MACrD,CAAC,CAAC;MAEF7B,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACf,SAAS,EAAEP,SAAS,CAAC,CAAC;EAE1B,MAAM0D,WAAW,GAAGhF,WAAW,CAAC,MAAM;IAClC4C,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;EACI3C,SAAS,CAAC,MAAM;IACZ6B,QAAQ,CAACmD,gBAAgB,CAAC,OAAO,EAAElB,WAAW,CAAC;IAE/C,OAAO,MAAM;MACTjC,QAAQ,CAACoD,mBAAmB,CAAC,OAAO,EAAEnB,WAAW,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,EAAEJ,wBAAwB,CAAC,CAAC;;EAE3C;AACJ;AACA;EACI,MAAMwB,qBAAqB,GAAGnF,WAAW,CACpCoF,YAA2B,IAAK;IAC7B1C,uBAAuB,CAAC0C,YAAY,CAAC;IACrCxC,cAAc,CAAC,KAAK,CAAC;IAErB,IAAIjB,QAAQ,EAAE;MACVA,QAAQ,CAACyD,YAAY,CAAC;IAC1B;EACJ,CAAC,EACD,CAACzD,QAAQ,CACb,CAAC;EAED1B,SAAS,CAAC,MAAM;IACZ,MAAMoF,cAAc,GAAGzB,UAAU,CAACK,OAAO;IAEzC,IAAIZ,MAAM,IAAIV,WAAW,IAAI0C,cAAc,EAAE;MACzC,MAAMC,YAAY,GAAGD,cAAc,CAACC,YAAY,IAAI,CAAC;MAErD,MAAMC,iBAAiB,GAAG/E,oBAAoB,CAC1CkB,SAAS,EACTiC,wBAAwB,CAACM,OAAO,IAAInC,QAAQ,CAACC,IACjD,CAAC;MAEDqB,YAAY,CAACkC,YAAY,GAAGC,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxE;EACJ,CAAC,EAAE,CAAC5C,WAAW,EAAEjB,SAAS,EAAE2B,MAAM,CAAC,CAAC;EAEpCpD,SAAS,CAAC,MAAM;IACZ,MAAMuF,aAAa,GAAIC,CAAgB,IAAK;MACxC,IAAI,CAAC9C,WAAW,EAAE;QACd;MACJ;MAEA,IAAI8C,CAAC,CAACC,GAAG,KAAK,SAAS,IAAID,CAAC,CAACC,GAAG,KAAK,WAAW,EAAE;QAC9CD,CAAC,CAACE,cAAc,CAAC,CAAC;QAClB,MAAMC,QAAQ,GAAGhC,UAAU,CAACK,OAAO,EAAE2B,QAAQ;QAC7C,IAAIA,QAAQ,IAAIA,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMC,QAAQ,GACV7C,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IAAIwC,CAAC,CAACC,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAGE,QAAQ,CAACC,MAAM,IAChED,QAAQ,CAACC,MAAM,GACf,CAAC;UAEX,IAAI5C,YAAY,KAAK,IAAI,EAAE;YACvB,MAAM8C,WAAW,GAAGH,QAAQ,CAAC3C,YAAY,CAAmB;YAC5D8C,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA9C,eAAe,CAAC4C,QAAQ,CAAC;UAEzB,MAAMG,UAAU,GAAGL,QAAQ,CAACE,QAAQ,CAAmB;UACvDG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;QACtB;MACJ,CAAC,MAAM,IAAIT,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIzC,YAAY,KAAK,IAAI,EAAE;QACnD,MAAMkD,OAAO,GAAGvC,UAAU,CAACK,OAAO,EAAE2B,QAAQ,CAAC3C,YAAY,CAAC;QAE1D,IAAI,CAACkD,OAAO,EAAE;UACV;QACJ;QAEA,MAAM;UAAEC;QAAG,CAAC,GAAGD,OAAO;QAEtB,IAAIE,eAA0C;QAE9C5E,KAAK,CAAC6E,IAAI,CAAEC,IAAI,IAAK;UACjBF,eAAe,GAAGE,IAAI,CAACA,IAAI,CAACC,IAAI,CAC5BC,KAAA;YAAA,IAAC;cAAEC;YAAM,CAAC,GAAAD,KAAA;YAAA,OAAKE,MAAM,CAACD,KAAK,CAAC,KAAKN,EAAE,CAACQ,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;UAAA,CACtE,CAAC;UACD,OAAO,CAAC,CAACP,eAAe;QAC5B,CAAC,CAAC;QAEF,IAAI,CAACA,eAAe,EAAE;UAClB;QACJ;QAEAlB,qBAAqB,CAACkB,eAAe,CAAC;MAC1C;IACJ,CAAC;IAEDvE,QAAQ,CAACmD,gBAAgB,CAAC,SAAS,EAAEO,aAAa,CAAC;IAEnD,OAAO,MAAM;MACT1D,QAAQ,CAACoD,mBAAmB,CAAC,SAAS,EAAEM,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACvC,YAAY,EAAEkC,qBAAqB,EAAExC,WAAW,EAAElB,KAAK,CAAC,CAAC;;EAE7D;AACJ;AACA;EACIxB,SAAS,CAAC,MAAM;IACZ,MAAM4G,QAAQ,GAAGpF,KAAK,CAACqF,OAAO,CAAEP,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IACnD,MAAMQ,QAAQ,GAAGF,QAAQ,CAACP,IAAI,CAACU,KAAA;MAAA,IAAC;QAAEC;MAAS,CAAC,GAAAD,KAAA;MAAA,OAAKC,QAAQ;IAAA,EAAC;IAC1D,MAAMC,OAAO,GAAGL,QAAQ,CAACP,IAAI,CAACa,KAAA;MAAA,IAAC;QAAEC;MAAM,CAAC,GAAAD,KAAA;MAAA,OAAKC,KAAK;IAAA,EAAC;IAEnD,MAAMC,WAAW,GACb1D,wBAAwB,CAACM,OAAO,EAAEqD,aAAa,EAAE5C,qBAAqB,CAAC,CAAC,CAAC6C,KAAK,IAAI,CAAC;IAEvF,MAAMC,YAAY,GAAG,EAAE,CAAC,CAAC;IACzB,MAAMC,UAAU,GAAGV,QAAQ,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IACtC,MAAMW,SAAS,GAAGR,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;;IAEpC,MAAMS,SAAS,GAAGpH,qBAAqB,CAAC,CACpC,GAAGsG,QAAQ,EACX;MAAEe,IAAI,EAAEhG,WAAW;MAAE8E,KAAK,EAAE;IAAc,CAAC,CAC9C,CAAC;IACF,MAAMmB,eAAe,GAAGF,SAAS,GAAGH,YAAY,GAAGC,UAAU,GAAGC,SAAS;IAEzE,IAAII,WAAW,GAAGD,eAAe;IACjC,IAAIE,eAAe,GAAGF,eAAe;;IAErC;IACA,IAAIzF,kBAAkB,EAAE;MACpB0F,WAAW,GAAGT,WAAW;MACzBU,eAAe,GAAGF,eAAe,GAAGR,WAAW,GAAGQ,eAAe,GAAGR,WAAW;IACnF;;IAEA;IAAA,KACK,IAAI/E,yBAAyB,IAAIG,oBAAoB,EAAE;MACxD,MAAMuF,SAAS,GACXzH,qBAAqB,CAAC,CAACkC,oBAAoB,CAAC,CAAC,GAC7C+E,YAAY,GACZC,UAAU,GACVC,SAAS;MAEbI,WAAW,GAAGE,SAAS;MAEvBD,eAAe,GAAGC,SAAS,GAAGH,eAAe,GAAGA,eAAe,GAAGG,SAAS;IAC/E;IAEAlF,WAAW,CAACgF,WAAW,CAAC;IACxB9E,eAAe,CAAC+E,eAAe,CAAC;EACpC,CAAC,EAAE,CAACtG,KAAK,EAAEG,WAAW,EAAEQ,kBAAkB,EAAEE,yBAAyB,EAAEG,oBAAoB,CAAC,CAAC;;EAE7F;AACJ;AACA;EACIxC,SAAS,CAAC,MAAM;IACZ2C,cAAc,CAAC,KAAK,CAAC;IACrBF,uBAAuB,CAACV,YAAY,CAAC;EACzC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMiG,mBAAmB,GAAG/H,OAAO,CAAC,MAAM;IACtC,IAAI8B,YAAY,EAAE;MACd,OAAOA,YAAY,CAACiF,QAAQ;IAChC;IAEA,IAAIxE,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAACwE,QAAQ;IACxC;IAEA,OAAOiB,SAAS;EACpB,CAAC,EAAE,CAACzF,oBAAoB,EAAET,YAAY,CAAC,CAAC;EAExC,MAAMmG,eAAe,GAAGjI,OAAO,CAAC,MAAM;IAClC,IAAI8B,YAAY,EAAE;MACd,OAAOA,YAAY,CAACoF,KAAK;IAC7B;IAEA,IAAI3E,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAAC2E,KAAK;IACrC;IAEA,OAAOc,SAAS;EACpB,CAAC,EAAE,CAACzF,oBAAoB,EAAET,YAAY,CAAC,CAAC;;EAExC;AACJ;AACA;EACI,MAAMoG,eAAe,GAAGlI,OAAO,CAAC,MAAM;IAClC,IAAI0H,IAAI,GAAGhG,WAAW;IAEtB,IAAII,YAAY,EAAE;MACd4F,IAAI,GAAG5F,YAAY,CAAC4F,IAAI;IAC5B,CAAC,MAAM,IAAInF,oBAAoB,EAAE;MAC7BmF,IAAI,GAAGnF,oBAAoB,CAACmF,IAAI;IACpC;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAACnF,oBAAoB,EAAEb,WAAW,EAAEI,YAAY,CAAC,CAAC;;EAErD;AACJ;AACA;EACI,MAAMqG,iBAAiB,GAAGrI,WAAW,CAAC,MAAM;IACxC,IAAI,CAACwB,UAAU,EAAE;MACb,IAAImB,WAAW,EAAE;QACbqC,WAAW,CAAC,CAAC;MACjB,CAAC,MAAM;QACHZ,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACY,WAAW,EAAEZ,UAAU,EAAEzB,WAAW,EAAEnB,UAAU,CAAC,CAAC;EAEtD,MAAM8G,cAAc,GAAGpI,OAAO,CAC1B,MACIuB,KAAK,CAAC8G,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,SAAS;MAAElC;IAAK,CAAC,GAAAiC,KAAA;IAAA,oBAC1BzI,KAAA,CAAA2I,aAAA;MAAKhD,GAAG,EAAE+C,SAAS,IAAI;IAAgB,GAClCA,SAAS,IAAIhH,KAAK,CAACoE,MAAM,GAAG,CAAC,iBAC1B9F,KAAA,CAAA2I,aAAA,CAACxH,mBAAmB,QAAEuH,SAA+B,CACxD,EACAlC,IAAI,CAACgC,GAAG,CAAEI,IAAI;IAAA;IACX;IACA5I,KAAA,CAAA2I,aAAA,CAAC/H,YAAY;MACTyG,KAAK,EAAEuB,IAAI,CAACvB,KAAM;MAClBhB,EAAE,EAAEuC,IAAI,CAACjC,KAAM;MACfO,QAAQ,EAAE0B,IAAI,CAAC1B,QAAS;MACxBzF,UAAU,EAAEmH,IAAI,CAACnH,UAAW;MAC5BoH,UAAU,EAAE5G,YAAY,GAAG2G,IAAI,CAACjC,KAAK,KAAK1E,YAAY,CAAC0E,KAAK,GAAG,KAAM;MACrEhB,GAAG,EAAEiD,IAAI,CAACjC,KAAM;MAChB/E,QAAQ,EAAEwD,qBAAsB;MAChC0D,YAAY,EAAEF,IAAI,CAACE,YAAa;MAChC5G,kBAAkB,EAAEA,kBAAmB;MACvCC,oBAAoB,EAAEA,oBAAqB;MAC3C4G,OAAO,EAAEH,IAAI,CAACG,OAAQ;MACtBC,aAAa,EAAEJ,IAAI,CAACI,aAAc;MAClCnB,IAAI,EAAEe,IAAI,CAACf,IAAK;MAChBlB,KAAK,EAAEiC,IAAI,CAACjC;IAAM,CACrB,CACJ,CACA,CAAC;EAAA,CACT,CAAC,EACN,CAACvB,qBAAqB,EAAE1D,KAAK,EAAEO,YAAY,EAAEC,kBAAkB,EAAEC,oBAAoB,CACzF,CAAC;EAED,MAAM8G,UAAU,GAAG9I,OAAO,CAAC,MAAM;IAC7B,IAAI+I,MAAqB,GAAG;MAAE5E,IAAI,EAAEd,mBAAmB,CAACE,CAAC;MAAEc,GAAG,EAAEhB,mBAAmB,CAACG;IAAE,CAAC;IAEvF,IAAIpC,SAAS,KAAKhB,iBAAiB,CAACyE,GAAG,EAAE;MACrCkE,MAAM,GAAG;QAAE,GAAGA,MAAM;QAAEC,SAAS,EAAE;MAAoB,CAAC;IAC1D;IAEA,OAAOD,MAAM;EACjB,CAAC,EAAE,CAAC3H,SAAS,EAAEiC,mBAAmB,CAACE,CAAC,EAAEF,mBAAmB,CAACG,CAAC,CAAC,CAAC;EAE7DzD,SAAS,CAAC,MAAM;IACZqD,SAAS,CAAC,mBACNjD,YAAY,cACRN,KAAA,CAAA2I,aAAA,CAAC5I,eAAe;MAACqJ,OAAO,EAAE;IAAM,GAC3BxG,WAAW,iBACR5C,KAAA,CAAA2I,aAAA,CAACvH,wBAAwB;MACrBiI,QAAQ,EAAEvF,OAAO,EAAEwF,IAAK;MACxBC,OAAO,EAAE;QAAE7E,MAAM,EAAE,aAAa;QAAE8E,OAAO,EAAE;MAAE,CAAE;MAC/CC,UAAU,EAAErG,SAAU;MACtBgG,OAAO,EAAE;QAAE1E,MAAM,EAAE,CAAC;QAAE8E,OAAO,EAAE;MAAE,CAAE;MACnCE,IAAI,EAAE;QAAEhF,MAAM,EAAE,CAAC;QAAE8E,OAAO,EAAE;MAAE,CAAE;MAChCG,UAAU,EAAEhI,SAAU;MACtBiI,SAAS,EAAE5G,YAAa;MACxB6G,KAAK,EAAEZ,UAAW;MAClBa,UAAU,EAAEvI,SAAU;MACtBwI,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI,CAAE;MAC9B/D,QAAQ,EAAE,CAAE;MACZgE,GAAG,EAAEpG;IAAW,GAEf0E,cACqB,CAEjB,CAAC,EAClBzG,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCkB,YAAY,EACZiG,UAAU,EACVnF,OAAO,EAAEwF,IAAI,EACbf,cAAc,EACdzG,SAAS,EACTP,SAAS,EACTqB,WAAW,EACXjB,SAAS,EACTmB,QAAQ,EACRM,SAAS,CACZ,CAAC;EAEF,OAAOjD,OAAO,CACV,mBACIH,KAAA,CAAA2I,aAAA,CAAC9H,cAAc;IACXoJ,GAAG,EAAErG,wBAAyB;IAC9BsG,mBAAmB,EAAE7H,kBAAmB;IACxCuH,SAAS,EAAE9G;EAAS,gBAEpB9C,KAAA,CAAA2I,aAAA,CAAC7H,oBAAoB;IACjBgJ,UAAU,EAAEvI,SAAU;IACtB4I,OAAO,EAAE7B,iBAAkB;IAC3B8B,OAAO,EAAExH,WAAY;IACrByH,QAAQ,EAAEtG,OAAQ;IAClBuG,WAAW,EAAE7I;EAAW,GAEvB,OAAOgB,UAAU,KAAK,QAAQ,gBAC3BzC,KAAA,CAAA2I,aAAA,CAAC3H,mBAAmB;IAChBuJ,QAAQ,EAAE9I,UAAW;IACrBkF,KAAK,EAAElE,UAAW;IAClB+H,QAAQ,EAAElI,aAAc;IACxBmI,MAAM,EAAEjI,WAAY;IACpBkI,OAAO,EAAEtI,YAAa;IACtBP,WAAW,EAAEwG;EAAgB,CAChC,CAAC,gBAEFrI,KAAA,CAAA2I,aAAA,CAAC1H,yBAAyB;IACtB0J,oBAAoB,EAAE,CAAC1I,YAAY,IAAI,CAACS;EAAqB,GAE5DwF,mBAAmB,iBAChBlI,KAAA,CAAA2I,aAAA,CAACzH,8BAA8B;IAC3B0J,GAAG,EAAE1C,mBAAoB;IACzB/F,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,EACAiG,eAAe,iBAAIpI,KAAA,CAAA2I,aAAA,CAAChI,IAAI;IAAC0G,KAAK,EAAEe;EAAgB,CAAE,CAAC,EACnDC,eAAe,EACf3F,oBAAoB,IACjBA,oBAAoB,CAACsG,aAAa,IAClCtG,oBAAoB,CAACsG,aACF,CAC9B,eACDhJ,KAAA,CAAA2I,aAAA,CAAC5H,yBAAyB,qBACtBf,KAAA,CAAA2I,aAAA,CAAChI,IAAI;IAAC0G,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CACT,CAAC,EACtB/D,MACW,CACnB,EACD,CACIjB,kBAAkB,EAClBS,QAAQ,EACRvB,SAAS,EACT+G,iBAAiB,EACjB1F,WAAW,EACXmB,OAAO,EACPtC,UAAU,EACVgB,UAAU,EACVH,aAAa,EACbE,WAAW,EACXJ,YAAY,EACZiG,eAAe,EACfpG,YAAY,EACZS,oBAAoB,EACpBwF,mBAAmB,EACnB/F,oBAAoB,EACpBiG,eAAe,EACf9E,MAAM,CAEd,CAAC;AACL,CAAC;AAEDjC,QAAQ,CAACwJ,WAAW,GAAG,UAAU;AAEjC,eAAexJ,QAAQ","ignoreList":[]}
|
|
@@ -46,7 +46,10 @@ export type ComboBoxProps = {
|
|
|
46
46
|
/**
|
|
47
47
|
* Function to be executed when the optional input lost its focus.
|
|
48
48
|
*/
|
|
49
|
-
onInputBlur?: FocusEventHandler<HTMLInputElement
|
|
49
|
+
onInputBlur?: FocusEventHandler<HTMLInputElement> /**
|
|
50
|
+
* Function to be executed when the optional input gets its focus.
|
|
51
|
+
*/;
|
|
52
|
+
onInputFocus?: FocusEventHandler<HTMLInputElement>;
|
|
50
53
|
/**
|
|
51
54
|
* Function that should be executed when an item is selected.
|
|
52
55
|
*/
|
|
@@ -67,6 +70,10 @@ export type ComboBoxProps = {
|
|
|
67
70
|
* If true, the images of the items are displayed in a round shape.
|
|
68
71
|
*/
|
|
69
72
|
shouldShowRoundImage?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Whether the width of the ComboBox should be the width of the current item.
|
|
75
|
+
*/
|
|
76
|
+
shouldUseCurrentItemWidth?: boolean;
|
|
70
77
|
/**
|
|
71
78
|
* Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.
|
|
72
79
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.880",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "084d50d3069a5e02724f83f09b4500063d54c175"
|
|
91
91
|
}
|