@chayns-components/core 5.0.0-beta.724 → 5.0.0-beta.725
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.
|
@@ -54,17 +54,23 @@ const ComboBox = ({
|
|
|
54
54
|
const handleOpen = (0, _react.useCallback)(() => {
|
|
55
55
|
if (styledComboBoxElementRef.current) {
|
|
56
56
|
const {
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
left: comboBoxLeft,
|
|
58
|
+
top: comboBoxTop,
|
|
59
59
|
height
|
|
60
60
|
} = styledComboBoxElementRef.current.getBoundingClientRect();
|
|
61
|
+
const {
|
|
62
|
+
left: containerLeft,
|
|
63
|
+
top: containerTop
|
|
64
|
+
} = container.getBoundingClientRect();
|
|
65
|
+
const x = comboBoxLeft - containerLeft + window.scrollX;
|
|
66
|
+
const y = comboBoxTop - containerTop + window.scrollY;
|
|
61
67
|
setInternalCoordinates({
|
|
62
68
|
x,
|
|
63
69
|
y: direction === _comboBox.ComboBoxDirection.TOP ? y : y + height
|
|
64
70
|
});
|
|
65
71
|
setIsAnimating(true);
|
|
66
72
|
}
|
|
67
|
-
}, [direction]);
|
|
73
|
+
}, [container, direction]);
|
|
68
74
|
const handleClose = (0, _react.useCallback)(() => {
|
|
69
75
|
setIsAnimating(false);
|
|
70
76
|
}, []);
|
|
@@ -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","height","getBoundingClientRect","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","left","top","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 { x, y, height } = styledComboBoxElementRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [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","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":[]}
|
|
@@ -46,17 +46,23 @@ const ComboBox = _ref => {
|
|
|
46
46
|
const handleOpen = useCallback(() => {
|
|
47
47
|
if (styledComboBoxElementRef.current) {
|
|
48
48
|
const {
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
left: comboBoxLeft,
|
|
50
|
+
top: comboBoxTop,
|
|
51
51
|
height
|
|
52
52
|
} = styledComboBoxElementRef.current.getBoundingClientRect();
|
|
53
|
+
const {
|
|
54
|
+
left: containerLeft,
|
|
55
|
+
top: containerTop
|
|
56
|
+
} = container.getBoundingClientRect();
|
|
57
|
+
const x = comboBoxLeft - containerLeft + window.scrollX;
|
|
58
|
+
const y = comboBoxTop - containerTop + window.scrollY;
|
|
53
59
|
setInternalCoordinates({
|
|
54
60
|
x,
|
|
55
61
|
y: direction === ComboBoxDirection.TOP ? y : y + height
|
|
56
62
|
});
|
|
57
63
|
setIsAnimating(true);
|
|
58
64
|
}
|
|
59
|
-
}, [direction]);
|
|
65
|
+
}, [container, direction]);
|
|
60
66
|
const handleClose = useCallback(() => {
|
|
61
67
|
setIsAnimating(false);
|
|
62
68
|
}, []);
|
|
@@ -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","height","getBoundingClientRect","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","left","top","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 { x, y, height } = styledComboBoxElementRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [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":["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":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.725",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "94f289ab1a544a7114d25d4b0d780d79373035d3"
|
|
89
89
|
}
|