npm - @fremtind/jokul - Versions diffs - 0.71.1 → 1.0.0 - Mend

@fremtind/jokul 0.71.1 → 1.0.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.

Files changed (588) hide show

package/build/es/components/file-input/FileInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.js","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {forwardRef, useId} from \"react\";\nimport {FieldGroup} from \"../../components/input-group/FieldGroup.js\";\nimport {Dropzone} from \"./internal/Dropzone.js\";\nimport {Input} from \"./internal/Input.js\";\nimport {MaxSize} from \"./internal/MaxSize.js\";\nimport {FileInputContextProvider} from \"./internal/fileInputContext.js\";\nimport type {FileInputProps} from \"./types.js\";\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const {\n accept,\n className,\n children,\n id,\n value,\n density,\n multiple = true,\n maxSizeBytes,\n onChange,\n variant,\n ...rest\n } = props;\n\n const hasFiles = value.length > 0;\n\n const maxSizeDescriptionId = useId();\n\n if (variant === \"small\") {\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\n \"jkl-file-input\",\n \"jkl-file-input--small\",\n className,\n {\n \"jkl-file-input--has-files\": hasFiles,\n },\n )}\n data-layout-density={density ? density : \"compact\"}\n {...rest}\n >\n <Dropzone>\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label=\"Legg til fil\"\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n </div>\n </Dropzone>\n <MaxSize id={maxSizeDescriptionId} />\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n </FieldGroup>\n </FileInputContextProvider>\n );\n }\n\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\"jkl-file-input\", className, {\n \"jkl-file-input--has-files\": hasFiles,\n })}\n data-layout-density={density}\n {...rest}\n >\n <Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label={\n multiple && hasFiles\n ? \"Legg til flere filer\"\n : \"Legg til fil\"\n }\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n <MaxSize id={maxSizeDescriptionId} />\n </div>\n </Dropzone>\n </FieldGroup>\n </FileInputContextProvider>\n );\n },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","maxSizeDescriptionId","useId","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","clsx","Dropzone","Input","label","MaxSize","displayName"],"mappings":"gaASO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE1BC,EAAuBC,IAEzBL,OAEIM,EAACC,EAFO,UAAZP,EAEK,CACGQ,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAiB,EAACC,EAAA,CACGnB,UAAWoB,EACP,iBACA,wBACApB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAa,EAACO,EACG,CAAApB,SAAAa,EAAC,MAAI,CAAAd,UAAU,iCACXC,SAAAa,EAACQ,EAAA,CACGpB,GAAAA,EACAqB,MAAM,eACNlB,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,QAI9BE,EAACU,EAAQ,CAAAtB,GAAIU,IACZT,EAAMQ,OAAS,KACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,QASpB,CACGe,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAa,EAACK,EAAA,CACGnB,UAAWoB,EAAK,iBAAkBpB,EAAW,CACzC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,WAACoB,EACI,CAAApB,SAAA,CAAAE,EAAMQ,OAAS,GACZG,EAAC,KAAG,CAAAd,UAAU,wBACTC,SAAAA,IAGTiB,EAAC,MAAI,CAAAlB,UAAU,iCACXC,SAAA,CAAAa,EAACQ,EAAA,CACGpB,GAAAA,EACAqB,MACIlB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,IAEtBE,EAACU,EAAQ,CAAAtB,GAAIU,aAI7B,IAKZjB,EAAU8B,YAAc"}
1	+ {"version":3,"file":"FileInput.js","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId } from \"react\";\nimport { FieldGroup } from \"../../components/input-group/FieldGroup.js\";\nimport { Dropzone } from \"./internal/Dropzone.js\";\nimport { Input } from \"./internal/Input.js\";\nimport { MaxSize } from \"./internal/MaxSize.js\";\nimport { FileInputContextProvider } from \"./internal/fileInputContext.js\";\nimport type { FileInputProps } from \"./types.js\";\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const {\n accept,\n className,\n children,\n id,\n value,\n density,\n multiple = true,\n maxSizeBytes,\n onChange,\n variant,\n ...rest\n } = props;\n\n const hasFiles = value.length > 0;\n\n const maxSizeDescriptionId = useId();\n\n if (variant === \"small\") {\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\n \"jkl-file-input\",\n \"jkl-file-input--small\",\n className,\n {\n \"jkl-file-input--has-files\": hasFiles,\n },\n )}\n data-layout-density={density ? density : \"compact\"}\n {...rest}\n >\n <Dropzone>\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label=\"Legg til fil\"\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n </div>\n </Dropzone>\n <MaxSize id={maxSizeDescriptionId} />\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n </FieldGroup>\n </FileInputContextProvider>\n );\n }\n\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\"jkl-file-input\", className, {\n \"jkl-file-input--has-files\": hasFiles,\n })}\n data-layout-density={density}\n {...rest}\n >\n <Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label={\n multiple && hasFiles\n ? \"Legg til flere filer\"\n : \"Legg til fil\"\n }\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n <MaxSize id={maxSizeDescriptionId} />\n </div>\n </Dropzone>\n </FieldGroup>\n </FileInputContextProvider>\n );\n },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","maxSizeDescriptionId","useId","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","clsx","Dropzone","Input","label","MaxSize","displayName"],"mappings":"gaASO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE1BC,EAAuBC,IAEzBL,OAEIM,EAACC,EAFO,UAAZP,EAEK,CACGQ,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAiB,EAACC,EAAA,CACGnB,UAAWoB,EACP,iBACA,wBACApB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAa,EAACO,EACG,CAAApB,SAAAa,EAAC,MAAI,CAAAd,UAAU,iCACXC,SAAAa,EAACQ,EAAA,CACGpB,GAAAA,EACAqB,MAAM,eACNlB,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,QAI9BE,EAACU,EAAQ,CAAAtB,GAAIU,IACZT,EAAMQ,OAAS,KACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,QASpB,CACGe,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAa,EAACK,EAAA,CACGnB,UAAWoB,EAAK,iBAAkBpB,EAAW,CACzC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,WAACoB,EACI,CAAApB,SAAA,CAAAE,EAAMQ,OAAS,GACZG,EAAC,KAAG,CAAAd,UAAU,wBACTC,SAAAA,IAGTiB,EAAC,MAAI,CAAAlB,UAAU,iCACXC,SAAA,CAAAa,EAACQ,EAAA,CACGpB,GAAAA,EACAqB,MACIlB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,IAEtBE,EAACU,EAAQ,CAAAtB,GAAIU,aAI7B,IAKZjB,EAAU8B,YAAc"}

package/build/es/components/file-input/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { FileInput } from './FileInput.js';
 export { upload } from './utils.js';
-export type { FileInputProps } from './types.js';
+export type { FileInputProps, UploadedFile, UploadedFileValidation, } from './types.js';

package/build/es/components/file-input/internal/Dropzone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropzone.js","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {forwardRef, useState} from \"react\";\nimport type {WithChildren} from \"../../../core/types.js\";\nimport type {UploadedFile} from \"../types.js\";\nimport {useFileInputContext} from \"./fileInputContext.js\";\nimport {validateFileInputFiles} from \"./validateFileInputFiles.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n (props, ref) => {\n const { children, ...rest } = props;\n const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>\n Dropzone must be placed inside a FileInputContextProvider.\n </p>\n );\n }\n const { maxSizeBytes, accept, onChange } = context;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={clsx(\"jkl-file-input__dropzone\", onDragClassName)}\n onDragEnter={(e) => {\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDragOver={(e) => {\n /* Prevent browser from opening file in a new tab */\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDrop={(e) => {\n e.preventDefault();\n setOnDragClassName(\"\");\n\n if (e.dataTransfer.files) {\n onChange(\n e,\n [...e.dataTransfer.files].map<UploadedFile>(\n (file) => ({\n file,\n state: undefined,\n validation: validateFileInputFiles(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n onDragLeave={(e) => {\n setOnDragClassName(\"\");\n e.preventDefault();\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","clsx","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFileInputFiles","uploadProgress","onDragLeave","displayName"],"mappings":"2QASO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,EAAiB,IAEzDC,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAK,2BAA4BV,GAC5CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAU,CACPA,KAAAA,EACAC,WAAO,EACPC,WAAYC,EACRH,EACAZ,EACAD,GAEJiB,eAAgB,MAG5B,EAGRC,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,GACL,IAKZJ,EAAS+B,YAAc"}
1	+ {"version":3,"file":"Dropzone.js","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { UploadedFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFileInputFiles } from \"./validateFileInputFiles.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n (props, ref) => {\n const { children, ...rest } = props;\n const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>\n Dropzone must be placed inside a FileInputContextProvider.\n </p>\n );\n }\n const { maxSizeBytes, accept, onChange } = context;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={clsx(\"jkl-file-input__dropzone\", onDragClassName)}\n onDragEnter={(e) => {\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDragOver={(e) => {\n /* Prevent browser from opening file in a new tab */\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDrop={(e) => {\n e.preventDefault();\n setOnDragClassName(\"\");\n\n if (e.dataTransfer.files) {\n onChange(\n e,\n [...e.dataTransfer.files].map<UploadedFile>(\n (file) => ({\n file,\n state: undefined,\n validation: validateFileInputFiles(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n onDragLeave={(e) => {\n setOnDragClassName(\"\");\n e.preventDefault();\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","clsx","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFileInputFiles","uploadProgress","onDragLeave","displayName"],"mappings":"2QASO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,EAAiB,IAEzDC,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAK,2BAA4BV,GAC5CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAU,CACPA,KAAAA,EACAC,WAAO,EACPC,WAAYC,EACRH,EACAZ,EACAD,GAEJiB,eAAgB,MAG5B,EAGRC,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,GACL,IAKZJ,EAAS+B,YAAc"}

