@fremtind/jokul 0.71.1 → 1.0.0

package/build/es/components/feedback/questions/SmileyQuestion.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmileyQuestion.js","sources":["../../../../../src/components/feedback/questions/SmileyQuestion.tsx"],"sourcesContent":["import React, {\n    type ChangeEventHandler,\n    Fragment,\n    useId,\n    useMemo,\n} from \"react\";\nimport { FieldGroup } from \"../../input-group/FieldGroup.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackOption, QuestionProps } from \"../types.js\";\nimport { defaultOptions, getSmiley } from \"./smileyUtils.js\";\n\nconst isNotInScale = (option: FeedbackOption) =>\n    typeof option.value !== \"number\" || ![1, 2, 3, 4, 5].includes(option.value);\n\nexport const SmileyQuestion: React.FC<QuestionProps> = ({\n    label,\n    name = \"smiley\",\n    helpLabel,\n    options = defaultOptions,\n}) => {\n    const followupContext = useFollowUpContext();\n    const feedbackContext = useMainQuestionContext();\n    const context = followupContext || feedbackContext;\n    const id = useId();\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n        console.log(e.target.value);\n        const option = options?.find(\n            (option) => option.value.toString() === e.target.value,\n        );\n        context?.setCurrentValue(option);\n    };\n\n    const selectedValue = useMemo(\n        () =>\n            Array.isArray(context?.currentValue)\n                ? context?.currentValue[0].value\n                : context?.currentValue?.value,\n        [context?.currentValue],\n    );\n\n    if (options.some(isNotInScale)) {\n        console.error(\n            \"SmileyQuestion må ha tallene 1 til 5 som verdier for alternativene sine\",\n        );\n        return null;\n    }\n\n    if (!context || !options) {\n        console.error(\n            \"Questions must be used inside a Followup or Feedback context provider\",\n        );\n        return null;\n    }\n\n    return (\n        <FieldGroup\n            labelProps={{ variant: \"large\" }}\n            legend={label}\n            helpLabel={helpLabel}\n        >\n            <div className=\"jkl-feedback-smileys\">\n                {options.map((option) => (\n                    <Fragment key={option.value}>\n                        <input\n                            className=\"jkl-sr-only\"\n                            id={`${id}-${name}-${option.value}`}\n                            name={`${id}-${name}`}\n                            type=\"radio\"\n                            value={option.value}\n                            onChange={handleChange}\n                            checked={selectedValue === option.value}\n                        />\n                        <label\n                            className=\"jkl-feedback-smiley-option\"\n                            htmlFor={`${id}-${name}-${option.value}`}\n                        >\n                            <span className=\"jkl-sr-only\">{option.label}</span>\n                            {getSmiley(Number(option.value))}\n                        </label>\n                    </Fragment>\n                ))}\n            </div>\n        </FieldGroup>\n    );\n};\n"],"names":["isNotInScale","option","value","includes","SmileyQuestion","label","name","helpLabel","options","defaultOptions","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","id","useId","handleChange","e","console","log","target","find","toString","setCurrentValue","selectedValue","useMemo","Array","isArray","currentValue","_a","some","error","jsx","FieldGroup","labelProps","variant","legend","children","className","map","jsxs","Fragment","type","onChange","checked","htmlFor","getSmiley","Number"],"mappings":"8XAYA,MAAMA,EAAgBC,GACM,iBAAjBA,EAAOC,QAAuB,CAAC,EAAG,EAAG,EAAG,EAAG,GAAGC,SAASF,EAAOC,OAE5DE,EAA0C,EACnDC,MAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,QAAAA,EAAUC,MAEV,MAAMC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAKC,IAELC,EAAsDC,IAChDC,QAAAC,IAAIF,EAAEG,OAAOnB,OACfD,MAAAA,EAAS,MAAAO,OAAA,EAAAA,EAASc,MACnBrB,GAAWA,EAAOC,MAAMqB,aAAeL,EAAEG,OAAOnB,QAErD,MAAAY,GAAAA,EAASU,gBAAgBvB,EAAAA,EAGvBwB,EAAgBC,GAClB,WACI,OAAAC,MAAMC,QAAQ,MAAAd,OAAA,EAAAA,EAASe,cACjB,MAAAf,OAAAA,EAAAA,EAASe,aAAa,GAAG3B,MACzB,OAAA4B,EAAA,MAAAhB,SAAAA,EAASe,qBAATC,EAAuB5B,KAAA,GACjC,CAAC,MAAAY,OAAAA,EAAAA,EAASe,eAGV,OAAArB,EAAQuB,KAAK/B,IACLmB,QAAAa,MACJ,2EAEG,MAGNlB,GAAYN,EAQbyB,EAACC,EAAA,CACGC,WAAY,CAAEC,QAAS,SACvBC,OAAQhC,EACRE,UAAAA,EAEA+B,SAAAL,EAAC,OAAIM,UAAU,uBACVD,WAAQE,KAAKvC,GACVwC,EAACC,EACG,CAAAJ,SAAA,CAAAL,EAAC,QAAA,CACGM,UAAU,cACVxB,GAAI,GAAGA,KAAMT,KAAQL,EAAOC,QAC5BI,KAAM,GAAGS,KAAMT,IACfqC,KAAK,QACLzC,MAAOD,EAAOC,MACd0C,SAAU3B,EACV4B,QAASpB,IAAkBxB,EAAOC,QAEtCuC,EAAC,QAAA,CACGF,UAAU,6BACVO,QAAS,GAAG/B,KAAMT,KAAQL,EAAOC,QAEjCoC,SAAA,CAAAL,EAAC,OAAK,CAAAM,UAAU,cAAeD,SAAArC,EAAOI,QACrC0C,EAAUC,OAAO/C,EAAOC,aAflBD,EAAOC,cAd1BiB,QAAAa,MACJ,yEAEG,KA+BP"}
+{"version":3,"file":"SmileyQuestion.js","sources":["../../../../../src/components/feedback/questions/SmileyQuestion.tsx"],"sourcesContent":["import React, {\n    type ChangeEventHandler,\n    Fragment,\n    useId,\n    useMemo,\n} from \"react\";\nimport { FieldGroup } from \"../../input-group/FieldGroup.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackOption, QuestionProps } from \"../types.js\";\nimport { defaultOptions, getSmiley } from \"./smileyUtils.js\";\n\nconst isNotInScale = (option: FeedbackOption) =>\n    typeof option.value !== \"number\" || ![1, 2, 3, 4, 5].includes(option.value);\n\nexport const SmileyQuestion: React.FC<QuestionProps> = ({\n    label,\n    name = \"smiley\",\n    helpLabel,\n    options = defaultOptions,\n}) => {\n    const followupContext = useFollowUpContext();\n    const feedbackContext = useMainQuestionContext();\n    const context = followupContext || feedbackContext;\n    const id = useId();\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n        console.log(e.target.value);\n        const option = options?.find(\n            (option) => option.value.toString() === e.target.value,\n        );\n        context?.setCurrentValue(option);\n    };\n\n    const selectedValue = useMemo(\n        () =>\n            Array.isArray(context?.currentValue)\n                ? context?.currentValue[0].value\n                : context?.currentValue?.value,\n        [context?.currentValue],\n    );\n\n    if (options.some(isNotInScale)) {\n        console.error(\n            \"SmileyQuestion må ha tallene 1 til 5 som verdier for alternativene sine\",\n        );\n        return null;\n    }\n\n    if (!context || !options) {\n        console.error(\n            \"Questions must be used inside a Followup or Feedback context provider\",\n        );\n        return null;\n    }\n\n    return (\n        <FieldGroup\n            labelProps={{ variant: \"large\" }}\n            legend={label}\n            helpLabel={helpLabel}\n        >\n            <div className=\"jkl-feedback-smileys\">\n                {options.map((option) => (\n                    <Fragment key={option.value}>\n                        <input\n                            className=\"jkl-sr-only\"\n                            id={`${id}-${name}-${option.value}`}\n                            name={`${id}-${name}`}\n                            type=\"radio\"\n                            value={option.value}\n                            onChange={handleChange}\n                            checked={selectedValue === option.value}\n                        />\n                        <label\n                            className=\"jkl-feedback-smiley-option\"\n                            htmlFor={`${id}-${name}-${option.value}`}\n                        >\n                            <span className=\"jkl-sr-only\">{option.label}</span>\n                            {getSmiley(Number(option.value))}\n                        </label>\n                    </Fragment>\n                ))}\n            </div>\n        </FieldGroup>\n    );\n};\n"],"names":["isNotInScale","option","value","includes","SmileyQuestion","label","name","helpLabel","options","defaultOptions","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","id","useId","handleChange","e","console","log","target","find","toString","setCurrentValue","selectedValue","useMemo","Array","isArray","currentValue","some","error","jsx","FieldGroup","labelProps","variant","legend","children","className","map","jsxs","Fragment","type","onChange","checked","htmlFor","getSmiley","Number"],"mappings":"8XAYA,MAAMA,EAAgBC,GACM,iBAAjBA,EAAOC,QAAuB,CAAC,EAAG,EAAG,EAAG,EAAG,GAAGC,SAASF,EAAOC,OAE5DE,EAA0C,EACnDC,MAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,QAAAA,EAAUC,MAEV,MAAMC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAKC,IAELC,EAAsDC,IAChDC,QAAAC,IAAIF,EAAEG,OAAOnB,OACrB,MAAMD,EAASO,GAASc,MACnBrB,GAAWA,EAAOC,MAAMqB,aAAeL,EAAEG,OAAOnB,QAErDY,GAASU,gBAAgBvB,EAAM,EAG7BwB,EAAgBC,GAClB,IACIC,MAAMC,QAAQd,GAASe,cACjBf,GAASe,aAAa,GAAG3B,MACzBY,GAASe,cAAc3B,OACjC,CAACY,GAASe,eAGV,OAAArB,EAAQsB,KAAK9B,IACLmB,QAAAY,MACJ,2EAEG,MAGNjB,GAAYN,EAQbwB,EAACC,EAAA,CACGC,WAAY,CAAEC,QAAS,SACvBC,OAAQ/B,EACRE,UAAAA,EAEA8B,SAAAL,EAAC,OAAIM,UAAU,uBACVD,WAAQE,KAAKtC,GACVuC,EAACC,EACG,CAAAJ,SAAA,CAAAL,EAAC,QAAA,CACGM,UAAU,cACVvB,GAAI,GAAGA,KAAMT,KAAQL,EAAOC,QAC5BI,KAAM,GAAGS,KAAMT,IACfoC,KAAK,QACLxC,MAAOD,EAAOC,MACdyC,SAAU1B,EACV2B,QAASnB,IAAkBxB,EAAOC,QAEtCsC,EAAC,QAAA,CACGF,UAAU,6BACVO,QAAS,GAAG9B,KAAMT,KAAQL,EAAOC,QAEjCmC,SAAA,CAAAL,EAAC,OAAK,CAAAM,UAAU,cAAeD,SAAApC,EAAOI,QACrCyC,EAAUC,OAAO9C,EAAOC,aAflBD,EAAOC,cAd1BiB,QAAAY,MACJ,yEAEG,KA+BP"}

