npm - @fremtind/jokul - Versions diffs - 1.1.0 → 1.1.1 - Mend

@fremtind/jokul 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/build/cjs/components/menu/Menu.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../../index-C-qqMC-u.cjs"),o=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs");const i=require("../../hooks/useId/useId.cjs"),a=require("../../utilities/getThemeAndDensity.cjs"),l=require("./useMenuWideEvents.cjs");function u(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const c=s.forwardRef(((c,d)=>{const{children:p,className:m,initialPlacement:f,openOnHover:g=!1,keepOpenOnClickOutside:x=!1,triggerElement:h,isOpen:y,onToggle:v,...j}=c,k=i.useId("jkl-menu"),{prefersReducedMotion:P}=o.useBrowserPreferences(),F=t.useFloatingTree(),w=t.useFloatingNodeId(),I=t.useFloatingParentNodeId(),E=null!=I,M=s.useRef([]),[q,R]=s.useState(null),{allowHover:b,isOpen:N,setIsOpen:C}=l.useMenuWideEvents(F,w,I),O=void 0!==y?y:N;s.useEffect((()=>v?.(O)),[O,v]);const{refs:S,placement:T,context:D,floatingStyles:A}=t.useFloating({nodeId:w,open:O,onOpenChange:C,placement:f||(E?"right-start":"bottom-start"),middleware:[t.offset(2),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:B,getFloatingProps:H,getItemProps:$}=t.useInteractions([t.useHover(D,{enabled:g&&b,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(D,{event:"mousedown"}),t.useDismiss(D,{outsidePress:!x}),t.useRole(D,{role:"menu"}),t.useListNavigation(D,{listRef:M,activeIndex:q,nested:E,onNavigate:R})]),K=t.useMergeRefs([S.setReference,d]),{theme:V,density:W}=a.getThemeAndDensity(S.reference.current),{isMounted:L,styles:U}=t.useTransitionStyles(D,{duration:{open:P?0:250,close:P?0:150},initial:({side:e})=>({opacity:0,translate:u(e,5)}),open:({side:e})=>({opacity:1,translate:u(e,0)}),close:({side:e})=>({opacity:0,translate:u(e,5)})});return e.jsxs(t.FloatingNode,{id:w,children:[s.isValidElement(h)&&("button"===h.type||r.reactIsExports.isForwardRef(h))?s.cloneElement(h,{...B({...j,ref:K,role:E?"menuitem":void 0,"aria-controls":k,onClick(e){e.stopPropagation()}})}):h,L&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:D,modal:!1,initialFocus:E?-1:0,returnFocus:!E,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",m),"data-theme":V,"data-layout-density":W,role:"menu","data-placement":T,"aria-live":"assertive","aria-hidden":!O,ref:S.setFloating,...H({id:k,style:{...A,...U}}),children:s.Children.map(p,((e,t)=>s.isValidElement(e)&&r.reactIsExports.isForwardRef(e)?s.cloneElement(e,$({...e.props,tabIndex:q===t?0:-1,role:"menuitem",ref(e){M.current[t]=e},onClick(t){e.props.onClick?.(t),!t.defaultPrevented&&F?.events.emit("click")},onKeyDown(t){e.props.onKeyDown?.(t),!t.defaultPrevented&&(F?.events.emit("keydown"),"menuitemcheckbox"===t.currentTarget.role&&"Enter"===t.key&&C(!1))},onMouseEnter(){b&&O&&R(t)}})):e))})})})]})}));c.displayName="MenuComponent";const d=s.forwardRef(((n,s)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(c,{ref:s,...n})}):e.jsx(c,{ref:s,...n})));d.displayName="Menu",exports.Menu=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../../index-C-qqMC-u.cjs"),o=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs");const i=require("../../hooks/useId/useId.cjs"),a=require("../../utilities/getThemeAndDensity.cjs"),l=require("./useMenuWideEvents.cjs");function u(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const c=s.forwardRef(((c,d)=>{const{children:p,className:m,initialPlacement:f,openOnHover:g=!1,keepOpenOnClickOutside:x=!1,triggerElement:h,isOpen:y,onToggle:j,...v}=c,k=i.useId("jkl-menu"),{prefersReducedMotion:P}=o.useBrowserPreferences(),F=t.useFloatingTree(),w=t.useFloatingNodeId(),I=t.useFloatingParentNodeId(),E=null!=I,M=s.useRef([]),[q,R]=s.useState(null),{allowHover:b,isOpen:N,setIsOpen:C}=l.useMenuWideEvents(F,w,I),O=void 0!==y?y:N;s.useEffect((()=>j?.(O)),[O,j]);const{refs:S,placement:T,context:D,floatingStyles:A}=t.useFloating({nodeId:w,open:O,onOpenChange:C,placement:f||(E?"right-start":"bottom-start"),middleware:[t.offset(2),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:B,getFloatingProps:H,getItemProps:$}=t.useInteractions([t.useHover(D,{enabled:g&&b,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(D,{event:"mousedown"}),t.useDismiss(D,{outsidePress:!x}),t.useRole(D,{role:"menu"}),t.useListNavigation(D,{listRef:M,activeIndex:q,nested:E,onNavigate:R})]),K=t.useMergeRefs([S.setReference,d]),{theme:V,density:W}=a.getThemeAndDensity(S.reference.current),{isMounted:L,styles:U}=t.useTransitionStyles(D,{duration:{open:P?0:250,close:P?0:150},initial:({side:e})=>({opacity:0,translate:u(e,5)}),open:({side:e})=>({opacity:1,translate:u(e,0)}),close:({side:e})=>({opacity:0,translate:u(e,5)})});return e.jsxs(t.FloatingNode,{id:w,children:[s.isValidElement(h)&&("button"===h.type||r.reactIsExports.isForwardRef(h))?s.cloneElement(h,{...B({...v,ref:K,role:E?"menuitem":void 0,"aria-controls":k,onClick(e){e.stopPropagation()}})}):h,L&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:D,modal:!1,initialFocus:E?-1:0,returnFocus:!E,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",m),"data-theme":V,"data-layout-density":W,role:"menu","data-placement":T,"aria-live":"assertive","aria-hidden":!O,ref:S.setFloating,...H({id:k,style:{...A,...U}}),children:s.Children.map(p,((e,t)=>s.isValidElement(e)&&r.reactIsExports.isForwardRef(e)?s.cloneElement(e,$({...e.props,tabIndex:q===t?0:-1,role:"menuitem",ref(e){M.current[t]=e},onClick(t){e.props.onClick?.(t),!t.defaultPrevented&&F?.events.emit("click")},onKeyDown(t){e.props.onKeyDown?.(t),!t.defaultPrevented&&(F?.events.emit("keydown"),"menuitemcheckbox"===t.currentTarget.role&&"Enter"===t.key&&C(!1))},onMouseEnter(){b&&O&&R(t)}})):e))})})})]})}));c.displayName="MenuComponent";const d=s.forwardRef(((n,s)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(c,{ref:s,...n})}):e.jsx(c,{ref:s,...n})));d.displayName="Menu",exports.Menu=d;
 //# sourceMappingURL=Menu.cjs.map

package/build/cjs/components/modal/stories/Modal.stories.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});/* empty css                             */const e={title:"Komponenter/Modal",component:require("../Modal.cjs").Modal,parameters:{layout:"centered"},tags:["autodocs"]};exports.Modal={args:{role:"document"}},exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("react"),t=require("../../button/Button.cjs"),r=require("../../input-group/InputGroup.cjs"),l=require("../../text-input/BaseTextInput.cjs"),n=require("../../tooltip/PopupTip.cjs"),d=require("../Modal.cjs"),s=require("../useModal.cjs");/* empty css                             *//* empty css                             *//* empty css                             */;/* empty css                            */const a={title:"Komponenter/Modal",component:d.Modal,subcomponents:{ModalActions:d.ModalActions,ModalBody:d.ModalBody,ModalCloseButton:d.ModalCloseButton,ModalContainer:d.ModalContainer,ModalHeader:d.ModalHeader,ModalOverlay:d.ModalOverlay,ModalTitle:d.ModalTitle},parameters:{layout:"centered"},tags:["autodocs"]},i={args:{role:"document"},render:a=>{const[i,u]=o.useState(!1),c="Bekreft sletting",[M,{title:j,overlay:p,container:x,modal:m,closeButton:h}]=s.useModal({title:c});return o.useEffect((()=>{M&&M.show()}),[M]),e.jsxs(e.Fragment,{children:[e.jsx(t.Button,{onClick:e=>u(!i),children:"Vis modal"}),i&&e.jsxs(d.ModalContainer,{...x,children:[e.jsx(d.ModalOverlay,{...p}),e.jsxs(d.Modal,{...m,children:[e.jsxs(d.ModalHeader,{children:[e.jsx(d.ModalTitle,{...j,children:c}),e.jsx(d.ModalCloseButton,{...h})]}),e.jsxs(d.ModalBody,{children:["Er du sikker på at du vil slette Foo Bar Baz?",e.jsx(r.InputGroup,{label:"Fødselsnummer",helpLabel:void 0,errorLabel:void 0,tooltip:e.jsx(n.PopupTip,{content:e.jsx(e.Fragment,{children:"Du må fylle ut fødelsnummer eller D-nummer. Se hvordan du finner D-nummer."})}),children:e.jsx(l.BaseTextInput,{})})]}),e.jsxs(d.ModalActions,{children:[e.jsx(t.Button,{onClick:()=>{M?.hide()},children:"Bekreft"}),e.jsx(t.Button,{onClick:()=>M?.hide(),children:"Avbryt"})]})]})]})]})}};exports.Modal=i,exports.default=a;
 //# sourceMappingURL=Modal.stories.cjs.map

