@chayns-components/core 5.0.0-beta.793 → 5.0.0-beta.795

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 (25) hide show
  1. package/lib/cjs/components/combobox/ComboBox.js +31 -35
  2. package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
  3. package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js +14 -10
  4. package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
  5. package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js +13 -2
  6. package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
  7. package/lib/cjs/components/slider/Slider.js +4 -4
  8. package/lib/cjs/components/slider/Slider.js.map +1 -1
  9. package/lib/cjs/components/slider/Slider.styles.js +12 -13
  10. package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
  11. package/lib/esm/components/combobox/ComboBox.js +35 -42
  12. package/lib/esm/components/combobox/ComboBox.js.map +1 -1
  13. package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js +14 -10
  14. package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
  15. package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js +25 -11
  16. package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
  17. package/lib/esm/components/slider/Slider.js +4 -4
  18. package/lib/esm/components/slider/Slider.js.map +1 -1
  19. package/lib/esm/components/slider/Slider.styles.js +17 -24
  20. package/lib/esm/components/slider/Slider.styles.js.map +1 -1
  21. package/lib/types/components/combobox/ComboBox.d.ts +1 -0
  22. package/lib/types/components/combobox/combobox-item/ComboBoxItem.d.ts +1 -0
  23. package/lib/types/components/combobox/combobox-item/ComboBoxItem.styles.d.ts +2 -1
  24. package/lib/types/components/slider/Slider.styles.d.ts +3 -1
  25. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n * Function that will be executed when the value is selected.\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme();\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setFromValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setToValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from <= to) {\n toSliderRef.current.value = String(to);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n const newValue = Number(event.target.value);\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, onChange],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: fromValue,\n thumbWidth: 35,\n containerWidth: fromSliderRef.current.offsetWidth,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: toValue,\n thumbWidth: toSliderThumbRef.current.offsetWidth,\n containerWidth: toSliderRef.current.offsetWidth,\n });\n }\n return 0;\n }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, onSelect, shouldShowThumbLabel]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef}>\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={35}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={35}\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n isBigSlider,\n interval,\n fromValue,\n steps,\n maxValue,\n minValue,\n handleTouchStart,\n handleTouchEnd,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbWidth,\n fromSliderThumbContentPosition,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toSliderThumbContentPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n * Function that will be executed when the value is selected.\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme();\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setFromValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setToValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from <= to) {\n toSliderRef.current.value = String(to);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n const newValue = Number(event.target.value);\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, onChange],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: fromValue,\n thumbWidth: 40,\n containerWidth: fromSliderRef.current.offsetWidth,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: toValue,\n thumbWidth: 40,\n containerWidth: toSliderRef.current.offsetWidth,\n });\n }\n return 0;\n }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, onSelect, shouldShowThumbLabel]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef}>\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n isBigSlider,\n interval,\n fromValue,\n steps,\n maxValue,\n minValue,\n handleTouchStart,\n handleTouchEnd,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbWidth,\n fromSliderThumbContentPosition,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toSliderThumbContentPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
@@ -81,7 +81,7 @@ const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.
81
81
  height: `${$isBigSlider ? 0 : 20}px`
82
82
  }
83
83
  }))`
84
- min-width: 20px;
84
+ width: 20px;
85
85
  height: 20px;
86
86
  cursor: pointer;
87
87
  border-radius: 100px;
@@ -99,13 +99,20 @@ const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.
99
99
 
100
100
  transition: top 0.2s ease 0s;
101
101
  `;
102
- const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponents.default.span`
102
+ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponents.default.span.attrs(({
103
+ $position,
104
+ $isBigSlider,
105
+ $width
106
+ }) => ({
107
+ style: {
108
+ minWidth: `${$width}px`,
109
+ top: `-${$isBigSlider ? 45 : 35}px`,
110
+ left: `${$position}px`
111
+ }
112
+ }))`
103
113
  pointer-events: none;
104
114
  color: #222;
105
115
 
106
- min-width: ${({
107
- $width
108
- }) => $width}px;
109
116
  height: 20px;
110
117
  cursor: pointer;
111
118
  border-radius: 3px;
@@ -121,14 +128,6 @@ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponent
121
128
 
122
129
  transition: top 0.2s ease 0s;
123
130
 
