@chayns-components/core 5.4.0 → 5.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/combobox/ComboBox.js +17 -5
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js +8 -1
- package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map +1 -1
- package/lib/cjs/hooks/dropdown.js +24 -5
- package/lib/cjs/hooks/dropdown.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +17 -5
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js +8 -1
- package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map +1 -1
- package/lib/esm/hooks/dropdown.js +24 -5
- package/lib/esm/hooks/dropdown.js.map +1 -1
- package/lib/types/components/dropdown-body-wrapper/DropdownBodyWrapper.d.ts +7 -0
- package/lib/types/hooks/dropdown.d.ts +2 -0
- package/package.json +2 -2
|
@@ -51,6 +51,7 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
51
51
|
const [minWidth, setMinWidth] = (0, _react.useState)(undefined);
|
|
52
52
|
const [bodyMinWidth, setBodyMinWidth] = (0, _react.useState)(0);
|
|
53
53
|
const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
|
|
54
|
+
const [availableMaxHeight, setAvailableMaxHeight] = (0, _react.useState)(undefined);
|
|
54
55
|
const isInputFocused = (0, _react.useRef)(false);
|
|
55
56
|
const styledComboBoxElementRef = (0, _react.useRef)(null);
|
|
56
57
|
const contentRef = (0, _react.useRef)(null);
|
|
@@ -95,6 +96,16 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
95
96
|
const combinedLists = lists.flatMap(list => list.list);
|
|
96
97
|
return combinedLists.length === 1 && combinedLists.some(item => item.value === selectedItem.value);
|
|
97
98
|
}, [lists, selectedItem]);
|
|
99
|
+
|
|
100
|
+
// Limits the configured maxHeight by the height that is actually available inside the
|
|
101
|
+
// container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut
|
|
102
|
+
// off when it is opened to the top or bottom and there is not enough space.
|
|
103
|
+
const effectiveMaxHeight = (0, _react.useMemo)(() => {
|
|
104
|
+
if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {
|
|
105
|
+
return Math.min(maxHeight, availableMaxHeight);
|
|
106
|
+
}
|
|
107
|
+
return maxHeight;
|
|
108
|
+
}, [availableMaxHeight, maxHeight]);
|
|
98
109
|
const contentHeight = (0, _react.useMemo)(() => {
|
|
99
110
|
const flatItems = lists.flatMap(list => list.list);
|
|
100
111
|
let height = flatItems.reduce((value, item) => {
|
|
@@ -104,11 +115,11 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
104
115
|
if (lists.length > 1) {
|
|
105
116
|
height += lists.length * 38;
|
|
106
117
|
}
|
|
107
|
-
if (
|
|
108
|
-
height =
|
|
118
|
+
if (effectiveMaxHeight < height) {
|
|
119
|
+
height = effectiveMaxHeight;
|
|
109
120
|
}
|
|
110
121
|
return height;
|
|
111
|
-
}, [
|
|
122
|
+
}, [effectiveMaxHeight, lists, shouldShowBigImage]);
|
|
112
123
|
const handleInputFocus = (0, _react.useCallback)(event => {
|
|
113
124
|
isInputFocused.current = true;
|
|
114
125
|
onInputFocus === null || onInputFocus === void 0 || onInputFocus(event);
|
|
@@ -329,18 +340,19 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
329
340
|
bodyWidth: bodyWidth,
|
|
330
341
|
contentHeight: contentHeight,
|
|
331
342
|
shouldCaptureEvents: shouldCaptureEvents,
|
|
343
|
+
onAvailableMaxHeightChange: setAvailableMaxHeight,
|
|
332
344
|
onClose: handleClose,
|
|
333
345
|
direction: direction,
|
|
334
346
|
container: container,
|
|
335
347
|
shouldShowDropdown: isAnimating,
|
|
336
348
|
minBodyWidth: bodyWidth ?? bodyMinWidth
|
|
337
349
|
}, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxBody, {
|
|
338
|
-
$maxHeight:
|
|
350
|
+
$maxHeight: effectiveMaxHeight,
|
|
339
351
|
$minWidth: bodyWidth ?? bodyMinWidth,
|
|
340
352
|
className: "chayns-scrollbar",
|
|
341
353
|
ref: contentRef,
|
|
342
354
|
tabIndex: 0
|
|
343
|
-
}, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch,
|
|
355
|
+
}, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, effectiveMaxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
|
|
344
356
|
});
|
|
345
357
|
ComboBox.displayName = 'ComboBox';
|
|
346
358
|
var _default = exports.default = ComboBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","_ComboBox2","_ComboBox3","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBox","forwardRef","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","ComboBoxSize","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","useRef","styledComboBoxElementRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","useIsTouch","areaProvider","useContext","AreaContext","useEffect","calculatedMinWidth","calculatedBodyMinWidth","getComboBoxWidthResult","parentWidth","width","shouldChangeColor","useMemo","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","_contentRef$current2","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","useImperativeHandle","hide","show","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","$minWidth","$shouldUseFullWidth","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","className","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n FocusEventHandler,\n forwardRef,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxBody,\n StyledComboBoxClearIconWrapper,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n (\n {\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n shouldCaptureEvents,\n selectedItem,\n onHide,\n onShow,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n prefixMinWidth,\n size = ComboBoxSize.NORMAL,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n shouldShowTransparentBackground = false,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n },\n ref,\n ) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n const isInputFocused = useRef(false);\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, {\n shouldUseParentElement: true,\n });\n\n const functions = useFunctions();\n const values = useValues();\n const isTouch = useIsTouch();\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (!parentSize) {\n return;\n }\n\n const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n getComboBoxWidthResult({\n functions,\n internalSelectedItem,\n lists,\n parentWidth: parentSize.width,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n });\n\n setMinWidth(calculatedMinWidth);\n setBodyMinWidth(calculatedBodyMinWidth);\n }, [\n functions,\n internalSelectedItem,\n lists,\n parentSize,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n ]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let height = flatItems.reduce((value, item) => {\n const isBigItem =\n shouldShowBigImage ||\n (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n return value + (isBigItem ? 56 : 38);\n }, 0);\n\n if (lists.length > 1) {\n height += lists.length * 38;\n }\n\n if (maxHeight < height) {\n height = maxHeight;\n }\n\n return height;\n }, [lists, maxHeight, shouldShowBigImage]);\n\n const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = true;\n onInputFocus?.(event);\n },\n [onInputFocus],\n );\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = false;\n onInputBlur?.(event);\n },\n [onInputBlur],\n );\n\n const handleOpen = useCallback(() => {\n if (typeof onShow === 'function') {\n onShow();\n }\n\n setIsAnimating(true);\n }, [onShow]);\n\n const handleClose = useCallback(() => {\n if (typeof onHide === 'function') {\n onHide();\n }\n\n setIsAnimating(false);\n }, [onHide]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect?: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const onSelectResult = onSelect(itemToSelect);\n\n if (onSelectResult === false) {\n return;\n }\n\n if (onSelectResult instanceof Promise) {\n void onSelectResult.then((shouldPreventSelection) => {\n if (shouldPreventSelection) return;\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n },\n [handleClose, onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children || children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') ||\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n const shouldShowRoundPlaceholderImage = useMemo(() => {\n const selectedItemList = lists.find((list) =>\n list.list.some(\n ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n ),\n );\n\n return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled && !isInputFocused.current) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleClose,\n show: handleOpen,\n }),\n [handleClose, handleOpen],\n );\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <Fragment key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n {list.groupName}\n </StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n <ComboBoxItem\n key={`item-${item.text}`}\n item={item}\n isSelected={\n selectedItem ? item.value === selectedItem.value : false\n }\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={\n list.shouldShowRoundImage ?? shouldShowRoundImage\n }\n />\n ))}\n </Fragment>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $size={size}\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper\n $isDisabled={isDisabled}\n onClick={handleClear}\n >\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $isDisabled={isDisabled}\n $size={size}\n $shouldShowBorderLeft={\n shouldShowClearIcon === true &&\n internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n shouldCaptureEvents={shouldCaptureEvents}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n >\n <StyledComboBoxBody\n $maxHeight={maxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n className=\"chayns-scrollbar\"\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n bodyMinWidth,\n bodyWidth,\n comboBoxGroups,\n container,\n contentHeight,\n direction,\n handleClear,\n handleClose,\n handleHeaderClick,\n handleInputBlur,\n handleInputFocus,\n inputValue,\n internalSelectedItem,\n isAnimating,\n isDisabled,\n isTouch,\n maxHeight,\n minWidth,\n onInputChange,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldChangeColor,\n shouldDisableActions,\n shouldCaptureEvents,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundPlaceholderImage,\n shouldShowTransparentBackground,\n shouldUseFullWidth,\n size,\n ],\n );\n },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","_ComboBox2","_ComboBox3","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBox","forwardRef","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","ComboBoxSize","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","availableMaxHeight","setAvailableMaxHeight","isInputFocused","useRef","styledComboBoxElementRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","useIsTouch","areaProvider","useContext","AreaContext","useEffect","calculatedMinWidth","calculatedBodyMinWidth","getComboBoxWidthResult","parentWidth","width","shouldChangeColor","useMemo","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","_contentRef$current2","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","useImperativeHandle","hide","show","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","$minWidth","$shouldUseFullWidth","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onAvailableMaxHeightChange","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","className","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n FocusEventHandler,\n forwardRef,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxBody,\n StyledComboBoxClearIconWrapper,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n (\n {\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n shouldCaptureEvents,\n selectedItem,\n onHide,\n onShow,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n prefixMinWidth,\n size = ComboBoxSize.NORMAL,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n shouldShowTransparentBackground = false,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n },\n ref,\n ) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\n\n const isInputFocused = useRef(false);\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, {\n shouldUseParentElement: true,\n });\n\n const functions = useFunctions();\n const values = useValues();\n const isTouch = useIsTouch();\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (!parentSize) {\n return;\n }\n\n const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n getComboBoxWidthResult({\n functions,\n internalSelectedItem,\n lists,\n parentWidth: parentSize.width,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n });\n\n setMinWidth(calculatedMinWidth);\n setBodyMinWidth(calculatedBodyMinWidth);\n }, [\n functions,\n internalSelectedItem,\n lists,\n parentSize,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n ]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n // Limits the configured maxHeight by the height that is actually available inside the\n // container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut\n // off when it is opened to the top or bottom and there is not enough space.\n const effectiveMaxHeight = useMemo(() => {\n if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {\n return Math.min(maxHeight, availableMaxHeight);\n }\n\n return maxHeight;\n }, [availableMaxHeight, maxHeight]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let height = flatItems.reduce((value, item) => {\n const isBigItem =\n shouldShowBigImage ||\n (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n return value + (isBigItem ? 56 : 38);\n }, 0);\n\n if (lists.length > 1) {\n height += lists.length * 38;\n }\n\n if (effectiveMaxHeight < height) {\n height = effectiveMaxHeight;\n }\n\n return height;\n }, [effectiveMaxHeight, lists, shouldShowBigImage]);\n\n const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = true;\n onInputFocus?.(event);\n },\n [onInputFocus],\n );\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = false;\n onInputBlur?.(event);\n },\n [onInputBlur],\n );\n\n const handleOpen = useCallback(() => {\n if (typeof onShow === 'function') {\n onShow();\n }\n\n setIsAnimating(true);\n }, [onShow]);\n\n const handleClose = useCallback(() => {\n if (typeof onHide === 'function') {\n onHide();\n }\n\n setIsAnimating(false);\n }, [onHide]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect?: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const onSelectResult = onSelect(itemToSelect);\n\n if (onSelectResult === false) {\n return;\n }\n\n if (onSelectResult instanceof Promise) {\n void onSelectResult.then((shouldPreventSelection) => {\n if (shouldPreventSelection) return;\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n },\n [handleClose, onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children || children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') ||\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n const shouldShowRoundPlaceholderImage = useMemo(() => {\n const selectedItemList = lists.find((list) =>\n list.list.some(\n ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n ),\n );\n\n return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled && !isInputFocused.current) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleClose,\n show: handleOpen,\n }),\n [handleClose, handleOpen],\n );\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <Fragment key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n {list.groupName}\n </StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n <ComboBoxItem\n key={`item-${item.text}`}\n item={item}\n isSelected={\n selectedItem ? item.value === selectedItem.value : false\n }\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={\n list.shouldShowRoundImage ?? shouldShowRoundImage\n }\n />\n ))}\n </Fragment>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $size={size}\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper\n $isDisabled={isDisabled}\n onClick={handleClear}\n >\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $isDisabled={isDisabled}\n $size={size}\n $shouldShowBorderLeft={\n shouldShowClearIcon === true &&\n internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n shouldCaptureEvents={shouldCaptureEvents}\n onAvailableMaxHeightChange={setAvailableMaxHeight}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n >\n <StyledComboBoxBody\n $maxHeight={effectiveMaxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n className=\"chayns-scrollbar\"\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n bodyMinWidth,\n bodyWidth,\n comboBoxGroups,\n container,\n contentHeight,\n direction,\n handleClear,\n handleClose,\n handleHeaderClick,\n handleInputBlur,\n handleInputFocus,\n inputValue,\n internalSelectedItem,\n isAnimating,\n isDisabled,\n isTouch,\n effectiveMaxHeight,\n minWidth,\n onInputChange,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldChangeColor,\n shouldDisableActions,\n shouldCaptureEvents,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundPlaceholderImage,\n shouldShowTransparentBackground,\n shouldUseFullWidth,\n size,\n ],\n );\n },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -22,6 +22,7 @@ const DropdownBodyWrapper = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
22
22
|
direction = _dropdown.DropdownDirection.BOTTOM_RIGHT,
|
|
23
23
|
maxHeight,
|
|
24
24
|
minBodyWidth = 0,
|
|
25
|
+
onAvailableMaxHeightChange,
|
|
25
26
|
onClose,
|
|
26
27
|
onOutsideClick,
|
|
27
28
|
onMeasure,
|
|
@@ -42,7 +43,8 @@ const DropdownBodyWrapper = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
42
43
|
const {
|
|
43
44
|
transform,
|
|
44
45
|
width,
|
|
45
|
-
coordinates
|
|
46
|
+
coordinates,
|
|
47
|
+
availableMaxHeight
|
|
46
48
|
} = (0, _dropdown2.useDropdown)({
|
|
47
49
|
anchorElement,
|
|
48
50
|
container,
|
|
@@ -51,6 +53,11 @@ const DropdownBodyWrapper = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
51
53
|
direction,
|
|
52
54
|
shouldShowDropdown
|
|
53
55
|
});
|
|
56
|
+
(0, _react.useEffect)(() => {
|
|
57
|
+
if (typeof onAvailableMaxHeightChange === 'function') {
|
|
58
|
+
onAvailableMaxHeightChange(availableMaxHeight);
|
|
59
|
+
}
|
|
60
|
+
}, [availableMaxHeight, onAvailableMaxHeightChange]);
|
|
54
61
|
const handleClose = (0, _react.useCallback)(() => {
|
|
55
62
|
if (typeof onClose === 'function') {
|
|
56
63
|
onClose();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","forwardRef","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","DropdownDirection","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","useDropdown","contentWidth","handleClose","useCallback","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","useEffect","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","className","tabIndex","useImperativeHandle","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledDropdownBodyWrapper,\n StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n /**\n * The anchor element of the dropdown.\n */\n anchorElement: Element;\n /**\n * The width of the Body.\n */\n bodyWidth?: number;\n /**\n * The content of the dropdown body.\n */\n children: ReactNode;\n /**\n * The element where the content should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The height of the content\n */\n contentHeight?: number;\n /**\n * The direction of the dropdown.\n */\n direction?: DropdownDirection;\n /**\n * The max height of the dropdown.\n */\n maxHeight?: number;\n /**\n * The minimum width of the body.\n */\n minBodyWidth?: number;\n /**\n * Function to be executed when the body is closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the user clicks outside the dropdown.\n * If the function returns `true`, the dropdown will not be closed.\n */\n onOutsideClick?: () => boolean | void;\n /**\n * Function to be executed when the content is measured.\n */\n onMeasure?: DelayedDropdownContentProps['onMeasure'];\n /**\n * Whether the dropdown should be visible.\n */\n shouldShowDropdown: boolean;\n /**\n * Whether the outside events should be captured.\n */\n shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper = forwardRef<HTMLDivElement, DropdownBodyWrapperProps>(\n (\n {\n anchorElement,\n bodyWidth,\n children,\n container: containerProp,\n contentHeight = 0,\n direction = DropdownDirection.BOTTOM_RIGHT,\n maxHeight,\n minBodyWidth = 0,\n onClose,\n onOutsideClick,\n onMeasure,\n shouldCaptureEvents = true,\n shouldShowDropdown,\n },\n ref,\n ) => {\n const isInChaynsWalletRef = useRef(false);\n\n const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const contentRef = useRef<HTMLDivElement>(null);\n const shouldPreventClickRef = useRef<boolean>(false);\n const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n const container = useContainer({ anchorElement, container: containerProp });\n\n const { transform, width, coordinates } = useDropdown({\n anchorElement,\n container,\n contentHeight,\n contentWidth: bodyWidth ?? measuredContentWidth,\n direction,\n shouldShowDropdown,\n });\n\n const handleClose = useCallback(() => {\n if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose]);\n\n /**\n * This function closes the body\n */\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n contentRef.current &&\n shouldShowDropdown &&\n !anchorElement.contains(event.target as Node) &&\n !contentRef.current.contains(event.target as Node)\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n handleClose();\n }\n }\n\n shouldPreventClickRef.current = false;\n },\n [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n );\n\n const handleContentMeasure = useCallback(\n (measurements: DropdownMeasurements) => {\n // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n // unnecessary renders, we only set the height if the content is shown in the wallet.\n if (isInChaynsWalletRef.current) {\n setMeasuredContentHeight(measurements.height);\n }\n\n setMeasuredContentWidth(measurements.width);\n\n if (typeof onMeasure === 'function') {\n onMeasure(measurements);\n }\n },\n [onMeasure],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(touchTimeoutRef.current);\n }, []);\n\n const handleTouchStart = useCallback(() => {\n touchTimeoutRef.current = window.setTimeout(() => {\n shouldPreventClickRef.current = true;\n }, 500);\n }, []);\n\n /**\n * This hook listens for clicks\n */\n useDropdownListener({\n onClick: handleClick,\n onClose: handleClose,\n onTouchEnd: handleTouchEnd,\n onTouchStart: handleTouchStart,\n shouldCaptureEvents,\n });\n\n useEffect(() => {\n const isBottomDirection = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n ContainerAnchor.RESERVATION_WRAPPER,\n );\n\n isInChaynsWalletRef.current =\n !!(\n reservationWrapperElement && reservationWrapperElement.contains(anchorElement)\n ) || true;\n\n // This effect checks if additional space is needed to show dropdown content in chayns cards.\n if (\n isBottomDirection &&\n isInChaynsWalletRef.current &&\n measuredContentHeight > 0 &&\n reservationWrapperElement &&\n shouldShowDropdown\n ) {\n const availableHeight =\n window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n // If the content height is greater than the available height, we need to add additional space.\n // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n if (additionalNeededSpace > 0) {\n // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n } else {\n // Reset the margin bottom if no additional space is needed.\n reservationWrapperElement.style.marginBottom = '0px';\n }\n }\n\n if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n // Reset the margin bottom when the dropdown is closed.\n reservationWrapperElement.style.marginBottom = '0px';\n }\n\n return () => {\n if (reservationWrapperElement) {\n reservationWrapperElement.style.marginBottom = '0px';\n }\n };\n }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n useEffect(() => {\n if (!container) return;\n\n setPortal(() =>\n createPortal(\n <DelayedDropdownContent\n coordinates={coordinates}\n onMeasure={handleContentMeasure}\n shouldShowContent={shouldShowDropdown}\n transform={transform}\n >\n <StyledDropdownBodyWrapperContent\n $width={width}\n $minWidth={minBodyWidth}\n $maxHeight={maxHeight}\n $direction={direction}\n ref={contentRef}\n className={\n typeof maxHeight === 'number' ? 'chayns-scrollbar' : undefined\n }\n tabIndex={0}\n >\n {children}\n </StyledDropdownBodyWrapperContent>\n </DelayedDropdownContent>,\n container,\n ),\n );\n }, [\n children,\n container,\n coordinates,\n direction,\n handleContentMeasure,\n maxHeight,\n minBodyWidth,\n shouldShowDropdown,\n transform,\n width,\n ]);\n\n useImperativeHandle(ref, () => contentRef.current!, []);\n\n return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n },\n);\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAUA,IAAAC,oBAAA,GAAAD,OAAA;AAIA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAC,sBAAA,CAAAL,OAAA;AAGA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA;AAAsE,SAAAK,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAb,uBAAA,YAAAA,CAAAS,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AA0DtE,MAAMgB,mBAAmB,gBAAG,IAAAC,iBAAU,EAClC,CACI;EACIC,aAAa;EACbC,SAAS;EACTC,QAAQ;EACRC,SAAS,EAAEC,aAAa;EACxBC,aAAa,GAAG,CAAC;EACjBC,SAAS,GAAGC,2BAAiB,CAACC,YAAY;EAC1CC,SAAS;EACTC,YAAY,GAAG,CAAC;EAChBC,OAAO;EACPC,cAAc;EACdC,SAAS;EACTC,mBAAmB,GAAG,IAAI;EAC1BC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAMC,mBAAmB,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EAEzC,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG,IAAAC,eAAQ,EAAS,CAAC,CAAC;EAC7E,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAG,IAAAF,eAAQ,EAAS,CAAC,CAAC;EAC3E,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAJ,eAAQ,EAAc,CAAC;EAEnD,MAAMK,UAAU,GAAG,IAAAR,aAAM,EAAiB,IAAI,CAAC;EAC/C,MAAMS,qBAAqB,GAAG,IAAAT,aAAM,EAAU,KAAK,CAAC;EACpD,MAAMU,eAAe,GAAG,IAAAV,aAAM,EAAqBW,SAAS,CAAC;EAE7D,MAAM1B,SAAS,GAAG,IAAA2B,uBAAY,EAAC;IAAE9B,aAAa;IAAEG,SAAS,EAAEC;EAAc,CAAC,CAAC;EAE3E,MAAM;IAAE2B,SAAS;IAAEC,KAAK;IAAEC;EAAY,CAAC,GAAG,IAAAC,sBAAW,EAAC;IAClDlC,aAAa;IACbG,SAAS;IACTE,aAAa;IACb8B,YAAY,EAAElC,SAAS,IAAIqB,oBAAoB;IAC/ChB,SAAS;IACTS;EACJ,CAAC,CAAC;EAEF,MAAMqB,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClC,IAAI,OAAO1B,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;;EAEb;AACR;AACA;EACQ,MAAM2B,WAAW,GAAG,IAAAD,kBAAW,EAC1BE,KAAiB,IAAK;IACnB,IACIb,UAAU,CAACc,OAAO,IAClBzB,kBAAkB,IAClB,CAACf,aAAa,CAACyC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,IAC7C,CAAChB,UAAU,CAACc,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EACpD;MACEH,KAAK,CAACI,cAAc,CAAC,CAAC;MACtBJ,KAAK,CAACK,eAAe,CAAC,CAAC;MAEvB,MAAMC,yBAAyB,GAAG,CAAAjC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAG,CAAC,KAAI,KAAK;MAE7D,IAAI,CAACe,qBAAqB,CAACa,OAAO,IAAI,CAACK,yBAAyB,EAAE;QAC9DT,WAAW,CAAC,CAAC;MACjB;IACJ;IAEAT,qBAAqB,CAACa,OAAO,GAAG,KAAK;EACzC,CAAC,EACD,CAACxC,aAAa,EAAEoC,WAAW,EAAExB,cAAc,EAAEG,kBAAkB,CACnE,CAAC;EAED,MAAM+B,oBAAoB,GAAG,IAAAT,kBAAW,EACnCU,YAAkC,IAAK;IACpC;IACA;IACA,IAAI9B,mBAAmB,CAACuB,OAAO,EAAE;MAC7BpB,wBAAwB,CAAC2B,YAAY,CAACC,MAAM,CAAC;IACjD;IAEAzB,uBAAuB,CAACwB,YAAY,CAACf,KAAK,CAAC;IAE3C,IAAI,OAAOnB,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAACkC,YAAY,CAAC;IAC3B;EACJ,CAAC,EACD,CAAClC,SAAS,CACd,CAAC;EAED,MAAMoC,cAAc,GAAG,IAAAZ,kBAAW,EAAC,MAAM;IACrCa,YAAY,CAACtB,eAAe,CAACY,OAAO,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMW,gBAAgB,GAAG,IAAAd,kBAAW,EAAC,MAAM;IACvCT,eAAe,CAACY,OAAO,GAAGY,MAAM,CAACC,UAAU,CAAC,MAAM;MAC9C1B,qBAAqB,CAACa,OAAO,GAAG,IAAI;IACxC,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,EAAE,CAAC;;EAEN;AACR;AACA;EACQ,IAAAc,8BAAmB,EAAC;IAChBC,OAAO,EAAEjB,WAAW;IACpB3B,OAAO,EAAEyB,WAAW;IACpBoB,UAAU,EAAEP,cAAc;IAC1BQ,YAAY,EAAEN,gBAAgB;IAC9BrC;EACJ,CAAC,CAAC;EAEF,IAAA4C,gBAAS,EAAC,MAAM;IACZ,MAAMC,iBAAiB,GAAG,CACtBpD,2BAAiB,CAACqD,MAAM,EACxBrD,2BAAiB,CAACsD,WAAW,EAC7BtD,2BAAiB,CAACC,YAAY,CACjC,CAACsD,QAAQ,CAACxD,SAAS,CAAC;IAErB,MAAMyD,yBAAyB,GAAG/D,aAAa,CAACgE,OAAO,CACnDC,0BAAe,CAACC,mBACpB,CAAC;IAEDjD,mBAAmB,CAACuB,OAAO,GACvB,CAAC,EACGuB,yBAAyB,IAAIA,yBAAyB,CAACtB,QAAQ,CAACzC,aAAa,CAAC,CACjF,IAAI,IAAI;;IAEb;IACA,IACI2D,iBAAiB,IACjB1C,mBAAmB,CAACuB,OAAO,IAC3BrB,qBAAqB,GAAG,CAAC,IACzB4C,yBAAyB,IACzBhD,kBAAkB,EACpB;MACE,MAAMoD,eAAe,GACjBf,MAAM,CAACgB,WAAW,GAAGpE,aAAa,CAACqE,qBAAqB,CAAC,CAAC,CAACC,MAAM;;MAErE;MACA;MACA,MAAMC,qBAAqB,GAAGpD,qBAAqB,GAAG,EAAE,GAAGgD,eAAe;MAE1E,IAAII,qBAAqB,GAAG,CAAC,EAAE;QAC3B;QACAR,yBAAyB,CAACS,KAAK,CAACC,YAAY,GAAG,GAAGF,qBAAqB,IAAI;MAC/E,CAAC,MAAM;QACH;QACAR,yBAAyB,CAACS,KAAK,CAACC,YAAY,GAAG,KAAK;MACxD;IACJ;IAEA,IAAIxD,mBAAmB,CAACuB,OAAO,IAAIuB,yBAAyB,IAAI,CAAChD,kBAAkB,EAAE;MACjF;MACAgD,yBAAyB,CAACS,KAAK,CAACC,YAAY,GAAG,KAAK;IACxD;IAEA,OAAO,MAAM;MACT,IAAIV,yBAAyB,EAAE;QAC3BA,yBAAyB,CAACS,KAAK,CAACC,YAAY,GAAG,KAAK;MACxD;IACJ,CAAC;EACL,CAAC,EAAE,CAACzE,aAAa,EAAEM,SAAS,EAAEa,qBAAqB,EAAEJ,kBAAkB,CAAC,CAAC;EAEzE,IAAA2C,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACvD,SAAS,EAAE;IAEhBsB,SAAS,CAAC,mBACN,IAAAiD,sBAAY,eACRzG,MAAA,CAAAY,OAAA,CAAA8F,aAAA,CAACpG,uBAAA,CAAAM,OAAsB;MACnBoD,WAAW,EAAEA,WAAY;MACzBpB,SAAS,EAAEiC,oBAAqB;MAChC8B,iBAAiB,EAAE7D,kBAAmB;MACtCgB,SAAS,EAAEA;IAAU,gBAErB9D,MAAA,CAAAY,OAAA,CAAA8F,aAAA,CAACvG,oBAAA,CAAAyG,gCAAgC;MAC7BC,MAAM,EAAE9C,KAAM;MACd+C,SAAS,EAAErE,YAAa;MACxBsE,UAAU,EAAEvE,SAAU;MACtBwE,UAAU,EAAE3E,SAAU;MACtBU,GAAG,EAAEU,UAAW;MAChBwD,SAAS,EACL,OAAOzE,SAAS,KAAK,QAAQ,GAAG,kBAAkB,GAAGoB,SACxD;MACDsD,QAAQ,EAAE;IAAE,GAEXjF,QAC6B,CACd,CAAC,EACzBC,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCD,QAAQ,EACRC,SAAS,EACT8B,WAAW,EACX3B,SAAS,EACTwC,oBAAoB,EACpBrC,SAAS,EACTC,YAAY,EACZK,kBAAkB,EAClBgB,SAAS,EACTC,KAAK,CACR,CAAC;EAEF,IAAAoD,0BAAmB,EAACpE,GAAG,EAAE,MAAMU,UAAU,CAACc,OAAQ,EAAE,EAAE,CAAC;EAEvD,oBAAOvE,MAAA,CAAAY,OAAA,CAAA8F,aAAA,CAACvG,oBAAA,CAAAiH,yBAAyB,QAAE7D,MAAkC,CAAC;AAC1E,CACJ,CAAC;AAED1B,mBAAmB,CAACwF,WAAW,GAAG,qBAAqB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3G,OAAA,GAEzCiB,mBAAmB","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","forwardRef","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","DropdownDirection","BOTTOM_RIGHT","maxHeight","minBodyWidth","onAvailableMaxHeightChange","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","availableMaxHeight","useDropdown","contentWidth","useEffect","handleClose","useCallback","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","className","tabIndex","useImperativeHandle","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledDropdownBodyWrapper,\n StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n /**\n * The anchor element of the dropdown.\n */\n anchorElement: Element;\n /**\n * The width of the Body.\n */\n bodyWidth?: number;\n /**\n * The content of the dropdown body.\n */\n children: ReactNode;\n /**\n * The element where the content should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The height of the content\n */\n contentHeight?: number;\n /**\n * The direction of the dropdown.\n */\n direction?: DropdownDirection;\n /**\n * The max height of the dropdown.\n */\n maxHeight?: number;\n /**\n * The minimum width of the body.\n */\n minBodyWidth?: number;\n /**\n * Function to be executed when the available maximum height of the dropdown changes. The\n * available maximum height is the space that is available for the dropdown content until the\n * edge of the container is reached (minus a small spacing). This can be used to limit the\n * content height, so the dropdown is not cut off when there is not enough space.\n */\n onAvailableMaxHeightChange?: (availableMaxHeight: number) => void;\n /**\n * Function to be executed when the body is closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the user clicks outside the dropdown.\n * If the function returns `true`, the dropdown will not be closed.\n */\n onOutsideClick?: () => boolean | void;\n /**\n * Function to be executed when the content is measured.\n */\n onMeasure?: DelayedDropdownContentProps['onMeasure'];\n /**\n * Whether the dropdown should be visible.\n */\n shouldShowDropdown: boolean;\n /**\n * Whether the outside events should be captured.\n */\n shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper = forwardRef<HTMLDivElement, DropdownBodyWrapperProps>(\n (\n {\n anchorElement,\n bodyWidth,\n children,\n container: containerProp,\n contentHeight = 0,\n direction = DropdownDirection.BOTTOM_RIGHT,\n maxHeight,\n minBodyWidth = 0,\n onAvailableMaxHeightChange,\n onClose,\n onOutsideClick,\n onMeasure,\n shouldCaptureEvents = true,\n shouldShowDropdown,\n },\n ref,\n ) => {\n const isInChaynsWalletRef = useRef(false);\n\n const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const contentRef = useRef<HTMLDivElement>(null);\n const shouldPreventClickRef = useRef<boolean>(false);\n const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n const container = useContainer({ anchorElement, container: containerProp });\n\n const { transform, width, coordinates, availableMaxHeight } = useDropdown({\n anchorElement,\n container,\n contentHeight,\n contentWidth: bodyWidth ?? measuredContentWidth,\n direction,\n shouldShowDropdown,\n });\n\n useEffect(() => {\n if (typeof onAvailableMaxHeightChange === 'function') {\n onAvailableMaxHeightChange(availableMaxHeight);\n }\n }, [availableMaxHeight, onAvailableMaxHeightChange]);\n\n const handleClose = useCallback(() => {\n if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose]);\n\n /**\n * This function closes the body\n */\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n contentRef.current &&\n shouldShowDropdown &&\n !anchorElement.contains(event.target as Node) &&\n !contentRef.current.contains(event.target as Node)\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n handleClose();\n }\n }\n\n shouldPreventClickRef.current = false;\n },\n [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n );\n\n const handleContentMeasure = useCallback(\n (measurements: DropdownMeasurements) => {\n // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n // unnecessary renders, we only set the height if the content is shown in the wallet.\n if (isInChaynsWalletRef.current) {\n setMeasuredContentHeight(measurements.height);\n }\n\n setMeasuredContentWidth(measurements.width);\n\n if (typeof onMeasure === 'function') {\n onMeasure(measurements);\n }\n },\n [onMeasure],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(touchTimeoutRef.current);\n }, []);\n\n const handleTouchStart = useCallback(() => {\n touchTimeoutRef.current = window.setTimeout(() => {\n shouldPreventClickRef.current = true;\n }, 500);\n }, []);\n\n /**\n * This hook listens for clicks\n */\n useDropdownListener({\n onClick: handleClick,\n onClose: handleClose,\n onTouchEnd: handleTouchEnd,\n onTouchStart: handleTouchStart,\n shouldCaptureEvents,\n });\n\n useEffect(() => {\n const isBottomDirection = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n ContainerAnchor.RESERVATION_WRAPPER,\n );\n\n isInChaynsWalletRef.current =\n !!(\n reservationWrapperElement && reservationWrapperElement.contains(anchorElement)\n ) || true;\n\n // This effect checks if additional space is needed to show dropdown content in chayns cards.\n if (\n isBottomDirection &&\n isInChaynsWalletRef.current &&\n measuredContentHeight > 0 &&\n reservationWrapperElement &&\n shouldShowDropdown\n ) {\n const availableHeight =\n window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n // If the content height is greater than the available height, we need to add additional space.\n // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n if (additionalNeededSpace > 0) {\n // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n } else {\n // Reset the margin bottom if no additional space is needed.\n reservationWrapperElement.style.marginBottom = '0px';\n }\n }\n\n if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n // Reset the margin bottom when the dropdown is closed.\n reservationWrapperElement.style.marginBottom = '0px';\n }\n\n return () => {\n if (reservationWrapperElement) {\n reservationWrapperElement.style.marginBottom = '0px';\n }\n };\n }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n useEffect(() => {\n if (!container) return;\n\n setPortal(() =>\n createPortal(\n <DelayedDropdownContent\n coordinates={coordinates}\n onMeasure={handleContentMeasure}\n shouldShowContent={shouldShowDropdown}\n transform={transform}\n >\n <StyledDropdownBodyWrapperContent\n $width={width}\n $minWidth={minBodyWidth}\n $maxHeight={maxHeight}\n $direction={direction}\n ref={contentRef}\n className={\n typeof maxHeight === 'number' ? 'chayns-scrollbar' : undefined\n }\n tabIndex={0}\n >\n {children}\n </StyledDropdownBodyWrapperContent>\n </DelayedDropdownContent>,\n container,\n ),\n );\n }, [\n children,\n container,\n coordinates,\n direction,\n handleContentMeasure,\n maxHeight,\n minBodyWidth,\n shouldShowDropdown,\n transform,\n width,\n ]);\n\n useImperativeHandle(ref, () => contentRef.current!, []);\n\n return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n },\n);\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -58,6 +58,11 @@ const useDropdownAlignment = ({
|
|
|
58
58
|
}), [translateX, translateY]);
|
|
59
59
|
};
|
|
60
60
|
exports.useDropdownAlignment = useDropdownAlignment;
|
|
61
|
+
/**
|
|
62
|
+
* The space (in pixels) that should be kept between the dropdown content and the edge of the
|
|
63
|
+
* container when calculating the available maximum height.
|
|
64
|
+
*/
|
|
65
|
+
const AVAILABLE_HEIGHT_SPACING = 16;
|
|
61
66
|
const useDropdownPosition = ({
|
|
62
67
|
anchorElement,
|
|
63
68
|
container,
|
|
@@ -70,6 +75,7 @@ const useDropdownPosition = ({
|
|
|
70
75
|
y: 0
|
|
71
76
|
});
|
|
72
77
|
const [shouldUseTopAlignment, setShouldUseTopAlignment] = (0, _react.useState)(false);
|
|
78
|
+
const [availableMaxHeight, setAvailableMaxHeight] = (0, _react.useState)(0);
|
|
73
79
|
const calculateCoordinates = (0, _react.useCallback)(() => {
|
|
74
80
|
if (container) {
|
|
75
81
|
const {
|
|
@@ -92,6 +98,16 @@ const useDropdownPosition = ({
|
|
|
92
98
|
} else {
|
|
93
99
|
setShouldUseTopAlignment(false);
|
|
94
100
|
}
|
|
101
|
+
|
|
102
|
+
// Calculate the space that is available for the dropdown content. When the dropdown is
|
|
103
|
+
// opened to the top, the available space reaches from the anchor to the top edge of the
|
|
104
|
+
// container. When it is opened to the bottom, it reaches from the bottom of the anchor
|
|
105
|
+
// to the bottom edge of the container. A small spacing is subtracted so the content does
|
|
106
|
+
// not touch the container edge (e.g. to leave room for shadows).
|
|
107
|
+
const spaceToTop = y;
|
|
108
|
+
const spaceToBottom = height - (y + anchorHeight);
|
|
109
|
+
const nextAvailableMaxHeight = Math.max((useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING, 0);
|
|
110
|
+
setAvailableMaxHeight(nextAvailableMaxHeight);
|
|
95
111
|
setCoordinates({
|
|
96
112
|
x,
|
|
97
113
|
y: useTopAlignment ? y : y + anchorHeight
|
|
@@ -113,8 +129,9 @@ const useDropdownPosition = ({
|
|
|
113
129
|
}, [calculateCoordinates, shouldShowDropdown]);
|
|
114
130
|
return (0, _react.useMemo)(() => ({
|
|
115
131
|
shouldUseTopAlignment,
|
|
116
|
-
coordinates
|
|
117
|
-
|
|
132
|
+
coordinates,
|
|
133
|
+
availableMaxHeight
|
|
134
|
+
}), [availableMaxHeight, coordinates, shouldUseTopAlignment]);
|
|
118
135
|
};
|
|
119
136
|
exports.useDropdownPosition = useDropdownPosition;
|
|
120
137
|
const useDropdown = ({
|
|
@@ -127,7 +144,8 @@ const useDropdown = ({
|
|
|
127
144
|
}) => {
|
|
128
145
|
const {
|
|
129
146
|
shouldUseTopAlignment,
|
|
130
|
-
coordinates
|
|
147
|
+
coordinates,
|
|
148
|
+
availableMaxHeight
|
|
131
149
|
} = useDropdownPosition({
|
|
132
150
|
anchorElement,
|
|
133
151
|
container,
|
|
@@ -145,8 +163,9 @@ const useDropdown = ({
|
|
|
145
163
|
return (0, _react.useMemo)(() => ({
|
|
146
164
|
coordinates,
|
|
147
165
|
transform,
|
|
148
|
-
width
|
|
149
|
-
|
|
166
|
+
width,
|
|
167
|
+
availableMaxHeight
|
|
168
|
+
}), [availableMaxHeight, coordinates, transform, width]);
|
|
150
169
|
};
|
|
151
170
|
exports.useDropdown = useDropdown;
|
|
152
171
|
//# sourceMappingURL=dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","exports","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","useState","translateY","setTranslateY","DropdownDirection","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","useMemo","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","useCallback","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n onClick: (event: MouseEvent) => void;\n onClose: () => void;\n onTouchEnd: (event: TouchEvent) => void;\n onTouchStart: (event: TouchEvent) => void;\n shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick, shouldCaptureEvents);\n document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.addEventListener('blur', onClose);\n\n return () => {\n document.removeEventListener('click', onClick, shouldCaptureEvents);\n document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.removeEventListener('blur', onClose);\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n contentWidth: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n const [translateX, setTranslateX] = useState<string>('0px');\n const [translateY, setTranslateY] = useState<string>('0px');\n\n useEffect(() => {\n if (\n [\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.LEFT,\n ].includes(direction)\n ) {\n const difference = anchorElement.clientWidth - contentWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, contentWidth, direction]);\n\n useEffect(() => {\n const useTopAlignment =\n shouldUseTopAlignment ||\n [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n if (useTopAlignment) {\n setTranslateY('-100%');\n } else {\n setTranslateY('0px');\n }\n }, [direction, shouldUseTopAlignment]);\n\n return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n anchorElement,\n container,\n contentHeight = 0,\n direction,\n shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n const calculateCoordinates = useCallback(() => {\n if (container) {\n const {\n left: anchorLeft,\n top: anchorTop,\n height: anchorHeight,\n } = anchorElement.getBoundingClientRect();\n\n const { left, top, height } = container.getBoundingClientRect();\n\n const x = anchorLeft - left + container.scrollLeft;\n const y = anchorTop - top + container.scrollTop;\n\n let useTopAlignment = [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n const hasBottomAlignment = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n useTopAlignment = true;\n\n setShouldUseTopAlignment(true);\n } else {\n setShouldUseTopAlignment(false);\n }\n\n setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n }\n }, [anchorElement, container, contentHeight, direction]);\n\n useIsomorphicLayoutEffect(() => {\n const handleResize = () => {\n calculateCoordinates();\n\n setTimeout(calculateCoordinates, 300);\n };\n\n handleResize();\n\n if (shouldShowDropdown) {\n window.addEventListener('resize', handleResize);\n }\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [calculateCoordinates, shouldShowDropdown]);\n\n return useMemo(\n () => ({ shouldUseTopAlignment, coordinates }),\n [coordinates, shouldUseTopAlignment],\n );\n};\n\ninterface UseDropdownOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n contentWidth: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n container,\n contentHeight,\n contentWidth,\n direction,\n shouldShowDropdown,\n}: UseDropdownOptions) => {\n const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n anchorElement,\n container,\n contentHeight,\n direction,\n shouldShowDropdown,\n });\n\n const transform = useDropdownAlignment({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n });\n\n const width = anchorElement.clientWidth;\n\n return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","exports","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","useState","translateY","setTranslateY","DropdownDirection","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","useMemo","x","y","AVAILABLE_HEIGHT_SPACING","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","availableMaxHeight","setAvailableMaxHeight","calculateCoordinates","useCallback","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","spaceToTop","spaceToBottom","nextAvailableMaxHeight","Math","max","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n onClick: (event: MouseEvent) => void;\n onClose: () => void;\n onTouchEnd: (event: TouchEvent) => void;\n onTouchStart: (event: TouchEvent) => void;\n shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick, shouldCaptureEvents);\n document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.addEventListener('blur', onClose);\n\n return () => {\n document.removeEventListener('click', onClick, shouldCaptureEvents);\n document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.removeEventListener('blur', onClose);\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n contentWidth: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n const [translateX, setTranslateX] = useState<string>('0px');\n const [translateY, setTranslateY] = useState<string>('0px');\n\n useEffect(() => {\n if (\n [\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.LEFT,\n ].includes(direction)\n ) {\n const difference = anchorElement.clientWidth - contentWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, contentWidth, direction]);\n\n useEffect(() => {\n const useTopAlignment =\n shouldUseTopAlignment ||\n [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n if (useTopAlignment) {\n setTranslateY('-100%');\n } else {\n setTranslateY('0px');\n }\n }, [direction, shouldUseTopAlignment]);\n\n return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\n/**\n * The space (in pixels) that should be kept between the dropdown content and the edge of the\n * container when calculating the available maximum height.\n */\nconst AVAILABLE_HEIGHT_SPACING = 16;\n\nexport const useDropdownPosition = ({\n anchorElement,\n container,\n contentHeight = 0,\n direction,\n shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n const [availableMaxHeight, setAvailableMaxHeight] = useState<number>(0);\n\n const calculateCoordinates = useCallback(() => {\n if (container) {\n const {\n left: anchorLeft,\n top: anchorTop,\n height: anchorHeight,\n } = anchorElement.getBoundingClientRect();\n\n const { left, top, height } = container.getBoundingClientRect();\n\n const x = anchorLeft - left + container.scrollLeft;\n const y = anchorTop - top + container.scrollTop;\n\n let useTopAlignment = [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n const hasBottomAlignment = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n useTopAlignment = true;\n\n setShouldUseTopAlignment(true);\n } else {\n setShouldUseTopAlignment(false);\n }\n\n // Calculate the space that is available for the dropdown content. When the dropdown is\n // opened to the top, the available space reaches from the anchor to the top edge of the\n // container. When it is opened to the bottom, it reaches from the bottom of the anchor\n // to the bottom edge of the container. A small spacing is subtracted so the content does\n // not touch the container edge (e.g. to leave room for shadows).\n const spaceToTop = y;\n const spaceToBottom = height - (y + anchorHeight);\n\n const nextAvailableMaxHeight = Math.max(\n (useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING,\n 0,\n );\n\n setAvailableMaxHeight(nextAvailableMaxHeight);\n\n setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n }\n }, [anchorElement, container, contentHeight, direction]);\n\n useIsomorphicLayoutEffect(() => {\n const handleResize = () => {\n calculateCoordinates();\n\n setTimeout(calculateCoordinates, 300);\n };\n\n handleResize();\n\n if (shouldShowDropdown) {\n window.addEventListener('resize', handleResize);\n }\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [calculateCoordinates, shouldShowDropdown]);\n\n return useMemo(\n () => ({ shouldUseTopAlignment, coordinates, availableMaxHeight }),\n [availableMaxHeight, coordinates, shouldUseTopAlignment],\n );\n};\n\ninterface UseDropdownOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n contentWidth: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n container,\n contentHeight,\n contentWidth,\n direction,\n shouldShowDropdown,\n}: UseDropdownOptions) => {\n const { shouldUseTopAlignment, coordinates, availableMaxHeight } = useDropdownPosition({\n anchorElement,\n container,\n contentHeight,\n direction,\n shouldShowDropdown,\n });\n\n const transform = useDropdownAlignment({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n });\n\n const width = anchorElement.clientWidth;\n\n return useMemo(\n () => ({ coordinates, transform, width, availableMaxHeight }),\n [availableMaxHeight, coordinates, transform, width],\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -43,6 +43,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
|
|
|
43
43
|
const [minWidth, setMinWidth] = useState(undefined);
|
|
44
44
|
const [bodyMinWidth, setBodyMinWidth] = useState(0);
|
|
45
45
|
const [focusedIndex, setFocusedIndex] = useState(null);
|
|
46
|
+
const [availableMaxHeight, setAvailableMaxHeight] = useState(undefined);
|
|
46
47
|
const isInputFocused = useRef(false);
|
|
47
48
|
const styledComboBoxElementRef = useRef(null);
|
|
48
49
|
const contentRef = useRef(null);
|
|
@@ -87,6 +88,16 @@ const ComboBox = /*#__PURE__*/forwardRef(({
|
|
|
87
88
|
const combinedLists = lists.flatMap(list => list.list);
|
|
88
89
|
return combinedLists.length === 1 && combinedLists.some(item => item.value === selectedItem.value);
|
|
89
90
|
}, [lists, selectedItem]);
|
|
91
|
+
|
|
92
|
+
// Limits the configured maxHeight by the height that is actually available inside the
|
|
93
|
+
// container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut
|
|
94
|
+
// off when it is opened to the top or bottom and there is not enough space.
|
|
95
|
+
const effectiveMaxHeight = useMemo(() => {
|
|
96
|
+
if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {
|
|
97
|
+
return Math.min(maxHeight, availableMaxHeight);
|
|
98
|
+
}
|
|
99
|
+
return maxHeight;
|
|
100
|
+
}, [availableMaxHeight, maxHeight]);
|
|
90
101
|
const contentHeight = useMemo(() => {
|
|
91
102
|
const flatItems = lists.flatMap(list => list.list);
|
|
92
103
|
let height = flatItems.reduce((value, item) => {
|
|
@@ -96,11 +107,11 @@ const ComboBox = /*#__PURE__*/forwardRef(({
|
|
|
96
107
|
if (lists.length > 1) {
|
|
97
108
|
height += lists.length * 38;
|
|
98
109
|
}
|
|
99
|
-
if (
|
|
100
|
-
height =
|
|
110
|
+
if (effectiveMaxHeight < height) {
|
|
111
|
+
height = effectiveMaxHeight;
|
|
101
112
|
}
|
|
102
113
|
return height;
|
|
103
|
-
}, [
|
|
114
|
+
}, [effectiveMaxHeight, lists, shouldShowBigImage]);
|
|
104
115
|
const handleInputFocus = useCallback(event => {
|
|
105
116
|
isInputFocused.current = true;
|
|
106
117
|
onInputFocus?.(event);
|
|
@@ -319,18 +330,19 @@ const ComboBox = /*#__PURE__*/forwardRef(({
|
|
|
319
330
|
bodyWidth: bodyWidth,
|
|
320
331
|
contentHeight: contentHeight,
|
|
321
332
|
shouldCaptureEvents: shouldCaptureEvents,
|
|
333
|
+
onAvailableMaxHeightChange: setAvailableMaxHeight,
|
|
322
334
|
onClose: handleClose,
|
|
323
335
|
direction: direction,
|
|
324
336
|
container: container,
|
|
325
337
|
shouldShowDropdown: isAnimating,
|
|
326
338
|
minBodyWidth: bodyWidth ?? bodyMinWidth
|
|
327
339
|
}, /*#__PURE__*/React.createElement(StyledComboBoxBody, {
|
|
328
|
-
$maxHeight:
|
|
340
|
+
$maxHeight: effectiveMaxHeight,
|
|
329
341
|
$minWidth: bodyWidth ?? bodyMinWidth,
|
|
330
342
|
className: "chayns-scrollbar",
|
|
331
343
|
ref: contentRef,
|
|
332
344
|
tabIndex: 0
|
|
333
|
-
}, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch,
|
|
345
|
+
}, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, effectiveMaxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
|
|
334
346
|
});
|
|
335
347
|
ComboBox.displayName = 'ComboBox';
|
|
336
348
|
export default ComboBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","names":["useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","getComboBoxWidthResult","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","className","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n FocusEventHandler,\n forwardRef,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxBody,\n StyledComboBoxClearIconWrapper,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n (\n {\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n shouldCaptureEvents,\n selectedItem,\n onHide,\n onShow,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n prefixMinWidth,\n size = ComboBoxSize.NORMAL,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n shouldShowTransparentBackground = false,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n },\n ref,\n ) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n const isInputFocused = useRef(false);\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, {\n shouldUseParentElement: true,\n });\n\n const functions = useFunctions();\n const values = useValues();\n const isTouch = useIsTouch();\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (!parentSize) {\n return;\n }\n\n const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n getComboBoxWidthResult({\n functions,\n internalSelectedItem,\n lists,\n parentWidth: parentSize.width,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n });\n\n setMinWidth(calculatedMinWidth);\n setBodyMinWidth(calculatedBodyMinWidth);\n }, [\n functions,\n internalSelectedItem,\n lists,\n parentSize,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n ]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let height = flatItems.reduce((value, item) => {\n const isBigItem =\n shouldShowBigImage ||\n (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n return value + (isBigItem ? 56 : 38);\n }, 0);\n\n if (lists.length > 1) {\n height += lists.length * 38;\n }\n\n if (maxHeight < height) {\n height = maxHeight;\n }\n\n return height;\n }, [lists, maxHeight, shouldShowBigImage]);\n\n const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = true;\n onInputFocus?.(event);\n },\n [onInputFocus],\n );\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = false;\n onInputBlur?.(event);\n },\n [onInputBlur],\n );\n\n const handleOpen = useCallback(() => {\n if (typeof onShow === 'function') {\n onShow();\n }\n\n setIsAnimating(true);\n }, [onShow]);\n\n const handleClose = useCallback(() => {\n if (typeof onHide === 'function') {\n onHide();\n }\n\n setIsAnimating(false);\n }, [onHide]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect?: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const onSelectResult = onSelect(itemToSelect);\n\n if (onSelectResult === false) {\n return;\n }\n\n if (onSelectResult instanceof Promise) {\n void onSelectResult.then((shouldPreventSelection) => {\n if (shouldPreventSelection) return;\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n },\n [handleClose, onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children || children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') ||\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n const shouldShowRoundPlaceholderImage = useMemo(() => {\n const selectedItemList = lists.find((list) =>\n list.list.some(\n ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n ),\n );\n\n return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled && !isInputFocused.current) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleClose,\n show: handleOpen,\n }),\n [handleClose, handleOpen],\n );\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <Fragment key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n {list.groupName}\n </StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n <ComboBoxItem\n key={`item-${item.text}`}\n item={item}\n isSelected={\n selectedItem ? item.value === selectedItem.value : false\n }\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={\n list.shouldShowRoundImage ?? shouldShowRoundImage\n }\n />\n ))}\n </Fragment>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $size={size}\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper\n $isDisabled={isDisabled}\n onClick={handleClear}\n >\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $isDisabled={isDisabled}\n $size={size}\n $shouldShowBorderLeft={\n shouldShowClearIcon === true &&\n internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n shouldCaptureEvents={shouldCaptureEvents}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n >\n <StyledComboBoxBody\n $maxHeight={maxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n className=\"chayns-scrollbar\"\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n bodyMinWidth,\n bodyWidth,\n comboBoxGroups,\n container,\n contentHeight,\n direction,\n handleClear,\n handleClose,\n handleHeaderClick,\n handleInputBlur,\n handleInputFocus,\n inputValue,\n internalSelectedItem,\n isAnimating,\n isDisabled,\n isTouch,\n maxHeight,\n minWidth,\n onInputChange,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldChangeColor,\n shouldDisableActions,\n shouldCaptureEvents,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundPlaceholderImage,\n shouldShowTransparentBackground,\n shouldUseFullWidth,\n size,\n ],\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":["useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","getComboBoxWidthResult","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","availableMaxHeight","setAvailableMaxHeight","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onAvailableMaxHeightChange","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","className","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n FocusEventHandler,\n forwardRef,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxBody,\n StyledComboBoxClearIconWrapper,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n (\n {\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n shouldCaptureEvents,\n selectedItem,\n onHide,\n onShow,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n prefixMinWidth,\n size = ComboBoxSize.NORMAL,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n shouldShowTransparentBackground = false,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n },\n ref,\n ) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\n\n const isInputFocused = useRef(false);\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, {\n shouldUseParentElement: true,\n });\n\n const functions = useFunctions();\n const values = useValues();\n const isTouch = useIsTouch();\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (!parentSize) {\n return;\n }\n\n const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n getComboBoxWidthResult({\n functions,\n internalSelectedItem,\n lists,\n parentWidth: parentSize.width,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n });\n\n setMinWidth(calculatedMinWidth);\n setBodyMinWidth(calculatedBodyMinWidth);\n }, [\n functions,\n internalSelectedItem,\n lists,\n parentSize,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n ]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n // Limits the configured maxHeight by the height that is actually available inside the\n // container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut\n // off when it is opened to the top or bottom and there is not enough space.\n const effectiveMaxHeight = useMemo(() => {\n if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {\n return Math.min(maxHeight, availableMaxHeight);\n }\n\n return maxHeight;\n }, [availableMaxHeight, maxHeight]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let height = flatItems.reduce((value, item) => {\n const isBigItem =\n shouldShowBigImage ||\n (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n return value + (isBigItem ? 56 : 38);\n }, 0);\n\n if (lists.length > 1) {\n height += lists.length * 38;\n }\n\n if (effectiveMaxHeight < height) {\n height = effectiveMaxHeight;\n }\n\n return height;\n }, [effectiveMaxHeight, lists, shouldShowBigImage]);\n\n const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = true;\n onInputFocus?.(event);\n },\n [onInputFocus],\n );\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = false;\n onInputBlur?.(event);\n },\n [onInputBlur],\n );\n\n const handleOpen = useCallback(() => {\n if (typeof onShow === 'function') {\n onShow();\n }\n\n setIsAnimating(true);\n }, [onShow]);\n\n const handleClose = useCallback(() => {\n if (typeof onHide === 'function') {\n onHide();\n }\n\n setIsAnimating(false);\n }, [onHide]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect?: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const onSelectResult = onSelect(itemToSelect);\n\n if (onSelectResult === false) {\n return;\n }\n\n if (onSelectResult instanceof Promise) {\n void onSelectResult.then((shouldPreventSelection) => {\n if (shouldPreventSelection) return;\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n },\n [handleClose, onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children || children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') ||\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n const shouldShowRoundPlaceholderImage = useMemo(() => {\n const selectedItemList = lists.find((list) =>\n list.list.some(\n ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n ),\n );\n\n return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled && !isInputFocused.current) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleClose,\n show: handleOpen,\n }),\n [handleClose, handleOpen],\n );\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <Fragment key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n {list.groupName}\n </StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n <ComboBoxItem\n key={`item-${item.text}`}\n item={item}\n isSelected={\n selectedItem ? item.value === selectedItem.value : false\n }\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={\n list.shouldShowRoundImage ?? shouldShowRoundImage\n }\n />\n ))}\n </Fragment>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $size={size}\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper\n $isDisabled={isDisabled}\n onClick={handleClear}\n >\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $isDisabled={isDisabled}\n $size={size}\n $shouldShowBorderLeft={\n shouldShowClearIcon === true &&\n internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n shouldCaptureEvents={shouldCaptureEvents}\n onAvailableMaxHeightChange={setAvailableMaxHeight}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n >\n <StyledComboBoxBody\n $maxHeight={effectiveMaxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n className=\"chayns-scrollbar\"\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n bodyMinWidth,\n bodyWidth,\n comboBoxGroups,\n container,\n contentHeight,\n direction,\n handleClear,\n handleClose,\n handleHeaderClick,\n handleInputBlur,\n handleInputFocus,\n inputValue,\n internalSelectedItem,\n isAnimating,\n isDisabled,\n isTouch,\n effectiveMaxHeight,\n minWidth,\n onInputChange,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldChangeColor,\n shouldDisableActions,\n shouldCaptureEvents,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundPlaceholderImage,\n shouldShowTransparentBackground,\n shouldUseFullWidth,\n size,\n ],\n );\n },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -14,6 +14,7 @@ const DropdownBodyWrapper = /*#__PURE__*/forwardRef(({
|
|
|
14
14
|
direction = DropdownDirection.BOTTOM_RIGHT,
|
|
15
15
|
maxHeight,
|
|
16
16
|
minBodyWidth = 0,
|
|
17
|
+
onAvailableMaxHeightChange,
|
|
17
18
|
onClose,
|
|
18
19
|
onOutsideClick,
|
|
19
20
|
onMeasure,
|
|
@@ -34,7 +35,8 @@ const DropdownBodyWrapper = /*#__PURE__*/forwardRef(({
|
|
|
34
35
|
const {
|
|
35
36
|
transform,
|
|
36
37
|
width,
|
|
37
|
-
coordinates
|
|
38
|
+
coordinates,
|
|
39
|
+
availableMaxHeight
|
|
38
40
|
} = useDropdown({
|
|
39
41
|
anchorElement,
|
|
40
42
|
container,
|
|
@@ -43,6 +45,11 @@ const DropdownBodyWrapper = /*#__PURE__*/forwardRef(({
|
|
|
43
45
|
direction,
|
|
44
46
|
shouldShowDropdown
|
|
45
47
|
});
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
if (typeof onAvailableMaxHeightChange === 'function') {
|
|
50
|
+
onAvailableMaxHeightChange(availableMaxHeight);
|
|
51
|
+
}
|
|
52
|
+
}, [availableMaxHeight, onAvailableMaxHeightChange]);
|
|
46
53
|
const handleClose = useCallback(() => {
|
|
47
54
|
if (typeof onClose === 'function') {
|
|
48
55
|
onClose();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownBodyWrapper.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","className","tabIndex","displayName"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledDropdownBodyWrapper,\n StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n /**\n * The anchor element of the dropdown.\n */\n anchorElement: Element;\n /**\n * The width of the Body.\n */\n bodyWidth?: number;\n /**\n * The content of the dropdown body.\n */\n children: ReactNode;\n /**\n * The element where the content should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The height of the content\n */\n contentHeight?: number;\n /**\n * The direction of the dropdown.\n */\n direction?: DropdownDirection;\n /**\n * The max height of the dropdown.\n */\n maxHeight?: number;\n /**\n * The minimum width of the body.\n */\n minBodyWidth?: number;\n /**\n * Function to be executed when the body is closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the user clicks outside the dropdown.\n * If the function returns `true`, the dropdown will not be closed.\n */\n onOutsideClick?: () => boolean | void;\n /**\n * Function to be executed when the content is measured.\n */\n onMeasure?: DelayedDropdownContentProps['onMeasure'];\n /**\n * Whether the dropdown should be visible.\n */\n shouldShowDropdown: boolean;\n /**\n * Whether the outside events should be captured.\n */\n shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper = forwardRef<HTMLDivElement, DropdownBodyWrapperProps>(\n (\n {\n anchorElement,\n bodyWidth,\n children,\n container: containerProp,\n contentHeight = 0,\n direction = DropdownDirection.BOTTOM_RIGHT,\n maxHeight,\n minBodyWidth = 0,\n onClose,\n onOutsideClick,\n onMeasure,\n shouldCaptureEvents = true,\n shouldShowDropdown,\n },\n ref,\n ) => {\n const isInChaynsWalletRef = useRef(false);\n\n const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const contentRef = useRef<HTMLDivElement>(null);\n const shouldPreventClickRef = useRef<boolean>(false);\n const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n const container = useContainer({ anchorElement, container: containerProp });\n\n const { transform, width, coordinates } = useDropdown({\n anchorElement,\n container,\n contentHeight,\n contentWidth: bodyWidth ?? measuredContentWidth,\n direction,\n shouldShowDropdown,\n });\n\n const handleClose = useCallback(() => {\n if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose]);\n\n /**\n * This function closes the body\n */\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n contentRef.current &&\n shouldShowDropdown &&\n !anchorElement.contains(event.target as Node) &&\n !contentRef.current.contains(event.target as Node)\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n handleClose();\n }\n }\n\n shouldPreventClickRef.current = false;\n },\n [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n );\n\n const handleContentMeasure = useCallback(\n (measurements: DropdownMeasurements) => {\n // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n // unnecessary renders, we only set the height if the content is shown in the wallet.\n if (isInChaynsWalletRef.current) {\n setMeasuredContentHeight(measurements.height);\n }\n\n setMeasuredContentWidth(measurements.width);\n\n if (typeof onMeasure === 'function') {\n onMeasure(measurements);\n }\n },\n [onMeasure],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(touchTimeoutRef.current);\n }, []);\n\n const handleTouchStart = useCallback(() => {\n touchTimeoutRef.current = window.setTimeout(() => {\n shouldPreventClickRef.current = true;\n }, 500);\n }, []);\n\n /**\n * This hook listens for clicks\n */\n useDropdownListener({\n onClick: handleClick,\n onClose: handleClose,\n onTouchEnd: handleTouchEnd,\n onTouchStart: handleTouchStart,\n shouldCaptureEvents,\n });\n\n useEffect(() => {\n const isBottomDirection = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n ContainerAnchor.RESERVATION_WRAPPER,\n );\n\n isInChaynsWalletRef.current =\n !!(\n reservationWrapperElement && reservationWrapperElement.contains(anchorElement)\n ) || true;\n\n // This effect checks if additional space is needed to show dropdown content in chayns cards.\n if (\n isBottomDirection &&\n isInChaynsWalletRef.current &&\n measuredContentHeight > 0 &&\n reservationWrapperElement &&\n shouldShowDropdown\n ) {\n const availableHeight =\n window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n // If the content height is greater than the available height, we need to add additional space.\n // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n if (additionalNeededSpace > 0) {\n // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n } else {\n // Reset the margin bottom if no additional space is needed.\n reservationWrapperElement.style.marginBottom = '0px';\n }\n }\n\n if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n // Reset the margin bottom when the dropdown is closed.\n reservationWrapperElement.style.marginBottom = '0px';\n }\n\n return () => {\n if (reservationWrapperElement) {\n reservationWrapperElement.style.marginBottom = '0px';\n }\n };\n }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n useEffect(() => {\n if (!container) return;\n\n setPortal(() =>\n createPortal(\n <DelayedDropdownContent\n coordinates={coordinates}\n onMeasure={handleContentMeasure}\n shouldShowContent={shouldShowDropdown}\n transform={transform}\n >\n <StyledDropdownBodyWrapperContent\n $width={width}\n $minWidth={minBodyWidth}\n $maxHeight={maxHeight}\n $direction={direction}\n ref={contentRef}\n className={\n typeof maxHeight === 'number' ? 'chayns-scrollbar' : undefined\n }\n tabIndex={0}\n >\n {children}\n </StyledDropdownBodyWrapperContent>\n </DelayedDropdownContent>,\n container,\n ),\n );\n }, [\n children,\n container,\n coordinates,\n direction,\n handleContentMeasure,\n maxHeight,\n minBodyWidth,\n shouldShowDropdown,\n transform,\n width,\n ]);\n\n useImperativeHandle(ref, () => contentRef.current!, []);\n\n return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n },\n);\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"DropdownBodyWrapper.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onAvailableMaxHeightChange","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","availableMaxHeight","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","className","tabIndex","displayName"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledDropdownBodyWrapper,\n StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n /**\n * The anchor element of the dropdown.\n */\n anchorElement: Element;\n /**\n * The width of the Body.\n */\n bodyWidth?: number;\n /**\n * The content of the dropdown body.\n */\n children: ReactNode;\n /**\n * The element where the content should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The height of the content\n */\n contentHeight?: number;\n /**\n * The direction of the dropdown.\n */\n direction?: DropdownDirection;\n /**\n * The max height of the dropdown.\n */\n maxHeight?: number;\n /**\n * The minimum width of the body.\n */\n minBodyWidth?: number;\n /**\n * Function to be executed when the available maximum height of the dropdown changes. The\n * available maximum height is the space that is available for the dropdown content until the\n * edge of the container is reached (minus a small spacing). This can be used to limit the\n * content height, so the dropdown is not cut off when there is not enough space.\n */\n onAvailableMaxHeightChange?: (availableMaxHeight: number) => void;\n /**\n * Function to be executed when the body is closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the user clicks outside the dropdown.\n * If the function returns `true`, the dropdown will not be closed.\n */\n onOutsideClick?: () => boolean | void;\n /**\n * Function to be executed when the content is measured.\n */\n onMeasure?: DelayedDropdownContentProps['onMeasure'];\n /**\n * Whether the dropdown should be visible.\n */\n shouldShowDropdown: boolean;\n /**\n * Whether the outside events should be captured.\n */\n shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper = forwardRef<HTMLDivElement, DropdownBodyWrapperProps>(\n (\n {\n anchorElement,\n bodyWidth,\n children,\n container: containerProp,\n contentHeight = 0,\n direction = DropdownDirection.BOTTOM_RIGHT,\n maxHeight,\n minBodyWidth = 0,\n onAvailableMaxHeightChange,\n onClose,\n onOutsideClick,\n onMeasure,\n shouldCaptureEvents = true,\n shouldShowDropdown,\n },\n ref,\n ) => {\n const isInChaynsWalletRef = useRef(false);\n\n const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const contentRef = useRef<HTMLDivElement>(null);\n const shouldPreventClickRef = useRef<boolean>(false);\n const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n const container = useContainer({ anchorElement, container: containerProp });\n\n const { transform, width, coordinates, availableMaxHeight } = useDropdown({\n anchorElement,\n container,\n contentHeight,\n contentWidth: bodyWidth ?? measuredContentWidth,\n direction,\n shouldShowDropdown,\n });\n\n useEffect(() => {\n if (typeof onAvailableMaxHeightChange === 'function') {\n onAvailableMaxHeightChange(availableMaxHeight);\n }\n }, [availableMaxHeight, onAvailableMaxHeightChange]);\n\n const handleClose = useCallback(() => {\n if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose]);\n\n /**\n * This function closes the body\n */\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n contentRef.current &&\n shouldShowDropdown &&\n !anchorElement.contains(event.target as Node) &&\n !contentRef.current.contains(event.target as Node)\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n handleClose();\n }\n }\n\n shouldPreventClickRef.current = false;\n },\n [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n );\n\n const handleContentMeasure = useCallback(\n (measurements: DropdownMeasurements) => {\n // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n // unnecessary renders, we only set the height if the content is shown in the wallet.\n if (isInChaynsWalletRef.current) {\n setMeasuredContentHeight(measurements.height);\n }\n\n setMeasuredContentWidth(measurements.width);\n\n if (typeof onMeasure === 'function') {\n onMeasure(measurements);\n }\n },\n [onMeasure],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(touchTimeoutRef.current);\n }, []);\n\n const handleTouchStart = useCallback(() => {\n touchTimeoutRef.current = window.setTimeout(() => {\n shouldPreventClickRef.current = true;\n }, 500);\n }, []);\n\n /**\n * This hook listens for clicks\n */\n useDropdownListener({\n onClick: handleClick,\n onClose: handleClose,\n onTouchEnd: handleTouchEnd,\n onTouchStart: handleTouchStart,\n shouldCaptureEvents,\n });\n\n useEffect(() => {\n const isBottomDirection = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n ContainerAnchor.RESERVATION_WRAPPER,\n );\n\n isInChaynsWalletRef.current =\n !!(\n reservationWrapperElement && reservationWrapperElement.contains(anchorElement)\n ) || true;\n\n // This effect checks if additional space is needed to show dropdown content in chayns cards.\n if (\n isBottomDirection &&\n isInChaynsWalletRef.current &&\n measuredContentHeight > 0 &&\n reservationWrapperElement &&\n shouldShowDropdown\n ) {\n const availableHeight =\n window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n // If the content height is greater than the available height, we need to add additional space.\n // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n if (additionalNeededSpace > 0) {\n // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n } else {\n // Reset the margin bottom if no additional space is needed.\n reservationWrapperElement.style.marginBottom = '0px';\n }\n }\n\n if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n // Reset the margin bottom when the dropdown is closed.\n reservationWrapperElement.style.marginBottom = '0px';\n }\n\n return () => {\n if (reservationWrapperElement) {\n reservationWrapperElement.style.marginBottom = '0px';\n }\n };\n }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n useEffect(() => {\n if (!container) return;\n\n setPortal(() =>\n createPortal(\n <DelayedDropdownContent\n coordinates={coordinates}\n onMeasure={handleContentMeasure}\n shouldShowContent={shouldShowDropdown}\n transform={transform}\n >\n <StyledDropdownBodyWrapperContent\n $width={width}\n $minWidth={minBodyWidth}\n $maxHeight={maxHeight}\n $direction={direction}\n ref={contentRef}\n className={\n typeof maxHeight === 'number' ? 'chayns-scrollbar' : undefined\n }\n tabIndex={0}\n >\n {children}\n </StyledDropdownBodyWrapperContent>\n </DelayedDropdownContent>,\n container,\n ),\n );\n }, [\n children,\n container,\n coordinates,\n direction,\n handleContentMeasure,\n maxHeight,\n minBodyWidth,\n shouldShowDropdown,\n transform,\n width,\n ]);\n\n useImperativeHandle(ref, () => contentRef.current!, []);\n\n return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n },\n);\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -50,6 +50,11 @@ export const useDropdownAlignment = ({
|
|
|
50
50
|
y: translateY
|
|
51
51
|
}), [translateX, translateY]);
|
|
52
52
|
};
|
|
53
|
+
/**
|
|
54
|
+
* The space (in pixels) that should be kept between the dropdown content and the edge of the
|
|
55
|
+
* container when calculating the available maximum height.
|
|
56
|
+
*/
|
|
57
|
+
const AVAILABLE_HEIGHT_SPACING = 16;
|
|
53
58
|
export const useDropdownPosition = ({
|
|
54
59
|
anchorElement,
|
|
55
60
|
container,
|
|
@@ -62,6 +67,7 @@ export const useDropdownPosition = ({
|
|
|
62
67
|
y: 0
|
|
63
68
|
});
|
|
64
69
|
const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);
|
|
70
|
+
const [availableMaxHeight, setAvailableMaxHeight] = useState(0);
|
|
65
71
|
const calculateCoordinates = useCallback(() => {
|
|
66
72
|
if (container) {
|
|
67
73
|
const {
|
|
@@ -84,6 +90,16 @@ export const useDropdownPosition = ({
|
|
|
84
90
|
} else {
|
|
85
91
|
setShouldUseTopAlignment(false);
|
|
86
92
|
}
|
|
93
|
+
|
|
94
|
+
// Calculate the space that is available for the dropdown content. When the dropdown is
|
|
95
|
+
// opened to the top, the available space reaches from the anchor to the top edge of the
|
|
96
|
+
// container. When it is opened to the bottom, it reaches from the bottom of the anchor
|
|
97
|
+
// to the bottom edge of the container. A small spacing is subtracted so the content does
|
|
98
|
+
// not touch the container edge (e.g. to leave room for shadows).
|
|
99
|
+
const spaceToTop = y;
|
|
100
|
+
const spaceToBottom = height - (y + anchorHeight);
|
|
101
|
+
const nextAvailableMaxHeight = Math.max((useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING, 0);
|
|
102
|
+
setAvailableMaxHeight(nextAvailableMaxHeight);
|
|
87
103
|
setCoordinates({
|
|
88
104
|
x,
|
|
89
105
|
y: useTopAlignment ? y : y + anchorHeight
|
|
@@ -105,8 +121,9 @@ export const useDropdownPosition = ({
|
|
|
105
121
|
}, [calculateCoordinates, shouldShowDropdown]);
|
|
106
122
|
return useMemo(() => ({
|
|
107
123
|
shouldUseTopAlignment,
|
|
108
|
-
coordinates
|
|
109
|
-
|
|
124
|
+
coordinates,
|
|
125
|
+
availableMaxHeight
|
|
126
|
+
}), [availableMaxHeight, coordinates, shouldUseTopAlignment]);
|
|
110
127
|
};
|
|
111
128
|
export const useDropdown = ({
|
|
112
129
|
anchorElement,
|
|
@@ -118,7 +135,8 @@ export const useDropdown = ({
|
|
|
118
135
|
}) => {
|
|
119
136
|
const {
|
|
120
137
|
shouldUseTopAlignment,
|
|
121
|
-
coordinates
|
|
138
|
+
coordinates,
|
|
139
|
+
availableMaxHeight
|
|
122
140
|
} = useDropdownPosition({
|
|
123
141
|
anchorElement,
|
|
124
142
|
container,
|
|
@@ -136,7 +154,8 @@ export const useDropdown = ({
|
|
|
136
154
|
return useMemo(() => ({
|
|
137
155
|
coordinates,
|
|
138
156
|
transform,
|
|
139
|
-
width
|
|
140
|
-
|
|
157
|
+
width,
|
|
158
|
+
availableMaxHeight
|
|
159
|
+
}), [availableMaxHeight, coordinates, transform, width]);
|
|
141
160
|
};
|
|
142
161
|
//# sourceMappingURL=dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n onClick: (event: MouseEvent) => void;\n onClose: () => void;\n onTouchEnd: (event: TouchEvent) => void;\n onTouchStart: (event: TouchEvent) => void;\n shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick, shouldCaptureEvents);\n document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.addEventListener('blur', onClose);\n\n return () => {\n document.removeEventListener('click', onClick, shouldCaptureEvents);\n document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.removeEventListener('blur', onClose);\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n contentWidth: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n const [translateX, setTranslateX] = useState<string>('0px');\n const [translateY, setTranslateY] = useState<string>('0px');\n\n useEffect(() => {\n if (\n [\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.LEFT,\n ].includes(direction)\n ) {\n const difference = anchorElement.clientWidth - contentWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, contentWidth, direction]);\n\n useEffect(() => {\n const useTopAlignment =\n shouldUseTopAlignment ||\n [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n if (useTopAlignment) {\n setTranslateY('-100%');\n } else {\n setTranslateY('0px');\n }\n }, [direction, shouldUseTopAlignment]);\n\n return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n anchorElement,\n container,\n contentHeight = 0,\n direction,\n shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n const calculateCoordinates = useCallback(() => {\n if (container) {\n const {\n left: anchorLeft,\n top: anchorTop,\n height: anchorHeight,\n } = anchorElement.getBoundingClientRect();\n\n const { left, top, height } = container.getBoundingClientRect();\n\n const x = anchorLeft - left + container.scrollLeft;\n const y = anchorTop - top + container.scrollTop;\n\n let useTopAlignment = [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n const hasBottomAlignment = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n useTopAlignment = true;\n\n setShouldUseTopAlignment(true);\n } else {\n setShouldUseTopAlignment(false);\n }\n\n setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n }\n }, [anchorElement, container, contentHeight, direction]);\n\n useIsomorphicLayoutEffect(() => {\n const handleResize = () => {\n calculateCoordinates();\n\n setTimeout(calculateCoordinates, 300);\n };\n\n handleResize();\n\n if (shouldShowDropdown) {\n window.addEventListener('resize', handleResize);\n }\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [calculateCoordinates, shouldShowDropdown]);\n\n return useMemo(\n () => ({ shouldUseTopAlignment, coordinates }),\n [coordinates, shouldUseTopAlignment],\n );\n};\n\ninterface UseDropdownOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n contentWidth: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n container,\n contentHeight,\n contentWidth,\n direction,\n shouldShowDropdown,\n}: UseDropdownOptions) => {\n const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n anchorElement,\n container,\n contentHeight,\n direction,\n shouldShowDropdown,\n });\n\n const transform = useDropdownAlignment({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n });\n\n const width = anchorElement.clientWidth;\n\n return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,eAAe,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAClF,SAA8BC,iBAAiB,QAAQ,mBAAmB;AAE1E,MAAMC,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGL,eAAe,GAAGD,SAAS;AAU7F,OAAO,MAAMO,mBAAmB,GAAGA,CAAC;EAChCC,OAAO;EACPC,OAAO;EACPC,UAAU;EACVC,YAAY;EACZC;AACwB,CAAC,KAAK;EAC9BZ,SAAS,CAAC,MAAM;IACZa,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEN,OAAO,EAAEI,mBAAmB,CAAC;IAChEC,QAAQ,CAACC,gBAAgB,CAAC,UAAU,EAAEJ,UAAU,EAAEE,mBAAmB,CAAC;IACtEC,QAAQ,CAACC,gBAAgB,CAAC,YAAY,EAAEH,YAAY,EAAEC,mBAAmB,CAAC;IAE1EN,MAAM,CAACQ,gBAAgB,CAAC,MAAM,EAAEL,OAAO,CAAC;IAExC,OAAO,MAAM;MACTI,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEP,OAAO,EAAEI,mBAAmB,CAAC;MACnEC,QAAQ,CAACE,mBAAmB,CAAC,UAAU,EAAEL,UAAU,EAAEE,mBAAmB,CAAC;MACzEC,QAAQ,CAACE,mBAAmB,CAAC,YAAY,EAAEJ,YAAY,EAAEC,mBAAmB,CAAC;MAE7EN,MAAM,CAACS,mBAAmB,CAAC,MAAM,EAAEN,OAAO,CAAC;IAC/C,CAAC;EACL,CAAC,EAAE,CAACD,OAAO,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,CAAC,CAAC;AACpD,CAAC;AASD,OAAO,MAAMK,oBAAoB,GAAGA,CAAC;EACjCC,aAAa;EACbC,YAAY;EACZC,SAAS;EACTC;AACyB,CAAC,KAAK;EAC/B,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAAS,KAAK,CAAC;EAC3D,MAAM,CAACoB,UAAU,EAAEC,aAAa,CAAC,GAAGrB,QAAQ,CAAS,KAAK,CAAC;EAE3DH,SAAS,CAAC,MAAM;IACZ,IACI,CACII,iBAAiB,CAACqB,WAAW,EAC7BrB,iBAAiB,CAACsB,QAAQ,EAC1BtB,iBAAiB,CAACuB,IAAI,CACzB,CAACC,QAAQ,CAACT,SAAS,CAAC,EACvB;MACE,MAAMU,UAAU,GAAGZ,aAAa,CAACa,WAAW,GAAGZ,YAAY;MAE3DI,aAAa,CAAC,GAAGO,UAAU,IAAI,CAAC;IACpC,CAAC,MAAM;MACHP,aAAa,CAAC,KAAK,CAAC;IACxB;EACJ,CAAC,EAAE,CAACL,aAAa,CAACa,WAAW,EAAEZ,YAAY,EAAEC,SAAS,CAAC,CAAC;EAExDnB,SAAS,CAAC,MAAM;IACZ,MAAM+B,eAAe,GACjBX,qBAAqB,IACrB,CACIhB,iBAAiB,CAAC4B,GAAG,EACrB5B,iBAAiB,CAACsB,QAAQ,EAC1BtB,iBAAiB,CAAC6B,SAAS,CAC9B,CAACL,QAAQ,CAACT,SAAS,CAAC;IAEzB,IAAIY,eAAe,EAAE;MACjBP,aAAa,CAAC,OAAO,CAAC;IAC1B,CAAC,MAAM;MACHA,aAAa,CAAC,KAAK,CAAC;IACxB;EACJ,CAAC,EAAE,CAACL,SAAS,EAAEC,qBAAqB,CAAC,CAAC;EAEtC,OAAOlB,OAAO,CAAC,OAAO;IAAEgC,CAAC,EAAEb,UAAU;IAAEc,CAAC,EAAEZ;EAAW,CAAC,CAAC,EAAE,CAACF,UAAU,EAAEE,UAAU,CAAC,CAAC;AACtF,CAAC;AAUD,OAAO,MAAMa,mBAAmB,GAAGA,CAAC;EAChCnB,aAAa;EACboB,SAAS;EACTC,aAAa,GAAG,CAAC;EACjBnB,SAAS;EACToB;AACwB,CAAC,KAAK;EAC9B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGtC,QAAQ,CAAsB;IAAE+B,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EACnF,MAAM,CAACf,qBAAqB,EAAEsB,wBAAwB,CAAC,GAAGvC,QAAQ,CAAC,KAAK,CAAC;EAEzE,MAAMwC,oBAAoB,GAAG5C,WAAW,CAAC,MAAM;IAC3C,IAAIsC,SAAS,EAAE;MACX,MAAM;QACFO,IAAI,EAAEC,UAAU;QAChBC,GAAG,EAAEC,SAAS;QACdC,MAAM,EAAEC;MACZ,CAAC,GAAGhC,aAAa,CAACiC,qBAAqB,CAAC,CAAC;MAEzC,MAAM;QAAEN,IAAI;QAAEE,GAAG;QAAEE;MAAO,CAAC,GAAGX,SAAS,CAACa,qBAAqB,CAAC,CAAC;MAE/D,MAAMhB,CAAC,GAAGW,UAAU,GAAGD,IAAI,GAAGP,SAAS,CAACc,UAAU;MAClD,MAAMhB,CAAC,GAAGY,SAAS,GAAGD,GAAG,GAAGT,SAAS,CAACe,SAAS;MAE/C,IAAIrB,eAAe,GAAG,CAClB3B,iBAAiB,CAAC4B,GAAG,EACrB5B,iBAAiB,CAACsB,QAAQ,EAC1BtB,iBAAiB,CAAC6B,SAAS,CAC9B,CAACL,QAAQ,CAACT,SAAS,CAAC;MAErB,MAAMkC,kBAAkB,GAAG,CACvBjD,iBAAiB,CAACkD,MAAM,EACxBlD,iBAAiB,CAACqB,WAAW,EAC7BrB,iBAAiB,CAACmD,YAAY,CACjC,CAAC3B,QAAQ,CAACT,SAAS,CAAC;MAErB,IAAI,CAACkC,kBAAkB,IAAIlB,CAAC,GAAGc,YAAY,GAAGX,aAAa,GAAGU,MAAM,EAAE;QAClEjB,eAAe,GAAG,IAAI;QAEtBW,wBAAwB,CAAC,IAAI,CAAC;MAClC,CAAC,MAAM;QACHA,wBAAwB,CAAC,KAAK,CAAC;MACnC;MAEAD,cAAc,CAAC;QAAEP,CAAC;QAAEC,CAAC,EAAEJ,eAAe,GAAGI,CAAC,GAAGA,CAAC,GAAGc;MAAa,CAAC,CAAC;IACpE;EACJ,CAAC,EAAE,CAAChC,aAAa,EAAEoB,SAAS,EAAEC,aAAa,EAAEnB,SAAS,CAAC,CAAC;EAExDd,yBAAyB,CAAC,MAAM;IAC5B,MAAMmD,YAAY,GAAGA,CAAA,KAAM;MACvBb,oBAAoB,CAAC,CAAC;MAEtBc,UAAU,CAACd,oBAAoB,EAAE,GAAG,CAAC;IACzC,CAAC;IAEDa,YAAY,CAAC,CAAC;IAEd,IAAIjB,kBAAkB,EAAE;MACpBjC,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAE0C,YAAY,CAAC;IACnD;IAEA,OAAO,MAAM;MACTlD,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEyC,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACb,oBAAoB,EAAEJ,kBAAkB,CAAC,CAAC;EAE9C,OAAOrC,OAAO,CACV,OAAO;IAAEkB,qBAAqB;IAAEoB;EAAY,CAAC,CAAC,EAC9C,CAACA,WAAW,EAAEpB,qBAAqB,CACvC,CAAC;AACL,CAAC;AAWD,OAAO,MAAMsC,WAAW,GAAGA,CAAC;EACxBzC,aAAa;EACboB,SAAS;EACTC,aAAa;EACbpB,YAAY;EACZC,SAAS;EACToB;AACgB,CAAC,KAAK;EACtB,MAAM;IAAEnB,qBAAqB;IAAEoB;EAAY,CAAC,GAAGJ,mBAAmB,CAAC;IAC/DnB,aAAa;IACboB,SAAS;IACTC,aAAa;IACbnB,SAAS;IACToB;EACJ,CAAC,CAAC;EAEF,MAAMoB,SAAS,GAAG3C,oBAAoB,CAAC;IACnCC,aAAa;IACbC,YAAY;IACZC,SAAS;IACTC;EACJ,CAAC,CAAC;EAEF,MAAMwC,KAAK,GAAG3C,aAAa,CAACa,WAAW;EAEvC,OAAO5B,OAAO,CAAC,OAAO;IAAEsC,WAAW;IAAEmB,SAAS;IAAEC;EAAM,CAAC,CAAC,EAAE,CAACpB,WAAW,EAAEmB,SAAS,EAAEC,KAAK,CAAC,CAAC;AAC9F,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","AVAILABLE_HEIGHT_SPACING","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","availableMaxHeight","setAvailableMaxHeight","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","spaceToTop","spaceToBottom","nextAvailableMaxHeight","Math","max","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n onClick: (event: MouseEvent) => void;\n onClose: () => void;\n onTouchEnd: (event: TouchEvent) => void;\n onTouchStart: (event: TouchEvent) => void;\n shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick, shouldCaptureEvents);\n document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.addEventListener('blur', onClose);\n\n return () => {\n document.removeEventListener('click', onClick, shouldCaptureEvents);\n document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.removeEventListener('blur', onClose);\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n contentWidth: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n const [translateX, setTranslateX] = useState<string>('0px');\n const [translateY, setTranslateY] = useState<string>('0px');\n\n useEffect(() => {\n if (\n [\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.LEFT,\n ].includes(direction)\n ) {\n const difference = anchorElement.clientWidth - contentWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, contentWidth, direction]);\n\n useEffect(() => {\n const useTopAlignment =\n shouldUseTopAlignment ||\n [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n if (useTopAlignment) {\n setTranslateY('-100%');\n } else {\n setTranslateY('0px');\n }\n }, [direction, shouldUseTopAlignment]);\n\n return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\n/**\n * The space (in pixels) that should be kept between the dropdown content and the edge of the\n * container when calculating the available maximum height.\n */\nconst AVAILABLE_HEIGHT_SPACING = 16;\n\nexport const useDropdownPosition = ({\n anchorElement,\n container,\n contentHeight = 0,\n direction,\n shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n const [availableMaxHeight, setAvailableMaxHeight] = useState<number>(0);\n\n const calculateCoordinates = useCallback(() => {\n if (container) {\n const {\n left: anchorLeft,\n top: anchorTop,\n height: anchorHeight,\n } = anchorElement.getBoundingClientRect();\n\n const { left, top, height } = container.getBoundingClientRect();\n\n const x = anchorLeft - left + container.scrollLeft;\n const y = anchorTop - top + container.scrollTop;\n\n let useTopAlignment = [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n const hasBottomAlignment = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n useTopAlignment = true;\n\n setShouldUseTopAlignment(true);\n } else {\n setShouldUseTopAlignment(false);\n }\n\n // Calculate the space that is available for the dropdown content. When the dropdown is\n // opened to the top, the available space reaches from the anchor to the top edge of the\n // container. When it is opened to the bottom, it reaches from the bottom of the anchor\n // to the bottom edge of the container. A small spacing is subtracted so the content does\n // not touch the container edge (e.g. to leave room for shadows).\n const spaceToTop = y;\n const spaceToBottom = height - (y + anchorHeight);\n\n const nextAvailableMaxHeight = Math.max(\n (useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING,\n 0,\n );\n\n setAvailableMaxHeight(nextAvailableMaxHeight);\n\n setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n }\n }, [anchorElement, container, contentHeight, direction]);\n\n useIsomorphicLayoutEffect(() => {\n const handleResize = () => {\n calculateCoordinates();\n\n setTimeout(calculateCoordinates, 300);\n };\n\n handleResize();\n\n if (shouldShowDropdown) {\n window.addEventListener('resize', handleResize);\n }\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [calculateCoordinates, shouldShowDropdown]);\n\n return useMemo(\n () => ({ shouldUseTopAlignment, coordinates, availableMaxHeight }),\n [availableMaxHeight, coordinates, shouldUseTopAlignment],\n );\n};\n\ninterface UseDropdownOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n contentWidth: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n container,\n contentHeight,\n contentWidth,\n direction,\n shouldShowDropdown,\n}: UseDropdownOptions) => {\n const { shouldUseTopAlignment, coordinates, availableMaxHeight } = useDropdownPosition({\n anchorElement,\n container,\n contentHeight,\n direction,\n shouldShowDropdown,\n });\n\n const transform = useDropdownAlignment({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n });\n\n const width = anchorElement.clientWidth;\n\n return useMemo(\n () => ({ coordinates, transform, width, availableMaxHeight }),\n [availableMaxHeight, coordinates, transform, width],\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -34,6 +34,13 @@ interface DropdownBodyWrapperProps {
|
|
|
34
34
|
* The minimum width of the body.
|
|
35
35
|
*/
|
|
36
36
|
minBodyWidth?: number;
|
|
37
|
+
/**
|
|
38
|
+
* Function to be executed when the available maximum height of the dropdown changes. The
|
|
39
|
+
* available maximum height is the space that is available for the dropdown content until the
|
|
40
|
+
* edge of the container is reached (minus a small spacing). This can be used to limit the
|
|
41
|
+
* content height, so the dropdown is not cut off when there is not enough space.
|
|
42
|
+
*/
|
|
43
|
+
onAvailableMaxHeightChange?: (availableMaxHeight: number) => void;
|
|
37
44
|
/**
|
|
38
45
|
* Function to be executed when the body is closed.
|
|
39
46
|
*/
|
|
@@ -27,6 +27,7 @@ interface UseDropdownPositionOptions {
|
|
|
27
27
|
export declare const useDropdownPosition: ({ anchorElement, container, contentHeight, direction, shouldShowDropdown, }: UseDropdownPositionOptions) => {
|
|
28
28
|
shouldUseTopAlignment: boolean;
|
|
29
29
|
coordinates: DropdownCoordinates;
|
|
30
|
+
availableMaxHeight: number;
|
|
30
31
|
};
|
|
31
32
|
interface UseDropdownOptions {
|
|
32
33
|
anchorElement: Element;
|
|
@@ -43,5 +44,6 @@ export declare const useDropdown: ({ anchorElement, container, contentHeight, co
|
|
|
43
44
|
y: string;
|
|
44
45
|
};
|
|
45
46
|
width: number;
|
|
47
|
+
availableMaxHeight: number;
|
|
46
48
|
};
|
|
47
49
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.4.
|
|
3
|
+
"version": "5.4.5",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"publishConfig": {
|
|
89
89
|
"access": "public"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "0d6bc7229b2b0c504583ac371f8997fa216243c3"
|
|
92
92
|
}
|