package/build/es/components/file-input/internal/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, {forwardRef, useId} from \"react\";\nimport type {UploadedFile} from \"../types.js\";\nimport {useFileInputContext} from \"./fileInputContext.js\";\nimport {validateFileInputFiles} from \"./validateFileInputFiles.js\";\n\ninterface FileInputProps {\n id?: string;\n label: string;\n multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const { multiple, id, label, ...rest } = props;\n\n const defaultId = useId();\n\n const maxSizeDescriptionId = `${id}-description`;\n const descriptor = multiple ? \"filer\" : \"fil\";\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>Input must be placed inside a FileInputContextProvider.</p>\n );\n }\n const { accept, maxSizeBytes, onChange } = context;\n\n const elementId = id \|\| defaultId;\n\n return (\n <>\n <label\n className=\"jkl-button jkl-button--secondary\"\n htmlFor={elementId}\n id={`${elementId}__add-btn`}\n >\n {label}\n </label>\n <input\n {...rest}\n ref={ref}\n id={elementId}\n accept={accept}\n aria-describedby={\n maxSizeBytes ? maxSizeDescriptionId : undefined\n }\n className=\"jkl-sr-only\"\n type=\"file\"\n multiple={multiple}\n value=\"\"\n onChange={(e) => {\n if (e.target.files) {\n onChange(\n e,\n [...e.target.files].map<UploadedFile>(\n (file) => ({\n file,\n state: undefined,\n validation: validateFileInputFiles(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n />\n <p className=\"jkl-file-input__dropzone-hint\">\n eller slipp {descriptor} her\n </p>{\" \"}\n </>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","label","rest","defaultId","useId","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","elementId","jsxs","Fragment","className","htmlFor","type","value","e","target","files","map","file","state","validation","validateFileInputFiles","uploadProgress","displayName"],"mappings":"+OAWO,MAAMA,EAAQC,GACjB,CAACC,EAAOC,KACE,MAAEC,SAAAA,EAAUC,GAAAA,EAAIC,MAAAA,KAAUC,GAASL,EAEnCM,EAAYC,IAEZC,EAAuB,GAAGL,gBAC1BM,EAAaP,EAAW,QAAU,MAElCQ,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEC,SAAuD,4DAG5D,MAAEC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,GAAaN,EAErCO,EAAYd,GAAMG,EAExB,OAEQY,EAAAC,EAAA,CAAAN,SAAA,CAAAD,EAAC,QAAA,CACGQ,UAAU,mCACVC,QAASJ,EACTd,GAAI,GAAGc,aAENJ,SAAAT,IAELQ,EAAC,QAAA,IACOP,EACJJ,IAAAA,EACAE,GAAIc,EACJH,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLpB,SAAAA,EACAqB,MAAM,GACNP,SAAWQ,IACHA,EAAEC,OAAOC,OACTV,EACIQ,EACA,IAAIA,EAAEC,OAAOC,OAAOC,KACfC,IAAU,CACPA,KAAAA,EACAC,WAAO,EACPC,WAAYC,EACRH,EACAd,EACAC,GAEJiB,eAAgB,MAG5B,IAIZd,EAAC,IAAE,CAAAE,UAAU,gCAAgCP,SAAA,CAAA,eAC5BJ,EAAW,UACvB,MACT,IAKZX,EAAMmC,YAAc"}
1	+ {"version":3,"file":"Input.js","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport type { UploadedFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFileInputFiles } from \"./validateFileInputFiles.js\";\n\ninterface FileInputProps {\n id?: string;\n label: string;\n multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const { multiple, id, label, ...rest } = props;\n\n const defaultId = useId();\n\n const maxSizeDescriptionId = `${id}-description`;\n const descriptor = multiple ? \"filer\" : \"fil\";\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>Input must be placed inside a FileInputContextProvider.</p>\n );\n }\n const { accept, maxSizeBytes, onChange } = context;\n\n const elementId = id \|\| defaultId;\n\n return (\n <>\n <label\n className=\"jkl-button jkl-button--secondary\"\n htmlFor={elementId}\n id={`${elementId}__add-btn`}\n >\n {label}\n </label>\n <input\n {...rest}\n ref={ref}\n id={elementId}\n accept={accept}\n aria-describedby={\n maxSizeBytes ? maxSizeDescriptionId : undefined\n }\n className=\"jkl-sr-only\"\n type=\"file\"\n multiple={multiple}\n value=\"\"\n onChange={(e) => {\n if (e.target.files) {\n onChange(\n e,\n [...e.target.files].map<UploadedFile>(\n (file) => ({\n file,\n state: undefined,\n validation: validateFileInputFiles(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n />\n <p className=\"jkl-file-input__dropzone-hint\">\n eller slipp {descriptor} her\n </p>{\" \"}\n </>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","label","rest","defaultId","useId","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","elementId","jsxs","Fragment","className","htmlFor","type","value","e","target","files","map","file","state","validation","validateFileInputFiles","uploadProgress","displayName"],"mappings":"+OAWO,MAAMA,EAAQC,GACjB,CAACC,EAAOC,KACE,MAAEC,SAAAA,EAAUC,GAAAA,EAAIC,MAAAA,KAAUC,GAASL,EAEnCM,EAAYC,IAEZC,EAAuB,GAAGL,gBAC1BM,EAAaP,EAAW,QAAU,MAElCQ,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEC,SAAuD,4DAG5D,MAAEC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,GAAaN,EAErCO,EAAYd,GAAMG,EAExB,OAEQY,EAAAC,EAAA,CAAAN,SAAA,CAAAD,EAAC,QAAA,CACGQ,UAAU,mCACVC,QAASJ,EACTd,GAAI,GAAGc,aAENJ,SAAAT,IAELQ,EAAC,QAAA,IACOP,EACJJ,IAAAA,EACAE,GAAIc,EACJH,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLpB,SAAAA,EACAqB,MAAM,GACNP,SAAWQ,IACHA,EAAEC,OAAOC,OACTV,EACIQ,EACA,IAAIA,EAAEC,OAAOC,OAAOC,KACfC,IAAU,CACPA,KAAAA,EACAC,WAAO,EACPC,WAAYC,EACRH,EACAd,EACAC,GAEJiB,eAAgB,MAG5B,IAIZd,EAAC,IAAE,CAAAE,UAAU,gCAAgCP,SAAA,CAAA,eAC5BJ,EAAW,UACvB,MACT,IAKZX,EAAMmC,YAAc"}

package/build/es/components/file-input/internal/fileInputContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileInputContext.js","sources":["../../../../../src/components/file-input/internal/fileInputContext.tsx"],"sourcesContent":["import React, {createContext, useContext} from \"react\";\nimport type {WithChildren} from \"../../../core/types.js\";\nimport type {UploadedFile} from \"../types.js\";\n\ntype FileInputContext = {\n accept?: \"image/\" \| \".pdf\" \| \"image/,.pdf\" \| HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n files: UploadedFile[];\n onChange: (\n e:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.DragEvent<HTMLDivElement>,\n files: UploadedFile[],\n ) => void;\n};\n\nconst fileInputContext = createContext<FileInputContext \| null>(null);\n\nexport const useFileInputContext = (): FileInputContext \| null =>\n useContext(fileInputContext);\n\nexport interface FileInputContextProviderProps extends WithChildren {\n context: FileInputContext;\n}\n\nexport const FileInputContextProvider: React.FC<\n FileInputContextProviderProps\n> = ({ context, children }) => (\n <fileInputContext.Provider value={context}>\n {children}\n </fileInputContext.Provider>\n);\n"],"names":["fileInputContext","createContext","useFileInputContext","useContext","FileInputContextProvider","context","children","jsx","Provider","value"],"mappings":"8FAgBA,MAAMA,EAAmBC,EAAuC,MAEnDC,EAAsB,IAC/BC,EAAWH,GAMFI,EAET,EAAGC,QAAAA,EAASC,SAAAA,KACXC,EAAAP,EAAiBQ,SAAjB,CAA0BC,MAAOJ,EAC7BC,SAAAA"}
1	+ {"version":3,"file":"fileInputContext.js","sources":["../../../../../src/components/file-input/internal/fileInputContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { UploadedFile } from \"../types.js\";\n\ntype FileInputContext = {\n accept?: \"image/\" \| \".pdf\" \| \"image/,.pdf\" \| HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n files: UploadedFile[];\n onChange: (\n e:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.DragEvent<HTMLDivElement>,\n files: UploadedFile[],\n ) => void;\n};\n\nconst fileInputContext = createContext<FileInputContext \| null>(null);\n\nexport const useFileInputContext = (): FileInputContext \| null =>\n useContext(fileInputContext);\n\nexport interface FileInputContextProviderProps extends WithChildren {\n context: FileInputContext;\n}\n\nexport const FileInputContextProvider: React.FC<\n FileInputContextProviderProps\n> = ({ context, children }) => (\n <fileInputContext.Provider value={context}>\n {children}\n </fileInputContext.Provider>\n);\n"],"names":["fileInputContext","createContext","useFileInputContext","useContext","FileInputContextProvider","context","children","jsx","Provider","value"],"mappings":"8FAgBA,MAAMA,EAAmBC,EAAuC,MAEnDC,EAAsB,IAC/BC,EAAWH,GAMFI,EAET,EAAGC,QAAAA,EAASC,SAAAA,KACXC,EAAAP,EAAiBQ,SAAjB,CAA0BC,MAAOJ,EAC7BC,SAAAA"}

package/build/es/components/file-input/internal/validateFileInputFiles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{formatBytes as e}from"../../../utilities/formatters/bytes/formatBytes.js";function t(t,s="",a){var i;const o=s.split(",").map((e=>e.toLowerCase())).map((e=>e.replaceAll("*",""))).map((e=>e.trim()));let l=0===o.length;return l=o.some((e=>t.type.toLowerCase().includes(e)||t.name.toLowerCase().endsWith(e))),l?typeof a<"u"&&t.size>a?{type:"TOO_LARGE",message:`Filen er ${e(t.size)}, men kan maksimalt være ${e(a)}`}:void 0:{type:"WRONG_TYPE",message:`Filtypen ${(null==(i=t.name)?void 0:i.split(".")[1])||""} støttes ikke`}}export{t as validateFileInputFiles};
+import{formatBytes as e}from"../../../utilities/formatters/bytes/formatBytes.js";function t(t,s="",a){const i=s.split(",").map((e=>e.toLowerCase())).map((e=>e.replaceAll("*",""))).map((e=>e.trim()));let m=0===i.length;return m=i.some((e=>t.type.toLowerCase().includes(e)||t.name.toLowerCase().endsWith(e))),m?typeof a<"u"&&t.size>a?{type:"TOO_LARGE",message:`Filen er ${e(t.size)}, men kan maksimalt være ${e(a)}`}:void 0:{type:"WRONG_TYPE",message:`Filtypen ${t.name?.split(".")[1]||""} støttes ikke`}}export{t as validateFileInputFiles};
 //# sourceMappingURL=validateFileInputFiles.js.map

package/build/es/components/file-input/internal/validateFileInputFiles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"validateFileInputFiles.js","sources":["../../../../../src/components/file-input/internal/validateFileInputFiles.ts"],"sourcesContent":["import {formatBytes} from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport type {UploadedFile} from \"../types.js\";\n\nexport function validateFileInputFiles(\n file: File,\n accept = \"\",\n maxSizeBytes?: number,\n): UploadedFile[\"validation\"] \| undefined {\n const acceptStrings = accept\n .split(\",\")\n .map((s) => s.toLowerCase())\n .map((s) => s.replaceAll(\"*\", \"\"))\n .map((s) => s.trim());\n\n let isValidFormat = acceptStrings.length === 0;\n\n isValidFormat = acceptStrings.some(\n (acceptString) =>\n file.type.toLowerCase().includes(acceptString) \|\|\n file.name.toLowerCase().endsWith(acceptString),\n );\n\n if (!isValidFormat) {\n return {\n type: \"WRONG_TYPE\",\n message: `Filtypen ${file.name?.split(\".\")[1] \|\| \"\"} støttes ikke`,\n };\n }\n\n if (typeof maxSizeBytes !== \"undefined\" && file.size > maxSizeBytes) {\n return {\n type: \"TOO_LARGE\",\n message: `Filen er ${formatBytes(\n file.size,\n )}, men kan maksimalt være ${formatBytes(maxSizeBytes)}`,\n };\n }\n\n return undefined;\n}\n"],"names":["validateFileInputFiles","file","accept","maxSizeBytes","acceptStrings","split","map","s","toLowerCase","replaceAll","trim","isValidFormat","length","some","acceptString","type","includes","name","endsWith","size","message","formatBytes"~~,"_a"~~],"mappings":"iFAGO,SAASA,EACZC,EACAC,EAAS,GACTC,~~SAEMC~~,MAAAA,EAAgBF,EACjBG,MAAM,KACNC,KAAKC,GAAMA,EAAEC,gBACbF,KAAKC,GAAMA,EAAEE,WAAW,IAAK,MAC7BH,KAAKC,GAAMA,EAAEG,SAEdC,IAAAA,EAAyC,IAAzBP,EAAcQ,OAQlC,OANAD,EAAgBP,EAAcS,MACzBC,GACGb,EAAKc,KAAKP,cAAcQ,SAASF,IACjCb,EAAKgB,KAAKT,cAAcU,SAASJ,KAGpCH,SAOMR,EAAiB,KAAeF,EAAKkB,KAAOhB,EAC5C,CACHY,KAAM,YACNK,QAAS,YAAYC,EACjBpB,EAAKkB,iCACoBE,EAAYlB,WALjD,EANW,CACHY,KAAM,aACNK,QAAS,~~aAAY~~,~~OAAAE,EAAArB,~~EAAKgB,~~aAALK~~,~~EAAWjB,~~MAAM,KAAK,~~KAAM~~,kBAc7D"}
1	+ {"version":3,"file":"validateFileInputFiles.js","sources":["../../../../../src/components/file-input/internal/validateFileInputFiles.ts"],"sourcesContent":["import { formatBytes } from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport type { UploadedFile } from \"../types.js\";\n\nexport function validateFileInputFiles(\n file: File,\n accept = \"\",\n maxSizeBytes?: number,\n): UploadedFile[\"validation\"] \| undefined {\n const acceptStrings = accept\n .split(\",\")\n .map((s) => s.toLowerCase())\n .map((s) => s.replaceAll(\"*\", \"\"))\n .map((s) => s.trim());\n\n let isValidFormat = acceptStrings.length === 0;\n\n isValidFormat = acceptStrings.some(\n (acceptString) =>\n file.type.toLowerCase().includes(acceptString) \|\|\n file.name.toLowerCase().endsWith(acceptString),\n );\n\n if (!isValidFormat) {\n return {\n type: \"WRONG_TYPE\",\n message: `Filtypen ${file.name?.split(\".\")[1] \|\| \"\"} støttes ikke`,\n };\n }\n\n if (typeof maxSizeBytes !== \"undefined\" && file.size > maxSizeBytes) {\n return {\n type: \"TOO_LARGE\",\n message: `Filen er ${formatBytes(\n file.size,\n )}, men kan maksimalt være ${formatBytes(maxSizeBytes)}`,\n };\n }\n\n return undefined;\n}\n"],"names":["validateFileInputFiles","file","accept","maxSizeBytes","acceptStrings","split","map","s","toLowerCase","replaceAll","trim","isValidFormat","length","some","acceptString","type","includes","name","endsWith","size","message","formatBytes"],"mappings":"iFAGO,SAASA,EACZC,EACAC,EAAS,GACTC,GAEMC,MAAAA,EAAgBF,EACjBG,MAAM,KACNC,KAAKC,GAAMA,EAAEC,gBACbF,KAAKC,GAAMA,EAAEE,WAAW,IAAK,MAC7BH,KAAKC,GAAMA,EAAEG,SAEdC,IAAAA,EAAyC,IAAzBP,EAAcQ,OAQlC,OANAD,EAAgBP,EAAcS,MACzBC,GACGb,EAAKc,KAAKP,cAAcQ,SAASF,IACjCb,EAAKgB,KAAKT,cAAcU,SAASJ,KAGpCH,SAOMR,EAAiB,KAAeF,EAAKkB,KAAOhB,EAC5C,CACHY,KAAM,YACNK,QAAS,YAAYC,EACjBpB,EAAKkB,iCACoBE,EAAYlB,WALjD,EANW,CACHY,KAAM,aACNK,QAAS,YAAYnB,EAAKgB,MAAMZ,MAAM,KAAK,IAAM,kBAc7D"}