124
- left: ${({
125
- $position
126
- }) => $position}px;
127
-
128
- top: ${({
129
- $isBigSlider
130
- }) => `-${$isBigSlider ? 45 : 35}px`};
131
-
132
131
  &::after {
133
132
  background-color: inherit;
134
133
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n min-width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n pointer-events: none;\n color: #222;\n\n min-width: ${({ $width }) => $width}px;\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n left: ${({ $position }) => $position}px;\n\n top: ${({ $isBigSlider }) => `-${$isBigSlider ? 45 : 35}px`};\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACC,KAAK,CAAC,CAACC,KAAK,CACvD,CAAC;EAAEC,WAAW;EAAEC,MAAM;EAAEC,WAAW;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAM,CAAC,MAAM;EAC1DC,KAAK,EAAE;IACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CQ,KAAK,EAAE,eAAeN,WAAW,KAAK;IACtCO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;EACV;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,iBAAiB,GAAAlB,OAAA,CAAAkB,iBAAA,GAAGjB,yBAAM,CAACC,GAAG,CAACI,KAAK,CAC7C,CAAC;EAAEa,SAAS;EAAEC;AAAa,CAAC,MAAM;EAC9BP,KAAK,EAAE;IACHQ,IAAI,EAAE,GAAGF,SAAS,IAAI;IACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;EACpC;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMG,sBAAsB,GAAAvB,OAAA,CAAAuB,sBAAA,GAAGtB,yBAAM,CAACuB,IAAiC;AAC9E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEN;AAAU,CAAC,KAAKA,SAAS;AACxC;AACA,WAAW,CAAC;EAAEC;AAAa,CAAC,KAAK,IAAIA,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,CAAC;EAAED;AAAU,CAAC,KAAKA,SAAS,GAAG,CAAC,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 45 : 35}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
@@ -22,7 +22,7 @@ const ComboBox = _ref => {
22
22
  shouldShowRoundImage,
23
23
  shouldUseFullWidth = false
24
24
  } = _ref;
25
- const [item, setItem] = useState();
25
+ const [internalSelectedItem, setInternalSelectedItem] = useState();
26
26
  const [isAnimating, setIsAnimating] = useState(false);
27
27
  const [minWidth, setMinWidth] = useState(0);
28
28
  const [focusedIndex, setFocusedIndex] = useState(null);
@@ -39,7 +39,7 @@ const ComboBox = _ref => {
39
39
  } = useDevice();
40
40
  const isTouch = getIsTouch();
41
41
  const handleClick = useCallback(event => {
42
- if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target)) {
42
+ if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
43
43
  setIsAnimating(false);
44
44
  }
45
45
  }, [styledComboBoxElementRef]);