package/build/es/components/feedback/questions/TextQuestion.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t,useMemo as o}from"react";import{TextArea as n}from"../../text-area/TextArea.js";import{useFeedbackContext as a}from"../feedbackContext.js";import{useFollowUpContext as l}from"../followup/followupContext.js";import{useMainQuestionContext as u}from"../main-question/mainQuestionContext.js";const s=({label:s,name:i,helpLabel:m="Ikke skriv personlige opplysninger. Tilbakemeldinger som kommer inn her blir ikke besvart, men brukt i videre arbeid med å forbedre tjenestene våre.",autoFocus:c=!1})=>{const{counter:p}=a(),v=l(),b=u(),d=v||b,f=r(null);t((()=>{c&&f.current&&f.current.focus()}),[c]);const x=o((()=>{var e;return Array.isArray(null==d?void 0:d.currentValue)?null==d?void 0:d.currentValue[0].value.toString():null==(e=null==d?void 0:d.currentValue)?void 0:e.value.toString()}),[null==d?void 0:d.currentValue]);return d?e(n,{ref:f,label:s,labelProps:{variant:"large"},name:i||s,startOpen:!0,rows:5,value:x,onChange:e=>{const r={label:s,name:i||s,type:"text",value:e.target.value};null==d||d.setCurrentValue(r)},helpLabel:m,counter:p}):(console.error("Questions must be used inside a Followup or Feedback context provider"),null)};export{s as TextQuestion};
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t,useMemo as o}from"react";import{TextArea as a}from"../../text-area/TextArea.js";import{useFeedbackContext as n}from"../feedbackContext.js";import{useFollowUpContext as s}from"../followup/followupContext.js";import{useMainQuestionContext as u}from"../main-question/mainQuestionContext.js";const l=({label:l,name:i,helpLabel:m="Ikke skriv personlige opplysninger. Tilbakemeldinger som kommer inn her blir ikke besvart, men brukt i videre arbeid med å forbedre tjenestene våre.",autoFocus:c=!1})=>{const{counter:p}=n(),b=s(),f=u(),x=b||f,d=r(null);t((()=>{c&&d.current&&d.current.focus()}),[c]);const k=o((()=>Array.isArray(x?.currentValue)?x?.currentValue[0].value.toString():x?.currentValue?.value.toString()),[x?.currentValue]);return x?e(a,{ref:d,label:l,labelProps:{variant:"large"},name:i||l,startOpen:!0,rows:5,value:k,onChange:e=>{const r={label:l,name:i||l,type:"text",value:e.target.value};x?.setCurrentValue(r)},helpLabel:m,counter:p}):(console.error("Questions must be used inside a Followup or Feedback context provider"),null)};export{l as TextQuestion};
 //# sourceMappingURL=TextQuestion.js.map

