@helsenorge/designsystem-react 2.2.1 → 2.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/CHANGELOG.md +14 -0
- package/HelpBubble.js +1 -1
- package/HelpBubble.js.map +1 -1
- package/Modal.js +1 -1
- package/Modal.js.map +1 -1
- package/__mocks__/MutationObserver.d.ts +6 -0
- package/__mocks__/MutationObserver.d.ts.map +1 -0
- package/__mocks__/MutationObserver.js +2 -0
- package/__mocks__/MutationObserver.js.map +1 -0
- package/components/ButtonWithModal/index.js +1 -1
- package/components/ButtonWithModal/index.js.map +1 -1
- package/components/HelpBubble/HelpBubble.d.ts +3 -3
- package/components/HelpBubble/HelpBubble.d.ts.map +1 -1
- package/components/HelpBubble/componentdata.json +1 -1
- package/components/HelpBubble/index.js +1 -1
- package/components/HelpBubble/styles.module.scss +34 -33
- package/components/HelpBubble/styles.module.scss.d.ts +10 -10
- package/components/HelpBubble/utils.d.ts +27 -0
- package/components/HelpBubble/utils.d.ts.map +1 -0
- package/components/HelpBubbleExample/componentdata.json +1 -1
- package/components/HelpBubbleExample/index.js +1 -1
- package/components/HelpBubbleExample/index.js.map +1 -1
- package/components/HorizontalScroll/styles.module.scss +2 -2
- package/components/LinkList/LinkList.d.ts +4 -0
- package/components/LinkList/LinkList.d.ts.map +1 -1
- package/components/LinkList/index.js +1 -1
- package/components/LinkList/index.js.map +1 -1
- package/components/Modal/Modal.d.ts.map +1 -1
- package/components/Modal/index.js +1 -1
- package/components/Tooltip/index.js +1 -1
- package/components/TooltipExample/index.js +1 -1
- package/components/TooltipExample/index.js.map +1 -1
- package/hooks/useFocusToggle.d.ts +2 -6
- package/hooks/useFocusToggle.d.ts.map +1 -1
- package/hooks/useFocusToggle.js +1 -1
- package/hooks/useFocusToggle.js.map +1 -1
- package/hooks/useFocusTrap.d.ts +7 -1
- package/hooks/useFocusTrap.d.ts.map +1 -1
- package/hooks/useFocusTrap.js +1 -1
- package/hooks/useFocusTrap.js.map +1 -1
- package/hooks/useFocusableElements.d.ts +9 -0
- package/hooks/useFocusableElements.d.ts.map +1 -0
- package/hooks/useFocusableElements.js +2 -0
- package/hooks/useFocusableElements.js.map +1 -0
- package/hooks/useIntersectionObserver.d.ts +1 -1
- package/hooks/useIntersectionObserver.d.ts.map +1 -1
- package/hooks/useIntersectionObserver.js.map +1 -1
- package/hooks/useInterval.d.ts +9 -0
- package/hooks/useInterval.d.ts.map +1 -0
- package/hooks/useInterval.js +2 -0
- package/hooks/useInterval.js.map +1 -0
- package/hooks/useIsVisible.d.ts +1 -1
- package/hooks/useIsVisible.d.ts.map +1 -1
- package/hooks/useIsVisible.js +1 -1
- package/hooks/useIsVisible.js.map +1 -1
- package/hooks/useSize.d.ts +2 -1
- package/hooks/useSize.d.ts.map +1 -1
- package/hooks/useSize.js +1 -1
- package/hooks/useSize.js.map +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/hooks/useGetDOMRect.d.ts +0 -11
- package/hooks/useGetDOMRect.d.ts.map +0 -1
- package/hooks/useGetDOMRect.js +0 -2
- package/hooks/useGetDOMRect.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../hooks/
|
|
1
|
+
import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";import"../../hooks/useSize.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";const S=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))};export{S as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n const controllerRef = useRef<HTMLSpanElement>(null);\n\n return (\n <div>\n <span>\n {\n 'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n }\n </span>\n <div style={{ position: 'relative', display: 'inline' }}>\n <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n {'Jeg er en tooltip tekst.'}\n </span>\n <HelpBubble\n {...props}\n onClose={() => {\n alert('Bubble closed');\n }}\n controllerRef={controllerRef}\n >\n {props.children}\n </HelpBubble>\n </div>\n <span>\n {\n 'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n }\n </span>\n </div>\n );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n const controllerRef = useRef<HTMLSpanElement>(null);\n\n return (\n <div>\n <span>\n {\n 'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n }\n </span>\n <div style={{ position: 'relative', display: 'inline' }}>\n <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n {'Jeg er en tooltip tekst.'}\n </span>\n <HelpBubble\n {...props}\n onClose={() => {\n alert('Bubble closed');\n }}\n controllerRef={controllerRef}\n >\n {props.children}\n </HelpBubble>\n </div>\n <span>\n {\n 'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n }\n </span>\n </div>\n );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble"],"mappings":"21BAIA,MAAMA,EAAwDC,GAAA,CACtD,MAAAC,EAAgBC,EAAwB,IAAI,EAElD,uBACG,MACC,KAAAC,EAAA,cAAC,OAEG,KAAA,+pBAEJ,EACCA,EAAA,cAAA,MAAA,CAAI,MAAO,CAAE,SAAU,WAAY,QAAS,QAAS,CAAA,EACnDA,EAAA,cAAA,OAAA,CAAK,IAAKF,EAAe,MAAO,CAAE,QAAS,eAAgB,MAAO,KAAM,CACtE,EAAA,0BACH,EACCE,EAAA,cAAAC,EAAA,CACE,GAAGJ,EACJ,QAAS,IAAM,CACb,MAAM,eAAe,CACvB,EACA,cAAAC,CAAA,EAECD,EAAM,QACT,CACF,EACCG,EAAA,cAAA,OAAA,KAEG,+pBAEJ,CACF,CAEJ"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
$gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
|
|
4
4
|
|
|
5
5
|
.horizontalscroll {
|
|
6
|
-
|
|
6
|
+
position: relative;
|
|
7
7
|
&__viewport {
|
|
8
8
|
display: flex;
|
|
9
9
|
&--overflow {
|
|
@@ -12,7 +12,7 @@ $gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
|
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
&__indicator {
|
|
15
|
-
position:
|
|
15
|
+
position: absolute;
|
|
16
16
|
width: 23px;
|
|
17
17
|
top: 0;
|
|
18
18
|
height: 100%;
|
|
@@ -37,6 +37,10 @@ export interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement | HTML
|
|
|
37
37
|
target?: LinkAnchorTargets;
|
|
38
38
|
/** HTML markup for link. Default: a */
|
|
39
39
|
htmlMarkup?: LinkTags;
|
|
40
|
+
/**
|
|
41
|
+
* Ref for lenke/knapp
|
|
42
|
+
*/
|
|
43
|
+
linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
|
|
40
44
|
/** Sets the data-testid attribute. */
|
|
41
45
|
testId?: string;
|
|
42
46
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/LinkList/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,oBAAY,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,oBAAY,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/D,oBAAY,cAAc,GAAG,YAAY,CAAC;AAC1C,oBAAY,QAAQ,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAEvG,oBAAY,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;AACtC,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC/H,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,uCAAuC;IACvC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/LinkList/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,oBAAY,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,oBAAY,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/D,oBAAY,cAAc,GAAG,YAAY,CAAC;AAC1C,oBAAY,QAAQ,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAEvG,oBAAY,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;AACtC,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC/H,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,uCAAuC;IACvC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACjE,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0ED,eAAO,MAAM,QAAQ,mBAuBE,CAAC;AAKxB,eAAe,QAAQ,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import
|
|
1
|
+
import e from"react";import v from"classnames";import{Icon as R}from"../Icons/Icon.js";import{AnalyticsId as y,IconSize as p}from"../../constants.js";import g from"../Icons/ChevronRight.js";import{useBreakpoint as z,Breakpoint as S}from"../../hooks/useBreakpoint.js";import{useHover as B}from"../../hooks/useHover.js";import t from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../theme/grid.js";const f=e.forwardRef((u,i)=>{const{children:s,className:m="",color:c="neutral",icon:o,size:n="medium",chevron:l=!1,linkRef:d,testId:k,target:a,htmlMarkup:r="a",..._}=u,{hoverRef:h,isHovered:L}=B(d),I=z(),b=n!=="small"&&!!(l||o),E=()=>e.createElement(e.Fragment,null,b&&o&&e.createElement("span",{className:t["link-list__icon"]},e.cloneElement(o,{size:I===S.xs?p.XSmall:p.Small,isHovered:L})),e.createElement("span",{className:t["link-list__content"]},s),b&&l&&e.createElement("span",{className:t["link-list__chevron"]},e.createElement(R,{svgIcon:g,isHovered:L,size:p.XSmall}))),N=v(t["link-list__anchor"],t["link-list__anchor--"+c],{[t["link-list__anchor--small"]]:n==="small",[t["link-list__anchor--medium"]]:n==="medium",[t["link-list__anchor--large"]]:n==="large",[t["link-list__anchor--button"]]:r==="button"},m);return e.createElement("li",{ref:i,"data-testid":k,"data-analyticsid":y.Link},r==="a"&&e.createElement("a",{className:N,ref:h,rel:a==="_blank"?"noopener noreferrer":void 0,target:a,..._},E()),r==="button"&&e.createElement("button",{className:N,ref:h,type:"button",..._},E()))}),C=e.forwardRef(function(i,s){const{children:m,className:c="",chevron:o=!1,size:n="medium",color:l,topBorder:d=!0,bottomBorder:k=!0,testId:a}=i;return e.createElement("ul",{ref:s,className:v(t["link-list"],{[t["link-list--hastopborder"]]:d,[t["link-list--nobottomborder"]]:!k},c),"data-testid":a,"data-analyticsid":y.LinkList},e.Children.map(m,r=>{if(r.type===f)return e.cloneElement(r,{color:l,size:n,chevron:o})}))});C.Link=f;f.displayName="LinkList.Link";export{C as LinkList,C as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\n\nimport LinkListStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkType = React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>>;\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n Link: LinkType;\n}\n\ninterface LinkListProps {\n /** Items in the LinkList */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the link list background color on hover. */\n color: LinkListColors;\n /** Toggles chevron icon on or off. */\n chevron?: boolean;\n /** Toggles the bottom border of the last child element. */\n bottomBorder?: boolean;\n /** Toggles the top border of the first child element. */\n topBorder?: boolean;\n /** Changes size of the LinkList. */\n size?: LinkListSize;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n children: React.ReactNode;\n color?: LinkListColors;\n size?: LinkListSize;\n chevron?: boolean;\n className?: string;\n icon?: React.ReactElement;\n href?: string;\n target?: LinkAnchorTargets;\n /** HTML markup for link. Default: a */\n htmlMarkup?: LinkTags;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n const {\n children,\n className = '',\n color = 'neutral',\n icon,\n size = 'medium',\n chevron = false,\n testId,\n target,\n htmlMarkup = 'a',\n ...restProps\n } = props;\n const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>();\n const breakpoint = useBreakpoint();\n\n const hasIcon = size !== 'small' && !!(chevron || icon);\n\n const renderContent = (): JSX.Element => (\n <>\n {hasIcon && icon && (\n <span className={LinkListStyles['link-list__icon']}>\n {React.cloneElement(icon, {\n size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n isHovered,\n })}\n </span>\n )}\n <span className={LinkListStyles['link-list__content']}>{children}</span>\n {hasIcon && chevron && (\n <span className={LinkListStyles['link-list__chevron']}>\n <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} />\n </span>\n )}\n </>\n );\n\n const linkClasses = cn(\n LinkListStyles['link-list__anchor'],\n LinkListStyles['link-list__anchor--' + color],\n {\n [LinkListStyles['link-list__anchor--small']]: size === 'small',\n [LinkListStyles['link-list__anchor--medium']]: size === 'medium',\n [LinkListStyles['link-list__anchor--large']]: size === 'large',\n [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n },\n className\n );\n\n return (\n <li ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n {htmlMarkup === 'a' && (\n <a\n className={linkClasses}\n ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n target={target}\n {...restProps}\n >\n {renderContent()}\n </a>\n )}\n {htmlMarkup === 'button' && (\n <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n {renderContent()}\n </button>\n )}\n </li>\n );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n const { children, className = '', chevron = false, size = 'medium', color, topBorder = true, bottomBorder = true, testId } = props;\n return (\n <ul\n ref={ref}\n className={cn(\n LinkListStyles['link-list'],\n {\n [LinkListStyles['link-list--hastopborder']]: topBorder,\n [LinkListStyles['link-list--nobottomborder']]: !bottomBorder,\n },\n className\n )}\n data-testid={testId}\n data-analyticsid={AnalyticsId.LinkList}\n >\n {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n if ((child as React.ReactElement<LinkProps>).type === Link) {\n return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron });\n }\n })}\n </ul>\n );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","testId","target","htmlMarkup","restProps","hoverRef","isHovered","useHover","breakpoint","useBreakpoint","hasIcon","renderContent","LinkListStyles","Breakpoint","IconSize","Icon","ChevronRight","linkClasses","cn","AnalyticsId","LinkList","topBorder","bottomBorder","child"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\n\nimport LinkListStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkType = React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>>;\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n Link: LinkType;\n}\n\ninterface LinkListProps {\n /** Items in the LinkList */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the link list background color on hover. */\n color: LinkListColors;\n /** Toggles chevron icon on or off. */\n chevron?: boolean;\n /** Toggles the bottom border of the last child element. */\n bottomBorder?: boolean;\n /** Toggles the top border of the first child element. */\n topBorder?: boolean;\n /** Changes size of the LinkList. */\n size?: LinkListSize;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n children: React.ReactNode;\n color?: LinkListColors;\n size?: LinkListSize;\n chevron?: boolean;\n className?: string;\n icon?: React.ReactElement;\n href?: string;\n target?: LinkAnchorTargets;\n /** HTML markup for link. Default: a */\n htmlMarkup?: LinkTags;\n /**\n * Ref for lenke/knapp\n */\n linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n const {\n children,\n className = '',\n color = 'neutral',\n icon,\n size = 'medium',\n chevron = false,\n linkRef,\n testId,\n target,\n htmlMarkup = 'a',\n ...restProps\n } = props;\n const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n const breakpoint = useBreakpoint();\n\n const hasIcon = size !== 'small' && !!(chevron || icon);\n\n const renderContent = (): JSX.Element => (\n <>\n {hasIcon && icon && (\n <span className={LinkListStyles['link-list__icon']}>\n {React.cloneElement(icon, {\n size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n isHovered,\n })}\n </span>\n )}\n <span className={LinkListStyles['link-list__content']}>{children}</span>\n {hasIcon && chevron && (\n <span className={LinkListStyles['link-list__chevron']}>\n <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} />\n </span>\n )}\n </>\n );\n\n const linkClasses = cn(\n LinkListStyles['link-list__anchor'],\n LinkListStyles['link-list__anchor--' + color],\n {\n [LinkListStyles['link-list__anchor--small']]: size === 'small',\n [LinkListStyles['link-list__anchor--medium']]: size === 'medium',\n [LinkListStyles['link-list__anchor--large']]: size === 'large',\n [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n },\n className\n );\n\n return (\n <li ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n {htmlMarkup === 'a' && (\n <a\n className={linkClasses}\n ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n target={target}\n {...restProps}\n >\n {renderContent()}\n </a>\n )}\n {htmlMarkup === 'button' && (\n <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n {renderContent()}\n </button>\n )}\n </li>\n );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n const { children, className = '', chevron = false, size = 'medium', color, topBorder = true, bottomBorder = true, testId } = props;\n return (\n <ul\n ref={ref}\n className={cn(\n LinkListStyles['link-list'],\n {\n [LinkListStyles['link-list--hastopborder']]: topBorder,\n [LinkListStyles['link-list--nobottomborder']]: !bottomBorder,\n },\n className\n )}\n data-testid={testId}\n data-analyticsid={AnalyticsId.LinkList}\n >\n {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n if ((child as React.ReactElement<LinkProps>).type === Link) {\n return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron });\n }\n })}\n </ul>\n );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","htmlMarkup","restProps","hoverRef","isHovered","useHover","breakpoint","useBreakpoint","hasIcon","renderContent","LinkListStyles","Breakpoint","IconSize","Icon","ChevronRight","linkClasses","cn","AnalyticsId","LinkList","topBorder","bottomBorder","child"],"mappings":"mbA8DA,MAAMA,EAAiBC,EAAM,WAAW,CAACC,EAAkBC,IAAkC,CACrF,KAAA,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,UACR,KAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,WAAAC,EAAa,OACVC,CACD,EAAAZ,EACE,CAAE,SAAAa,EAAU,UAAAC,CAAU,EAAIC,EAAgDP,CAAO,EACjFQ,EAAaC,IAEbC,EAAUZ,IAAS,SAAW,CAAC,EAAEC,GAAWF,GAE5Cc,EAAgB,IAEjBpB,EAAA,cAAAA,EAAA,SAAA,KAAAmB,GAAWb,GACTN,EAAA,cAAA,OAAA,CAAK,UAAWqB,EAAe,kBAAA,EAC7BrB,EAAM,aAAaM,EAAM,CACxB,KAAMW,IAAeK,EAAW,GAAKC,EAAS,OAASA,EAAS,MAChE,UAAAR,CACD,CAAA,CACH,EAEDf,EAAA,cAAA,OAAA,CAAK,UAAWqB,EAAe,qBAAA,EAAwBlB,CAAS,EAChEgB,GAAWX,GACTR,EAAA,cAAA,OAAA,CAAK,UAAWqB,EAAe,qBAAA,EAC7BrB,EAAA,cAAAwB,EAAA,CAAK,QAASC,EAAc,UAAAV,EAAsB,KAAMQ,EAAS,MAAQ,CAAA,CAC5E,CAEJ,EAGIG,EAAcC,EAClBN,EAAe,qBACfA,EAAe,sBAAwBhB,GACvC,CACE,CAACgB,EAAe,6BAA8Bd,IAAS,QACvD,CAACc,EAAe,8BAA+Bd,IAAS,SACxD,CAACc,EAAe,6BAA8Bd,IAAS,QACvD,CAACc,EAAe,8BAA+BT,IAAe,QAChE,EACAR,CAAA,EAGF,OACGJ,EAAA,cAAA,KAAA,CAAG,IAAAE,EAAU,cAAaQ,EAAQ,mBAAkBkB,EAAY,IAC9D,EAAAhB,IAAe,KACbZ,EAAA,cAAA,IAAA,CACC,UAAW0B,EACX,IAAKZ,EACL,IAAKH,IAAW,SAAW,sBAAwB,OACnD,OAAAA,EACC,GAAGE,CAAA,EAEHO,EACH,CAAA,EAEDR,IAAe,UACbZ,EAAA,cAAA,SAAA,CAAO,UAAW0B,EAAa,IAAKZ,EAAgD,KAAK,SAAU,GAAGD,CAAA,EACpGO,EACH,CAAA,CAEJ,CAEJ,CAAC,EAEYS,EAAW7B,EAAM,WAAW,SAA8BC,EAAsBC,EAAkC,CAC7H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,QAAAI,EAAU,GAAO,KAAAD,EAAO,SAAU,MAAAF,EAAO,UAAAyB,EAAY,GAAM,aAAAC,EAAe,GAAM,OAAArB,CAAW,EAAAT,EAC7H,OACGD,EAAA,cAAA,KAAA,CACC,IAAAE,EACA,UAAWyB,EACTN,EAAe,aACf,CACE,CAACA,EAAe,4BAA6BS,EAC7C,CAACT,EAAe,8BAA+B,CAACU,CAClD,EACA3B,CACF,EACA,cAAaM,EACb,mBAAkBkB,EAAY,QAAA,EAE7B5B,EAAM,SAAS,IAAIG,EAAW6B,GAA2D,CACnF,GAAAA,EAAwC,OAASjC,EACpD,OAAOC,EAAM,aAAagC,EAAwC,CAAE,MAAA3B,EAAO,KAAAE,EAAM,QAAAC,EAAS,CAE7F,CAAA,CACH,CAEJ,CAAC,EAEDqB,EAAS,KAAO9B,EAChBA,EAAK,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,EAAe,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEtD,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAuCD,QAAA,MAAM,KAAK;YAAW,UAAU,GAAG,WAAW;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,EAAe,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEtD,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAuCD,QAAA,MAAM,KAAK;YAAW,UAAU,GAAG,WAAW;;;;;;;;;CA6J7C,CAAC;AAIF,eAAe,KAAK,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../../Modal.js";import{b as K,a as L,M as N}from"../../Modal.js";import"react";import"classnames";import"../../theme/palette.js";import"../../Button.js";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"./styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../hooks/focus-utils.js";import"../../hooks/
|
|
1
|
+
import"../../Modal.js";import{b as K,a as L,M as N}from"../../Modal.js";import"react";import"classnames";import"../../theme/palette.js";import"../../Button.js";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"./styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../hooks/focus-utils.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Title.js";import"../Title/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";export{K as ModalSize,L as ModalVariants,N as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../../Tooltip.js";import{T as
|
|
1
|
+
import"../../Tooltip.js";import{T as D,b as E,T as F,u as G,a as H}from"../../Tooltip.js";import"react";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";import"../../hooks/useSize.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";import"./styles.module.scss";export{D as Tooltip,E as TooltipOpenProvider,F as default,G as useTooltipOpen,H as useTooltipOpenToggle};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i from"react";import{b as r,T as e}from"../../Tooltip.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/
|
|
1
|
+
import i from"react";import{b as r,T as e}from"../../Tooltip.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";import"../../hooks/useSize.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";import"../Tooltip/styles.module.scss";const o="Dolore quis tempor culpa exercitation laboris. Enim enim pariatur veniam nisi ad quis fugiat magna occaecat nisi. Excepteur ad ad duis quis mollit ex. Laboris duis velit eu eiusmod ea in ex aliqua. Est proident proident dolor veniam nostrud aliquip occaecat dolore sunt laboris nisi ipsum Lorem nisi. Magna sunt ex occaecat amet id. Eiusmod magna Lorem proident est occaecat pariatur sunt esse nostrud. Mollit reprehenderit velit veniam amet ipsum veniam et. Dolor sunt adipisicing enim dolore quis qui occaecat esse quis ut fugiat laboris. ",z=t=>i.createElement(r,null,i.createElement(i.Fragment,null,i.createElement(e,{...t},"Et tooltip her.")," "+o,"Dette er ",i.createElement(e,{...t},t.children)," som skal ha n\xE6rmere forklaring.",o,i.createElement(e,{...t},"Enda et tooltip her.")));export{z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/utils/loremtext.ts","../../../src/components/TooltipExample/TooltipExample.tsx"],"sourcesContent":["export const shortLoremText = 'Officia laboris in sit nisi consectetur eu.';\nexport const mediumLoremText =\n 'Cupidatat culpa dolor id nulla sit commodo elit aliqua cillum. Reprehenderit aute aute enim non adipisicing duis adipisicing id laboris aliquip tempor amet. Non occaecat minim ad duis sunt et.';\nexport const longLoremText =\n 'Dolore quis tempor culpa exercitation laboris. Enim enim pariatur veniam nisi ad quis fugiat magna occaecat nisi. Excepteur ad ad duis quis mollit ex. Laboris duis velit eu eiusmod ea in ex aliqua. Est proident proident dolor veniam nostrud aliquip occaecat dolore sunt laboris nisi ipsum Lorem nisi. Magna sunt ex occaecat amet id. Eiusmod magna Lorem proident est occaecat pariatur sunt esse nostrud. Mollit reprehenderit velit veniam amet ipsum veniam et. Dolor sunt adipisicing enim dolore quis qui occaecat esse quis ut fugiat laboris. ';\n\nexport default longLoremText;\n","import React from 'react';\n\nimport Tooltip, { TooltipProps, TooltipOpenProvider } from '../Tooltip';\nimport longLoremText from '../../utils/loremtext';\n\nconst TooltipExample: React.FC<TooltipProps> = props => {\n return (\n <TooltipOpenProvider>\n <>\n <Tooltip {...props}>{'Et tooltip her.'}</Tooltip>\n {' ' + longLoremText}\n {'Dette er '}\n <Tooltip {...props}>{props.children}</Tooltip>\n {' som skal ha nærmere forklaring.'}\n {longLoremText}\n <Tooltip {...props}>{'Enda et tooltip her.'}</Tooltip>\n </>\n </TooltipOpenProvider>\n );\n};\n\nexport default TooltipExample;\n"],"names":["longLoremText","TooltipExample","props","React","TooltipOpenProvider","Tooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/loremtext.ts","../../../src/components/TooltipExample/TooltipExample.tsx"],"sourcesContent":["export const shortLoremText = 'Officia laboris in sit nisi consectetur eu.';\nexport const mediumLoremText =\n 'Cupidatat culpa dolor id nulla sit commodo elit aliqua cillum. Reprehenderit aute aute enim non adipisicing duis adipisicing id laboris aliquip tempor amet. Non occaecat minim ad duis sunt et.';\nexport const longLoremText =\n 'Dolore quis tempor culpa exercitation laboris. Enim enim pariatur veniam nisi ad quis fugiat magna occaecat nisi. Excepteur ad ad duis quis mollit ex. Laboris duis velit eu eiusmod ea in ex aliqua. Est proident proident dolor veniam nostrud aliquip occaecat dolore sunt laboris nisi ipsum Lorem nisi. Magna sunt ex occaecat amet id. Eiusmod magna Lorem proident est occaecat pariatur sunt esse nostrud. Mollit reprehenderit velit veniam amet ipsum veniam et. Dolor sunt adipisicing enim dolore quis qui occaecat esse quis ut fugiat laboris. ';\n\nexport default longLoremText;\n","import React from 'react';\n\nimport Tooltip, { TooltipProps, TooltipOpenProvider } from '../Tooltip';\nimport longLoremText from '../../utils/loremtext';\n\nconst TooltipExample: React.FC<TooltipProps> = props => {\n return (\n <TooltipOpenProvider>\n <>\n <Tooltip {...props}>{'Et tooltip her.'}</Tooltip>\n {' ' + longLoremText}\n {'Dette er '}\n <Tooltip {...props}>{props.children}</Tooltip>\n {' som skal ha nærmere forklaring.'}\n {longLoremText}\n <Tooltip {...props}>{'Enda et tooltip her.'}</Tooltip>\n </>\n </TooltipOpenProvider>\n );\n};\n\nexport default TooltipExample;\n"],"names":["longLoremText","TooltipExample","props","React","TooltipOpenProvider","Tooltip"],"mappings":"o5BAGO,MAAMA,EACX,giBCCIC,EAAkDC,GAEpDC,EAAA,cAACC,EACC,KAAAD,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQ,iBAAkB,EACtC,IAAMF,EACN,YACAG,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQA,EAAM,QAAS,EACnC,sCACAF,EACAG,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQ,sBAAuB,CAC9C,CACF"}
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const FOCUSABLE_SELECTORS: string;
|
|
3
2
|
/**
|
|
4
3
|
* Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig
|
|
5
4
|
* ikke kunne fokuseres/tabbes til med tastaturet.
|
|
6
|
-
*
|
|
7
|
-
* Bruker MutationObserver slik at eventuelle nye elementer som legges til også vil miste/få fokus.
|
|
8
|
-
*
|
|
9
5
|
* @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare
|
|
10
6
|
* @param allowFocus Om elementene skal være fokuserbare eller ikke
|
|
11
|
-
* @returns
|
|
7
|
+
* @returns void
|
|
12
8
|
*/
|
|
13
|
-
export declare const useFocusToggle: (ref: React.RefObject<HTMLElement>, allowFocus?: boolean) =>
|
|
9
|
+
export declare const useFocusToggle: (ref: React.RefObject<HTMLElement>, allowFocus?: boolean) => void;
|
|
14
10
|
//# sourceMappingURL=useFocusToggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusToggle.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useFocusToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusToggle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,eAAe,OAAO,KAAG,IA4BxF,CAAC"}
|
package/hooks/useFocusToggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{useEffect as s}from"react";import{useFocusableElements as b}from"./useFocusableElements.js";const I=(o,A)=>{const e=b(o);s(()=>{const r="tabindex",T="data-tabindex";A?e==null||e.forEach(t=>{const i=t.getAttribute(T);i?t.setAttribute(r,i):t.removeAttribute(r)}):e==null||e.forEach(t=>{t.hasAttribute(r)&&t.setAttribute(T,`${t.tabIndex}`),t.tabIndex=-1})},[o,A,e])};export{I as useFocusToggle};
|
|
2
2
|
//# sourceMappingURL=useFocusToggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusToggle.js","sources":["../../src/hooks/useFocusToggle.ts"],"sourcesContent":["import React, { useEffect
|
|
1
|
+
{"version":3,"file":"useFocusToggle.js","sources":["../../src/hooks/useFocusToggle.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useFocusableElements } from './useFocusableElements';\n\n/**\n * Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig\n * ikke kunne fokuseres/tabbes til med tastaturet.\n * @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare\n * @param allowFocus Om elementene skal være fokuserbare eller ikke\n * @returns void\n */\nexport const useFocusToggle = (ref: React.RefObject<HTMLElement>, allowFocus?: boolean): void => {\n const focusableElementList = useFocusableElements(ref);\n\n useEffect(() => {\n const TABINDEX_ATTRIBUTE_NAME = 'tabindex';\n const PREVIOUS_TABINDEX_ATTRIBUTE_NAME = 'data-tabindex';\n if (allowFocus) {\n focusableElementList?.forEach(el => {\n // Sett tabIndex tilbake til verdien den hadde før, eller fjern tabIndex\n // slik at elementet kan tabbes til igjen.\n const prevTabIndex = el.getAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME);\n if (prevTabIndex) {\n el.setAttribute(TABINDEX_ATTRIBUTE_NAME, prevTabIndex);\n } else {\n el.removeAttribute(TABINDEX_ATTRIBUTE_NAME);\n }\n });\n } else {\n focusableElementList?.forEach(el => {\n // Hvis elementet allerede har tabIndex, ta vare på den før vi gjør det umulig å\n // tabbe til det.\n if (el.hasAttribute(TABINDEX_ATTRIBUTE_NAME)) {\n el.setAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME, `${el.tabIndex}`);\n }\n el.tabIndex = -1;\n });\n }\n }, [ref, allowFocus, focusableElementList]);\n};\n"],"names":["useFocusToggle","ref","allowFocus","focusableElementList","useFocusableElements","useEffect","TABINDEX_ATTRIBUTE_NAME","PREVIOUS_TABINDEX_ATTRIBUTE_NAME","el","prevTabIndex"],"mappings":"mGAUa,MAAAA,EAAiB,CAACC,EAAmCC,IAA+B,CACzF,MAAAC,EAAuBC,EAAqBH,CAAG,EAErDI,EAAU,IAAM,CACd,MAAMC,EAA0B,WAC1BC,EAAmC,gBACrCL,EACFC,GAAA,MAAAA,EAAsB,QAAcK,GAAA,CAG5B,MAAAC,EAAeD,EAAG,aAAaD,CAAgC,EACjEE,EACCD,EAAA,aAAaF,EAAyBG,CAAY,EAErDD,EAAG,gBAAgBF,CAAuB,CAC5C,GAGFH,GAAA,MAAAA,EAAsB,QAAcK,GAAA,CAG9BA,EAAG,aAAaF,CAAuB,GACzCE,EAAG,aAAaD,EAAkC,GAAGC,EAAG,UAAU,EAEpEA,EAAG,SAAW,EAAA,EAGjB,EAAA,CAACP,EAAKC,EAAYC,CAAoB,CAAC,CAC5C"}
|
package/hooks/useFocusTrap.d.ts
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.
|
|
4
|
+
* @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det
|
|
5
|
+
* @param trapFocus Om fokus skal "trappes" innenfor elementet eller ikke. Default=true.
|
|
6
|
+
* @param autofocus Om fokus automatisk skal settes til første fokuserbare element. Default=false.
|
|
7
|
+
*/
|
|
8
|
+
export declare const useFocusTrap: (ref: React.RefObject<HTMLElement>, trapFocus?: boolean, autofocus?: boolean) => void;
|
|
3
9
|
export default useFocusTrap;
|
|
4
10
|
//# sourceMappingURL=useFocusTrap.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC;;;;;GAKG;AACH,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,cAAa,OAAO,cAAoB,OAAO,KAAW,IAgCvH,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/hooks/useFocusTrap.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{useEffect as u}from"react";import{getDocumentActiveElement as f}from"./focus-utils.js";import{useFocusableElements as m}from"./useFocusableElements.js";const h=(n,o=!0,c=!1)=>{const e=m(n),i=t=>{if(o&&n.current&&(e==null?void 0:e.length)&&t.key==="Tab"){const r=f(n.current),s=e[0],l=e.length===1?s:e[e.length-1];t.shiftKey&&r===s?(l.focus(),t.preventDefault()):!t.shiftKey&&r===l&&(s.focus(),t.preventDefault())}};u(()=>{var t;return c&&o&&(e==null?void 0:e.length)&&e[0].focus(),(t=n.current)==null||t.addEventListener("keydown",i),()=>{var r;(r=n.current)==null||r.removeEventListener("keydown",i)}},[n,o,c,e])};export{h as default,h as useFocusTrap};
|
|
2
2
|
//# sourceMappingURL=useFocusTrap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { getDocumentActiveElement } from './focus-utils';\nimport { useFocusableElements } from './useFocusableElements';\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 * @param autofocus Om fokus automatisk skal settes til første fokuserbare element. Default=false.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement>, trapFocus: boolean = true, autofocus: boolean = false): 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 if (e.shiftKey && activeElement === firstElement) {\n /* shift + tab */\n lastElement.focus();\n e.preventDefault();\n } else if (!e.shiftKey && activeElement === lastElement) {\n /* tab */\n firstElement.focus();\n e.preventDefault();\n }\n }\n };\n\n useEffect(() => {\n if (autofocus && trapFocus && focusableElementList?.length) {\n focusableElementList[0].focus();\n }\n\n ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n return (): void => {\n ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n };\n }, [ref, trapFocus, autofocus, focusableElementList]); // focusableElementList må være med som dependency for at handleKeyboardEvent skal få oppdatert state\n};\n\nexport default useFocusTrap;\n"],"names":["useFocusTrap","ref","trapFocus","autofocus","focusableElementList","useFocusableElements","handleKeyboardEvent","e","activeElement","getDocumentActiveElement","firstElement","lastElement","useEffect","_a"],"mappings":"+JAUO,MAAMA,EAAe,CAACC,EAAmCC,EAAqB,GAAMC,EAAqB,KAAgB,CACxH,MAAAC,EAAuBC,EAAqBJ,CAAG,EAE/CK,EAAuBC,GAA2B,CACtD,GAAIL,GAAaD,EAAI,UAAWG,GAAA,YAAAA,EAAsB,SAAUG,EAAE,MAAQ,MAAO,CACzE,MAAAC,EAAgBC,EAAyBR,EAAI,OAAO,EACpDS,EAAeN,EAAqB,GACpCO,EAAcP,EAAqB,SAAW,EAAIM,EAAeN,EAAqBA,EAAqB,OAAS,GAEtHG,EAAE,UAAYC,IAAkBE,GAElCC,EAAY,MAAM,EAClBJ,EAAE,eAAe,GACR,CAACA,EAAE,UAAYC,IAAkBG,IAE1CD,EAAa,MAAM,EACnBH,EAAE,eAAe,EAErB,CAAA,EAGFK,EAAU,IAAM,OACV,OAAAT,GAAaD,IAAaE,GAAA,YAAAA,EAAsB,SAClDA,EAAqB,GAAG,SAGtBS,EAAAZ,EAAA,UAAA,MAAAY,EAAS,iBAAiB,UAAWP,GAElC,IAAY,QACbO,EAAAZ,EAAA,UAAA,MAAAY,EAAS,oBAAoB,UAAWP,EAAmB,GAEhE,CAACL,EAAKC,EAAWC,EAAWC,CAAoB,CAAC,CACtD"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const FOCUSABLE_SELECTORS: string;
|
|
2
|
+
/**
|
|
3
|
+
* Overvåk et element og finn alle fokuserbare elementer inne i elementet. Bruker MutationObserver slik at eventuelle
|
|
4
|
+
* nye elementer som legges til også vil inkluderes i listen.
|
|
5
|
+
* @param ref Element som skal observeres
|
|
6
|
+
* @returns Liste med fokuserbare HTML-elementer
|
|
7
|
+
*/
|
|
8
|
+
export declare const useFocusableElements: (ref: React.RefObject<HTMLElement>) => NodeListOf<HTMLElement> | undefined;
|
|
9
|
+
//# sourceMappingURL=useFocusableElements.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFocusableElements.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusableElements.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,QAarB,CAAC;AAEZ;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,KAAG,WAAW,WAAW,CAAC,GAAG,SAsBlG,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useState as s,useEffect as b}from"react";const r=['a[href]:not([tabindex^="-"])','area[href]:not([tabindex^="-"])','input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])','input[type="radio"]:not([disabled]):not([tabindex^="-"])','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','iframe:not([tabindex^="-"])','audio[controls]:not([tabindex^="-"])','video[controls]:not([tabindex^="-"])','[contenteditable]:not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])'].join(","),c=t=>{const[i,a]=s();return b(()=>{const e=()=>{var o;const d=(o=t.current)==null?void 0:o.querySelectorAll(r);a(d)},n=new MutationObserver(e);return t!=null&&t.current&&n.observe(t.current,{subtree:!0,childList:!0}),e(),()=>{n.disconnect()}},[t]),i};export{r as FOCUSABLE_SELECTORS,c as useFocusableElements};
|
|
2
|
+
//# sourceMappingURL=useFocusableElements.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFocusableElements.js","sources":["../../src/hooks/useFocusableElements.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n// Fra https://github.com/KittyGiraudel/focusable-selectors\nexport const FOCUSABLE_SELECTORS = [\n 'a[href]:not([tabindex^=\"-\"])',\n 'area[href]:not([tabindex^=\"-\"])',\n 'input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])',\n 'input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])',\n 'select:not([disabled]):not([tabindex^=\"-\"])',\n 'textarea:not([disabled]):not([tabindex^=\"-\"])',\n 'button:not([disabled]):not([tabindex^=\"-\"])',\n 'iframe:not([tabindex^=\"-\"])',\n 'audio[controls]:not([tabindex^=\"-\"])',\n 'video[controls]:not([tabindex^=\"-\"])',\n '[contenteditable]:not([tabindex^=\"-\"])',\n '[tabindex]:not([tabindex^=\"-\"])',\n].join(',');\n\n/**\n * Overvåk et element og finn alle fokuserbare elementer inne i elementet. Bruker MutationObserver slik at eventuelle\n * nye elementer som legges til også vil inkluderes i listen.\n * @param ref Element som skal observeres\n * @returns Liste med fokuserbare HTML-elementer\n */\nexport const useFocusableElements = (ref: React.RefObject<HTMLElement>): NodeListOf<HTMLElement> | undefined => {\n const [focusableElementList, setFocusableElementList] = useState<NodeListOf<HTMLElement>>();\n\n useEffect(() => {\n const handleMutationChange = () => {\n const elementList = ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS);\n setFocusableElementList(elementList);\n };\n\n const mutationObserver = new MutationObserver(handleMutationChange);\n if (ref?.current) {\n mutationObserver.observe(ref.current, { subtree: true, childList: true });\n }\n\n handleMutationChange();\n\n return (): void => {\n mutationObserver.disconnect();\n };\n }, [ref]);\n\n return focusableElementList;\n};\n"],"names":["FOCUSABLE_SELECTORS","useFocusableElements","ref","focusableElementList","setFocusableElementList","useState","useEffect","handleMutationChange","elementList","_a","mutationObserver"],"mappings":"gDAGO,MAAMA,EAAsB,CACjC,+BACA,kCACA,sFACA,2DACA,8CACA,gDACA,8CACA,8BACA,uCACA,uCACA,yCACA,iCACF,EAAE,KAAK,GAAG,EAQGC,EAAwBC,GAA2E,CAC9G,KAAM,CAACC,EAAsBC,CAAuB,EAAIC,EAAkC,EAE1F,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAuB,IAAM,OACjC,MAAMC,GAAcC,EAAAP,EAAI,UAAJ,YAAAO,EAAa,iBAA8BT,GAC/DI,EAAwBI,CAAW,CAAA,EAG/BE,EAAmB,IAAI,iBAAiBH,CAAoB,EAClE,OAAIL,GAAA,MAAAA,EAAK,SACUQ,EAAA,QAAQR,EAAI,QAAS,CAAE,QAAS,GAAM,UAAW,GAAM,EAGrDK,IAEd,IAAY,CACjBG,EAAiB,WAAW,CAAA,CAC9B,EACC,CAACR,CAAG,CAAC,EAEDC,CACT"}
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
* @param callback Kalles når en endring i intersection er observert
|
|
7
7
|
* @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres
|
|
8
8
|
*/
|
|
9
|
-
export declare const useIntersectionObserver: (ref: React.RefObject<
|
|
9
|
+
export declare const useIntersectionObserver: (ref: React.RefObject<Element>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => void;
|
|
10
10
|
//# sourceMappingURL=useIntersectionObserver.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useIntersectionObserver.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,eAAO,MAAM,uBAAuB,QAC7B,MAAM,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useIntersectionObserver.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,eAAO,MAAM,uBAAuB,QAC7B,MAAM,SAAS,CAAC,OAAO,CAAC,YACnB,4BAA4B,YAC5B,wBAAwB,KACjC,IAgBF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIntersectionObserver.js","sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Lytt på endringer i synligheten (intersection) til et HTML-element. F.eks. kan du bruke denne til å kalle en callback\n * når elementet er i ferd med å forsvinne ut av vinduet.\n *\n * @param ref Element som skal observeres\n * @param callback Kalles når en endring i intersection er observert\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n */\n\nexport const useIntersectionObserver = (\n ref: React.RefObject<
|
|
1
|
+
{"version":3,"file":"useIntersectionObserver.js","sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Lytt på endringer i synligheten (intersection) til et HTML-element. F.eks. kan du bruke denne til å kalle en callback\n * når elementet er i ferd med å forsvinne ut av vinduet.\n *\n * @param ref Element som skal observeres\n * @param callback Kalles når en endring i intersection er observert\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n */\n\nexport const useIntersectionObserver = (\n ref: React.RefObject<Element>,\n callback: IntersectionObserverCallback,\n options?: IntersectionObserverInit\n): void => {\n useEffect(() => {\n const intersectionObserver = new IntersectionObserver(callback, options);\n\n if (ref?.current) {\n intersectionObserver.observe(ref.current);\n }\n\n return (): void => {\n if (ref?.current) {\n intersectionObserver.unobserve(ref.current);\n } else {\n intersectionObserver.disconnect();\n }\n };\n }, [ref, options]);\n};\n"],"names":["useIntersectionObserver","ref","callback","options","useEffect","intersectionObserver"],"mappings":"kCAWO,MAAMA,EAA0B,CACrCC,EACAC,EACAC,IACS,CACTC,EAAU,IAAM,CACd,MAAMC,EAAuB,IAAI,qBAAqBH,EAAUC,CAAO,EAEvE,OAAIF,GAAA,MAAAA,EAAK,SACcI,EAAA,QAAQJ,EAAI,OAAO,EAGnC,IAAY,CACbA,GAAA,MAAAA,EAAK,QACcI,EAAA,UAAUJ,EAAI,OAAO,EAE1CI,EAAqB,WAAW,CAClC,CACF,EACC,CAACJ,EAAKE,CAAO,CAAC,CACnB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Kjør en funksjon ved intervaller basert på ønsket frequency.
|
|
3
|
+
*
|
|
4
|
+
* @param callback Funksjon som skal kjøres
|
|
5
|
+
* @param frequency Hvor ofte vi skal kjøre funksjonen
|
|
6
|
+
* @returns void
|
|
7
|
+
*/
|
|
8
|
+
export declare const useInterval: (callback: () => void, frequency?: number) => void;
|
|
9
|
+
//# sourceMappingURL=useInterval.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../src/hooks/useInterval.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,aAAc,MAAM,IAAI,yBAAmB,IAQlE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInterval.js","sources":["../../src/hooks/useInterval.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Kjør en funksjon ved intervaller basert på ønsket frequency.\n *\n * @param callback Funksjon som skal kjøres\n * @param frequency Hvor ofte vi skal kjøre funksjonen\n * @returns void\n */\nexport const useInterval = (callback: () => void, frequency = 10): void => {\n useEffect(() => {\n const timer = setInterval(callback, frequency);\n\n return () => {\n clearInterval(timer);\n };\n }, [callback, frequency]);\n};\n"],"names":["useInterval","callback","frequency","useEffect","timer"],"mappings":"kCASO,MAAMA,EAAc,CAACC,EAAsBC,EAAY,KAAa,CACzEC,EAAU,IAAM,CACR,MAAAC,EAAQ,YAAYH,EAAUC,CAAS,EAE7C,MAAO,IAAM,CACX,cAAcE,CAAK,CAAA,CACrB,EACC,CAACH,EAAUC,CAAS,CAAC,CAC1B"}
|
package/hooks/useIsVisible.d.ts
CHANGED
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
* @param initial Om elementet default skal antas å være synlig eller ikke. Default: ikke synlig
|
|
8
8
|
* @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke
|
|
9
9
|
*/
|
|
10
|
-
export declare const useIsVisible: (ref: React.RefObject<
|
|
10
|
+
export declare const useIsVisible: (ref: React.RefObject<Element>, threshold?: number, options?: IntersectionObserverInit, initial?: boolean) => boolean;
|
|
11
11
|
//# sourceMappingURL=useIsVisible.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsVisible.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsVisible.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAClB,MAAM,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"useIsVisible.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsVisible.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAClB,MAAM,SAAS,CAAC,OAAO,CAAC,gCAEnB,wBAAwB,wBAEjC,OAUF,CAAC"}
|
package/hooks/useIsVisible.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState as a}from"react";import{useIntersectionObserver as c}from"./useIntersectionObserver.js";const
|
|
1
|
+
import{useState as a}from"react";import{useIntersectionObserver as c}from"./useIntersectionObserver.js";const u=(s,e=1,i,n=!1)=>{const[o,r]=a(n);return c(s,t=>{r(e===0?t[0].intersectionRatio!==e:t[0].intersectionRatio>=e)},{threshold:e,...i}),o};export{u as useIsVisible};
|
|
2
2
|
//# sourceMappingURL=useIsVisible.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsVisible.js","sources":["../../src/hooks/useIsVisible.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIntersectionObserver } from './useIntersectionObserver';\n\n/**\n * Sjekk om et HTML-element er synlig i vinduet, eller ikke.\n *\n * @param ref Element som skal observeres\n * @param threshold Hvor synlig må elementet være? Default = 1 (helt synlig)\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n * @param initial Om elementet default skal antas å være synlig eller ikke. Default: ikke synlig\n * @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke\n */\nexport const useIsVisible = (\n ref: React.RefObject<
|
|
1
|
+
{"version":3,"file":"useIsVisible.js","sources":["../../src/hooks/useIsVisible.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIntersectionObserver } from './useIntersectionObserver';\n\n/**\n * Sjekk om et HTML-element er synlig i vinduet, eller ikke.\n *\n * @param ref Element som skal observeres\n * @param threshold Hvor synlig må elementet være? Default = 1 (helt synlig)\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n * @param initial Om elementet default skal antas å være synlig eller ikke. Default: ikke synlig\n * @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke\n */\nexport const useIsVisible = (\n ref: React.RefObject<Element>,\n threshold = 1,\n options?: IntersectionObserverInit,\n initial = false\n): boolean => {\n const [isVisible, setIsVisible] = useState(initial);\n\n const handleIntersectChange: IntersectionObserverCallback = entries => {\n setIsVisible(threshold === 0 ? entries[0].intersectionRatio !== threshold : entries[0].intersectionRatio >= threshold);\n };\n\n useIntersectionObserver(ref, handleIntersectChange, { threshold, ...options });\n\n return isVisible;\n};\n"],"names":["useIsVisible","ref","threshold","options","initial","isVisible","setIsVisible","useState","useIntersectionObserver","entries"],"mappings":"wGAYO,MAAMA,EAAe,CAC1BC,EACAC,EAAY,EACZC,EACAC,EAAU,KACE,CACZ,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAASH,CAAO,EAMlD,OAAAI,EAAwBP,EAJ+CQ,GAAA,CACxDH,EAAAJ,IAAc,EAAIO,EAAQ,GAAG,oBAAsBP,EAAYO,EAAQ,GAAG,mBAAqBP,CAAS,CAAA,EAGnE,CAAE,UAAAA,EAAW,GAAGC,EAAS,EAEtEE,CACT"}
|
package/hooks/useSize.d.ts
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
* Lytt på endringer i størrelse på et element
|
|
3
3
|
*
|
|
4
4
|
* @param ref Element som skal observeres.
|
|
5
|
-
* @returns Object med høyde, bredde, x og y til elementet
|
|
5
|
+
* @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når
|
|
6
|
+
* posisjonen (x og y) endres.
|
|
6
7
|
*/
|
|
7
8
|
export declare const useSize: (ref?: React.RefObject<HTMLElement>) => DOMRect | undefined;
|
|
8
9
|
//# sourceMappingURL=useSize.d.ts.map
|
package/hooks/useSize.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useSize.ts"],"names":[],"mappings":"AAGA
|
|
1
|
+
{"version":3,"file":"useSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useSize.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,SAAU,MAAM,SAAS,CAAC,WAAW,CAAC,wBAwCzD,CAAC"}
|
package/hooks/useSize.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState as
|
|
1
|
+
import{useState as d,useEffect as r}from"react";import{d as a}from"../debounce.js";const w=e=>{const[i,c]=d();return r(()=>{if(typeof ResizeObserver<"u"){const n=new ResizeObserver(t=>{c(t[0].target.getBoundingClientRect())});return e!=null&&e.current&&n.observe(e==null?void 0:e.current),()=>{e!=null&&e.current?n.unobserve(e.current):n.disconnect()}}else if(typeof window=="object"){const n=()=>{e!=null&&e.current&&c(e.current.getBoundingClientRect())},t=["layoutchange","resize","orientationchange"],[o,u]=a(n,10);return t.forEach(s=>window.addEventListener(s,o)),o(),()=>{u(),t.forEach(s=>window.removeEventListener(s,o))}}},[e==null?void 0:e.current]),i};export{w as useSize};
|
|
2
2
|
//# sourceMappingURL=useSize.js.map
|
package/hooks/useSize.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSize.js","sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement>) => {\n const [size, setSize] = useState<DOMRect>();\n useEffect(() => {\n if (typeof ResizeObserver !== 'undefined') {\n const resizeObserver = new ResizeObserver(entries => {\n setSize(entries[0].target.getBoundingClientRect());\n });\n if (ref?.current) {\n resizeObserver.observe(ref?.current);\n }\n return (): void => {\n if (ref?.current) {\n resizeObserver.unobserve(ref.current);\n } else {\n resizeObserver.disconnect();\n }\n };\n } else if (typeof window === 'object') {\n // For nettlesere som ikke støtter ResizeObserver (iOS 13 og lavere)\n const handleLayoutEvent = () => {\n ref?.current && setSize(ref.current.getBoundingClientRect());\n };\n\n const events = ['layoutchange', 'resize', 'orientationchange'];\n const debounceMs = 10;\n\n const [debouncedCallback, teardown] = debounce(handleLayoutEvent, debounceMs);\n\n events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n debouncedCallback();\n\n return () => {\n teardown();\n events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n };\n }\n }, [ref]);\n\n return size;\n};\n"],"names":["useSize","ref","size","setSize","useState","useEffect","resizeObserver","entries","handleLayoutEvent","events","debouncedCallback","teardown","debounce","eventName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useSize.js","sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når\n * posisjonen (x og y) endres.\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement>) => {\n const [size, setSize] = useState<DOMRect>();\n useEffect(() => {\n if (typeof ResizeObserver !== 'undefined') {\n const resizeObserver = new ResizeObserver(entries => {\n setSize(entries[0].target.getBoundingClientRect());\n });\n if (ref?.current) {\n resizeObserver.observe(ref?.current);\n }\n return (): void => {\n if (ref?.current) {\n resizeObserver.unobserve(ref.current);\n } else {\n resizeObserver.disconnect();\n }\n };\n } else if (typeof window === 'object') {\n // For nettlesere som ikke støtter ResizeObserver (iOS 13 og lavere)\n const handleLayoutEvent = () => {\n ref?.current && setSize(ref.current.getBoundingClientRect());\n };\n\n const events = ['layoutchange', 'resize', 'orientationchange'];\n const debounceMs = 10;\n\n const [debouncedCallback, teardown] = debounce(handleLayoutEvent, debounceMs);\n\n events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n debouncedCallback();\n\n return () => {\n teardown();\n events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n };\n }\n }, [ref?.current]);\n\n return size;\n};\n"],"names":["useSize","ref","size","setSize","useState","useEffect","resizeObserver","entries","handleLayoutEvent","events","debouncedCallback","teardown","debounce","eventName"],"mappings":"mFAUa,MAAAA,EAAWC,GAAuC,CAC7D,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACV,GAAA,OAAO,eAAmB,IAAa,CACnC,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CACnDJ,EAAQI,EAAQ,GAAG,OAAO,sBAAuB,CAAA,CAAA,CAClD,EACD,OAAIN,GAAA,MAAAA,EAAK,SACQK,EAAA,QAAQL,GAAA,YAAAA,EAAK,OAAO,EAE9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQK,EAAA,UAAUL,EAAI,OAAO,EAEpCK,EAAe,WAAW,CAC5B,CACF,SACS,OAAO,QAAW,SAAU,CAErC,MAAME,EAAoB,IAAM,CAC9BP,GAAA,MAAAA,EAAK,SAAWE,EAAQF,EAAI,QAAQ,uBAAuB,CAAA,EAGvDQ,EAAS,CAAC,eAAgB,SAAU,mBAAmB,EAGvD,CAACC,EAAmBC,CAAQ,EAAIC,EAASJ,EAAmB,EAAU,EAE5E,OAAAC,EAAO,QAAqBI,GAAA,OAAO,iBAAiBA,EAAWH,CAAiB,CAAC,EAE/DA,IAEX,IAAM,CACFC,IACTF,EAAO,QAAqBI,GAAA,OAAO,oBAAoBA,EAAWH,CAAiB,CAAC,CAAA,CAExF,CAAA,EACC,CAACT,GAAA,YAAAA,EAAK,OAAO,CAAC,EAEVC,CACT"}
|
package/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{theme as
|
|
1
|
+
import{theme as x}from"./theme/index.js";import{Breakpoint as n,useBreakpoint as a}from"./hooks/useBreakpoint.js";import{useFocusToggle as v}from"./hooks/useFocusToggle.js";import{useFocusTrap as y}from"./hooks/useFocusTrap.js";import{useHover as I}from"./hooks/useHover.js";import{useIntersectionObserver as l}from"./hooks/useIntersectionObserver.js";import{useIsVisible as F}from"./hooks/useIsVisible.js";import{useLayoutEvent as z}from"./hooks/useLayoutEvent.js";import{usePrevious as O}from"./hooks/usePrevious.js";import{useSticky as T}from"./hooks/useSticky.js";import{useSize as V}from"./hooks/useSize.js";import{useResizeObserver as A}from"./hooks/useResizeObserver.js";import{useToggle as L}from"./hooks/useToggle.js";import{useKeyboardEvent as P}from"./hooks/useKeyboardEvent.js";import{useOutsideEvent as U}from"./hooks/useOutsideEvent.js";import{useUuid as j}from"./hooks/useUuid.js";import{a as w}from"./uuid.js";import{AnalyticsId as D,FormMode as G,FormVariant as J,IconSize as N,KeyboardEventKey as Q,ZIndex as W}from"./constants.js";import"./theme/palette.js";import"./theme/spacers.js";import"./theme/grid.js";import"react";import"./hooks/useFocusableElements.js";import"./hooks/focus-utils.js";import"./debounce.js";export{D as AnalyticsId,n as Breakpoint,G as FormMode,J as FormVariant,N as IconSize,Q as KeyboardEventKey,W as ZIndex,x as theme,a as useBreakpoint,v as useFocusToggle,y as useFocusTrap,I as useHover,l as useIntersectionObserver,F as useIsVisible,P as useKeyboardEvent,z as useLayoutEvent,U as useOutsideEvent,O as usePrevious,A as useResizeObserver,V as useSize,T as useSticky,L as useToggle,j as useUuid,w as uuid};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
package/hooks/useGetDOMRect.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Hent ut posisjon og størrelse til en Ref, med intervaller basert på ønsket frequency.
|
|
4
|
-
*
|
|
5
|
-
* @param ref Element som skal observeres
|
|
6
|
-
* @param updatePosition om posisjonen skal fortsette å hentes ut
|
|
7
|
-
* @param frequency Hvor ofte skal vi hente posisjonen i MS
|
|
8
|
-
* @returns DOMRect objekt med posisjon og størrelse til ref
|
|
9
|
-
*/
|
|
10
|
-
export declare const useGetDOMRect: (ref: React.RefObject<HTMLElement | SVGSVGElement>, updatePosition?: boolean, frequency?: number) => [DOMRect, () => void];
|
|
11
|
-
//# sourceMappingURL=useGetDOMRect.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useGetDOMRect.d.ts","sourceRoot":"","sources":["../../src/hooks/useGetDOMRect.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,QACnB,MAAM,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,mDAGhD,CAAC,OAAO,EAAE,MAAM,IAAI,CA4CtB,CAAC"}
|
package/hooks/useGetDOMRect.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{useState as s,useEffect as I}from"react";const f=(t,e=!0,c=10)=>{const n={height:0,width:0,x:0,y:0,bottom:0,left:0,right:0,top:0,toJSON:()=>null},[i,o]=s(n),[l,u]=s();I(()=>(e?a():r(),()=>r()),[e]);const r=()=>{clearInterval(l)},a=()=>{const m=setInterval(()=>{t.current&&o(t.current.getBoundingClientRect())},c);u(m)};return[i,()=>{o(n)}]};export{f as useGetDOMRect};
|
|
2
|
-
//# sourceMappingURL=useGetDOMRect.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useGetDOMRect.js","sources":["../../src/hooks/useGetDOMRect.ts"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\n/**\n * Hent ut posisjon og størrelse til en Ref, med intervaller basert på ønsket frequency.\n *\n * @param ref Element som skal observeres\n * @param updatePosition om posisjonen skal fortsette å hentes ut\n * @param frequency Hvor ofte skal vi hente posisjonen i MS\n * @returns DOMRect objekt med posisjon og størrelse til ref\n */\nexport const useGetDOMRect = (\n ref: React.RefObject<HTMLElement | SVGSVGElement>,\n updatePosition = true,\n frequency = 10\n): [DOMRect, () => void] => {\n const newDOMRect = {\n height: 0,\n width: 0,\n x: 0,\n y: 0,\n bottom: 0,\n left: 0,\n right: 0,\n top: 0,\n toJSON: () => null,\n };\n const [domRect, setDomRect] = useState<DOMRect>(newDOMRect);\n const [intervalId, setIntervalId] = useState<NodeJS.Timer>();\n\n useEffect(() => {\n if (updatePosition) {\n startGetPosition();\n } else {\n stopGetPosition();\n }\n\n return () => stopGetPosition();\n }, [updatePosition]);\n\n const stopGetPosition = () => {\n clearInterval(intervalId);\n };\n\n const startGetPosition = () => {\n const newIntervalId = setInterval(() => {\n if (ref.current) {\n setDomRect(ref.current.getBoundingClientRect());\n }\n }, frequency);\n\n setIntervalId(newIntervalId);\n };\n\n const resetDomRect = () => {\n setDomRect(newDOMRect);\n };\n\n return [domRect, resetDomRect];\n};\n"],"names":["useGetDOMRect","ref","updatePosition","frequency","newDOMRect","domRect","setDomRect","useState","intervalId","setIntervalId","useEffect","startGetPosition","stopGetPosition","newIntervalId"],"mappings":"gDAUO,MAAMA,EAAgB,CAC3BC,EACAC,EAAiB,GACjBC,EAAY,KACc,CAC1B,MAAMC,EAAa,CACjB,OAAQ,EACR,MAAO,EACP,EAAG,EACH,EAAG,EACH,OAAQ,EACR,KAAM,EACN,MAAO,EACP,IAAK,EACL,OAAQ,IAAM,IAAA,EAEV,CAACC,EAASC,CAAU,EAAIC,EAAkBH,CAAU,EACpD,CAACI,EAAYC,CAAa,EAAIF,EAAuB,EAE3DG,EAAU,KACJR,EACeS,IAEDC,IAGX,IAAMA,EAAgB,GAC5B,CAACV,CAAc,CAAC,EAEnB,MAAMU,EAAkB,IAAM,CAC5B,cAAcJ,CAAU,CAAA,EAGpBG,EAAmB,IAAM,CACvB,MAAAE,EAAgB,YAAY,IAAM,CAClCZ,EAAI,SACKK,EAAAL,EAAI,QAAQ,sBAAuB,CAAA,GAE/CE,CAAS,EAEZM,EAAcI,CAAa,CAAA,EAOtB,MAAA,CAACR,EAJa,IAAM,CACzBC,EAAWF,CAAU,CAAA,CAGM,CAC/B"}
|