@chayns-components/core 5.0.0-beta.1183 → 5.0.0-beta.1187
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.
|
@@ -140,7 +140,7 @@ const useDropdown = ({
|
|
|
140
140
|
anchorElement,
|
|
141
141
|
direction
|
|
142
142
|
});
|
|
143
|
-
const width =
|
|
143
|
+
const width = anchorElement.clientWidth;
|
|
144
144
|
return (0, _react.useMemo)(() => ({
|
|
145
145
|
coordinates,
|
|
146
146
|
transform,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","exports","useDropdownAlignment","direction","shouldUseTopAlignment","anchorElement","bodyWidth","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}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick);\n document.addEventListener('touchend', onTouchEnd);\n document.addEventListener('touchstart', onTouchStart);\n\n window.addEventListener('blur', () => onClose());\n\n return () => {\n document.removeEventListener('click', onClick);\n document.removeEventListener('touchend', onTouchEnd);\n document.removeEventListener('touchstart', onTouchStart);\n\n window.addEventListener('blur', () => onClose());\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n bodyWidth?: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n direction,\n shouldUseTopAlignment,\n anchorElement,\n bodyWidth,\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 typeof bodyWidth === 'number'\n ) {\n const difference = anchorElement.clientWidth - bodyWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, bodyWidth, 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 bodyWidth?: number;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n bodyWidth,\n container,\n contentHeight,\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 shouldUseTopAlignment,\n bodyWidth,\n anchorElement,\n direction,\n });\n\n const width = useMemo(() => anchorElement.clientWidth, [anchorElement]);\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","document","addEventListener","removeEventListener","exports","useDropdownAlignment","direction","shouldUseTopAlignment","anchorElement","bodyWidth","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}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick);\n document.addEventListener('touchend', onTouchEnd);\n document.addEventListener('touchstart', onTouchStart);\n\n window.addEventListener('blur', () => onClose());\n\n return () => {\n document.removeEventListener('click', onClick);\n document.removeEventListener('touchend', onTouchEnd);\n document.removeEventListener('touchstart', onTouchStart);\n\n window.addEventListener('blur', () => onClose());\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n bodyWidth?: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n direction,\n shouldUseTopAlignment,\n anchorElement,\n bodyWidth,\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 typeof bodyWidth === 'number'\n ) {\n const difference = anchorElement.clientWidth - bodyWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, bodyWidth, 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 bodyWidth?: number;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n bodyWidth,\n container,\n contentHeight,\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 shouldUseTopAlignment,\n bodyWidth,\n anchorElement,\n direction,\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":[]}
|
|
@@ -131,7 +131,7 @@ export const useDropdown = ({
|
|
|
131
131
|
anchorElement,
|
|
132
132
|
direction
|
|
133
133
|
});
|
|
134
|
-
const width =
|
|
134
|
+
const width = anchorElement.clientWidth;
|
|
135
135
|
return useMemo(() => ({
|
|
136
136
|
coordinates,
|
|
137
137
|
transform,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","useDropdownAlignment","direction","shouldUseTopAlignment","anchorElement","bodyWidth","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}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick);\n document.addEventListener('touchend', onTouchEnd);\n document.addEventListener('touchstart', onTouchStart);\n\n window.addEventListener('blur', () => onClose());\n\n return () => {\n document.removeEventListener('click', onClick);\n document.removeEventListener('touchend', onTouchEnd);\n document.removeEventListener('touchstart', onTouchStart);\n\n window.addEventListener('blur', () => onClose());\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n bodyWidth?: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n direction,\n shouldUseTopAlignment,\n anchorElement,\n bodyWidth,\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 typeof bodyWidth === 'number'\n ) {\n const difference = anchorElement.clientWidth - bodyWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, bodyWidth, 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 bodyWidth?: number;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n bodyWidth,\n container,\n contentHeight,\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 shouldUseTopAlignment,\n bodyWidth,\n anchorElement,\n direction,\n });\n\n const width = useMemo(() => anchorElement.clientWidth, [anchorElement]);\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":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","useDropdownAlignment","direction","shouldUseTopAlignment","anchorElement","bodyWidth","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}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick);\n document.addEventListener('touchend', onTouchEnd);\n document.addEventListener('touchstart', onTouchStart);\n\n window.addEventListener('blur', () => onClose());\n\n return () => {\n document.removeEventListener('click', onClick);\n document.removeEventListener('touchend', onTouchEnd);\n document.removeEventListener('touchstart', onTouchStart);\n\n window.addEventListener('blur', () => onClose());\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n bodyWidth?: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n direction,\n shouldUseTopAlignment,\n anchorElement,\n bodyWidth,\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 typeof bodyWidth === 'number'\n ) {\n const difference = anchorElement.clientWidth - bodyWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, bodyWidth, 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 bodyWidth?: number;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n bodyWidth,\n container,\n contentHeight,\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 shouldUseTopAlignment,\n bodyWidth,\n anchorElement,\n direction,\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":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1187",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -61,9 +61,9 @@
|
|
|
61
61
|
"@types/styled-components": "^5.1.34",
|
|
62
62
|
"@types/uuid": "^10.0.0",
|
|
63
63
|
"babel-loader": "^9.2.1",
|
|
64
|
-
"chayns-api": "^2.4.
|
|
64
|
+
"chayns-api": "^2.4.3",
|
|
65
65
|
"cross-env": "^7.0.3",
|
|
66
|
-
"lerna": "^8.2.
|
|
66
|
+
"lerna": "^8.2.4",
|
|
67
67
|
"react": "^18.3.1",
|
|
68
68
|
"react-dom": "^18.3.1",
|
|
69
69
|
"styled-components": "^6.1.19",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "a7ec3e938412bcb824fe1259ea53ee6dd96bfe2f"
|
|
89
89
|
}
|