npm - @chayns-components/core - Versions diffs - 5.0.0-beta.1238 → 5.0.0-beta.1241 - Mend

@chayns-components/core 5.0.0-beta.1238 → 5.0.0-beta.1241

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

Files changed (18) hide show

package/lib/cjs/components/combobox/ComboBox.js +9 -0
package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
package/lib/cjs/components/select-button/SelectButton.js +1 -1
package/lib/cjs/components/select-button/SelectButton.js.map +1 -1
package/lib/cjs/hooks/element.js +12 -4
package/lib/cjs/hooks/element.js.map +1 -1
package/lib/cjs/types/selectButton.js.map +1 -1
package/lib/esm/components/combobox/ComboBox.js +9 -0
package/lib/esm/components/combobox/ComboBox.js.map +1 -1
package/lib/esm/components/select-button/SelectButton.js +1 -1
package/lib/esm/components/select-button/SelectButton.js.map +1 -1
package/lib/esm/hooks/element.js +10 -3
package/lib/esm/hooks/element.js.map +1 -1
package/lib/esm/types/selectButton.js.map +1 -1
package/lib/types/components/select-button/SelectButton.d.ts +2 -2
package/lib/types/hooks/element.d.ts +2 -1
package/lib/types/types/selectButton.d.ts +1 -1
package/package.json +2 -2

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

@@ -14,6 +14,7 @@ var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem
 var _ComboBox = require("./ComboBox.styles");
 var _DropdownBodyWrapper = _interopRequireDefault(require("../dropdown-body-wrapper/DropdownBodyWrapper"));
 var _dropdown = require("../../types/dropdown");