package/build/es/components/file-input/stories/FileInput.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.stories.js","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React, {useState} from \"react\";\nimport \"../styles/_index.scss\";\nimport {Button, PrimaryButton} from \"../../button/index.js\";\nimport {File} from \"../../file/File.js\";\nimport {FileInput} from \"../FileInput.js\";\nimport {Dropzone} from \"../internal/Dropzone.js\";\nimport {MaxSize} from \"../internal/MaxSize.js\";\nimport type {UploadedFile} from \"../types.js\";\n\nconst meta = {\n title: \"Komponenter/File/FileInput\",\n component: FileInput,\n subcomponents: {File, Dropzone, MaxSize, Button},\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n name: \"FileInput\",\n args: {\n variant: \"flexible\",\n value: [],\n onChange: console.info,\n legend: \"Legg til fil\",\n labelProps: {\n variant: \"medium\",\n },\n accept: \"image/*,.pdf\",\n maxSizeBytes: 8_000_000,\n },\n render: (args) => {\n const [files, setFiles] = useState<UploadedFile[]>([]);\n\n return (\n <div>\n <FileInput\n {...args}\n id=\"file-input-example\"\n className=\"jkl-spacing-16-24--bottom\"\n value={files}\n onChange={(_e, newFiles) => {\n setFiles((currentFiles) => [\n ...currentFiles,\n ...newFiles,\n ]);\n }}\n >\n {files.map(({state, file, validation}, index) => {\n return (\n <File\n key={`${file.name}-${index}`}\n fileName={file.name}\n fileType={file.type}\n fileSize={file.size}\n path={`/path/fil-${index}`}\n file={file}\n state={state}\n onRemove={\n state !== \"loading\" ? (e) => \"\" : undefined\n }\n />\n );\n })}\n </FileInput>\n <PrimaryButton\n className=\"jkl-spacing-16--top\"\n type=\"button\"\n onClick={async () => {\n const toUpload = files.filter(\n (fileState) =>\n typeof fileState.validation === \"undefined\",\n );\n\n const newFiles = files.map((file) =>\n toUpload.includes(file)\n ? {\n ...file,\n }\n : file,\n );\n\n setFiles(\n newFiles.map((file) => {\n return {...file, state: \"loading\"};\n }),\n );\n\n await Promise.all(newFiles);\n }}\n >\n Last opp\n </PrimaryButton>\n </div>\n );\n },\n};\n"],"names":["meta","title","component","FileInput","subcomponents","File","Dropzone","MaxSize","Button","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","labelProps","accept","maxSizeBytes","render","files","setFiles","useState","children","jsx","id","className","_e","newFiles","currentFiles","map","state","file","validation","index","fileName","fileType","type","fileSize","size","path","onRemove","e","PrimaryButton","onClick","async","toUpload","filter","fileState","includes","Promise","all"],"mappings":"uXAUA,MAAMA,EAAO,CACTC,MAAO,6BACPC,UAAWC,EACXC,cAAe,~~CAACC~~,KAAAA,EAAMC,SAAAA,EAAUC,QAAAA,EAASC,OAAAA,~~GACzCC~~,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,eACRC,WAAY,CACRN,QAAS,UAEbO,OAAQ,eACRC,aAAc,KAElBC,OAASV,IACL,MAAOW,EAAOC,GAAYC,EAAyB,IAEnD,SACK,MACG,CAAAC,SAAA,CAAAC,EAAC1B,EAAA,IACOW,EACJgB,GAAG,qBACHC,UAAU,4BACVf,MAAOS,EACPR,SAAU,CAACe,EAAIC,KACXP,GAAUQ,GAAiB,IACpBA,KACAD,IACN,EAGJL,SAAAH,EAAMU,KAAI,~~EAAEC~~,MAAAA,EAAOC,KAAAA,EAAMC,WAAAA,~~GAAaC~~,~~IAE/BV~~,EAACxB,EAAA,CAEGmC,SAAUH,EAAKxB,KACf4B,SAAUJ,EAAKK,KACfC,SAAUN,EAAKO,KACfC,KAAM,aAAaN,IACnBF,KAAAA,EACAD,MAAAA,EACAU,SACc,YAAVV,EAAuBW,GAAM,QAAK,GARjC,GAAGV,EAAKxB,QAAQ0B,SAcrCV,EAACmB,EAAA,CACGjB,UAAU,sBACVW,KAAK,SACLO,QAASC,UACL,MAAMC,EAAW1B,EAAM2B,QAClBC,UACUA,EAAUf,WAAe,MAGlCL,EAAWR,EAAMU,KAAKE,GACxBc,EAASG,SAASjB,GACZ,~~IACKA~~,~~GAELA~~,IAGVX,EACIO,EAASE,KAAKE,IAAAA,~~IACCA~~,EAAMD,MAAO,~~qBAI1BmB~~,QAAQC,IAAIvB,EAAQ,EAEjCL,SAAA,eAGL"}
1	+ {"version":3,"file":"FileInput.stories.js","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport \"../styles/_index.scss\";\nimport { Button, PrimaryButton } from \"../../button/index.js\";\nimport { File } from \"../../file/File.js\";\nimport { FileInput } from \"../FileInput.js\";\nimport { Dropzone } from \"../internal/Dropzone.js\";\nimport { MaxSize } from \"../internal/MaxSize.js\";\nimport type { UploadedFile } from \"../types.js\";\n\nconst meta = {\n title: \"Komponenter/File/FileInput\",\n component: FileInput,\n subcomponents: { File, Dropzone, MaxSize, Button },\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n name: \"FileInput\",\n args: {\n variant: \"flexible\",\n value: [],\n onChange: console.info,\n legend: \"Legg til fil\",\n labelProps: {\n variant: \"medium\",\n },\n accept: \"image/*,.pdf\",\n maxSizeBytes: 8_000_000,\n },\n render: (args) => {\n const [files, setFiles] = useState<UploadedFile[]>([]);\n\n return (\n <div>\n <FileInput\n {...args}\n id=\"file-input-example\"\n className=\"jkl-spacing-16-24--bottom\"\n value={files}\n onChange={(_e, newFiles) => {\n setFiles((currentFiles) => [\n ...currentFiles,\n ...newFiles,\n ]);\n }}\n >\n {files.map(({ state, file, validation }, index) => {\n return (\n <File\n key={`${file.name}-${index}`}\n fileName={file.name}\n fileType={file.type}\n fileSize={file.size}\n path={`/path/fil-${index}`}\n file={file}\n state={state}\n onRemove={\n state !== \"loading\" ? (e) => \"\" : undefined\n }\n />\n );\n })}\n </FileInput>\n <PrimaryButton\n className=\"jkl-spacing-16--top\"\n type=\"button\"\n onClick={async () => {\n const toUpload = files.filter(\n (fileState) =>\n typeof fileState.validation === \"undefined\",\n );\n\n const newFiles = files.map((file) =>\n toUpload.includes(file)\n ? {\n ...file,\n }\n : file,\n );\n\n setFiles(\n newFiles.map((file) => {\n return { ...file, state: \"loading\" };\n }),\n );\n\n await Promise.all(newFiles);\n }}\n >\n Last opp\n </PrimaryButton>\n </div>\n );\n },\n};\n"],"names":["meta","title","component","FileInput","subcomponents","File","Dropzone","MaxSize","Button","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","labelProps","accept","maxSizeBytes","render","files","setFiles","useState","children","jsx","id","className","_e","newFiles","currentFiles","map","state","file","validation","index","fileName","fileType","type","fileSize","size","path","onRemove","e","PrimaryButton","onClick","async","toUpload","filter","fileState","includes","Promise","all"],"mappings":"uXAUA,MAAMA,EAAO,CACTC,MAAO,6BACPC,UAAWC,EACXC,cAAe,CAAEC,KAAAA,EAAMC,SAAAA,EAAUC,QAAAA,EAASC,OAAAA,GAC1CC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,eACRC,WAAY,CACRN,QAAS,UAEbO,OAAQ,eACRC,aAAc,KAElBC,OAASV,IACL,MAAOW,EAAOC,GAAYC,EAAyB,IAEnD,SACK,MACG,CAAAC,SAAA,CAAAC,EAAC1B,EAAA,IACOW,EACJgB,GAAG,qBACHC,UAAU,4BACVf,MAAOS,EACPR,SAAU,CAACe,EAAIC,KACXP,GAAUQ,GAAiB,IACpBA,KACAD,IACN,EAGJL,SAAAH,EAAMU,KAAI,EAAGC,MAAAA,EAAOC,KAAAA,EAAMC,WAAAA,GAAcC,IAEjCV,EAACxB,EAAA,CAEGmC,SAAUH,EAAKxB,KACf4B,SAAUJ,EAAKK,KACfC,SAAUN,EAAKO,KACfC,KAAM,aAAaN,IACnBF,KAAAA,EACAD,MAAAA,EACAU,SACc,YAAVV,EAAuBW,GAAM,QAAK,GARjC,GAAGV,EAAKxB,QAAQ0B,SAcrCV,EAACmB,EAAA,CACGjB,UAAU,sBACVW,KAAK,SACLO,QAASC,UACL,MAAMC,EAAW1B,EAAM2B,QAClBC,UACUA,EAAUf,WAAe,MAGlCL,EAAWR,EAAMU,KAAKE,GACxBc,EAASG,SAASjB,GACZ,IACOA,GAEPA,IAGVX,EACIO,EAASE,KAAKE,IAAAA,IACEA,EAAMD,MAAO,qBAI3BmB,QAAQC,IAAIvB,EAAQ,EAEjCL,SAAA,eAGL"}

