npm - @chayns-components/core - Versions diffs - 5.0.0-beta.725 → 5.0.0-beta.728 - Mend

@chayns-components/core 5.0.0-beta.725 → 5.0.0-beta.728

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 (9) hide show

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

@@ -62,8 +62,8 @@ const ComboBox = ({
         left: containerLeft,
         top: containerTop
       } = container.getBoundingClientRect();
-      const x = comboBoxLeft - containerLeft + window.scrollX;
-      const y = comboBoxTop - containerTop + window.scrollY;
+      const x = comboBoxLeft - containerLeft + container.scrollLeft;
+      const y = comboBoxTop - containerTop + container.scrollTop;
       setInternalCoordinates({
         x,
         y: direction === _comboBox.ComboBoxDirection.TOP ? y : y + height

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

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

package/lib/cjs/components/number-input/NumberInput.js CHANGED Viewed

@@ -69,7 +69,7 @@ const NumberInput = ({
     let parsedNumber = null;
     if (!isTimeInput) {
       parsedNumber = (0, _numberInput2.parseFloatWithDecimals)({
-        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),
+        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),
         decimals: isMoneyInput ? 2 : undefined
       });
       if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {

package/lib/cjs/components/number-input/NumberInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /*\n Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n /\n isDecimalInput?: boolean;\n /\n Whether the input is disabled\n /\n isDisabled?: boolean;\n /\n Whether the value is invalid.\n /\n isInvalid?: boolean;\n /\n Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n /\n isMoneyInput?: boolean;\n /\n Whether the value should be formatted as a time.\n /\n isTimeInput?: boolean;\n /\n Limits the number to this value\n /\n maxNumber?: number;\n /\n Limits the number to this value\n /\n minNumber?: number;\n /\n Callback function that is called when the input gets out of focus\n /\n onBlur?: (newNumber: number \| string \| null, isInvalid: boolean) => void;\n /\n Callback function that is called when the input changes\n * It will pass the text from the input\n /\n onChange?: (newValue: string) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) \|\|\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber \|\| parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber \|\| parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : `${formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n })}${isMoneyInput ? ' €' : ''}`,\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /*\n Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n /\n isDecimalInput?: boolean;\n /\n Whether the input is disabled\n /\n isDisabled?: boolean;\n /\n Whether the value is invalid.\n /\n isInvalid?: boolean;\n /\n Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n /\n isMoneyInput?: boolean;\n /\n Whether the value should be formatted as a time.\n /\n isTimeInput?: boolean;\n /\n Limits the number to this value\n /\n maxNumber?: number;\n /\n Limits the number to this value\n /\n minNumber?: number;\n /\n Callback function that is called when the input gets out of focus\n /\n onBlur?: (newNumber: number \| string \| null, isInvalid: boolean) => void;\n /\n Callback function that is called when the input changes\n * It will pass the text from the input\n /\n onChange?: (newValue: string) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) \|\|\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber \|\| parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber \|\| parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : `${formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n })}${isMoneyInput ? ' €' : ''}`,\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}

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

@@ -54,8 +54,8 @@ const ComboBox = _ref => {
         left: containerLeft,
         top: containerTop
       } = container.getBoundingClientRect();
-      const x = comboBoxLeft - containerLeft + window.scrollX;
-      const y = comboBoxTop - containerTop + window.scrollY;
+      const x = comboBoxLeft - containerLeft + container.scrollLeft;
+      const y = comboBoxTop - containerTop + container.scrollTop;
       setInternalCoordinates({
         x,
         y: direction === ComboBoxDirection.TOP ? y : y + height

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentHeight","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBoxTopic","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","window","scrollX","scrollY","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","textArray","map","_ref5","text","contentHeight","maxHeightInPixels","push","width","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","_ref6","groupName","createElement","_ref7","suffixElement","isSelected","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n calculateContentHeight,\n calculateContentWidth,\n getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport { StyledComboBoxTopic } from './combobox-item/ComboBoxItem.styles';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\n}\n\nexport type ComboBoxProps = {\n /*\n The element where the content of the `ComboBox` should be rendered via React Portal.\n /\n container?: Element;\n /\n The direction in which the combobox should open.\n /\n direction?: ComboBoxDirection;\n /\n Whether the combobox should be disabled.\n /\n isDisabled?: boolean;\n /\n The list of the items that should be displayed.\n /\n lists: IComboBoxItems[];\n /\n The maximum height of the combobox content.\n /\n maxHeight?: CSSProperties['maxHeight'];\n /\n Function that should be executed when an item is selected.\n /\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /\n A text that should be displayed when no item is selected.\n /\n placeholder: string;\n /\n An item that should be preselected.\n /\n selectedItem?: IComboBoxItem;\n /\n If true, the images of the items are displayed in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n /\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + window.scrollX;\n const y = comboBoxTop - containerTop + window.scrollY;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /\n This function adds an event listener to the document to close the combobox when the user clicks outside of it\n /\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /\n This function sets the selected item\n /\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem \| undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const textArray = allItems?.map(({ text }) => text);\n\n const contentHeight = calculateContentHeight(textArray);\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n textArray.push(placeholder);\n\n const width = styledComboBoxElementRef.current?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /\n This function sets the external selected item\n /\n useEffect(() => {\n setIsAnimating(false);\n setItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (item) {\n return item.icons;\n }\n\n return undefined;\n }, [item, 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 (item) {\n text = item.text;\n }\n\n return text;\n }, [item, placeholder, selectedItem]);\n\n /\n This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map(({ imageUrl, icons, suffixElement, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n icons={icons}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n id={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {item && item.suffixElement && item.suffixElement}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isTouch,\n item,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAGRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SACIC,sBAAsB,EACtBC,qBAAqB,EACrBC,oBAAoB,QACjB,uBAAuB;AAC9B,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SAASC,mBAAmB,QAAQ,qCAAqC;AACzE,SACIC,cAAc,EACdC,oBAAoB,EACpBC,yBAAyB,EACzBC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wBAAwB,QACrB,mBAAmB;AA0D1B,MAAMC,QAA2B,GAAGC,IAAA,IAW9B;EAAA,IAX+B;IACjCC,SAAS,GAAGhB,iBAAiB,CAACiB,MAAM;IACpCC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,QAAQ;IACRC,WAAW;IACXC,SAAS,GAAGC,QAAQ,CAACC,IAAI;IACzBC,YAAY;IACZC,oBAAoB;IACpBC,kBAAkB,GAAG;EACzB,CAAC,GAAAb,IAAA;EACG,MAAM,CAACc,IAAI,EAAEC,OAAO,CAAC,GAAGhC,QAAQ,CAAgB,CAAC;EACjD,MAAM,CAACiC,WAAW,EAAEC,cAAc,CAAC,GAAGlC,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACmC,QAAQ,EAAEC,WAAW,CAAC,GAAGpC,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAM,CAACqC,YAAY,EAAEC,eAAe,CAAC,GAAGtC,QAAQ,CAAgB,IAAI,CAAC;EACrE,MAAM,CAACuC,SAAS,EAAEC,YAAY,CAAC,GAAGxC,QAAQ,CAA6B,QAAQ,CAAC;EAChF,MAAM,CAACyC,MAAM,EAAEC,SAAS,CAAC,GAAG1C,QAAQ,CAAc,CAAC;EACnD,MAAM,CAAC2C,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG5C,QAAQ,CAAyB;IACnF6C,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAMC,wBAAwB,GAAGhD,MAAM,CAAiB,IAAI,CAAC;EAC7D,MAAMiD,UAAU,GAAGjD,MAAM,CAAwB,IAAI,CAAC;EAEtD,MAAM;IAAEkD;EAAQ,CAAC,GAAGxD,SAAS,CAAC,CAAC;EAE/B,MAAMyD,OAAO,GAAG5C,UAAU,CAAC,CAAC;EAE5B,MAAM6C,WAAW,GAAGvD,WAAW,CAC1BwD,KAAiB,IAAK;IACnB,IACIL,wBAAwB,CAACM,OAAO,IAChC,CAACN,wBAAwB,CAACM,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EAClE;MACErB,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACa,wBAAwB,CAC7B,CAAC;EAED,MAAMS,UAAU,GAAG5D,WAAW,CAAC,MAAM;IACjC,IAAImD,wBAAwB,CAACM,OAAO,EAAE;MAClC,MAAM;QACFI,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBC;MACJ,CAAC,GAAGd,wBAAwB,CAACM,OAAO,CAACS,qBAAqB,CAAC,CAAC;MAC5D,MAAM;QAAEL,IAAI,EAAEM,aAAa;QAAEJ,GAAG,EAAEK;MAAa,CAAC,GAAGvC,SAAS,CAACqC,qBAAqB,CAAC,CAAC;MAEpF,MAAMjB,CAAC,GAAGa,YAAY,GAAGK,aAAa,GAAGE,MAAM,CAACC,OAAO;MACvD,MAAMpB,CAAC,GAAGc,WAAW,GAAGI,YAAY,GAAGC,MAAM,CAACE,OAAO;MAErDvB,sBAAsB,CAAC;QACnBC,CAAC;QACDC,CAAC,EAAE5B,SAAS,KAAKhB,iBAAiB,CAACkE,GAAG,GAAGtB,CAAC,GAAGA,CAAC,GAAGe;MACrD,CAAC,CAAC;MAEF3B,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACT,SAAS,EAAEP,SAAS,CAAC,CAAC;EAE1B,MAAMmD,WAAW,GAAGzE,WAAW,CAAC,MAAM;IAClCsC,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;EACIrC,SAAS,CAAC,MAAM;IACZ6B,QAAQ,CAAC4C,gBAAgB,CAAC,OAAO,EAAEnB,WAAW,CAAC;IAE/C,OAAO,MAAM;MACTzB,QAAQ,CAAC6C,mBAAmB,CAAC,OAAO,EAAEpB,WAAW,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,EAAEJ,wBAAwB,CAAC,CAAC;;EAE3C;AACJ;AACA;EACI,MAAMyB,qBAAqB,GAAG5E,WAAW,CACpC6E,YAA2B,IAAK;IAC7BzC,OAAO,CAACyC,YAAY,CAAC;IACrBvC,cAAc,CAAC,KAAK,CAAC;IAErB,IAAIX,QAAQ,EAAE;MACVA,QAAQ,CAACkD,YAAY,CAAC;IAC1B;EACJ,CAAC,EACD,CAAClD,QAAQ,CACb,CAAC;EAED1B,SAAS,CAAC,MAAM;IACZ,MAAM6E,aAAa,GAAIC,CAAgB,IAAK;MACxC,IAAI,CAAC1C,WAAW,EAAE;QACd;MACJ;MAEA,IAAI0C,CAAC,CAACC,GAAG,KAAK,SAAS,IAAID,CAAC,CAACC,GAAG,KAAK,WAAW,EAAE;QAC9CD,CAAC,CAACE,cAAc,CAAC,CAAC;QAClB,MAAMC,QAAQ,GAAG9B,UAAU,CAACK,OAAO,EAAEyB,QAAQ;QAC7C,IAAIA,QAAQ,IAAIA,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMC,QAAQ,GACV3C,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IAAIsC,CAAC,CAACC,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAGE,QAAQ,CAACC,MAAM,IAChED,QAAQ,CAACC,MAAM,GACf,CAAC;UAEX,IAAI1C,YAAY,KAAK,IAAI,EAAE;YACvB,MAAM4C,WAAW,GAAGH,QAAQ,CAACzC,YAAY,CAAmB;YAC5D4C,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA5C,eAAe,CAAC0C,QAAQ,CAAC;UAEzB,MAAMG,UAAU,GAAGL,QAAQ,CAACE,QAAQ,CAAmB;UACvDG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;QACtB;MACJ,CAAC,MAAM,IAAIT,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIvC,YAAY,KAAK,IAAI,EAAE;QACnD,MAAMgD,OAAO,GAAGrC,UAAU,CAACK,OAAO,EAAEyB,QAAQ,CAACzC,YAAY,CAAC;QAE1D,IAAI,CAACgD,OAAO,EAAE;UACV;QACJ;QAEA,MAAM;UAAEC;QAAG,CAAC,GAAGD,OAAO;QAEtB,IAAIE,eAA0C;QAE9ClE,KAAK,CAACmE,IAAI,CAAEC,IAAI,IAAK;UACjBF,eAAe,GAAGE,IAAI,CAACA,IAAI,CAACC,IAAI,CAC5BC,KAAA;YAAA,IAAC;cAAEC;YAAM,CAAC,GAAAD,KAAA;YAAA,OAAKE,MAAM,CAACD,KAAK,CAAC,KAAKN,EAAE,CAACQ,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;UAAA,CACtE,CAAC;UACD,OAAO,CAAC,CAACP,eAAe;QAC5B,CAAC,CAAC;QAEF,IAAI,CAACA,eAAe,EAAE;UAClB;QACJ;QAEAf,qBAAqB,CAACe,eAAe,CAAC;MAC1C;IACJ,CAAC;IAED7D,QAAQ,CAAC4C,gBAAgB,CAAC,SAAS,EAAEI,aAAa,CAAC;IAEnD,OAAO,MAAM;MACThD,QAAQ,CAAC6C,mBAAmB,CAAC,SAAS,EAAEG,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACrC,YAAY,EAAEmC,qBAAqB,EAAEvC,WAAW,EAAEZ,KAAK,CAAC,CAAC;;EAE7D;AACJ;AACA;EACIxB,SAAS,CAAC,MAAM;IACZ,MAAMkG,QAAQ,GAAG1E,KAAK,CAAC2E,OAAO,CAAEP,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IAEnD,MAAMQ,8BAA8B,GAAGF,QAAQ,CAACP,IAAI,CAACU,KAAA;MAAA,IAAC;QAAEC;MAAS,CAAC,GAAAD,KAAA;MAAA,OAAKC,QAAQ;IAAA,EAAC;IAChF,MAAMC,6BAA6B,GAAGL,QAAQ,CAACP,IAAI,CAACa,KAAA;MAAA,IAAC;QAAEC;MAAM,CAAC,GAAAD,KAAA;MAAA,OAAKC,KAAK;IAAA,EAAC;IAEzE,MAAMC,SAAS,GAAGR,QAAQ,EAAES,GAAG,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAK,CAAC,GAAAD,KAAA;MAAA,OAAKC,IAAI;IAAA,EAAC;IAEnD,MAAMC,aAAa,GAAGxG,sBAAsB,CAACoG,SAAS,CAAC;IAEvD,MAAMK,iBAAiB,GAAGvG,oBAAoB,CAC1CiB,SAAS,EACTyB,wBAAwB,CAACM,OAAO,IAAI3B,QAAQ,CAACC,IACjD,CAAC;IAEDa,YAAY,CAACmE,aAAa,GAAGC,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAErEL,SAAS,CAACM,IAAI,CAACrF,WAAW,CAAC;IAE3B,MAAMsF,KAAK,GAAG/D,wBAAwB,CAACM,OAAO,EAAES,qBAAqB,CAAC,CAAC,CAACgD,KAAK,IAAI,CAAC;;IAElF;IACA;IACA;IACA1E,WAAW,CACPN,kBAAkB,GACZgF,KAAK,GACL1G,qBAAqB,CAAC,CAClB,GAAG2F,QAAQ,EACX;MAAEW,IAAI,EAAElF,WAAW;MAAEoE,KAAK,EAAE;IAAc,CAAC,CAC9C,CAAC,GACE,EAAE,IACDK,8BAA8B,GAAG,EAAE,GAAG,CAAC,CAAC,IACxCG,6BAA6B,GAAG,EAAE,GAAG,CAAC,CACrD,CAAC;EACL,CAAC,EAAE,CAAC/E,KAAK,EAAEC,SAAS,EAAEE,WAAW,EAAEM,kBAAkB,CAAC,CAAC;;EAEvD;AACJ;AACA;EACIjC,SAAS,CAAC,MAAM;IACZqC,cAAc,CAAC,KAAK,CAAC;IACrBF,OAAO,CAACJ,YAAY,CAAC;EACzB,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMmF,mBAAmB,GAAGjH,OAAO,CAAC,MAAM;IACtC,IAAI8B,YAAY,EAAE;MACd,OAAOA,YAAY,CAACuE,QAAQ;IAChC;IAEA,IAAIpE,IAAI,EAAE;MACN,OAAOA,IAAI,CAACoE,QAAQ;IACxB;IAEA,OAAOa,SAAS;EACpB,CAAC,EAAE,CAACjF,IAAI,EAAEH,YAAY,CAAC,CAAC;EAExB,MAAMqF,eAAe,GAAGnH,OAAO,CAAC,MAAM;IAClC,IAAI8B,YAAY,EAAE;MACd,OAAOA,YAAY,CAAC0E,KAAK;IAC7B;IAEA,IAAIvE,IAAI,EAAE;MACN,OAAOA,IAAI,CAACuE,KAAK;IACrB;IAEA,OAAOU,SAAS;EACpB,CAAC,EAAE,CAACjF,IAAI,EAAEH,YAAY,CAAC,CAAC;;EAExB;AACJ;AACA;EACI,MAAMsF,eAAe,GAAGpH,OAAO,CAAC,MAAM;IAClC,IAAI4G,IAAI,GAAGlF,WAAW;IAEtB,IAAII,YAAY,EAAE;MACd8E,IAAI,GAAG9E,YAAY,CAAC8E,IAAI;IAC5B,CAAC,MAAM,IAAI3E,IAAI,EAAE;MACb2E,IAAI,GAAG3E,IAAI,CAAC2E,IAAI;IACpB;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAAC3E,IAAI,EAAEP,WAAW,EAAEI,YAAY,CAAC,CAAC;;EAErC;AACJ;AACA;EACI,MAAMuF,iBAAiB,GAAGvH,WAAW,CAAC,MAAM;IACxC,IAAI,CAACwB,UAAU,EAAE;MACb,IAAIa,WAAW,EAAE;QACboC,WAAW,CAAC,CAAC;MACjB,CAAC,MAAM;QACHb,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACa,WAAW,EAAEb,UAAU,EAAEvB,WAAW,EAAEb,UAAU,CAAC,CAAC;EAEtD,MAAMgG,cAAc,GAAGtH,OAAO,CAC1B,MACIuB,KAAK,CAACmF,GAAG,CAACa,KAAA;IAAA,IAAC;MAAEC,SAAS;MAAE7B;IAAK,CAAC,GAAA4B,KAAA;IAAA,oBAC1B1H,KAAA,CAAA4H,aAAA;MAAK3C,GAAG,EAAE0C,SAAS,IAAI;IAAgB,GAClCA,SAAS,IAAIjG,KAAK,CAAC0D,MAAM,GAAG,CAAC,iBAC1BpF,KAAA,CAAA4H,aAAA,CAAC9G,mBAAmB,QAAE6G,SAA+B,CACxD,EACA7B,IAAI,CAACe,GAAG,CAACgB,KAAA;MAAA,IAAC;QAAErB,QAAQ;QAAEG,KAAK;QAAEmB,aAAa;QAAEf,IAAI;QAAEd;MAAM,CAAC,GAAA4B,KAAA;MAAA,oBACtD7H,KAAA,CAAA4H,aAAA,CAAC/G,YAAY;QACT2F,QAAQ,EAAEA,QAAS;QACnBG,KAAK,EAAEA,KAAM;QACboB,UAAU,EAAE9F,YAAY,GAAGgE,KAAK,KAAKhE,YAAY,CAACgE,KAAK,GAAG,KAAM;QAChEhB,GAAG,EAAEgB,KAAM;QACXN,EAAE,EAAEM,KAAM;QACVrE,QAAQ,EAAEiD,qBAAsB;QAChC3C,oBAAoB,EAAEA,oBAAqB;QAC3C4F,aAAa,EAAEA,aAAc;QAC7Bf,IAAI,EAAEA,IAAK;QACXd,KAAK,EAAEA;MAAM,CAChB,CAAC;IAAA,CACL,CACA,CAAC;EAAA,CACT,CAAC,EACN,CAACpB,qBAAqB,EAAEnD,KAAK,EAAEO,YAAY,EAAEC,oBAAoB,CACrE,CAAC;EAED,MAAM8F,UAAU,GAAG7H,OAAO,CAAC,MAAM;IAC7B,IAAI8H,MAAqB,GAAG;MAAEnE,IAAI,EAAEd,mBAAmB,CAACE,CAAC;MAAEc,GAAG,EAAEhB,mBAAmB,CAACG;IAAE,CAAC;IAEvF,IAAI5B,SAAS,KAAKhB,iBAAiB,CAACkE,GAAG,EAAE;MACrCwD,MAAM,GAAG;QAAE,GAAGA,MAAM;QAAEC,SAAS,EAAE;MAAoB,CAAC;IAC1D;IAEA,OAAOD,MAAM;EACjB,CAAC,EAAE,CAAC1G,SAAS,EAAEyB,mBAAmB,CAACE,CAAC,EAAEF,mBAAmB,CAACG,CAAC,CAAC,CAAC;EAE7DjD,SAAS,CAAC,MAAM;IACZ6C,SAAS,CAAC,mBACNzC,YAAY,eACRN,KAAA,CAAA4H,aAAA,CAAC7H,eAAe;MAACoI,OAAO,EAAE;IAAM,GAC3B7F,WAAW,iBACRtC,KAAA,CAAA4H,aAAA,CAACxG,wBAAwB;MACrBgH,QAAQ,EAAE9E,OAAO,EAAE+E,IAAK;MACxBC,OAAO,EAAE;QAAEpE,MAAM,EAAE,aAAa;QAAEqE,OAAO,EAAE;MAAE,CAAE;MAC/CC,UAAU,EAAE5F,SAAU;MACtBuF,OAAO,EAAE;QAAEjE,MAAM,EAAE,CAAC;QAAEqE,OAAO,EAAE;MAAE,CAAE;MACnCE,IAAI,EAAE;QAAEvE,MAAM,EAAE,CAAC;QAAEqE,OAAO,EAAE;MAAE,CAAE;MAChCG,UAAU,EAAE/G,SAAU;MACtBgH,SAAS,EAAEnG,QAAS;MACpBoG,KAAK,EAAEZ,UAAW;MAClBa,UAAU,EAAEtH,SAAU;MACtBuH,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI,CAAE;MAC9BxD,QAAQ,EAAE,CAAE;MACZyD,GAAG,EAAE3F;IAAW,GAEfoE,cACqB,CAEjB,CAAC,EAClB3F,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCkG,UAAU,EACV1E,OAAO,EAAE+E,IAAI,EACbZ,cAAc,EACd3F,SAAS,EACTP,SAAS,EACTe,WAAW,EACXX,SAAS,EACTa,QAAQ,EACRI,SAAS,CACZ,CAAC;EAEF,OAAOzC,OAAO,CACV,mBACIH,KAAA,CAAA4H,aAAA,CAAC7G,cAAc;IACXiI,GAAG,EAAE5F,wBAAyB;IAC9B6F,mBAAmB,EAAE9G,kBAAmB;IACxCwG,SAAS,EAAEnG;EAAS,gBAEpBxC,KAAA,CAAA4H,aAAA,CAAC5G,oBAAoB;IACjB6H,UAAU,EAAEtH,SAAU;IACtB2H,OAAO,EAAE1B,iBAAkB;IAC3B2B,OAAO,EAAE7G,WAAY;IACrB8G,QAAQ,EAAE7F,OAAQ;IAClB8F,WAAW,EAAE5H;EAAW,gBAExBzB,KAAA,CAAA4H,aAAA,CAAC1G,yBAAyB,QACrBkG,mBAAmB,iBAChBpH,KAAA,CAAA4H,aAAA,CAACzG,8BAA8B;IAC3BmI,GAAG,EAAElC,mBAAoB;IACzBlF,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,EACAoF,eAAe,iBAAItH,KAAA,CAAA4H,aAAA,CAAChH,IAAI;IAAC+F,KAAK,EAAEW;EAAgB,CAAE,CAAC,EACnDC,eAAe,EACfnF,IAAI,IAAIA,IAAI,CAAC0F,aAAa,IAAI1F,IAAI,CAAC0F,aACb,CAAC,eAC5B9H,KAAA,CAAA4H,aAAA,CAAC3G,yBAAyB,qBACtBjB,KAAA,CAAA4H,aAAA,CAAChH,IAAI;IAAC+F,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CACT,CAAC,EACtB7D,MACW,CACnB,EACD,CACIvB,SAAS,EACTiG,iBAAiB,EACjBlF,WAAW,EACXb,UAAU,EACV8B,OAAO,EACPnB,IAAI,EACJI,QAAQ,EACR8E,eAAe,EACfF,mBAAmB,EACnBG,eAAe,EACfzE,MAAM,EACNZ,oBAAoB,EACpBC,kBAAkB,CAE1B,CAAC;AACL,CAAC;AAEDd,QAAQ,CAACkI,WAAW,GAAG,UAAU;AAEjC,eAAelI,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentHeight","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBoxTopic","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","textArray","map","_ref5","text","contentHeight","maxHeightInPixels","push","width","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","_ref6","groupName","createElement","_ref7","suffixElement","isSelected","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n calculateContentHeight,\n calculateContentWidth,\n getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport { StyledComboBoxTopic } from './combobox-item/ComboBoxItem.styles';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\n}\n\nexport type ComboBoxProps = {\n /*\n The element where the content of the `ComboBox` should be rendered via React Portal.\n /\n container?: Element;\n /\n The direction in which the combobox should open.\n /\n direction?: ComboBoxDirection;\n /\n Whether the combobox should be disabled.\n /\n isDisabled?: boolean;\n /\n The list of the items that should be displayed.\n /\n lists: IComboBoxItems[];\n /\n The maximum height of the combobox content.\n /\n maxHeight?: CSSProperties['maxHeight'];\n /\n Function that should be executed when an item is selected.\n /\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /\n A text that should be displayed when no item is selected.\n /\n placeholder: string;\n /\n An item that should be preselected.\n /\n selectedItem?: IComboBoxItem;\n /\n If true, the images of the items are displayed in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n /\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + container.scrollLeft;\n const y = comboBoxTop - containerTop + container.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /\n This function adds an event listener to the document to close the combobox when the user clicks outside of it\n /\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /\n This function sets the selected item\n /\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem \| undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const textArray = allItems?.map(({ text }) => text);\n\n const contentHeight = calculateContentHeight(textArray);\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n textArray.push(placeholder);\n\n const width = styledComboBoxElementRef.current?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /\n This function sets the external selected item\n /\n useEffect(() => {\n setIsAnimating(false);\n setItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (item) {\n return item.icons;\n }\n\n return undefined;\n }, [item, 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 (item) {\n text = item.text;\n }\n\n return text;\n }, [item, placeholder, selectedItem]);\n\n /\n This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map(({ imageUrl, icons, suffixElement, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n icons={icons}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n id={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {item && item.suffixElement && item.suffixElement}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isTouch,\n item,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/number-input/NumberInput.js CHANGED Viewed

@@ -61,7 +61,7 @@ const NumberInput = _ref => {
     let parsedNumber = null;
     if (!isTimeInput) {
       parsedNumber = parseFloatWithDecimals({
-        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),
+        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),
         decimals: isMoneyInput ? 2 : undefined
       });
       if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {

package/lib/esm/components/number-input/NumberInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /*\n Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n /\n isDecimalInput?: boolean;\n /\n Whether the input is disabled\n /\n isDisabled?: boolean;\n /\n Whether the value is invalid.\n /\n isInvalid?: boolean;\n /\n Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n /\n isMoneyInput?: boolean;\n /\n Whether the value should be formatted as a time.\n /\n isTimeInput?: boolean;\n /\n Limits the number to this value\n /\n maxNumber?: number;\n /\n Limits the number to this value\n /\n minNumber?: number;\n /\n Callback function that is called when the input gets out of focus\n /\n onBlur?: (newNumber: number \| string \| null, isInvalid: boolean) => void;\n /\n Callback function that is called when the input changes\n * It will pass the text from the input\n /\n onChange?: (newValue: string) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) \|\|\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber \|\| parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber \|\| parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : `${formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n })}${isMoneyInput ? ' €' : ''}`,\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /*\n Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n /\n isDecimalInput?: boolean;\n /\n Whether the input is disabled\n /\n isDisabled?: boolean;\n /\n Whether the value is invalid.\n /\n isInvalid?: boolean;\n /\n Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n /\n isMoneyInput?: boolean;\n /\n Whether the value should be formatted as a time.\n /\n isTimeInput?: boolean;\n /\n Limits the number to this value\n /\n maxNumber?: number;\n /\n Limits the number to this value\n /\n minNumber?: number;\n /\n Callback function that is called when the input gets out of focus\n /\n onBlur?: (newNumber: number \| string \| null, isInvalid: boolean) => void;\n /\n Callback function that is called when the input changes\n * It will pass the text from the input\n /\n onChange?: (newValue: string) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) \|\|\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber \|\| parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber \|\| parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : `${formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n })}${isMoneyInput ? ' €' : ''}`,\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.725",
+    "version": "5.0.0-beta.728",
     "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": "94f289ab1a544a7114d25d4b0d780d79373035d3"
+    "gitHead": "58c0c739fb7b5d9bae33dd2a5d0eb8d78493ce95"
 }