@@ -81,7 +81,7 @@ const ComboBox = _ref => {
81
81
  * This function sets the selected item
82
82
  */
83
83
  const handleSetSelectedItem = useCallback(itemToSelect => {
84
- setItem(itemToSelect);
84
+ setInternalSelectedItem(itemToSelect);
85
85
  setIsAnimating(false);
86
86
  if (onSelect) {
87
87
  onSelect(itemToSelect);
@@ -177,26 +177,26 @@ const ComboBox = _ref => {
177
177
  */
178
178
  useEffect(() => {
179
179
  setIsAnimating(false);
180
- setItem(selectedItem);
180
+ setInternalSelectedItem(selectedItem);
181
181
  }, [selectedItem]);
182
182
  const placeholderImageUrl = useMemo(() => {
183
183
  if (selectedItem) {
184
184
  return selectedItem.imageUrl;
185
185
  }
186
- if (item) {
187
- return item.imageUrl;
186
+ if (internalSelectedItem) {
187
+ return internalSelectedItem.imageUrl;
188
188
  }
189
189
  return undefined;
190
- }, [item, selectedItem]);
190
+ }, [internalSelectedItem, selectedItem]);
191
191
  const placeholderIcon = useMemo(() => {
192
192
  if (selectedItem) {
193
193
  return selectedItem.icons;
194
194
  }
195
- if (item) {
196
- return item.icons;
195
+ if (internalSelectedItem) {
196
+ return internalSelectedItem.icons;
197
197
  }
198
198
  return undefined;
199
- }, [item, selectedItem]);
199
+ }, [internalSelectedItem, selectedItem]);
200
200
 
201
201
  /**
202
202
  * This function resets the placeholder
@@ -205,11 +205,11 @@ const ComboBox = _ref => {
205
205
  let text = placeholder;
206
206
  if (selectedItem) {
207
207
  text = selectedItem.text;
208
- } else if (item) {
209
- text = item.text;
208
+ } else if (internalSelectedItem) {
209
+ text = internalSelectedItem.text;
210
210
  }
211
211
  return text;
212
- }, [item, placeholder, selectedItem]);
212
+ }, [internalSelectedItem, placeholder, selectedItem]);
213
213
 
214
214
  /**
215
215
  * This function opens the content of the combobox
@@ -230,32 +230,25 @@ const ComboBox = _ref => {
230
230
  } = _ref5;
231
231
  return /*#__PURE__*/React.createElement("div", {
232
232
  key: groupName ?? 'default-group'
233
- }, groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, groupName), list.map(_ref6 => {
234
- let {
235
- imageUrl,
236
- icons,
237
- rightElement,
238
- subtext,
239
- suffixElement,
240
- text,
241
- value
242
- } = _ref6;
243
- return /*#__PURE__*/React.createElement(ComboBoxItem, {
244
- icons: icons,
245
- id: value,
246
- imageUrl: imageUrl,
247
- isSelected: selectedItem ? value === selectedItem.value : false,
248
- key: value,
249
- onSelect: handleSetSelectedItem,
250
- rightElement: rightElement,
251
- shouldShowBigImage: shouldShowBigImage,
252
- shouldShowRoundImage: shouldShowRoundImage,
253
- subtext: subtext,
254
- suffixElement: suffixElement,
255
- text: text,
256
- value: value
257
- });
258
- }));
233
+ }, groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, groupName), list.map(item =>
234
+ /*#__PURE__*/
235
+ // ToDo: Cleanup this - item should be given as a prop to avoid full spreading
236
+ React.createElement(ComboBoxItem, {
237
+ icons: item.icons,
238
+ id: item.value,
239
+ imageUrl: item.imageUrl,
240
+ isDisabled: item.isDisabled,
241
+ isSelected: selectedItem ? item.value === selectedItem.value : false,
242
+ key: item.value,
243
+ onSelect: handleSetSelectedItem,
244
+ rightElement: item.rightElement,
245
+ shouldShowBigImage: shouldShowBigImage,
246
+ shouldShowRoundImage: shouldShowRoundImage,
247
+ subtext: item.subtext,
248
+ suffixElement: item.suffixElement,
249
+ text: item.text,
250
+ value: item.value
251
+ })));
259
252
  }), [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage]);
260
253
  const bodyStyles = useMemo(() => {
261
254
  let styles = {
@@ -310,15 +303,15 @@ const ComboBox = _ref => {
310
303
  $isTouch: isTouch,
311
304
  $isDisabled: isDisabled
312
305
  }, /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
313
- $shouldReduceOpacity: !selectedItem && !item
306
+ $shouldReduceOpacity: !selectedItem && !internalSelectedItem
314
307
  }, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
315
308
  src: placeholderImageUrl,
316
309
  shouldShowRoundImage: shouldShowRoundImage
317
310
  }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
318
311
  icons: placeholderIcon
319
- }), placeholderText, item && item.suffixElement && item.suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
312
+ }), placeholderText, internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
320
313
  icons: ['fa fa-chevron-down']
321
- }))), portal), [direction, handleHeaderClick, isAnimating, isDisabled, isTouch, item, minWidth, placeholderIcon, placeholderImageUrl, placeholderText, portal, selectedItem, shouldShowRoundImage, shouldUseFullWidth]);
314
+ }))), portal), [direction, handleHeaderClick, isAnimating, isDisabled, isTouch, internalSelectedItem, minWidth, placeholderIcon, placeholderImageUrl, placeholderText, portal, selectedItem, shouldShowRoundImage, shouldUseFullWidth]);
322
315
  };
323
316
  ComboBox.displayName = 'ComboBox';