package/build/es/components/icon/stories/Icons.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as n}from"react/jsx-runtime";import{useState as r}from"react";import{TextInput as s}from"../../text-input/TextInput.js";import{Icon as c}from"../Icon.js";import"../icons/animated/ArrowVerticalAnimated.js";import"../icons/animated/ArrowHorizontalAnimated.js";import"../icons/animated/PlusRemoveAnimated.js";import{ArrowDownIcon as i}from"../icons/ArrowDownIcon.js";import{ArrowLeftIcon as e}from"../icons/ArrowLeftIcon.js";import{ArrowNorthEastIcon as t}from"../icons/ArrowNorthEastIcon.js";import{ArrowRightIcon as m}from"../icons/ArrowRightIcon.js";import{ArrowUpIcon as a}from"../icons/ArrowUpIcon.js";import{CalendarIcon as I}from"../icons/CalendarIcon.js";import{CheckIcon as p}from"../icons/CheckIcon.js";import{ChevronDownIcon as f}from"../icons/ChevronDownIcon.js";import{ChevronLeftIcon as l}from"../icons/ChevronLeftIcon.js";import{ChevronRightIcon as j}from"../icons/ChevronRightIcon.js";import{ChevronUpIcon as h}from"../icons/ChevronUpIcon.js";import{CloseIcon as d}from"../icons/CloseIcon.js";import{CopyIcon as u}from"../icons/CopyIcon.js";import{DotsIcon as w}from"../icons/DotsIcon.js";import{DragIcon as C}from"../icons/DragIcon.js";import{ErrorIcon as g}from"../icons/ErrorIcon.js";import{GreenCheckIcon as v}from"../icons/GreenCheckIcon.js";import{HamburgerIcon as A}from"../icons/HamburgerIcon.js";import{InfoIcon as b}from"../icons/InfoIcon.js";import{LinkIcon as k}from"../icons/LinkIcon.js";import{MinusIcon as x}from"../icons/MinusIcon.js";import{OpenInNewIcon as y}from"../icons/OpenInNewIcon.js";import{PenIcon as D}from"../icons/PenIcon.js";import{PlusIcon as T}from"../icons/PlusIcon.js";import{QuestionIcon as N}from"../icons/QuestionIcon.js";import{RedCrossIcon as R}from"../icons/RedCrossIcon.js";import{SearchIcon as S}from"../icons/SearchIcon.js";import{SuccessIcon as L}from"../icons/SuccessIcon.js";import{ThumbDownIcon as U}from"../icons/ThumbDownIcon.js";import{ThumbUpIcon as P}from"../icons/ThumbUpIcon.js";import{TrashCanIcon as E}from"../icons/TrashCanIcon.js";import{WarningIcon as H}from"../icons/WarningIcon.js";/* empty css                         */const z=({name:n,renderIcon:r,...s})=>o("div",{title:n||r.name,...s,children:r()}),G=({columns:n,children:r,...s})=>o("div",{className:`jkl-example-grid jkl-example-grid--${n}-columns`,...s,children:r}),M={title:"Komponenter/Ikoner",component:c,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:"radio",options:["inherit","medium","small"]}}},O=[i,e,t,m,a,I,p,f,l,j,h,d,u,w,C,g,v,A,b,k,x,y,D,T,N,R,S,L,U,P,E,H],Q={args:{variant:"small",bold:!1},render:({variant:c,bold:i})=>{const[e,t]=r("1rem");return n("div",{style:{width:"50vw"},children:["inherit"===c&&o(s,{label:"Fontstørrelse",className:"jkl-spacing-24--bottom",value:e,onChange:o=>t(o.target.value),width:"10ch"}),o(G,{style:{fontSize:e},columns:"four",children:O.map((n=>o(z,{style:{justifySelf:"center"},renderIcon:()=>o(n,{bold:i,variant:c}),name:n.displayName},n.displayName)))})]})}};export{Q as Ikoner,M as default};
+import{jsx as o,jsxs as n}from"react/jsx-runtime";import{useState as r}from"react";import{TextInput as s}from"../../text-input/TextInput.js";import{Icon as c}from"../Icon.js";import"../icons/animated/ArrowVerticalAnimated.js";import"../icons/animated/ArrowHorizontalAnimated.js";import"../icons/animated/PlusRemoveAnimated.js";import{ArrowDownIcon as i}from"../icons/ArrowDownIcon.js";import{ArrowLeftIcon as e}from"../icons/ArrowLeftIcon.js";import{ArrowNorthEastIcon as t}from"../icons/ArrowNorthEastIcon.js";import{ArrowRightIcon as m}from"../icons/ArrowRightIcon.js";import{ArrowUpIcon as a}from"../icons/ArrowUpIcon.js";import{CalendarIcon as I}from"../icons/CalendarIcon.js";import{CheckIcon as p}from"../icons/CheckIcon.js";import{ChevronDownIcon as l}from"../icons/ChevronDownIcon.js";import{ChevronLeftIcon as f}from"../icons/ChevronLeftIcon.js";import{ChevronRightIcon as j}from"../icons/ChevronRightIcon.js";import{ChevronUpIcon as h}from"../icons/ChevronUpIcon.js";import{CloseIcon as d}from"../icons/CloseIcon.js";import{CopyIcon as u}from"../icons/CopyIcon.js";import{DotsIcon as w}from"../icons/DotsIcon.js";import{DragIcon as C}from"../icons/DragIcon.js";import{ErrorIcon as v}from"../icons/ErrorIcon.js";import{GreenCheckIcon as g}from"../icons/GreenCheckIcon.js";import{HamburgerIcon as A}from"../icons/HamburgerIcon.js";import{InfoIcon as b}from"../icons/InfoIcon.js";import{LinkIcon as k}from"../icons/LinkIcon.js";import{MinusIcon as x}from"../icons/MinusIcon.js";import{OpenInNewIcon as y}from"../icons/OpenInNewIcon.js";import{PenIcon as D}from"../icons/PenIcon.js";import{PlusIcon as T}from"../icons/PlusIcon.js";import{QuestionIcon as N}from"../icons/QuestionIcon.js";import{RedCrossIcon as R}from"../icons/RedCrossIcon.js";import{SearchIcon as S}from"../icons/SearchIcon.js";import{SuccessIcon as L}from"../icons/SuccessIcon.js";import{ThumbDownIcon as U}from"../icons/ThumbDownIcon.js";import{ThumbUpIcon as P}from"../icons/ThumbUpIcon.js";import{TrashCanIcon as E}from"../icons/TrashCanIcon.js";import{WarningIcon as H}from"../icons/WarningIcon.js";/* empty css                         */const z=({name:n,renderIcon:r,...s})=>o("div",{title:n||r.name,...s,children:r()}),G=({columns:n,children:r,...s})=>o("div",{className:`jkl-example-grid jkl-example-grid--${n}-columns`,...s,children:r}),M={title:"Komponenter/Ikoner",component:c,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:"radio",options:["inherit","medium","small"]}}},O=[i,e,t,m,a,I,p,l,f,j,h,d,u,w,C,v,g,A,b,k,x,y,D,T,N,R,S,L,U,P,E,H],Q={args:{variant:"small",bold:!1},render:({variant:c,bold:i})=>{const[e,t]=r("1rem");return n("div",{style:{width:"50vw"},children:["inherit"===c&&o(s,{label:"Fontstørrelse",className:"jkl-spacing-24--bottom",value:e,onChange:o=>t(o.target.value),width:"10ch"}),o(G,{style:{fontSize:e},columns:"four",children:O.map((n=>o(z,{style:{justifySelf:"center"},renderIcon:()=>o(n,{bold:i,variant:c}),name:n.displayName},n.displayName)))})]})}};export{Q as Ikoner,M as default};
 //# sourceMappingURL=Icons.stories.js.map

package/build/es/components/image/useImageLoadingStatus.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useRef as e,useState as t,useEffect as u}from"react";const n=n=>{const r=e(null),[o,s]=t(!1);return u((()=>{r.current&&((e,t)=>{let u;!function n(){if(e.complete)return clearTimeout(u),void(null==t||t());u=window.setTimeout(n,50)}()})(r.current,(()=>{s(!0),null==n||n()}))}),[n]),[r,o]};export{n as useImageLoadingStatus};
+import{useRef as e,useState as t,useEffect as r}from"react";const u=u=>{const o=e(null),[s,n]=t(!1);return r((()=>{o.current&&((e,t)=>{let r;!function u(){if(e.complete)return clearTimeout(r),void t?.();r=window.setTimeout(u,50)}()})(o.current,(()=>{n(!0),u?.()}))}),[u]),[o,s]};export{u as useImageLoadingStatus};
 //# sourceMappingURL=useImageLoadingStatus.js.map