package/build/es/components/feedback/questions/TextQuestion.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextQuestion.js","sources":["../../../../../src/components/feedback/questions/TextQuestion.tsx"],"sourcesContent":["import React, {\n    type ChangeEventHandler,\n    useEffect,\n    useMemo,\n    useRef,\n} from \"react\";\nimport { TextArea } from \"../../text-area/TextArea.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackAnswer, QuestionProps } from \"../types.js\";\n\nexport const TextQuestion: React.FC<QuestionProps> = ({\n    label,\n    name,\n    helpLabel = \"Ikke skriv personlige opplysninger. Tilbakemeldinger som kommer inn her blir ikke besvart, men brukt i videre arbeid med å forbedre tjenestene våre.\",\n    autoFocus = false,\n}) => {\n    const { counter } = useFeedbackContext();\n    const followupContext = useFollowUpContext();\n    const feedbackContext = useMainQuestionContext();\n    const context = followupContext || feedbackContext;\n    const ref = useRef<HTMLTextAreaElement>(null);\n\n    useEffect(() => {\n        if (autoFocus && ref.current) {\n            ref.current.focus();\n        }\n    }, [autoFocus]);\n\n    const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n        const value: FeedbackAnswer = {\n            label,\n            name: name || label,\n            type: \"text\",\n            value: e.target.value,\n        };\n        context?.setCurrentValue(value);\n    };\n\n    const currentValue = useMemo(\n        () =>\n            Array.isArray(context?.currentValue)\n                ? context?.currentValue[0].value.toString()\n                : context?.currentValue?.value.toString(),\n        [context?.currentValue],\n    );\n\n    if (!context) {\n        console.error(\n            \"Questions must be used inside a Followup or Feedback context provider\",\n        );\n        return null;\n    }\n\n    return (\n        <TextArea\n            ref={ref}\n            label={label}\n            labelProps={{ variant: \"large\" }}\n            name={name || label}\n            startOpen\n            rows={5}\n            value={currentValue}\n            onChange={handleChange}\n            helpLabel={helpLabel}\n            counter={counter}\n        />\n    );\n};\n"],"names":["TextQuestion","label","name","helpLabel","autoFocus","counter","useFeedbackContext","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","ref","useRef","useEffect","current","focus","handleChange","currentValue","useMemo","Array","isArray","value","toString","_a","jsx","TextArea","labelProps","variant","startOpen","rows","onChange","e","type","target","setCurrentValue","console","error"],"mappings":"0WAYO,MAAMA,EAAwC,EACjDC,MAAAA,EACAC,KAAAA,EACAC,UAAAA,EAAY,uJACZC,UAAAA,GAAY,MAEN,MAAEC,QAAAA,GAAYC,IACdC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAMC,EAA4B,MAExCC,GAAU,KACFV,GAAaQ,EAAIG,SACjBH,EAAIG,QAAQC,OAAM,GAEvB,CAACZ,IAEEa,MAUAC,EAAeC,GACjB,WACU,OAAAC,MAAAC,QAAQ,MAAAV,OAAAA,EAAAA,EAASO,cACjB,MAAAP,SAAAA,EAASO,aAAa,GAAGI,MAAMC,WAC/B,OAAAC,EAAA,MAAAb,OAAA,EAAAA,EAASO,mBAAT,EAAAM,EAAuBF,MAAMC,UAAA,GACvC,CAAC,MAAAZ,OAAAA,EAAAA,EAASO,eAGd,OAAKP,EAQDc,EAACC,EAAA,CACGd,IAAAA,EACAX,MAAAA,EACA0B,WAAY,CAAEC,QAAS,SACvB1B,KAAMA,GAAQD,EACd4B,WAAS,EACTC,KAAM,EACNR,MAAOJ,EACPa,SAlCuDC,IAC3D,MAAMV,EAAwB,CAC1BrB,MAAAA,EACAC,KAAMA,GAAQD,EACdgC,KAAM,OACNX,MAAOU,EAAEE,OAAOZ,OAEpB,MAAAX,GAAAA,EAASwB,gBAAgBb,EAAAA,EA4BrBnB,UAAAA,EACAE,QAAAA,KAjBI+B,QAAAC,MACJ,yEAEG,KAAA"}
+{"version":3,"file":"TextQuestion.js","sources":["../../../../../src/components/feedback/questions/TextQuestion.tsx"],"sourcesContent":["import React, {\n    type ChangeEventHandler,\n    useEffect,\n    useMemo,\n    useRef,\n} from \"react\";\nimport { TextArea } from \"../../text-area/TextArea.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackAnswer, QuestionProps } from \"../types.js\";\n\nexport const TextQuestion: React.FC<QuestionProps> = ({\n    label,\n    name,\n    helpLabel = \"Ikke skriv personlige opplysninger. Tilbakemeldinger som kommer inn her blir ikke besvart, men brukt i videre arbeid med å forbedre tjenestene våre.\",\n    autoFocus = false,\n}) => {\n    const { counter } = useFeedbackContext();\n    const followupContext = useFollowUpContext();\n    const feedbackContext = useMainQuestionContext();\n    const context = followupContext || feedbackContext;\n    const ref = useRef<HTMLTextAreaElement>(null);\n\n    useEffect(() => {\n        if (autoFocus && ref.current) {\n            ref.current.focus();\n        }\n    }, [autoFocus]);\n\n    const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n        const value: FeedbackAnswer = {\n            label,\n            name: name || label,\n            type: \"text\",\n            value: e.target.value,\n        };\n        context?.setCurrentValue(value);\n    };\n\n    const currentValue = useMemo(\n        () =>\n            Array.isArray(context?.currentValue)\n                ? context?.currentValue[0].value.toString()\n                : context?.currentValue?.value.toString(),\n        [context?.currentValue],\n    );\n\n    if (!context) {\n        console.error(\n            \"Questions must be used inside a Followup or Feedback context provider\",\n        );\n        return null;\n    }\n\n    return (\n        <TextArea\n            ref={ref}\n            label={label}\n            labelProps={{ variant: \"large\" }}\n            name={name || label}\n            startOpen\n            rows={5}\n            value={currentValue}\n            onChange={handleChange}\n            helpLabel={helpLabel}\n            counter={counter}\n        />\n    );\n};\n"],"names":["TextQuestion","label","name","helpLabel","autoFocus","counter","useFeedbackContext","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","ref","useRef","useEffect","current","focus","handleChange","currentValue","useMemo","Array","isArray","value","toString","jsx","TextArea","labelProps","variant","startOpen","rows","onChange","e","type","target","setCurrentValue","console","error"],"mappings":"0WAYO,MAAMA,EAAwC,EACjDC,MAAAA,EACAC,KAAAA,EACAC,UAAAA,EAAY,uJACZC,UAAAA,GAAY,MAEN,MAAEC,QAAAA,GAAYC,IACdC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAMC,EAA4B,MAExCC,GAAU,KACFV,GAAaQ,EAAIG,SACjBH,EAAIG,QAAQC,OAAM,GAEvB,CAACZ,IAEEa,MAUAC,EAAeC,GACjB,IACIC,MAAMC,QAAQV,GAASO,cACjBP,GAASO,aAAa,GAAGI,MAAMC,WAC/BZ,GAASO,cAAcI,MAAMC,YACvC,CAACZ,GAASO,eAGd,OAAKP,EAQDa,EAACC,EAAA,CACGb,IAAAA,EACAX,MAAAA,EACAyB,WAAY,CAAEC,QAAS,SACvBzB,KAAMA,GAAQD,EACd2B,WAAS,EACTC,KAAM,EACNP,MAAOJ,EACPY,SAlCuDC,IAC3D,MAAMT,EAAwB,CAC1BrB,MAAAA,EACAC,KAAMA,GAAQD,EACd+B,KAAM,OACNV,MAAOS,EAAEE,OAAOX,OAEpBX,GAASuB,gBAAgBZ,EAAK,EA4B1BnB,UAAAA,EACAE,QAAAA,KAjBI8B,QAAAC,MACJ,yEAEG,KAAA"}

