@chayns-components/core 5.4.13-alpha.0 → 5.4.14-alpha.0

package/lib/cjs/components/page-provider/PageProvider.js

@@ -47,7 +47,7 @@ const PageProvider = ({
   const usableHeight = (0, _pageProvider.useUsableHeight)({
     shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight
   });
-  const shouldUsePadding = !shouldRemovePadding && ![_chaynsApi.RuntimeEnviroment.IntercomPlugin, _chaynsApi.RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
+  const shouldUsePadding = !shouldRemovePadding && ![_chaynsApi.RuntimeEnviroment.IntercomPlugin, _chaynsApi.RuntimeEnviroment.PagemakerPlugin, 6, 8].includes(runtimeEnvironment);
   return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
     className: "page-provider",
     $shouldUsePadding: shouldUsePadding,

package/lib/cjs/components/page-provider/PageProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_styledComponents","_pageProvider","_ColorSchemeProvider","_PageProvider","e","__esModule","default","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","shouldEnableKeyboardHighlighting","runtimeEnvironment","useEnvironment","usableHeight","useUsableHeight","shouldReduceByCoverHeight","shouldUsePadding","RuntimeEnviroment","IntercomPlugin","PagemakerPlugin","includes","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","height","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n *   {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Controls whether the usable height should be reduced by the cover height\n     * @description\n     * When true, the usable height will be reduced by the cover image height. This is useful\n     * when the page should not be scrollable due to the cover image. The property has no effect\n     * when `shouldUseUsableHeight` is false.\n     * @default false\n     * @optional\n     */\n    shouldReduceUsableHeightByCoverHeight?: boolean;\n    /**\n     * Controls whether padding should be removed from the page\n     * @description\n     * When true, the padding around the page content will be removed. This is useful when the\n     * page should not have any padding, for example, when it is embedded in a pagemaker page.\n     * @default false\n     * @optional\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Controls whether the component should use the calculated usable height\n     * @description\n     * When true, the page will cover the entire usable height of the screen. This means that\n     * the viewport is not scrollable and the page takes up the full height not required by the\n     * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n     * `shouldReduceUsableHeightByCoverHeight` to true.\n     * @default false\n     * @optional\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    secondaryColor,\n    siteId,\n    style = {},\n    shouldReduceUsableHeightByCoverHeight = false,\n    shouldRemovePadding = false,\n    shouldUseUsableHeight = false,\n    iconColor,\n    customVariables,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n\n    const usableHeight = useUsableHeight({\n        shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n    });\n\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n            runtimeEnvironment as number,\n        );\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                customVariables={customVariables}\n                iconColor={iconColor}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAH,sBAAA,CAAAF,OAAA;AAGA,IAAAM,aAAA,GAAAN,OAAA;AAA2D,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMG,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC,eAAe;EACfC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,yBAAc,EAAC,CAAC;EAE/C,MAAMC,YAAY,GAAG,IAAAC,6BAAe,EAAC;IACjCC,yBAAyB,EAAEV;EAC/B,CAAC,CAAC;EAEF,MAAMW,gBAAgB,GAClB,CAACV,mBAAmB,IACpB,CAAC,CAACW,4BAAiB,CAACC,cAAc,EAAED,4BAAiB,CAACE,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9ET,kBACJ,CAAC;EAEL,oBACIxB,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAAC7B,aAAA,CAAA8B,kBAAkB;IACfC,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAER,gBAAiB;IACpCS,aAAa,EAAElB,qBAAqB,GAAGM,YAAY,GAAGa;EAAU,gBAEhEvC,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAAC9B,oBAAA,CAAAI,OAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEuB,MAAM,EAAE;IAAO,CAAC,GAAGvB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA,SAAU;IACrBE,gCAAgC,EAAEA;EAAiC,GAElEX,QACgB,CAAC,eACtBZ,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAACzB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDE,YAAY,CAAC8B,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnC,OAAA,GAE3BG,YAAY","ignoreList":[]}
+{"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_styledComponents","_pageProvider","_ColorSchemeProvider","_PageProvider","e","__esModule","default","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","shouldEnableKeyboardHighlighting","runtimeEnvironment","useEnvironment","usableHeight","useUsableHeight","shouldReduceByCoverHeight","shouldUsePadding","RuntimeEnviroment","IntercomPlugin","PagemakerPlugin","includes","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","height","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n *   {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Controls whether the usable height should be reduced by the cover height\n     * @description\n     * When true, the usable height will be reduced by the cover image height. This is useful\n     * when the page should not be scrollable due to the cover image. The property has no effect\n     * when `shouldUseUsableHeight` is false.\n     * @default false\n     * @optional\n     */\n    shouldReduceUsableHeightByCoverHeight?: boolean;\n    /**\n     * Controls whether padding should be removed from the page\n     * @description\n     * When true, the padding around the page content will be removed. This is useful when the\n     * page should not have any padding, for example, when it is embedded in a pagemaker page.\n     * @default false\n     * @optional\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Controls whether the component should use the calculated usable height\n     * @description\n     * When true, the page will cover the entire usable height of the screen. This means that\n     * the viewport is not scrollable and the page takes up the full height not required by the\n     * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n     * `shouldReduceUsableHeightByCoverHeight` to true.\n     * @default false\n     * @optional\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    secondaryColor,\n    siteId,\n    style = {},\n    shouldReduceUsableHeightByCoverHeight = false,\n    shouldRemovePadding = false,\n    shouldUseUsableHeight = false,\n    iconColor,\n    customVariables,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n\n    const usableHeight = useUsableHeight({\n        shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n    });\n\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6, 8].includes(\n            runtimeEnvironment as number,\n        );\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                customVariables={customVariables}\n                iconColor={iconColor}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAH,sBAAA,CAAAF,OAAA;AAGA,IAAAM,aAAA,GAAAN,OAAA;AAA2D,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMG,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC,eAAe;EACfC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,yBAAc,EAAC,CAAC;EAE/C,MAAMC,YAAY,GAAG,IAAAC,6BAAe,EAAC;IACjCC,yBAAyB,EAAEV;EAC/B,CAAC,CAAC;EAEF,MAAMW,gBAAgB,GAClB,CAACV,mBAAmB,IACpB,CAAC,CAACW,4BAAiB,CAACC,cAAc,EAAED,4BAAiB,CAACE,eAAe,EAAE,CAAC,EAAE,CAAC,CAAC,CAACC,QAAQ,CACjFT,kBACJ,CAAC;EAEL,oBACIxB,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAAC7B,aAAA,CAAA8B,kBAAkB;IACfC,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAER,gBAAiB;IACpCS,aAAa,EAAElB,qBAAqB,GAAGM,YAAY,GAAGa;EAAU,gBAEhEvC,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAAC9B,oBAAA,CAAAI,OAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEuB,MAAM,EAAE;IAAO,CAAC,GAAGvB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA,SAAU;IACrBE,gCAAgC,EAAEA;EAAiC,GAElEX,QACgB,CAAC,eACtBZ,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAACzB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDE,YAAY,CAAC8B,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnC,OAAA,GAE3BG,YAAY","ignoreList":[]}

package/lib/cjs/hooks/useKeyboardFocusHighlighting.js

@@ -8,6 +8,8 @@ var _react = require("react");
 var _ColorSchemeProvider = require("../components/color-scheme-provider/ColorSchemeProvider");
 /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
 
+const KEYBOARD_NAVIGATION_KEYS = new Set(['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', ' ', 'Spacebar', 'Escape', 'Home', 'End', 'PageUp', 'PageDown']);
+
 /**
  * Tracks whether focus highlighting should be visible for keyboard navigation.
  * Keyboard mode is enabled via Tab and reset by mouse interaction.
@@ -23,31 +25,19 @@ const useKeyboardFocusHighlighting = isEnabledProp => {
       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)) {
+      if (!KEYBOARD_NAVIGATION_KEYS.has(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 {
@@ -56,7 +46,6 @@ const useKeyboardFocusHighlighting = isEnabledProp => {
     return () => {
       if (canListen) {
         window.removeEventListener('keydown', handleKeyDown);
-        window.removeEventListener('focusin', handleFocusIn);
         window.removeEventListener('mousedown', disableKeyboardNavigation);
         window.removeEventListener('mousemove', disableKeyboardNavigation);
       }

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

@@ -1 +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":[]}
+{"version":3,"file":"useKeyboardFocusHighlighting.js","names":["_react","require","_ColorSchemeProvider","KEYBOARD_NAVIGATION_KEYS","Set","useKeyboardFocusHighlighting","isEnabledProp","colorScheme","useContext","ColorSchemeContext","contextIsEnabled","shouldEnableKeyboardHighlighting","isEnabled","isKeyboardNavigation","setIsKeyboardNavigation","useState","useEffect","canListen","window","enableKeyboardNavigation","handleKeyDown","event","ctrlKey","altKey","metaKey","has","key","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\nconst KEYBOARD_NAVIGATION_KEYS = new Set([\n    'Tab',\n    'ArrowUp',\n    'ArrowDown',\n    'ArrowLeft',\n    'ArrowRight',\n    'Enter',\n    ' ',\n    'Spacebar',\n    'Escape',\n    'Home',\n    'End',\n    'PageUp',\n    'PageDown',\n]);\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            if (event.ctrlKey || event.altKey || event.metaKey) {\n                return;\n            }\n\n            if (!KEYBOARD_NAVIGATION_KEYS.has(event.key)) {\n                return;\n            }\n\n            enableKeyboardNavigation();\n        };\n\n        const disableKeyboardNavigation = () => {\n            setIsKeyboardNavigation((current) => (current ? false : current));\n        };\n\n        if (canListen) {\n            window.addEventListener('keydown', handleKeyDown);\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('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,MAAME,wBAAwB,GAAG,IAAIC,GAAG,CAAC,CACrC,KAAK,EACL,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,OAAO,EACP,GAAG,EACH,UAAU,EACV,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,CACb,CAAC;;AAEF;AACA;AACA;AACA;AACO,MAAMC,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,IAAIA,KAAK,CAACC,OAAO,IAAID,KAAK,CAACE,MAAM,IAAIF,KAAK,CAACG,OAAO,EAAE;QAChD;MACJ;MAEA,IAAI,CAACrB,wBAAwB,CAACsB,GAAG,CAACJ,KAAK,CAACK,GAAG,CAAC,EAAE;QAC1C;MACJ;MAEAP,wBAAwB,CAAC,CAAC;IAC9B,CAAC;IAED,MAAMQ,yBAAyB,GAAGA,CAAA,KAAM;MACpCb,uBAAuB,CAAEc,OAAO,IAAMA,OAAO,GAAG,KAAK,GAAGA,OAAQ,CAAC;IACrE,CAAC;IAED,IAAIX,SAAS,EAAE;MACXC,MAAM,CAACW,gBAAgB,CAAC,SAAS,EAAET,aAAa,CAAC;MACjDF,MAAM,CAACW,gBAAgB,CAAC,WAAW,EAAEF,yBAAyB,CAAC;MAC/DT,MAAM,CAACW,gBAAgB,CAAC,WAAW,EAAEF,yBAAyB,CAAC;IACnE,CAAC,MAAM;MACHb,uBAAuB,CAAC,KAAK,CAAC;IAClC;IAEA,OAAO,MAAM;MACT,IAAIG,SAAS,EAAE;QACXC,MAAM,CAACY,mBAAmB,CAAC,SAAS,EAAEV,aAAa,CAAC;QACpDF,MAAM,CAACY,mBAAmB,CAAC,WAAW,EAAEH,yBAAyB,CAAC;QAClET,MAAM,CAACY,mBAAmB,CAAC,WAAW,EAAEH,yBAAyB,CAAC;MACtE;IACJ,CAAC;EACL,CAAC,EAAE,CAACf,SAAS,CAAC,CAAC;EAEf,OAAOmB,OAAO,CAACnB,SAAS,IAAIC,oBAAoB,CAAC;AACrD,CAAC;AAACmB,OAAA,CAAA3B,4BAAA,GAAAA,4BAAA","ignoreList":[]}

package/lib/esm/components/page-provider/PageProvider.js

@@ -41,7 +41,7 @@ const PageProvider = ({
   const usableHeight = useUsableHeight({
     shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight
   });
-  const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
+  const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6, 8].includes(runtimeEnvironment);
   return /*#__PURE__*/React.createElement(StyledPageProvider, {
     className: "page-provider",
     $shouldUsePadding: shouldUsePadding,

package/lib/esm/components/page-provider/PageProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","shouldEnableKeyboardHighlighting","runtimeEnvironment","usableHeight","shouldReduceByCoverHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n *   {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Controls whether the usable height should be reduced by the cover height\n     * @description\n     * When true, the usable height will be reduced by the cover image height. This is useful\n     * when the page should not be scrollable due to the cover image. The property has no effect\n     * when `shouldUseUsableHeight` is false.\n     * @default false\n     * @optional\n     */\n    shouldReduceUsableHeightByCoverHeight?: boolean;\n    /**\n     * Controls whether padding should be removed from the page\n     * @description\n     * When true, the padding around the page content will be removed. This is useful when the\n     * page should not have any padding, for example, when it is embedded in a pagemaker page.\n     * @default false\n     * @optional\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Controls whether the component should use the calculated usable height\n     * @description\n     * When true, the page will cover the entire usable height of the screen. This means that\n     * the viewport is not scrollable and the page takes up the full height not required by the\n     * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n     * `shouldReduceUsableHeightByCoverHeight` to true.\n     * @default false\n     * @optional\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    secondaryColor,\n    siteId,\n    style = {},\n    shouldReduceUsableHeightByCoverHeight = false,\n    shouldRemovePadding = false,\n    shouldUseUsableHeight = false,\n    iconColor,\n    customVariables,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n\n    const usableHeight = useUsableHeight({\n        shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n    });\n\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n            runtimeEnvironment as number,\n        );\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                customVariables={customVariables}\n                iconColor={iconColor}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC,eAAe;EACfC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAE/C,MAAMqB,YAAY,GAAGlB,eAAe,CAAC;IACjCmB,yBAAyB,EAAER;EAC/B,CAAC,CAAC;EAEF,MAAMS,gBAAgB,GAClB,CAACR,mBAAmB,IACpB,CAAC,CAAChB,iBAAiB,CAACyB,cAAc,EAAEzB,iBAAiB,CAAC0B,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EN,kBACJ,CAAC;EAEL,oBACInB,KAAA,CAAA0B,aAAA,CAACtB,kBAAkB;IACfuB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEN,gBAAiB;IACpCO,aAAa,EAAEd,qBAAqB,GAAGK,YAAY,GAAGU;EAAU,gBAEhE9B,KAAA,CAAA0B,aAAA,CAACvB,mBAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEmB,MAAM,EAAE;IAAO,CAAC,GAAGnB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA,SAAU;IACrBE,gCAAgC,EAAEA;EAAiC,GAElEX,QACgB,CAAC,eACtBP,KAAA,CAAA0B,aAAA,CAACrB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAAC0B,WAAW,GAAG,cAAc;AAEzC,eAAe1B,YAAY","ignoreList":[]}
+{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","shouldEnableKeyboardHighlighting","runtimeEnvironment","usableHeight","shouldReduceByCoverHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n *   {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Controls whether the usable height should be reduced by the cover height\n     * @description\n     * When true, the usable height will be reduced by the cover image height. This is useful\n     * when the page should not be scrollable due to the cover image. The property has no effect\n     * when `shouldUseUsableHeight` is false.\n     * @default false\n     * @optional\n     */\n    shouldReduceUsableHeightByCoverHeight?: boolean;\n    /**\n     * Controls whether padding should be removed from the page\n     * @description\n     * When true, the padding around the page content will be removed. This is useful when the\n     * page should not have any padding, for example, when it is embedded in a pagemaker page.\n     * @default false\n     * @optional\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Controls whether the component should use the calculated usable height\n     * @description\n     * When true, the page will cover the entire usable height of the screen. This means that\n     * the viewport is not scrollable and the page takes up the full height not required by the\n     * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n     * `shouldReduceUsableHeightByCoverHeight` to true.\n     * @default false\n     * @optional\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    secondaryColor,\n    siteId,\n    style = {},\n    shouldReduceUsableHeightByCoverHeight = false,\n    shouldRemovePadding = false,\n    shouldUseUsableHeight = false,\n    iconColor,\n    customVariables,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n\n    const usableHeight = useUsableHeight({\n        shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n    });\n\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6, 8].includes(\n            runtimeEnvironment as number,\n        );\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                customVariables={customVariables}\n                iconColor={iconColor}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC,eAAe;EACfC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAE/C,MAAMqB,YAAY,GAAGlB,eAAe,CAAC;IACjCmB,yBAAyB,EAAER;EAC/B,CAAC,CAAC;EAEF,MAAMS,gBAAgB,GAClB,CAACR,mBAAmB,IACpB,CAAC,CAAChB,iBAAiB,CAACyB,cAAc,EAAEzB,iBAAiB,CAAC0B,eAAe,EAAE,CAAC,EAAE,CAAC,CAAC,CAACC,QAAQ,CACjFN,kBACJ,CAAC;EAEL,oBACInB,KAAA,CAAA0B,aAAA,CAACtB,kBAAkB;IACfuB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEN,gBAAiB;IACpCO,aAAa,EAAEd,qBAAqB,GAAGK,YAAY,GAAGU;EAAU,gBAEhE9B,KAAA,CAAA0B,aAAA,CAACvB,mBAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEmB,MAAM,EAAE;IAAO,CAAC,GAAGnB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA,SAAU;IACrBE,gCAAgC,EAAEA;EAAiC,GAElEX,QACgB,CAAC,eACtBP,KAAA,CAAA0B,aAAA,CAACrB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAAC0B,WAAW,GAAG,cAAc;AAEzC,eAAe1B,YAAY","ignoreList":[]}

package/lib/esm/hooks/useKeyboardFocusHighlighting.js

@@ -1,6 +1,7 @@
 /* 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';
+const KEYBOARD_NAVIGATION_KEYS = new Set(['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', ' ', 'Spacebar', 'Escape', 'Home', 'End', 'PageUp', 'PageDown']);
 
 /**
  * Tracks whether focus highlighting should be visible for keyboard navigation.
@@ -17,31 +18,19 @@ export const useKeyboardFocusHighlighting = isEnabledProp => {
       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)) {
+      if (!KEYBOARD_NAVIGATION_KEYS.has(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 {
@@ -50,7 +39,6 @@ export const useKeyboardFocusHighlighting = isEnabledProp => {
     return () => {
       if (canListen) {
         window.removeEventListener('keydown', handleKeyDown);
-        window.removeEventListener('focusin', handleFocusIn);
         window.removeEventListener('mousedown', disableKeyboardNavigation);
         window.removeEventListener('mousemove', disableKeyboardNavigation);
       }

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

@@ -1 +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":[]}
+{"version":3,"file":"useKeyboardFocusHighlighting.js","names":["useContext","useEffect","useState","ColorSchemeContext","KEYBOARD_NAVIGATION_KEYS","Set","useKeyboardFocusHighlighting","isEnabledProp","colorScheme","contextIsEnabled","shouldEnableKeyboardHighlighting","isEnabled","isKeyboardNavigation","setIsKeyboardNavigation","canListen","window","enableKeyboardNavigation","handleKeyDown","event","ctrlKey","altKey","metaKey","has","key","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\nconst KEYBOARD_NAVIGATION_KEYS = new Set([\n    'Tab',\n    'ArrowUp',\n    'ArrowDown',\n    'ArrowLeft',\n    'ArrowRight',\n    'Enter',\n    ' ',\n    'Spacebar',\n    'Escape',\n    'Home',\n    'End',\n    'PageUp',\n    'PageDown',\n]);\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            if (event.ctrlKey || event.altKey || event.metaKey) {\n                return;\n            }\n\n            if (!KEYBOARD_NAVIGATION_KEYS.has(event.key)) {\n                return;\n            }\n\n            enableKeyboardNavigation();\n        };\n\n        const disableKeyboardNavigation = () => {\n            setIsKeyboardNavigation((current) => (current ? false : current));\n        };\n\n        if (canListen) {\n            window.addEventListener('keydown', handleKeyDown);\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('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,MAAMC,wBAAwB,GAAG,IAAIC,GAAG,CAAC,CACrC,KAAK,EACL,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,OAAO,EACP,GAAG,EACH,UAAU,EACV,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,CACb,CAAC;;AAEF;AACA;AACA;AACA;AACA,OAAO,MAAMC,4BAA4B,GAAIC,aAAuB,IAAc;EAC9E,MAAMC,WAAW,GAAGR,UAAU,CAAsCG,kBAAkB,CAAC;EACvF,MAAMM,gBAAyB,GAAGD,WAAW,EAAEE,gCAAgC,KAAK,IAAI;EACxF,MAAMC,SAAkB,GAAGJ,aAAa,IAAIE,gBAAgB;EAE5D,MAAM,CAACG,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;EAEvED,SAAS,CAAC,MAAM;IACZ,MAAMa,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,IAAIA,KAAK,CAACC,OAAO,IAAID,KAAK,CAACE,MAAM,IAAIF,KAAK,CAACG,OAAO,EAAE;QAChD;MACJ;MAEA,IAAI,CAACjB,wBAAwB,CAACkB,GAAG,CAACJ,KAAK,CAACK,GAAG,CAAC,EAAE;QAC1C;MACJ;MAEAP,wBAAwB,CAAC,CAAC;IAC9B,CAAC;IAED,MAAMQ,yBAAyB,GAAGA,CAAA,KAAM;MACpCX,uBAAuB,CAAEY,OAAO,IAAMA,OAAO,GAAG,KAAK,GAAGA,OAAQ,CAAC;IACrE,CAAC;IAED,IAAIX,SAAS,EAAE;MACXC,MAAM,CAACW,gBAAgB,CAAC,SAAS,EAAET,aAAa,CAAC;MACjDF,MAAM,CAACW,gBAAgB,CAAC,WAAW,EAAEF,yBAAyB,CAAC;MAC/DT,MAAM,CAACW,gBAAgB,CAAC,WAAW,EAAEF,yBAAyB,CAAC;IACnE,CAAC,MAAM;MACHX,uBAAuB,CAAC,KAAK,CAAC;IAClC;IAEA,OAAO,MAAM;MACT,IAAIC,SAAS,EAAE;QACXC,MAAM,CAACY,mBAAmB,CAAC,SAAS,EAAEV,aAAa,CAAC;QACpDF,MAAM,CAACY,mBAAmB,CAAC,WAAW,EAAEH,yBAAyB,CAAC;QAClET,MAAM,CAACY,mBAAmB,CAAC,WAAW,EAAEH,yBAAyB,CAAC;MACtE;IACJ,CAAC;EACL,CAAC,EAAE,CAACb,SAAS,CAAC,CAAC;EAEf,OAAOiB,OAAO,CAACjB,SAAS,IAAIC,oBAAoB,CAAC;AACrD,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.4.13-alpha.0",
+    "version": "5.4.14-alpha.0",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d865a29f61b8f875fa7582a2b5fd9023de2dee9f"
+    "gitHead": "83d8c925dfdb3760ce82257c03c532d91f33a8d6"
 }