324
317
  export default ComboBox;
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","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","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","width","parentElement","text","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","_ref6","rightElement","subtext","suffixElement","isSelected","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * 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 bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n */\n shouldShowBigImage?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n */\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowBigImage,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\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 currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const width =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n 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(\n ({\n imageUrl,\n icons,\n rightElement,\n subtext,\n suffixElement,\n text,\n value,\n }) => (\n <ComboBoxItem\n icons={icons}\n id={value}\n imageUrl={imageUrl}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n onSelect={handleSetSelectedItem}\n rightElement={rightElement}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={shouldShowRoundImage}\n subtext={subtext}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n ),\n )}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder $shouldReduceOpacity={!selectedItem && !item}>\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 selectedItem,\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","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","shouldUseFullWidth","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","width","parentElement","text","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","item","isSelected","rightElement","subtext","suffixElement","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * 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 bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n */\n shouldShowBigImage?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n */\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowBigImage,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + container.scrollLeft;\n const y = comboBoxTop - containerTop + container.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n const currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const width =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map((item) => (\n // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n <ComboBoxItem\n icons={item.icons}\n id={item.value}\n imageUrl={item.imageUrl}\n isDisabled={item.isDisabled}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n key={item.value}\n onSelect={handleSetSelectedItem}\n rightElement={item.rightElement}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={shouldShowRoundImage}\n subtext={item.subtext}\n suffixElement={item.suffixElement}\n text={item.text}\n value={item.value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n <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 internalSelectedItem,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
@@ -7,6 +7,7 @@ const ComboBoxItem = _ref => {
7
7
  icons,
8
8
  id,
9
9
  imageUrl,
10
+ isDisabled,
10
11
  isSelected,
11
12
  onSelect,
12
13
  rightElement,
@@ -18,26 +19,29 @@ const ComboBoxItem = _ref => {
18
19
  value
19
20
  } = _ref;
20
21
  const handleItemClick = useCallback(() => {
21
- onSelect({
22
- text,
23
- value,
24
- suffixElement,
25
- imageUrl
26
- });
27
- }, [imageUrl, onSelect, suffixElement, text, value]);
22
+ if (!isDisabled) {
23
+ onSelect({
24
+ text,
25
+ value,
26
+ suffixElement,
27
+ imageUrl
28
+ });
29
+ }
30
+ }, [imageUrl, isDisabled, onSelect, suffixElement, text, value]);
28
31
  const isTouch = getIsTouch();
29
32
  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBoxItem, {
30
33
  id: `combobox-item__${typeof id === 'number' ? String(id) : id}`,
31
34
  onClick: handleItemClick,
32
- $isTouch: isTouch,
33
- $isSelected: isSelected
35
+ $isDisabled: isDisabled,
36
+ $isSelected: isSelected,
37
+ $isTouch: isTouch
34
38
  }, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
35
39
  src: imageUrl,
36
40
  $shouldShowBigImage: shouldShowBigImage || typeof subtext === 'string' && subtext.trim() !== '',
37
41
  $shouldShowRoundImage: shouldShowRoundImage
38
42
  }), icons && /*#__PURE__*/React.createElement(Icon, {
39
43
  icons: icons
40
- }), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderText, null, text, suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text]);
44
+ }), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderText, null, text, suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text]);
41
45
  };
42
46
  ComboBoxItem.displayName = 'ComboBoxItem';