package/build/es/components/image/useImageLoadingStatus.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useImageLoadingStatus.js","sources":["../../../../src/components/image/useImageLoadingStatus.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from \"react\";\n\nconst doWhenImageLoaded = (image: HTMLImageElement, callback?: () => void) => {\n let timeout: number \| undefined;\n\n function checkLoaded() {\n if (image.complete) {\n clearTimeout(timeout);\n callback?.();\n return;\n }\n timeout = window.setTimeout(checkLoaded, 50);\n }\n\n checkLoaded();\n};\n\nexport const useImageLoadingStatus = (\n callback?: () => void,\n): [RefObject<HTMLImageElement>, boolean] => {\n const imageRef = useRef<HTMLImageElement>(null);\n const [imageLoaded, setImageLoaded] = useState(false);\n\n useEffect(() => {\n imageRef.current &&\n doWhenImageLoaded(imageRef.current, () => {\n setImageLoaded(true);\n callback?.();\n });\n }, [callback]);\n\n return [imageRef, imageLoaded];\n};\n"],"names":["useImageLoadingStatus","callback","imageRef","useRef","imageLoaded","setImageLoaded","useState","useEffect","current","image","timeout","checkLoaded","complete","window","setTimeout","doWhenImageLoaded"],"mappings":"4DAEA,MAeaA,EACTC,IAEMC,MAAAA,EAAWC,EAAyB,OACnCC,EAAaC,GAAkBC,GAAS,GAE/C,OAAAC,GAAU,KACNL,EAASM,SAtBS,EAACC,EAAyBR,KAC5CS,IAAAA,GAEJ,SAASC,IACL,GAAIF,EAAMG,SAGN,OAFaF,aAAAA,~~QACF~~,~~MAAAT~~,~~GAAAA,KAGLS,~~EAAAG,OAAOC,WAAWH,EAAa,GAAE,CAGnCA,EAAA,EAWJI,CAAkBb,EAASM,SAAS,KAChCH,GAAe,~~GACJ~~,~~MAAAJ~~,~~GAAAA,GAAAA,~~GACd,GACN,CAACA,IAEG,CAACC,EAAUE,EAAW"}
1	+ {"version":3,"file":"useImageLoadingStatus.js","sources":["../../../../src/components/image/useImageLoadingStatus.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from \"react\";\n\nconst doWhenImageLoaded = (image: HTMLImageElement, callback?: () => void) => {\n let timeout: number \| undefined;\n\n function checkLoaded() {\n if (image.complete) {\n clearTimeout(timeout);\n callback?.();\n return;\n }\n timeout = window.setTimeout(checkLoaded, 50);\n }\n\n checkLoaded();\n};\n\nexport const useImageLoadingStatus = (\n callback?: () => void,\n): [RefObject<HTMLImageElement>, boolean] => {\n const imageRef = useRef<HTMLImageElement>(null);\n const [imageLoaded, setImageLoaded] = useState(false);\n\n useEffect(() => {\n imageRef.current &&\n doWhenImageLoaded(imageRef.current, () => {\n setImageLoaded(true);\n callback?.();\n });\n }, [callback]);\n\n return [imageRef, imageLoaded];\n};\n"],"names":["useImageLoadingStatus","callback","imageRef","useRef","imageLoaded","setImageLoaded","useState","useEffect","current","image","timeout","checkLoaded","complete","window","setTimeout","doWhenImageLoaded"],"mappings":"4DAEA,MAeaA,EACTC,IAEMC,MAAAA,EAAWC,EAAyB,OACnCC,EAAaC,GAAkBC,GAAS,GAE/C,OAAAC,GAAU,KACNL,EAASM,SAtBS,EAACC,EAAyBR,KAC5CS,IAAAA,GAEJ,SAASC,IACL,GAAIF,EAAMG,SAGN,OAFaF,aAAAA,QACFT,MAGLS,EAAAG,OAAOC,WAAWH,EAAa,GAAE,CAGnCA,EAAA,EAWJI,CAAkBb,EAASM,SAAS,KAChCH,GAAe,GACJJ,KAAA,GACd,GACN,CAACA,IAEG,CAACC,EAAUE,EAAW"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import a,{forwardRef as i}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{Label as t}from"./Label.js";import{SupportLabel as n}from"./SupportLabel.js";const p=i(((i,p)=>{const{className:d,children:m,density:u,errorLabel:c,helpLabel:b,inline:h,label:y,labelProps:f,render:j,supportLabelProps:v,tooltip:L,id:x,...k}=i,I=o(x||"jkl-input",{generateSuffix:!x}),S=o("jkl-support-label"),g=!!L,w=c||b,N=c?"error":b?"help":void 0,A={"aria-describedby":w?S:void 0,"aria-invalid":!!c||void 0,id:I},E=j?()=>j(A):()=>{const e=a.Children.toArray(i.children)[0];if(a.isValidElement(e))return a.cloneElement(e,{...A,...e.props})};return e("div",{ref:p,className:s(d,"jkl-input-group",{"jkl-input-group--inline":h}),"data-density":u,...k,children:[r(t,{standAlone:!0,htmlFor:I,srOnly:h,...f,style:{whiteSpace:g?"nowrap":void 0,...null==f?void 0:f.style},density:u,children:g?e(l,{children:[r("span",{style:{whiteSpace:"normal"},children:y})," ",L]}):y}),E(),r(n,{srOnly:h,...v,label:w,labelType:N,id:S,density:u})]})}));p.displayName="InputGroup";export{p as InputGroup};
+import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import a,{forwardRef as i}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{Label as t}from"./Label.js";import{SupportLabel as n}from"./SupportLabel.js";const p=i(((i,p)=>{const{className:d,children:m,density:u,errorLabel:c,helpLabel:b,inline:h,label:y,labelProps:f,render:j,supportLabelProps:L,tooltip:v,id:x,...k}=i,I=o(x||"jkl-input",{generateSuffix:!x}),S=o("jkl-support-label"),g=!!v,w=c||b,N=c?"error":b?"help":void 0,A={"aria-describedby":w?S:void 0,"aria-invalid":!!c||void 0,id:I},E=j?()=>j(A):()=>{const e=a.Children.toArray(i.children)[0];if(a.isValidElement(e))return a.cloneElement(e,{...A,...e.props})};return e("div",{ref:p,className:s(d,"jkl-input-group",{"jkl-input-group--inline":h}),"data-density":u,...k,children:[r(t,{standAlone:!0,htmlFor:I,srOnly:h,...f,style:{whiteSpace:g?"nowrap":void 0,...f?.style},density:u,children:g?e(l,{children:[r("span",{style:{whiteSpace:"normal"},children:y})," ",v]}):y}),E(),r(n,{srOnly:h,...L,label:w,labelType:N,id:S,density:u})]})}));p.displayName="InputGroup";export{p as InputGroup};
 //# sourceMappingURL=InputGroup.js.map

package/build/es/components/input-group/InputGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n (props, ref) => {\n const {\n className,\n children,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n render,\n supportLabelProps,\n tooltip,\n id,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-input\", { generateSuffix: !id });\n const supportId = useId(\"jkl-support-label\");\n\n const hasTooltip = !!tooltip;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n const inputProps: InputProps = {\n \"aria-describedby\": describedBy,\n \"aria-invalid\": errorLabel ? true : undefined,\n id: uid,\n };\n\n const renderInput = render\n ? () => render(inputProps)\n : () => {\n const input = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement<InputProps>(input)) return;\n\n return React.cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n });\n };\n\n return (\n <div\n ref={ref}\n className={clsx(className, \"jkl-input-group\", {\n \"jkl-input-group--inline\": inline,\n })}\n data-density={density}\n {...rest}\n >\n <Label\n standAlone\n htmlFor={uid}\n srOnly={inline}\n {...labelProps}\n style={{\n whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n ...labelProps?.style,\n }}\n density={density}\n >\n {hasTooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {label}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n label\n )}\n </Label>\n {renderInput()}\n <SupportLabel\n srOnly={inline}\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n </div>\n );\n },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,GACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAElBG,IAAeP,EAEfQ,EAAcf,GAAcC,EAC5Be,EAAkBhB,EAClB,QACAC,EACE,YACA,EAIFgB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBb,QAAoB,EACpCQ,GAAIE,GAGFQ,EAAcb,EACd,IAAMA,EAAOY,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAEhDsB,GAAAA,EAAMG,eAA2BJ,GAE/BC,OAAAA,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,OACZ,EAIP,OAAA8B,EAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVU,EAEJX,SAAA,CAAA6B,EAACC,EAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ7B,KACJE,EACJ4B,MAAO,CACHC,WAAYnB,EAAa,cAAW,~~KACjC~~,~~MAAAV~~,~~OAAA,EAAAA,EAAY4B,~~OAEnBjC,QAAAA,EAECD,WAEO2B,EAAAS,EAAA,CAAApC,SAAA,CAAA6B,EAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SACLK,IACC,IACAI,KAGLJ,IAGPe,IACDS,EAACQ,EAAA,CACGJ,OAAQ7B,KACJI,EACJH,MAAOY,EACPqB,UAAWpB,EACXR,GAAIK,EACJd,QAAAA,MAER,IAKZN,EAAW4C,YAAc"}
1	+ {"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n (props, ref) => {\n const {\n className,\n children,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n render,\n supportLabelProps,\n tooltip,\n id,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-input\", { generateSuffix: !id });\n const supportId = useId(\"jkl-support-label\");\n\n const hasTooltip = !!tooltip;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n const inputProps: InputProps = {\n \"aria-describedby\": describedBy,\n \"aria-invalid\": errorLabel ? true : undefined,\n id: uid,\n };\n\n const renderInput = render\n ? () => render(inputProps)\n : () => {\n const input = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement<InputProps>(input)) return;\n\n return React.cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n });\n };\n\n return (\n <div\n ref={ref}\n className={clsx(className, \"jkl-input-group\", {\n \"jkl-input-group--inline\": inline,\n })}\n data-density={density}\n {...rest}\n >\n <Label\n standAlone\n htmlFor={uid}\n srOnly={inline}\n {...labelProps}\n style={{\n whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n ...labelProps?.style,\n }}\n density={density}\n >\n {hasTooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {label}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n label\n )}\n </Label>\n {renderInput()}\n <SupportLabel\n srOnly={inline}\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n </div>\n );\n },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,GACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAElBG,IAAeP,EAEfQ,EAAcf,GAAcC,EAC5Be,EAAkBhB,EAClB,QACAC,EACE,YACA,EAIFgB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBb,QAAoB,EACpCQ,GAAIE,GAGFQ,EAAcb,EACd,IAAMA,EAAOY,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAEhDsB,GAAAA,EAAMG,eAA2BJ,GAE/BC,OAAAA,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,OACZ,EAIP,OAAA8B,EAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVU,EAEJX,SAAA,CAAA6B,EAACC,EAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ7B,KACJE,EACJ4B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjCV,GAAY4B,OAEnBjC,QAAAA,EAECD,WAEO2B,EAAAS,EAAA,CAAApC,SAAA,CAAA6B,EAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SACLK,IACC,IACAI,KAGLJ,IAGPe,IACDS,EAACQ,EAAA,CACGJ,OAAQ7B,KACJI,EACJH,MAAOY,EACPqB,UAAWpB,EACXR,GAAIK,EACJd,QAAAA,MAER,IAKZN,EAAW4C,YAAc"}

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";import{Flex as s}from"../../flex/Flex.js";const i={title:"Komponenter/Link",component:r,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{href:{control:"text",defaultValue:"https://www.fremtind.no"}}},l={name:"Link",args:{children:"Lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no"},render:t=>e(r,{style:{cursor:"pointer"},...t,as:t.as||"a"})},n={name:"Mønster: Lenke i avsnitt",args:{href:"https://www.fremtind.no"},render:s=>t("p",{style:{maxWidth:"45ch"},children:["Vi bruker lenker for å lede brukeren til"," ",e(r,{...s,external:!1,style:{cursor:"pointer"},children:"andre nettsider"}),", eller til andre steder på samme nettside."," ",e(r,{...s,external:!0,target:"_blank",style:{cursor:"pointer"},children:"Lenker til eksterne nettsider"})," ","markeres med en pil opp og til høyre etter lenketeksten."]})},a={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,style:{cursor:"pointer"}})," i titler"]}),t("h2",{className:"jkl-title-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," 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,style:{cursor:"pointer"}})," i overskrifter"]}),t("h2",{className:"jkl-heading-2",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," i overskrifter"]}),t("h3",{className:"jkl-heading-3",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," i overskrifter"]}),t("h4",{className:"jkl-heading-4",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," i overskrifter"]}),t("h5",{className:"jkl-heading-5",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," 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,style:{cursor:"pointer"}})," i avsnitt"]}),t("small",{className:"jkl-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," i små avsnitt"]})]})};export{a as LinkInOtherStory,n as LinkInParagraphStory,l as LinkStory,i 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{Flex as s}from"../../flex/Flex.js";const i={title:"Komponenter/Link",component:r,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{href:{control:"text",defaultValue:"https://www.fremtind.no"}}},l={name:"Link",args:{children:"Lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no"},render:t=>e(r,{style:{cursor:"pointer"},...t,as:t.as||"a"})},n={name:"Mønster: Lenke i avsnitt",args:{href:"https://www.fremtind.no"},render:s=>t("p",{style:{maxWidth:"45ch"},children:["Vi bruker lenker for å lede brukeren til"," ",e(r,{...s,external:!1,style:{cursor:"pointer"},children:"andre nettsider"}),", eller til andre steder på samme nettside."," ",e(r,{...s,external:!0,target:"_blank",style:{cursor:"pointer"},children:"Lenker til eksterne nettsider"})," ","markeres med en pil opp og til høyre etter lenketeksten."]})},a={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,style:{cursor:"pointer"}})," i titler"]}),t("h2",{className:"jkl-title-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," 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,style:{cursor:"pointer"}})," i overskrifter"]}),t("h2",{className:"jkl-heading-2",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," i overskrifter"]}),t("h3",{className:"jkl-heading-3",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," i overskrifter"]}),t("h4",{className:"jkl-heading-4",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," i overskrifter"]}),t("h5",{className:"jkl-heading-5",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," 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,style:{cursor:"pointer"}})," i avsnitt"]}),t("small",{className:"jkl-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e(r,{...i,style:{cursor:"pointer"}})," i små avsnitt"]})]})};export{a as LinkInOtherStory,n as LinkInParagraphStory,l as LinkStory,i as default};
 //# sourceMappingURL=Link.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.stories.js","sources":["../../../../../src/components/link/stories/Link.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React from \"react\";\nimport {Link} from \"../Link.js\";\nimport \"../styles/_index.scss\";\nimport {Flex} from \"../../flex/index.js\";\n\nconst meta: Meta = {\n title: \"Komponenter/Link\",\n component: Link,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n href: {\n control: \"text\",\n defaultValue: \"https://www.fremtind.no\",\n },\n },\n} satisfies Meta<typeof Link>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const LinkStory: Story = {\n name: \"Link\",\n args: {\n children: \"Lenke\",\n external: false,\n as: \"a\",\n target: \"#\",\n href: \"https://www.fremtind.no\",\n },\n render: (props) => (\n // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n <Link style={{ cursor: \"pointer\" }} {...props} as={props.as \|\| \"a\"} />\n ),\n};\n\nexport const LinkInParagraphStory: Story = {\n name: \"Mønster: Lenke i avsnitt\",\n args: {\n href: \"https://www.fremtind.no\",\n },\n render: (args) => (\n // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n <p style={{maxWidth: \"45ch\"}}>\n Vi bruker lenker for å lede brukeren til{\" \"}\n <Link {...args} external={false} style={{cursor: \"pointer\"}}>\n andre nettsider\n </Link>\n , eller til andre steder på samme nettside.{\" \"}\n <Link\n {...args}\n external={true}\n target={\"_blank\"}\n style={{cursor: \"pointer\"}}\n >\n Lenker til eksterne nettsider\n </Link>{\" \"}\n markeres med en pil opp og til høyre etter lenketeksten.\n </p>\n ),\n};\n\nexport const LinkInOtherStory: Story = {\n name: \"Mønster: Lenke i andre tekststiler\",\n args: {\n children: \"lenke\",\n external: false,\n as: \"a\",\n target: \"#\",\n href: \"https://www.fremtind.no\",\n },\n render: (args) => (\n // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n <Flex direction={\"column\"} style={{gap: \"1.5lh\"}}>\n <h1 className={\"jkl-title\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i titler\n </h1>\n\n <h2 className={\"jkl-title-small\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i små titler\n </h2>\n\n <hr style={{width: \"100%\", opacity: \"0.1\"}}/>\n\n <h2 className={\"jkl-heading-1\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n </h2>\n\n <h2 className={\"jkl-heading-2\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n </h2>\n\n <h3 className={\"jkl-heading-3\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n </h3>\n\n <h4 className={\"jkl-heading-4\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n </h4>\n\n <h5 className={\"jkl-heading-5\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n </h5>\n\n <hr style={{width: \"100%\", opacity: \"0.1\"}}/>\n\n <p className={\"jkl-body\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i avsnitt\n </p>\n\n <small className={\"jkl-small\"} style={{maxWidth: \"55ch\"}}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{cursor: \"pointer\"}}/> i små avsnitt\n </small>\n </Flex>\n ),\n};\n"],"names":["meta","title","component","Link","parameters","layout","tags","argTypes","href","control","defaultValue","LinkStory","name","args","children","external","as","target","render","props","jsx","style","cursor","LinkInParagraphStory","maxWidth","LinkInOtherStory","jsxs","Flex","direction","gap","className","width","opacity"],"mappings":"~~4IAMA~~,MAAMA,EAAa,CACfC,MAAO,mBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,KAAM,CACFC,QAAS,OACTC,aAAc,6BASbC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,SAAU,QACVC,UAAU,EACVC,GAAI,IACJC,OAAQ,IACRT,KAAM,2BAEVU,OAASC,GAEJC,EAAAjB,EAAA,CAAKkB,MAAO,CAAEC,OAAQ,cAAiBH,EAAOH,GAAIG,EAAMH,IAAM,OAI1DO,EAA8B,CACvCX,KAAM,2BACNC,KAAM,CACFL,KAAM,2BAEVU,OAASL,KAEJ,IAAE,CAAAQ,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~2CACe~~,IACzCM,EAACjB,EAAM,IAAGU,EAAME,UAAU,EAAOM,MAAO,~~CAACC~~,OAAQ,~~WAAYR~~,~~SAE7D~~,oBAAO,8CACqC,IAC5CM,EAACjB,EAAA,IACOU,EACJE,UAAU,EACVE,OAAQ,SACRI,MAAO,~~CAACC~~,OAAQ,~~WACnBR~~,SAAA,kCAEO,IAAI,+DAMXW,EAA0B,CACnCb,KAAM,qCACNC,KAAM,CACFC,SAAU,QACVC,UAAU,EACVC,GAAI,IACJC,OAAQ,IACRT,KAAM,2BAEVU,OAASL,GAELa,EAACC,GAAKC,UAAW,SAAUP,MAAO,~~CAACQ~~,IAAK,~~SACpCf~~,SAAA,CAAAY,EAAC,MAAGI,UAAW,YAAaT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BACzB~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~,~~eAGjDI~~,EAAC,MAAGI,UAAW,kBAAmBT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BAC/B~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~,~~mBAGjDF~~,EAAC,MAAGC,MAAO,~~CAACU~~,MAAO,OAAQC,QAAS,~~SAEpCN~~,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BAC7B~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~,~~qBAGjDI~~,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BAC7B~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~,~~qBAGjDI~~,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BAC7B~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~,~~qBAGjDI~~,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BAC7B~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~,~~qBAGjDI~~,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BAC7B~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~,~~qBAGjDF~~,EAAC,MAAGC,MAAO,~~CAACU~~,MAAO,OAAQC,QAAS,~~SAEpCN~~,EAAC,KAAEI,UAAW,WAAYT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BACvB~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~,~~gBAGjDI~~,EAAC,SAAMI,UAAW,YAAaT,MAAO,~~CAACG~~,SAAU,~~QAASV~~,SAAA,CAAA,~~4BAC5B~~,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,~~CAACC~~,OAAQ,~~aAAa~~"}
1	+ {"version":3,"file":"Link.stories.js","sources":["../../../../../src/components/link/stories/Link.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Link } from \"../Link.js\";\nimport \"../styles/_index.scss\";\nimport { Flex } from \"../../flex/index.js\";\n\nconst meta: Meta = {\n title: \"Komponenter/Link\",\n component: Link,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n href: {\n control: \"text\",\n defaultValue: \"https://www.fremtind.no\",\n },\n },\n} satisfies Meta<typeof Link>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const LinkStory: Story = {\n name: \"Link\",\n args: {\n children: \"Lenke\",\n external: false,\n as: \"a\",\n target: \"#\",\n href: \"https://www.fremtind.no\",\n },\n render: (props) => (\n // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n <Link style={{ cursor: \"pointer\" }} {...props} as={props.as \|\| \"a\"} />\n ),\n};\n\nexport const LinkInParagraphStory: Story = {\n name: \"Mønster: Lenke i avsnitt\",\n args: {\n href: \"https://www.fremtind.no\",\n },\n render: (args) => (\n // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n <p style={{ maxWidth: \"45ch\" }}>\n Vi bruker lenker for å lede brukeren til{\" \"}\n <Link {...args} external={false} style={{ cursor: \"pointer\" }}>\n andre nettsider\n </Link>\n , eller til andre steder på samme nettside.{\" \"}\n <Link\n {...args}\n external={true}\n target={\"_blank\"}\n style={{ cursor: \"pointer\" }}\n >\n Lenker til eksterne nettsider\n </Link>{\" \"}\n markeres med en pil opp og til høyre etter lenketeksten.\n </p>\n ),\n};\n\nexport const LinkInOtherStory: Story = {\n name: \"Mønster: Lenke i andre tekststiler\",\n args: {\n children: \"lenke\",\n external: false,\n as: \"a\",\n target: \"#\",\n href: \"https://www.fremtind.no\",\n },\n render: (args) => (\n // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n <Flex direction={\"column\"} style={{ gap: \"1.5lh\" }}>\n <h1 className={\"jkl-title\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i titler\n </h1>\n\n <h2 className={\"jkl-title-small\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i små titler\n </h2>\n\n <hr style={{ width: \"100%\", opacity: \"0.1\" }} />\n\n <h2 className={\"jkl-heading-1\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n </h2>\n\n <h2 className={\"jkl-heading-2\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n </h2>\n\n <h3 className={\"jkl-heading-3\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n </h3>\n\n <h4 className={\"jkl-heading-4\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n </h4>\n\n <h5 className={\"jkl-heading-5\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n </h5>\n\n <hr style={{ width: \"100%\", opacity: \"0.1\" }} />\n\n <p className={\"jkl-body\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i avsnitt\n </p>\n\n <small className={\"jkl-small\"} style={{ maxWidth: \"55ch\" }}>\n Du står fritt til å bruke{\" \"}\n <Link {...args} style={{ cursor: \"pointer\" }} /> i små avsnitt\n </small>\n </Flex>\n ),\n};\n"],"names":["meta","title","component","Link","parameters","layout","tags","argTypes","href","control","defaultValue","LinkStory","name","args","children","external","as","target","render","props","jsx","style","cursor","LinkInParagraphStory","maxWidth","LinkInOtherStory","jsxs","Flex","direction","gap","className","width","opacity"],"mappings":"mLAMA,MAAMA,EAAa,CACfC,MAAO,mBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,KAAM,CACFC,QAAS,OACTC,aAAc,6BASbC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,SAAU,QACVC,UAAU,EACVC,GAAI,IACJC,OAAQ,IACRT,KAAM,2BAEVU,OAASC,GAEJC,EAAAjB,EAAA,CAAKkB,MAAO,CAAEC,OAAQ,cAAiBH,EAAOH,GAAIG,EAAMH,IAAM,OAI1DO,EAA8B,CACvCX,KAAM,2BACNC,KAAM,CACFL,KAAM,2BAEVU,OAASL,KAEJ,IAAE,CAAAQ,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,2CACa,IACzCM,EAACjB,EAAM,IAAGU,EAAME,UAAU,EAAOM,MAAO,CAAEC,OAAQ,WAAaR,SAE/D,oBAAO,8CACqC,IAC5CM,EAACjB,EAAA,IACOU,EACJE,UAAU,EACVE,OAAQ,SACRI,MAAO,CAAEC,OAAQ,WACpBR,SAAA,kCAEO,IAAI,+DAMXW,EAA0B,CACnCb,KAAM,qCACNC,KAAM,CACFC,SAAU,QACVC,UAAU,EACVC,GAAI,IACJC,OAAQ,IACRT,KAAM,2BAEVU,OAASL,GAELa,EAACC,GAAKC,UAAW,SAAUP,MAAO,CAAEQ,IAAK,SACrCf,SAAA,CAAAY,EAAC,MAAGI,UAAW,YAAaT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC3B,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,eAGpDI,EAAC,MAAGI,UAAW,kBAAmBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BACjC,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,mBAGpDF,EAAC,MAAGC,MAAO,CAAEU,MAAO,OAAQC,QAAS,SAErCN,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDI,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDI,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDI,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDI,EAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDF,EAAC,MAAGC,MAAO,CAAEU,MAAO,OAAQC,QAAS,SAErCN,EAAC,KAAEI,UAAW,WAAYT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BACzB,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,gBAGpDI,EAAC,SAAMI,UAAW,YAAaT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC9B,IAC1BM,EAACjB,MAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe"}

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 k}from"../skeletons/SkeletonTable.js";import{SkeletonTextArea as h}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(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(k,{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};
 //# 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 u,useInteractions as d,useHover as c,useClick as m,useDismiss as p,useRole as f,useListNavigation as g,safePolygon as h,useMergeRefs as v,useTransitionStyles as y,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((()=>null==W?void 0: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}),u({padding:8})],whileElementsMounted:r}),{getReferenceProps:ie,getFloatingProps:le,getItemProps:ue}=d([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})]),de=v([ne.setReference,E]),{theme:ce,density:me}=O(ne.reference.current),{isMounted:pe,styles:fe}=y(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:de,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,ue({...e.props,tabIndex:Y===s?0:-1,role:"menuitem",ref(e){X.current[s]=e},onClick(s){var t,n;null==(n=(t=e.props).onClick)||n.call(t,s),!s.defaultPrevented&&(null==z||z.events.emit("click"))},onKeyDown(s){var t,n;null==(n=(t=e.props).onKeyDown)||n.call(t,s),!s.defaultPrevented&&(null==z||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 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};
 //# sourceMappingURL=Menu.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.js","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n type Side,\n autoUpdate,\n flip,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { isForwardRef } from \"react-is\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.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\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = useId(\"jkl-menu\");\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement \|\| (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen 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 { theme, density } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\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 return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) &&\n (triggerElement.type === \"button\" \|\|\n isForwardRef(triggerElement))\n ? // Dersom trigger-elementet er en knapp, sett riktige egenskaper på det\n React.cloneElement(triggerElement, {\n ...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n }),\n })\n : // Ellers, rendre elementet as-is, uten interaktivitet. Krev en ferdig brukbar button for å åpne menyen.\n triggerElement}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-layout-density={density}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (\n React.isValidElement(child) &&\n isForwardRef(child)\n ) {\n return React.cloneElement(\n child,\n getItemProps({\n ...child.props,\n tabIndex:\n activeIndex === index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n child.props.onClick?.(\n event as React.MouseEvent<HTMLButtonElement>,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event.currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(false);\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n }),\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","type","isForwardRef","cloneElement","ref","onClick","stopPropagation","FloatingPortal","jsx","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","_b","_a","call","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}
1	+ {"version":3,"file":"Menu.js","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n type Side,\n autoUpdate,\n flip,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { isForwardRef } from \"react-is\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.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\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = useId(\"jkl-menu\");\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement \|\| (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen 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 { theme, density } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\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 return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) &&\n (triggerElement.type === \"button\" \|\|\n isForwardRef(triggerElement))\n ? // Dersom trigger-elementet er en knapp, sett riktige egenskaper på det\n React.cloneElement(triggerElement, {\n ...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n }),\n })\n : // Ellers, rendre elementet as-is, uten interaktivitet. Krev en ferdig brukbar button for å åpne menyen.\n triggerElement}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-layout-density={density}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (\n React.isValidElement(child) &&\n isForwardRef(child)\n ) {\n return React.cloneElement(\n child,\n getItemProps({\n ...child.props,\n tabIndex:\n activeIndex === index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n child.props.onClick?.(\n event as React.MouseEvent<HTMLButtonElement>,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event.currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(false);\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n }),\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","type","isForwardRef","cloneElement","ref","onClick","stopPropagation","FloatingPortal","jsx","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import{forwardRef as i}from"react";import{useSwipeGesture as l}from"../../hooks/useSwipeGesture/useSwipeGesture.js";import{CheckIcon as t}from"../icon/icons/CheckIcon.js";const s=i(((i,s)=>{const{"aria-checked":c,className:r,children:a,icon:m,onChange:d,onClick:u,onPointerCancel:h,onPointerDown:k,onPointerMove:g,onPointerUp:w,onKeyDown:j,...p}=i,{gestureHandlers:v}=l({onClick:e=>{e.preventDefault(),null==d||d(e,!c),null==u||u(e)},onChange:(e,n)=>{n!==c&&(null==d||d(e,n))},onPointerCancel:h,onPointerDown:k,onPointerMove:g,onPointerUp:w});return e("div",{ref:s,tabIndex:-1,...p,role:"menuitemcheckbox","aria-checked":c,className:o("jkl-menu-item","jkl-menu-item--checkbox",r),...v,onKeyDown:e=>{"Enter"===e.key?null==d||d(e,!c):" "===e.key&&(e.preventDefault(),null==d||d(e,!c)),null==j||j(e)},children:[m&&n("span",{className:"jkl-menu-item__icon",children:m}),n("div",{className:"jkl-menu-item__content",children:a}),n("div",{className:"jkl-toggle-switch",children:n("div",{className:"jkl-toggle-switch-widget",children:e("div",{className:"jkl-toggle-switch-widget__slider",children:[n("div",{className:"jkl-toggle-switch-widget__knob"}),n(t,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})})]})}));s.displayName="MenuItemCheckbox";export{s as MenuItemCheckbox};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import{forwardRef as i}from"react";import{useSwipeGesture as t}from"../../hooks/useSwipeGesture/useSwipeGesture.js";import{CheckIcon as s}from"../icon/icons/CheckIcon.js";const c=i(((i,c)=>{const{"aria-checked":r,className:a,children:l,icon:m,onChange:d,onClick:h,onPointerCancel:k,onPointerDown:u,onPointerMove:g,onPointerUp:w,onKeyDown:j,...p}=i,{gestureHandlers:v}=t({onClick:e=>{e.preventDefault(),d?.(e,!r),h?.(e)},onChange:(e,n)=>{n!==r&&d?.(e,n)},onPointerCancel:k,onPointerDown:u,onPointerMove:g,onPointerUp:w});return e("div",{ref:c,tabIndex:-1,...p,role:"menuitemcheckbox","aria-checked":r,className:o("jkl-menu-item","jkl-menu-item--checkbox",a),...v,onKeyDown:e=>{"Enter"===e.key?d?.(e,!r):" "===e.key&&(e.preventDefault(),d?.(e,!r)),j?.(e)},children:[m&&n("span",{className:"jkl-menu-item__icon",children:m}),n("div",{className:"jkl-menu-item__content",children:l}),n("div",{className:"jkl-toggle-switch",children:n("div",{className:"jkl-toggle-switch-widget",children:e("div",{className:"jkl-toggle-switch-widget__slider",children:[n("div",{className:"jkl-toggle-switch-widget__knob"}),n(s,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})})]})}));c.displayName="MenuItemCheckbox";export{c as MenuItemCheckbox};
 //# sourceMappingURL=MenuItemCheckbox.js.map

package/build/es/components/menu/MenuItemCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItemCheckbox.js","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n forwardRef,\n type KeyboardEventHandler,\n type MouseEventHandler,\n} from \"react\";\nimport {\n type SwipeChangeHandler,\n useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport type { MenuItemCheckboxProps } from \"./types.js\";\n\nexport const MenuItemCheckbox = forwardRef<\n HTMLDivElement,\n MenuItemCheckboxProps\n>((props, ref) => {\n const {\n \"aria-checked\": checked,\n className,\n children,\n icon,\n onChange,\n onClick,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n onKeyDown,\n ...rest\n } = props;\n\n const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n event.preventDefault(); // Prevents the menu from closing on toggle\n onChange?.(event, !checked);\n onClick?.(event);\n };\n\n const handleChange: SwipeChangeHandler<HTMLDivElement> = (\n event,\n toggleTo,\n ) => {\n if (toggleTo !== checked) {\n onChange?.(event, toggleTo);\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n if (event.key === \"Enter\") {\n onChange?.(event, !checked);\n } else if (event.key === \" \") {\n event.preventDefault(); // Prevents the menu from closing on toggle, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n onChange?.(event, !checked);\n }\n onKeyDown?.(event);\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <div\n ref={ref}\n tabIndex={-1}\n {...rest}\n role=\"menuitemcheckbox\"\n aria-checked={checked}\n className={clsx(\n \"jkl-menu-item\",\n \"jkl-menu-item--checkbox\",\n className,\n )}\n {...gestureHandlers}\n onKeyDown={handleKeyDown}\n >\n {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n <div className=\"jkl-menu-item__content\">{children}</div>\n <div className=\"jkl-toggle-switch\">\n <div className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon\n variant=\"small\"\n bold\n className=\"jkl-toggle-switch-widget__indicator\"\n />\n </div>\n </div>\n </div>\n </div>\n );\n});\n\nMenuItemCheckbox.displayName = \"MenuItemCheckbox\";\n"],"names":["MenuItemCheckbox","forwardRef","props","ref","checked","className","children","icon","onChange","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","onKeyDown","rest","gestureHandlers","useSwipeGesture","event","preventDefault","toggleTo","jsxs","tabIndex","role","clsx","key","jsx","CheckIcon","variant","bold","displayName"],"mappings":"2QAaO,MAAMA,EAAmBC,GAG9B,CAACC,EAAOC,KACA,MACF,eAAgBC,EAChBC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,UAAAA,KACGC,GACHb,GA2BIc,gBAAAA,GAAoBC,EAAgB,CACxCR,QA1BoDS,IACpDA,EAAMC,~~iBACK~~,~~MAAAX~~,~~GAAAA,EAAAU,~~GAAQd,~~GACnB~~,~~MAAAK~~,~~GAAAA~~,~~EAAUS~~,~~EAAAA,EAwBVV,~~SArBqD,CACrDU,EACAE,KAEIA,IAAahB,~~IACb~~,~~MAAAI~~,~~GAAAA,EAAWU,~~EAAOE,~~GAAAA~~,~~EAiBtBV~~,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EACP,gBACA,0BACAnB,MAEAW,EACJF,UAhCqDI,IACvC,UAAdA,EAAMO,~~IACK~~,~~MAAAjB~~,~~GAAAA,EAAAU,~~GAAQd,GACE,MAAdc,EAAMO,MACbP,EAAMC,~~iBACK~~,~~MAAAX~~,~~GAAAA,EAAAU,~~GAAQd,~~IAEvB~~,~~MAAAU~~,~~GAAAA~~,~~EAAYI~~,~~EAAAA,EA2BPZ,~~SAAA,CAAAC,GAASmB,EAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,EAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAA,MAAA,CAAIrB,UAAU,mCACfqB,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJxB,UAAU,iDAK9B,IAIRL,EAAiB8B,YAAc"}
1	+ {"version":3,"file":"MenuItemCheckbox.js","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n forwardRef,\n type KeyboardEventHandler,\n type MouseEventHandler,\n} from \"react\";\nimport {\n type SwipeChangeHandler,\n useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport type { MenuItemCheckboxProps } from \"./types.js\";\n\nexport const MenuItemCheckbox = forwardRef<\n HTMLDivElement,\n MenuItemCheckboxProps\n>((props, ref) => {\n const {\n \"aria-checked\": checked,\n className,\n children,\n icon,\n onChange,\n onClick,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n onKeyDown,\n ...rest\n } = props;\n\n const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n event.preventDefault(); // Prevents the menu from closing on toggle\n onChange?.(event, !checked);\n onClick?.(event);\n };\n\n const handleChange: SwipeChangeHandler<HTMLDivElement> = (\n event,\n toggleTo,\n ) => {\n if (toggleTo !== checked) {\n onChange?.(event, toggleTo);\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n if (event.key === \"Enter\") {\n onChange?.(event, !checked);\n } else if (event.key === \" \") {\n event.preventDefault(); // Prevents the menu from closing on toggle, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n onChange?.(event, !checked);\n }\n onKeyDown?.(event);\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <div\n ref={ref}\n tabIndex={-1}\n {...rest}\n role=\"menuitemcheckbox\"\n aria-checked={checked}\n className={clsx(\n \"jkl-menu-item\",\n \"jkl-menu-item--checkbox\",\n className,\n )}\n {...gestureHandlers}\n onKeyDown={handleKeyDown}\n >\n {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n <div className=\"jkl-menu-item__content\">{children}</div>\n <div className=\"jkl-toggle-switch\">\n <div className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon\n variant=\"small\"\n bold\n className=\"jkl-toggle-switch-widget__indicator\"\n />\n </div>\n </div>\n </div>\n </div>\n );\n});\n\nMenuItemCheckbox.displayName = \"MenuItemCheckbox\";\n"],"names":["MenuItemCheckbox","forwardRef","props","ref","checked","className","children","icon","onChange","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","onKeyDown","rest","gestureHandlers","useSwipeGesture","event","preventDefault","toggleTo","jsxs","tabIndex","role","clsx","key","jsx","CheckIcon","variant","bold","displayName"],"mappings":"2QAaO,MAAMA,EAAmBC,GAG9B,CAACC,EAAOC,KACA,MACF,eAAgBC,EAChBC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,UAAAA,KACGC,GACHb,GA2BIc,gBAAAA,GAAoBC,EAAgB,CACxCR,QA1BoDS,IACpDA,EAAMC,iBACKX,IAAAU,GAAQd,GACnBK,IAAUS,EAAK,EAwBfV,SArBqD,CACrDU,EACAE,KAEIA,IAAahB,GACbI,IAAWU,EAAOE,EAAQ,EAiB9BV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EACP,gBACA,0BACAnB,MAEAW,EACJF,UAhCqDI,IACvC,UAAdA,EAAMO,IACKjB,IAAAU,GAAQd,GACE,MAAdc,EAAMO,MACbP,EAAMC,iBACKX,IAAAU,GAAQd,IAEvBU,IAAYI,EAAK,EA2BZZ,SAAA,CAAAC,GAASmB,EAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,EAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAA,MAAA,CAAIrB,UAAU,mCACfqB,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJxB,UAAU,iDAK9B,IAIRL,EAAiB8B,YAAc"}