package/build/cjs/components/modal/stories/Modal.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.stories.cjs","sources":["../../../../../src/components/modal/stories/Modal.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport \"~~../styles~~/~~_index~~.~~scss~~\";\nimport { Modal as ModalComponent } from \"../Modal.js\";\n\nconst meta = {\n title: \"Komponenter/Modal\",\n component: ModalComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof ModalComponent>;\n\nexport default meta;\n\ntype ~~Story~~ = StoryObj<typeof meta>;\n\nexport const Modal: ~~Story~~ = {\n args: {\n role: \"document\",\n },\n};\n"],"names":["meta","title","component","Modal","parameters","layout","tags","args","role"],"mappings":"~~6JAIMA~~,EAAO,CACTC,MAAO,oBACPC,~~kCAAWC~~,MACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,~~2BAOiB~~,~~CACxBC~~,KAAM,CACFC,KAAM"}
1	+ {"version":3,"file":"Modal.stories.cjs","sources":["../../../../../src/components/modal/stories/Modal.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useEffect, useState } from \"react\";\nimport { Button } from \"../../button/Button.js\";\nimport { InputGroup } from \"../../input-group/InputGroup.js\";\nimport { BaseTextInput } from \"../../text-input/BaseTextInput.js\";\nimport { PopupTip } from \"../../tooltip/PopupTip.js\";\nimport {\n ModalActions,\n ModalBody,\n ModalCloseButton,\n Modal as ModalComponent,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../Modal.js\";\nimport { useModal } from \"../useModal.js\";\n\nimport \"../../button/styles/_index.scss\";\nimport \"../styles/_index.scss\";\nimport \"../../input-group/styles/_index.scss\";\nimport \"../../text-input/styles/_index.scss\";\n\nconst meta = {\n title: \"Komponenter/Modal\",\n component: ModalComponent,\n subcomponents: {\n ModalActions,\n ModalBody,\n ModalCloseButton,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n },\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof ModalComponent>;\n\nexport default meta;\n\ntype ModalStory = StoryObj<typeof meta>;\n\nexport const Modal: ModalStory = {\n args: {\n role: \"document\",\n },\n render: (args) => {\n const [showModal, setShowModal] = useState(false);\n const heading = \"Bekreft sletting\";\n const [instance, { title, overlay, container, modal, closeButton }] =\n useModal({ title: heading });\n\n useEffect(() => {\n if (!instance) {\n return;\n }\n instance.show();\n }, [instance]);\n\n return (\n <>\n <Button onClick={(e) => setShowModal(!showModal)}>\n Vis modal\n </Button>\n {showModal && (\n <ModalContainer {...container}>\n <ModalOverlay {...overlay} />\n <ModalComponent {...modal}>\n <ModalHeader>\n <ModalTitle {...title}>{heading}</ModalTitle>\n <ModalCloseButton {...closeButton} />\n </ModalHeader>\n <ModalBody>\n Er du sikker på at du vil slette Foo Bar Baz?\n <InputGroup\n label=\"Fødselsnummer\"\n helpLabel={undefined}\n errorLabel={undefined}\n tooltip={\n <PopupTip\n content={\n <>\n Du må fylle ut fødelsnummer\n eller D-nummer. Se hvordan\n du finner D-nummer.\n </>\n }\n />\n }\n >\n <BaseTextInput />\n </InputGroup>\n </ModalBody>\n <ModalActions>\n <Button\n onClick={() => {\n instance?.hide();\n }}\n >\n Bekreft\n </Button>\n <Button onClick={() => instance?.hide()}>\n Avbryt\n </Button>\n </ModalActions>\n </ModalComponent>\n </ModalContainer>\n )}\n </>\n );\n },\n};\n"],"names":["meta","title","component","ModalComponent","Modal","subcomponents","ModalActions","ModalBody","ModalCloseButton","ModalContainer","ModalHeader","ModalOverlay","ModalTitle","parameters","layout","tags","args","role","render","showModal","setShowModal","useState","heading","instance","overlay","container","modal","closeButton","useModal","useEffect","show","jsxs","Fragment","children","jsx","Button","onClick","e","InputGroup","label","helpLabel","errorLabel","tooltip","PopupTip","content","BaseTextInput","hide"],"mappings":"kjBAuBA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EAAAC,MACXC,cAAe,CAAAC,aACXA,EAAAA,aAAAC,UACAA,EAAAA,UAAAC,iBACAA,EAAAA,iBAAAC,eACAA,EAAAA,eAAAC,YACAA,EAAAA,YAAAC,aACAA,EAAAA,aACAC,WAAAA,EAAAA,YAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEX,EAAoB,CAC7BY,KAAM,CACFC,KAAM,YAEVC,OAASF,IACL,MAAOG,EAAWC,GAAgBC,EAAAA,UAAS,GACrCC,EAAU,oBACTC,GAAYtB,MAAAA,EAAOuB,QAAAA,EAASC,UAAAA,EAAWC,MAAAA,EAAOC,YAAAA,IACjDC,EAAAA,SAAS,CAAE3B,MAAOqB,IAEtBO,OAAAA,EAAAA,WAAU,KACDN,GAGLA,EAASO,MAAK,GACf,CAACP,IAIIQ,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CAACC,EAAAA,IAAAC,EAAAA,OAAA,CAAOC,QAAUC,GAAMjB,GAAcD,GAAYc,SAElD,cACCd,GACGY,EAAAA,KAACtB,EAAAA,eAAgB,IAAGgB,EAChBQ,SAAA,CAACC,EAAAA,IAAAvB,EAAAA,aAAA,IAAiBa,IAClBO,EAAAA,KAAC5B,EAAgBC,MAAA,IAAGsB,EAChBO,SAAA,CAAAF,OAACrB,EAAAA,YACG,CAAAuB,SAAA,CAACC,EAAAA,IAAAtB,EAAAA,WAAA,IAAeX,EAAQgC,SAAQX,IAChCY,MAAC1B,EAAAA,iBAAkB,IAAGmB,cAEzBpB,EAAAA,UAAU,CAAA0B,SAAA,CAAA,gDAEPC,EAAAA,IAACI,EAAAA,WAAA,CACGC,MAAM,gBACNC,eAAW,EACXC,gBAAY,EACZC,QACIR,EAAAA,IAACS,EAAAA,SAAA,CACGC,0BACMX,SAIF,iFAKZA,eAACY,EAAAA,cAAc,CAAA,eAGtBvC,EAAAA,aACG,CAAA2B,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACGC,QAAS,KACLb,GAAUuB,MAAK,EAEtBb,SAAA,kBAGAE,EAAAA,OAAO,CAAAC,QAAS,IAAMb,GAAUuB,OAAQb,SAEzC,sBAKpB"}

package/build/cjs/components/modal/stories/Modal.stories.d.cts CHANGED Viewed

@@ -1,14 +1,44 @@
 import { StoryObj } from '@storybook/react';
+import { default as React } from 'react';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<{
+    component: React.ForwardRefExoticComponent<{
         role: "document";
-    } & import('../types.js').ModalProps & import('react').RefAttributes<HTMLElement>>;
+    } & import('../types.js').ModalProps & React.RefAttributes<HTMLElement>>;
+    subcomponents: {
+        ModalActions: React.ForwardRefExoticComponent<import('../types.js').BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+        ModalBody: React.ForwardRefExoticComponent<import('../types.js').BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+        ModalCloseButton: React.ForwardRefExoticComponent<Omit<{
+            type: "button";
+            onClick: () => void;
+        } & {
+            "aria-label": string;
+        }, "onClick"> & import('../types.js').BaseModalProps & import('../../icon-button/types.js').IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+        ModalContainer: React.ForwardRefExoticComponent<Omit<{
+            id: string;
+            ref: (node: React.ReactNode | HTMLElement) => void;
+            role: string;
+            'aria-modal': boolean;
+            'aria-hidden': boolean;
+            'aria-labelledby': string;
+        } & import('../types.js').BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+        ModalHeader: React.ForwardRefExoticComponent<import('../types.js').BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+        ModalOverlay: React.ForwardRefExoticComponent<{
+            onClick?: () => void;
+        } & import('../types.js').BaseModalProps & {
+            transparent?: boolean;
+        } & React.RefAttributes<HTMLDivElement>>;
+        ModalTitle: React.ForwardRefExoticComponent<{
+            role: "heading";
+            'aria-level': number;
+            id: string;
+        } & import('../types.js').BaseModalProps & React.RefAttributes<HTMLParagraphElement>>;
+    };
     parameters: {
         layout: string;
     };
     tags: string[];
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Modal: Story;
+type ModalStory = StoryObj<typeof meta>;
+export declare const Modal: ModalStory;

