npm - @chayns-components/core - Versions diffs - 5.4.6 → 5.4.8-alpha.0 - Mend

@chayns-components/core 5.4.6 → 5.4.8-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (470) hide show

package/lib/esm/components/truncation/Truncation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","ClampPosition","debounce","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Textstring","TextstringProvider","ttsToITextString","textStrings","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","shouldSkipChangeCheck","setShouldSkipChangeCheck","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","event","current","setTimeout","handleAnimationEnd","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","ts","components","truncation","internalMoreLabel","createElement","textstring","more","internalLessLabel","less","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","libraryName","onClick"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampWrapper,\n StyledTruncationPseudoContent,\n} from './Truncation.styles';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../constants/textStrings';\n\nexport type TruncationProps = {\n /*\n The elements that should be expanding or collapsing.\n /\n children: ReactElement;\n /\n The position of the clamp.\n /\n clampPosition?: ClampPosition;\n /\n The height of the children Element in it`s collapsed state.\n /\n collapsedHeight?: number;\n /\n If set to true, the content is exposed.\n /\n isOpen?: boolean;\n /\n A text that should be displayed if the content is expanded.\n /\n lessLabel?: string;\n /\n A text that should be displayed if the content is collapsed.\n /\n moreLabel?: string;\n /\n Function to be executed when the component is expanding or collapsing.\n */\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n moreLabel,\n lessLabel,\n onChange,\n children,\n}) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const [showClamp, setShowClamp] = useState(true);\n const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n const [originalHeight, setOriginalHeight] = useState(0);\n const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n const [hasSizeChanged, setHasSizeChanged] = useState(false);\n const [initialRender, setInitialRender] = useState(true);\n const [shouldSkipChangeCheck, setShouldSkipChangeCheck] = useState(false);\n\n const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const parentRef = useRef<HTMLDivElement>(null);\n const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n const childrenRef = useRef<HTMLDivElement>(null);\n const originalChildrenRef = useRef<HTMLDivElement>(null);\n const hasCollapsed = useRef(false);\n const isAnimating = useRef(false);\n const hasSizeRecentlyChanged = useRef(false);\n const canResetSizeChanged = useRef(true);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n setShowClamp(!isOpen);\n }\n }, [isOpen]);\n\n // Changes the state of the truncation\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n if (typeof onChange === 'function') {\n onChange(event, !current);\n }\n\n return !current;\n });\n },\n [onChange],\n );\n\n useEffect(() => {\n if (children) {\n setShouldSkipChangeCheck(true);\n\n window.setTimeout(() => {\n setShouldSkipChangeCheck(false);\n }, 200);\n }\n }, [children]);\n\n const handleAnimationEnd = useCallback(() => {\n hasCollapsed.current = true;\n isAnimating.current = false;\n\n if (canResetSizeChanged.current) {\n setHasSizeChanged(false);\n canResetSizeChanged.current = false;\n }\n\n window.setTimeout(() => {\n hasSizeRecentlyChanged.current = false;\n }, 10);\n\n setShouldShowCollapsedElement(!internalIsOpen);\n\n window.setTimeout(() => {\n hasCollapsed.current = false;\n }, 30);\n }, [internalIsOpen]);\n\n useEffect(() => {\n if (!pseudoChildrenRef.current) {\n return;\n }\n\n setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n }, [collapsedHeight, pseudoChildrenRef, children]);\n\n // Checks if the clamp should be shown\n useEffect(() => {\n if (\n pseudoChildrenRef.current &&\n (!hasSizeChanged \|\| shouldSkipChangeCheck) &&\n !initialRender\n ) {\n setShowClamp(originalHeight > newCollapsedHeight);\n }\n }, [\n shouldSkipChangeCheck,\n collapsedHeight,\n hasSizeChanged,\n initialRender,\n newCollapsedHeight,\n originalHeight,\n children,\n ]);\n\n useEffect(() => {\n if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n while (childrenRef.current.firstChild) {\n childrenRef.current.removeChild(childrenRef.current.firstChild);\n }\n\n childrenRef.current.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? pseudoChildrenRef.current\n : originalChildrenRef.current,\n );\n\n parentRef.current?.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? originalChildrenRef.current\n : pseudoChildrenRef.current,\n );\n\n (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n }\n }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n useIsomorphicLayoutEffect(() => {\n if (originalChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setOriginalHeight(\n observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(originalChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalBigHeight, children]);\n\n useIsomorphicLayoutEffect(() => {\n if (pseudoChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setNewCollapsedHeight(\n observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(pseudoChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalSmallHeight, children]);\n\n const ts = textStrings.components.truncation;\n\n const internalMoreLabel = moreLabel ?? <Textstring textstring={ttsToITextString(ts.more)} />;\n const internalLessLabel = lessLabel ?? <Textstring textstring={ttsToITextString(ts.less)} />;\n\n return useMemo(\n () => (\n <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledTruncationPseudoContent ref={originalChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledMotionTruncationContent\n animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n initial={false}\n transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n onAnimationComplete={handleAnimationEnd}\n onAnimationStart={() => {\n isAnimating.current = true;\n }}\n ref={childrenRef}\n />\n {showClamp && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledTruncationClamp onClick={handleClampClick}>\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </TextstringProvider>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n ),\n [\n children,\n clampPosition,\n handleAnimationEnd,\n handleClampClick,\n hasSizeChanged,\n internalIsOpen,\n lessLabel,\n moreLabel,\n newCollapsedHeight,\n originalHeight,\n showClamp,\n ],\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","ClampPosition","debounce","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampFocusWrapper","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Textstring","TextstringProvider","ttsToITextString","textStrings","useKeyboardFocusHighlighting","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","shouldSkipChangeCheck","setShouldSkipChangeCheck","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","event","current","handleClampKeyDown","key","preventDefault","currentTarget","click","setTimeout","handleAnimationEnd","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","ts","components","truncation","internalMoreLabel","createElement","textstring","more","internalLessLabel","less","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","libraryName","$shouldShowKeyboardHighlighting","onClick","onKeyDown","role","tabIndex"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationPseudoContent,\n} from './Truncation.styles';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../constants/textStrings';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type TruncationProps = {\n /*\n The elements that should be expanding or collapsing.\n /\n children: ReactElement;\n /\n The position of the clamp.\n /\n clampPosition?: ClampPosition;\n /\n The height of the children Element in it`s collapsed state.\n /\n collapsedHeight?: number;\n /\n If set to true, the content is exposed.\n /\n isOpen?: boolean;\n /\n A text that should be displayed if the content is expanded.\n /\n lessLabel?: string;\n /\n A text that should be displayed if the content is collapsed.\n /\n moreLabel?: string;\n /\n Function to be executed when the component is expanding or collapsing.\n /\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n moreLabel,\n lessLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const [showClamp, setShowClamp] = useState(true);\n const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n const [originalHeight, setOriginalHeight] = useState(0);\n const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n const [hasSizeChanged, setHasSizeChanged] = useState(false);\n const [initialRender, setInitialRender] = useState(true);\n const [shouldSkipChangeCheck, setShouldSkipChangeCheck] = useState(false);\n\n const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const parentRef = useRef<HTMLDivElement>(null);\n const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n const childrenRef = useRef<HTMLDivElement>(null);\n const originalChildrenRef = useRef<HTMLDivElement>(null);\n const hasCollapsed = useRef(false);\n const isAnimating = useRef(false);\n const hasSizeRecentlyChanged = useRef(false);\n const canResetSizeChanged = useRef(true);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n setShowClamp(!isOpen);\n }\n }, [isOpen]);\n\n // Changes the state of the truncation\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n if (typeof onChange === 'function') {\n onChange(event, !current);\n }\n\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n useEffect(() => {\n if (children) {\n setShouldSkipChangeCheck(true);\n\n window.setTimeout(() => {\n setShouldSkipChangeCheck(false);\n }, 200);\n }\n }, [children]);\n\n const handleAnimationEnd = useCallback(() => {\n hasCollapsed.current = true;\n isAnimating.current = false;\n\n if (canResetSizeChanged.current) {\n setHasSizeChanged(false);\n canResetSizeChanged.current = false;\n }\n\n window.setTimeout(() => {\n hasSizeRecentlyChanged.current = false;\n }, 10);\n\n setShouldShowCollapsedElement(!internalIsOpen);\n\n window.setTimeout(() => {\n hasCollapsed.current = false;\n }, 30);\n }, [internalIsOpen]);\n\n useEffect(() => {\n if (!pseudoChildrenRef.current) {\n return;\n }\n\n setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n }, [collapsedHeight, pseudoChildrenRef, children]);\n\n // Checks if the clamp should be shown\n useEffect(() => {\n if (\n pseudoChildrenRef.current &&\n (!hasSizeChanged \|\| shouldSkipChangeCheck) &&\n !initialRender\n ) {\n setShowClamp(originalHeight > newCollapsedHeight);\n }\n }, [\n shouldSkipChangeCheck,\n collapsedHeight,\n hasSizeChanged,\n initialRender,\n newCollapsedHeight,\n originalHeight,\n children,\n ]);\n\n useEffect(() => {\n if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n while (childrenRef.current.firstChild) {\n childrenRef.current.removeChild(childrenRef.current.firstChild);\n }\n\n childrenRef.current.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? pseudoChildrenRef.current\n : originalChildrenRef.current,\n );\n\n parentRef.current?.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? originalChildrenRef.current\n : pseudoChildrenRef.current,\n );\n\n (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n }\n }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n useIsomorphicLayoutEffect(() => {\n if (originalChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setOriginalHeight(\n observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(originalChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalBigHeight, children]);\n\n useIsomorphicLayoutEffect(() => {\n if (pseudoChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setNewCollapsedHeight(\n observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(pseudoChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalSmallHeight, children]);\n\n const ts = textStrings.components.truncation;\n\n const internalMoreLabel = moreLabel ?? <Textstring textstring={ttsToITextString(ts.more)} />;\n const internalLessLabel = lessLabel ?? <Textstring textstring={ttsToITextString(ts.less)} />;\n\n return useMemo(\n () => (\n <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledTruncationPseudoContent ref={originalChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledMotionTruncationContent\n animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n initial={false}\n transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n onAnimationComplete={handleAnimationEnd}\n onAnimationStart={() => {\n isAnimating.current = true;\n }}\n ref={childrenRef}\n />\n {showClamp && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledTruncationClampFocusWrapper\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledTruncationClamp\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextstringProvider>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n ),\n [\n children,\n clampPosition,\n handleAnimationEnd,\n handleClampClick,\n handleClampKeyDown,\n hasSizeChanged,\n internalIsOpen,\n lessLabel,\n moreLabel,\n newCollapsedHeight,\n originalHeight,\n shouldShowKeyboardHighlighting,\n showClamp,\n ],\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/truncation/Truncation.styles.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import { ClampPosition } from '../../types/truncation';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledTruncation = styled.div`
     position: relative;
     overflow: hidden;