package/build/es/components/message/Message.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import n,{forwardRef as i}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{ErrorIcon as o}from"../icon/icons/ErrorIcon.js";import{InfoIcon as c}from"../icon/icons/InfoIcon.js";import{SuccessIcon as l}from"../icon/icons/SuccessIcon.js";import{WarningIcon as t}from"../icon/icons/WarningIcon.js";import{DismissButton as m}from"./DismissButton.js";const d=e=>{switch(e){case"error":return s(o,{className:"jkl-message__icon"});case"info":return s(c,{className:"jkl-message__icon"});case"success":return s(l,{className:"jkl-message__icon"});case"warning":return s(t,{className:"jkl-message__icon"});default:return null}};function g(o){const c=i(((i,c)=>{const{id:l,title:t,fullWidth:g,density:u,className:f="",dismissed:j,dismissAction:p,children:k,role:h,..._}=i,I=r(l||"jkl-message",{generateSuffix:!l}),N=n.Children.map(k,(s=>"string"==typeof s)),M=null!=N&&N[0]?s("p",{children:k}):k;return e("div",{..._,id:l,ref:c,className:a("jkl-message",`jkl-message--${o}`,f,{"jkl-message--full":g,"jkl-message--dismissed":j}),role:h,"data-density":u,children:[d(o),e("div",{className:"jkl-message__content","data-theme":"light",children:[t&&s("p",{className:"jkl-message__title",children:t}),s("div",{className:"jkl-message__message",children:M})]}),(null==p?void 0:p.handleDismiss)&&s(m,{"data-theme":"light","aria-controls":I,className:"jkl-message__dismiss-button",label:p.buttonTitle||"Lukk",onClick:p.handleDismiss})]})}));return c.displayName="Message",c}const u=g("info");u.displayName="InfoMessage";const f=g("error");f.displayName="ErrorMessage";const j=g("warning");j.displayName="WarningMessage";const p=g("success");p.displayName="SuccessMessage";export{f as ErrorMessage,u as InfoMessage,p as SuccessMessage,j as WarningMessage};
+import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as n}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{ErrorIcon as o}from"../icon/icons/ErrorIcon.js";import{InfoIcon as c}from"../icon/icons/InfoIcon.js";import{SuccessIcon as t}from"../icon/icons/SuccessIcon.js";import{WarningIcon as m}from"../icon/icons/WarningIcon.js";import{DismissButton as l}from"./DismissButton.js";const d=e=>{switch(e){case"error":return s(o,{className:"jkl-message__icon"});case"info":return s(c,{className:"jkl-message__icon"});case"success":return s(t,{className:"jkl-message__icon"});case"warning":return s(m,{className:"jkl-message__icon"});default:return null}};function g(o){const c=n(((n,c)=>{const{id:t,title:m,fullWidth:g,density:u,className:f="",dismissed:j,dismissAction:p,children:k,role:h,..._}=n,I=r(t||"jkl-message",{generateSuffix:!t}),N=i.Children.map(k,(s=>"string"==typeof s))?.[0]?s("p",{children:k}):k;return e("div",{..._,id:t,ref:c,className:a("jkl-message",`jkl-message--${o}`,f,{"jkl-message--full":g,"jkl-message--dismissed":j}),role:h,"data-density":u,children:[d(o),e("div",{className:"jkl-message__content","data-theme":"light",children:[m&&s("p",{className:"jkl-message__title",children:m}),s("div",{className:"jkl-message__message",children:N})]}),p?.handleDismiss&&s(l,{"data-theme":"light","aria-controls":I,className:"jkl-message__dismiss-button",label:p.buttonTitle||"Lukk",onClick:p.handleDismiss})]})}));return c.displayName="Message",c}const u=g("info");u.displayName="InfoMessage";const f=g("error");f.displayName="ErrorMessage";const j=g("warning");j.displayName="WarningMessage";const p=g("success");p.displayName="SuccessMessage";export{f as ErrorMessage,u as InfoMessage,p as SuccessMessage,j as WarningMessage};
 //# sourceMappingURL=Message.js.map

