@helsenorge/designsystem-react 15.3.0 → 15.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/CHANGELOG.md +12 -0
- package/lib/Drawer.js +53 -36
- package/lib/Drawer.js.map +1 -1
- package/lib/DrawerNavigation.js +106 -8
- package/lib/DrawerNavigation.js.map +1 -1
- package/lib/InfoTeaser.js +10 -9
- package/lib/InfoTeaser.js.map +1 -1
- package/lib/LazyIcon.js +2 -0
- package/lib/LazyIcon.js.map +1 -1
- package/lib/components/Drawer/Drawer.d.ts +3 -1
- package/lib/components/Drawer/DrawerHeaderContent.d.ts +22 -0
- package/lib/components/Drawer/DrawerHeaderContent.module.scss +51 -0
- package/lib/components/Drawer/DrawerHeaderContent.module.scss.d.ts +12 -0
- package/lib/components/Drawer/styles.module.scss +0 -14
- package/lib/components/Drawer/styles.module.scss.d.ts +0 -2
- package/lib/components/Filter/DrawerNavigation/styles.module.scss +15 -0
- package/lib/components/Filter/DrawerNavigation/styles.module.scss.d.ts +11 -0
- package/lib/components/Highlighter/styles.module.scss +1 -1
- package/lib/components/Icons/AdditionalIconInformation.d.ts +12 -0
- package/lib/components/Icons/AdditionalIconInformation.js +13 -1
- package/lib/components/Icons/AdditionalIconInformation.js.map +1 -1
- package/lib/components/Icons/IconNames.d.ts +1 -1
- package/lib/components/Icons/IconNames.js +2 -0
- package/lib/components/Icons/IconNames.js.map +1 -1
- package/lib/components/Icons/ThumbsDown.d.ts +4 -0
- package/lib/components/Icons/ThumbsDown.js +15 -0
- package/lib/components/Icons/ThumbsDown.js.map +1 -0
- package/lib/components/Icons/ThumbsUp.d.ts +4 -0
- package/lib/components/Icons/ThumbsUp.js +15 -0
- package/lib/components/Icons/ThumbsUp.js.map +1 -0
- package/lib/components/InfoTeaser/InfoTeaser.d.ts +4 -0
- package/lib/hooks/useFocusTrap.js +4 -2
- package/lib/hooks/useFocusTrap.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { t as getIcon } from "../../utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/Icons/ThumbsDown.tsx
|
|
4
|
+
var ThumbsDown = ({ size, isHovered }) => {
|
|
5
|
+
return getIcon({
|
|
6
|
+
size,
|
|
7
|
+
isHovered,
|
|
8
|
+
normal: /* @__PURE__ */ jsx("path", { d: "M25.761 40.736c1.41-.049 2.277-.693 2.71-1.558.398-.794.387-1.688.27-2.278l-1.22-7.427a1.35 1.35 0 0 1 1.333-1.57h7.462c.89 0 1.615-.337 2.125-.875.5-.528.768-1.22.833-1.903.096-1.031-.282-2.211-1.23-2.843a3.181 3.181 0 0 0 .431-2.734c-.248-.824-.839-1.545-1.677-1.894a3.389 3.389 0 0 0 .173-2.791c-.353-.93-1.127-1.705-2.185-1.937.18-.86.06-1.808-.415-2.586-.672-1.101-1.975-1.737-3.798-1.456l-13.444.689v-2.31H9.331v21.301h7.798v-2.236h1.305c.703 1.516 1.82 3.727 3.004 6.115 1.293 2.61 2.67 5.449 3.701 7.896a.651.651 0 0 0 .622.397ZM10.632 8.564h5.197v18.7h-5.197v-18.7Zm15.515 30.828c-1.023-2.381-2.327-5.069-3.544-7.526-1.3-2.624-2.493-4.972-3.161-6.455a.65.65 0 0 0-.592-.383h-1.72V10.875l13.53-.695.07-.007c1.426-.23 2.176.262 2.532.845.39.64.4 1.528.06 2.201a.65.65 0 0 0 .633.94c.877-.071 1.525.438 1.801 1.166.28.735.152 1.639-.538 2.276a.65.65 0 0 0 .441 1.127c.794 0 1.365.51 1.572 1.195.206.683.034 1.51-.701 2.086a.65.65 0 0 0 .279 1.15c.802.154 1.256.931 1.17 1.845-.041.44-.212.843-.483 1.13-.26.274-.64.47-1.18.47h-7.462a2.65 2.65 0 0 0-2.615 3.08l1.22 7.426.005.026c.084.404.078.995-.155 1.46-.17.341-.491.676-1.162.796Z" }),
|
|
9
|
+
normalHover: /* @__PURE__ */ jsx("path", { d: "M25.761 42.736c1.41-.049 2.277-.693 2.71-1.558.398-.794.387-1.688.27-2.278l-1.22-7.427a1.35 1.35 0 0 1 1.333-1.57h7.462c.89 0 1.615-.337 2.125-.875.5-.528.768-1.22.833-1.903.096-1.031-.282-2.211-1.23-2.843a3.181 3.181 0 0 0 .431-2.734c-.248-.824-.839-1.545-1.677-1.894a3.389 3.389 0 0 0 .173-2.791c-.353-.93-1.127-1.705-2.185-1.937.18-.86.06-1.808-.415-2.586-.672-1.101-1.975-1.737-3.798-1.456l-13.444.689v-2.31H9.331v21.301h7.798v-2.236h1.305c.703 1.516 1.82 3.727 3.004 6.115 1.293 2.61 2.67 5.449 3.701 7.896a.651.651 0 0 0 .622.397ZM10.632 10.564h5.197v18.7h-5.197v-18.7Zm15.515 30.828c-1.023-2.381-2.327-5.069-3.544-7.526-1.3-2.624-2.493-4.972-3.161-6.455a.65.65 0 0 0-.592-.383h-1.72V12.875l13.53-.695.07-.007c1.426-.23 2.176.262 2.532.845.39.64.4 1.528.06 2.201a.65.65 0 0 0 .633.94c.877-.071 1.525.438 1.801 1.166.28.735.152 1.639-.538 2.276a.65.65 0 0 0 .441 1.127c.794 0 1.365.51 1.572 1.195.206.683.034 1.51-.701 2.086a.65.65 0 0 0 .279 1.15c.802.154 1.256.931 1.17 1.845-.041.44-.212.843-.483 1.13-.26.274-.64.47-1.18.47h-7.462a2.65 2.65 0 0 0-2.615 3.08l1.22 7.426.005.026c.084.404.078.995-.155 1.46-.17.341-.491.676-1.162.796Z" })
|
|
10
|
+
});
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { ThumbsDown as default };
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=ThumbsDown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThumbsDown.js","names":[],"sources":["../../../src/components/Icons/ThumbsDown.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon';\n\nconst ThumbsDown: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path d=\"M25.761 40.736c1.41-.049 2.277-.693 2.71-1.558.398-.794.387-1.688.27-2.278l-1.22-7.427a1.35 1.35 0 0 1 1.333-1.57h7.462c.89 0 1.615-.337 2.125-.875.5-.528.768-1.22.833-1.903.096-1.031-.282-2.211-1.23-2.843a3.181 3.181 0 0 0 .431-2.734c-.248-.824-.839-1.545-1.677-1.894a3.389 3.389 0 0 0 .173-2.791c-.353-.93-1.127-1.705-2.185-1.937.18-.86.06-1.808-.415-2.586-.672-1.101-1.975-1.737-3.798-1.456l-13.444.689v-2.31H9.331v21.301h7.798v-2.236h1.305c.703 1.516 1.82 3.727 3.004 6.115 1.293 2.61 2.67 5.449 3.701 7.896a.651.651 0 0 0 .622.397ZM10.632 8.564h5.197v18.7h-5.197v-18.7Zm15.515 30.828c-1.023-2.381-2.327-5.069-3.544-7.526-1.3-2.624-2.493-4.972-3.161-6.455a.65.65 0 0 0-.592-.383h-1.72V10.875l13.53-.695.07-.007c1.426-.23 2.176.262 2.532.845.39.64.4 1.528.06 2.201a.65.65 0 0 0 .633.94c.877-.071 1.525.438 1.801 1.166.28.735.152 1.639-.538 2.276a.65.65 0 0 0 .441 1.127c.794 0 1.365.51 1.572 1.195.206.683.034 1.51-.701 2.086a.65.65 0 0 0 .279 1.15c.802.154 1.256.931 1.17 1.845-.041.44-.212.843-.483 1.13-.26.274-.64.47-1.18.47h-7.462a2.65 2.65 0 0 0-2.615 3.08l1.22 7.426.005.026c.084.404.078.995-.155 1.46-.17.341-.491.676-1.162.796Z\" />\n );\n\n const normalHover = (\n <path d=\"M25.761 42.736c1.41-.049 2.277-.693 2.71-1.558.398-.794.387-1.688.27-2.278l-1.22-7.427a1.35 1.35 0 0 1 1.333-1.57h7.462c.89 0 1.615-.337 2.125-.875.5-.528.768-1.22.833-1.903.096-1.031-.282-2.211-1.23-2.843a3.181 3.181 0 0 0 .431-2.734c-.248-.824-.839-1.545-1.677-1.894a3.389 3.389 0 0 0 .173-2.791c-.353-.93-1.127-1.705-2.185-1.937.18-.86.06-1.808-.415-2.586-.672-1.101-1.975-1.737-3.798-1.456l-13.444.689v-2.31H9.331v21.301h7.798v-2.236h1.305c.703 1.516 1.82 3.727 3.004 6.115 1.293 2.61 2.67 5.449 3.701 7.896a.651.651 0 0 0 .622.397ZM10.632 10.564h5.197v18.7h-5.197v-18.7Zm15.515 30.828c-1.023-2.381-2.327-5.069-3.544-7.526-1.3-2.624-2.493-4.972-3.161-6.455a.65.65 0 0 0-.592-.383h-1.72V12.875l13.53-.695.07-.007c1.426-.23 2.176.262 2.532.845.39.64.4 1.528.06 2.201a.65.65 0 0 0 .633.94c.877-.071 1.525.438 1.801 1.166.28.735.152 1.639-.538 2.276a.65.65 0 0 0 .441 1.127c.794 0 1.365.51 1.572 1.195.206.683.034 1.51-.701 2.086a.65.65 0 0 0 .279 1.15c.802.154 1.256.931 1.17 1.845-.041.44-.212.843-.483 1.13-.26.274-.64.47-1.18.47h-7.462a2.65 2.65 0 0 0-2.615 3.08l1.22 7.426.005.026c.084.404.078.995-.155 1.46-.17.341-.491.676-1.162.796Z\" />\n );\n\n return getIcon({ size, isHovered, normal, normalHover });\n};\n\nexport default ThumbsDown;\n"],"mappings":";;;AAMA,IAAM,cAAsC,EAAE,MAAM,gBAAkD;CASpG,OAAO,QAAQ;EAAE;EAAM;EAAW,QAPhC,oBAAC,QAAD,EAAM,GAAE,snCAAunC,CAO/lC;EAAQ,aAHxC,oBAAC,QAAD,EAAM,GAAE,unCAAwnC,CAGxlC;CAAY,CAAC;AACzD"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { t as getIcon } from "../../utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/Icons/ThumbsUp.tsx
|
|
4
|
+
var ThumbsUp = ({ size, isHovered }) => {
|
|
5
|
+
return getIcon({
|
|
6
|
+
size,
|
|
7
|
+
isHovered,
|
|
8
|
+
normal: /* @__PURE__ */ jsx("path", { d: "M25.761 7.264c1.41.049 2.277.693 2.71 1.558.398.794.387 1.688.27 2.278l-1.22 7.427a1.35 1.35 0 0 0 1.333 1.57h7.462c.89 0 1.615.336 2.125.875.5.528.769 1.22.833 1.903.096 1.031-.282 2.211-1.23 2.843a3.18 3.18 0 0 1 .431 2.734c-.249.824-.839 1.545-1.677 1.894.479.895.502 1.924.173 2.791-.353.93-1.127 1.705-2.185 1.937.18.86.06 1.808-.415 2.586-.673 1.1-1.975 1.737-3.798 1.456l-13.444-.689v2.309H9.331V19.435h7.798v2.237h1.305c.703-1.516 1.821-3.727 3.004-6.115 1.293-2.61 2.67-5.449 3.701-7.895a.651.651 0 0 1 .622-.398ZM10.632 39.435h5.197v-18.7h-5.197v18.7ZM26.147 8.608c-1.023 2.381-2.327 5.069-3.544 7.526-1.3 2.624-2.493 4.972-3.161 6.455a.65.65 0 0 1-.592.383h-1.72v14.153l13.53.695.07.007c1.425.23 2.176-.262 2.532-.845.39-.64.4-1.528.06-2.201a.65.65 0 0 1 .633-.94c.877.071 1.525-.438 1.801-1.166a2.068 2.068 0 0 0-.538-2.276.65.65 0 0 1 .441-1.127c.794 0 1.365-.51 1.572-1.195.206-.683.034-1.51-.701-2.086a.65.65 0 0 1 .279-1.15c.802-.154 1.256-.932 1.17-1.845-.041-.44-.212-.843-.483-1.13-.26-.274-.64-.47-1.18-.47h-7.462a2.65 2.65 0 0 1-2.615-3.08l1.22-7.426.005-.026c.084-.404.078-.995-.155-1.46-.17-.341-.491-.676-1.162-.796Z" }),
|
|
9
|
+
normalHover: /* @__PURE__ */ jsx("path", { d: "M25.761 5.422c1.41.049 2.277.693 2.71 1.558.398.794.387 1.688.27 2.278l-1.22 7.427a1.35 1.35 0 0 0 1.333 1.57h7.462c.89 0 1.615.337 2.125.875.5.528.769 1.22.833 1.904.096 1.03-.282 2.21-1.23 2.842a3.18 3.18 0 0 1 .431 2.734c-.249.824-.839 1.545-1.677 1.894.479.895.502 1.924.173 2.791-.353.93-1.127 1.705-2.185 1.937.18.86.06 1.809-.415 2.586-.673 1.101-1.975 1.737-3.798 1.456l-13.444-.689v2.309H9.331v-21.3h7.798v2.236h1.305c.703-1.515 1.821-3.727 3.004-6.115 1.293-2.61 2.67-5.448 3.701-7.895a.651.651 0 0 1 .622-.398ZM10.632 37.593h5.197v-18.7h-5.197v18.7ZM26.147 6.766c-1.023 2.381-2.327 5.069-3.544 7.526-1.3 2.624-2.493 4.972-3.161 6.455a.65.65 0 0 1-.592.383h-1.72v14.154l13.53.694.07.007c1.425.231 2.176-.262 2.532-.845.39-.64.4-1.528.06-2.201a.65.65 0 0 1 .633-.94c.877.072 1.525-.438 1.801-1.166a2.068 2.068 0 0 0-.538-2.276.65.65 0 0 1 .441-1.127c.794 0 1.365-.51 1.572-1.195.206-.683.034-1.51-.701-2.086a.65.65 0 0 1 .279-1.15c.802-.153 1.256-.931 1.17-1.844-.041-.44-.212-.844-.483-1.13-.26-.275-.64-.47-1.18-.47h-7.462a2.65 2.65 0 0 1-2.615-3.08l1.22-7.427.005-.026c.084-.404.078-.994-.155-1.46-.17-.34-.491-.676-1.162-.796Z" })
|
|
10
|
+
});
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { ThumbsUp as default };
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=ThumbsUp.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThumbsUp.js","names":[],"sources":["../../../src/components/Icons/ThumbsUp.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon';\n\nconst ThumbsUp: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path d=\"M25.761 7.264c1.41.049 2.277.693 2.71 1.558.398.794.387 1.688.27 2.278l-1.22 7.427a1.35 1.35 0 0 0 1.333 1.57h7.462c.89 0 1.615.336 2.125.875.5.528.769 1.22.833 1.903.096 1.031-.282 2.211-1.23 2.843a3.18 3.18 0 0 1 .431 2.734c-.249.824-.839 1.545-1.677 1.894.479.895.502 1.924.173 2.791-.353.93-1.127 1.705-2.185 1.937.18.86.06 1.808-.415 2.586-.673 1.1-1.975 1.737-3.798 1.456l-13.444-.689v2.309H9.331V19.435h7.798v2.237h1.305c.703-1.516 1.821-3.727 3.004-6.115 1.293-2.61 2.67-5.449 3.701-7.895a.651.651 0 0 1 .622-.398ZM10.632 39.435h5.197v-18.7h-5.197v18.7ZM26.147 8.608c-1.023 2.381-2.327 5.069-3.544 7.526-1.3 2.624-2.493 4.972-3.161 6.455a.65.65 0 0 1-.592.383h-1.72v14.153l13.53.695.07.007c1.425.23 2.176-.262 2.532-.845.39-.64.4-1.528.06-2.201a.65.65 0 0 1 .633-.94c.877.071 1.525-.438 1.801-1.166a2.068 2.068 0 0 0-.538-2.276.65.65 0 0 1 .441-1.127c.794 0 1.365-.51 1.572-1.195.206-.683.034-1.51-.701-2.086a.65.65 0 0 1 .279-1.15c.802-.154 1.256-.932 1.17-1.845-.041-.44-.212-.843-.483-1.13-.26-.274-.64-.47-1.18-.47h-7.462a2.65 2.65 0 0 1-2.615-3.08l1.22-7.426.005-.026c.084-.404.078-.995-.155-1.46-.17-.341-.491-.676-1.162-.796Z\" />\n );\n\n const normalHover = (\n <path d=\"M25.761 5.422c1.41.049 2.277.693 2.71 1.558.398.794.387 1.688.27 2.278l-1.22 7.427a1.35 1.35 0 0 0 1.333 1.57h7.462c.89 0 1.615.337 2.125.875.5.528.769 1.22.833 1.904.096 1.03-.282 2.21-1.23 2.842a3.18 3.18 0 0 1 .431 2.734c-.249.824-.839 1.545-1.677 1.894.479.895.502 1.924.173 2.791-.353.93-1.127 1.705-2.185 1.937.18.86.06 1.809-.415 2.586-.673 1.101-1.975 1.737-3.798 1.456l-13.444-.689v2.309H9.331v-21.3h7.798v2.236h1.305c.703-1.515 1.821-3.727 3.004-6.115 1.293-2.61 2.67-5.448 3.701-7.895a.651.651 0 0 1 .622-.398ZM10.632 37.593h5.197v-18.7h-5.197v18.7ZM26.147 6.766c-1.023 2.381-2.327 5.069-3.544 7.526-1.3 2.624-2.493 4.972-3.161 6.455a.65.65 0 0 1-.592.383h-1.72v14.154l13.53.694.07.007c1.425.231 2.176-.262 2.532-.845.39-.64.4-1.528.06-2.201a.65.65 0 0 1 .633-.94c.877.072 1.525-.438 1.801-1.166a2.068 2.068 0 0 0-.538-2.276.65.65 0 0 1 .441-1.127c.794 0 1.365-.51 1.572-1.195.206-.683.034-1.51-.701-2.086a.65.65 0 0 1 .279-1.15c.802-.153 1.256-.931 1.17-1.844-.041-.44-.212-.844-.483-1.13-.26-.275-.64-.47-1.18-.47h-7.462a2.65 2.65 0 0 1-2.615-3.08l1.22-7.427.005-.026c.084-.404.078-.994-.155-1.46-.17-.34-.491-.676-1.162-.796Z\" />\n );\n\n return getIcon({ size, isHovered, normal, normalHover });\n};\n\nexport default ThumbsUp;\n"],"mappings":";;;AAMA,IAAM,YAAoC,EAAE,MAAM,gBAAkD;CASlG,OAAO,QAAQ;EAAE;EAAM;EAAW,QAPhC,oBAAC,QAAD,EAAM,GAAE,unCAAwnC,CAOhmC;EAAQ,aAHxC,oBAAC,QAAD,EAAM,GAAE,snCAAunC,CAGvlC;CAAY,CAAC;AACzD"}
|
|
@@ -12,8 +12,12 @@ export interface InfoTeaserProps {
|
|
|
12
12
|
collapsedMaxHeight?: string;
|
|
13
13
|
/** For overriding styling on infoteaser box */
|
|
14
14
|
className?: string;
|
|
15
|
+
/** Opens or closes the teaser */
|
|
16
|
+
expanded?: boolean;
|
|
15
17
|
/** Changes the underlying element of the wrapper */
|
|
16
18
|
htmlMarkup?: InfoTeaserTags;
|
|
19
|
+
/** Called when the teaser is expanded/collapsed. */
|
|
20
|
+
onExpand?: (isExpanded: boolean) => void;
|
|
17
21
|
/** Resources for component */
|
|
18
22
|
resources?: Partial<HNDesignsystemInfoTeaser>;
|
|
19
23
|
/** Adds an icon */
|
|
@@ -14,10 +14,12 @@ var useFocusTrap = (ref, trapFocus = true) => {
|
|
|
14
14
|
const activeElement = getDocumentActiveElement(ref.current);
|
|
15
15
|
const firstElement = focusableElementList[0];
|
|
16
16
|
const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];
|
|
17
|
-
|
|
17
|
+
const isAtOrBeforeFirst = activeElement === firstElement || !!activeElement && (firstElement.compareDocumentPosition(activeElement) & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
|
|
18
|
+
const isAtOrAfterLast = activeElement === lastElement || !!activeElement && (lastElement.compareDocumentPosition(activeElement) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
|
|
19
|
+
if (e.shiftKey && isAtOrBeforeFirst) {
|
|
18
20
|
lastElement.focus();
|
|
19
21
|
e.preventDefault();
|
|
20
|
-
} else if (!e.shiftKey &&
|
|
22
|
+
} else if (!e.shiftKey && isAtOrAfterLast) {
|
|
21
23
|
firstElement.focus();
|
|
22
24
|
e.preventDefault();
|
|
23
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useFocusableElements } from './useFocusableElements';\nimport { getDocumentActiveElement } from '../utils/focus';\n\n/**\n * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.\n * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det\n * @param trapFocus Om fokus skal \"trappes\" innenfor elementet eller ikke. Default=true.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement | null>, trapFocus = true): void => {\n const focusableElementList = useFocusableElements(ref);\n\n const handleKeyboardEvent = (e: KeyboardEvent): void => {\n if (trapFocus && ref.current && focusableElementList?.length && e.key === 'Tab') {\n const activeElement = getDocumentActiveElement(ref.current);\n const firstElement = focusableElementList[0];\n const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];\n\n
|
|
1
|
+
{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useFocusableElements } from './useFocusableElements';\nimport { getDocumentActiveElement } from '../utils/focus';\n\n/**\n * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.\n * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det\n * @param trapFocus Om fokus skal \"trappes\" innenfor elementet eller ikke. Default=true.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement | null>, trapFocus = true): void => {\n const focusableElementList = useFocusableElements(ref);\n\n const handleKeyboardEvent = (e: KeyboardEvent): void => {\n if (trapFocus && ref.current && focusableElementList?.length && e.key === 'Tab') {\n const activeElement = getDocumentActiveElement(ref.current);\n const firstElement = focusableElementList[0];\n const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];\n\n // Handles non-listed elements inside the trap (an element with tabindex=\"-1\") that was focused programmatically)\n const isAtOrBeforeFirst =\n activeElement === firstElement ||\n (!!activeElement && (firstElement.compareDocumentPosition(activeElement) & Node.DOCUMENT_POSITION_PRECEDING) !== 0);\n const isAtOrAfterLast =\n activeElement === lastElement ||\n (!!activeElement && (lastElement.compareDocumentPosition(activeElement) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);\n\n if (e.shiftKey && isAtOrBeforeFirst) {\n /* shift + tab */\n lastElement.focus();\n e.preventDefault();\n } else if (!e.shiftKey && isAtOrAfterLast) {\n /* tab */\n firstElement.focus();\n e.preventDefault();\n }\n }\n };\n\n useEffect(() => {\n ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n return (): void => {\n ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n };\n }, [ref, trapFocus, focusableElementList]); // focusableElementList må være med som dependency for at handleKeyboardEvent skal få oppdatert state\n};\n\nexport default useFocusTrap;\n"],"mappings":";;;;;;;;;AAUA,IAAa,gBAAgB,KAA0C,YAAY,SAAe;CAChG,MAAM,uBAAuB,qBAAqB,GAAG;CAErD,MAAM,uBAAuB,MAA2B;EACtD,IAAI,aAAa,IAAI,WAAW,sBAAsB,UAAU,EAAE,QAAQ,OAAO;GAC/E,MAAM,gBAAgB,yBAAyB,IAAI,OAAO;GAC1D,MAAM,eAAe,qBAAqB;GAC1C,MAAM,cAAc,qBAAqB,WAAW,IAAI,eAAe,qBAAqB,qBAAqB,SAAS;GAG1H,MAAM,oBACJ,kBAAkB,gBACjB,CAAC,CAAC,kBAAkB,aAAa,wBAAwB,aAAa,IAAI,KAAK,iCAAiC;GACnH,MAAM,kBACJ,kBAAkB,eACjB,CAAC,CAAC,kBAAkB,YAAY,wBAAwB,aAAa,IAAI,KAAK,iCAAiC;GAElH,IAAI,EAAE,YAAY,mBAAmB;IAEnC,YAAY,MAAM;IAClB,EAAE,eAAe;GACnB,OAAO,IAAI,CAAC,EAAE,YAAY,iBAAiB;IAEzC,aAAa,MAAM;IACnB,EAAE,eAAe;GACnB;EACF;CACF;CAEA,gBAAgB;EACd,IAAI,SAAS,iBAAiB,WAAW,mBAAmB;EAE5D,aAAmB;GACjB,IAAI,SAAS,oBAAoB,WAAW,mBAAmB;EACjE;CACF,GAAG;EAAC;EAAK;EAAW;CAAoB,CAAC;AAC3C"}
|
package/package.json
CHANGED