+var _element = require("../../hooks/element");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ComboBox = ({
@@ -46,6 +47,9 @@ const ComboBox = ({
   const isInputFocused = (0, _react.useRef)(false);
   const styledComboBoxElementRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
+  const parentSize = (0, _element.useElementSize)(styledComboBoxElementRef, {
+    shouldUseParentElement: true
+  });
   const functions = (0, _chaynsApi.useFunctions)();
   const values = (0, _chaynsApi.useValues)();
   const isTouch = (0, _environment.getIsTouch)();
@@ -53,6 +57,11 @@ const ComboBox = ({
     browser
   } = (0, _chaynsApi.useDevice)();
   const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  (0, _react.useEffect)(() => {
+    if (shouldUseFullWidth && parentSize) {
+      setMinWidth(parentSize.width);
+    }
+  }, [parentSize, shouldUseFullWidth]);
   const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   const shouldDisableActions = (0, _react.useMemo)(() => {
     if (!selectedItem) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBox","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","shouldDropDownUseMaxItemWidth","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","useRef","styledComboBoxElementRef","contentRef","functions","useFunctions","values","useValues","isTouch","getIsTouch","browser","useDevice","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","result","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","useEffect","handleKeyDown","key","_contentRef$current","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","_contentRef$current2","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","_styledComboBoxElemen","allItems","baseWidth","calculateContentWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","ref","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","$browser","name","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n type CSSProperties,\n FC,\n FocusEventHandler,\n Fragment,\n ReactHTML,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateContentWidth } from '../../utils/calculate';\nimport { getIsTouch } 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';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n tagName?: keyof ReactHTML;\n styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\n textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n /*\n The width of the body.\n /\n bodyWidth?: number;\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?: DropdownDirection;\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?: number;\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 to be executed when the optional input gets its focus.\n /\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n /\n onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> \| boolean \| 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 /\n prefix?: 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, a clear icon is displayed at the end of the combo box if an item is selected.\n /\n shouldShowClearIcon?: 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 If true, the dropdown will use the maximum width of the items.\n /\n shouldDropDownUseMaxItemWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n selectedItem,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number \| undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n\n const isInputFocused = useRef(false);\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const functions = useFunctions();\n const values = useValues();\n\n const isTouch = getIsTouch();\n\n const { browser } = useDevice();\n\n const areaProvider = useContext(AreaContext);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let result = flatItems.length 36;\n\n if (lists.length > 1) {\n result += lists.length * 36;\n }\n\n if (maxHeight < result) {\n result = maxHeight;\n }\n\n return result;\n }, [lists, maxHeight]);\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 setIsAnimating(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\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 setIsAnimating(false);\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n },\n [onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children \|\| children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') \|\|\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem \| undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n let baseWidth = calculateContentWidth(\n [\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ...(selectedItem ? [selectedItem] : []),\n ],\n functions,\n values,\n );\n\n if (shouldDropDownUseMaxItemWidth) {\n baseWidth += 20 + 2; // 20px padding left and right and 2px border\n setBodyMinWidth(baseWidth);\n setMinWidth(baseWidth);\n return;\n }\n\n const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n const parentWidth =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n const paddingWidth = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 let prefixWidth = 0;\n\n if (prefix) {\n const prefixTextWidth =\n calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n prefixWidth = Math.max(prefixTextWidth, 32);\n }\n\n const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n let tmpMinWidth = calculatedWidth;\n let tmpBodyMinWidth = calculatedWidth;\n\n // Full width settings\n if (shouldUseFullWidth) {\n tmpMinWidth = parentWidth;\n\n tmpBodyMinWidth =\n parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n }\n // Current item width settings\n else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n const itemWidth =\n calculateContentWidth([internalSelectedItem], functions, values) +\n paddingWidth +\n imageWidth +\n iconWidth +\n prefixWidth;\n\n tmpMinWidth = itemWidth;\n\n tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n }\n\n if (tmpMinWidth > parentWidth) {\n tmpMinWidth = parentWidth;\n }\n\n if (tmpBodyMinWidth > parentWidth) {\n tmpBodyMinWidth = parentWidth;\n }\n\n setMinWidth(tmpMinWidth);\n setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n }, [\n lists,\n placeholder,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n internalSelectedItem,\n prefix,\n selectedItem,\n functions,\n values,\n shouldDropDownUseMaxItemWidth,\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 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 item={item}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\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 $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper onClick={handleClear}>\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $shouldShowBorderLeft={\n shouldShowClearIcon === true && internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n maxHeight={maxHeight}\n >\n <StyledComboBoxBody\n $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n $maxHeight={maxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n $browser={browser?.name as BrowserName}\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n minWidth,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n shouldChangeColor,\n shouldShowBigImage,\n prefix,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundPlaceholderImage,\n placeholderIcon,\n inputValue,\n onInputChange,\n handleInputBlur,\n handleInputFocus,\n placeholderText,\n shouldShowClearIcon,\n handleClear,\n shouldDisableActions,\n bodyWidth,\n contentHeight,\n handleClose,\n container,\n bodyMinWidth,\n maxHeight,\n browser?.name,\n comboBoxGroups,\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","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBox","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","shouldDropDownUseMaxItemWidth","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","useRef","styledComboBoxElementRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","getIsTouch","browser","useDevice","areaProvider","useContext","AreaContext","useEffect","width","shouldChangeColor","useMemo","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","result","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","_contentRef$current2","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","_styledComboBoxElemen","allItems","baseWidth","calculateContentWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","ref","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","$browser","name","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n type CSSProperties,\n FC,\n FocusEventHandler,\n Fragment,\n ReactHTML,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateContentWidth } from '../../utils/calculate';\nimport { getIsTouch } 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';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n tagName?: keyof ReactHTML;\n styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\n textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n /*\n The width of the body.\n /\n bodyWidth?: number;\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?: DropdownDirection;\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?: number;\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 to be executed when the optional input gets its focus.\n /\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n /\n onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> \| boolean \| 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 /\n prefix?: 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, a clear icon is displayed at the end of the combo box if an item is selected.\n /\n shouldShowClearIcon?: 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 If true, the dropdown will use the maximum width of the items.\n /\n shouldDropDownUseMaxItemWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n selectedItem,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number \| undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n\n const isInputFocused = useRef(false);\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, { shouldUseParentElement: true });\n\n const functions = useFunctions();\n const values = useValues();\n\n const isTouch = getIsTouch();\n\n const { browser } = useDevice();\n\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (shouldUseFullWidth && parentSize) {\n setMinWidth(parentSize.width);\n }\n }, [parentSize, shouldUseFullWidth]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let result = flatItems.length 36;\n\n if (lists.length > 1) {\n result += lists.length * 36;\n }\n\n if (maxHeight < result) {\n result = maxHeight;\n }\n\n return result;\n }, [lists, maxHeight]);\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 setIsAnimating(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\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 setIsAnimating(false);\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n },\n [onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children \|\| children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') \|\|\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem \| undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n let baseWidth = calculateContentWidth(\n [\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ...(selectedItem ? [selectedItem] : []),\n ],\n functions,\n values,\n );\n\n if (shouldDropDownUseMaxItemWidth) {\n baseWidth += 20 + 2; // 20px padding left and right and 2px border\n setBodyMinWidth(baseWidth);\n setMinWidth(baseWidth);\n return;\n }\n\n const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n const parentWidth =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n const paddingWidth = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 let prefixWidth = 0;\n\n if (prefix) {\n const prefixTextWidth =\n calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n prefixWidth = Math.max(prefixTextWidth, 32);\n }\n\n const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n let tmpMinWidth = calculatedWidth;\n let tmpBodyMinWidth = calculatedWidth;\n\n // Full width settings\n if (shouldUseFullWidth) {\n tmpMinWidth = parentWidth;\n\n tmpBodyMinWidth =\n parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n }\n // Current item width settings\n else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n const itemWidth =\n calculateContentWidth([internalSelectedItem], functions, values) +\n paddingWidth +\n imageWidth +\n iconWidth +\n prefixWidth;\n\n tmpMinWidth = itemWidth;\n\n tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n }\n\n if (tmpMinWidth > parentWidth) {\n tmpMinWidth = parentWidth;\n }\n\n if (tmpBodyMinWidth > parentWidth) {\n tmpBodyMinWidth = parentWidth;\n }\n\n setMinWidth(tmpMinWidth);\n setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n }, [\n lists,\n placeholder,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n internalSelectedItem,\n prefix,\n selectedItem,\n functions,\n values,\n shouldDropDownUseMaxItemWidth,\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 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 item={item}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\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 $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper onClick={handleClear}>\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $shouldShowBorderLeft={\n shouldShowClearIcon === true && internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n maxHeight={maxHeight}\n >\n <StyledComboBoxBody\n $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n $maxHeight={maxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n $browser={browser?.name as BrowserName}\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n minWidth,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n shouldChangeColor,\n shouldShowBigImage,\n prefix,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundPlaceholderImage,\n placeholderIcon,\n inputValue,\n onInputChange,\n handleInputBlur,\n handleInputFocus,\n placeholderText,\n shouldShowClearIcon,\n handleClear,\n shouldDisableActions,\n bodyWidth,\n contentHeight,\n handleClose,\n container,\n bodyMinWidth,\n maxHeight,\n browser?.name,\n comboBoxGroups,\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;AAgBA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAD,sBAAA,CAAAP,OAAA;AACA,IAAAS,SAAA,GAAAT,OAAA;AAcA,IAAAU,oBAAA,GAAAH,sBAAA,CAAAP,OAAA;AACA,IAAAW,SAAA,GAAAX,OAAA;AACA,IAAAY,QAAA,GAAAZ,OAAA;AAAqD,SAAAO,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,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;AA6GrD,MAAMgB,QAA2B,GAAGA,CAAC;EACjCC,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,YAAY;EACZC,kBAAkB;EAClBC,mBAAmB;EACnBC,oBAAoB;EACpBC,YAAY;EACZC,kBAAkB,GAAG,KAAK;EAC1BC,aAAa;EACbC,yBAAyB,GAAG,KAAK;EACjCC,WAAW;EACXC,UAAU;EACVC,6BAA6B,GAAG;AACpC,CAAC,KAAK;EACF,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;EAErE,MAAMU,cAAc,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EAEpC,MAAMC,wBAAwB,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EAC7D,MAAME,UAAU,GAAG,IAAAF,aAAM,EAAwB,IAAI,CAAC;EAEtD,MAAMG,UAAU,GAAG,IAAAC,uBAAc,EAACH,wBAAwB,EAAE;IAAEI,sBAAsB,EAAE;EAAK,CAAC,CAAC;EAE7F,MAAMC,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAChC,MAAMC,MAAM,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE1B,MAAMC,OAAO,GAAG,IAAAC,uBAAU,EAAC,CAAC;EAE5B,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,MAAMC,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIpC,kBAAkB,IAAIsB,UAAU,EAAE;MAClCV,WAAW,CAACU,UAAU,CAACe,KAAK,CAAC;IACjC;EACJ,CAAC,EAAE,CAACf,UAAU,EAAEtB,kBAAkB,CAAC,CAAC;EAEpC,MAAMsC,iBAAiB,GAAG,IAAAC,cAAO,EAC7B,MAAMN,YAAY,CAACK,iBAAiB,IAAI,KAAK,EAC7C,CAACL,YAAY,CAACK,iBAAiB,CACnC,CAAC;EAED,MAAME,oBAAoB,GAAG,IAAAD,cAAO,EAAC,MAAM;IACvC,IAAI,CAAC5C,YAAY,EAAE;MACf,OAAO,KAAK;IAChB;IAEA,MAAM8C,aAAa,GAAGpD,KAAK,CAACqD,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,KAAKpD,YAAY,CAACoD,KAAK,CAAC;EAEvE,CAAC,EAAE,CAAC1D,KAAK,EAAEM,YAAY,CAAC,CAAC;EAEzB,MAAMqD,aAAa,GAAG,IAAAT,cAAO,EAAC,MAAM;IAChC,MAAMU,SAAS,GAAG5D,KAAK,CAACqD,OAAO,CAAEC,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IAEpD,IAAIO,MAAM,GAAGD,SAAS,CAACL,MAAM,GAAG,EAAE;IAElC,IAAIvD,KAAK,CAACuD,MAAM,GAAG,CAAC,EAAE;MAClBM,MAAM,IAAI7D,KAAK,CAACuD,MAAM,GAAG,EAAE;IAC/B;IAEA,IAAItD,SAAS,GAAG4D,MAAM,EAAE;MACpBA,MAAM,GAAG5D,SAAS;IACtB;IAEA,OAAO4D,MAAM;EACjB,CAAC,EAAE,CAAC7D,KAAK,EAAEC,SAAS,CAAC,CAAC;EAEtB,MAAM6D,gBAAqD,GAAG,IAAAC,kBAAW,EACpEC,KAAK,IAAK;IACPnC,cAAc,CAACoC,OAAO,GAAG,IAAI;IAC7BvD,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAGsD,KAAK,CAAC;EACzB,CAAC,EACD,CAACtD,YAAY,CACjB,CAAC;EAED,MAAMwD,eAAoD,GAAG,IAAAH,kBAAW,EACnEC,KAAK,IAAK;IACPnC,cAAc,CAACoC,OAAO,GAAG,KAAK;IAC9BnD,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAGkD,KAAK,CAAC;EACxB,CAAC,EACD,CAAClD,WAAW,CAChB,CAAC;EAED,MAAMqD,UAAU,GAAG,IAAAJ,kBAAW,EAAC,MAAM;IACjC1C,cAAc,CAAC,IAAI,CAAC;EACxB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM+C,WAAW,GAAG,IAAAL,kBAAW,EAAC,MAAM;IAClC1C,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;EACI,MAAMgD,qBAAqB,GAAG,IAAAN,kBAAW,EACpCO,YAA4B,IAAK;IAC9B,IAAI,OAAOpE,QAAQ,KAAK,UAAU,EAAE;MAChC,MAAMqE,cAAc,GAAGrE,QAAQ,CAACoE,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;UAE5BxD,uBAAuB,CAACoD,YAAY,CAAC;UACrCjD,cAAc,CAAC,KAAK,CAAC;QACzB,CAAC,CAAC;QAEF;MACJ;IACJ;IAEAH,uBAAuB,CAACoD,YAAY,CAAC;IACrCjD,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EACD,CAACnB,QAAQ,CACb,CAAC;EAED,MAAMyE,WAAW,GAAG,IAAAZ,kBAAW,EAC1BC,KAAuC,IAAK;IACzCA,KAAK,CAACY,cAAc,CAAC,CAAC;IACtBZ,KAAK,CAACa,eAAe,CAAC,CAAC;IAEvBR,qBAAqB,CAAC7C,SAAS,CAAC;EACpC,CAAC,EACD,CAAC6C,qBAAqB,CAC1B,CAAC;EAED,IAAAtB,gBAAS,EAAC,MAAM;IACZ,MAAM+B,aAAa,GAAIvG,CAAgB,IAAK;MACxC,IAAI,CAAC6C,WAAW,EAAE;MAElB,IAAI7C,CAAC,CAACwG,GAAG,KAAK,SAAS,IAAIxG,CAAC,CAACwG,GAAG,KAAK,WAAW,EAAE;QAAA,IAAAC,mBAAA;QAC9CzG,CAAC,CAACqG,cAAc,CAAC,CAAC;QAElB,MAAMK,QAAQ,IAAAD,mBAAA,GAAGhD,UAAU,CAACiC,OAAO,cAAAe,mBAAA,uBAAlBA,mBAAA,CAAoBC,QAAQ;QAE7C,IAAI,CAACA,QAAQ,IAAIA,QAAQ,CAAC1B,MAAM,KAAK,CAAC,EAAE;QAExC,MAAM2B,aAAa,GAAG3G,CAAC,CAACwG,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC;QAElD,IAAII,QAAQ,GAAGxD,YAAY,IAAI,CAAC,CAAC;QAEjC,IAAIyD,QAAQ,GAAG,CAAC;QAEhB,GAAG;UACCD,QAAQ,GAAG,CAACA,QAAQ,GAAGD,aAAa,GAAGD,QAAQ,CAAC1B,MAAM,IAAI0B,QAAQ,CAAC1B,MAAM;UAEzE,MAAM8B,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,CAAC1B,MAAM;QAEnC,IAAI5B,YAAY,KAAK,IAAI,EAAE;UACvB,MAAM+D,WAAW,GAAGT,QAAQ,CAACtD,YAAY,CAAmB;UAE5D+D,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;QAC7B;QAEA/D,eAAe,CAACuD,QAAQ,CAAC;QAEzB,MAAMS,cAAc,GAAGX,QAAQ,CAACE,QAAQ,CAAmB;QAE3DS,cAAc,CAACD,QAAQ,GAAG,CAAC;QAE3BC,cAAc,CAACC,KAAK,CAAC,CAAC;MAC1B,CAAC,MAAM,IAAItH,CAAC,CAACwG,GAAG,KAAK,OAAO,IAAIpD,YAAY,KAAK,IAAI,EAAE;QAAA,IAAAmE,oBAAA;QACnD,MAAMC,OAAO,IAAAD,oBAAA,GAAG9D,UAAU,CAACiC,OAAO,cAAA6B,oBAAA,uBAAlBA,oBAAA,CAAoBb,QAAQ,CAACtD,YAAY,CAAC;QAE1D,IAAI,CAACoE,OAAO,EAAE;QAEd,MAAM;UAAER;QAAG,CAAC,GAAGQ,OAAO;QAEtB,IAAIC,eAA0C;QAE9ChG,KAAK,CAACwD,IAAI,CAAEF,IAAI,IAAK;UACjB0C,eAAe,GAAG1C,IAAI,CAACA,IAAI,CAAC2C,IAAI,CAC5B,CAAC;YAAEvC;UAAM,CAAC,KAAKwC,MAAM,CAACxC,KAAK,CAAC,KAAK6B,EAAE,CAACY,OAAO,CAAC,iBAAiB,EAAE,EAAE,CACrE,CAAC;UAED,OAAO,CAAC,CAACH,eAAe;QAC5B,CAAC,CAAC;QAEF,IAAIA,eAAe,EAAE;UACjB3B,qBAAqB,CAAC2B,eAAe,CAAC;QAC1C;MACJ;IACJ,CAAC;IAEDI,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEvB,aAAa,CAAC;IAEnD,OAAO,MAAMsB,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAExB,aAAa,CAAC;EACvE,CAAC,EAAE,CAACnD,YAAY,EAAE0C,qBAAqB,EAAEjD,WAAW,EAAEpB,KAAK,CAAC,CAAC;;EAE7D;AACJ;AACA;EACI,IAAA+C,gBAAS,EAAC,MAAM;IAAA,IAAAwD,qBAAA;IACZ,MAAMC,QAAQ,GAAGxG,KAAK,CAACqD,OAAO,CAAEC,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IAEnD,IAAImD,SAAS,GAAG,IAAAC,gCAAqB,EACjC,CACI,GAAGF,QAAQ,EACX;MAAEG,IAAI,EAAExG,WAAW;MAAEuD,KAAK,EAAE;IAAc,CAAC,EAC3C,IAAIpD,YAAY,GAAG,CAACA,YAAY,CAAC,GAAG,EAAE,CAAC,CAC1C,EACD8B,SAAS,EACTE,MACJ,CAAC;IAED,IAAItB,6BAA6B,EAAE;MAC/ByF,SAAS,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;MACrB/E,eAAe,CAAC+E,SAAS,CAAC;MAC1BlF,WAAW,CAACkF,SAAS,CAAC;MACtB;IACJ;IAEA,MAAMG,QAAQ,GAAG,CAACtG,YAAY,EAAE,GAAGkG,QAAQ,CAAC,CAAChD,IAAI,CAAEC,IAAI,IAAKA,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoD,QAAQ,CAAC;IAC3E,MAAMC,OAAO,GAAG,CAACxG,YAAY,EAAE,GAAGkG,QAAQ,CAAC,CAAChD,IAAI,CAAEC,IAAI,IAAKA,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEsD,KAAK,CAAC;IAEvE,MAAMC,WAAW,GACb,EAAAT,qBAAA,GAAAxE,wBAAwB,CAACkC,OAAO,cAAAsC,qBAAA,gBAAAA,qBAAA,GAAhCA,qBAAA,CAAkCU,aAAa,cAAAV,qBAAA,uBAA/CA,qBAAA,CAAiDW,qBAAqB,CAAC,CAAC,CAAClE,KAAK,KAAI,CAAC;IAEvF,MAAMmE,YAAY,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACvC,MAAMC,UAAU,GAAGR,QAAQ,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IACtC,MAAMS,SAAS,GAAGP,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;;IAEpC,IAAIQ,WAAW,GAAG,CAAC;IAEnB,IAAIlH,MAAM,EAAE;MACR,MAAMmH,eAAe,GACjB,IAAAb,gCAAqB,EAAC,CAAC;QAAEC,IAAI,EAAEvG,MAAM;QAAEsD,KAAK,EAAE;MAAS,CAAC,CAAC,EAAEtB,SAAS,EAAEE,MAAM,CAAC,GAAG,CAAC;MAErFgF,WAAW,GAAGE,IAAI,CAACC,GAAG,CAACF,eAAe,EAAE,EAAE,CAAC;IAC/C;IAEA,MAAMG,eAAe,GAAGjB,SAAS,GAAGU,YAAY,GAAGC,UAAU,GAAGC,SAAS,GAAGC,WAAW;IAEvF,IAAIK,WAAW,GAAGD,eAAe;IACjC,IAAIE,eAAe,GAAGF,eAAe;;IAErC;IACA,IAAI/G,kBAAkB,EAAE;MACpBgH,WAAW,GAAGX,WAAW;MAEzBY,eAAe,GACXZ,WAAW,GAAGU,eAAe,GAAG,EAAE,GAAGA,eAAe,GAAG,EAAE,GAAGV,WAAW;IAC/E;IACA;IAAA,KACK,IAAInG,yBAAyB,IAAII,oBAAoB,EAAE;MACxD,MAAM4G,SAAS,GACX,IAAAnB,gCAAqB,EAAC,CAACzF,oBAAoB,CAAC,EAAEmB,SAAS,EAAEE,MAAM,CAAC,GAChE6E,YAAY,GACZC,UAAU,GACVC,SAAS,GACTC,WAAW;MAEfK,WAAW,GAAGE,SAAS;MAEvBD,eAAe,GAAGC,SAAS,GAAGH,eAAe,GAAG,EAAE,GAAGA,eAAe,GAAG,EAAE,GAAGG,SAAS;IACzF;IAEA,IAAIF,WAAW,GAAGX,WAAW,EAAE;MAC3BW,WAAW,GAAGX,WAAW;IAC7B;IAEA,IAAIY,eAAe,GAAGZ,WAAW,EAAE;MAC/BY,eAAe,GAAGZ,WAAW;IACjC;IAEAzF,WAAW,CAACoG,WAAW,CAAC;IACxBjG,eAAe,CAACb,yBAAyB,GAAG8G,WAAW,GAAGC,eAAe,CAAC;EAC9E,CAAC,EAAE,CACC5H,KAAK,EACLG,WAAW,EACXQ,kBAAkB,EAClBE,yBAAyB,EACzBI,oBAAoB,EACpBb,MAAM,EACNE,YAAY,EACZ8B,SAAS,EACTE,MAAM,EACNtB,6BAA6B,CAChC,CAAC;;EAEF;AACJ;AACA;EACI,IAAA+B,gBAAS,EAAC,MAAM;IACZ1B,cAAc,CAAC,KAAK,CAAC;IACrBH,uBAAuB,CAACZ,YAAY,CAAC;EACzC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMwH,mBAAmB,GAAG,IAAA5E,cAAO,EAAC,MAAM;IACtC,IAAI5C,YAAY,EAAE;MACd,OAAOA,YAAY,CAACuG,QAAQ;IAChC;IAEA,IAAI5F,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAAC4F,QAAQ;IACxC;IAEA,OAAOrF,SAAS;EACpB,CAAC,EAAE,CAACP,oBAAoB,EAAEX,YAAY,CAAC,CAAC;EAExC,MAAMyH,eAAe,GAAG,IAAA7E,cAAO,EAAC,MAAM;IAClC,IAAI5C,YAAY,EAAE;MACd,OAAOA,YAAY,CAACyG,KAAK;IAC7B;IAEA,IAAI9F,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAAC8F,KAAK;IACrC;IAEA,OAAOvF,SAAS;EACpB,CAAC,EAAE,CAACP,oBAAoB,EAAEX,YAAY,CAAC,CAAC;;EAExC;AACJ;AACA;EACI,MAAM0H,eAAe,GAAG,IAAA9E,cAAO,EAAC,MAAM;IAClC,IAAIyD,IAAI,GAAGxG,WAAW;IAEtB,IAAIG,YAAY,EAAE;MACdqG,IAAI,GAAGrG,YAAY,CAACqG,IAAI;IAC5B,CAAC,MAAM,IAAI1F,oBAAoB,EAAE;MAC7B0F,IAAI,GAAG1F,oBAAoB,CAAC0F,IAAI;IACpC;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAAC1F,oBAAoB,EAAEd,WAAW,EAAEG,YAAY,CAAC,CAAC;EAErD,MAAM2H,+BAA+B,GAAG,IAAA/E,cAAO,EAAC,MAAM;IAClD,MAAMgF,gBAAgB,GAAGlI,KAAK,CAACiG,IAAI,CAAE3C,IAAI,IACrCA,IAAI,CAACA,IAAI,CAACE,IAAI,CACV,CAAC;MAAEE;IAAM,CAAC,KAAKA,KAAK,MAAM,CAAApD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEoD,KAAK,MAAIzC,oBAAoB,aAApBA,oBAAoB,uBAApBA,oBAAoB,CAAEyC,KAAK,EAChF,CACJ,CAAC;IAED,OAAO,CAAAwE,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEzH,oBAAoB,KAAIA,oBAAoB;EACzE,CAAC,EAAE,CAACQ,oBAAoB,aAApBA,oBAAoB,uBAApBA,oBAAoB,CAAEyC,KAAK,EAAE1D,KAAK,EAAEM,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEoD,KAAK,EAAEjD,oBAAoB,CAAC,CAAC;;EAEnF;AACJ;AACA;EACI,MAAM0H,iBAAiB,GAAG,IAAApE,kBAAW,EAAC,MAAM;IACxC,IAAI,CAAChE,UAAU,IAAI,CAAC8B,cAAc,CAACoC,OAAO,EAAE;MACxC,IAAI7C,WAAW,EAAE;QACbgD,WAAW,CAAC,CAAC;MACjB,CAAC,MAAM;QACHD,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACC,WAAW,EAAED,UAAU,EAAE/C,WAAW,EAAErB,UAAU,CAAC,CAAC;EAEtD,MAAMqI,cAAc,GAAG,IAAAlF,cAAO,EAC1B,MACIlD,KAAK,CAACqI,GAAG,CAAE/E,IAAI,iBACX3F,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAAC3K,MAAA,CAAA4K,QAAQ;IAACxD,GAAG,EAAEzB,IAAI,CAACkF,SAAS,IAAI;EAAgB,GAC5ClF,IAAI,CAACkF,SAAS,IAAIxI,KAAK,CAACuD,MAAM,GAAG,CAAC,iBAC/B5F,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAsK,mBAAmB;IAAClD,EAAE,EAAE,mBAAmBjC,IAAI,CAACkF,SAAS;EAAG,GACxDlF,IAAI,CAACkF,SACW,CACxB,EACAlF,IAAI,CAACA,IAAI,CAAC+E,GAAG,CAAE5E,IAAI,iBAChB9F,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACpK,aAAA,CAAAO,OAAY;IACTgF,IAAI,EAAEA,IAAK;IACXiF,UAAU,EAAEpI,YAAY,GAAGmD,IAAI,CAACC,KAAK,KAAKpD,YAAY,CAACoD,KAAK,GAAG,KAAM;IACrExD,QAAQ,EAAEmE,qBAAsB;IAChC9D,kBAAkB,EAAEA,kBAAmB;IACvCE,oBAAoB,EAAE6C,IAAI,CAAC7C,oBAAoB,IAAIA;EAAqB,CAC3E,CACJ,CACK,CACb,CAAC,EACN,CAAC4D,qBAAqB,EAAErE,KAAK,EAAEM,YAAY,EAAEC,kBAAkB,EAAEE,oBAAoB,CACzF,CAAC;EAED,OAAO,IAAAyC,cAAO,EACV,mBACIvF,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAwK,cAAc;IACXC,GAAG,EAAE7G,wBAAyB;IAC9B8G,SAAS,EAAEvH,QAAS;IACpBwH,mBAAmB,EAAEnI,kBAAmB;IACxCoI,0BAA0B,EAAElI;EAA0B,gBAEtDlD,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAA6K,oBAAoB;IACjBC,UAAU,EAAErJ,SAAU;IACtBsJ,OAAO,EAAEf,iBAAkB;IAC3BgB,OAAO,EAAE/H,WAAY;IACrBgI,QAAQ,EAAE5G,OAAQ;IAClB6G,WAAW,EAAEtJ,UAAW;IACxBuJ,kBAAkB,EAAErG,iBAAkB;IACtCsG,mBAAmB,EAAEhJ;EAAmB,gBAExC5C,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAqL,yCAAyC,QACrCpJ,MAAM,iBAAIzC,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAsL,oBAAoB,QAAErJ,MAA6B,CAAC,eAChEzC,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAuL,yBAAyB;IACtBC,oBAAoB,EAAE,CAACrJ,YAAY,IAAI,CAACW;EAAqB,GAE5D6G,mBAAmB,iBAChBnK,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAyL,8BAA8B;IAC3BC,GAAG,EAAE/B,mBAAoB;IACzByB,mBAAmB,EAAEhJ,kBAAmB;IACxCuJ,qBAAqB,EAAE7B;EAAgC,CAC1D,CACJ,EACAF,eAAe,iBAAIpK,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACtK,KAAA,CAAAS,OAAI;IAACsI,KAAK,EAAEgB;EAAgB,CAAE,CAAC,EACnD,OAAOhH,UAAU,KAAK,QAAQ,gBAC3BpD,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAA4L,mBAAmB;IAChBC,QAAQ,EAAEjK,UAAW;IACrB2D,KAAK,EAAE3C,UAAW;IAClBkJ,QAAQ,EAAErJ,aAAc;IACxBsJ,MAAM,EAAEhG,eAAgB;IACxBiG,OAAO,EAAErG,gBAAiB;IAC1B3D,WAAW,EAAE6H;EAAgB,CAChC,CAAC,gBAEFrK,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAiM,6BAA6B,QACzBpC,eAC0B,CAClC,EACA/G,oBAAoB,IACjBA,oBAAoB,CAACoJ,aAAa,IAClCpJ,oBAAoB,CAACoJ,aACF,CACY,CAAC,EAC3C7J,mBAAmB,IAAIS,oBAAoB,iBACxCtD,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAmM,8BAA8B;IAACpB,OAAO,EAAEvE;EAAY,gBACjDhH,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACtK,KAAA,CAAAS,OAAI;IAACsI,KAAK,EAAE,CAAC,aAAa;EAAE,CAAE,CACH,CACnC,EACA,CAAC5D,oBAAoB,iBAClBxF,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAAoM,yBAAyB;IACtBC,qBAAqB,EACjBhK,mBAAmB,KAAK,IAAI,IAAIS,oBAAoB,KAAKO;EAC5D,gBAED7D,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACtK,KAAA,CAAAS,OAAI;IAACsI,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CAEb,CAAC,EACtBhF,wBAAwB,CAACkC,OAAO,iBAC7BtG,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAAClK,oBAAA,CAAAK,OAAmB;IAChBgM,aAAa,EAAE1I,wBAAwB,CAACkC,OAAQ;IAChDtE,SAAS,EAAEA,SAAU;IACrBgE,aAAa,EAAEA,aAAc;IAC7B+G,OAAO,EAAEtG,WAAY;IACrBxE,SAAS,EAAEA,SAAU;IACrBS,SAAS,EAAEA,SAAU;IACrBsK,kBAAkB,EAAEvJ,WAAY;IAChCwJ,YAAY,EAAEjL,SAAS,IAAI8B,YAAa;IACxCxB,SAAS,EAAEA;EAAU,gBAErBtC,MAAA,CAAAc,OAAA,CAAA6J,aAAA,CAACnK,SAAA,CAAA0M,kBAAkB;IACf9B,0BAA0B,EAAElI,yBAA0B;IACtDiK,UAAU,EAAE7K,SAAU;IACtB4I,SAAS,EAAElJ,SAAS,IAAI8B,YAAa;IACrCsJ,QAAQ,EAAErI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEsI,IAAoB;IACvCpC,GAAG,EAAE5G,UAAW;IAChB2D,QAAQ,EAAE;EAAE,GAEXyC,cACe,CACH,CAEb,CACnB,EACD,CACI9G,QAAQ,EACRX,kBAAkB,EAClBE,yBAAyB,EACzBjB,SAAS,EACTuI,iBAAiB,EACjB/G,WAAW,EACXoB,OAAO,EACPzC,UAAU,EACVkD,iBAAiB,EACjB1C,kBAAkB,EAClBH,MAAM,EACNE,YAAY,EACZW,oBAAoB,EACpB6G,mBAAmB,EACnBG,+BAA+B,EAC/BF,eAAe,EACfhH,UAAU,EACVH,aAAa,EACbsD,eAAe,EACfJ,gBAAgB,EAChBkE,eAAe,EACfxH,mBAAmB,EACnBmE,WAAW,EACXxB,oBAAoB,EACpBxD,SAAS,EACTgE,aAAa,EACbS,WAAW,EACX/D,SAAS,EACToB,YAAY,EACZxB,SAAS,EACTyC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEsI,IAAI,EACb5C,cAAc,CAEtB,CAAC;AACL,CAAC;AAED1I,QAAQ,CAACuL,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1M,OAAA,GAEnBiB,QAAQ","ignoreList":[]}

package/lib/cjs/components/select-button/SelectButton.js CHANGED Viewed

@@ -76,7 +76,7 @@ const SelectButton = ({
         // Ignore because there is no type
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        onSelect(result.result.map(Number));
+        onSelect(result.result);
       }
     });
   };

package/lib/cjs/components/select-button/SelectButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectButton.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_Button","_interopRequireDefault","_SelectButton","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","useMemo","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","createDialog","undefined","type","DialogType","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","~~map","Number","~~createElement","StyledSelectButton","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName","_default","exports"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /*\n Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n /\n additionalText?: string;\n /\n The text that should be displayed inside the button.\n /\n buttonText: string;\n /\n Whether the button should be disabled.\n /\n isDisabled?: boolean;\n /\n A list of item that could be selected.\n /\n list: SelectButtonItem[];\n /\n The maximum number of items displayed in the button text.\n /\n maxDisplayedItems?: number;\n /\n Function to be executed after an item is selected.\n /\n onSelect?: (ids: number[]) => void;\n /\n If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n /\n selectAllText?: string;\n /\n The id of an item that should be preselected.\n /\n selectedItemIds?: number[];\n /\n Whether more than one item should be selectable.\n /\n shouldAllowMultiSelect?: boolean;\n /\n Whether the button text should be displayed also if items are selected.\n /\n shouldShowButtonTextWithSelection?: boolean;\n /\n Whether the search should be displayed inside the dialog.\n /\n shouldShowSearch?: boolean;\n /\n The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n maxDisplayedItems = 3,\n additionalText = ', ##count## weitere',\n shouldShowSearch,\n selectAllText,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection \|\| !selectedItemIds \|\| selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n list.forEach(({ text, id }) => {\n if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n addedCount++;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount >= 1) {\n newText += additionalText.replace('##count##', String(additionalCount));\n }\n\n return newText;\n }, [\n additionalText,\n buttonText,\n list,\n maxDisplayedItems,\n selectedItemIds,\n shouldShowButtonTextWithSelection,\n ]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n selectAllCheckbox: selectAllText,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect((result.result ~~as string[]~~)~~.map(Number))~~;\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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~~CAAEqC~~,MAAM,CAACA,MAAM,~~CAAcE,GAAG,CAACC,MAAM,~~CAAC~~,CAAC~~;~~MACrD~~;IACJ,CAAC,CAAC;EACV,CAAC;EAED,~~oBACIpE~~,MAAA,CAAAO,OAAA,~~CAAA8D~~,aAAA,~~CAACjE~~,aAAA,~~CAAAkE~~,kBAAkB,~~qBACftE~~,MAAA,CAAAO,OAAA,~~CAAA8D~~,aAAA,~~CAACnE~~,OAAA,CAAAK,OAAM;~~IACHgE~~,OAAO,~~EAAEjB~~,WAAY;IACrB5B,UAAU,EAAEA,UAAW;~~IACvB8C~~,WAAW;IACXC,4BAA4B,EAAE;EAAM,~~GAEnC1B~~,kBACG,CACQ,CAAC;AAE7B,CAAC;AAEDvB,YAAY,~~CAACkD~~,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAArE~~,OAAA,GAE3BiB,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"SelectButton.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_Button","_interopRequireDefault","_SelectButton","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","useMemo","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","createDialog","undefined","type","DialogType","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","createElement","StyledSelectButton","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName","_default","exports"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /*\n Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n /\n additionalText?: string;\n /\n The text that should be displayed inside the button.\n /\n buttonText: string;\n /\n Whether the button should be disabled.\n /\n isDisabled?: boolean;\n /\n A list of item that could be selected.\n /\n list: SelectButtonItem[];\n /\n The maximum number of items displayed in the button text.\n /\n maxDisplayedItems?: number;\n /\n Function to be executed after an item is selected.\n /\n onSelect?: (ids: (number \| string)[]) => void;\n /\n If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n /\n selectAllText?: string;\n /\n The id of an item that should be preselected.\n /\n selectedItemIds?: (number \| string)[];\n /\n Whether more than one item should be selectable.\n /\n shouldAllowMultiSelect?: boolean;\n /\n Whether the button text should be displayed also if items are selected.\n /\n shouldShowButtonTextWithSelection?: boolean;\n /\n Whether the search should be displayed inside the dialog.\n /\n shouldShowSearch?: boolean;\n /\n The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n maxDisplayedItems = 3,\n additionalText = ', ##count## weitere',\n shouldShowSearch,\n selectAllText,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection \|\| !selectedItemIds \|\| selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n list.forEach(({ text, id }) => {\n if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n addedCount++;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount >= 1) {\n newText += additionalText.replace('##count##', String(additionalCount));\n }\n\n return newText;\n }, [\n additionalText,\n buttonText,\n list,\n maxDisplayedItems,\n selectedItemIds,\n shouldShowButtonTextWithSelection,\n ]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n selectAllCheckbox: selectAllText,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect(result.result);\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/hooks/element.js CHANGED Viewed

@@ -7,12 +7,20 @@ exports.useMeasuredClone = exports.useIsMeasuredClone = exports.useElementSize =
 var _react = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const useElementSize = (ref, {
-  shouldUseChildElement = false
+  shouldUseChildElement = false,
+  shouldUseParentElement = false
 } = {}) => {
   const [size, setSize] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    var _ref$current;
-    const target = shouldUseChildElement ? (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.firstElementChild : ref.current;
+    let target = ref.current;
+    if (shouldUseParentElement) {
+      var _ref$current;
+      target = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
+    }
+    if (shouldUseChildElement) {
+      var _ref$current2;
+      target = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.firstElementChild;
+    }
     if (!target) return () => {};
     const updateSize = () => setSize(target.getBoundingClientRect());
     updateSize();
@@ -25,7 +33,7 @@ const useElementSize = (ref, {
     });
     observer.observe(target);
     return () => observer.disconnect();
-  }, [ref, shouldUseChildElement]);
+  }, [ref, shouldUseChildElement, shouldUseParentElement]);
   return size;
 };
 exports.useElementSize = useElementSize;

package/lib/cjs/hooks/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useElementSize","ref","shouldUseChildElement","size","setSize","useState","useEffect","_ref$current","~~target~~","~~current~~","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","exports","getClonedElement","content","preventEvents","onClick","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","isValidElement","cloneElement","createElement","useMeasuredClone","useRef","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute"~~,"parentElement"~~],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n ~~const~~ target = (\n ~~shouldUseChildElement~~ ? ref.current?.~~firstElementChild~~ : ~~ref.current~~\n ) as HTMLElement \| null;\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width: width + 10, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T \| null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement \| null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAUe,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAMR~~,MAAMkB,cAAc,GAAGA,CAC1BC,GAA+D,EAC/D;EAAEC,qBAAqB,GAAG;AAA6B,CAAC,GAAG,CAAC,CAAC,KAC/B;EAC9B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAkB,CAAC;EAEnD,IAAAC,gBAAS,EAAC,MAAM;~~IAAA~~,~~IAAAC~~,~~YAAA~~;~~IACZ~~,~~MAAMC~~,~~MAAM~~,~~GACRN~~,~~qBAAqB~~,~~IAAAK~~,YAAA,~~GAAGN~~,GAAG,CAACQ,OAAO,~~cAAAF~~,YAAA,uBAAXA,YAAA,~~CAAaG~~,~~iBAAiB~~,~~GAAGT~~,GAAG,CAACQ,~~OAC1C~~;~~IAEvB~~,IAAI,~~CAACD~~,MAAM,EAAE,OAAO,MAAM,CAAC,CAAC;IAE5B,~~MAAMG~~,UAAU,GAAGA,CAAA,~~KAAMP~~,OAAO,~~CAACI~~,MAAM,~~CAACI~~,qBAAqB,CAAC,CAAC,CAAC;IAEhED,UAAU,CAAC,CAAC;IAEZ,MAAME,QAAQ,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;MAC7CA,OAAO,CAACC,OAAO,CAAEC,KAAK,IAAK;QACvB,IAAIA,KAAK,~~CAACT~~,MAAM,KAAKA,MAAM,EAAE;~~UACzBJ~~,OAAO,~~CAACa~~,KAAK,CAACC,WAAW,CAAC;QAC9B;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;IAEFL,QAAQ,CAACM,OAAO,~~CAACX~~,MAAM,CAAC;IAExB,OAAO,~~MAAMK~~,QAAQ,CAACO,UAAU,CAAC,CAAC;EACtC,CAAC,EAAE,~~CAACnB~~,GAAG,EAAEC,qBAAqB,CAAC,CAAC;~~EAEhC~~,OAAOC,IAAI;AACf,CAAC;~~AAACkB~~,OAAA,~~CAAArB~~,cAAA,GAAAA,cAAA;AAEF,~~MAAMsB~~,gBAAgB,GAAIC,OAAkB,IAAK;EAC7C,MAAMC,aAA2C,GAAG;IAChDC,OAAO,~~EAAG5C~~,CAAC,IAAKA,CAAC,~~CAAC6C~~,eAAe,CAAC,CAAC;IACnCC,WAAW,~~EAAG9C~~,CAAC,IAAKA,CAAC,~~CAAC6C~~,eAAe,CAAC,CAAC;IACvCE,SAAS,~~EAAG/C~~,CAAC,IAAKA,CAAC,~~CAAC6C~~,eAAe,CAAC,CAAC;IACrCG,SAAS,~~EAAGhD~~,CAAC,IAAKA,CAAC,~~CAAC6C~~,eAAe,CAAC,CAAC;IACrCI,OAAO,~~EAAGjD~~,CAAC,IAAKA,CAAC,~~CAAC6C~~,eAAe,CAAC,CAAC;IACnCK,OAAO,~~EAAGlD~~,CAAC,IAAKA,CAAC,~~CAAC6C~~,eAAe,CAAC,CAAC;IACnCM,MAAM,~~EAAGnD~~,CAAC,IAAKA,CAAC,~~CAAC6C~~,eAAe,CAAC;EACrC,CAAC;EAED,MAAMO,KAAK,GAAG;IACV,GAAGT,aAAa;IAChB,qBAAqB,EAAE;EAC3B,CAAC;EAED,iBAAI,IAAAU,qBAAc,EAACX,OAAO,CAAC,EAAE;IACzB,oBAAO,IAAAY,mBAAY,EAACZ,OAAO,EAA6BU,KAAK,CAAC;EAClE;EAEA,IAAI,OAAOV,OAAO,KAAK,QAAQ,EAAE;IAC7B;IACA,~~oBAAO7C~~,MAAA,CAAAa,OAAA,~~CAAA6C~~,aAAA,SAAUH,KAAK,EAAGV,OAAc,CAAC;EAC5C;EAEA,OAAOA,OAAO;AAClB,CAAC;AAMM,MAAMc,gBAAgB,GAAGA,CAAC;EAAEd;AAAiC,CAAC,KAAK;EACtE,~~MAAMtB~~,GAAG,GAAG,~~IAAAqC~~,aAAM,EAAiB,IAAI,CAAC;EACxC,MAAM,~~CAACnC~~,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAC;~~IAAEkC~~,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC,CAAC;EAEzD,MAAMC,aAAa,GAAGnB,gBAAgB,CAACC,OAAO,CAAC;EAE/C,~~IAAAjB~~,gBAAS,EAAC,MAAM;IACZ,~~MAAMoC~~,OAAO,GAAGA,CAAA,KAAM;MAClB,IAAI,~~CAACzC~~,GAAG,CAACQ,OAAO,EAAE;MAClB,MAAM;~~QAAEkC~~,WAAW,EAAEJ,KAAK;QAAEK,YAAY,EAAEJ;MAAO,CAAC,~~GAAGvC~~,GAAG,CAACQ,OAAO;~~MAChEL~~,OAAO,CAAC;~~QAAEmC~~,KAAK,EAAEA,KAAK,GAAG,EAAE;QAAEC;MAAO,CAAC,CAAC;IAC1C,CAAC;IAEDE,OAAO,CAAC,CAAC;IAET,MAAM7B,QAAQ,GAAG,IAAIC,cAAc,CAAC4B,OAAO,CAAC;IAE5C,~~IAAIzC~~,GAAG,CAACQ,OAAO,~~EAAEI~~,QAAQ,CAACM,OAAO,~~CAAClB~~,GAAG,CAACQ,OAAO,CAAC;IAE9C,OAAO,~~MAAMI~~,QAAQ,CAACO,UAAU,CAAC,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMyB,eAAe,~~gBACjBnE~~,MAAA,CAAAa,OAAA,~~CAAA6C~~,aAAA;IACI,uBAAoB,MAAM;~~IAC1BnC~~,GAAG,EAAEA,GAAI;~~IACT6C~~,KAAK,EAAE;MACHC,QAAQ,EAAE,OAAO;MACjBC,OAAO,EAAE,CAAC;MACVC,aAAa,EAAE,MAAM;MACrBC,MAAM,EAAE,CAAC,CAAC;MACVV,MAAM,EAAE,MAAM;MACdD,KAAK,EAAE,MAAM;MACbY,UAAU,EAAE;IAChB;EAAE,GAEDV,aACA,CACR;EAED,OAAO;IACHI,eAAe;IACfN,KAAK,~~EAAEpC~~,IAAI,~~CAACoC~~,KAAK;IACjBC,MAAM,~~EAAErC~~,IAAI,~~CAACqC~~;EACjB,CAAC;AACL,CAAC;AAACnB,OAAA,CAAAgB,gBAAA,GAAAA,gBAAA;AAEK,MAAMe,kBAAkB,GAAGA,CAAA,KAA6B;EAC3D,~~MAAMnD~~,GAAG,GAAG,~~IAAAqC~~,aAAM,EAAW,IAAI,CAAC;EAElC,MAAM,CAACe,OAAO,EAAEC,UAAU,CAAC,GAAG,~~IAAAjD~~,eAAQ,EAAC,KAAK,CAAC;EAE7C,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAI,~~CAACL~~,GAAG,CAACQ,OAAO,EAAE;IAElB,~~IAAI8C~~,EAAsB,~~GAAGtD~~,GAAG,CAACQ,OAAO;IAExC,~~OAAO8C~~,EAAE,EAAE;MACP,IAAIA,EAAE,CAACC,YAAY,CAAC,qBAAqB,CAAC,EAAE;QACxCF,UAAU,CAAC,IAAI,CAAC;QAEhB;MACJ;MAEAC,EAAE,GAAGA,EAAE,~~CAACE~~,aAAa;IACzB;~~IAEAH~~,UAAU,CAAC,KAAK,CAAC;EACrB,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,CAACD,OAAO,~~EAAEpD~~,GAAG,CAAC;AACzB,CAAC;~~AAACoB~~,OAAA,CAAA+B,kBAAA,GAAAA,kBAAA","ignoreList":[]}
1	+ {"version":3,"file":"element.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useElementSize","ref","shouldUseChildElement","shouldUseParentElement","size","setSize","useState","useEffect","target","current","_ref$current","parentElement","_ref$current2","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","exports","getClonedElement","content","preventEvents","onClick","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","isValidElement","cloneElement","createElement","useMeasuredClone","useRef","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n shouldUseParentElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false, shouldUseParentElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n let target = ref.current as HTMLElement \| null;\n\n if (shouldUseParentElement) {\n target = ref.current?.parentElement as HTMLElement \| null;\n }\n\n if (shouldUseChildElement) {\n target = ref.current?.firstElementChild as HTMLElement \| null;\n }\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement, shouldUseParentElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width: width + 10, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T \| null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement \| null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/types/selectButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selectButton.js","names":[],"sources":["../../../src/types/selectButton.ts"],"sourcesContent":["export interface SelectButtonItem {\n text: string;\n id: number;\n}\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"selectButton.js","names":[],"sources":["../../../src/types/selectButton.ts"],"sourcesContent":["export interface SelectButtonItem {\n text: string;\n id: number \| string;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -8,6 +8,7 @@ import ComboBoxItem from './combobox-item/ComboBoxItem';
 import { StyledComboBox, StyledComboBoxBody, StyledComboBoxClearIconWrapper, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxInput, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledComboBoxPlaceholderText, StyledComboBoxPrefix, StyledComboBoxPrefixAndPlaceholderWrapper, StyledComboBoxTopic } from './ComboBox.styles';
 import DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';
 import { DropdownDirection } from '../../types/dropdown';
+import { useElementSize } from '../../hooks/element';
 const ComboBox = ({
   bodyWidth,
   direction = DropdownDirection.RIGHT,
@@ -38,6 +39,9 @@ const ComboBox = ({
   const isInputFocused = useRef(false);
   const styledComboBoxElementRef = useRef(null);
   const contentRef = useRef(null);
+  const parentSize = useElementSize(styledComboBoxElementRef, {
+    shouldUseParentElement: true
+  });
   const functions = useFunctions();
   const values = useValues();
   const isTouch = getIsTouch();
@@ -45,6 +49,11 @@ const ComboBox = ({
     browser
   } = useDevice();
   const areaProvider = useContext(AreaContext);
+  useEffect(() => {
+    if (shouldUseFullWidth && parentSize) {
+      setMinWidth(parentSize.width);
+    }
+  }, [parentSize, shouldUseFullWidth]);
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   const shouldDisableActions = useMemo(() => {
     if (!selectedItem) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","names":["useDevice","useFunctions","useValues","React","Fragment","useCallback","useContext","useEffect","useMemo","useRef","useState","calculateContentWidth","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","shouldDropDownUseMaxItemWidth","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","contentRef","functions","values","isTouch","browser","areaProvider","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","result","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","allItems","baseWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","isSelected","ref","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","$direction","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","$browser","name","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n type CSSProperties,\n FC,\n FocusEventHandler,\n Fragment,\n ReactHTML,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateContentWidth } from '../../utils/calculate';\nimport { getIsTouch } 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';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n tagName?: keyof ReactHTML;\n styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\n textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n /*\n The width of the body.\n /\n bodyWidth?: number;\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?: DropdownDirection;\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?: number;\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 to be executed when the optional input gets its focus.\n /\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n /\n onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> \| boolean \| 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 /\n prefix?: 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, a clear icon is displayed at the end of the combo box if an item is selected.\n /\n shouldShowClearIcon?: 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 If true, the dropdown will use the maximum width of the items.\n /\n shouldDropDownUseMaxItemWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n selectedItem,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number \| undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n\n const isInputFocused = useRef(false);\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const functions = useFunctions();\n const values = useValues();\n\n const isTouch = getIsTouch();\n\n const { browser } = useDevice();\n\n const areaProvider = useContext(AreaContext);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let result = flatItems.length 36;\n\n if (lists.length > 1) {\n result += lists.length * 36;\n }\n\n if (maxHeight < result) {\n result = maxHeight;\n }\n\n return result;\n }, [lists, maxHeight]);\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 setIsAnimating(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\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 setIsAnimating(false);\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n },\n [onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children \|\| children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') \|\|\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem \| undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n let baseWidth = calculateContentWidth(\n [\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ...(selectedItem ? [selectedItem] : []),\n ],\n functions,\n values,\n );\n\n if (shouldDropDownUseMaxItemWidth) {\n baseWidth += 20 + 2; // 20px padding left and right and 2px border\n setBodyMinWidth(baseWidth);\n setMinWidth(baseWidth);\n return;\n }\n\n const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n const parentWidth =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n const paddingWidth = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 let prefixWidth = 0;\n\n if (prefix) {\n const prefixTextWidth =\n calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n prefixWidth = Math.max(prefixTextWidth, 32);\n }\n\n const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n let tmpMinWidth = calculatedWidth;\n let tmpBodyMinWidth = calculatedWidth;\n\n // Full width settings\n if (shouldUseFullWidth) {\n tmpMinWidth = parentWidth;\n\n tmpBodyMinWidth =\n parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n }\n // Current item width settings\n else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n const itemWidth =\n calculateContentWidth([internalSelectedItem], functions, values) +\n paddingWidth +\n imageWidth +\n iconWidth +\n prefixWidth;\n\n tmpMinWidth = itemWidth;\n\n tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n }\n\n if (tmpMinWidth > parentWidth) {\n tmpMinWidth = parentWidth;\n }\n\n if (tmpBodyMinWidth > parentWidth) {\n tmpBodyMinWidth = parentWidth;\n }\n\n setMinWidth(tmpMinWidth);\n setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n }, [\n lists,\n placeholder,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n internalSelectedItem,\n prefix,\n selectedItem,\n functions,\n values,\n shouldDropDownUseMaxItemWidth,\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 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 item={item}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\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 $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper onClick={handleClear}>\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $shouldShowBorderLeft={\n shouldShowClearIcon === true && internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n maxHeight={maxHeight}\n >\n <StyledComboBoxBody\n $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n $maxHeight={maxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n $browser={browser?.name as BrowserName}\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n minWidth,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n shouldChangeColor,\n shouldShowBigImage,\n prefix,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundPlaceholderImage,\n placeholderIcon,\n inputValue,\n onInputChange,\n handleInputBlur,\n handleInputFocus,\n placeholderText,\n shouldShowClearIcon,\n handleClear,\n shouldDisableActions,\n bodyWidth,\n contentHeight,\n handleClose,\n container,\n bodyMinWidth,\n maxHeight,\n browser?.name,\n comboBoxGroups,\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","useFunctions","useValues","React","Fragment","useCallback","useContext","useEffect","useMemo","useRef","useState","calculateContentWidth","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","shouldDropDownUseMaxItemWidth","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","browser","areaProvider","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","result","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","allItems","baseWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","isSelected","ref","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","$direction","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","$browser","name","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n type CSSProperties,\n FC,\n FocusEventHandler,\n Fragment,\n ReactHTML,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateContentWidth } from '../../utils/calculate';\nimport { getIsTouch } 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';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n tagName?: keyof ReactHTML;\n styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\n textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n /*\n The width of the body.\n /\n bodyWidth?: number;\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?: DropdownDirection;\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?: number;\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 to be executed when the optional input gets its focus.\n /\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n /\n onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> \| boolean \| 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 /\n prefix?: 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, a clear icon is displayed at the end of the combo box if an item is selected.\n /\n shouldShowClearIcon?: 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 If true, the dropdown will use the maximum width of the items.\n /\n shouldDropDownUseMaxItemWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n selectedItem,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number \| undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n\n const isInputFocused = useRef(false);\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, { shouldUseParentElement: true });\n\n const functions = useFunctions();\n const values = useValues();\n\n const isTouch = getIsTouch();\n\n const { browser } = useDevice();\n\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (shouldUseFullWidth && parentSize) {\n setMinWidth(parentSize.width);\n }\n }, [parentSize, shouldUseFullWidth]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let result = flatItems.length 36;\n\n if (lists.length > 1) {\n result += lists.length * 36;\n }\n\n if (maxHeight < result) {\n result = maxHeight;\n }\n\n return result;\n }, [lists, maxHeight]);\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 setIsAnimating(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\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 setIsAnimating(false);\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n },\n [onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children \|\| children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') \|\|\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem \| undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n let baseWidth = calculateContentWidth(\n [\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ...(selectedItem ? [selectedItem] : []),\n ],\n functions,\n values,\n );\n\n if (shouldDropDownUseMaxItemWidth) {\n baseWidth += 20 + 2; // 20px padding left and right and 2px border\n setBodyMinWidth(baseWidth);\n setMinWidth(baseWidth);\n return;\n }\n\n const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n const parentWidth =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n const paddingWidth = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 let prefixWidth = 0;\n\n if (prefix) {\n const prefixTextWidth =\n calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n prefixWidth = Math.max(prefixTextWidth, 32);\n }\n\n const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n let tmpMinWidth = calculatedWidth;\n let tmpBodyMinWidth = calculatedWidth;\n\n // Full width settings\n if (shouldUseFullWidth) {\n tmpMinWidth = parentWidth;\n\n tmpBodyMinWidth =\n parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n }\n // Current item width settings\n else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n const itemWidth =\n calculateContentWidth([internalSelectedItem], functions, values) +\n paddingWidth +\n imageWidth +\n iconWidth +\n prefixWidth;\n\n tmpMinWidth = itemWidth;\n\n tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n }\n\n if (tmpMinWidth > parentWidth) {\n tmpMinWidth = parentWidth;\n }\n\n if (tmpBodyMinWidth > parentWidth) {\n tmpBodyMinWidth = parentWidth;\n }\n\n setMinWidth(tmpMinWidth);\n setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n }, [\n lists,\n placeholder,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n internalSelectedItem,\n prefix,\n selectedItem,\n functions,\n values,\n shouldDropDownUseMaxItemWidth,\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 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 item={item}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\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 $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper onClick={handleClear}>\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $shouldShowBorderLeft={\n shouldShowClearIcon === true && internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n maxHeight={maxHeight}\n >\n <StyledComboBoxBody\n $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n $maxHeight={maxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n $browser={browser?.name as BrowserName}\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n minWidth,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n shouldChangeColor,\n shouldShowBigImage,\n prefix,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundPlaceholderImage,\n placeholderIcon,\n inputValue,\n onInputChange,\n handleInputBlur,\n handleInputFocus,\n placeholderText,\n shouldShowClearIcon,\n handleClear,\n shouldDisableActions,\n bodyWidth,\n contentHeight,\n handleClose,\n container,\n bodyMinWidth,\n maxHeight,\n browser?.name,\n comboBoxGroups,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/select-button/SelectButton.js CHANGED Viewed

@@ -68,7 +68,7 @@ const SelectButton = ({
         // Ignore because there is no type
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        onSelect(result.result.map(Number));
+        onSelect(result.result);
       }
     });
   };

package/lib/esm/components/select-button/SelectButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","undefined","type","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","~~map","Number","~~createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /*\n Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n /\n additionalText?: string;\n /\n The text that should be displayed inside the button.\n /\n buttonText: string;\n /\n Whether the button should be disabled.\n /\n isDisabled?: boolean;\n /\n A list of item that could be selected.\n /\n list: SelectButtonItem[];\n /\n The maximum number of items displayed in the button text.\n /\n maxDisplayedItems?: number;\n /\n Function to be executed after an item is selected.\n /\n onSelect?: (ids: number[]) => void;\n /\n If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n /\n selectAllText?: string;\n /\n The id of an item that should be preselected.\n /\n selectedItemIds?: number[];\n /\n Whether more than one item should be selectable.\n /\n shouldAllowMultiSelect?: boolean;\n /\n Whether the button text should be displayed also if items are selected.\n /\n shouldShowButtonTextWithSelection?: boolean;\n /\n Whether the search should be displayed inside the dialog.\n /\n shouldShowSearch?: boolean;\n /\n The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n maxDisplayedItems = 3,\n additionalText = ', ##count## weitere',\n shouldShowSearch,\n selectAllText,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection \|\| !selectedItemIds \|\| selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n list.forEach(({ text, id }) => {\n if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n addedCount++;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount >= 1) {\n newText += additionalText.replace('##count##', String(additionalCount));\n }\n\n return newText;\n }, [\n additionalText,\n buttonText,\n list,\n maxDisplayedItems,\n selectedItemIds,\n shouldShowButtonTextWithSelection,\n ]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n selectAllCheckbox: selectAllText,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect((result.result ~~as string[]~~)~~.map(Number))~~;\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAuC,YAAY;AACpF,OAAOC,KAAK,IAAIC,OAAO,QAAiB,OAAO;AAE/C,OAAOC,MAAM,MAAM,kBAAkB;AACrC,SAASC,kBAAkB,QAAQ,uBAAuB;AAqD1D,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,UAAU;EACVC,UAAU;EACVC,IAAI;EACJC,QAAQ;EACRC,eAAe;EACfC,sBAAsB;EACtBC,iCAAiC;EACjCC,iBAAiB,GAAG,CAAC;EACrBC,cAAc,GAAG,qBAAqB;EACtCC,gBAAgB;EAChBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,QAAQ,GAAGhB,OAAO,CAAC,MAAM;IAC3B,MAAMiB,KAAiC,GAAG,EAAE;IAE5CX,IAAI,CAACY,OAAO,CAAC,CAAC;MAAEC,IAAI;MAAEC;IAAG,CAAC,KAAK;MAC3B,MAAMC,UAAU,GAAGb,eAAe,GAAGA,eAAe,CAACc,QAAQ,CAACF,EAAE,CAAC,GAAG,KAAK;MAEzEH,KAAK,CAACM,IAAI,CAAC;QACPC,IAAI,EAAEL,IAAI;QACVC,EAAE;QACFC;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,OAAOJ,KAAK;EAChB,CAAC,EAAE,CAACX,IAAI,EAAEE,eAAe,CAAC,CAAC;EAE3B,MAAMiB,kBAAkB,GAAGzB,OAAO,CAAC,MAAM;IACrC,IAAIU,iCAAiC,IAAI,CAACF,eAAe,IAAIA,eAAe,CAACkB,MAAM,KAAK,CAAC,EAAE;MACvF,OAAOtB,UAAU;IACrB;IAEA,IAAIuB,UAAU,GAAG,CAAC;IAClB,IAAIC,OAAO,GAAG,EAAE;IAEhB,MAAMC,eAAe,GAAGrB,eAAe,CAACkB,MAAM,GAAGf,iBAAiB;IAElEL,IAAI,CAACY,OAAO,CAAC,CAAC;MAAEC,IAAI;MAAEC;IAAG,CAAC,KAAK;MAC3B,IAAIO,UAAU,GAAGhB,iBAAiB,IAAIH,eAAe,EAAEc,QAAQ,CAACF,EAAE,CAAC,EAAE;QACjEO,UAAU,EAAE;QACZC,OAAO,IAAIA,OAAO,CAACF,MAAM,KAAK,CAAC,GAAG,GAAGP,IAAI,EAAE,GAAG,KAAKA,IAAI,EAAE;MAC7D;IACJ,CAAC,CAAC;IAEF,IAAIU,eAAe,IAAI,CAAC,EAAE;MACtBD,OAAO,IAAIhB,cAAc,CAACkB,OAAO,CAAC,WAAW,EAAEC,MAAM,CAACF,eAAe,CAAC,CAAC;IAC3E;IAEA,OAAOD,OAAO;EAClB,CAAC,EAAE,CACChB,cAAc,EACdR,UAAU,EACVE,IAAI,EACJK,iBAAiB,EACjBH,eAAe,EACfE,iCAAiC,CACpC,CAAC;EAEF,MAAMsB,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKnC,YAAY,CAAC;MACdsB,IAAI,EAAEJ,KAAK,GAAG,OAAOA,KAAK,OAAO,GAAGkB,SAAS;MAC7CC,IAAI,EAAEpC,UAAU,CAACqC,MAAM;MACvB7B,IAAI,EAAEU,QAAQ;MACdoB,WAAW,EAAE3B,sBAAsB;MACnC4B,SAAS,EAAExB,gBAAgB;MAC3ByB,iBAAiB,EAAExB;IACvB,CAAC,CAAC,CACGyB,IAAI,CAAC,CAAC,CACNC,IAAI,CAAEC,MAAM,IAAK;MACd;MACA;MACA;MACA,IAAIA,MAAM,IAAIA,MAAM,CAACC,UAAU,KAAK,CAAC,IAAI,OAAOnC,QAAQ,KAAK,UAAU,EAAE;QACrE;QACA;QACA;QACAA,QAAQ,~~CAAEkC~~,MAAM,CAACA,MAAM,~~CAAcE,GAAG,CAACC,MAAM,~~CAAC~~,CAAC~~;~~MACrD~~;IACJ,CAAC,CAAC;EACV,CAAC;EAED,~~oBACI7C~~,KAAA,~~CAAA8C~~,aAAA,~~CAAC3C~~,kBAAkB,qBACfH,KAAA,~~CAAA8C~~,aAAA,~~CAAC5C~~,MAAM;~~IACH6C~~,OAAO,~~EAAEd~~,WAAY;IACrB3B,UAAU,EAAEA,UAAW;~~IACvB0C~~,WAAW;IACXC,4BAA4B,EAAE;EAAM,~~GAEnCvB~~,kBACG,CACQ,CAAC;AAE7B,CAAC;AAEDtB,YAAY,~~CAAC8C~~,WAAW,GAAG,cAAc;AAEzC,~~eAAe9C~~,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","undefined","type","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /*\n Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n /\n additionalText?: string;\n /\n The text that should be displayed inside the button.\n /\n buttonText: string;\n /\n Whether the button should be disabled.\n /\n isDisabled?: boolean;\n /\n A list of item that could be selected.\n /\n list: SelectButtonItem[];\n /\n The maximum number of items displayed in the button text.\n /\n maxDisplayedItems?: number;\n /\n Function to be executed after an item is selected.\n /\n onSelect?: (ids: (number \| string)[]) => void;\n /\n If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n /\n selectAllText?: string;\n /\n The id of an item that should be preselected.\n /\n selectedItemIds?: (number \| string)[];\n /\n Whether more than one item should be selectable.\n /\n shouldAllowMultiSelect?: boolean;\n /\n Whether the button text should be displayed also if items are selected.\n /\n shouldShowButtonTextWithSelection?: boolean;\n /\n Whether the search should be displayed inside the dialog.\n /\n shouldShowSearch?: boolean;\n /\n The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n maxDisplayedItems = 3,\n additionalText = ', ##count## weitere',\n shouldShowSearch,\n selectAllText,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection \|\| !selectedItemIds \|\| selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n list.forEach(({ text, id }) => {\n if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n addedCount++;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount >= 1) {\n newText += additionalText.replace('##count##', String(additionalCount));\n }\n\n return newText;\n }, [\n additionalText,\n buttonText,\n list,\n maxDisplayedItems,\n selectedItemIds,\n shouldShowButtonTextWithSelection,\n ]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n selectAllCheckbox: selectAllText,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect(result.result);\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/hooks/element.js CHANGED Viewed

@@ -1,10 +1,17 @@
 import React, { cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
 export const useElementSize = (ref, {
-  shouldUseChildElement = false
+  shouldUseChildElement = false,
+  shouldUseParentElement = false
 } = {}) => {
   const [size, setSize] = useState();
   useEffect(() => {
-    const target = shouldUseChildElement ? ref.current?.firstElementChild : ref.current;
+    let target = ref.current;
+    if (shouldUseParentElement) {
+      target = ref.current?.parentElement;
+    }
+    if (shouldUseChildElement) {
+      target = ref.current?.firstElementChild;
+    }
     if (!target) return () => {};
     const updateSize = () => setSize(target.getBoundingClientRect());
     updateSize();
@@ -17,7 +24,7 @@ export const useElementSize = (ref, {
     });
     observer.observe(target);
     return () => observer.disconnect();
-  }, [ref, shouldUseChildElement]);
+  }, [ref, shouldUseChildElement, shouldUseParentElement]);
   return size;
 };
 const getClonedElement = content => {

package/lib/esm/hooks/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":["React","cloneElement","isValidElement","useEffect","useRef","useState","useElementSize","ref","shouldUseChildElement","size","setSize","target","current","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","getClonedElement","content","preventEvents","onClick","e","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","createElement","useMeasuredClone","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute"~~,"parentElement"~~],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n ~~const~~ target = (\n ~~shouldUseChildElement~~ ? ref.current?.~~firstElementChild~~ : ~~ref.current~~\n ) as HTMLElement \| null;\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width: width + 10, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T \| null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement \| null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,YAAY,EAEZC,cAAc,EAIdC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACL,OAAO;~~AAMd~~,OAAO,MAAMC,cAAc,GAAGA,CAC1BC,GAA+D,EAC/D;EAAEC,qBAAqB,GAAG;AAA6B,CAAC,GAAG,CAAC,CAAC,KAC/B;EAC9B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,~~GAAGL~~,QAAQ,CAAkB,CAAC;EAEnDF,SAAS,CAAC,MAAM;IACZ,~~MAAMQ~~,MAAM,~~GACRH~~,~~qBAAqB~~,~~GAAGD~~,GAAG,~~CAACK~~,OAAO,EAAEC,~~iBAAiB~~,~~GAAGN~~,GAAG,~~CAACK~~,~~OAC1C~~;~~IAEvB~~,IAAI,~~CAACD~~,MAAM,EAAE,OAAO,MAAM,CAAC,CAAC;IAE5B,~~MAAMG~~,UAAU,GAAGA,CAAA,~~KAAMJ~~,OAAO,CAACC,MAAM,~~CAACI~~,qBAAqB,CAAC,CAAC,CAAC;IAEhED,UAAU,CAAC,CAAC;IAEZ,MAAME,QAAQ,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;MAC7CA,OAAO,CAACC,OAAO,CAAEC,KAAK,IAAK;QACvB,IAAIA,KAAK,~~CAACT~~,MAAM,KAAKA,MAAM,EAAE;UACzBD,OAAO,~~CAACU~~,KAAK,CAACC,WAAW,CAAC;QAC9B;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;IAEFL,QAAQ,CAACM,OAAO,~~CAACX~~,MAAM,CAAC;IAExB,OAAO,~~MAAMK~~,QAAQ,CAACO,UAAU,CAAC,CAAC;EACtC,CAAC,EAAE,~~CAAChB~~,GAAG,EAAEC,qBAAqB,CAAC,CAAC;~~EAEhC~~,OAAOC,IAAI;AACf,CAAC;AAED,~~MAAMe~~,gBAAgB,GAAIC,OAAkB,IAAK;EAC7C,MAAMC,aAA2C,GAAG;IAChDC,OAAO,EAAGC,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnCC,WAAW,EAAGF,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACvCE,SAAS,EAAGH,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACrCG,SAAS,EAAGJ,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACrCI,OAAO,EAAGL,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnCK,OAAO,EAAGN,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnCM,MAAM,EAAGP,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC;EACrC,CAAC;EAED,MAAMO,KAAK,GAAG;IACV,GAAGV,aAAa;IAChB,qBAAqB,EAAE;EAC3B,CAAC;EAED,~~iBAAIxB~~,cAAc,~~CAACuB~~,OAAO,CAAC,EAAE;IACzB,~~oBAAOxB~~,YAAY,~~CAACwB~~,OAAO,EAA6BW,KAAK,CAAC;EAClE;EAEA,IAAI,OAAOX,OAAO,KAAK,QAAQ,EAAE;IAC7B;IACA,~~oBAAOzB~~,KAAA,~~CAAAqC~~,aAAA,SAAUD,KAAK,EAAGX,OAAc,CAAC;EAC5C;EAEA,OAAOA,OAAO;AAClB,CAAC;AAMD,OAAO,MAAMa,gBAAgB,GAAGA,CAAC;EAAEb;AAAiC,CAAC,KAAK;EACtE,~~MAAMlB~~,GAAG,GAAGH,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAM,~~CAACK~~,IAAI,EAAEC,OAAO,CAAC,~~GAAGL~~,QAAQ,CAAC;~~IAAEkC~~,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC,CAAC;EAEzD,MAAMC,aAAa,GAAGjB,gBAAgB,CAACC,OAAO,CAAC;EAE/~~CtB~~,SAAS,CAAC,MAAM;IACZ,~~MAAMuC~~,OAAO,GAAGA,CAAA,KAAM;MAClB,IAAI,~~CAACnC~~,GAAG,~~CAACK~~,OAAO,EAAE;MAClB,MAAM;~~QAAE+B~~,WAAW,EAAEJ,KAAK;QAAEK,YAAY,EAAEJ;MAAO,CAAC,~~GAAGjC~~,GAAG,~~CAACK~~,OAAO;MAChEF,OAAO,CAAC;~~QAAE6B~~,KAAK,EAAEA,KAAK,GAAG,EAAE;QAAEC;MAAO,CAAC,CAAC;IAC1C,CAAC;IAEDE,OAAO,CAAC,CAAC;IAET,MAAM1B,QAAQ,GAAG,IAAIC,cAAc,CAACyB,OAAO,CAAC;IAE5C,~~IAAInC~~,GAAG,~~CAACK~~,OAAO,~~EAAEI~~,QAAQ,CAACM,OAAO,~~CAACf~~,GAAG,~~CAACK~~,OAAO,CAAC;IAE9C,OAAO,~~MAAMI~~,QAAQ,CAACO,UAAU,CAAC,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMsB,eAAe,~~gBACjB7C~~,KAAA,~~CAAAqC~~,aAAA;IACI,uBAAoB,MAAM;~~IAC1B9B~~,GAAG,EAAEA,GAAI;~~IACTuC~~,KAAK,EAAE;MACHC,QAAQ,EAAE,OAAO;MACjBC,OAAO,EAAE,CAAC;MACVC,aAAa,EAAE,MAAM;MACrBC,MAAM,EAAE,CAAC,CAAC;MACVV,MAAM,EAAE,MAAM;MACdD,KAAK,EAAE,MAAM;MACbY,UAAU,EAAE;IAChB;EAAE,GAEDV,aACA,CACR;EAED,OAAO;IACHI,eAAe;IACfN,KAAK,~~EAAE9B~~,IAAI,~~CAAC8B~~,KAAK;IACjBC,MAAM,~~EAAE/B~~,IAAI,~~CAAC+B~~;EACjB,CAAC;AACL,CAAC;AAED,OAAO,MAAMY,kBAAkB,GAAGA,CAAA,KAA6B;EAC3D,~~MAAM7C~~,GAAG,GAAGH,MAAM,CAAW,IAAI,CAAC;EAElC,MAAM,~~CAACiD~~,OAAO,EAAEC,UAAU,CAAC,~~GAAGjD~~,QAAQ,CAAC,KAAK,CAAC;EAE7CF,SAAS,CAAC,MAAM;IACZ,IAAI,CAACI,GAAG,~~CAACK~~,OAAO,EAAE;IAElB,~~IAAI2C~~,EAAsB,~~GAAGhD~~,GAAG,~~CAACK~~,OAAO;IAExC,~~OAAO2C~~,EAAE,EAAE;MACP,IAAIA,EAAE,CAACC,YAAY,CAAC,qBAAqB,CAAC,EAAE;QACxCF,UAAU,CAAC,IAAI,CAAC;QAEhB;MACJ;MAEAC,EAAE,GAAGA,EAAE,~~CAACE~~,aAAa;IACzB;~~IAEAH~~,UAAU,CAAC,KAAK,CAAC;EACrB,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,CAACD,OAAO,~~EAAE9C~~,GAAG,CAAC;AACzB,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"element.js","names":["React","cloneElement","isValidElement","useEffect","useRef","useState","useElementSize","ref","shouldUseChildElement","shouldUseParentElement","size","setSize","target","current","parentElement","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","getClonedElement","content","preventEvents","onClick","e","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","createElement","useMeasuredClone","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n shouldUseParentElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false, shouldUseParentElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n let target = ref.current as HTMLElement \| null;\n\n if (shouldUseParentElement) {\n target = ref.current?.parentElement as HTMLElement \| null;\n }\n\n if (shouldUseChildElement) {\n target = ref.current?.firstElementChild as HTMLElement \| null;\n }\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement, shouldUseParentElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width: width + 10, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T \| null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement \| null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/types/selectButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selectButton.js","names":[],"sources":["../../../src/types/selectButton.ts"],"sourcesContent":["export interface SelectButtonItem {\n text: string;\n id: number;\n}\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"selectButton.js","names":[],"sources":["../../../src/types/selectButton.ts"],"sourcesContent":["export interface SelectButtonItem {\n text: string;\n id: number \| string;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/types/components/select-button/SelectButton.d.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export type SelectButtonProps = {
     /**
      * Function to be executed after an item is selected.
      */
-    onSelect?: (ids: number[]) => void;
+    onSelect?: (ids: (number | string)[]) => void;
     /**
      * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.
      */
@@ -32,7 +32,7 @@ export type SelectButtonProps = {
     /**
      * The id of an item that should be preselected.
      */
-    selectedItemIds?: number[];
+    selectedItemIds?: (number | string)[];
     /**
      * Whether more than one item should be selectable.
      */

package/lib/types/hooks/element.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import React, { MutableRefObject, ReactNode } from 'react';
 interface UseElementSizeOptions {
     shouldUseChildElement?: boolean;
+    shouldUseParentElement?: boolean;
 }
-export declare const useElementSize: (ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>, { shouldUseChildElement }?: UseElementSizeOptions) => DOMRectReadOnly | undefined;
+export declare const useElementSize: (ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>, { shouldUseChildElement, shouldUseParentElement }?: UseElementSizeOptions) => DOMRectReadOnly | undefined;
 interface UseMeasuredCloneOptions {
     content: ReactNode;
 }

package/lib/types/types/selectButton.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 export interface SelectButtonItem {
     text: string;
-    id: number;
+    id: number | string;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1238",
+    "version": "5.0.0-beta.1241",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ca8354e990b49d140f9ed49330b7eae53dec1867"
+    "gitHead": "57b1a1f001a7c5fb5b8dc6ff2bc67088c4f4e48f"
 }