43
47
  export default ComboBoxItem;
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageUrl","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","text","value","handleItemClick","isTouch","createElement","String","onClick","$isTouch","$isSelected","src","$shouldShowBigImage","trim","$shouldShowRoundImage","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n StyledComboBoxItem,\n StyledComboBoxItemContent,\n StyledComboBoxItemContentHeader,\n StyledComboBoxItemContentHeaderRightElement,\n StyledComboBoxItemContentHeaderText,\n StyledComboBoxItemContentSubtext,\n StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n icons?: IComboBoxItem['icons'];\n id: IComboBoxItem['value'];\n imageUrl: IComboBoxItem['imageUrl'];\n isSelected: boolean;\n onSelect: (itemToSelect: IComboBoxItem) => void;\n rightElement: IComboBoxItem['rightElement'];\n shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n subtext: IComboBoxItem['subtext'];\n suffixElement?: ReactNode;\n text: IComboBoxItem['text'];\n value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n icons,\n id,\n imageUrl,\n isSelected,\n onSelect,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n value,\n}) => {\n const handleItemClick = useCallback(() => {\n onSelect({ text, value, suffixElement, imageUrl });\n }, [imageUrl, onSelect, suffixElement, text, value]);\n\n const isTouch = getIsTouch();\n\n return useMemo(\n () => (\n <StyledComboBoxItem\n id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n onClick={handleItemClick}\n $isTouch={isTouch}\n $isSelected={isSelected}\n >\n {imageUrl && (\n <StyledComboBoxItemImage\n src={imageUrl}\n $shouldShowBigImage={\n shouldShowBigImage ||\n (typeof subtext === 'string' && subtext.trim() !== '')\n }\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && <Icon icons={icons} />}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader>\n <StyledComboBoxItemContentHeaderText>\n {text}\n {suffixElement}\n </StyledComboBoxItemContentHeaderText>\n {rightElement && (\n <StyledComboBoxItemContentHeaderRightElement>\n {rightElement}\n </StyledComboBoxItemContentHeaderRightElement>\n )}\n </StyledComboBoxItemContentHeader>\n {subtext && (\n <StyledComboBoxItemContentSubtext>\n {subtext}\n </StyledComboBoxItemContentSubtext>\n )}\n </StyledComboBoxItemContent>\n </StyledComboBoxItem>\n ),\n [\n handleItemClick,\n icons,\n id,\n imageUrl,\n isSelected,\n isTouch,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n ],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,2CAA2C,EAC3CC,mCAAmC,EACnCC,gCAAgC,EAChCC,uBAAuB,QACpB,uBAAuB;AAiB9B,MAAMC,YAAmC,GAAGC,IAAA,IAatC;EAAA,IAbuC;IACzCC,KAAK;IACLC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,OAAO;IACPC,aAAa;IACbC,IAAI;IACJC;EACJ,CAAC,GAAAZ,IAAA;EACG,MAAMa,eAAe,GAAGzB,WAAW,CAAC,MAAM;IACtCiB,QAAQ,CAAC;MAAEM,IAAI;MAAEC,KAAK;MAAEF,aAAa;MAAEP;IAAS,CAAC,CAAC;EACtD,CAAC,EAAE,CAACA,QAAQ,EAAEE,QAAQ,EAAEK,aAAa,EAAEC,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEpD,MAAME,OAAO,GAAGxB,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAA4B,aAAA,CAACvB,kBAAkB;IACfU,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGc,MAAM,CAACd,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEe,OAAO,EAAEJ,eAAgB;IACzBK,QAAQ,EAAEJ,OAAQ;IAClBK,WAAW,EAAEf;EAAW,GAEvBD,QAAQ,iBACLhB,KAAA,CAAA4B,aAAA,CAACjB,uBAAuB;IACpBsB,GAAG,EAAEjB,QAAS;IACdkB,mBAAmB,EACfd,kBAAkB,IACjB,OAAOE,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACa,IAAI,CAAC,CAAC,KAAK,EACtD;IACDC,qBAAqB,EAAEf;EAAqB,CAC/C,CACJ,EACAP,KAAK,iBAAId,KAAA,CAAA4B,aAAA,CAACxB,IAAI;IAACU,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChCd,KAAA,CAAA4B,aAAA,CAACtB,yBAAyB,qBACtBN,KAAA,CAAA4B,aAAA,CAACrB,+BAA+B,qBAC5BP,KAAA,CAAA4B,aAAA,CAACnB,mCAAmC,QAC/Be,IAAI,EACJD,aACgC,CAAC,EACrCJ,YAAY,iBACTnB,KAAA,CAAA4B,aAAA,CAACpB,2CAA2C,QACvCW,YACwC,CAEpB,CAAC,EACjCG,OAAO,iBACJtB,KAAA,CAAA4B,aAAA,CAAClB,gCAAgC,QAC5BY,OAC6B,CAEf,CACX,CACvB,EACD,CACII,eAAe,EACfZ,KAAK,EACLC,EAAE,EACFC,QAAQ,EACRC,UAAU,EACVU,OAAO,EACPR,YAAY,EACZC,kBAAkB,EAClBC,oBAAoB,EACpBC,OAAO,EACPC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDZ,YAAY,CAACyB,WAAW,GAAG,cAAc;AAEzC,eAAezB,YAAY","ignoreList":[]}
1
+ {"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","text","value","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$shouldShowBigImage","trim","$shouldShowRoundImage","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n StyledComboBoxItem,\n StyledComboBoxItemContent,\n StyledComboBoxItemContentHeader,\n StyledComboBoxItemContentHeaderRightElement,\n StyledComboBoxItemContentHeaderText,\n StyledComboBoxItemContentSubtext,\n StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n icons?: IComboBoxItem['icons'];\n id: IComboBoxItem['value'];\n imageUrl: IComboBoxItem['imageUrl'];\n isDisabled?: IComboBoxItem['isDisabled'];\n isSelected: boolean;\n onSelect: (itemToSelect: IComboBoxItem) => void;\n rightElement: IComboBoxItem['rightElement'];\n shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n subtext: IComboBoxItem['subtext'];\n suffixElement?: ReactNode;\n text: IComboBoxItem['text'];\n value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n icons,\n id,\n imageUrl,\n isDisabled,\n isSelected,\n onSelect,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n value,\n}) => {\n const handleItemClick = useCallback(() => {\n if (!isDisabled) {\n onSelect({ text, value, suffixElement, imageUrl });\n }\n }, [imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n const isTouch = getIsTouch();\n\n return useMemo(\n () => (\n <StyledComboBoxItem\n id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n onClick={handleItemClick}\n $isDisabled={isDisabled}\n $isSelected={isSelected}\n $isTouch={isTouch}\n >\n {imageUrl && (\n <StyledComboBoxItemImage\n src={imageUrl}\n $shouldShowBigImage={\n shouldShowBigImage ||\n (typeof subtext === 'string' && subtext.trim() !== '')\n }\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && <Icon icons={icons} />}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader>\n <StyledComboBoxItemContentHeaderText>\n {text}\n {suffixElement}\n </StyledComboBoxItemContentHeaderText>\n {rightElement && (\n <StyledComboBoxItemContentHeaderRightElement>\n {rightElement}\n </StyledComboBoxItemContentHeaderRightElement>\n )}\n </StyledComboBoxItemContentHeader>\n {subtext && (\n <StyledComboBoxItemContentSubtext>\n {subtext}\n </StyledComboBoxItemContentSubtext>\n )}\n </StyledComboBoxItemContent>\n </StyledComboBoxItem>\n ),\n [\n handleItemClick,\n icons,\n id,\n imageUrl,\n isDisabled,\n isSelected,\n isTouch,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n ],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,2CAA2C,EAC3CC,mCAAmC,EACnCC,gCAAgC,EAChCC,uBAAuB,QACpB,uBAAuB;AAkB9B,MAAMC,YAAmC,GAAGC,IAAA,IActC;EAAA,IAduC;IACzCC,KAAK;IACLC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,OAAO;IACPC,aAAa;IACbC,IAAI;IACJC;EACJ,CAAC,GAAAb,IAAA;EACG,MAAMc,eAAe,GAAG1B,WAAW,CAAC,MAAM;IACtC,IAAI,CAACgB,UAAU,EAAE;MACbE,QAAQ,CAAC;QAAEM,IAAI;QAAEC,KAAK;QAAEF,aAAa;QAAER;MAAS,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEC,UAAU,EAAEE,QAAQ,EAAEK,aAAa,EAAEC,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEhE,MAAME,OAAO,GAAGzB,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAA6B,aAAA,CAACxB,kBAAkB;IACfU,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGe,MAAM,CAACf,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEgB,OAAO,EAAEJ,eAAgB;IACzBK,WAAW,EAAEf,UAAW;IACxBgB,WAAW,EAAEf,UAAW;IACxBgB,QAAQ,EAAEN;EAAQ,GAEjBZ,QAAQ,iBACLhB,KAAA,CAAA6B,aAAA,CAAClB,uBAAuB;IACpBwB,GAAG,EAAEnB,QAAS;IACdoB,mBAAmB,EACff,kBAAkB,IACjB,OAAOE,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACc,IAAI,CAAC,CAAC,KAAK,EACtD;IACDC,qBAAqB,EAAEhB;EAAqB,CAC/C,CACJ,EACAR,KAAK,iBAAId,KAAA,CAAA6B,aAAA,CAACzB,IAAI;IAACU,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChCd,KAAA,CAAA6B,aAAA,CAACvB,yBAAyB,qBACtBN,KAAA,CAAA6B,aAAA,CAACtB,+BAA+B,qBAC5BP,KAAA,CAAA6B,aAAA,CAACpB,mCAAmC,QAC/BgB,IAAI,EACJD,aACgC,CAAC,EACrCJ,YAAY,iBACTpB,KAAA,CAAA6B,aAAA,CAACrB,2CAA2C,QACvCY,YACwC,CAEpB,CAAC,EACjCG,OAAO,iBACJvB,KAAA,CAAA6B,aAAA,CAACnB,gCAAgC,QAC5Ba,OAC6B,CAEf,CACX,CACvB,EACD,CACII,eAAe,EACfb,KAAK,EACLC,EAAE,EACFC,QAAQ,EACRC,UAAU,EACVC,UAAU,EACVU,OAAO,EACPR,YAAY,EACZC,kBAAkB,EAClBC,oBAAoB,EACpBC,OAAO,EACPC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDb,YAAY,CAAC2B,WAAW,GAAG,cAAc;AAEzC,eAAe3B,YAAY","ignoreList":[]}