@@ -38,8 +39,24 @@ export const StyledTruncationClampWrapper = styled.div`
   }
 }}
 `;
+export const StyledTruncationClampFocusWrapper = styled.div`
+    display: inline-block;
+    border-radius: 3px;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-within {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss};
+                color: inherit;
+            }
+        `}
+`;
 export const StyledTruncationClamp = styled.a`
     cursor: pointer;
     z-index: 2;
+    display: inline-block;
+    line-height: 1.2;
 `;
 //# sourceMappingURL=Truncation.styles.js.map

package/lib/esm/components/truncation/Truncation.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","$position","Left","Middle","StyledTruncationClamp","a"],"sources":["../../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTruncation = styled.div`\n position: relative;\n overflow: hidden;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)`\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n visibility: hidden;\n position: absolute;\n width: 100%;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n display: flex;\n\n ${({ $position }) => {\n switch ($position) {\n case ClampPosition.Left:\n return css`\n justify-content: left;\n `;\n case ClampPosition.Middle:\n return css`\n justify-content: center;\n `;\n default:\n return css`\n justify-content: right;\n `;\n }\n }}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n cursor: pointer;\n z-index: 2;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;~~AAGtD~~,OAAO,MAAMC,gBAAgB,~~GAAGH~~,MAAM,~~CAACI~~,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,~~GAAGL~~,MAAM,CAACD,MAAM,~~CAACK~~,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,~~GAAGN~~,MAAM,~~CAACI~~,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,~~GAAGP~~,MAAM,~~CAACI~~,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEI;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,~~KAAKN~~,aAAa,~~CAACO~~,IAAI;MACnB,~~OAAOR~~,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,aAAa,~~CAACQ~~,MAAM;MACrB,~~OAAOT~~,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAED,OAAO,~~MAAMU~~,qBAAqB,~~GAAGX~~,MAAM,~~CAACY~~,CAAC;AAC7C;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","keyboardFocusHighlightingRingCss","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","$position","Left","Middle","StyledTruncationClampFocusWrapper","$shouldShowKeyboardHighlighting","StyledTruncationClamp","a"],"sources":["../../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledTruncation = styled.div`\n position: relative;\n overflow: hidden;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)`\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n visibility: hidden;\n position: absolute;\n width: 100%;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n display: flex;\n\n ${({ $position }) => {\n switch ($position) {\n case ClampPosition.Left:\n return css`\n justify-content: left;\n `;\n case ClampPosition.Middle:\n return css`\n justify-content: center;\n `;\n default:\n return css`\n justify-content: right;\n `;\n }\n }}\n`;\n\ntype StyledTruncationClampProps = {\n $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTruncationClampFocusWrapper = styled.div<StyledTruncationClampProps>`\n display: inline-block;\n border-radius: 3px;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-within {\n transition: none;\n ${keyboardFocusHighlightingRingCss};\n color: inherit;\n }\n `}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n cursor: pointer;\n z-index: 2;\n display: inline-block;\n line-height: 1.2;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;AAEtD,SAASC,gCAAgC,QAAQ,8CAA8C;AAE/F,OAAO,MAAMC,gBAAgB,GAAGJ,MAAM,CAACK,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,GAAGN,MAAM,CAACD,MAAM,CAACM,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGP,MAAM,CAACK,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,GAAGR,MAAM,CAACK,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEI;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKP,aAAa,CAACQ,IAAI;MACnB,OAAOT,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,aAAa,CAACS,MAAM;MACrB,OAAOV,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAMD,OAAO,MAAMW,iCAAiC,GAAGZ,MAAM,CAACK,GAA+B;AACvF;AACA;AACA;AACA,MAAM,CAAC;EAAEQ;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BZ,GAAG;AACX;AACA;AACA,kBAAkBE,gCAAgC;AAClD;AACA;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMW,qBAAqB,GAAGd,MAAM,CAACe,CAAC;AAC7C;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/hooks/dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { DropdownDirection } from '../types/dropdown';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 export const useDropdownListener = ({
@@ -68,7 +68,22 @@ export const useDropdownPosition = ({
   });
   const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);
   const [availableMaxHeight, setAvailableMaxHeight] = useState(0);
+  // Stores the alignment decision (top/bottom) that was made when the dropdown opened. The
+  // decision depends on the content height, but the content height in turn is limited by the
+  // available height (which depends on the alignment). Recalculating the alignment on every
+  // change would create a feedback loop that makes the alignment flip and the height oscillate.
+  // We therefore lock the alignment while the dropdown stays open and reset it on close.
+  const lockedTopAlignmentRef = useRef(null);
   const calculateCoordinates = useCallback(() => {
+    // While the dropdown is closing (or closed) we must not recalculate the position and the
+    // available height. Otherwise layout changes underneath the dropdown (e.g. content that
+    // appears after a selection) would move or resize the dropdown body while it is still fading
+    // out, causing it to visibly jump. Freezing the last calculated values keeps the closing
+    // animation stable.
+    if (!shouldShowDropdown) {
+      return;
+    }
     if (container) {
       const {
         left: anchorLeft,
@@ -84,33 +99,47 @@ export const useDropdownPosition = ({
       const y = anchorTop - top + container.scrollTop;
       let useTopAlignment = [DropdownDirection.TOP, DropdownDirection.TOP_LEFT, DropdownDirection.TOP_RIGHT].includes(direction);
       const hasBottomAlignment = [DropdownDirection.BOTTOM, DropdownDirection.BOTTOM_LEFT, DropdownDirection.BOTTOM_RIGHT].includes(direction);
-      if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {
-        useTopAlignment = true;
-        setShouldUseTopAlignment(true);
-      } else {
-        setShouldUseTopAlignment(false);
+      // The available space above and below the anchor within the container.
+      const spaceToTop = y;
+      const spaceToBottom = height - (y + anchorHeight);
+      if (lockedTopAlignmentRef.current !== null) {
+        // Keep the alignment that was decided when the dropdown opened.
+        useTopAlignment = lockedTopAlignmentRef.current;
+      } else if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {
+        // The content does not fit below the anchor. Only flip to the top when there is
+        // actually more space above than below. Otherwise the content would be cut off less
+        // when opened downwards (the content is limited to the available height anyway), so
+        // we keep the downward alignment. This avoids opening upwards for a content that,
+        // once limited to the available space, would fit below just fine.
+        useTopAlignment = spaceToTop > spaceToBottom;
       }
+      lockedTopAlignmentRef.current = useTopAlignment;
+      setShouldUseTopAlignment(useTopAlignment);
       // Calculate the space that is available for the dropdown content. When the dropdown is
       // opened to the top, the available space reaches from the anchor to the top edge of the
       // container. When it is opened to the bottom, it reaches from the bottom of the anchor
       // to the bottom edge of the container. A small spacing is subtracted so the content does
       // not touch the container edge (e.g. to leave room for shadows).
-      const spaceToTop = y;
-      const spaceToBottom = height - (y + anchorHeight);
       const nextAvailableMaxHeight = Math.max(Math.round((useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING), 0);
-      // Only update the available max height when it changes by more than one pixel. This
-      // prevents subpixel fluctuations of getBoundingClientRect from repeatedly triggering
-      // re-renders of the consumer, which could otherwise cause a layout shift loop.
+      // Ignore sub-pixel fluctuations so tiny changes from getBoundingClientRect do not
+      // repeatedly trigger re-renders that could keep the height oscillating.
       setAvailableMaxHeight(currentAvailableMaxHeight => Math.abs(currentAvailableMaxHeight - nextAvailableMaxHeight) <= 1 ? currentAvailableMaxHeight : nextAvailableMaxHeight);
       setCoordinates({
         x,
         y: useTopAlignment ? y : y + anchorHeight
       });
     }
-  }, [anchorElement, container, contentHeight, direction]);
+  }, [anchorElement, container, contentHeight, direction, shouldShowDropdown]);
   useIsomorphicLayoutEffect(() => {
+    // Reset the locked alignment whenever the dropdown is closed, so the next time it opens the
+    // alignment (top/bottom) is decided freshly based on the then-available space.
+    if (!shouldShowDropdown) {
+      lockedTopAlignmentRef.current = null;
+    }
     const handleResize = () => {
       calculateCoordinates();
       setTimeout(calculateCoordinates, 300);

package/lib/esm/hooks/dropdown.js.map CHANGED Viewed

	@@ -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","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","round","currentAvailableMaxHeight","abs","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 Math.round(\n (useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING,\n ),\n 0,\n );\n\n // Only update the available max height when it changes by more than one pixel. This\n // prevents subpixel fluctuations of getBoundingClientRect from repeatedly triggering\n // re-renders of the consumer, which could otherwise cause a layout shift loop.\n setAvailableMaxHeight((currentAvailableMaxHeight) =>\n Math.abs(currentAvailableMaxHeight - nextAvailableMaxHeight) <= 1\n ? currentAvailableMaxHeight\n : nextAvailableMaxHeight,\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, 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":[]}
1	+ {"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useRef","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","lockedTopAlignmentRef","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","spaceToTop","spaceToBottom","current","nextAvailableMaxHeight","Math","max","round","currentAvailableMaxHeight","abs","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, 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 // Stores the alignment decision (top/bottom) that was made when the dropdown opened. The\n // decision depends on the content height, but the content height in turn is limited by the\n // available height (which depends on the alignment). Recalculating the alignment on every\n // change would create a feedback loop that makes the alignment flip and the height oscillate.\n // We therefore lock the alignment while the dropdown stays open and reset it on close.\n const lockedTopAlignmentRef = useRef<boolean \| null>(null);\n\n const calculateCoordinates = useCallback(() => {\n // While the dropdown is closing (or closed) we must not recalculate the position and the\n // available height. Otherwise layout changes underneath the dropdown (e.g. content that\n // appears after a selection) would move or resize the dropdown body while it is still fading\n // out, causing it to visibly jump. Freezing the last calculated values keeps the closing\n // animation stable.\n if (!shouldShowDropdown) {\n return;\n }\n\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 // The available space above and below the anchor within the container.\n const spaceToTop = y;\n const spaceToBottom = height - (y + anchorHeight);\n\n if (lockedTopAlignmentRef.current !== null) {\n // Keep the alignment that was decided when the dropdown opened.\n useTopAlignment = lockedTopAlignmentRef.current;\n } else if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n // The content does not fit below the anchor. Only flip to the top when there is\n // actually more space above than below. Otherwise the content would be cut off less\n // when opened downwards (the content is limited to the available height anyway), so\n // we keep the downward alignment. This avoids opening upwards for a content that,\n // once limited to the available space, would fit below just fine.\n useTopAlignment = spaceToTop > spaceToBottom;\n }\n\n lockedTopAlignmentRef.current = useTopAlignment;\n\n setShouldUseTopAlignment(useTopAlignment);\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\n const nextAvailableMaxHeight = Math.max(\n Math.round(\n (useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING,\n ),\n 0,\n );\n\n // Ignore sub-pixel fluctuations so tiny changes from getBoundingClientRect do not\n // repeatedly trigger re-renders that could keep the height oscillating.\n setAvailableMaxHeight((currentAvailableMaxHeight) =>\n Math.abs(currentAvailableMaxHeight - nextAvailableMaxHeight) <= 1\n ? currentAvailableMaxHeight\n : nextAvailableMaxHeight,\n );\n\n setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n }\n }, [anchorElement, container, contentHeight, direction, shouldShowDropdown]);\n\n useIsomorphicLayoutEffect(() => {\n // Reset the locked alignment whenever the dropdown is closed, so the next time it opens the\n // alignment (top/bottom) is decided freshly based on the then-available space.\n if (!shouldShowDropdown) {\n lockedTopAlignmentRef.current = null;\n }\n\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":[]}

package/lib/esm/hooks/useKeyboardFocusHighlighting.js ADDED Viewed

@@ -0,0 +1,61 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
+import { useContext, useEffect, useState } from 'react';
+import { ColorSchemeContext } from '../components/color-scheme-provider/ColorSchemeProvider';
+/**
+ * Tracks whether focus highlighting should be visible for keyboard navigation.
+ * Keyboard mode is enabled via Tab and reset by mouse interaction.
+ */
+export const useKeyboardFocusHighlighting = isEnabledProp => {
+  const colorScheme = useContext(ColorSchemeContext);
+  const contextIsEnabled = colorScheme?.shouldEnableKeyboardHighlighting === true;
+  const isEnabled = isEnabledProp ?? contextIsEnabled;
+  const [isKeyboardNavigation, setIsKeyboardNavigation] = useState(false);
+  useEffect(() => {
+    const canListen = isEnabled && typeof window !== 'undefined';
+    const enableKeyboardNavigation = () => {
+      setIsKeyboardNavigation(true);
+    };
+    const handleKeyDown = event => {
+      // Ignore pure modifier presses, but treat any real keyboard interaction as keyboard navigation.
+      if (event.ctrlKey || event.altKey || event.metaKey) {
+        return;
+      }
+      if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) {
+        return;
+      }
+      enableKeyboardNavigation();
+    };
+    const handleFocusIn = event => {
+      const {
+        target
+      } = event;
+      // Fallback for first tab-focus when the keydown was not observed.
+      if (target instanceof HTMLElement && typeof target.matches === 'function' && target.matches(':focus-visible')) {
+        enableKeyboardNavigation();
+      }
+    };
+    const disableKeyboardNavigation = () => {
+      setIsKeyboardNavigation(current => current ? false : current);
+    };
+    if (canListen) {
+      window.addEventListener('keydown', handleKeyDown);
+      window.addEventListener('focusin', handleFocusIn);
+      window.addEventListener('mousedown', disableKeyboardNavigation);
+      window.addEventListener('mousemove', disableKeyboardNavigation);
+    } else {
+      setIsKeyboardNavigation(false);
+    }
+    return () => {
+      if (canListen) {
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('focusin', handleFocusIn);
+        window.removeEventListener('mousedown', disableKeyboardNavigation);
+        window.removeEventListener('mousemove', disableKeyboardNavigation);
+      }
+    };
+  }, [isEnabled]);
+  return Boolean(isEnabled && isKeyboardNavigation);
+};
+//# sourceMappingURL=useKeyboardFocusHighlighting.js.map

package/lib/esm/hooks/useKeyboardFocusHighlighting.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useKeyboardFocusHighlighting.js","names":["useContext","useEffect","useState","ColorSchemeContext","useKeyboardFocusHighlighting","isEnabledProp","colorScheme","contextIsEnabled","shouldEnableKeyboardHighlighting","isEnabled","isKeyboardNavigation","setIsKeyboardNavigation","canListen","window","enableKeyboardNavigation","handleKeyDown","event","ctrlKey","altKey","metaKey","includes","key","handleFocusIn","target","HTMLElement","matches","disableKeyboardNavigation","current","addEventListener","removeEventListener","Boolean"],"sources":["../../../src/hooks/useKeyboardFocusHighlighting.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */\nimport { useContext, useEffect, useState } from 'react';\nimport {\n ColorSchemeContext,\n type ColorSchemeContextProps,\n} from '../components/color-scheme-provider/ColorSchemeProvider';\n\n/**\n * Tracks whether focus highlighting should be visible for keyboard navigation.\n * Keyboard mode is enabled via Tab and reset by mouse interaction.\n */\nexport const useKeyboardFocusHighlighting = (isEnabledProp?: boolean): boolean => {\n const colorScheme = useContext<ColorSchemeContextProps | undefined>(ColorSchemeContext);\n const contextIsEnabled: boolean = colorScheme?.shouldEnableKeyboardHighlighting === true;\n const isEnabled: boolean = isEnabledProp ?? contextIsEnabled;\n\n const [isKeyboardNavigation, setIsKeyboardNavigation] = useState(false);\n\n useEffect(() => {\n const canListen = isEnabled && typeof window !== 'undefined';\n\n const enableKeyboardNavigation = () => {\n setIsKeyboardNavigation(true);\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // Ignore pure modifier presses, but treat any real keyboard interaction as keyboard navigation.\n if (event.ctrlKey || event.altKey || event.metaKey) {\n return;\n }\n\n if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) {\n return;\n }\n\n enableKeyboardNavigation();\n };\n\n const handleFocusIn = (event: FocusEvent) => {\n const { target } = event;\n\n // Fallback for first tab-focus when the keydown was not observed.\n if (\n target instanceof HTMLElement &&\n typeof target.matches === 'function' &&\n target.matches(':focus-visible')\n ) {\n enableKeyboardNavigation();\n }\n };\n\n const disableKeyboardNavigation = () => {\n setIsKeyboardNavigation((current) => (current ? false : current));\n };\n\n if (canListen) {\n window.addEventListener('keydown', handleKeyDown);\n window.addEventListener('focusin', handleFocusIn);\n window.addEventListener('mousedown', disableKeyboardNavigation);\n window.addEventListener('mousemove', disableKeyboardNavigation);\n } else {\n setIsKeyboardNavigation(false);\n }\n\n return () => {\n if (canListen) {\n window.removeEventListener('keydown', handleKeyDown);\n window.removeEventListener('focusin', handleFocusIn);\n window.removeEventListener('mousedown', disableKeyboardNavigation);\n window.removeEventListener('mousemove', disableKeyboardNavigation);\n }\n };\n }, [isEnabled]);\n\n return Boolean(isEnabled && isKeyboardNavigation);\n};\n"],"mappings":"AAAA;AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACvD,SACIC,kBAAkB,QAEf,yDAAyD;;AAEhE;AACA;AACA;AACA;AACA,OAAO,MAAMC,4BAA4B,GAAIC,aAAuB,IAAc;EAC9E,MAAMC,WAAW,GAAGN,UAAU,CAAsCG,kBAAkB,CAAC;EACvF,MAAMI,gBAAyB,GAAGD,WAAW,EAAEE,gCAAgC,KAAK,IAAI;EACxF,MAAMC,SAAkB,GAAGJ,aAAa,IAAIE,gBAAgB;EAE5D,MAAM,CAACG,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC;EAEvED,SAAS,CAAC,MAAM;IACZ,MAAMW,SAAS,GAAGH,SAAS,IAAI,OAAOI,MAAM,KAAK,WAAW;IAE5D,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;MACnCH,uBAAuB,CAAC,IAAI,CAAC;IACjC,CAAC;IAED,MAAMI,aAAa,GAAIC,KAAoB,IAAK;MAC5C;MACA,IAAIA,KAAK,CAACC,OAAO,IAAID,KAAK,CAACE,MAAM,IAAIF,KAAK,CAACG,OAAO,EAAE;QAChD;MACJ;MAEA,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACJ,KAAK,CAACK,GAAG,CAAC,EAAE;QACzD;MACJ;MAEAP,wBAAwB,CAAC,CAAC;IAC9B,CAAC;IAED,MAAMQ,aAAa,GAAIN,KAAiB,IAAK;MACzC,MAAM;QAAEO;MAAO,CAAC,GAAGP,KAAK;;MAExB;MACA,IACIO,MAAM,YAAYC,WAAW,IAC7B,OAAOD,MAAM,CAACE,OAAO,KAAK,UAAU,IACpCF,MAAM,CAACE,OAAO,CAAC,gBAAgB,CAAC,EAClC;QACEX,wBAAwB,CAAC,CAAC;MAC9B;IACJ,CAAC;IAED,MAAMY,yBAAyB,GAAGA,CAAA,KAAM;MACpCf,uBAAuB,CAAEgB,OAAO,IAAMA,OAAO,GAAG,KAAK,GAAGA,OAAQ,CAAC;IACrE,CAAC;IAED,IAAIf,SAAS,EAAE;MACXC,MAAM,CAACe,gBAAgB,CAAC,SAAS,EAAEb,aAAa,CAAC;MACjDF,MAAM,CAACe,gBAAgB,CAAC,SAAS,EAAEN,aAAa,CAAC;MACjDT,MAAM,CAACe,gBAAgB,CAAC,WAAW,EAAEF,yBAAyB,CAAC;MAC/Db,MAAM,CAACe,gBAAgB,CAAC,WAAW,EAAEF,yBAAyB,CAAC;IACnE,CAAC,MAAM;MACHf,uBAAuB,CAAC,KAAK,CAAC;IAClC;IAEA,OAAO,MAAM;MACT,IAAIC,SAAS,EAAE;QACXC,MAAM,CAACgB,mBAAmB,CAAC,SAAS,EAAEd,aAAa,CAAC;QACpDF,MAAM,CAACgB,mBAAmB,CAAC,SAAS,EAAEP,aAAa,CAAC;QACpDT,MAAM,CAACgB,mBAAmB,CAAC,WAAW,EAAEH,yBAAyB,CAAC;QAClEb,MAAM,CAACgB,mBAAmB,CAAC,WAAW,EAAEH,yBAAyB,CAAC;MACtE;IACJ,CAAC;EACL,CAAC,EAAE,CAACjB,SAAS,CAAC,CAAC;EAEf,OAAOqB,OAAO,CAACrB,SAAS,IAAIC,oBAAoB,CAAC;AACrD,CAAC","ignoreList":[]}

package/lib/esm/utils/file.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file.js","names":["hasDuplicate","items","newItem","comparator","some","item","filterDuplicateFile","files","newFile","a","b","name","size","filterDuplicateFileUrls","getHumanSize","bytes","FILE_SIZE_UNITS","unitIndex","Math","round","toString","replace","isValidFileType","types","file","allowedTypesArray","split","map","type","trim","fileType","endsWith","baseType","slice","startsWith","MIME_TYPE_MAPPING","getIconByMimeType","mimeType","matchedType","Object","keys","find"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import { UploadedFile } from '../components/file-select/FileSelect';\n\nexport const hasDuplicate = <T>(\n items: T[],\n newItem: T,\n comparator: (a: T, b: T) => boolean,\n): boolean => items.some((item) => comparator(item, newItem));\n\ninterface FilerDuplicateFileOptions {\n files: File[];\n newFile: File;\n}\n\nexport const filterDuplicateFile = ({ files, newFile }: FilerDuplicateFileOptions) =>\n hasDuplicate(files, newFile, (a, b) => a.name === b.name && a.size === b.size);\n\ninterface FilterDuplicateFileUrlsOptions {\n files: UploadedFile[];\n newFile: UploadedFile;\n}\n\nexport const filterDuplicateFileUrls = ({ files, newFile }: FilterDuplicateFileUrlsOptions) =>\n hasDuplicate(files, newFile, (a, b) => a === b);\n\nexport const getHumanSize = (bytes: number): string => {\n const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n let size = bytes \|\| 0;\n let unitIndex = 0;\n\n while (size >= 1024) {\n size /= 1024;\n unitIndex += 1;\n }\n\n size = Math.round(size * 10) / 10;\n\n return `${size.toString().replace('.', ',')} ${FILE_SIZE_UNITS[unitIndex] ?? ''}`;\n};\n\ninterface IsValidFileTypeOptions {\n file: File;\n types: string;\n}\n\nexport const isValidFileType = ({ types, file }: IsValidFileTypeOptions) => {\n const allowedTypesArray = types.split(',').map((type) => type.trim());\n const fileType = file.type;\n\n return allowedTypesArray.some((type) => {\n if (type.endsWith('/')) {\n const baseType = type.slice(0, -2); // remove '/'\n return fileType.startsWith(baseType);\n }\n return fileType === type;\n });\n};\n\nexport const MIME_TYPE_MAPPING: Record<string, string> = {\n // Haupttypen\n 'application/pdf': 'fa fa-file-pdf',\n 'application/zip': 'fa fa-file-archive',\n 'application/msword': 'fa fa-file-word',\n 'application/vnd.ms-excel': 'fa fa-file-excel',\n // Typen mit Wildcards\n 'application/vnd.openxmlformats-officedocument.': 'fa fa-file-word',\n 'application/x-': 'fa fa-file-archive',\n // Addiere nur spezifische Fälle\n 'text/pdf': 'fa fa-file-pdf',\n};\n\nexport const getIconByMimeType = (mimeType?: string): string => {\n const matchedType = Object.keys(MIME_TYPE_MAPPING).find((type) => mimeType?.startsWith(type));\n return MIME_TYPE_MAPPING[matchedType!] \|\| 'fa fa-file';\n};\n"],"mappings":"AAEA,OAAO,MAAMA,YAAY,GAAGA,CACxBC,KAAU,EACVC,OAAU,EACVC,UAAmC,KACzBF,KAAK,CAACG,IAAI,CAAEC,IAAI,IAAKF,UAAU,CAACE,IAAI,EAAEH,OAAO,CAAC,CAAC;AAO7D,OAAO,MAAMI,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAmC,CAAC,KAC7ER,YAAY,CAACO,KAAK,EAAEC,OAAO,EAAE,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,CAACE,IAAI,KAAKD,CAAC,CAACC,IAAI,IAAIF,CAAC,CAACG,IAAI,KAAKF,CAAC,CAACE,IAAI,CAAC;AAOlF,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEN,KAAK;EAAEC;AAAwC,CAAC,KACtFR,YAAY,CAACO,KAAK,EAAEC,OAAO,EAAE,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,KAAKC,CAAC,CAAC;AAEnD,OAAO,MAAMI,YAAY,GAAIC,KAAa,IAAa;EACnD,MAAMC,eAAe,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;EAC3D,IAAIJ,IAAI,GAAGG,KAAK,IAAI,CAAC;EACrB,IAAIE,SAAS,GAAG,CAAC;EAEjB,OAAOL,IAAI,IAAI,IAAI,EAAE;IACjBA,IAAI,IAAI,IAAI;IACZK,SAAS,IAAI,CAAC;EAClB;EAEAL,IAAI,GAAGM,IAAI,CAACC,KAAK,CAACP,IAAI,GAAG,EAAE,CAAC,GAAG,EAAE;EAEjC,OAAO,GAAGA,IAAI,CAACQ,QAAQ,CAAC,CAAC,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,IAAIL,eAAe,CAACC,SAAS,CAAC,IAAI,EAAE,EAAE;AACrF,CAAC;AAOD,OAAO,MAAMK,eAAe,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAA6B,CAAC,KAAK;EACxE,MAAMC,iBAAiB,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,CAAC,CAAC,CAAC;EACrE,MAAMC,QAAQ,GAAGN,IAAI,CAACI,IAAI;EAE1B,OAAOH,iBAAiB,CAACrB,IAAI,CAAEwB,IAAI,IAAK;IACpC,IAAIA,IAAI,CAACG,QAAQ,CAAC,IAAI,CAAC,EAAE;MACrB,MAAMC,QAAQ,GAAGJ,IAAI,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;MACpC,OAAOH,QAAQ,CAACI,UAAU,CAACF,QAAQ,CAAC;IACxC;IACA,OAAOF,QAAQ,KAAKF,IAAI;EAC5B,CAAC,CAAC;AACN,CAAC;AAED,OAAO,MAAMO,iBAAyC,GAAG;EACrD;EACA,iBAAiB,EAAE,gBAAgB;EACnC,iBAAiB,EAAE,oBAAoB;EACvC,oBAAoB,EAAE,iBAAiB;EACvC,0BAA0B,EAAE,kBAAkB;EAC9C;EACA,gDAAgD,EAAE,iBAAiB;EACnE,gBAAgB,EAAE,oBAAoB;EACtC;EACA,UAAU,EAAE;AAChB,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAIC,QAAiB,IAAa;EAC5D,MAAMC,WAAW,GAAGC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,IAAI,CAAEb,IAAI,IAAKS,QAAQ,EAAEH,UAAU,CAACN,IAAI,CAAC,CAAC;EAC7F,OAAOO,iBAAiB,CAACG,WAAW,CAAE,IAAI,YAAY;AAC1D,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"file.js","names":["hasDuplicate","items","newItem","comparator","some","item","filterDuplicateFile","files","newFile","a","b","name","size","filterDuplicateFileUrls","getHumanSize","bytes","FILE_SIZE_UNITS","unitIndex","Math","round","toString","replace","isValidFileType","types","file","allowedTypesArray","split","map","type","trim","fileType","endsWith","baseType","slice","startsWith","MIME_TYPE_MAPPING","getIconByMimeType","mimeType","matchedType","Object","keys","find"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import type { UploadedFile } from '../components/file-select/FileSelect';\n\nexport const hasDuplicate = <T>(\n items: T[],\n newItem: T,\n comparator: (a: T, b: T) => boolean,\n): boolean => items.some((item) => comparator(item, newItem));\n\ninterface FilerDuplicateFileOptions {\n files: File[];\n newFile: File;\n}\n\nexport const filterDuplicateFile = ({ files, newFile }: FilerDuplicateFileOptions) =>\n hasDuplicate(files, newFile, (a, b) => a.name === b.name && a.size === b.size);\n\ninterface FilterDuplicateFileUrlsOptions {\n files: UploadedFile[];\n newFile: UploadedFile;\n}\n\nexport const filterDuplicateFileUrls = ({ files, newFile }: FilterDuplicateFileUrlsOptions) =>\n hasDuplicate(files, newFile, (a, b) => a === b);\n\nexport const getHumanSize = (bytes: number): string => {\n const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n let size = bytes \|\| 0;\n let unitIndex = 0;\n\n while (size >= 1024) {\n size /= 1024;\n unitIndex += 1;\n }\n\n size = Math.round(size * 10) / 10;\n\n return `${size.toString().replace('.', ',')} ${FILE_SIZE_UNITS[unitIndex] ?? ''}`;\n};\n\ninterface IsValidFileTypeOptions {\n file: File;\n types: string;\n}\n\nexport const isValidFileType = ({ types, file }: IsValidFileTypeOptions) => {\n const allowedTypesArray = types.split(',').map((type) => type.trim());\n const fileType = file.type;\n\n return allowedTypesArray.some((type) => {\n if (type.endsWith('/')) {\n const baseType = type.slice(0, -2); // remove '/'\n return fileType.startsWith(baseType);\n }\n return fileType === type;\n });\n};\n\nexport const MIME_TYPE_MAPPING: Record<string, string> = {\n // Haupttypen\n 'application/pdf': 'fa fa-file-pdf',\n 'application/zip': 'fa fa-file-archive',\n 'application/msword': 'fa fa-file-word',\n 'application/vnd.ms-excel': 'fa fa-file-excel',\n // Typen mit Wildcards\n 'application/vnd.openxmlformats-officedocument.': 'fa fa-file-word',\n 'application/x-': 'fa fa-file-archive',\n // Addiere nur spezifische Fälle\n 'text/pdf': 'fa fa-file-pdf',\n};\n\nexport const getIconByMimeType = (mimeType?: string): string => {\n const matchedType = Object.keys(MIME_TYPE_MAPPING).find((type) => mimeType?.startsWith(type));\n return MIME_TYPE_MAPPING[matchedType!] \|\| 'fa fa-file';\n};\n"],"mappings":"AAEA,OAAO,MAAMA,YAAY,GAAGA,CACxBC,KAAU,EACVC,OAAU,EACVC,UAAmC,KACzBF,KAAK,CAACG,IAAI,CAAEC,IAAI,IAAKF,UAAU,CAACE,IAAI,EAAEH,OAAO,CAAC,CAAC;AAO7D,OAAO,MAAMI,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAmC,CAAC,KAC7ER,YAAY,CAACO,KAAK,EAAEC,OAAO,EAAE,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,CAACE,IAAI,KAAKD,CAAC,CAACC,IAAI,IAAIF,CAAC,CAACG,IAAI,KAAKF,CAAC,CAACE,IAAI,CAAC;AAOlF,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEN,KAAK;EAAEC;AAAwC,CAAC,KACtFR,YAAY,CAACO,KAAK,EAAEC,OAAO,EAAE,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,KAAKC,CAAC,CAAC;AAEnD,OAAO,MAAMI,YAAY,GAAIC,KAAa,IAAa;EACnD,MAAMC,eAAe,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;EAC3D,IAAIJ,IAAI,GAAGG,KAAK,IAAI,CAAC;EACrB,IAAIE,SAAS,GAAG,CAAC;EAEjB,OAAOL,IAAI,IAAI,IAAI,EAAE;IACjBA,IAAI,IAAI,IAAI;IACZK,SAAS,IAAI,CAAC;EAClB;EAEAL,IAAI,GAAGM,IAAI,CAACC,KAAK,CAACP,IAAI,GAAG,EAAE,CAAC,GAAG,EAAE;EAEjC,OAAO,GAAGA,IAAI,CAACQ,QAAQ,CAAC,CAAC,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,IAAIL,eAAe,CAACC,SAAS,CAAC,IAAI,EAAE,EAAE;AACrF,CAAC;AAOD,OAAO,MAAMK,eAAe,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAA6B,CAAC,KAAK;EACxE,MAAMC,iBAAiB,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,CAAC,CAAC,CAAC;EACrE,MAAMC,QAAQ,GAAGN,IAAI,CAACI,IAAI;EAE1B,OAAOH,iBAAiB,CAACrB,IAAI,CAAEwB,IAAI,IAAK;IACpC,IAAIA,IAAI,CAACG,QAAQ,CAAC,IAAI,CAAC,EAAE;MACrB,MAAMC,QAAQ,GAAGJ,IAAI,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;MACpC,OAAOH,QAAQ,CAACI,UAAU,CAACF,QAAQ,CAAC;IACxC;IACA,OAAOF,QAAQ,KAAKF,IAAI;EAC5B,CAAC,CAAC;AACN,CAAC;AAED,OAAO,MAAMO,iBAAyC,GAAG;EACrD;EACA,iBAAiB,EAAE,gBAAgB;EACnC,iBAAiB,EAAE,oBAAoB;EACvC,oBAAoB,EAAE,iBAAiB;EACvC,0BAA0B,EAAE,kBAAkB;EAC9C;EACA,gDAAgD,EAAE,iBAAiB;EACnE,gBAAgB,EAAE,oBAAoB;EACtC;EACA,UAAU,EAAE;AAChB,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAIC,QAAiB,IAAa;EAC5D,MAAMC,WAAW,GAAGC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,IAAI,CAAEb,IAAI,IAAKS,QAAQ,EAAEH,UAAU,CAACN,IAAI,CAAC,CAAC;EAC7F,OAAOO,iBAAiB,CAACG,WAAW,CAAE,IAAI,YAAY;AAC1D,CAAC","ignoreList":[]}

package/lib/esm/utils/keyboardFocusHighlighting.styles.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { css } from 'styled-components';
+/**
+ * Shared focus ring for components with keyboard-only highlighting.
+ * Apply this only when keyboard highlighting is enabled/active.
+ */
+export const keyboardFocusHighlightingRingCss = css`
+    outline: solid 2px color-mix(in srgb, white 70%, transparent);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
+    border-radius: 3px;
+    outline-offset: 1px;
+`;
+/**
+ * Circular focus ring variant for round controls (e.g. RadioButton).
+ */
+export const keyboardFocusHighlightingCircleRingCss = css`
+    outline: solid 2px color-mix(in srgb, white 70%, transparent);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
+    border-radius: 50%;
+    outline-offset: 1px;
+    color: white;
+`;
+//# sourceMappingURL=keyboardFocusHighlighting.styles.js.map

package/lib/esm/utils/keyboardFocusHighlighting.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"keyboardFocusHighlighting.styles.js","names":["css","keyboardFocusHighlightingRingCss","keyboardFocusHighlightingCircleRingCss"],"sources":["../../../src/utils/keyboardFocusHighlighting.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\n\n/**\n * Shared focus ring for components with keyboard-only highlighting.\n * Apply this only when keyboard highlighting is enabled/active.\n */\nexport const keyboardFocusHighlightingRingCss = css`\n outline: solid 2px color-mix(in srgb, white 70%, transparent);\n box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n border-radius: 3px;\n outline-offset: 1px;\n`;\n\n/**\n * Circular focus ring variant for round controls (e.g. RadioButton).\n */\nexport const keyboardFocusHighlightingCircleRingCss = css`\n outline: solid 2px color-mix(in srgb, white 70%, transparent);\n box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n border-radius: 50%;\n outline-offset: 1px;\n color: white;\n`;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,mBAAmB;;AAEvC;AACA;AACA;AACA;AACA,OAAO,MAAMC,gCAAgC,GAAGD,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAME,sCAAsC,GAAGF,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/types/components/accordion/Accordion.d.ts CHANGED Viewed

@@ -135,6 +135,11 @@ export type AccordionProps = {
      * Whether the accordion should be indexed.
      */
     shouldIndex?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting. The highlighting is only visible while the
+     * user navigates with the keyboard and is reset on mouse movement or click.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
 };
 declare const Accordion: FC<AccordionProps>;
 export default Accordion;

package/lib/types/components/accordion/Accordion.styles.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 export declare const StyledMotionAccordion: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
-}, "theme" | "$isWrapped" | "$isOpen" | "$isParentWrapped" | "$shouldForceBackground" | "$shouldHideBackground" | "$shouldShowLines" | "$shouldHideBottomLine" | "$bottomBorderColor"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "theme" | "$shouldShowKeyboardHighlighting" | "$isWrapped" | "$isOpen" | "$isParentWrapped" | "$shouldForceBackground" | "$shouldHideBackground" | "$shouldShowLines" | "$shouldHideBottomLine" | "$bottomBorderColor" | "$shouldEnableKeyboardHighlighting"> & {
     $isOpen: boolean;
     $isParentWrapped?: boolean;
     $isWrapped?: boolean;
@@ -9,11 +9,13 @@ export declare const StyledMotionAccordion: import("styled-components/dist/types
     $shouldShowLines?: boolean;
     $shouldHideBottomLine: boolean;
     $bottomBorderColor?: string;
+    $shouldEnableKeyboardHighlighting?: boolean;
+    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
-}, "theme" | "$isWrapped" | "$isOpen" | "$isParentWrapped" | "$shouldForceBackground" | "$shouldHideBackground" | "$shouldShowLines" | "$shouldHideBottomLine" | "$bottomBorderColor"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "theme" | "$shouldShowKeyboardHighlighting" | "$isWrapped" | "$isOpen" | "$isParentWrapped" | "$shouldForceBackground" | "$shouldHideBackground" | "$shouldShowLines" | "$shouldHideBottomLine" | "$bottomBorderColor" | "$shouldEnableKeyboardHighlighting"> & {
     $isOpen: boolean;
     $isParentWrapped?: boolean;
     $isWrapped?: boolean;
@@ -22,6 +24,8 @@ export declare const StyledMotionAccordion: import("styled-components/dist/types
     $shouldShowLines?: boolean;
     $shouldHideBottomLine: boolean;
     $bottomBorderColor?: string;
+    $shouldEnableKeyboardHighlighting?: boolean;
+    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;

package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 export declare const StyledMotionAccordionBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "theme" | "$maxHeight"> & {
     $maxHeight?: number;
 } & {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "theme" | "$maxHeight"> & {
     $maxHeight?: number;
 } & {

package/lib/types/components/accordion/accordion-group/AccordionGroup.d.ts CHANGED Viewed

@@ -2,14 +2,19 @@ import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react';
 type IUpdateOpenAccordionUuid = (uuid: string, options?: {
     shouldOnlyOpen?: boolean;
 }) => void;
-type IUpdateAccordionUuids = (uuids: string[]) => void;
+type IUpdateActiveAccordionUuid = (uuid?: string) => void;
+type IRegisterAccordionUuid = (uuid: string) => void;
+type IUnregisterAccordionUuid = (uuid: string) => void;
 interface IAccordionGroupContext {
     isWrapped?: boolean;
     openAccordionUuid?: string;
     setOpenAccordionUuid?: Dispatch<SetStateAction<string | undefined>>;
     updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;
     accordionUuids?: string[];
-    updateAccordionUuids?: IUpdateAccordionUuids;
+    registerAccordionUuid?: IRegisterAccordionUuid;
+    unregisterAccordionUuid?: IUnregisterAccordionUuid;
+    activeAccordionUuid?: string;
+    updateActiveAccordionUuid?: IUpdateActiveAccordionUuid;
     accordionGroupUuid?: string;
 }
 export declare const AccordionGroupContext: React.Context<IAccordionGroupContext>;

package/lib/types/components/accordion/accordion-head/AccordionHead.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ export type AccordionHeadProps = {
     titleInputProps?: InputProps;
     titleColor?: CSSProperties['color'];
     shouldSkipAnimation?: boolean;
+    shouldEnableKeyboardHighlighting?: boolean;
 };
 declare const AccordionHead: FC<AccordionHeadProps>;
 export default AccordionHead;