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

package/lib/cjs/components/truncation/Truncation.styles.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTruncationPseudoContent = exports.StyledTruncationClampWrapper = exports.StyledTruncationClamp = exports.StyledTruncation = exports.StyledMotionTruncationContent = void 0;
+exports.StyledTruncationPseudoContent = exports.StyledTruncationClampWrapper = exports.StyledTruncationClampFocusWrapper = exports.StyledTruncationClamp = exports.StyledTruncation = exports.StyledMotionTruncationContent = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _truncation = require("../../types/truncation");
+var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledTruncation = exports.StyledTruncation = _styledComponents.default.div`
     position: relative;
@@ -45,8 +46,24 @@ const StyledTruncationClampWrapper = exports.StyledTruncationClampWrapper = _sty
   }
 }}
 `;
+const StyledTruncationClampFocusWrapper = exports.StyledTruncationClampFocusWrapper = _styledComponents.default.div`
+    display: inline-block;
+    border-radius: 3px;
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-within {
+                transition: none;
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
+                color: inherit;
+            }
+        `}
+`;
 const StyledTruncationClamp = exports.StyledTruncationClamp = _styledComponents.default.a`
     cursor: pointer;
     z-index: 2;
+    display: inline-block;
+    line-height: 1.2;
 `;
 //# sourceMappingURL=Truncation.styles.js.map

package/lib/cjs/components/truncation/Truncation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_truncation","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTruncation","exports","styled","div","StyledMotionTruncationContent","motion","StyledTruncationPseudoContent","StyledTruncationClampWrapper","$position","ClampPosition","Left","css","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAuD,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGhD,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACO,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAEM,MAAMG,6BAA6B,GAAAL,OAAA,CAAAK,6BAAA,GAAGJ,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAIM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACC,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEK;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,yBAAa,CAACC,IAAI;MACnB,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,yBAAa,CAACG,MAAM;MACrB,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAEM,MAAME,qBAAqB,GAAAZ,OAAA,CAAAY,qBAAA,GAAGX,yBAAM,CAACY,CAAC;AAC7C;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Truncation.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_truncation","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTruncation","exports","styled","div","StyledMotionTruncationContent","motion","StyledTruncationPseudoContent","StyledTruncationClampWrapper","$position","ClampPosition","Left","css","Middle","StyledTruncationClampFocusWrapper","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAEA,IAAAI,0BAAA,GAAAJ,OAAA;AAAgG,SAAAE,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzF,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACO,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAEM,MAAMG,6BAA6B,GAAAL,OAAA,CAAAK,6BAAA,GAAGJ,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAIM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACC,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEK;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,yBAAa,CAACC,IAAI;MACnB,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,yBAAa,CAACG,MAAM;MACrB,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAMM,MAAME,iCAAiC,GAAAZ,OAAA,CAAAY,iCAAA,GAAGX,yBAAM,CAACC,GAA+B;AACvF;AACA;AACA;AACA,MAAM,CAAC;EAAEW;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAH,qBAAG;AACX;AACA;AACA,kBAAkBI,2DAAgC;AAClD;AACA;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,qBAAqB,GAAAf,OAAA,CAAAe,qBAAA,GAAGd,yBAAM,CAACe,CAAC;AAC7C;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/hooks/dropdown.js

@@ -76,7 +76,22 @@ const useDropdownPosition = ({
   });
   const [shouldUseTopAlignment, setShouldUseTopAlignment] = (0, _react.useState)(false);
   const [availableMaxHeight, setAvailableMaxHeight] = (0, _react.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 = (0, _react.useRef)(null);
   const calculateCoordinates = (0, _react.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,
@@ -92,33 +107,47 @@ const useDropdownPosition = ({
       const y = anchorTop - top + container.scrollTop;
       let useTopAlignment = [_dropdown.DropdownDirection.TOP, _dropdown.DropdownDirection.TOP_LEFT, _dropdown.DropdownDirection.TOP_RIGHT].includes(direction);
       const hasBottomAlignment = [_dropdown.DropdownDirection.BOTTOM, _dropdown.DropdownDirection.BOTTOM_LEFT, _dropdown.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/cjs/hooks/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","exports","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","useState","translateY","setTranslateY","DropdownDirection","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","useMemo","x","y","AVAILABLE_HEIGHT_SPACING","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","availableMaxHeight","setAvailableMaxHeight","calculateCoordinates","useCallback","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","spaceToTop","spaceToBottom","nextAvailableMaxHeight","Math","max","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":[]}
+{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","exports","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","useState","translateY","setTranslateY","DropdownDirection","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","useMemo","x","y","AVAILABLE_HEIGHT_SPACING","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","availableMaxHeight","setAvailableMaxHeight","lockedTopAlignmentRef","useRef","calculateCoordinates","useCallback","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/cjs/hooks/useKeyboardFocusHighlighting.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyboardFocusHighlighting = void 0;
+var _react = require("react");
+var _ColorSchemeProvider = require("../components/color-scheme-provider/ColorSchemeProvider");
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
+
+/**
+ * Tracks whether focus highlighting should be visible for keyboard navigation.
+ * Keyboard mode is enabled via Tab and reset by mouse interaction.
+ */
+const useKeyboardFocusHighlighting = isEnabledProp => {
+  const colorScheme = (0, _react.useContext)(_ColorSchemeProvider.ColorSchemeContext);
+  const contextIsEnabled = (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) === true;
+  const isEnabled = isEnabledProp ?? contextIsEnabled;
+  const [isKeyboardNavigation, setIsKeyboardNavigation] = (0, _react.useState)(false);
+  (0, _react.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);
+};
+exports.useKeyboardFocusHighlighting = useKeyboardFocusHighlighting;
+//# sourceMappingURL=useKeyboardFocusHighlighting.js.map

package/lib/cjs/hooks/useKeyboardFocusHighlighting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardFocusHighlighting.js","names":["_react","require","_ColorSchemeProvider","useKeyboardFocusHighlighting","isEnabledProp","colorScheme","useContext","ColorSchemeContext","contextIsEnabled","shouldEnableKeyboardHighlighting","isEnabled","isKeyboardNavigation","setIsKeyboardNavigation","useState","useEffect","canListen","window","enableKeyboardNavigation","handleKeyDown","event","ctrlKey","altKey","metaKey","includes","key","handleFocusIn","target","HTMLElement","matches","disableKeyboardNavigation","current","addEventListener","removeEventListener","Boolean","exports"],"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":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,oBAAA,GAAAD,OAAA;AAFA;;AAOA;AACA;AACA;AACA;AACO,MAAME,4BAA4B,GAAIC,aAAuB,IAAc;EAC9E,MAAMC,WAAW,GAAG,IAAAC,iBAAU,EAAsCC,uCAAkB,CAAC;EACvF,MAAMC,gBAAyB,GAAG,CAAAH,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEI,gCAAgC,MAAK,IAAI;EACxF,MAAMC,SAAkB,GAAGN,aAAa,IAAII,gBAAgB;EAE5D,MAAM,CAACG,oBAAoB,EAAEC,uBAAuB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEvE,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,SAAS,GAAGL,SAAS,IAAI,OAAOM,MAAM,KAAK,WAAW;IAE5D,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;MACnCL,uBAAuB,CAAC,IAAI,CAAC;IACjC,CAAC;IAED,MAAMM,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;MACpCjB,uBAAuB,CAAEkB,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;MACHjB,uBAAuB,CAAC,KAAK,CAAC;IAClC;IAEA,OAAO,MAAM;MACT,IAAIG,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,CAACnB,SAAS,CAAC,CAAC;EAEf,OAAOuB,OAAO,CAACvB,SAAS,IAAIC,oBAAoB,CAAC;AACrD,CAAC;AAACuB,OAAA,CAAA/B,4BAAA,GAAAA,4BAAA","ignoreList":[]}

package/lib/cjs/utils/file.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.js","names":["hasDuplicate","items","newItem","comparator","some","item","exports","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":"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","ignoreList":[]}
+{"version":3,"file":"file.js","names":["hasDuplicate","items","newItem","comparator","some","item","exports","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":"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","ignoreList":[]}

package/lib/cjs/utils/keyboardFocusHighlighting.styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.keyboardFocusHighlightingRingCss = exports.keyboardFocusHighlightingCircleRingCss = void 0;
+var _styledComponents = require("styled-components");
+/**
+ * Shared focus ring for components with keyboard-only highlighting.
+ * Apply this only when keyboard highlighting is enabled/active.
+ */
+const keyboardFocusHighlightingRingCss = exports.keyboardFocusHighlightingRingCss = (0, _styledComponents.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).
+ */
+const keyboardFocusHighlightingCircleRingCss = exports.keyboardFocusHighlightingCircleRingCss = (0, _styledComponents.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/cjs/utils/keyboardFocusHighlighting.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardFocusHighlighting.styles.js","names":["_styledComponents","require","keyboardFocusHighlightingRingCss","exports","css","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,IAAAA,iBAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACO,MAAMC,gCAAgC,GAAAC,OAAA,CAAAD,gCAAA,GAAG,IAAAE,qBAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACO,MAAMC,sCAAsC,GAAAF,OAAA,CAAAE,sCAAA,GAAG,IAAAD,qBAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/accordion/Accordion.js

@@ -1,7 +1,9 @@
 import { AnimatePresence, MotionConfig } from 'motion/react';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useUuid } from '../../hooks/uuid';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { AreaContext } from '../area-provider/AreaContextProvider';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 import AccordionBody from './accordion-body/AccordionBody';
 import { AccordionGroupContext } from './accordion-group/AccordionGroup';
 import AccordionHead from './accordion-head/AccordionHead';
@@ -41,14 +43,19 @@ const Accordion = ({
   shouldSkipAnimation: shouldSkipAnimationProp = false,
   colors,
   shouldIndex = false,
-  onBodyAnimationComplete
+  onBodyAnimationComplete,
+  shouldEnableKeyboardHighlighting
 }) => {
   const {
     isWrapped: groupIsWrapped,
     openAccordionUuid,
     accordionGroupUuid,
     accordionUuids,
-    updateOpenAccordionUuid
+    updateOpenAccordionUuid,
+    activeAccordionUuid,
+    updateActiveAccordionUuid,
+    registerAccordionUuid,
+    unregisterAccordionUuid
   } = useContext(AccordionGroupContext);
   const {
     isWrapped: isParentWrapped
@@ -56,8 +63,11 @@ const Accordion = ({
   const {
     isWrapped: contextIsWrapped
   } = useContext(AccordionWrappedContext);
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const isWrapped = useMemo(() => groupIsWrapped ?? contextIsWrapped, [contextIsWrapped, groupIsWrapped]);
   const [isAccordionOpen, setIsAccordionOpen] = useState(isDefaultOpen ?? isOpened);
+  const [isGroupFocusWithin, setIsGroupFocusWithin] = useState(false);
   const uuid = useUuid();
   const isInitialRenderRef = useRef(true);
   const initialRenderSkipRef = useInitialRenderRef(true);
@@ -67,6 +77,18 @@ const Accordion = ({
   const isOpenRef = useRef(isOpen);
   const onCloseRef = useRef(onClose);
   const onOpenRef = useRef(onOpen);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
+  const isKeyboardFocusable = !isDisabled && (shouldIndex || shouldEnableKeyboardHighlightingEffective);
+  const isInKeyboardNavigationGroup = isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function' && typeof accordionGroupUuid === 'string';
+  useEffect(() => {
+    if (typeof accordionGroupUuid === 'string' && typeof registerAccordionUuid === 'function' && typeof unregisterAccordionUuid === 'function') {
+      registerAccordionUuid(uuid);
+      return () => {
+        unregisterAccordionUuid(uuid);
+      };
+    }
+    return undefined;
+  }, [accordionGroupUuid, registerAccordionUuid, unregisterAccordionUuid, uuid]);
   const isLastAccordion = useMemo(() => accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false, [accordionUuids, uuid]);
   useEffect(() => {
     isOpenRef.current = isOpen;
@@ -77,11 +99,14 @@ const Accordion = ({
     if (isDisabled) {
       return;
     }
+    if (isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function') {
+      updateActiveAccordionUuid(uuid);
+    }
     if (typeof updateOpenAccordionUuid === 'function') {
       updateOpenAccordionUuid(uuid);
     }
     setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
-  }, [isDisabled, updateOpenAccordionUuid, uuid]);
+  }, [isDisabled, isKeyboardFocusable, updateActiveAccordionUuid, updateOpenAccordionUuid, uuid]);
   useEffect(() => {
     if (isDisabled && isOpen) {
       if (typeof updateOpenAccordionUuid === 'function') {
@@ -145,6 +170,75 @@ const Accordion = ({
       opacity: 0
     };
   }, [isOpen, shouldSkipAnimation]);
+  const tabIndex = useMemo(() => isKeyboardFocusable ? 0 : -1, [isKeyboardFocusable]);
+  const handleKeyDown = useCallback(e => {
+    const isCurrentAccordionTarget = e.currentTarget === e.target;
+    if (isCurrentAccordionTarget && isInKeyboardNavigationGroup && accordionUuids?.length && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      const currentIndex = accordionUuids.indexOf(uuid);
+      if (currentIndex !== -1) {
+        const nextIndex = e.key === 'ArrowDown' ? (currentIndex + 1) % accordionUuids.length : (currentIndex - 1 + accordionUuids.length) % accordionUuids.length;
+        const nextAccordionUuid = accordionUuids[nextIndex];
+        if (nextAccordionUuid && nextAccordionUuid !== uuid) {
+          const nextAccordionElement = document.querySelector(`[data-uuid="${accordionGroupUuid}---${nextAccordionUuid}"]`);
+          if (nextAccordionElement) {
+            updateActiveAccordionUuid(nextAccordionUuid);
+            nextAccordionElement.focus();
+            return;
+          }
+        }
+      }
+    }
+    if (isCurrentAccordionTarget && (e.key === 'Enter' || e.key === ' ') && isKeyboardFocusable) {
+      handleHeadClick();
+    }
+    if (isCurrentAccordionTarget && e.key === 'ArrowRight' && isKeyboardFocusable && !isOpen) {
+      e.preventDefault();
+      handleHeadClick();
+    }
+    if (isCurrentAccordionTarget && (e.key === 'Escape' || e.key === 'ArrowLeft')) {
+      if (isOpen && isKeyboardFocusable) {
+        e.preventDefault();
+        handleHeadClick();
+        return;
+      }
+      if (isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function') {
+        e.preventDefault();
+        updateActiveAccordionUuid(undefined);
+        let parentAccordion = e.currentTarget.parentElement?.closest('.beta-chayns-accordion');
+        while (parentAccordion) {
+          const parentGroupId = parentAccordion.getAttribute('data-uuid')?.split('---')[0];
+          if (parentGroupId !== accordionGroupUuid) {
+            parentAccordion.focus();
+            break;
+          }
+          parentAccordion = parentAccordion.parentElement?.closest('.beta-chayns-accordion');
+        }
+      }
+    }
+  }, [accordionGroupUuid, accordionUuids, handleHeadClick, isInKeyboardNavigationGroup, isKeyboardFocusable, isOpen, updateActiveAccordionUuid, uuid]);
+  const handleFocus = useCallback(e => {
+    if (e.currentTarget === e.target && isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function') {
+      setIsGroupFocusWithin(true);
+      updateActiveAccordionUuid(uuid);
+    }
+  }, [isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid]);
+  const handleBlur = useCallback(e => {
+    if (isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function' && typeof accordionGroupUuid === 'string') {
+      const nextFocusedElement = e.relatedTarget;
+      const currentGroupElement = e.currentTarget;
+      if (!nextFocusedElement || !currentGroupElement.contains(nextFocusedElement)) {
+        setIsGroupFocusWithin(false);
+        updateActiveAccordionUuid(undefined);
+      }
+    }
+  }, [accordionGroupUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid]);
+  useEffect(() => {
+    if (!isInKeyboardNavigationGroup) {
+      setIsGroupFocusWithin(false);
+    } else if (activeAccordionUuid == null && typeof updateActiveAccordionUuid === 'function' && accordionUuids?.[0] === uuid) {
+      updateActiveAccordionUuid(uuid);
+    }
+  }, [accordionUuids, activeAccordionUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid]);
   return /*#__PURE__*/React.createElement(StyledMotionAccordion, {
     animate: {
       height: 'auto',
@@ -158,7 +252,7 @@ const Accordion = ({
     },
     initial: initialAnimation,
     $isOpen: isOpen,
-    tabIndex: shouldIndex ? 0 : -1,
+    tabIndex: tabIndex,
     $shouldShowLines: !isLastAccordion || !isWrapped,
     $isParentWrapped: isParentWrapped,
     $isWrapped: isWrapped,
@@ -166,13 +260,11 @@ const Accordion = ({
     $shouldHideBackground: shouldHideBackground,
     $shouldHideBottomLine: shouldHideBottomLine,
     $bottomBorderColor: colors?.borderBottomColor,
-    onKeyDown: e => {
-      if ((e.key === 'Enter' || e.key === ' ') && e.target.className.includes('beta-chayns-accordion') && shouldIndex) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleHeadClick();
-      }
-    },
+    $shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     onMouseEnter: onHoverStart,
     onMouseLeave: onHoverEnd,
     transition: {
@@ -202,7 +294,8 @@ const Accordion = ({
     titleElement: titleElement,
     onTitleInputChange: onTitleInputChange,
     titleInputProps: titleInputProps,
-    titleColor: colors?.titleColor
+    titleColor: colors?.titleColor,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
   }), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, (isOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(AccordionBody, {