package/build/cjs/components/tooltip/TooltipContent.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),o=require("../../hooks/useId/useId.cjs"),i=require("../../utilities/getThemeAndDensity.cjs"),a=require("./Tooltip.cjs");function c(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const l=s.forwardRef((function({className:s,children:l,"data-ispopup":u,...d},p){const{triggerOn:g,arrowElement:f,getFloatingProps:h,placement:x,floatingStyles:j,refs:m,context:y}=a.useTooltipContext(),F=t.useMergeRefs([p,m.setFloating]),w=o.useId("jkl-tooltip-content"),{prefersReducedMotion:q}=n.useBrowserPreferences(),{isMounted:k,styles:T}=t.useTransitionStyles(y,{duration:{open:q?0:250,close:q?0:150},initial:({side:e})=>({opacity:0,translate:c(e,5)}),open:({side:e})=>({opacity:1,translate:c(e,0)}),close:({side:e})=>({opacity:0,translate:c(e,-5)})}),{density:P,theme:M}=i.getThemeAndDensity(m.reference.current);return e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{initialFocus:"click"===g?0:-1,returnFocus:!0,context:y,modal:!1,closeOnFocusOut:!0,children:e.jsxs(e.Fragment,{children:["hover"===g&&e.jsx("span",{ref:m.setDescription,hidden:!0,children:l},`${w}-trigger`),k&&e.jsx("span",{className:"jkl",children:e.jsxs("span",{ref:F,"data-placement":x,"data-testid":"tooltip-content","data-theme":M,"data-layout-density":P,className:r.clsx("jkl-tooltip-content",s),...h({...d,id:w}),style:{...j,...T},children:[l,e.jsx(t.FloatingArrow,{context:y,ref:f,width:24,height:12,fill:"var(--background-color)"})]},w)},`${w}-wrapper`)]})})})}));exports.TooltipContent=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),o=require("../../hooks/useId/useId.cjs"),i=require("../../utilities/getThemeAndDensity.cjs"),c=require("./Tooltip.cjs");function a(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const l=s.forwardRef((function({className:l,children:u,"data-ispopup":d,...p},f){const{triggerOn:g,arrowElement:h,getFloatingProps:m,placement:x,floatingStyles:j,refs:y,context:F}=c.useTooltipContext(),w=t.useMergeRefs([f,y.setFloating]),q=o.useId("jkl-tooltip-content"),{prefersReducedMotion:k}=n.useBrowserPreferences(),{isMounted:T,styles:P}=t.useTransitionStyles(F,{duration:{open:k?0:250,close:k?0:150},initial:({side:e})=>({opacity:0,translate:a(e,5)}),open:({side:e})=>({opacity:1,translate:a(e,0)}),close:({side:e})=>({opacity:0,translate:a(e,-5)})}),{density:R,theme:b}=i.getThemeAndDensity(y.reference.current),M=s.useRef(null);return s.useEffect((()=>{M.current=F.elements.domReference?.closest("[data-portal]")||document.body}),[F.elements.domReference]),e.jsx(t.FloatingPortal,{root:M.current,children:e.jsx(t.FloatingFocusManager,{initialFocus:"click"===g?0:-1,returnFocus:!0,context:F,modal:!1,closeOnFocusOut:!0,children:e.jsxs(e.Fragment,{children:["hover"===g&&e.jsx("span",{ref:y.setDescription,hidden:!0,children:u},`${q}-trigger`),T&&e.jsx("span",{className:"jkl",children:e.jsxs("span",{ref:w,"data-placement":x,"data-testid":"tooltip-content","data-theme":b,"data-layout-density":R,className:r.clsx("jkl-tooltip-content",l),...m({...p,id:q}),style:{...j,...P},children:[u,e.jsx(t.FloatingArrow,{context:F,ref:h,width:24,height:12,fill:"var(--background-color)"})]},q)},`${q}-wrapper`)]})})})}));exports.TooltipContent=l;
 //# sourceMappingURL=TooltipContent.cjs.map

package/build/cjs/components/tooltip/TooltipContent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.cjs","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n type Side,\n useMergeRefs,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { type HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nexport const TooltipContent = forwardRef<\n HTMLDivElement,\n HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n { className, children, [\"data-ispopup\"]: isPopup, ...props },\n forwardedRef,\n) {\n const {\n triggerOn,\n arrowElement,\n getFloatingProps,\n placement,\n floatingStyles,\n refs,\n context,\n } = useTooltipContext();\n const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n const contentId = useId(\"jkl-tooltip-content\");\n const { prefersReducedMotion } = useBrowserPreferences();\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, -5),\n }),\n },\n );\n\n // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { density, theme } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n initialFocus={triggerOn === \"click\" ? 0 : -1}\n returnFocus={true}\n context={context}\n modal={false}\n closeOnFocusOut={true}\n >\n <>\n {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n {triggerOn === \"hover\" && (\n <span\n ref={refs.setDescription}\n hidden\n key={`${contentId}-trigger`}\n >\n {children}\n </span>\n )}\n {isMounted && (\n <span className=\"jkl\" key={`${contentId}-wrapper`}>\n <span\n key={contentId}\n ref={ref}\n data-placement={placement}\n data-testid={\"tooltip-content\"}\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\n \"jkl-tooltip-content\",\n className,\n )}\n {...getFloatingProps({\n ...props,\n id: contentId,\n })}\n style={{\n ...floatingStyles,\n ...animationStyles,\n }}\n >\n {children}\n <FloatingArrow\n context={context}\n ref={arrowElement}\n width={24}\n height={12}\n fill=\"var(--background-color)\"\n />\n </span>\n </span>\n )}\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","~~FloatingPortal~~","jsx","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"iZAeA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,EAAAA,YAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,sBACEC,EAAMC,EAAAA,aAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,QAAM,wBAChBC,qBAAAA,GAAyBC,2BACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,OACRgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,~~MAAY~~,~~CACjBgC,~~QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,~~OACNgC~~,QAAS,EACTC,UAAWlC,EAAeC,~~GAAQ~~,~~QAOtCkC~~,QAAAA,EAASC,MAAAA,GAAUC,EAAAA,mBACvBtB,EAAKuB,UAAUC,~~SAGnB~~,~~aACKC~~,EAAAA,~~eACG~~,~~CAAAlC~~,~~SAAAmC~~,EAAAA,~~IAACC~~,EAAAA,qBAAA,CACGC,aAA4B,~~UAAdjC~~,EAAwB,~~KACtCkC~~,aAAa,~~EACb5B~~,QAAAA,~~EACA6B~~,OAAO,EACPC,iBAAiB,~~EAEjBxC~~,~~SAGKyC~~,EAAAA,KAAAC,WAAA,~~CAAA1C~~,SAAA,CAAc,UAAdI,~~GACG+B~~,EAAAA,IAAC,OAAA,~~CACGvB~~,IAAKH,~~EAAKkC~~,eACVC,QAAM,~~EAGL5C~~,SAAAA,GAFI,GAAGe,aAKfI,~~GACGgB~~,EAAAA,IAAC,OAAK,~~CAAApC~~,UAAU,MACZC,~~SAAAyC~~,EAAAA,KAAC,OAAA,~~CAEG7B~~,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,~~UAAW8C~~,EAAAA,KACP,~~sBACA9C~~,MAEAO,EAAiB,IACdJ,~~EACH4C~~,~~GAAI/B~~,~~IAERgC~~,MAAO,~~IACAvC~~,KACAa,GAGNrB,SAAA,CAAAA,~~EACDmC~~,EAAAA,~~IAACa~~,EAAAA,cAAA,~~CACGtC~~,QAAAA,EACAE,IAAKP,~~EACL4C~~,MAAO,GACPC,OAAQ,GACRC,KAAK,~~8BAzBJpC~~,IAFc,GAAGA,mBAoCtD"}
1	+ {"version":3,"file":"TooltipContent.cjs","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n type Side,\n useMergeRefs,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { type HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nexport const TooltipContent = forwardRef<\n HTMLDivElement,\n HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n { className, children, [\"data-ispopup\"]: isPopup, ...props },\n forwardedRef,\n) {\n const {\n triggerOn,\n arrowElement,\n getFloatingProps,\n placement,\n floatingStyles,\n refs,\n context,\n } = useTooltipContext();\n const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n const contentId = useId(\"jkl-tooltip-content\");\n const { prefersReducedMotion } = useBrowserPreferences();\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, -5),\n }),\n },\n );\n\n // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { density, theme } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n const floatingPortalRef = React.useRef<HTMLElement \| null>(null);\n\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) \|\| document.body;\n }, [context.elements.domReference]);\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\n <FloatingFocusManager\n initialFocus={triggerOn === \"click\" ? 0 : -1}\n returnFocus={true}\n context={context}\n modal={false}\n closeOnFocusOut={true}\n >\n <>\n {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n {triggerOn === \"hover\" && (\n <span\n ref={refs.setDescription}\n hidden\n key={`${contentId}-trigger`}\n >\n {children}\n </span>\n )}\n {isMounted && (\n <span className=\"jkl\" key={`${contentId}-wrapper`}>\n <span\n key={contentId}\n ref={ref}\n data-placement={placement}\n data-testid={\"tooltip-content\"}\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\n \"jkl-tooltip-content\",\n className,\n )}\n {...getFloatingProps({\n ...props,\n id: contentId,\n })}\n style={{\n ...floatingStyles,\n ...animationStyles,\n }}\n >\n {children}\n <FloatingArrow\n context={context}\n ref={arrowElement}\n width={24}\n height={12}\n fill=\"var(--background-color)\"\n />\n </span>\n </span>\n )}\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","floatingPortalRef","React","useRef","useEffect","elements","domReference","closest","document","body","jsx","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"iZAeA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,EAAAA,YAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,sBACEC,EAAMC,EAAAA,aAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,QAAM,wBAChBC,qBAAAA,GAAyBC,2BACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,OACRgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,OACLgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,MAAY,CAClBgC,QAAS,EACTC,UAAWlC,EAAeC,GAAM,QAOpCkC,QAAAA,EAASC,MAAAA,GAAUC,EAAAA,mBACvBtB,EAAKuB,UAAUC,SAGbC,EAAoBC,EAAMC,OAA2B,MAE3D,OAAAD,EAAME,WAAU,KACMH,EAAAD,QACdvB,EAAQ4B,SAASC,cAAcC,QAC3B,kBACCC,SAASC,OACnB,CAAChC,EAAQ4B,SAASC,eAGhBI,EAAAA,IAAAC,EAAAA,eAAA,CAAeC,KAAMX,EAAkBD,QACpCjC,SAAA2C,EAAAA,IAACG,EAAAA,qBAAA,CACGC,aAA4B,UAAd3C,EAAwB,KACtC4C,aAAa,EACbtC,QAAAA,EACAuC,OAAO,EACPC,iBAAiB,EAEjBlD,SAGKmD,EAAAA,KAAAC,WAAA,CAAApD,SAAA,CAAc,UAAdI,GACGuC,EAAAA,IAAC,OAAA,CACG/B,IAAKH,EAAK4C,eACVC,QAAM,EAGLtD,SAAAA,GAFI,GAAGe,aAKfI,GACGwB,EAAAA,IAAC,OAAK,CAAA5C,UAAU,MACZC,SAAAmD,EAAAA,KAAC,OAAA,CAEGvC,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,UAAWwD,EAAAA,KACP,sBACAxD,MAEAO,EAAiB,IACdJ,EACHsD,GAAIzC,IAER0C,MAAO,IACAjD,KACAa,GAGNrB,SAAA,CAAAA,EACD2C,EAAAA,IAACe,EAAAA,cAAA,CACGhD,QAAAA,EACAE,IAAKP,EACLsD,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJ9C,IAFc,GAAGA,mBAoCtD"}

package/build/cjs/components/tooltip/stories/Tooltip.stories.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const o=require("../Tooltip.cjs"),t=require("../TooltipContent.cjs"),r=require("../TooltipTrigger.cjs"),i={title:"Komponenter/Tooltip",component:o.Tooltip,subcomponents:{TooltipTrigger:r.TooltipTrigger,TooltipContent:t.TooltipContent},tags:["autodocs"],argTypes:{delay:{control:"number"},initialOpen:{control:"boolean"},placement:{control:"select",options:["top","top-start","top-end","left","right"]},triggerOn:{control:"select",options:["click","hover"]}}},l={args:{children:e.jsx("p",{children:"Klikk for å kopiere til utklippstavlen"}),delay:2e3,initialOpen:!1,placement:"top",triggerOn:"hover"},render:i=>e.jsxs("p",{children:["Kontonummer:"," ",e.jsxs(o.Tooltip,{...i,children:[e.jsx(r.TooltipTrigger,{children:"1602 44 54979"}),e.jsx(t.TooltipContent,{children:"Klikk for å kopiere til utklippstavlen"})]})]})};exports.Tooltip=l,exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const o=require("../Tooltip.cjs"),t=require("../TooltipContent.cjs"),r=require("../TooltipTrigger.cjs"),i={title:"Komponenter/Tooltip",component:o.Tooltip,subcomponents:{TooltipTrigger:r.TooltipTrigger,TooltipContent:t.TooltipContent},tags:["autodocs"],argTypes:{delay:{control:"number"},initialOpen:{control:"boolean"},placement:{control:"select",options:["top","top-start","top-end","left","right"]},triggerOn:{control:"select",options:["click","hover"]}}},l={args:{children:e.jsx("p",{children:"Klikk for å kopiere til utklippstavlen"}),delay:0,initialOpen:!1,placement:"top",triggerOn:"hover"},render:i=>e.jsxs("p",{children:["Kontonummer:"," ",e.jsxs(o.Tooltip,{...i,children:[e.jsx(r.TooltipTrigger,{children:"1602 44 54979"}),e.jsx(t.TooltipContent,{children:"Klikk for å kopiere til utklippstavlen"})]})]})};exports.Tooltip=l,exports.default=i;
 //# sourceMappingURL=Tooltip.stories.cjs.map

package/build/cjs/components/tooltip/stories/Tooltip.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.stories.cjs","sources":["../../../../../src/components/tooltip/stories/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tooltip as TooltipComponent } from \"../Tooltip.js\";\nimport { TooltipContent } from \"../TooltipContent.js\";\nimport { TooltipTrigger } from \"../TooltipTrigger.js\";\n\nconst meta = {\n title: \"Komponenter/Tooltip\",\n component: TooltipComponent,\n subcomponents: { TooltipTrigger, TooltipContent },\n tags: [\"autodocs\"],\n argTypes: {\n delay: { control: \"number\" },\n initialOpen: { control: \"boolean\" },\n placement: {\n control: \"select\",\n options: [\"top\", \"top-start\", \"top-end\", \"left\", \"right\"],\n },\n triggerOn: { control: \"select\", options: [\"click\", \"hover\"] },\n },\n} satisfies Meta<typeof TooltipComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Tooltip: Story = {\n args: {\n children: <p>Klikk for å kopiere til utklippstavlen</p>,\n delay: ~~2000~~,\n initialOpen: false,\n placement: \"top\",\n triggerOn: \"hover\",\n },\n render: (args) => (\n <p>\n Kontonummer:{\" \"}\n <TooltipComponent {...args}>\n <TooltipTrigger>1602 44 54979</TooltipTrigger>\n <TooltipContent>\n Klikk for å kopiere til utklippstavlen\n </TooltipContent>\n </TooltipComponent>\n </p>\n ),\n};\n"],"names":["meta","title","component","TooltipComponent","Tooltip","subcomponents","TooltipTrigger","TooltipContent","tags","argTypes","delay","control","initialOpen","placement","options","triggerOn","args","children","jsx","render","jsxs"],"mappings":"0QAOMA,EAAO,CACTC,MAAO,sBACPC,UAAWC,EAAAC,QACXC,cAAe,CAAAC,eAAEA,EAAAA,eAAAC,eAAgBA,kBACjCC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CAAEC,QAAS,UAClBC,YAAa,CAAED,QAAS,WACxBE,UAAW,CACPF,QAAS,SACTG,QAAS,CAAC,MAAO,YAAa,UAAW,OAAQ,UAErDC,UAAW,CAAEJ,QAAS,SAAUG,QAAS,CAAC,QAAS,YAO9CV,EAAiB,CAC1BY,KAAM,CACFC,SAAWC,EAAAA,IAAA,IAAA,CAAED,SAAsC,2CACnDP,MAAO,~~IACPE~~,aAAa,EACbC,UAAW,MACXE,UAAW,SAEfI,OAASH,GACLI,EAAAA,KAAC,IAAE,CAAAH,SAAA,CAAA,eACc,IACbG,EAAAA,KAACjB,EAAkBC,QAAA,IAAGY,EAClBC,SAAA,CAAAC,EAAAA,IAACZ,kBAAeW,SAAa,kBAC7BC,EAAAA,IAACX,kBAAeU,SAEhB"}
1	+ {"version":3,"file":"Tooltip.stories.cjs","sources":["../../../../../src/components/tooltip/stories/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tooltip as TooltipComponent } from \"../Tooltip.js\";\nimport { TooltipContent } from \"../TooltipContent.js\";\nimport { TooltipTrigger } from \"../TooltipTrigger.js\";\n\nconst meta = {\n title: \"Komponenter/Tooltip\",\n component: TooltipComponent,\n subcomponents: { TooltipTrigger, TooltipContent },\n tags: [\"autodocs\"],\n argTypes: {\n delay: { control: \"number\" },\n initialOpen: { control: \"boolean\" },\n placement: {\n control: \"select\",\n options: [\"top\", \"top-start\", \"top-end\", \"left\", \"right\"],\n },\n triggerOn: { control: \"select\", options: [\"click\", \"hover\"] },\n },\n} satisfies Meta<typeof TooltipComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Tooltip: Story = {\n args: {\n children: <p>Klikk for å kopiere til utklippstavlen</p>,\n delay: 0,\n initialOpen: false,\n placement: \"top\",\n triggerOn: \"hover\",\n },\n render: (args) => (\n <p>\n Kontonummer:{\" \"}\n <TooltipComponent {...args}>\n <TooltipTrigger>1602 44 54979</TooltipTrigger>\n <TooltipContent>\n Klikk for å kopiere til utklippstavlen\n </TooltipContent>\n </TooltipComponent>\n </p>\n ),\n};\n"],"names":["meta","title","component","TooltipComponent","Tooltip","subcomponents","TooltipTrigger","TooltipContent","tags","argTypes","delay","control","initialOpen","placement","options","triggerOn","args","children","jsx","render","jsxs"],"mappings":"0QAOMA,EAAO,CACTC,MAAO,sBACPC,UAAWC,EAAAC,QACXC,cAAe,CAAAC,eAAEA,EAAAA,eAAAC,eAAgBA,kBACjCC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CAAEC,QAAS,UAClBC,YAAa,CAAED,QAAS,WACxBE,UAAW,CACPF,QAAS,SACTG,QAAS,CAAC,MAAO,YAAa,UAAW,OAAQ,UAErDC,UAAW,CAAEJ,QAAS,SAAUG,QAAS,CAAC,QAAS,YAO9CV,EAAiB,CAC1BY,KAAM,CACFC,SAAWC,EAAAA,IAAA,IAAA,CAAED,SAAsC,2CACnDP,MAAO,EACPE,aAAa,EACbC,UAAW,MACXE,UAAW,SAEfI,OAASH,GACLI,EAAAA,KAAC,IAAE,CAAAH,SAAA,CAAA,eACc,IACbG,EAAAA,KAACjB,EAAkBC,QAAA,IAAGY,EAClBC,SAAA,CAAAC,EAAAA,IAACZ,kBAAeW,SAAa,kBAC7BC,EAAAA,IAACX,kBAAeU,SAEhB"}

package/build/es/components/input-group/stories/FieldGroup.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import"react";import{Checkbox as t}from"../../checkbox/Checkbox.js";import{PopupTip as r}from"../../tooltip/PopupTip.js";import{FieldGroup as a}from"../FieldGroup.js";/* empty css                         *//* empty css                         */const i={title:"Komponenter/InputGroup/FieldGroup",component:a,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{tooltip:{type:"boolean"}}},l=o(r,{content:"Du kan velge flere metoder. Ved brev vil det ta lenger tid å få en beskjed."}),n={name:"Kontaktpreferanser",args:{legend:"Hvordan kan vi kontakte deg?",labelProps:{variant:"large"},supportLabelProps:{labelType:"help"},tooltip:!1},render:({tooltip:r,...i})=>e(a,{...i,tooltip:r?l:void 0,children:[o(t,{name:"checklist",value:"phone",invalid:!1,children:"Telefon"}),o(t,{name:"checklist",value:"email",invalid:!1,children:"E-post"}),o(t,{name:"checklist",value:"snailmail",invalid:!1,children:"Brev"})]})};export{n as FieldGroupStory,i as default};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import"react";import{Checkbox as t}from"../../checkbox/Checkbox.js";import{PopupTip as r}from"../../tooltip/PopupTip.js";import{FieldGroup as a}from"../FieldGroup.js";/* empty css                         *//* empty css                         */const i={title:"Komponenter/InputGroup/FieldGroup",component:a,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{tooltip:{type:"boolean"}}},l=o(r,{content:"Du kan velge flere metoder. Ved brev vil det ta lenger tid å få en beskjed."}),p={name:"Kontaktpreferanser",args:{legend:"Hvordan kan vi kontakte deg?",labelProps:{variant:"large"},supportLabelProps:{labelType:"help"},tooltip:!1},render:({tooltip:r,...i})=>e(a,{...i,tooltip:r?l:void 0,children:[o(t,{name:"checklist",value:"phone",invalid:!1,children:"Telefon"}),o(t,{name:"checklist",value:"email",invalid:!1,children:"E-post"}),o(t,{name:"checklist",value:"snailmail",invalid:!1,children:"Brev"})]})};export{p as FieldGroupStory,i as default};
 //# sourceMappingURL=FieldGroup.stories.js.map

package/build/es/components/link/stories/Link.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Link as r}from"../Link.js";/* empty css                         */import{c as i}from"../../../../cow--Vs_y7LC.js";import{Flex as s}from"../../flex/Flex.js";const l={title:"Komponenter/Link",component:r,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{href:{control:"text"}}},a={name:"Link",args:{children:"Lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no",download:!1},render:t=>e(r,{...t,as:t.as||"a"})},n={name:"Mønster: Lenke i avsnitt",args:{href:"https://www.fremtind.no",download:!1},render:i=>t("p",{style:{maxWidth:"45ch"},children:["Vi bruker lenker for å lede brukeren til"," ",e(r,{...i,external:!1,children:"andre nettsider"}),", eller til andre steder på samme nettside."," ",e(r,{...i,external:!0,target:"_blank",children:"Lenker til eksterne nettsider"})," ","markeres med en pil opp og til høyre etter lenketeksten."]})},d={name:"Mønster: Lenke i andre tekststiler",args:{children:"lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no"},render:i=>t(s,{direction:"column",style:{gap:"1.5lh"},children:[t("h1",{className:"jkl-title",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i titler"]}),t("h2",{className:"jkl-title-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i små titler"]}),e("hr",{style:{width:"100%",opacity:"0.1"}}),t("h2",{className:"jkl-heading-1",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),t("h2",{className:"jkl-heading-2",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),t("h3",{className:"jkl-heading-3",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),t("h4",{className:"jkl-heading-4",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),t("h5",{className:"jkl-heading-5",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),e("hr",{style:{width:"100%",opacity:"0.1"}}),t("p",{className:"jkl-body",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i avsnitt"]}),t("small",{className:"jkl-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i små avsnitt"]})]})},h={name:"Mønster: Nedlastingslenke",args:{children:"fullstendig dekningsoversikt (PDF)",href:i,filename:"IPID",download:!0},render:i=>t("p",{children:["Dekningsoversikten er forenklet. Last ned en ",e(r,{...i}),"."]})};export{h as DownloadStory,d as LinkInOtherStory,n as LinkInParagraphStory,a as LinkStory,l as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Link as r}from"../Link.js";/* empty css                         */import{c as i}from"../../../../cow--Vs_y7LC.js";import{Flex as s}from"../../flex/Flex.js";const l={title:"Komponenter/Link",component:r,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{href:{control:"text"}}},n={name:"Link",args:{children:"Lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no",download:!1},render:t=>e(r,{...t,as:t.as||"a"})},a={name:"Mønster: Lenke i avsnitt",args:{href:"https://www.fremtind.no",download:!1},render:i=>t("p",{style:{maxWidth:"45ch"},children:["Vi bruker lenker for å lede brukeren til"," ",e(r,{...i,external:!1,children:"andre nettsider"}),", eller til andre steder på samme nettside."," ",e(r,{...i,external:!0,target:"_blank",children:"Lenker til eksterne nettsider"})," ","markeres med en pil opp og til høyre etter lenketeksten."]})},d={name:"Mønster: Lenke i andre tekststiler",args:{children:"lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no"},render:i=>t(s,{direction:"column",style:{gap:"1.5lh"},children:[t("h1",{className:"jkl-title",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i titler"]}),t("h2",{className:"jkl-title-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i små titler"]}),e("hr",{style:{width:"100%",opacity:"0.1"}}),t("h2",{className:"jkl-heading-1",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),t("h2",{className:"jkl-heading-2",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),t("h3",{className:"jkl-heading-3",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),t("h4",{className:"jkl-heading-4",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),t("h5",{className:"jkl-heading-5",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i overskrifter"]}),e("hr",{style:{width:"100%",opacity:"0.1"}}),t("p",{className:"jkl-body",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i avsnitt"]}),t("small",{className:"jkl-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke ",e(r,{...i})," i små avsnitt"]})]})},h={name:"Mønster: Nedlastingslenke",args:{children:"fullstendig dekningsoversikt (PDF)",href:i,filename:"IPID",download:!0},render:i=>t("p",{children:["Dekningsoversikten er forenklet. Last ned en ",e(r,{...i}),"."]})};export{h as DownloadStory,d as LinkInOtherStory,a as LinkInParagraphStory,n as LinkStory,l as default};
 //# sourceMappingURL=Link.stories.js.map

package/build/es/components/loader/stories/Skeleton.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";/* empty css                         */import{SkeletonAnimation as o}from"../skeletons/SkeletonAnimation.js";import{SkeletonButton as n}from"../skeletons/SkeletonButton.js";import{SkeletonCheckboxGroup as l}from"../skeletons/SkeletonCheckboxGroup.js";import{SkeletonElement as r}from"../skeletons/SkeletonElement.js";import{SkeletonInput as s}from"../skeletons/SkeletonInput.js";import{SkeletonRadioButtonGroup as i}from"../skeletons/SkeletonRadioButtonGroup.js";import{SkeletonTable as a,SkeletonTableHeader as d,SkeletonTableRow as h}from"../skeletons/SkeletonTable.js";import{SkeletonTextArea as k}from"../skeletons/SkeletonTextArea.js";const m={title:"Komponenter/Loader/SkeletonTable",component:a,subcomponents:{SkeletonElement:r,SkeletonTableHeader:d},argTypes:{width:{control:"number"}},tags:["autodocs"]},p={name:"Skeleton",args:{children:e("div",{style:{display:"flex",flexDirection:"column",gap:40},children:[t(r,{width:350,height:32}),t(s,{}),t(k,{}),t(l,{checkboxes:3}),t(i,{radioButtons:3}),t(n,{width:225}),e(a,{children:[e(d,{children:[t("div",{style:{width:215},children:t(r,{width:115,height:16})}),t("div",{style:{width:115},children:t(r,{width:115,height:16})})]}),Array.from(Array(5)).map(((o,n)=>e(h,{children:[t("div",{style:{width:215},children:t(r,{width:n%2?115:185,height:19})}),t("div",{style:{width:115},children:t(r,{width:24,height:24,shape:"circle"})})]},n)))]})]})},render:e=>t(o,{...e,role:"none presentation"})};export{p as SkeletonStory,m as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";/* empty css                         */import{SkeletonAnimation as o}from"../skeletons/SkeletonAnimation.js";import{SkeletonButton as n}from"../skeletons/SkeletonButton.js";import{SkeletonCheckboxGroup as l}from"../skeletons/SkeletonCheckboxGroup.js";import{SkeletonElement as r}from"../skeletons/SkeletonElement.js";import{SkeletonInput as s}from"../skeletons/SkeletonInput.js";import{SkeletonRadioButtonGroup as i}from"../skeletons/SkeletonRadioButtonGroup.js";import{SkeletonTable as a,SkeletonTableHeader as d,SkeletonTableRow as m}from"../skeletons/SkeletonTable.js";import{SkeletonTextArea as h}from"../skeletons/SkeletonTextArea.js";const k={title:"Komponenter/Loader/SkeletonTable",component:a,subcomponents:{SkeletonElement:r,SkeletonTableHeader:d},argTypes:{width:{control:"number"}},tags:["autodocs"]},p={name:"Skeleton",args:{children:e("div",{style:{display:"flex",flexDirection:"column",gap:40},children:[t(r,{width:350,height:32}),t(s,{}),t(h,{}),t(l,{checkboxes:3}),t(i,{radioButtons:3}),t(n,{width:225}),e(a,{children:[e(d,{children:[t("div",{style:{width:215},children:t(r,{width:115,height:16})}),t("div",{style:{width:115},children:t(r,{width:115,height:16})})]}),Array.from(Array(5)).map(((o,n)=>e(m,{children:[t("div",{style:{width:215},children:t(r,{width:n%2?115:185,height:19})}),t("div",{style:{width:115},children:t(r,{width:24,height:24,shape:"circle"})})]},n)))]})]})},render:e=>t(o,{...e,role:"none presentation"})};export{p as SkeletonStory,k as default};
 //# sourceMappingURL=Skeleton.stories.js.map

package/build/es/components/menu/Menu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as s}from"react/jsx-runtime";import{useFloatingTree as t,useFloatingNodeId as n,useFloatingParentNodeId as o,useFloating as a,autoUpdate as r,offset as i,flip as l,shift as d,useInteractions as u,useHover as c,useClick as m,useDismiss as p,useRole as f,useListNavigation as g,safePolygon as h,useMergeRefs as y,useTransitionStyles as v,FloatingNode as k,FloatingPortal as x,FloatingFocusManager as F,FloatingTree as P}from"@floating-ui/react";import{c as w}from"../../../clsx-BeLtu-UY.js";import j,{forwardRef as E,useRef as I,useState as M,useEffect as R}from"react";import{r as C}from"../../../index-Yq3eaNUM.js";import{useBrowserPreferences as N}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import"../../hooks/useScreen/useScreen.js";import{useId as b}from"../../hooks/useId/useId.js";import{getThemeAndDensity as O}from"../../utilities/getThemeAndDensity.js";import{useMenuWideEvents as T}from"./useMenuWideEvents.js";function D(e,s=0){switch(e){case"top":default:return`0 ${s}px`;case"left":return`${s}px 0`;case"bottom":return`0 ${-s}px`;case"right":return-s+"px 0"}}const S=E(((P,E)=>{const{children:S,className:A,initialPlacement:B,openOnHover:H=!1,keepOpenOnClickOutside:$=!1,triggerElement:K,isOpen:V,onToggle:W,...q}=P,L=b("jkl-menu"),{prefersReducedMotion:U}=N(),z=t(),G=n(),J=o(),Q=null!=J,X=I([]),[Y,Z]=M(null),{allowHover:_,isOpen:ee,setIsOpen:se}=T(z,G,J),te=void 0!==V?V:ee;R((()=>W?.(te)),[te,W]);const{refs:ne,placement:oe,context:ae,floatingStyles:re}=a({nodeId:G,open:te,onOpenChange:se,placement:B||(Q?"right-start":"bottom-start"),middleware:[i(2),l({fallbackAxisSideDirection:"end",crossAxis:!1}),d({padding:8})],whileElementsMounted:r}),{getReferenceProps:ie,getFloatingProps:le,getItemProps:de}=u([c(ae,{enabled:H&&_,delay:{open:75},handleClose:h({requireIntent:!0,blockPointerEvents:!0})}),m(ae,{event:"mousedown"}),p(ae,{outsidePress:!$}),f(ae,{role:"menu"}),g(ae,{listRef:X,activeIndex:Y,nested:Q,onNavigate:Z})]),ue=y([ne.setReference,E]),{theme:ce,density:me}=O(ne.reference.current),{isMounted:pe,styles:fe}=v(ae,{duration:{open:U?0:250,close:U?0:150},initial:({side:e})=>({opacity:0,translate:D(e,5)}),open:({side:e})=>({opacity:1,translate:D(e,0)}),close:({side:e})=>({opacity:0,translate:D(e,5)})});return e(k,{id:G,children:[j.isValidElement(K)&&("button"===K.type||C.isForwardRef(K))?j.cloneElement(K,{...ie({...q,ref:ue,role:Q?"menuitem":void 0,"aria-controls":L,onClick(e){e.stopPropagation()}})}):K,pe&&s(x,{children:s(F,{context:ae,modal:!1,initialFocus:Q?-1:0,returnFocus:!Q,children:s("div",{className:w("jkl jkl-menu",A),"data-theme":ce,"data-layout-density":me,role:"menu","data-placement":oe,"aria-live":"assertive","aria-hidden":!te,ref:ne.setFloating,...le({id:L,style:{...re,...fe}}),children:j.Children.map(S,((e,s)=>j.isValidElement(e)&&C.isForwardRef(e)?j.cloneElement(e,de({...e.props,tabIndex:Y===s?0:-1,role:"menuitem",ref(e){X.current[s]=e},onClick(s){e.props.onClick?.(s),!s.defaultPrevented&&z?.events.emit("click")},onKeyDown(s){e.props.onKeyDown?.(s),!s.defaultPrevented&&(z?.events.emit("keydown"),"menuitemcheckbox"===s.currentTarget.role&&"Enter"===s.key&&se(!1))},onMouseEnter(){_&&te&&Z(s)}})):e))})})})]})}));S.displayName="MenuComponent";const A=E(((e,t)=>null===o()?s(P,{children:s(S,{ref:t,...e})}):s(S,{ref:t,...e})));A.displayName="Menu";export{A as Menu};
+import{jsxs as e,jsx as s}from"react/jsx-runtime";import{useFloatingTree as t,useFloatingNodeId as n,useFloatingParentNodeId as o,useFloating as a,autoUpdate as r,offset as i,flip as l,shift as d,useInteractions as u,useHover as c,useClick as m,useDismiss as p,useRole as f,useListNavigation as g,safePolygon as h,useMergeRefs as y,useTransitionStyles as v,FloatingNode as k,FloatingPortal as x,FloatingFocusManager as F,FloatingTree as P}from"@floating-ui/react";import{c as j}from"../../../clsx-BeLtu-UY.js";import w,{forwardRef as E,useRef as I,useState as M,useEffect as R}from"react";import{r as C}from"../../../index-Yq3eaNUM.js";import{useBrowserPreferences as N}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import"../../hooks/useScreen/useScreen.js";import{useId as b}from"../../hooks/useId/useId.js";import{getThemeAndDensity as O}from"../../utilities/getThemeAndDensity.js";import{useMenuWideEvents as T}from"./useMenuWideEvents.js";function D(e,s=0){switch(e){case"top":default:return`0 ${s}px`;case"left":return`${s}px 0`;case"bottom":return`0 ${-s}px`;case"right":return-s+"px 0"}}const S=E(((P,E)=>{const{children:S,className:A,initialPlacement:B,openOnHover:H=!1,keepOpenOnClickOutside:$=!1,triggerElement:K,isOpen:V,onToggle:W,...q}=P,L=b("jkl-menu"),{prefersReducedMotion:U}=N(),z=t(),G=n(),J=o(),Q=null!=J,X=I([]),[Y,Z]=M(null),{allowHover:_,isOpen:ee,setIsOpen:se}=T(z,G,J),te=void 0!==V?V:ee;R((()=>W?.(te)),[te,W]);const{refs:ne,placement:oe,context:ae,floatingStyles:re}=a({nodeId:G,open:te,onOpenChange:se,placement:B||(Q?"right-start":"bottom-start"),middleware:[i(2),l({fallbackAxisSideDirection:"end",crossAxis:!1}),d({padding:8})],whileElementsMounted:r}),{getReferenceProps:ie,getFloatingProps:le,getItemProps:de}=u([c(ae,{enabled:H&&_,delay:{open:75},handleClose:h({requireIntent:!0,blockPointerEvents:!0})}),m(ae,{event:"mousedown"}),p(ae,{outsidePress:!$}),f(ae,{role:"menu"}),g(ae,{listRef:X,activeIndex:Y,nested:Q,onNavigate:Z})]),ue=y([ne.setReference,E]),{theme:ce,density:me}=O(ne.reference.current),{isMounted:pe,styles:fe}=v(ae,{duration:{open:U?0:250,close:U?0:150},initial:({side:e})=>({opacity:0,translate:D(e,5)}),open:({side:e})=>({opacity:1,translate:D(e,0)}),close:({side:e})=>({opacity:0,translate:D(e,5)})});return e(k,{id:G,children:[w.isValidElement(K)&&("button"===K.type||C.isForwardRef(K))?w.cloneElement(K,{...ie({...q,ref:ue,role:Q?"menuitem":void 0,"aria-controls":L,onClick(e){e.stopPropagation()}})}):K,pe&&s(x,{children:s(F,{context:ae,modal:!1,initialFocus:Q?-1:0,returnFocus:!Q,children:s("div",{className:j("jkl jkl-menu",A),"data-theme":ce,"data-layout-density":me,role:"menu","data-placement":oe,"aria-live":"assertive","aria-hidden":!te,ref:ne.setFloating,...le({id:L,style:{...re,...fe}}),children:w.Children.map(S,((e,s)=>w.isValidElement(e)&&C.isForwardRef(e)?w.cloneElement(e,de({...e.props,tabIndex:Y===s?0:-1,role:"menuitem",ref(e){X.current[s]=e},onClick(s){e.props.onClick?.(s),!s.defaultPrevented&&z?.events.emit("click")},onKeyDown(s){e.props.onKeyDown?.(s),!s.defaultPrevented&&(z?.events.emit("keydown"),"menuitemcheckbox"===s.currentTarget.role&&"Enter"===s.key&&se(!1))},onMouseEnter(){_&&te&&Z(s)}})):e))})})})]})}));S.displayName="MenuComponent";const A=E(((e,t)=>null===o()?s(P,{children:s(S,{ref:t,...e})}):s(S,{ref:t,...e})));A.displayName="Menu";export{A as Menu};
 //# sourceMappingURL=Menu.js.map

package/build/es/components/modal/stories/Modal.stories.d.ts CHANGED Viewed

@@ -1,14 +1,44 @@
 import { StoryObj } from '@storybook/react';
+import { default as React } from 'react';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<{
+    component: React.ForwardRefExoticComponent<{
         role: "document";
-    } & import('../types.js').ModalProps & import('react').RefAttributes<HTMLElement>>;
+    } & import('../types.js').ModalProps & React.RefAttributes<HTMLElement>>;
+    subcomponents: {
+        ModalActions: React.ForwardRefExoticComponent<import('../types.js').BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+        ModalBody: React.ForwardRefExoticComponent<import('../types.js').BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+        ModalCloseButton: React.ForwardRefExoticComponent<Omit<{
+            type: "button";
+            onClick: () => void;
+        } & {
+            "aria-label": string;
+        }, "onClick"> & import('../types.js').BaseModalProps & import('../../icon-button/types.js').IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+        ModalContainer: React.ForwardRefExoticComponent<Omit<{
+            id: string;
+            ref: (node: React.ReactNode | HTMLElement) => void;
+            role: string;
+            'aria-modal': boolean;
+            'aria-hidden': boolean;
+            'aria-labelledby': string;
+        } & import('../types.js').BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+        ModalHeader: React.ForwardRefExoticComponent<import('../types.js').BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+        ModalOverlay: React.ForwardRefExoticComponent<{
+            onClick?: () => void;
+        } & import('../types.js').BaseModalProps & {
+            transparent?: boolean;
+        } & React.RefAttributes<HTMLDivElement>>;
+        ModalTitle: React.ForwardRefExoticComponent<{
+            role: "heading";
+            'aria-level': number;
+            id: string;
+        } & import('../types.js').BaseModalProps & React.RefAttributes<HTMLParagraphElement>>;
+    };
     parameters: {
         layout: string;
     };
     tags: string[];
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Modal: Story;
+type ModalStory = StoryObj<typeof meta>;
+export declare const Modal: ModalStory;

package/build/es/components/modal/stories/Modal.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-/* empty css                         */import{Modal as o}from"../Modal.js";const t={title:"Komponenter/Modal",component:o,parameters:{layout:"centered"},tags:["autodocs"]},a={args:{role:"document"}};export{a as Modal,t as default};
+import{jsxs as o,Fragment as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as a}from"react";import{Button as l}from"../../button/Button.js";import{InputGroup as n}from"../../input-group/InputGroup.js";import{BaseTextInput as s}from"../../text-input/BaseTextInput.js";import{PopupTip as d}from"../../tooltip/PopupTip.js";import{ModalTitle as i,ModalOverlay as m,ModalHeader as u,ModalContainer as p,ModalCloseButton as c,ModalBody as M,ModalActions as h,Modal as f}from"../Modal.js";import{useModal as j}from"../useModal.js";/* empty css                         *//* empty css                         *//* empty css                         *//* empty css                         */const B={title:"Komponenter/Modal",component:f,subcomponents:{ModalActions:h,ModalBody:M,ModalCloseButton:c,ModalContainer:p,ModalHeader:u,ModalOverlay:m,ModalTitle:i},parameters:{layout:"centered"},tags:["autodocs"]},x={args:{role:"document"},render:B=>{const[x,v]=r(!1),y="Bekreft sletting",[k,{title:C,overlay:b,container:g,modal:T,closeButton:I}]=j({title:y});return a((()=>{k&&k.show()}),[k]),o(e,{children:[t(l,{onClick:o=>v(!x),children:"Vis modal"}),x&&o(p,{...g,children:[t(m,{...b}),o(f,{...T,children:[o(u,{children:[t(i,{...C,children:y}),t(c,{...I})]}),o(M,{children:["Er du sikker på at du vil slette Foo Bar Baz?",t(n,{label:"Fødselsnummer",helpLabel:void 0,errorLabel:void 0,tooltip:t(d,{content:t(e,{children:"Du må fylle ut fødelsnummer eller D-nummer. Se hvordan du finner D-nummer."})}),children:t(s,{})})]}),o(h,{children:[t(l,{onClick:()=>{k?.hide()},children:"Bekreft"}),t(l,{onClick:()=>k?.hide(),children:"Avbryt"})]})]})]})]})}};export{x as Modal,B as default};
 //# sourceMappingURL=Modal.stories.js.map

package/build/es/components/modal/stories/Modal.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.stories.js","sources":["../../../../../src/components/modal/stories/Modal.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport \"~~../styles~~/~~_index~~.~~scss~~\";\nimport { Modal as ModalComponent } from \"../Modal.js\";\n\nconst meta = {\n title: \"Komponenter/Modal\",\n component: ModalComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof ModalComponent>;\n\nexport default meta;\n\ntype ~~Story~~ = StoryObj<typeof meta>;\n\nexport const Modal: ~~Story~~ = {\n args: {\n role: \"document\",\n },\n};\n"],"names":["meta","title","component","ModalComponent","parameters","layout","tags","Modal","args","role"],"mappings":"~~2EAIA~~,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,~~EAAe~~,~~CACxBC~~,KAAM,CACFC,KAAM"}
1	+ {"version":3,"file":"Modal.stories.js","sources":["../../../../../src/components/modal/stories/Modal.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useEffect, useState } from \"react\";\nimport { Button } from \"../../button/Button.js\";\nimport { InputGroup } from \"../../input-group/InputGroup.js\";\nimport { BaseTextInput } from \"../../text-input/BaseTextInput.js\";\nimport { PopupTip } from \"../../tooltip/PopupTip.js\";\nimport {\n ModalActions,\n ModalBody,\n ModalCloseButton,\n Modal as ModalComponent,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../Modal.js\";\nimport { useModal } from \"../useModal.js\";\n\nimport \"../../button/styles/_index.scss\";\nimport \"../styles/_index.scss\";\nimport \"../../input-group/styles/_index.scss\";\nimport \"../../text-input/styles/_index.scss\";\n\nconst meta = {\n title: \"Komponenter/Modal\",\n component: ModalComponent,\n subcomponents: {\n ModalActions,\n ModalBody,\n ModalCloseButton,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n },\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof ModalComponent>;\n\nexport default meta;\n\ntype ModalStory = StoryObj<typeof meta>;\n\nexport const Modal: ModalStory = {\n args: {\n role: \"document\",\n },\n render: (args) => {\n const [showModal, setShowModal] = useState(false);\n const heading = \"Bekreft sletting\";\n const [instance, { title, overlay, container, modal, closeButton }] =\n useModal({ title: heading });\n\n useEffect(() => {\n if (!instance) {\n return;\n }\n instance.show();\n }, [instance]);\n\n return (\n <>\n <Button onClick={(e) => setShowModal(!showModal)}>\n Vis modal\n </Button>\n {showModal && (\n <ModalContainer {...container}>\n <ModalOverlay {...overlay} />\n <ModalComponent {...modal}>\n <ModalHeader>\n <ModalTitle {...title}>{heading}</ModalTitle>\n <ModalCloseButton {...closeButton} />\n </ModalHeader>\n <ModalBody>\n Er du sikker på at du vil slette Foo Bar Baz?\n <InputGroup\n label=\"Fødselsnummer\"\n helpLabel={undefined}\n errorLabel={undefined}\n tooltip={\n <PopupTip\n content={\n <>\n Du må fylle ut fødelsnummer\n eller D-nummer. Se hvordan\n du finner D-nummer.\n </>\n }\n />\n }\n >\n <BaseTextInput />\n </InputGroup>\n </ModalBody>\n <ModalActions>\n <Button\n onClick={() => {\n instance?.hide();\n }}\n >\n Bekreft\n </Button>\n <Button onClick={() => instance?.hide()}>\n Avbryt\n </Button>\n </ModalActions>\n </ModalComponent>\n </ModalContainer>\n )}\n </>\n );\n },\n};\n"],"names":["meta","title","component","ModalComponent","subcomponents","ModalActions","ModalBody","ModalCloseButton","ModalContainer","ModalHeader","ModalOverlay","ModalTitle","parameters","layout","tags","Modal","args","role","render","showModal","setShowModal","useState","heading","instance","overlay","container","modal","closeButton","useModal","useEffect","show","jsxs","Fragment","children","jsx","Button","onClick","e","InputGroup","label","helpLabel","errorLabel","tooltip","PopupTip","content","BaseTextInput","hide"],"mappings":"4rBAuBA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,cAAe,CACXC,aAAAA,EACAC,UAAAA,EACAC,iBAAAA,EACAC,eAAAA,EACAC,YAAAA,EACAC,aAAAA,EACAC,WAAAA,GAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAoB,CAC7BC,KAAM,CACFC,KAAM,YAEVC,OAASF,IACL,MAAOG,EAAWC,GAAgBC,GAAS,GACrCC,EAAU,oBACTC,GAAYtB,MAAAA,EAAOuB,QAAAA,EAASC,UAAAA,EAAWC,MAAAA,EAAOC,YAAAA,IACjDC,EAAS,CAAE3B,MAAOqB,IAEtB,OAAAO,GAAU,KACDN,GAGLA,EAASO,MAAK,GACf,CAACP,IAIIQ,EAAAC,EAAA,CAAAC,SAAA,CAACC,EAAAC,EAAA,CAAOC,QAAUC,GAAMjB,GAAcD,GAAYc,SAElD,cACCd,GACGY,EAACvB,EAAgB,IAAGiB,EAChBQ,SAAA,CAACC,EAAAxB,EAAA,IAAiBc,IAClBO,EAAC5B,EAAgB,IAAGuB,EAChBO,SAAA,CAAAF,EAACtB,EACG,CAAAwB,SAAA,CAACC,EAAAvB,EAAA,IAAeV,EAAQgC,SAAQX,IAChCY,EAAC3B,EAAkB,IAAGoB,SAEzBrB,EAAU,CAAA2B,SAAA,CAAA,gDAEPC,EAACI,EAAA,CACGC,MAAM,gBACNC,eAAW,EACXC,gBAAY,EACZC,QACIR,EAACS,EAAA,CACGC,aACMX,SAIF,iFAKZA,WAACY,EAAc,CAAA,UAGtBxC,EACG,CAAA4B,SAAA,CAAAC,EAACC,EAAA,CACGC,QAAS,KACLb,GAAUuB,MAAK,EAEtBb,SAAA,cAGAE,EAAO,CAAAC,QAAS,IAAMb,GAAUuB,OAAQb,SAEzC,sBAKpB"}

package/build/es/components/tooltip/TooltipContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t,Fragment as s}from"react/jsx-runtime";import{useMergeRefs as r,useTransitionStyles as o,FloatingPortal as a,FloatingFocusManager as n,FloatingArrow as i}from"@floating-ui/react";import{c}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l}from"react";import{useBrowserPreferences as p}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{useId as d}from"../../hooks/useId/useId.js";import{getThemeAndDensity as u}from"../../utilities/getThemeAndDensity.js";import{useTooltipContext as m}from"./Tooltip.js";function f(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const g=l((function({className:l,children:g,"data-ispopup":h,...x},y){const{triggerOn:j,arrowElement:F,getFloatingProps:w,placement:k,floatingStyles:T,refs:P,context:$}=m(),M=r([y,P.setFloating]),A=d("jkl-tooltip-content"),{prefersReducedMotion:B}=p(),{isMounted:D,styles:I}=o($,{duration:{open:B?0:250,close:B?0:150},initial:({side:e})=>({opacity:0,translate:f(e,5)}),open:({side:e})=>({opacity:1,translate:f(e,0)}),close:({side:e})=>({opacity:0,translate:f(e,-5)})}),{density:N,theme:O}=u(P.reference.current);return e(a,{children:e(n,{initialFocus:"click"===j?0:-1,returnFocus:!0,context:$,modal:!1,closeOnFocusOut:!0,children:t(s,{children:["hover"===j&&e("span",{ref:P.setDescription,hidden:!0,children:g},`${A}-trigger`),D&&e("span",{className:"jkl",children:t("span",{ref:M,"data-placement":k,"data-testid":"tooltip-content","data-theme":O,"data-layout-density":N,className:c("jkl-tooltip-content",l),...w({...x,id:A}),style:{...T,...I},children:[g,e(i,{context:$,ref:F,width:24,height:12,fill:"var(--background-color)"})]},A)},`${A}-wrapper`)]})})})}));export{g as TooltipContent};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useMergeRefs as s,useTransitionStyles as o,FloatingPortal as n,FloatingFocusManager as a,FloatingArrow as i}from"@floating-ui/react";import{c}from"../../../clsx-BeLtu-UY.js";import l,{forwardRef as d}from"react";import{useBrowserPreferences as p}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{useId as u}from"../../hooks/useId/useId.js";import{getThemeAndDensity as m}from"../../utilities/getThemeAndDensity.js";import{useTooltipContext as f}from"./Tooltip.js";function g(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const h=d((function({className:d,children:h,"data-ispopup":x,...y},j){const{triggerOn:F,arrowElement:w,getFloatingProps:k,placement:R,floatingStyles:T,refs:P,context:$}=f(),M=s([j,P.setFloating]),b=u("jkl-tooltip-content"),{prefersReducedMotion:A}=p(),{isMounted:B,styles:D}=o($,{duration:{open:A?0:250,close:A?0:150},initial:({side:e})=>({opacity:0,translate:g(e,5)}),open:({side:e})=>({opacity:1,translate:g(e,0)}),close:({side:e})=>({opacity:0,translate:g(e,-5)})}),{density:I,theme:N}=m(P.reference.current),O=l.useRef(null);return l.useEffect((()=>{O.current=$.elements.domReference?.closest("[data-portal]")||document.body}),[$.elements.domReference]),e(n,{root:O.current,children:e(a,{initialFocus:"click"===F?0:-1,returnFocus:!0,context:$,modal:!1,closeOnFocusOut:!0,children:t(r,{children:["hover"===F&&e("span",{ref:P.setDescription,hidden:!0,children:h},`${b}-trigger`),B&&e("span",{className:"jkl",children:t("span",{ref:M,"data-placement":R,"data-testid":"tooltip-content","data-theme":N,"data-layout-density":I,className:c("jkl-tooltip-content",d),...k({...y,id:b}),style:{...T,...D},children:[h,e(i,{context:$,ref:w,width:24,height:12,fill:"var(--background-color)"})]},b)},`${b}-wrapper`)]})})})}));export{h as TooltipContent};
 //# sourceMappingURL=TooltipContent.js.map

package/build/es/components/tooltip/TooltipContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.js","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n type Side,\n useMergeRefs,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { type HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nexport const TooltipContent = forwardRef<\n HTMLDivElement,\n HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n { className, children, [\"data-ispopup\"]: isPopup, ...props },\n forwardedRef,\n) {\n const {\n triggerOn,\n arrowElement,\n getFloatingProps,\n placement,\n floatingStyles,\n refs,\n context,\n } = useTooltipContext();\n const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n const contentId = useId(\"jkl-tooltip-content\");\n const { prefersReducedMotion } = useBrowserPreferences();\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, -5),\n }),\n },\n );\n\n // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { density, theme } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n initialFocus={triggerOn === \"click\" ? 0 : -1}\n returnFocus={true}\n context={context}\n modal={false}\n closeOnFocusOut={true}\n >\n <>\n {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n {triggerOn === \"hover\" && (\n <span\n ref={refs.setDescription}\n hidden\n key={`${contentId}-trigger`}\n >\n {children}\n </span>\n )}\n {isMounted && (\n <span className=\"jkl\" key={`${contentId}-wrapper`}>\n <span\n key={contentId}\n ref={ref}\n data-placement={placement}\n data-testid={\"tooltip-content\"}\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\n \"jkl-tooltip-content\",\n className,\n )}\n {...getFloatingProps({\n ...props,\n id: contentId,\n })}\n style={{\n ...floatingStyles,\n ...animationStyles,\n }}\n >\n {children}\n <FloatingArrow\n context={context}\n ref={arrowElement}\n width={24}\n height={12}\n fill=\"var(--background-color)\"\n />\n </span>\n </span>\n )}\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","~~FloatingPortal~~","jsx","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"~~0iBAeA~~,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,GAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,IACEC,EAAMC,EAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,EAAM,wBAChBC,qBAAAA,GAAyBC,KACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,MAAY,CACpBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,MAAY,CAClBgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EACvBtB,EAAKuB,UAAUC,~~SAGnB~~,~~SACKC~~,~~EACG~~,~~CAAAlC~~,~~SAAAmC~~,~~EAACC~~,EAAA,CACGC,aAA4B,~~UAAdjC~~,EAAwB,GAAI,~~EAC1CkC~~,aAAa,~~EACb5B~~,QAAAA,~~EACA6B~~,OAAO,EACPC,iBAAiB,~~EAEjBxC~~,~~SAGKyC~~,EAAAC,EAAA,~~CAAA1C~~,SAAA,CAAc,UAAdI,~~GACG+B~~,EAAC,OAAA,~~CACGvB~~,IAAKH,~~EAAKkC~~,eACVC,QAAM,~~EAGL5C~~,SAAAA,GAFI,GAAGe,aAKfI,~~GACGgB~~,EAAC,OAAK,~~CAAApC~~,UAAU,MACZC,~~SAAAyC~~,EAAC,OAAA,~~CAEG7B~~,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,~~UAAW8C~~,EACP,~~sBACA9C~~,MAEAO,EAAiB,IACdJ,~~EACH4C~~,~~GAAI/B~~,~~IAERgC~~,MAAO,~~IACAvC~~,KACAa,GAGNrB,SAAA,CAAAA,~~EACDmC~~,~~EAACa~~,EAAA,~~CACGtC~~,QAAAA,EACAE,IAAKP,~~EACL4C~~,MAAO,GACPC,OAAQ,GACRC,KAAK,~~8BAzBJpC~~,IAFc,GAAGA,mBAoCtD"}
1	+ {"version":3,"file":"TooltipContent.js","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n type Side,\n useMergeRefs,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { type HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nexport const TooltipContent = forwardRef<\n HTMLDivElement,\n HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n { className, children, [\"data-ispopup\"]: isPopup, ...props },\n forwardedRef,\n) {\n const {\n triggerOn,\n arrowElement,\n getFloatingProps,\n placement,\n floatingStyles,\n refs,\n context,\n } = useTooltipContext();\n const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n const contentId = useId(\"jkl-tooltip-content\");\n const { prefersReducedMotion } = useBrowserPreferences();\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, -5),\n }),\n },\n );\n\n // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { density, theme } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n const floatingPortalRef = React.useRef<HTMLElement \| null>(null);\n\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) \|\| document.body;\n }, [context.elements.domReference]);\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\n <FloatingFocusManager\n initialFocus={triggerOn === \"click\" ? 0 : -1}\n returnFocus={true}\n context={context}\n modal={false}\n closeOnFocusOut={true}\n >\n <>\n {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n {triggerOn === \"hover\" && (\n <span\n ref={refs.setDescription}\n hidden\n key={`${contentId}-trigger`}\n >\n {children}\n </span>\n )}\n {isMounted && (\n <span className=\"jkl\" key={`${contentId}-wrapper`}>\n <span\n key={contentId}\n ref={ref}\n data-placement={placement}\n data-testid={\"tooltip-content\"}\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\n \"jkl-tooltip-content\",\n className,\n )}\n {...getFloatingProps({\n ...props,\n id: contentId,\n })}\n style={{\n ...floatingStyles,\n ...animationStyles,\n }}\n >\n {children}\n <FloatingArrow\n context={context}\n ref={arrowElement}\n width={24}\n height={12}\n fill=\"var(--background-color)\"\n />\n </span>\n </span>\n )}\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","floatingPortalRef","React","useRef","useEffect","elements","domReference","closest","document","body","jsx","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"6iBAeA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,GAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,IACEC,EAAMC,EAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,EAAM,wBAChBC,qBAAAA,GAAyBC,KACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,MAAY,CACpBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,MAAY,CAClBgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EACvBtB,EAAKuB,UAAUC,SAGbC,EAAoBC,EAAMC,OAA2B,MAE3DD,OAAAA,EAAME,WAAU,KACMH,EAAAD,QACdvB,EAAQ4B,SAASC,cAAcC,QAC3B,kBACCC,SAASC,IAAA,GACnB,CAAChC,EAAQ4B,SAASC,eAGhBI,EAAAC,EAAA,CAAeC,KAAMX,EAAkBD,QACpCjC,SAAA2C,EAACG,EAAA,CACGC,aAA4B,UAAd3C,EAAwB,GAAI,EAC1C4C,aAAa,EACbtC,QAAAA,EACAuC,OAAO,EACPC,iBAAiB,EAEjBlD,SAGKmD,EAAAC,EAAA,CAAApD,SAAA,CAAc,UAAdI,GACGuC,EAAC,OAAA,CACG/B,IAAKH,EAAK4C,eACVC,QAAM,EAGLtD,SAAAA,GAFI,GAAGe,aAKfI,GACGwB,EAAC,OAAK,CAAA5C,UAAU,MACZC,SAAAmD,EAAC,OAAA,CAEGvC,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,UAAWwD,EACP,sBACAxD,MAEAO,EAAiB,IACdJ,EACHsD,GAAIzC,IAER0C,MAAO,IACAjD,KACAa,GAGNrB,SAAA,CAAAA,EACD2C,EAACe,EAAA,CACGhD,QAAAA,EACAE,IAAKP,EACLsD,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJ9C,IAFc,GAAGA,mBAoCtD"}

package/build/es/components/tooltip/stories/Tooltip.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as t}from"react/jsx-runtime";import"react";import{Tooltip as e}from"../Tooltip.js";import{TooltipContent as r}from"../TooltipContent.js";import{TooltipTrigger as i}from"../TooltipTrigger.js";const n={title:"Komponenter/Tooltip",component:e,subcomponents:{TooltipTrigger:i,TooltipContent:r},tags:["autodocs"],argTypes:{delay:{control:"number"},initialOpen:{control:"boolean"},placement:{control:"select",options:["top","top-start","top-end","left","right"]},triggerOn:{control:"select",options:["click","hover"]}}},l={args:{children:t("p",{children:"Klikk for å kopiere til utklippstavlen"}),delay:2e3,initialOpen:!1,placement:"top",triggerOn:"hover"},render:n=>o("p",{children:["Kontonummer:"," ",o(e,{...n,children:[t(i,{children:"1602 44 54979"}),t(r,{children:"Klikk for å kopiere til utklippstavlen"})]})]})};export{l as Tooltip,n as default};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import"react";import{Tooltip as e}from"../Tooltip.js";import{TooltipContent as r}from"../TooltipContent.js";import{TooltipTrigger as i}from"../TooltipTrigger.js";const n={title:"Komponenter/Tooltip",component:e,subcomponents:{TooltipTrigger:i,TooltipContent:r},tags:["autodocs"],argTypes:{delay:{control:"number"},initialOpen:{control:"boolean"},placement:{control:"select",options:["top","top-start","top-end","left","right"]},triggerOn:{control:"select",options:["click","hover"]}}},l={args:{children:t("p",{children:"Klikk for å kopiere til utklippstavlen"}),delay:0,initialOpen:!1,placement:"top",triggerOn:"hover"},render:n=>o("p",{children:["Kontonummer:"," ",o(e,{...n,children:[t(i,{children:"1602 44 54979"}),t(r,{children:"Klikk for å kopiere til utklippstavlen"})]})]})};export{l as Tooltip,n as default};
 //# sourceMappingURL=Tooltip.stories.js.map

package/build/es/components/tooltip/stories/Tooltip.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.stories.js","sources":["../../../../../src/components/tooltip/stories/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tooltip as TooltipComponent } from \"../Tooltip.js\";\nimport { TooltipContent } from \"../TooltipContent.js\";\nimport { TooltipTrigger } from \"../TooltipTrigger.js\";\n\nconst meta = {\n title: \"Komponenter/Tooltip\",\n component: TooltipComponent,\n subcomponents: { TooltipTrigger, TooltipContent },\n tags: [\"autodocs\"],\n argTypes: {\n delay: { control: \"number\" },\n initialOpen: { control: \"boolean\" },\n placement: {\n control: \"select\",\n options: [\"top\", \"top-start\", \"top-end\", \"left\", \"right\"],\n },\n triggerOn: { control: \"select\", options: [\"click\", \"hover\"] },\n },\n} satisfies Meta<typeof TooltipComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Tooltip: Story = {\n args: {\n children: <p>Klikk for å kopiere til utklippstavlen</p>,\n delay: ~~2000~~,\n initialOpen: false,\n placement: \"top\",\n triggerOn: \"hover\",\n },\n render: (args) => (\n <p>\n Kontonummer:{\" \"}\n <TooltipComponent {...args}>\n <TooltipTrigger>1602 44 54979</TooltipTrigger>\n <TooltipContent>\n Klikk for å kopiere til utklippstavlen\n </TooltipContent>\n </TooltipComponent>\n </p>\n ),\n};\n"],"names":["meta","title","component","TooltipComponent","subcomponents","TooltipTrigger","TooltipContent","tags","argTypes","delay","control","initialOpen","placement","options","triggerOn","Tooltip","args","children","jsx","render","jsxs"],"mappings":"oNAOA,MAAMA,EAAO,CACTC,MAAO,sBACPC,UAAWC,EACXC,cAAe,CAAEC,eAAAA,EAAgBC,eAAAA,GACjCC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CAAEC,QAAS,UAClBC,YAAa,CAAED,QAAS,WACxBE,UAAW,CACPF,QAAS,SACTG,QAAS,CAAC,MAAO,YAAa,UAAW,OAAQ,UAErDC,UAAW,CAAEJ,QAAS,SAAUG,QAAS,CAAC,QAAS,YAO9CE,EAAiB,CAC1BC,KAAM,CACFC,SAAWC,EAAA,IAAA,CAAED,SAAsC,2CACnDR,MAAO,~~IACPE~~,aAAa,EACbC,UAAW,MACXE,UAAW,SAEfK,OAASH,GACLI,EAAC,IAAE,CAAAH,SAAA,CAAA,eACc,IACbG,EAACjB,EAAkB,IAAGa,EAClBC,SAAA,CAAAC,EAACb,GAAeY,SAAa,kBAC7BC,EAACZ,GAAeW,SAEhB"}
1	+ {"version":3,"file":"Tooltip.stories.js","sources":["../../../../../src/components/tooltip/stories/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tooltip as TooltipComponent } from \"../Tooltip.js\";\nimport { TooltipContent } from \"../TooltipContent.js\";\nimport { TooltipTrigger } from \"../TooltipTrigger.js\";\n\nconst meta = {\n title: \"Komponenter/Tooltip\",\n component: TooltipComponent,\n subcomponents: { TooltipTrigger, TooltipContent },\n tags: [\"autodocs\"],\n argTypes: {\n delay: { control: \"number\" },\n initialOpen: { control: \"boolean\" },\n placement: {\n control: \"select\",\n options: [\"top\", \"top-start\", \"top-end\", \"left\", \"right\"],\n },\n triggerOn: { control: \"select\", options: [\"click\", \"hover\"] },\n },\n} satisfies Meta<typeof TooltipComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Tooltip: Story = {\n args: {\n children: <p>Klikk for å kopiere til utklippstavlen</p>,\n delay: 0,\n initialOpen: false,\n placement: \"top\",\n triggerOn: \"hover\",\n },\n render: (args) => (\n <p>\n Kontonummer:{\" \"}\n <TooltipComponent {...args}>\n <TooltipTrigger>1602 44 54979</TooltipTrigger>\n <TooltipContent>\n Klikk for å kopiere til utklippstavlen\n </TooltipContent>\n </TooltipComponent>\n </p>\n ),\n};\n"],"names":["meta","title","component","TooltipComponent","subcomponents","TooltipTrigger","TooltipContent","tags","argTypes","delay","control","initialOpen","placement","options","triggerOn","Tooltip","args","children","jsx","render","jsxs"],"mappings":"oNAOA,MAAMA,EAAO,CACTC,MAAO,sBACPC,UAAWC,EACXC,cAAe,CAAEC,eAAAA,EAAgBC,eAAAA,GACjCC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CAAEC,QAAS,UAClBC,YAAa,CAAED,QAAS,WACxBE,UAAW,CACPF,QAAS,SACTG,QAAS,CAAC,MAAO,YAAa,UAAW,OAAQ,UAErDC,UAAW,CAAEJ,QAAS,SAAUG,QAAS,CAAC,QAAS,YAO9CE,EAAiB,CAC1BC,KAAM,CACFC,SAAWC,EAAA,IAAA,CAAED,SAAsC,2CACnDR,MAAO,EACPE,aAAa,EACbC,UAAW,MACXE,UAAW,SAEfK,OAASH,GACLI,EAAC,IAAE,CAAAH,SAAA,CAAA,eACc,IACbG,EAACjB,EAAkB,IAAGa,EAClBC,SAAA,CAAAC,EAACb,GAAeY,SAAa,kBAC7BC,EAACZ,GAAeW,SAEhB"}