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

@chayns-components/core 5.4.5 → 5.4.6-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 (472) 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

@@ -50,11 +50,6 @@ export const useDropdownAlignment = ({
     y: translateY
   }), [translateX, translateY]);
 };
-/**
- * The space (in pixels) that should be kept between the dropdown content and the edge of the
- * container when calculating the available maximum height.
- */
-const AVAILABLE_HEIGHT_SPACING = 16;
 export const useDropdownPosition = ({
   anchorElement,
   container,
@@ -67,7 +62,6 @@ export const useDropdownPosition = ({
     y: 0
   });
   const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);
-  const [availableMaxHeight, setAvailableMaxHeight] = useState(0);
   const calculateCoordinates = useCallback(() => {
     if (container) {
       const {
@@ -90,16 +84,6 @@ export const useDropdownPosition = ({
       } else {
         setShouldUseTopAlignment(false);
       }
-      // 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((useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING, 0);
-      setAvailableMaxHeight(nextAvailableMaxHeight);
       setCoordinates({
         x,
         y: useTopAlignment ? y : y + anchorHeight
@@ -121,9 +105,8 @@ export const useDropdownPosition = ({
   }, [calculateCoordinates, shouldShowDropdown]);
   return useMemo(() => ({
     shouldUseTopAlignment,
-    coordinates,
-    availableMaxHeight
-  }), [availableMaxHeight, coordinates, shouldUseTopAlignment]);
+    coordinates
+  }), [coordinates, shouldUseTopAlignment]);
 };
 export const useDropdown = ({
   anchorElement,
@@ -135,8 +118,7 @@ export const useDropdown = ({
 }) => {
   const {
     shouldUseTopAlignment,
-    coordinates,
-    availableMaxHeight
+    coordinates
   } = useDropdownPosition({
     anchorElement,
     container,
@@ -154,8 +136,7 @@ export const useDropdown = ({
   return useMemo(() => ({
     coordinates,
     transform,
-    width,
-    availableMaxHeight
-  }), [availableMaxHeight, coordinates, transform, width]);
+    width
+  }), [coordinates, transform, width]);
 };
 //# sourceMappingURL=dropdown.js.map

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","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n onClick: (event: MouseEvent) => void;\n onClose: () => void;\n onTouchEnd: (event: TouchEvent) => void;\n onTouchStart: (event: TouchEvent) => void;\n shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick, shouldCaptureEvents);\n document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.addEventListener('blur', onClose);\n\n return () => {\n document.removeEventListener('click', onClick, shouldCaptureEvents);\n document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.removeEventListener('blur', onClose);\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n contentWidth: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n const [translateX, setTranslateX] = useState<string>('0px');\n const [translateY, setTranslateY] = useState<string>('0px');\n\n useEffect(() => {\n if (\n [\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.LEFT,\n ].includes(direction)\n ) {\n const difference = anchorElement.clientWidth - contentWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, contentWidth, direction]);\n\n useEffect(() => {\n const useTopAlignment =\n shouldUseTopAlignment \|\|\n [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n if (useTopAlignment) {\n setTranslateY('-100%');\n } else {\n setTranslateY('0px');\n }\n }, [direction, shouldUseTopAlignment]);\n\n return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\n/*\n The space (in pixels) that should be kept between the dropdown content and the edge of the\n * container when calculating the available maximum height.\n */\nconst AVAILABLE_HEIGHT_SPACING = 16;\n\nexport const useDropdownPosition = ({\n anchorElement,\n container,\n contentHeight = 0,\n direction,\n shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n const [availableMaxHeight, setAvailableMaxHeight] = useState<number>(0);\n\n const calculateCoordinates = useCallback(() => {\n if (container) {\n const {\n left: anchorLeft,\n top: anchorTop,\n height: anchorHeight,\n } = anchorElement.getBoundingClientRect();\n\n const { left, top, height } = container.getBoundingClientRect();\n\n const x = anchorLeft - left + container.scrollLeft;\n const y = anchorTop - top + container.scrollTop;\n\n let useTopAlignment = [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n const hasBottomAlignment = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n useTopAlignment = true;\n\n setShouldUseTopAlignment(true);\n } else {\n setShouldUseTopAlignment(false);\n }\n\n // Calculate the space that is available for the dropdown content. When the dropdown is\n // opened to the top, the available space reaches from the anchor to the top edge of the\n // container. When it is opened to the bottom, it reaches from the bottom of the anchor\n // to the bottom edge of the container. A small spacing is subtracted so the content does\n // not touch the container edge (e.g. to leave room for shadows).\n const spaceToTop = y;\n const spaceToBottom = height - (y + anchorHeight);\n\n const nextAvailableMaxHeight = Math.max(\n (useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING,\n 0,\n );\n\n setAvailableMaxHeight(nextAvailableMaxHeight);\n\n setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n }\n }, [anchorElement, container, contentHeight, direction]);\n\n useIsomorphicLayoutEffect(() => {\n const handleResize = () => {\n calculateCoordinates();\n\n setTimeout(calculateCoordinates, 300);\n };\n\n handleResize();\n\n if (shouldShowDropdown) {\n window.addEventListener('resize', handleResize);\n }\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [calculateCoordinates, shouldShowDropdown]);\n\n return useMemo(\n () => ({ shouldUseTopAlignment, coordinates, availableMaxHeight }),\n [availableMaxHeight, coordinates, shouldUseTopAlignment],\n );\n};\n\ninterface UseDropdownOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n contentWidth: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n container,\n contentHeight,\n contentWidth,\n direction,\n shouldShowDropdown,\n}: UseDropdownOptions) => {\n const { shouldUseTopAlignment, coordinates, availableMaxHeight } = useDropdownPosition({\n anchorElement,\n container,\n contentHeight,\n direction,\n shouldShowDropdown,\n });\n\n const transform = useDropdownAlignment({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n });\n\n const width = anchorElement.clientWidth;\n\n return useMemo(\n () => ({ coordinates, transform, width, availableMaxHeight }),\n [availableMaxHeight, coordinates, transform, width],\n );\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,eAAe,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAClF,SAA8BC,iBAAiB,QAAQ,mBAAmB;AAE1E,MAAMC,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGL,eAAe,GAAGD,SAAS;AAU7F,OAAO,MAAMO,mBAAmB,GAAGA,CAAC;EAChCC,OAAO;EACPC,OAAO;EACPC,UAAU;EACVC,YAAY;EACZC;AACwB,CAAC,KAAK;EAC9BZ,SAAS,CAAC,MAAM;IACZa,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEN,OAAO,EAAEI,mBAAmB,CAAC;IAChEC,QAAQ,CAACC,gBAAgB,CAAC,UAAU,EAAEJ,UAAU,EAAEE,mBAAmB,CAAC;IACtEC,QAAQ,CAACC,gBAAgB,CAAC,YAAY,EAAEH,YAAY,EAAEC,mBAAmB,CAAC;IAE1EN,MAAM,CAACQ,gBAAgB,CAAC,MAAM,EAAEL,OAAO,CAAC;IAExC,OAAO,MAAM;MACTI,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEP,OAAO,EAAEI,mBAAmB,CAAC;MACnEC,QAAQ,CAACE,mBAAmB,CAAC,UAAU,EAAEL,UAAU,EAAEE,mBAAmB,CAAC;MACzEC,QAAQ,CAACE,mBAAmB,CAAC,YAAY,EAAEJ,YAAY,EAAEC,mBAAmB,CAAC;MAE7EN,MAAM,CAACS,mBAAmB,CAAC,MAAM,EAAEN,OAAO,CAAC;IAC/C,CAAC;EACL,CAAC,EAAE,CAACD,OAAO,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,CAAC,CAAC;AACpD,CAAC;AASD,OAAO,MAAMK,oBAAoB,GAAGA,CAAC;EACjCC,aAAa;EACbC,YAAY;EACZC,SAAS;EACTC;AACyB,CAAC,KAAK;EAC/B,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAAS,KAAK,CAAC;EAC3D,MAAM,CAACoB,UAAU,EAAEC,aAAa,CAAC,GAAGrB,QAAQ,CAAS,KAAK,CAAC;EAE3DH,SAAS,CAAC,MAAM;IACZ,IACI,CACII,iBAAiB,CAACqB,WAAW,EAC7BrB,iBAAiB,CAACsB,QAAQ,EAC1BtB,iBAAiB,CAACuB,IAAI,CACzB,CAACC,QAAQ,CAACT,SAAS,CAAC,EACvB;MACE,MAAMU,UAAU,GAAGZ,aAAa,CAACa,WAAW,GAAGZ,YAAY;MAE3DI,aAAa,CAAC,GAAGO,UAAU,IAAI,CAAC;IACpC,CAAC,MAAM;MACHP,aAAa,CAAC,KAAK,CAAC;IACxB;EACJ,CAAC,EAAE,CAACL,aAAa,CAACa,WAAW,EAAEZ,YAAY,EAAEC,SAAS,CAAC,CAAC;EAExDnB,SAAS,CAAC,MAAM;IACZ,MAAM+B,eAAe,GACjBX,qBAAqB,IACrB,CACIhB,iBAAiB,CAAC4B,GAAG,EACrB5B,iBAAiB,CAACsB,QAAQ,EAC1BtB,iBAAiB,CAAC6B,SAAS,CAC9B,CAACL,QAAQ,CAACT,SAAS,CAAC;IAEzB,IAAIY,eAAe,EAAE;MACjBP,aAAa,CAAC,OAAO,CAAC;IAC1B,CAAC,MAAM;MACHA,aAAa,CAAC,KAAK,CAAC;IACxB;EACJ,CAAC,EAAE,CAACL,SAAS,EAAEC,qBAAqB,CAAC,CAAC;EAEtC,OAAOlB,OAAO,CAAC,OAAO;IAAEgC,CAAC,EAAEb,UAAU;IAAEc,CAAC,EAAEZ;EAAW,CAAC,CAAC,EAAE,CAACF,UAAU,EAAEE,UAAU,CAAC,CAAC;AACtF,CAAC;AAUD;AACA;AACA;AACA;AACA,MAAMa,wBAAwB,GAAG,EAAE;AAEnC,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCpB,aAAa;EACbqB,SAAS;EACTC,aAAa,GAAG,CAAC;EACjBpB,SAAS;EACTqB;AACwB,CAAC,KAAK;EAC9B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGvC,QAAQ,CAAsB;IAAE+B,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EACnF,MAAM,CAACf,qBAAqB,EAAEuB,wBAAwB,CAAC,GAAGxC,QAAQ,CAAC,KAAK,CAAC;EACzE,MAAM,CAACyC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG1C,QAAQ,CAAS,CAAC,CAAC;EAEvE,MAAM2C,oBAAoB,GAAG/C,WAAW,CAAC,MAAM;IAC3C,IAAIuC,SAAS,EAAE;MACX,MAAM;QACFS,IAAI,EAAEC,UAAU;QAChBC,GAAG,EAAEC,SAAS;QACdC,MAAM,EAAEC;MACZ,CAAC,GAAGnC,aAAa,CAACoC,qBAAqB,CAAC,CAAC;MAEzC,MAAM;QAAEN,IAAI;QAAEE,GAAG;QAAEE;MAAO,CAAC,GAAGb,SAAS,CAACe,qBAAqB,CAAC,CAAC;MAE/D,MAAMnB,CAAC,GAAGc,UAAU,GAAGD,IAAI,GAAGT,SAAS,CAACgB,UAAU;MAClD,MAAMnB,CAAC,GAAGe,SAAS,GAAGD,GAAG,GAAGX,SAAS,CAACiB,SAAS;MAE/C,IAAIxB,eAAe,GAAG,CAClB3B,iBAAiB,CAAC4B,GAAG,EACrB5B,iBAAiB,CAACsB,QAAQ,EAC1BtB,iBAAiB,CAAC6B,SAAS,CAC9B,CAACL,QAAQ,CAACT,SAAS,CAAC;MAErB,MAAMqC,kBAAkB,GAAG,CACvBpD,iBAAiB,CAACqD,MAAM,EACxBrD,iBAAiB,CAACqB,WAAW,EAC7BrB,iBAAiB,CAACsD,YAAY,CACjC,CAAC9B,QAAQ,CAACT,SAAS,CAAC;MAErB,IAAI,CAACqC,kBAAkB,IAAIrB,CAAC,GAAGiB,YAAY,GAAGb,aAAa,GAAGY,MAAM,EAAE;QAClEpB,eAAe,GAAG,IAAI;QAEtBY,wBAAwB,CAAC,IAAI,CAAC;MAClC,CAAC,MAAM;QACHA,wBAAwB,CAAC,KAAK,CAAC;MACnC;;MAEA;MACA;MACA;MACA;MACA;MACA,MAAMgB,UAAU,GAAGxB,CAAC;MACpB,MAAMyB,aAAa,GAAGT,MAAM,IAAIhB,CAAC,GAAGiB,YAAY,CAAC;MAEjD,MAAMS,sBAAsB,GAAGC,IAAI,CAACC,GAAG,CACnC,CAAChC,eAAe,GAAG4B,UAAU,GAAGC,aAAa,IAAIxB,wBAAwB,EACzE,CACJ,CAAC;MAEDS,qBAAqB,CAACgB,sBAAsB,CAAC;MAE7CnB,cAAc,CAAC;QAAER,CAAC;QAAEC,CAAC,EAAEJ,eAAe,GAAGI,CAAC,GAAGA,CAAC,GAAGiB;MAAa,CAAC,CAAC;IACpE;EACJ,CAAC,EAAE,CAACnC,aAAa,EAAEqB,SAAS,EAAEC,aAAa,EAAEpB,SAAS,CAAC,CAAC;EAExDd,yBAAyB,CAAC,MAAM;IAC5B,MAAM2D,YAAY,GAAGA,CAAA,KAAM;MACvBlB,oBAAoB,CAAC,CAAC;MAEtBmB,UAAU,CAACnB,oBAAoB,EAAE,GAAG,CAAC;IACzC,CAAC;IAEDkB,YAAY,CAAC,CAAC;IAEd,IAAIxB,kBAAkB,EAAE;MACpBlC,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEkD,YAAY,CAAC;IACnD;IAEA,OAAO,MAAM;MACT1D,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEiD,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAAClB,oBAAoB,EAAEN,kBAAkB,CAAC,CAAC;EAE9C,OAAOtC,OAAO,CACV,OAAO;IAAEkB,qBAAqB;IAAEqB,WAAW;IAAEG;EAAmB,CAAC,CAAC,EAClE,CAACA,kBAAkB,EAAEH,WAAW,EAAErB,qBAAqB,CAC3D,CAAC;AACL,CAAC;AAWD,OAAO,MAAM8C,WAAW,GAAGA,CAAC;EACxBjD,aAAa;EACbqB,SAAS;EACTC,aAAa;EACbrB,YAAY;EACZC,SAAS;EACTqB;AACgB,CAAC,KAAK;EACtB,MAAM;IAAEpB,qBAAqB;IAAEqB,WAAW;IAAEG;EAAmB,CAAC,GAAGP,mBAAmB,CAAC;IACnFpB,aAAa;IACbqB,SAAS;IACTC,aAAa;IACbpB,SAAS;IACTqB;EACJ,CAAC,CAAC;EAEF,MAAM2B,SAAS,GAAGnD,oBAAoB,CAAC;IACnCC,aAAa;IACbC,YAAY;IACZC,SAAS;IACTC;EACJ,CAAC,CAAC;EAEF,MAAMgD,KAAK,GAAGnD,aAAa,CAACa,WAAW;EAEvC,OAAO5B,OAAO,CACV,OAAO;IAAEuC,WAAW;IAAE0B,SAAS;IAAEC,KAAK;IAAExB;EAAmB,CAAC,CAAC,EAC7D,CAACA,kBAAkB,EAAEH,WAAW,EAAE0B,SAAS,EAAEC,KAAK,CACtD,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n onClick: (event: MouseEvent) => void;\n onClose: () => void;\n onTouchEnd: (event: TouchEvent) => void;\n onTouchStart: (event: TouchEvent) => void;\n shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n onClick,\n onClose,\n onTouchEnd,\n onTouchStart,\n shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n useEffect(() => {\n document.addEventListener('click', onClick, shouldCaptureEvents);\n document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.addEventListener('blur', onClose);\n\n return () => {\n document.removeEventListener('click', onClick, shouldCaptureEvents);\n document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n window.removeEventListener('blur', onClose);\n };\n }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n direction: DropdownDirection;\n shouldUseTopAlignment: boolean;\n contentWidth: number;\n anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n const [translateX, setTranslateX] = useState<string>('0px');\n const [translateY, setTranslateY] = useState<string>('0px');\n\n useEffect(() => {\n if (\n [\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.LEFT,\n ].includes(direction)\n ) {\n const difference = anchorElement.clientWidth - contentWidth;\n\n setTranslateX(`${difference}px`);\n } else {\n setTranslateX('0px');\n }\n }, [anchorElement.clientWidth, contentWidth, direction]);\n\n useEffect(() => {\n const useTopAlignment =\n shouldUseTopAlignment \|\|\n [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n if (useTopAlignment) {\n setTranslateY('-100%');\n } else {\n setTranslateY('0px');\n }\n }, [direction, shouldUseTopAlignment]);\n\n return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n anchorElement,\n container,\n contentHeight = 0,\n direction,\n shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n const calculateCoordinates = useCallback(() => {\n if (container) {\n const {\n left: anchorLeft,\n top: anchorTop,\n height: anchorHeight,\n } = anchorElement.getBoundingClientRect();\n\n const { left, top, height } = container.getBoundingClientRect();\n\n const x = anchorLeft - left + container.scrollLeft;\n const y = anchorTop - top + container.scrollTop;\n\n let useTopAlignment = [\n DropdownDirection.TOP,\n DropdownDirection.TOP_LEFT,\n DropdownDirection.TOP_RIGHT,\n ].includes(direction);\n\n const hasBottomAlignment = [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes(direction);\n\n if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n useTopAlignment = true;\n\n setShouldUseTopAlignment(true);\n } else {\n setShouldUseTopAlignment(false);\n }\n\n setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n }\n }, [anchorElement, container, contentHeight, direction]);\n\n useIsomorphicLayoutEffect(() => {\n const handleResize = () => {\n calculateCoordinates();\n\n setTimeout(calculateCoordinates, 300);\n };\n\n handleResize();\n\n if (shouldShowDropdown) {\n window.addEventListener('resize', handleResize);\n }\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [calculateCoordinates, shouldShowDropdown]);\n\n return useMemo(\n () => ({ shouldUseTopAlignment, coordinates }),\n [coordinates, shouldUseTopAlignment],\n );\n};\n\ninterface UseDropdownOptions {\n anchorElement: Element;\n container?: Element;\n contentHeight?: number;\n contentWidth: number;\n direction: DropdownDirection;\n shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n anchorElement,\n container,\n contentHeight,\n contentWidth,\n direction,\n shouldShowDropdown,\n}: UseDropdownOptions) => {\n const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n anchorElement,\n container,\n contentHeight,\n direction,\n shouldShowDropdown,\n });\n\n const transform = useDropdownAlignment({\n anchorElement,\n contentWidth,\n direction,\n shouldUseTopAlignment,\n });\n\n const width = anchorElement.clientWidth;\n\n return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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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;