package/build/es/components/file/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["../../../../src/components/file/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {type ComponentProps, type FC, useId} from \"react\";\nimport {formatBytes} from \"../../utilities/index.js\";\nimport {Button} from \"../button/index.js\";\nimport {useFileInputContext} from \"../file-input/internal/fileInputContext.js\";\nimport {TrashCanIcon} from \"../icon/index.js\";\nimport {SupportLabel} from \"../input-group/index.js\";\nimport {Link} from \"../link/index.js\";\nimport type {FileProps} from \"./types.js\";\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n    const {\n        children,\n        className,\n        fileName,\n        fileType,\n        fileSize,\n        path,\n        file,\n        state,\n        errorLabel = \"Feil\",\n        onRemove,\n        variant = \"list\",\n        ...rest\n    } = props;\n\n    const id = `jkl-file-preview-${useId()}`;\n    const supportId = `${id}-support`;\n\n    const context = useFileInputContext();\n\n    const imageSrc =\n        fileType.startsWith(\"image/\") &&\n        (file ? URL.createObjectURL(file) : path);\n\n    const fileComponent = (\n        <div\n            id={id}\n            className={clsx(className, \"jkl-file\", `jkl-file--${variant}`)}\n            data-state={state}\n            {...rest}\n        >\n            <div className={\"jkl-file__content\"}>\n                <div\n                    className=\"jkl-file__content__thumbnail\"\n                    data-filetype={fileType}\n                >\n                    <img src={imageSrc || undefined} alt=\"\"/>\n                </div>\n                {path ? (\n                    <p className=\"jkl-file__content__name\">\n                        <Link href={path}>\n                            {fileName}{\" \"}\n                            <span className=\"jkl-file__content__name__size\">\n                                ({formatBytes(fileSize)})\n                            </span>\n                        </Link>\n                    </p>\n                ) : (\n                    <p className=\"jkl-file__content__name\">\n                        {fileName}{\" \"}\n                        <span className=\"jkl-file__content__name__size\">\n                            ({formatBytes(fileSize)})\n                        </span>\n                    </p>\n                )}\n                {onRemove && (\n                    <Button\n                        variant={\"ghost\"}\n                        className=\"jkl-file__content__button\"\n                        onClick={onRemove}\n                        title={`Fjern ${fileName}`}\n                        icon={<TrashCanIcon/>}\n                    />\n                )}\n            </div>\n\n            {state === \"error\" && errorLabel && (\n                <SupportLabel\n                    className=\"jkl-file__support-label\"\n                    id={supportId}\n                    label={errorLabel}\n                    labelType={\"error\"}\n                />\n            )}\n        </div>\n    );\n\n    return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","className","fileName","fileType","fileSize","path","file","state","errorLabel","onRemove","variant","rest","id","useId","supportId","context","useFileInputContext","imageSrc","startsWith","URL","createObjectURL","fileComponent","jsxs","clsx","jsx","src","alt","Link","href","formatBytes","Button","onClick","title","icon","TrashCanIcon","SupportLabel","label","labelType"],"mappings":"86DAUa,MAAAA,EAA+CC,IAClD,MACFC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,WAAAA,EAAa,OACbC,SAAAA,EACAC,QAAAA,EAAU,UACPC,GACHZ,EAEEa,EAAK,oBAAoBC,MACzBC,EAAY,GAAGF,YAEfG,EAAUC,IAEVC,EACFd,EAASe,WAAW,YACnBZ,EAAOa,IAAIC,gBAAgBd,GAAQD,GAElCgB,EACFC,EAAC,MAAA,CACGV,GAAAA,EACAX,UAAWsB,EAAKtB,EAAW,WAAY,aAAaS,KACpD,aAAYH,KACRI,EAEJX,SAAA,CAACsB,EAAA,MAAA,CAAIrB,UAAW,oBACZD,SAAA,CAAAwB,EAAC,MAAA,CACGvB,UAAU,+BACV,gBAAeE,EAEfH,WAAC,MAAI,CAAAyB,IAAKR,QAAY,EAAWS,IAAI,OAExCrB,IACI,IAAE,CAAAJ,UAAU,0BACTD,SAACsB,EAAAK,EAAA,CAAKC,KAAMvB,EACPL,SAAA,CAAAE,EAAU,IACXoB,EAAC,OAAK,CAAArB,UAAU,gCAAgCD,SAAA,CAAA,IAC1C6B,EAAYzB,GAAU,YAKnCkB,EAAA,IAAA,CAAErB,UAAU,0BACRD,SAAA,CAAAE,EAAU,IACXoB,EAAC,OAAK,CAAArB,UAAU,gCAAgCD,SAAA,CAAA,IAC1C6B,EAAYzB,GAAU,UAInCK,GACGe,EAACM,EAAA,CACGpB,QAAS,QACTT,UAAU,4BACV8B,QAAStB,EACTuB,MAAO,SAAS9B,IAChB+B,OAAOC,EAAY,CAAA,QAKpB,UAAV3B,GAAqBC,GAClBgB,EAACW,EAAA,CACGlC,UAAU,0BACVW,GAAIE,EACJsB,MAAO5B,EACP6B,UAAW,aAMpBtB,OAAAA,EAAUS,EAAC,KAAI,CAAAxB,SAAAqB,IAAsBA,CAAAA"}
+{"version":3,"file":"File.js","sources":["../../../../src/components/file/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ComponentProps, type FC, useId } from \"react\";\nimport { formatBytes } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { useFileInputContext } from \"../file-input/internal/fileInputContext.js\";\nimport { TrashCanIcon } from \"../icon/index.js\";\nimport { SupportLabel } from \"../input-group/index.js\";\nimport { Link } from \"../link/index.js\";\nimport type { FileProps } from \"./types.js\";\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n    const {\n        children,\n        className,\n        fileName,\n        fileType,\n        fileSize,\n        path,\n        file,\n        state,\n        errorLabel = \"Feil\",\n        onRemove,\n        variant = \"list\",\n        ...rest\n    } = props;\n\n    const id = `jkl-file-preview-${useId()}`;\n    const supportId = `${id}-support`;\n\n    const context = useFileInputContext();\n\n    const imageSrc =\n        fileType.startsWith(\"image/\") &&\n        (file ? URL.createObjectURL(file) : path);\n\n    const fileComponent = (\n        <div\n            id={id}\n            className={clsx(className, \"jkl-file\", `jkl-file--${variant}`)}\n            data-state={state}\n            {...rest}\n        >\n            <div className={\"jkl-file__content\"}>\n                <div\n                    className=\"jkl-file__content__thumbnail\"\n                    data-filetype={fileType}\n                >\n                    <img src={imageSrc || undefined} alt=\"\" />\n                </div>\n                {path ? (\n                    <p className=\"jkl-file__content__name\">\n                        <Link href={path}>\n                            {fileName}{\" \"}\n                            <span className=\"jkl-file__content__name__size\">\n                                ({formatBytes(fileSize)})\n                            </span>\n                        </Link>\n                    </p>\n                ) : (\n                    <p className=\"jkl-file__content__name\">\n                        {fileName}{\" \"}\n                        <span className=\"jkl-file__content__name__size\">\n                            ({formatBytes(fileSize)})\n                        </span>\n                    </p>\n                )}\n                {onRemove && (\n                    <Button\n                        variant={\"ghost\"}\n                        className=\"jkl-file__content__button\"\n                        onClick={onRemove}\n                        title={`Fjern ${fileName}`}\n                        icon={<TrashCanIcon />}\n                    />\n                )}\n            </div>\n\n            {state === \"error\" && errorLabel && (\n                <SupportLabel\n                    className=\"jkl-file__support-label\"\n                    id={supportId}\n                    label={errorLabel}\n                    labelType={\"error\"}\n                />\n            )}\n        </div>\n    );\n\n    return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","className","fileName","fileType","fileSize","path","file","state","errorLabel","onRemove","variant","rest","id","useId","supportId","context","useFileInputContext","imageSrc","startsWith","URL","createObjectURL","fileComponent","jsxs","clsx","jsx","src","alt","Link","href","formatBytes","Button","onClick","title","icon","TrashCanIcon","SupportLabel","label","labelType"],"mappings":"86DAUa,MAAAA,EAA+CC,IAClD,MACFC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,WAAAA,EAAa,OACbC,SAAAA,EACAC,QAAAA,EAAU,UACPC,GACHZ,EAEEa,EAAK,oBAAoBC,MACzBC,EAAY,GAAGF,YAEfG,EAAUC,IAEVC,EACFd,EAASe,WAAW,YACnBZ,EAAOa,IAAIC,gBAAgBd,GAAQD,GAElCgB,EACFC,EAAC,MAAA,CACGV,GAAAA,EACAX,UAAWsB,EAAKtB,EAAW,WAAY,aAAaS,KACpD,aAAYH,KACRI,EAEJX,SAAA,CAACsB,EAAA,MAAA,CAAIrB,UAAW,oBACZD,SAAA,CAAAwB,EAAC,MAAA,CACGvB,UAAU,+BACV,gBAAeE,EAEfH,WAAC,MAAI,CAAAyB,IAAKR,QAAY,EAAWS,IAAI,OAExCrB,IACI,IAAE,CAAAJ,UAAU,0BACTD,SAACsB,EAAAK,EAAA,CAAKC,KAAMvB,EACPL,SAAA,CAAAE,EAAU,IACXoB,EAAC,OAAK,CAAArB,UAAU,gCAAgCD,SAAA,CAAA,IAC1C6B,EAAYzB,GAAU,YAKnCkB,EAAA,IAAA,CAAErB,UAAU,0BACRD,SAAA,CAAAE,EAAU,IACXoB,EAAC,OAAK,CAAArB,UAAU,gCAAgCD,SAAA,CAAA,IAC1C6B,EAAYzB,GAAU,UAInCK,GACGe,EAACM,EAAA,CACGpB,QAAS,QACTT,UAAU,4BACV8B,QAAStB,EACTuB,MAAO,SAAS9B,IAChB+B,OAAOC,EAAa,CAAA,QAKrB,UAAV3B,GAAqBC,GAClBgB,EAACW,EAAA,CACGlC,UAAU,0BACVW,GAAIE,EACJsB,MAAO5B,EACP6B,UAAW,aAMpBtB,OAAAA,EAAUS,EAAC,KAAI,CAAAxB,SAAAqB,IAAsBA,CAAAA"}

package/build/es/components/file/stories/File.stories.d.ts

@@ -23,7 +23,7 @@ declare const meta: {
         fileName: string;
         fileType: string;
         fileSize: number;
-        path: string;
+        path: any;
         variant: "list";
     };
 };