package/build/es/components/message/Message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\ntype messageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\nconst getIcon = (messageType: messageTypes) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-message__icon\" />;\n default:\n return null;\n }\n};\n\nfunction messageFactory(messageType: messageTypes) {\n const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n const {\n id,\n title,\n fullWidth,\n density,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n role,\n ...rest\n } = props;\n\n const boxId = useId(id \|\| \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n `jkl-message--${messageType}`,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n data-density={density}\n >\n {getIcon(messageType)}\n <div className=\"jkl-message__content\" data-theme=\"light\">\n {title && <p className=\"jkl-message__title\">{title}</p>}\n <div className=\"jkl-message__message\">{newChildren}</div>\n </div>\n {dismissAction?.handleDismiss && (\n <DismissButton\n data-theme=\"light\"\n aria-controls={boxId}\n className=\"jkl-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n );\n });\n\n Message.displayName = \"Message\";\n\n return Message;\n}\n\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","density","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","~~hasStringChild~~","React","Children","map","child","~~newChildren","~~jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cAYA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,sBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,sBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,sBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,sBAClC,QACW,OAAA,KAAA,EAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,GAAyC,CAACC,EAAOC,KACvD,MACFC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAZ,UAAAA,EAAY,GACZa,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHV,EAEEW,EAAQC,EAAMV,GAAM,cAAe,CAAEW,gBAAiBX,~~IAEtDY~~,~~EAAiBC~~,EAAMC,SAASC,IAClCT,GACCU,GAA2B,iBAAVA,~~IAEhBC~~,~~EAAc~~,~~MAAAL,GAAAA,EAAiB,GAAMvB,~~EAAA,IAAA,CAAGiB,SAAAA,IAAgBA,EAG1D,~~OAAAY~~,EAAC,MAAA,~~IACOV~~,EACJR,GAAAA,EACAD,IAAAA,EACAR,~~UAAW4B~~,EACP,cACA,~~gBAAgB/B~~,IAChBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BE,IAGlCG,KAAAA,EACA,eAAcJ,EAEbG,SAAA,CAAAnB,EAAQC,~~GACR8B~~,EAAA,MAAA,~~CAAI3B~~,UAAU,uBAAuB,aAAW,QAC5Ce,SAAA,CAAAL,GAAUZ,EAAA,IAAA,CAAEE,UAAU,qBAAsBe,SAAML,IAClDZ,EAAA,MAAA,CAAIE,UAAU,uBAAwBe,~~SAAYW~~,~~QAEtD~~,~~MAAAZ~~,~~OAAA~~,~~EAAAA,EAAee,gBACZ/~~B,~~EAACgC,~~EAAA,CACG,aAAW,QACX,~~gBAAeZ~~,EACflB,UAAU,~~8BACV+B~~,~~MAAOjB~~,~~EAAckB~~,aAAe,OACpCC,~~QAASnB~~,~~EAAce~~,kBAGnC,~~IAIRxB~~,OAAAA,~~EAAQ6B~~,YAAc,~~UAEf7B~~,CACX,CAEa,~~MAAA8B~~,~~EAAc/B~~,EAAe,~~QAC1C+B~~,EAAYD,YAAc,cACb,MAAAE,~~EAAehC~~,EAAe,~~SAC3CgC~~,EAAaF,YAAc,eACd,MAAAG,~~EAAiBjC~~,EAAe,~~WAC7CiC~~,EAAeH,YAAc,iBAChB,MAAAI,~~EAAiBlC~~,EAAe,~~WAC7CkC~~,EAAeJ,YAAc"}
1	+ {"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\ntype messageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\nconst getIcon = (messageType: messageTypes) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-message__icon\" />;\n default:\n return null;\n }\n};\n\nfunction messageFactory(messageType: messageTypes) {\n const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n const {\n id,\n title,\n fullWidth,\n density,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n role,\n ...rest\n } = props;\n\n const boxId = useId(id \|\| \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n `jkl-message--${messageType}`,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n data-density={density}\n >\n {getIcon(messageType)}\n <div className=\"jkl-message__content\" data-theme=\"light\">\n {title && <p className=\"jkl-message__title\">{title}</p>}\n <div className=\"jkl-message__message\">{newChildren}</div>\n </div>\n {dismissAction?.handleDismiss && (\n <DismissButton\n data-theme=\"light\"\n aria-controls={boxId}\n className=\"jkl-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n );\n });\n\n Message.displayName = \"Message\";\n\n return Message;\n}\n\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","density","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cAYA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,sBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,sBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,sBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,sBAClC,QACW,OAAA,KAAA,EAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,GAAyC,CAACC,EAAOC,KACvD,MACFC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAZ,UAAAA,EAAY,GACZa,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHV,EAEEW,EAAQC,EAAMV,GAAM,cAAe,CAAEW,gBAAiBX,IAMtDY,EAJiBC,EAAMC,SAASC,IAClCT,GACCU,GAA2B,iBAAVA,MAEe,GAAM3B,EAAA,IAAA,CAAGiB,SAAAA,IAAgBA,EAG1D,OAAAW,EAAC,MAAA,IACOT,EACJR,GAAAA,EACAD,IAAAA,EACAR,UAAW2B,EACP,cACA,gBAAgB9B,IAChBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BE,IAGlCG,KAAAA,EACA,eAAcJ,EAEbG,SAAA,CAAAnB,EAAQC,GACR6B,EAAA,MAAA,CAAI1B,UAAU,uBAAuB,aAAW,QAC5Ce,SAAA,CAAAL,GAAUZ,EAAA,IAAA,CAAEE,UAAU,qBAAsBe,SAAML,IAClDZ,EAAA,MAAA,CAAIE,UAAU,uBAAwBe,SAAYM,OAEtDP,GAAec,eACZ9B,EAAC+B,EAAA,CACG,aAAW,QACX,gBAAeX,EACflB,UAAU,8BACV8B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,kBAGnC,IAIRvB,OAAAA,EAAQ4B,YAAc,UAEf5B,CACX,CAEa,MAAA6B,EAAc9B,EAAe,QAC1C8B,EAAYD,YAAc,cACb,MAAAE,EAAe/B,EAAe,SAC3C+B,EAAaF,YAAc,eACd,MAAAG,EAAiBhC,EAAe,WAC7CgC,EAAeH,YAAc,iBAChB,MAAAI,EAAiBjC,EAAe,WAC7CiC,EAAeJ,YAAc"}

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

@@ -7,7 +7,7 @@ declare const meta: {
         onClick: () => void;
     } & {
         "aria-label": string;
-    }, "onClick"> & import('../types.js').BaseModalProps & import('../../index.js').IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    }, "onClick"> & import('../types.js').BaseModalProps & import('../../icon-button/types.js').IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         layout: string;
     };

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

@@ -1,2 +1,2 @@
-/* empty css                         */import{ModalOverlay as l}from"../Modal.js";const o={title:"Komponenter/Modal/ModalOverlay",component:l,parameters:{layout:"centered"},tags:["autodocs"]};let a=null;const e={args:{dialogRef:l=>{a=l},onCancel:()=>{console.log("❌ Cancel"),null==a||a.hide()},onClick:()=>{var l,o;null==(o=null==(l=e.args)?void 0:l.onCancel)||o.call(l)}}};export{e as ModalOverlay,o as default};
+/* empty css                         */import{ModalOverlay as o}from"../Modal.js";const a={title:"Komponenter/Modal/ModalOverlay",component:o,parameters:{layout:"centered"},tags:["autodocs"]};let e=null;const l={args:{dialogRef:o=>{e=o},onCancel:()=>{console.log("❌ Cancel"),e?.hide()},onClick:()=>{l.args?.onCancel?.()}}};export{l as ModalOverlay,a as default};
 //# sourceMappingURL=ModalOverlay.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalOverlay.stories.js","sources":["../../../../../src/components/modal/stories/ModalOverlay.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport \"../styles/_index.scss\";\nimport { ModalOverlay as ModalOverlayComponent } from \"../Modal.js\";\nimport type { ModalInstance } from \"../useModal.js\";\n\ninterface ExtendedModalComponentProps {\n dialogRef: React.RefCallback<ModalInstance>;\n onClick?: () => void;\n onCancel?: () => void;\n}\n\nconst meta = {\n title: \"Komponenter/Modal/ModalOverlay\",\n component: ModalOverlayComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<ExtendedModalComponentProps>;\n\nexport default meta;\n\ntype Story = StoryObj<ExtendedModalComponentProps>;\n\nlet modalRef: ModalInstance \| null = null;\n\nexport const ModalOverlay: Story = {\n args: {\n dialogRef: (instance: ModalInstance \| null) => {\n modalRef = instance;\n },\n onCancel: () => {\n console.log(\"❌ Cancel\");\n modalRef?.hide();\n },\n onClick: () => {\n ModalOverlay.args?.onCancel?.();\n },\n },\n};\n"],"names":["meta","title","component","ModalOverlayComponent","parameters","layout","tags","modalRef","ModalOverlay","args","dialogRef","instance","onCancel","console","log","hide","onClick"~~,"_b","_a","call"~~],"mappings":"kFAWA,MAAMA,EAAO,CACTC,MAAO,iCACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOX,IAAIC,EAAiC,KAE9B,MAAMC,EAAsB,CAC/BC,KAAM,CACFC,UAAYC,IACGJ,EAAAI,CAAAA,EAEfC,SAAU,KACNC,QAAQC,IAAI,~~YACZ~~,~~MAAAP~~,~~GAAAA~~,~~EAAUQ~~,~~MAAA,EAEdC,~~QAAS,~~aACL~~,~~OAAAC,EAAA,OAAAC,EAAAV,~~EAAaC,~~aAAbS~~,~~EAAmBN,WAAnBK,EAAAE,KAAAD,EAAAA~~"}
1	+ {"version":3,"file":"ModalOverlay.stories.js","sources":["../../../../../src/components/modal/stories/ModalOverlay.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport \"../styles/_index.scss\";\nimport { ModalOverlay as ModalOverlayComponent } from \"../Modal.js\";\nimport type { ModalInstance } from \"../useModal.js\";\n\ninterface ExtendedModalComponentProps {\n dialogRef: React.RefCallback<ModalInstance>;\n onClick?: () => void;\n onCancel?: () => void;\n}\n\nconst meta = {\n title: \"Komponenter/Modal/ModalOverlay\",\n component: ModalOverlayComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<ExtendedModalComponentProps>;\n\nexport default meta;\n\ntype Story = StoryObj<ExtendedModalComponentProps>;\n\nlet modalRef: ModalInstance \| null = null;\n\nexport const ModalOverlay: Story = {\n args: {\n dialogRef: (instance: ModalInstance \| null) => {\n modalRef = instance;\n },\n onCancel: () => {\n console.log(\"❌ Cancel\");\n modalRef?.hide();\n },\n onClick: () => {\n ModalOverlay.args?.onCancel?.();\n },\n },\n};\n"],"names":["meta","title","component","ModalOverlayComponent","parameters","layout","tags","modalRef","ModalOverlay","args","dialogRef","instance","onCancel","console","log","hide","onClick"],"mappings":"kFAWA,MAAMA,EAAO,CACTC,MAAO,iCACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOX,IAAIC,EAAiC,KAE9B,MAAMC,EAAsB,CAC/BC,KAAM,CACFC,UAAYC,IACGJ,EAAAI,CAAAA,EAEfC,SAAU,KACNC,QAAQC,IAAI,YACZP,GAAUQ,MAAK,EAEnBC,QAAS,KACLR,EAAaC,MAAMG,YAAW"}