@sikt/sds-input-file 0.2.7 → 1.0.1

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@1.0.0...@sikt/sds-input-file@1.0.1) (2025-06-10)
+
+### Bug Fixes
+
+- **deps:** update @sikt/sds-form@4.0.1 ([deb5ace](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/deb5ace25af43ef0489cde09b62deb060cf09712))
+- **deps:** update dependency react-aria-components to ^1.10.0 ([66e4cc0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/66e4cc040db98decbed30afd4c5518d2ae157620))
+- move help & error text back under inputs ([7db8d0a](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/7db8d0a5047365808a7081aa1778cf4b9dbc4bc7))
+
+## [1.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@0.2.7...@sikt/sds-input-file@1.0.0) (2025-05-21)
+
+### Features
+
+- **input-file:** new typography & label, help, error order ([4a0f46b](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/4a0f46bf77364df5903fa477064e841f574edaf5))
+- **input-file:** update with new typography ([029952f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/029952f7b28660f2dfc170aafe6ced9e07bc416a))
+
+### Bug Fixes
+
+- **deps:** update @sikt/sds-button & react-aria-components ([84f4610](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/84f4610d18697714352ce0dbbc444df38955cccb))
+- **deps:** update @sikt/sds-core ([f1f7023](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f1f7023a7e77980ef15993b0bdac76bff254b651))
+- **deps:** update dependency react-aria-components to ^1.8.0 ([3f0110e](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/3f0110ef382a2cf69051e42904375d5574c7e9a4))
+- update @sikt/sds-form@4.0.0 ([c9c1473](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/c9c1473524d32e0a7512644e105a346faaf1b109))
+
 ## [0.2.7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@0.2.6...@sikt/sds-input-file@0.2.7) (2025-04-11)
 
 ### Bug Fixes

package/README.md

@@ -13,13 +13,12 @@ import { InputFile, FileList, FileListItem } from "@sikt/sds-input-file";
 import "@sikt/sds-form/dist/index.css";
 import "@sikt/sds-input-file/dist/index.css";
 
-<>
-  <InputFile
-    label="Upload documentation"
-    aria-label="Upload documentation"
-    accept=".doc,.docx"
-    onChange={changeHandler}
-  />
+<InputFile
+  label="Upload documentation"
+  aria-label="Upload documentation"
+  accept=".doc,.docx"
+  onChange={changeHandler}
+>
   <FileList figCaption="Attatchments">
     files.map((file) => {
       <FileListItem
@@ -30,7 +29,7 @@ import "@sikt/sds-input-file/dist/index.css";
       </FileListItem>
     })
   </FileList>
-</>
+</InputFile>
 ```
 
 #### Caveats

package/dist/index.css

@@ -1,4 +1,9 @@
 /* src/input-file.pcss */
+.sds-input-file-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sds-space-gap-medium);
+}
 .sds-input-file__drop-zone {
   align-items: center;
   border: var(--sds-space-border-weight-regular) dashed var(--sds-color-interaction-neutral-strong-default);
@@ -23,13 +28,12 @@
   background-color: var( --sds-color-interaction-primary-transparent-highlight );
 }
 .sds-input-file__drop-zone-icon {
-  font-size: var(--sds-base-size-m);
+  font-size: var(--sds-typography-fontsize-900);
   line-height: 1em;
-  height: var(--sds-base-size-m);
-  width: var(--sds-base-size-m);
 }
 .sds-input-file__placeholder {
   color: var(--sds-color-text-primary);
+  padding: var(--sds-space-padding-small) 0;
   text-align: center;
 }
 
@@ -71,7 +75,7 @@
   gap: var(--sds-space-padding-tiny);
 }
 .sds-input-file-list__item-icon {
-  font-size: var(--sds-base-size-m);
+  font-size: var(--sds-typography-fontsize-700);
   line-height: 1em;
   padding: var(--sds-space-padding-minimal);
 }

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/input-file.pcss","../src/file-list.pcss"],"sourcesContent":[".sds-input-file__drop-zone {\n    align-items: center;\n    border: var(--sds-space-border-weight-regular) dashed\n      var(--sds-color-interaction-neutral-strong-default);\n    border-radius: var(--sds-space-border-radius-medium);\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sds-space-padding-small);\n    padding: var(--sds-space-padding-medium);\n  }\n\n    .sds-input-file__drop-zone--error {\n      border-color: var(--sds-color-interaction-danger-strong-default);\n      border-width: var(--sds-space-border-weight-bold);\n    }\n\n    .sds-input-file__drop-zone[data-hovered],\n    .sds-input-file__drop-zone[data-drop-target],\n    .sds-input-file__drop-zone[data-focus-visible] {\n      border-color: var(--sds-color-interaction-neutral-strong-highlight);\n    }\n\n    .sds-input-file__drop-zone[data-drop-target],\n    .sds-input-file__drop-zone[data-focus-visible] {\n      background-color: var(\n        --sds-color-interaction-primary-transparent-highlight\n      );\n    }\n\n    .sds-input-file__drop-zone-icon {\n      font-size: var(--sds-base-size-m);\n      line-height: 1em;\n      height: var(--sds-base-size-m);\n      width: var(--sds-base-size-m);\n    }\n  .sds-input-file__placeholder {\n    color: var(--sds-color-text-primary);\n    text-align: center;\n  }\n",".sds-input-file-list {\n  margin: 0;\n}\n\n  .sds-input-file-list__caption {\n    font-variant: no-contextual;\n  }\n\n  .sds-input-file-list__list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sds-space-padding-tiny);\n    list-style: none;\n    margin: 0;\n    padding: var(--sds-space-padding-tiny) 0;\n  }\n\n  .sds-input-file-list__item {\n    background-color: var(--sds-color-layout-background-primary);\n    border-radius: var(--sds-space-border-radius-small);\n    display: flex;\n    flex-flow: row wrap;\n    gap: var(--sds-space-padding-tiny);\n    justify-content: space-between;\n    padding: calc(\n        var(--sds-space-padding-minimal) + var(--sds-space-padding-minimal)\n      )\n      calc(var(--sds-space-padding-minimal) + var(--sds-space-padding-small));\n    padding-right: var(--sds-space-padding-small);\n  }\n\n  .sds-input-file-list__item--error {\n      background-color: var(--sds-color-layout-page-default);\n    }\n\n  .sds-input-file-list__item-start {\n      max-width: 50%;\n    }\n\n  .sds-input-file-list__item-end {\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n      gap: var(--sds-space-padding-tiny);\n    }\n\n  .sds-input-file-list__item-icon {\n      font-size: var(--sds-base-size-m);\n      line-height: 1em;\n      padding: var(--sds-space-padding-minimal);\n    }\n\n  .sds-input-file-list__item-error {\n      padding: var(--sds-space-padding-minimal) 0;\n    }\n"],"mappings":";AAAA,CAAC;AACG,eAAa;AACb,UAAQ,IAAI,mCAAmC,OAC7C,IAAI;AACN,iBAAe,IAAI;AACnB,UAAQ;AACR,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,WAAS,IAAI;AACf;AAEE,CAAC;AACC,gBAAc,IAAI;AAClB,gBAAc,IAAI;AACpB;AAEA,CAjBH,yBAiB6B,CAAC;AAC3B,CAlBH,yBAkB6B,CAAC;AAC3B,CAnBH,yBAmB6B,CAAC;AACzB,gBAAc,IAAI;AACpB;AAEA,CAvBH,yBAuB6B,CAAC;AAC3B,CAxBH,yBAwB6B,CAAC;AACzB,oBAAkB,KAChB;AAEJ;AAEA,CAAC;AACC,aAAW,IAAI;AACf,eAAa;AACb,UAAQ,IAAI;AACZ,SAAO,IAAI;AACb;AACF,CAAC;AACC,SAAO,IAAI;AACX,cAAY;AACd;;;ACvCF,CAAC;AACC,UAAQ;AACV;AAEE,CAAC;AACC,gBAAc;AAChB;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,cAAY;AACZ,UAAQ;AACR,WAAS,IAAI,0BAA0B;AACzC;AAEA,CAAC;AACC,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,WAAS;AACT,aAAW,IAAI;AACf,OAAK,IAAI;AACT,mBAAiB;AACjB,WAAS,KACL,IAAI,6BAA6B,EAAE,IAAI,8BAEzC,KAAK,IAAI,6BAA6B,EAAE,IAAI;AAC9C,iBAAe,IAAI;AACrB;AAEA,CAAC;AACG,oBAAkB,IAAI;AACxB;AAEF,CAAC;AACG,aAAW;AACb;AAEF,CAAC;AACG,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AAEF,CAAC;AACG,aAAW,IAAI;AACf,eAAa;AACb,WAAS,IAAI;AACf;AAEF,CAAC;AACG,WAAS,IAAI,6BAA6B;AAC5C;","names":[]}
+{"version":3,"sources":["../src/input-file.pcss","../src/file-list.pcss"],"sourcesContent":[".sds-input-file-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sds-space-gap-medium);\n  }\n  .sds-input-file__drop-zone {\n    align-items: center;\n    border: var(--sds-space-border-weight-regular) dashed\n      var(--sds-color-interaction-neutral-strong-default);\n    border-radius: var(--sds-space-border-radius-medium);\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sds-space-padding-small);\n    padding: var(--sds-space-padding-medium);\n  }\n  .sds-input-file__drop-zone--error {\n      border-color: var(--sds-color-interaction-danger-strong-default);\n      border-width: var(--sds-space-border-weight-bold);\n    }\n  .sds-input-file__drop-zone[data-hovered],\n    .sds-input-file__drop-zone[data-drop-target],\n    .sds-input-file__drop-zone[data-focus-visible] {\n      border-color: var(--sds-color-interaction-neutral-strong-highlight);\n    }\n  .sds-input-file__drop-zone[data-drop-target],\n    .sds-input-file__drop-zone[data-focus-visible] {\n      background-color: var(\n        --sds-color-interaction-primary-transparent-highlight\n      );\n    }\n  .sds-input-file__drop-zone-icon {\n      font-size: var(--sds-typography-fontsize-900);\n      line-height: 1em;\n    }\n  .sds-input-file__placeholder {\n    color: var(--sds-color-text-primary);\n    padding: var(--sds-space-padding-small) 0;\n    text-align: center;\n  }\n",".sds-input-file-list {\n  margin: 0;\n}\n\n  .sds-input-file-list__caption {\n    font-variant: no-contextual;\n  }\n\n  .sds-input-file-list__list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sds-space-padding-tiny);\n    list-style: none;\n    margin: 0;\n    padding: var(--sds-space-padding-tiny) 0;\n  }\n\n  .sds-input-file-list__item {\n    background-color: var(--sds-color-layout-background-primary);\n    border-radius: var(--sds-space-border-radius-small);\n    display: flex;\n    flex-flow: row wrap;\n    gap: var(--sds-space-padding-tiny);\n    justify-content: space-between;\n    padding: calc(\n        var(--sds-space-padding-minimal) + var(--sds-space-padding-minimal)\n      )\n      calc(var(--sds-space-padding-minimal) + var(--sds-space-padding-small));\n    padding-right: var(--sds-space-padding-small);\n  }\n\n  .sds-input-file-list__item--error {\n      background-color: var(--sds-color-layout-page-default);\n    }\n\n  .sds-input-file-list__item-start {\n      max-width: 50%;\n    }\n\n  .sds-input-file-list__item-end {\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n      gap: var(--sds-space-padding-tiny);\n    }\n\n  .sds-input-file-list__item-icon {\n      font-size: var(--sds-typography-fontsize-700);\n      line-height: 1em;\n      padding: var(--sds-space-padding-minimal);\n    }\n\n  .sds-input-file-list__item-error {\n      padding: var(--sds-space-padding-minimal) 0;\n    }\n"],"mappings":";AAAA,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AACA,CAAC;AACC,eAAa;AACb,UAAQ,IAAI,mCAAmC,OAC7C,IAAI;AACN,iBAAe,IAAI;AACnB,UAAQ;AACR,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,WAAS,IAAI;AACf;AACA,CAAC;AACG,gBAAc,IAAI;AAClB,gBAAc,IAAI;AACpB;AACF,CAfC,yBAeyB,CAAC;AACzB,CAhBD,yBAgB2B,CAAC;AAC3B,CAjBD,yBAiB2B,CAAC;AACzB,gBAAc,IAAI;AACpB;AACF,CApBC,yBAoByB,CAAC;AACzB,CArBD,yBAqB2B,CAAC;AACzB,oBAAkB,KAChB;AAEJ;AACF,CAAC;AACG,aAAW,IAAI;AACf,eAAa;AACf;AACF,CAAC;AACC,SAAO,IAAI;AACX,WAAS,IAAI,2BAA2B;AACxC,cAAY;AACd;;;ACvCF,CAAC;AACC,UAAQ;AACV;AAEE,CAAC;AACC,gBAAc;AAChB;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,cAAY;AACZ,UAAQ;AACR,WAAS,IAAI,0BAA0B;AACzC;AAEA,CAAC;AACC,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,WAAS;AACT,aAAW,IAAI;AACf,OAAK,IAAI;AACT,mBAAiB;AACjB,WAAS,KACL,IAAI,6BAA6B,EAAE,IAAI,8BAEzC,KAAK,IAAI,6BAA6B,EAAE,IAAI;AAC9C,iBAAe,IAAI;AACrB;AAEA,CAAC;AACG,oBAAkB,IAAI;AACxB;AAEF,CAAC;AACG,aAAW;AACb;AAEF,CAAC;AACG,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AAEF,CAAC;AACG,aAAW,IAAI;AACf,eAAa;AACb,WAAS,IAAI;AACf;AAEF,CAAC;AACG,WAAS,IAAI,6BAA6B;AAC5C;","names":[]}

package/dist/index.d.mts

@@ -13,6 +13,7 @@ interface InputFileProps extends DropZoneProps {
     "aria-label": NonNullable<string>;
     errorText?: ReactNode;
     helpText?: ReactNode;
+    children?: ReactNode;
     className?: string;
     placeholder?: string;
     placeholderBridge?: string;

package/dist/index.d.ts

@@ -13,6 +13,7 @@ interface InputFileProps extends DropZoneProps {
     "aria-label": NonNullable<string>;
     errorText?: ReactNode;
     helpText?: ReactNode;
+    children?: ReactNode;
     className?: string;
     placeholder?: string;
     placeholderBridge?: string;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-form"),s=require("@sikt/sds-icons"),l=require("clsx/lite"),i=require("react"),t=require("react-aria-components"),a=require("react/jsx-runtime"),n=require("@sikt/sds-button"),o=require("clsx"),c=Object.defineProperty,p=Object.defineProperties,d=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,x=(e,r,s)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s,f=(e,r)=>{for(var s in r||(r={}))m.call(r,s)&&x(e,s,r[s]);if(u)for(var s of u(r))h.call(r,s)&&x(e,s,r[s]);return e},b=(e,r)=>p(e,d(r)),g=(e,r)=>{var s={};for(var l in e)m.call(e,l)&&r.indexOf(l)<0&&(s[l]=e[l]);if(null!=e&&u)for(var l of u(e))r.indexOf(l)<0&&h.call(e,l)&&(s[l]=e[l]);return s},j=i.forwardRef(((n,o)=>{var c=n,{label:p,"aria-label":d,errorText:u,helpText:m,className:h,placeholder:x="Dra og slipp filer her,",placeholderBridge:j="eller",triggerText:v="Åpne filutforskeren",onChange:y,accept:_,multiple:N=!1,capture:T,value:F,maxFileSize:I}=c,O=g(c,["label","aria-label","errorText","helpText","className","placeholder","placeholderBridge","triggerText","onChange","accept","multiple","capture","value","maxFileSize"]);const P=i.useId(),z="".concat(P,"-help-text"),[B,q]=i.useState(null!=F?F:[]),w={id:P},S="string"==typeof _?_.split(","):_;i.useEffect((()=>{F&&q(F)}),[F]);const C=e=>{const r=(e=>e.map(((e,r)=>{const s=e,l=[];return S.some((r=>e.type.match(r.replaceAll("*",".*"))))||l.push("type"),I&&I<e.size&&l.push("size"),!N&&r>0&&l.push("multiple"),l.length>0&&(s.error=l),s})))(e);q([...B,...r]),null==y||y([...B,...r])};return a.jsx(r.FormField,{className:l.clsx("sds-input-file",u&&"sds-input-file--error",h),label:p,errorText:u,helpText:m,htmlFor:P,helpTextId:z,children:a.jsxs(t.DropZone,b(f({className:l.clsx("sds-input-file__drop-zone",Boolean(u)&&"sds-input-file__drop-zone--error"),onDrop:e=>{(async()=>{const r=e.items.filter((e=>"file"===e.kind));return await Promise.all(r.map((e=>e.getFile())))})().then(C).catch((e=>{throw console.error(e),e}))},"aria-label":d,"aria-describedby":(null!=u?u:m)?z:void 0,"aria-invalid":Boolean(u),"aria-errormessage":u?z:void 0,ref:o},O),{children:[a.jsx("div",{className:"sds-input-file__drop-zone-icon",children:a.jsx(s.UploadIcon,{})}),a.jsxs(e.Paragraph,{className:"sds-input-file__placeholder",children:[x,j&&a.jsxs(a.Fragment,{children:[a.jsx("br",{}),j]})]}),a.jsx(t.FileTrigger,b(f({},w),{onSelect:e=>{if(!e)return;const r=Array.from(e);C(r)},acceptedFileTypes:S,allowsMultiple:N,defaultCamera:T,children:a.jsx(t.Button,{className:l.clsx("sds-button","sds-button--".concat(u?"critical":"subtle")),children:a.jsx("span",{className:"sds-button__label",children:v})})}))]}))})}));j.displayName="InputFile";var v=e=>Math.round(100*e)/100;exports.FileList=e=>{var r=e,{children:s,className:i,figCaption:t}=r,n=g(r,["children","className","figCaption"]);return a.jsxs("figure",b(f({className:l.clsx("sds-input-file-list",i)},n),{children:[t&&a.jsx("figcaption",{className:"sds-input-file-list__caption sds-typography-heading--paragraph",children:t}),a.jsx("ul",{className:"sds-input-file-list__list",children:s})]}))},exports.FileListItem=e=>{var l,i=e,{children:t,className:c,errorText:p,fileSize:d,bytesConversion:u="decimal",loading:m=!1,progressProps:h,removeActionProps:x}=i,j=g(i,["children","className","errorText","fileSize","bytesConversion","loading","progressProps","removeActionProps"]);let y=x&&a.jsx(s.DeleteIcon,{});m?y=a.jsx(s.SpinnerIcon,{}):p&&(y=a.jsx(s.CancelIcon,{}));const _=d&&((e,r)=>{const s="binary"===r?1024:1e3,l=s**2;return e<s?"".concat(e,"B"):e>=s&&e<l?"".concat(v(e/s),"KB"):"".concat(v(e/l),"MB")})(d,u);return a.jsxs("li",b(f({className:o.clsx("sds-input-file-list__item",Boolean(p)&&"sds-input-file-list__item--error","ssds-typography-body--regular",c)},j),{children:[a.jsxs("div",{className:"sds-input-file-list__item-start",children:[a.jsx("div",{className:"sds-input-file-list__item-name sds-typography-body--strong",children:t}),_&&a.jsx("div",{children:_}),p&&a.jsx(r.HelpText,{error:!0,className:"sds-input-file-list__item-error",children:p})]}),a.jsxs("div",{className:"sds-input-file-list__item-end",children:[h&&a.jsxs("div",{role:"progressbar","aria-valuenow":h.value,"aria-label":h.label,children:[h.value,"%"]}),!m&&x&&a.jsx(n.Button,b(f({variant:"transparent",size:"small",iconVariant:"only",icon:y,type:null!=(l=x.type)?l:"button"},x),{children:x.label})),m&&a.jsx("div",{className:"sds-input-file-list__item-icon",children:a.jsx(s.SpinnerIcon,{})})]})]}))},exports.InputFile=j;//# sourceMappingURL=index.js.map
+"use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-form"),s=require("@sikt/sds-icons"),l=require("clsx/lite"),i=require("react"),t=require("react-aria-components"),a=require("react/jsx-runtime"),n=require("@sikt/sds-button"),o=require("clsx"),c=Object.defineProperty,p=Object.defineProperties,d=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,h=(e,r,s)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s,f=(e,r)=>{for(var s in r||(r={}))m.call(r,s)&&h(e,s,r[s]);if(u)for(var s of u(r))x.call(r,s)&&h(e,s,r[s]);return e},b=(e,r)=>p(e,d(r)),j=(e,r)=>{var s={};for(var l in e)m.call(e,l)&&r.indexOf(l)<0&&(s[l]=e[l]);if(null!=e&&u)for(var l of u(e))r.indexOf(l)<0&&x.call(e,l)&&(s[l]=e[l]);return s},g=i.forwardRef(((n,o)=>{var c=n,{label:p,"aria-label":d,errorText:u,helpText:m,children:x,className:h,placeholder:g="Dra og slipp filer her,",placeholderBridge:v="eller",triggerText:y="Åpne filutforskeren",onChange:_,accept:N,multiple:T=!1,capture:F,value:I,maxFileSize:B}=c,O=j(c,["label","aria-label","errorText","helpText","children","className","placeholder","placeholderBridge","triggerText","onChange","accept","multiple","capture","value","maxFileSize"]);const P=i.useId(),w="".concat(P,"-error-text"),z="".concat(P,"-help-text"),[q,S]=i.useState(null!=I?I:[]),C={id:P},k="string"==typeof N?N.split(","):N,D=[u&&w,m&&z].filter(Boolean).join(" ")||void 0;i.useEffect((()=>{I&&S(I)}),[I]);const A=e=>{const r=(e=>e.map(((e,r)=>{const s=e,l=[];return k.some((r=>e.type.match(r.replaceAll("*",".*"))))||l.push("type"),B&&B<e.size&&l.push("size"),!T&&r>0&&l.push("multiple"),l.length>0&&(s.error=l),s})))(e);S([...q,...r]),null==_||_([...q,...r])};return a.jsxs("div",{className:"sds-input-file-wrapper",children:[a.jsx(r.FormField,{className:l.clsx("sds-input-file",u&&"sds-input-file--error",h),label:p,errorText:u,errorTextId:w,helpText:m,helpTextId:z,htmlFor:P,children:a.jsxs(t.DropZone,b(f({className:l.clsx("sds-input-file__drop-zone",Boolean(u)&&"sds-input-file__drop-zone--error"),onDrop:e=>{(async()=>{const r=e.items.filter((e=>"file"===e.kind));return await Promise.all(r.map((e=>e.getFile())))})().then(A).catch((e=>{throw console.error(e),e}))},"aria-label":d,"aria-describedby":D,"aria-invalid":Boolean(u),"aria-errormessage":u?w:void 0,ref:o},O),{children:[a.jsx("div",{className:"sds-input-file__drop-zone-icon",children:a.jsx(s.UploadIcon,{})}),a.jsxs(e.Paragraph,{className:"sds-input-file__placeholder",children:[g,v&&a.jsxs(a.Fragment,{children:[a.jsx("br",{}),v]})]}),a.jsx(t.FileTrigger,b(f({},C),{onSelect:e=>{if(!e)return;const r=Array.from(e);A(r)},acceptedFileTypes:k,allowsMultiple:T,defaultCamera:F,children:a.jsx(t.Button,{className:l.clsx("sds-button","sds-button--".concat(u?"critical":"subtle")),children:a.jsx("span",{className:"sds-button__label",children:y})})}))]}))}),x]})}));g.displayName="InputFile";var v=e=>Math.round(100*e)/100;exports.FileList=e=>{var r=e,{children:s,className:i,figCaption:t}=r,n=j(r,["children","className","figCaption"]);return a.jsxs("figure",b(f({className:l.clsx("sds-input-file-list",i)},n),{children:[t&&a.jsx("figcaption",{className:"sds-input-file-list__caption sds-typography-label",children:t}),a.jsx("ul",{className:"sds-input-file-list__list",children:s})]}))},exports.FileListItem=e=>{var l,i=e,{children:t,className:c,errorText:p,fileSize:d,bytesConversion:u="decimal",loading:m=!1,progressProps:x,removeActionProps:h}=i,g=j(i,["children","className","errorText","fileSize","bytesConversion","loading","progressProps","removeActionProps"]);let y=h&&a.jsx(s.DeleteIcon,{});m?y=a.jsx(s.SpinnerIcon,{}):p&&(y=a.jsx(s.CancelIcon,{}));const _=d&&((e,r)=>{const s="binary"===r?1024:1e3,l=s**2;return e<s?"".concat(e,"B"):e>=s&&e<l?"".concat(v(e/s),"KB"):"".concat(v(e/l),"MB")})(d,u);return a.jsxs("li",b(f({className:o.clsx("sds-input-file-list__item",Boolean(p)&&"sds-input-file-list__item--error","ssds-typography-body",c)},g),{children:[a.jsxs("div",{className:"sds-input-file-list__item-start",children:[a.jsx("div",{className:"sds-input-file-list__item-name sds-typography-label",children:t}),_&&a.jsx("div",{children:_}),p&&a.jsx(r.HelpText,{error:!0,className:"sds-input-file-list__item-error",children:p})]}),a.jsxs("div",{className:"sds-input-file-list__item-end",children:[x&&a.jsxs("div",{role:"progressbar","aria-valuenow":x.value,"aria-label":x.label,children:[x.value,"%"]}),!m&&h&&a.jsx(n.Button,b(f({variant:"transparent",size:"small",iconVariant:"only",icon:y,type:null!=(l=h.type)?l:"button"},h),{children:h.label})),m&&a.jsx("div",{className:"sds-input-file-list__item-icon",children:a.jsx(s.SpinnerIcon,{})})]})]}))},exports.InputFile=g;//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["forwardRef","useId","useState","useEffect","accept","jsx","FormField","clsx","jsxs","DropZone","UploadIcon","Paragraph","Fragment","FileTrigger","Button","_a","DeleteIcon","SpinnerIcon","CancelIcon","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { DropEvent } from \"@react-types/shared\";\nimport { Paragraph } from \"@sikt/sds-core\";\nimport { FormField } from \"@sikt/sds-form\";\nimport { UploadIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, useEffect, useId, useState } from \"react\";\nimport {\n  Button,\n  DropZone,\n  DropZoneProps,\n  FileDropItem,\n  FileTrigger,\n} from \"react-aria-components\";\nimport \"./input-file.pcss\";\n\nexport type FileError = \"type\" | \"size\" | \"multiple\";\n\nexport interface FileWithError extends File {\n  error?: FileError[];\n}\n\nexport interface InputFileProps extends DropZoneProps {\n  label: NonNullable<ReactNode>;\n  \"aria-label\": NonNullable<string>;\n  errorText?: ReactNode;\n  helpText?: ReactNode;\n  className?: string;\n  placeholder?: string;\n  placeholderBridge?: string;\n  triggerText?: ReactNode;\n  onChange?: (newValue: (File | FileWithError)[]) => void;\n  accept: string | string[];\n  multiple?: boolean;\n  capture?: \"user\" | \"environment\";\n  value?: File[];\n  maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n  (\n    {\n      label,\n      \"aria-label\": ariaLabel,\n      errorText,\n      helpText,\n      className,\n      placeholder = \"Dra og slipp filer her,\",\n      placeholderBridge = \"eller\",\n      triggerText = \"Åpne filutforskeren\",\n      onChange,\n      accept,\n      multiple = false,\n      capture,\n      value,\n      maxFileSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const helpTextId = `${id}-help-text`;\n    const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n    const inputId = { id };\n    const acceptedFileTypes =\n      typeof accept === \"string\" ? accept.split(\",\") : accept;\n\n    useEffect(() => {\n      if (value) {\n        setFiles(value);\n      }\n    }, [value]);\n\n    const validateFiles = (input: File[]) => {\n      return input.map((file, index) => {\n        const output: File | FileWithError = file;\n        const errors: FileError[] = [];\n\n        // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n        if (\n          !acceptedFileTypes.some((accept) =>\n            file.type.match(accept.replaceAll(\"*\", \".*\")),\n          )\n        ) {\n          errors.push(\"type\");\n        }\n\n        if (maxFileSize && maxFileSize < file.size) {\n          errors.push(\"size\");\n        }\n\n        // TODO: should this be accepted when file1 fails validation?\n        if (!multiple && index > 0) {\n          errors.push(\"multiple\");\n        }\n\n        if (errors.length > 0) {\n          (output as FileWithError).error = errors;\n        }\n\n        return output;\n      });\n    };\n\n    const handleOnChange = (input: File[]) => {\n      const output = validateFiles(input);\n      setFiles([...files, ...output]);\n      onChange?.([...files, ...output]);\n    };\n\n    const handleOnDrop = (e: DropEvent) => {\n      const handler = async () => {\n        const filtered = e.items.filter((item) => item.kind === \"file\");\n        return await Promise.all(\n          filtered.map((item: FileDropItem) => item.getFile()),\n        );\n      };\n\n      handler()\n        .then(handleOnChange)\n        .catch((err: unknown) => {\n          console.error(err);\n          throw err;\n        });\n    };\n\n    const handleOnSelect = (e: FileList | null) => {\n      if (!e) return;\n      const input = Array.from(e);\n      handleOnChange(input);\n    };\n\n    return (\n      <FormField\n        className={clsx(\n          \"sds-input-file\",\n          errorText && `sds-input-file--error`,\n          className,\n        )}\n        label={label}\n        errorText={errorText}\n        helpText={helpText}\n        htmlFor={id}\n        helpTextId={helpTextId}\n      >\n        <DropZone\n          className={clsx(\n            \"sds-input-file__drop-zone\",\n            Boolean(errorText) && \"sds-input-file__drop-zone--error\",\n          )}\n          onDrop={handleOnDrop}\n          aria-label={ariaLabel}\n          aria-describedby={(errorText ?? helpText) ? helpTextId : undefined}\n          aria-invalid={Boolean(errorText)}\n          aria-errormessage={errorText ? helpTextId : undefined}\n          ref={ref}\n          {...rest}\n        >\n          <div className=\"sds-input-file__drop-zone-icon\">\n            <UploadIcon />\n          </div>\n          <Paragraph className=\"sds-input-file__placeholder\">\n            {placeholder}\n            {placeholderBridge && (\n              <>\n                <br />\n                {placeholderBridge}\n              </>\n            )}\n          </Paragraph>\n          <FileTrigger\n            {...inputId}\n            onSelect={handleOnSelect}\n            acceptedFileTypes={acceptedFileTypes}\n            allowsMultiple={multiple}\n            defaultCamera={capture}\n          >\n            <Button\n              className={clsx(\n                \"sds-button\",\n                `sds-button--${errorText ? \"critical\" : \"subtle\"}`,\n              )}\n            >\n              <span className=\"sds-button__label\">{triggerText}</span>\n            </Button>\n          </FileTrigger>\n        </DropZone>\n      </FormField>\n    );\n  },\n);\n\nInputFile.displayName = \"InputFile\";\n","import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport \"./file-list.pcss\";\n\nexport interface FileListProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\n  figCaption?: string;\n}\n\nexport const FileList = ({\n  children,\n  className,\n  figCaption,\n  ...rest\n}: FileListProps) => {\n  return (\n    <figure className={clsx(\"sds-input-file-list\", className)} {...rest}>\n      {figCaption && (\n        <figcaption className=\"sds-input-file-list__caption sds-typography-heading--paragraph\">\n          {figCaption}\n        </figcaption>\n      )}\n      <ul className=\"sds-input-file-list__list\">{children}</ul>\n    </figure>\n  );\n};\n","import { Button, ButtonProps } from \"@sikt/sds-button\";\nimport { HelpText } from \"@sikt/sds-form\";\nimport { SpinnerIcon, DeleteIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport type ByteConversion = \"binary\" | \"decimal\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n  errorText?: ReactNode;\n  fileSize?: number;\n  bytesConversion?: ByteConversion;\n  loading?: boolean;\n  progressProps?: { label: string; value: number };\n  removeActionProps?: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst round = (n: number) => Math.round(n * 100) / 100;\n\nconst getFileSize = (n: number, conversion: ByteConversion) => {\n  const kb = conversion === \"binary\" ? 1024 : 1000;\n  const mb = kb ** 2;\n\n  if (n < kb) {\n    return `${n}B`;\n  } else if (n >= kb && n < mb) {\n    return `${round(n / kb)}KB`;\n  } else {\n    return `${round(n / mb)}MB`;\n  }\n};\n\nexport const FileListItem = ({\n  children,\n  className,\n  errorText,\n  fileSize,\n  bytesConversion = \"decimal\",\n  loading = false,\n  progressProps,\n  removeActionProps,\n  ...rest\n}: FileListItemProps) => {\n  let icon = removeActionProps && <DeleteIcon />;\n  if (loading) {\n    icon = <SpinnerIcon />;\n  } else if (errorText) {\n    icon = <CancelIcon />;\n  }\n\n  const size = fileSize && getFileSize(fileSize, bytesConversion);\n\n  return (\n    <li\n      className={clsx(\n        \"sds-input-file-list__item\",\n        Boolean(errorText) && \"sds-input-file-list__item--error\",\n        \"ssds-typography-body--regular\",\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"sds-input-file-list__item-start\">\n        <div className=\"sds-input-file-list__item-name sds-typography-body--strong\">\n          {children}\n        </div>\n        {size && <div>{size}</div>}\n        {errorText && (\n          <HelpText error className=\"sds-input-file-list__item-error\">\n            {errorText}\n          </HelpText>\n        )}\n      </div>\n      <div className=\"sds-input-file-list__item-end\">\n        {progressProps && (\n          <div\n            role=\"progressbar\"\n            aria-valuenow={progressProps.value}\n            aria-label={progressProps.label}\n          >\n            {progressProps.value}%\n          </div>\n        )}\n        {!loading && removeActionProps && (\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            iconVariant=\"only\"\n            icon={icon}\n            type={removeActionProps.type ?? \"button\"}\n            {...removeActionProps}\n          >\n            {removeActionProps.label}\n          </Button>\n        )}\n        {loading && (\n          <div className=\"sds-input-file-list__item-icon\">\n            <SpinnerIcon />\n          </div>\n        )}\n      </div>\n    </li>\n  );\n};\n"]}
+{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["forwardRef","useId","useState","useEffect","accept","jsxs","jsx","FormField","clsx","DropZone","UploadIcon","Paragraph","Fragment","FileTrigger","Button","_a","DeleteIcon","SpinnerIcon","CancelIcon","HelpText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCO,IAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,CACE,IAkBA,GACG,KAAA;AAnBH,IACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,YAAc,EAAA,SAAA;AAAA,MACd,SAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAc,GAAA,yBAAA;AAAA,MACd,iBAAoB,GAAA,OAAA;AAAA,MACpB,WAAc,GAAA,wBAAA;AAAA,MACd,QAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,OAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KA1DN,GA2CI,EAgBK,EAAA,IAAA,GAAA,SAAA,CAhBL,EAgBK,EAAA;AAAA,MAfH,OAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,mBAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,MAAM,KAAKC,WAAM,EAAA;AACjB,IAAM,MAAA,WAAA,GAAc,GAAG,MAAE,CAAA,EAAA,EAAA,aAAA,CAAA;AACzB,IAAM,MAAA,UAAA,GAAa,GAAG,MAAE,CAAA,EAAA,EAAA,YAAA,CAAA;AACxB,IAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,IAAIC,cAAmC,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,EAAE,CAAA;AACxE,IAAM,MAAA,OAAA,GAAU,EAAE,EAAG,EAAA;AACrB,IAAA,MAAM,oBACJ,OAAO,MAAA,KAAW,WAAW,MAAO,CAAA,KAAA,CAAM,GAAG,CAAI,GAAA,MAAA;AAEnD,IAAA,MAAM,eACJ,GAAA,CAAC,SAAa,IAAA,WAAA,EAAa,QAAY,IAAA,UAAU,CAC9C,CAAA,MAAA,CAAO,OAAO,CAAA,CACd,IAAK,CAAA,GAAG,CAAK,IAAA,MAAA;AAElB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,QAAA,CAAS,KAAK,CAAA;AAAA;AAChB,KACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAkB,KAAA;AACvC,MAAA,OAAO,KAAM,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AAChC,QAAA,MAAM,MAA+B,GAAA,IAAA;AACrC,QAAA,MAAM,SAAsB,EAAC;AAG7B,QAAA,IACE,CAAC,iBAAkB,CAAA,IAAA;AAAA,UAAK,CAACC,YACvB,IAAK,CAAA,IAAA,CAAK,MAAMA,OAAO,CAAA,UAAA,CAAW,GAAK,EAAA,IAAI,CAAC;AAAA,SAE9C,EAAA;AACA,UAAA,MAAA,CAAO,KAAK,MAAM,CAAA;AAAA;AAGpB,QAAI,IAAA,WAAA,IAAe,WAAc,GAAA,IAAA,CAAK,IAAM,EAAA;AAC1C,UAAA,MAAA,CAAO,KAAK,MAAM,CAAA;AAAA;AAIpB,QAAI,IAAA,CAAC,QAAY,IAAA,KAAA,GAAQ,CAAG,EAAA;AAC1B,UAAA,MAAA,CAAO,KAAK,UAAU,CAAA;AAAA;AAGxB,QAAI,IAAA,MAAA,CAAO,SAAS,CAAG,EAAA;AACrB,UAAC,OAAyB,KAAQ,GAAA,MAAA;AAAA;AAGpC,QAAO,OAAA,MAAA;AAAA,OACR,CAAA;AAAA,KACH;AAEA,IAAM,MAAA,cAAA,GAAiB,CAAC,KAAkB,KAAA;AACxC,MAAM,MAAA,MAAA,GAAS,cAAc,KAAK,CAAA;AAClC,MAAA,QAAA,CAAS,CAAC,GAAG,KAAO,EAAA,GAAG,MAAM,CAAC,CAAA;AAC9B,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,CAAC,GAAG,KAAO,EAAA,GAAG,MAAM,CAAA,CAAA;AAAA,KACjC;AAEA,IAAM,MAAA,YAAA,GAAe,CAAC,CAAiB,KAAA;AACrC,MAAA,MAAM,UAAU,YAAY;AAC1B,QAAM,MAAA,QAAA,GAAW,EAAE,KAAM,CAAA,MAAA,CAAO,CAAC,IAAS,KAAA,IAAA,CAAK,SAAS,MAAM,CAAA;AAC9D,QAAA,OAAO,MAAM,OAAQ,CAAA,GAAA;AAAA,UACnB,SAAS,GAAI,CAAA,CAAC,IAAuB,KAAA,IAAA,CAAK,SAAS;AAAA,SACrD;AAAA,OACF;AAEA,MAAA,OAAA,GACG,IAAK,CAAA,cAAc,CACnB,CAAA,KAAA,CAAM,CAAC,GAAiB,KAAA;AACvB,QAAA,OAAA,CAAQ,MAAM,GAAG,CAAA;AACjB,QAAM,MAAA,GAAA;AAAA,OACP,CAAA;AAAA,KACL;AAEA,IAAM,MAAA,cAAA,GAAiB,CAAC,CAAuB,KAAA;AAC7C,MAAA,IAAI,CAAC,CAAG,EAAA;AACR,MAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,CAAC,CAAA;AAC1B,MAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KACtB;AAEA,IACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACb,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA;AAAA,QAACC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAAC,SAAA;AAAA,YACT,gBAAA;AAAA,YACA,SAAa,IAAA,uBAAA;AAAA,YACb;AAAA,WACF;AAAA,UACA,KAAA;AAAA,UACA,SAAA;AAAA,UACA,WAAA;AAAA,UACA,QAAA;AAAA,UACA,UAAA;AAAA,UACA,OAAS,EAAA,EAAA;AAAA,UAET,QAAA,kBAAAH,eAAA;AAAA,YAACI,4BAAA;AAAA,YAAA,aAAA,CAAA,cAAA,CAAA;AAAA,cACC,SAAW,EAAAD,SAAA;AAAA,gBACT,2BAAA;AAAA,gBACA,OAAA,CAAQ,SAAS,CAAK,IAAA;AAAA,eACxB;AAAA,cACA,MAAQ,EAAA,YAAA;AAAA,cACR,YAAY,EAAA,SAAA;AAAA,cACZ,kBAAkB,EAAA,eAAA;AAAA,cAClB,cAAA,EAAc,QAAQ,SAAS,CAAA;AAAA,cAC/B,mBAAA,EAAmB,YAAY,WAAc,GAAA,MAAA;AAAA,cAC7C;AAAA,aAAA,EACI,IAXL,CAAA,EAAA;AAAA,cAaC,QAAA,EAAA;AAAA,gCAAAF,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gCACb,EAAA,QAAA,kBAAAA,cAAA,CAACI,uBAAW,CACd,EAAA,CAAA;AAAA,gCACAL,eAAA,CAACM,iBAAU,EAAA,EAAA,SAAA,EAAU,6BAClB,EAAA,QAAA,EAAA;AAAA,kBAAA,WAAA;AAAA,kBACA,qCAEGN,eAAA,CAAAO,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oCAAAN,cAAA,CAAC,IAAG,EAAA,EAAA,CAAA;AAAA,oBACH;AAAA,mBACH,EAAA;AAAA,iBAEJ,EAAA,CAAA;AAAA,gCACAA,cAAA;AAAA,kBAACO,+BAAA;AAAA,kBAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,OADL,CAAA,EAAA;AAAA,oBAEC,QAAU,EAAA,cAAA;AAAA,oBACV,iBAAA;AAAA,oBACA,cAAgB,EAAA,QAAA;AAAA,oBAChB,aAAe,EAAA,OAAA;AAAA,oBAEf,QAAA,kBAAAP,cAAA;AAAA,sBAACQ,0BAAA;AAAA,sBAAA;AAAA,wBACC,SAAW,EAAAN,SAAA;AAAA,0BACT,YAAA;AAAA,0BACA,cAAA,CAAe,mBAAY,UAAa,GAAA,QAAA;AAAA,yBAC1C;AAAA,wBAEA,QAAC,kBAAAF,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,mBAAA,EAAqB,QAAY,EAAA,WAAA,EAAA;AAAA;AAAA;AACnD,mBAAA;AAAA;AACF;AAAA,aAAA;AAAA;AACF;AAAA,OACF;AAAA,MACC;AAAA,KACH,EAAA,CAAA;AAAA;AAGN;AAEA,SAAA,CAAU,WAAc,GAAA,WAAA;ACnMX,IAAA,QAAA,GAAW,CAAC,EAKJ,KAAA;AALI,EACvB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GAbF,GAUyB,EAIpB,EAAA,IAAA,GAAA,SAAA,CAJoB,EAIpB,EAAA;AAAA,IAHH,UAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EACE,uBAAAD,gBAAC,QAAO,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,SAAA,EAAWG,UAAK,qBAAuB,EAAA,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAA9D,EACE,QAAA,EAAA;AAAA,IAAA,UAAA,oBACCF,cAAAA,CAAC,YAAW,EAAA,EAAA,SAAA,EAAU,qDACnB,QACH,EAAA,UAAA,EAAA,CAAA;AAAA,oBAEFA,cAAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAU,6BAA6B,QAAS,EAAA;AAAA,GACtD,EAAA,CAAA,CAAA;AAEJ;ACRA,IAAM,QAAQ,CAAC,CAAA,KAAc,KAAK,KAAM,CAAA,CAAA,GAAI,GAAG,CAAI,GAAA,GAAA;AAEnD,IAAM,WAAA,GAAc,CAAC,CAAA,EAAW,UAA+B,KAAA;AAC7D,EAAM,MAAA,EAAA,GAAK,UAAe,KAAA,QAAA,GAAW,IAAO,GAAA,GAAA;AAC5C,EAAA,MAAM,KAAK,EAAM,IAAA,CAAA;AAEjB,EAAA,IAAI,IAAI,EAAI,EAAA;AACV,IAAA,OAAO,GAAG,MAAC,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,GACF,MAAA,IAAA,CAAA,IAAK,EAAM,IAAA,CAAA,GAAI,EAAI,EAAA;AAC5B,IAAA,OAAO,EAAG,CAAA,MAAA,CAAA,KAAA,CAAM,CAAI,GAAA,EAAE,CAAC,EAAA,IAAA,CAAA;AAAA,GAClB,MAAA;AACL,IAAA,OAAO,EAAG,CAAA,MAAA,CAAA,KAAA,CAAM,CAAI,GAAA,EAAE,CAAC,EAAA,IAAA,CAAA;AAAA;AAE3B,CAAA;AAEa,IAAA,YAAA,GAAe,CAAC,EAUJ,KAAA;AAVI,EAC3B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAkB,GAAA,SAAA;AAAA,IAClB,OAAU,GAAA,KAAA;AAAA,IACV,aAAA;AAAA,IACA;AAAA,GAzCF,GAiC6B,EASxB,EAAA,IAAA,GAAA,SAAA,CATwB,EASxB,EAAA;AAAA,IARH,UAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAzCF,EAAAS,IAAAA,GAAAA;AA4CE,EAAA,IAAI,IAAO,GAAA,iBAAA,oBAAqBT,cAAAA,CAACU,mBAAW,EAAA,EAAA,CAAA;AAC5C,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,IAAA,mBAAAV,eAACW,oBAAY,EAAA,EAAA,CAAA;AAAA,aACX,SAAW,EAAA;AACpB,IAAO,IAAA,mBAAAX,eAACY,mBAAW,EAAA,EAAA,CAAA;AAAA;AAGrB,EAAA,MAAM,IAAO,GAAA,QAAA,IAAY,WAAY,CAAA,QAAA,EAAU,eAAe,CAAA;AAE9D,EAAA,uBACEb,eAAAA;AAAA,IAAC,IAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAWG,EAAAA,SAAAA;AAAA,QACT,2BAAA;AAAA,QACA,OAAA,CAAQ,SAAS,CAAK,IAAA,kCAAA;AAAA,QACtB,sBAAA;AAAA,QACA;AAAA;AACF,KAAA,EACI,IAPL,CAAA,EAAA;AAAA,MASC,QAAA,EAAA;AAAA,wBAAAH,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCACb,EAAA,QAAA,EAAA;AAAA,0BAAAC,cAAC,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,qDAAA,EACZ,QACH,EAAA,CAAA;AAAA,UACC,IAAQ,oBAAAA,cAAC,CAAA,KAAA,EAAA,EAAK,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,UACnB,SAAA,oBACCA,cAAC,CAAAa,gBAAA,EAAA,EAAS,OAAK,IAAC,EAAA,SAAA,EAAU,mCACvB,QACH,EAAA,SAAA,EAAA;AAAA,SAEJ,EAAA,CAAA;AAAA,wBACAd,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,+BACZ,EAAA,QAAA,EAAA;AAAA,UAAA,aAAA,oBACCA,eAAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,IAAK,EAAA,aAAA;AAAA,cACL,iBAAe,aAAc,CAAA,KAAA;AAAA,cAC7B,cAAY,aAAc,CAAA,KAAA;AAAA,cAEzB,QAAA,EAAA;AAAA,gBAAc,aAAA,CAAA,KAAA;AAAA,gBAAM;AAAA;AAAA;AAAA,WACvB;AAAA,UAED,CAAC,OAAW,IAAA,iBAAA,oBACXC,cAAAA;AAAA,YAACQ,gBAAAA;AAAA,YAAA,aAAA,CAAA,cAAA,CAAA;AAAA,cACC,OAAQ,EAAA,aAAA;AAAA,cACR,IAAK,EAAA,OAAA;AAAA,cACL,WAAY,EAAA,MAAA;AAAA,cACZ,IAAA;AAAA,cACA,IAAMC,EAAAA,CAAAA,GAAAA,GAAA,iBAAkB,CAAA,IAAA,KAAlB,OAAAA,GAA0B,GAAA;AAAA,aAAA,EAC5B,iBANL,CAAA,EAAA;AAAA,cAQE,QAAkB,EAAA,iBAAA,CAAA;AAAA,aAAA;AAAA,WACrB;AAAA,UAED,OAAA,oBACCT,cAAC,CAAA,KAAA,EAAA,EAAI,WAAU,gCACb,EAAA,QAAA,kBAAAA,cAAC,CAAAW,oBAAA,EAAA,EAAY,CACf,EAAA;AAAA,SAEJ,EAAA;AAAA;AAAA,KAAA;AAAA,GACF;AAEJ","file":"index.js","sourcesContent":["import { DropEvent } from \"@react-types/shared\";\nimport { Paragraph } from \"@sikt/sds-core\";\nimport { FormField } from \"@sikt/sds-form\";\nimport { UploadIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, useEffect, useId, useState } from \"react\";\nimport {\n  Button,\n  DropZone,\n  DropZoneProps,\n  FileDropItem,\n  FileTrigger,\n} from \"react-aria-components\";\nimport \"./input-file.pcss\";\n\nexport type FileError = \"type\" | \"size\" | \"multiple\";\n\nexport interface FileWithError extends File {\n  error?: FileError[];\n}\n\nexport interface InputFileProps extends DropZoneProps {\n  label: NonNullable<ReactNode>;\n  \"aria-label\": NonNullable<string>;\n  errorText?: ReactNode;\n  helpText?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n  placeholder?: string;\n  placeholderBridge?: string;\n  triggerText?: ReactNode;\n  onChange?: (newValue: (File | FileWithError)[]) => void;\n  accept: string | string[];\n  multiple?: boolean;\n  capture?: \"user\" | \"environment\";\n  value?: File[];\n  maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n  (\n    {\n      label,\n      \"aria-label\": ariaLabel,\n      errorText,\n      helpText,\n      children,\n      className,\n      placeholder = \"Dra og slipp filer her,\",\n      placeholderBridge = \"eller\",\n      triggerText = \"Åpne filutforskeren\",\n      onChange,\n      accept,\n      multiple = false,\n      capture,\n      value,\n      maxFileSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const errorTextId = `${id}-error-text`;\n    const helpTextId = `${id}-help-text`;\n    const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n    const inputId = { id };\n    const acceptedFileTypes =\n      typeof accept === \"string\" ? accept.split(\",\") : accept;\n\n    const ariaDescribedBy =\n      [errorText && errorTextId, helpText && helpTextId]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    useEffect(() => {\n      if (value) {\n        setFiles(value);\n      }\n    }, [value]);\n\n    const validateFiles = (input: File[]) => {\n      return input.map((file, index) => {\n        const output: File | FileWithError = file;\n        const errors: FileError[] = [];\n\n        // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n        if (\n          !acceptedFileTypes.some((accept) =>\n            file.type.match(accept.replaceAll(\"*\", \".*\")),\n          )\n        ) {\n          errors.push(\"type\");\n        }\n\n        if (maxFileSize && maxFileSize < file.size) {\n          errors.push(\"size\");\n        }\n\n        // TODO: should this be accepted when file1 fails validation?\n        if (!multiple && index > 0) {\n          errors.push(\"multiple\");\n        }\n\n        if (errors.length > 0) {\n          (output as FileWithError).error = errors;\n        }\n\n        return output;\n      });\n    };\n\n    const handleOnChange = (input: File[]) => {\n      const output = validateFiles(input);\n      setFiles([...files, ...output]);\n      onChange?.([...files, ...output]);\n    };\n\n    const handleOnDrop = (e: DropEvent) => {\n      const handler = async () => {\n        const filtered = e.items.filter((item) => item.kind === \"file\");\n        return await Promise.all(\n          filtered.map((item: FileDropItem) => item.getFile()),\n        );\n      };\n\n      handler()\n        .then(handleOnChange)\n        .catch((err: unknown) => {\n          console.error(err);\n          throw err;\n        });\n    };\n\n    const handleOnSelect = (e: FileList | null) => {\n      if (!e) return;\n      const input = Array.from(e);\n      handleOnChange(input);\n    };\n\n    return (\n      <div className=\"sds-input-file-wrapper\">\n        <FormField\n          className={clsx(\n            \"sds-input-file\",\n            errorText && `sds-input-file--error`,\n            className,\n          )}\n          label={label}\n          errorText={errorText}\n          errorTextId={errorTextId}\n          helpText={helpText}\n          helpTextId={helpTextId}\n          htmlFor={id}\n        >\n          <DropZone\n            className={clsx(\n              \"sds-input-file__drop-zone\",\n              Boolean(errorText) && \"sds-input-file__drop-zone--error\",\n            )}\n            onDrop={handleOnDrop}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={Boolean(errorText)}\n            aria-errormessage={errorText ? errorTextId : undefined}\n            ref={ref}\n            {...rest}\n          >\n            <div className=\"sds-input-file__drop-zone-icon\">\n              <UploadIcon />\n            </div>\n            <Paragraph className=\"sds-input-file__placeholder\">\n              {placeholder}\n              {placeholderBridge && (\n                <>\n                  <br />\n                  {placeholderBridge}\n                </>\n              )}\n            </Paragraph>\n            <FileTrigger\n              {...inputId}\n              onSelect={handleOnSelect}\n              acceptedFileTypes={acceptedFileTypes}\n              allowsMultiple={multiple}\n              defaultCamera={capture}\n            >\n              <Button\n                className={clsx(\n                  \"sds-button\",\n                  `sds-button--${errorText ? \"critical\" : \"subtle\"}`,\n                )}\n              >\n                <span className=\"sds-button__label\">{triggerText}</span>\n              </Button>\n            </FileTrigger>\n          </DropZone>\n        </FormField>\n        {children}\n      </div>\n    );\n  },\n);\n\nInputFile.displayName = \"InputFile\";\n","import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport \"./file-list.pcss\";\n\nexport interface FileListProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\n  figCaption?: string;\n}\n\nexport const FileList = ({\n  children,\n  className,\n  figCaption,\n  ...rest\n}: FileListProps) => {\n  return (\n    <figure className={clsx(\"sds-input-file-list\", className)} {...rest}>\n      {figCaption && (\n        <figcaption className=\"sds-input-file-list__caption sds-typography-label\">\n          {figCaption}\n        </figcaption>\n      )}\n      <ul className=\"sds-input-file-list__list\">{children}</ul>\n    </figure>\n  );\n};\n","import { Button, ButtonProps } from \"@sikt/sds-button\";\nimport { HelpText } from \"@sikt/sds-form\";\nimport { SpinnerIcon, DeleteIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport type ByteConversion = \"binary\" | \"decimal\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n  errorText?: ReactNode;\n  fileSize?: number;\n  bytesConversion?: ByteConversion;\n  loading?: boolean;\n  progressProps?: { label: string; value: number };\n  removeActionProps?: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst round = (n: number) => Math.round(n * 100) / 100;\n\nconst getFileSize = (n: number, conversion: ByteConversion) => {\n  const kb = conversion === \"binary\" ? 1024 : 1000;\n  const mb = kb ** 2;\n\n  if (n < kb) {\n    return `${n}B`;\n  } else if (n >= kb && n < mb) {\n    return `${round(n / kb)}KB`;\n  } else {\n    return `${round(n / mb)}MB`;\n  }\n};\n\nexport const FileListItem = ({\n  children,\n  className,\n  errorText,\n  fileSize,\n  bytesConversion = \"decimal\",\n  loading = false,\n  progressProps,\n  removeActionProps,\n  ...rest\n}: FileListItemProps) => {\n  let icon = removeActionProps && <DeleteIcon />;\n  if (loading) {\n    icon = <SpinnerIcon />;\n  } else if (errorText) {\n    icon = <CancelIcon />;\n  }\n\n  const size = fileSize && getFileSize(fileSize, bytesConversion);\n\n  return (\n    <li\n      className={clsx(\n        \"sds-input-file-list__item\",\n        Boolean(errorText) && \"sds-input-file-list__item--error\",\n        \"ssds-typography-body\",\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"sds-input-file-list__item-start\">\n        <div className=\"sds-input-file-list__item-name sds-typography-label\">\n          {children}\n        </div>\n        {size && <div>{size}</div>}\n        {errorText && (\n          <HelpText error className=\"sds-input-file-list__item-error\">\n            {errorText}\n          </HelpText>\n        )}\n      </div>\n      <div className=\"sds-input-file-list__item-end\">\n        {progressProps && (\n          <div\n            role=\"progressbar\"\n            aria-valuenow={progressProps.value}\n            aria-label={progressProps.label}\n          >\n            {progressProps.value}%\n          </div>\n        )}\n        {!loading && removeActionProps && (\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            iconVariant=\"only\"\n            icon={icon}\n            type={removeActionProps.type ?? \"button\"}\n            {...removeActionProps}\n          >\n            {removeActionProps.label}\n          </Button>\n        )}\n        {loading && (\n          <div className=\"sds-input-file-list__item-icon\">\n            <SpinnerIcon />\n          </div>\n        )}\n      </div>\n    </li>\n  );\n};\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{Paragraph as e}from"@sikt/sds-core";import{FormField as r,HelpText as l}from"@sikt/sds-form";import{UploadIcon as i,SpinnerIcon as t,DeleteIcon as s,CancelIcon as a}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{forwardRef as n,useId as c,useState as p,useEffect as d}from"react";import{DropZone as m,FileTrigger as u,Button as f}from"react-aria-components";import{jsx as h,jsxs as b,Fragment as g}from"react/jsx-runtime";import{Button as v}from"@sikt/sds-button";import{clsx as y}from"clsx";var _=Object.defineProperty,N=Object.defineProperties,x=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,O=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable,P=(e,r,l)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[r]=l,B=(e,r)=>{for(var l in r||(r={}))O.call(r,l)&&P(e,l,r[l]);if(T)for(var l of T(r))z.call(r,l)&&P(e,l,r[l]);return e},w=(e,r)=>N(e,x(r)),j=(e,r)=>{var l={};for(var i in e)O.call(e,i)&&r.indexOf(i)<0&&(l[i]=e[i]);if(null!=e&&T)for(var i of T(e))r.indexOf(i)<0&&z.call(e,i)&&(l[i]=e[i]);return l},C=n(((l,t)=>{var s=l,{label:a,"aria-label":n,errorText:v,helpText:y,className:_,placeholder:N="Dra og slipp filer her,",placeholderBridge:x="eller",triggerText:T="Åpne filutforskeren",onChange:O,accept:z,multiple:P=!1,capture:C,value:k,maxFileSize:F}=s,S=j(s,["label","aria-label","errorText","helpText","className","placeholder","placeholderBridge","triggerText","onChange","accept","multiple","capture","value","maxFileSize"]);const A=c(),D="".concat(A,"-help-text"),[I,M]=p(null!=k?k:[]),E={id:A},K="string"==typeof z?z.split(","):z;d((()=>{k&&M(k)}),[k]);const V=e=>{const r=(e=>e.map(((e,r)=>{const l=e,i=[];return K.some((r=>e.type.match(r.replaceAll("*",".*"))))||i.push("type"),F&&F<e.size&&i.push("size"),!P&&r>0&&i.push("multiple"),i.length>0&&(l.error=i),l})))(e);M([...I,...r]),null==O||O([...I,...r])};return h(r,{className:o("sds-input-file",v&&"sds-input-file--error",_),label:a,errorText:v,helpText:y,htmlFor:A,helpTextId:D,children:b(m,w(B({className:o("sds-input-file__drop-zone",Boolean(v)&&"sds-input-file__drop-zone--error"),onDrop:e=>{(async()=>{const r=e.items.filter((e=>"file"===e.kind));return await Promise.all(r.map((e=>e.getFile())))})().then(V).catch((e=>{throw console.error(e),e}))},"aria-label":n,"aria-describedby":(null!=v?v:y)?D:void 0,"aria-invalid":Boolean(v),"aria-errormessage":v?D:void 0,ref:t},S),{children:[h("div",{className:"sds-input-file__drop-zone-icon",children:h(i,{})}),b(e,{className:"sds-input-file__placeholder",children:[N,x&&b(g,{children:[h("br",{}),x]})]}),h(u,w(B({},E),{onSelect:e=>{if(!e)return;const r=Array.from(e);V(r)},acceptedFileTypes:K,allowsMultiple:P,defaultCamera:C,children:h(f,{className:o("sds-button","sds-button--".concat(v?"critical":"subtle")),children:h("span",{className:"sds-button__label",children:T})})}))]}))})}));C.displayName="InputFile";var k=e=>{var r=e,{children:l,className:i,figCaption:t}=r,s=j(r,["children","className","figCaption"]);return b("figure",w(B({className:o("sds-input-file-list",i)},s),{children:[t&&h("figcaption",{className:"sds-input-file-list__caption sds-typography-heading--paragraph",children:t}),h("ul",{className:"sds-input-file-list__list",children:l})]}))},F=e=>Math.round(100*e)/100,S=e=>{var r,i=e,{children:o,className:n,errorText:c,fileSize:p,bytesConversion:d="decimal",loading:m=!1,progressProps:u,removeActionProps:f}=i,g=j(i,["children","className","errorText","fileSize","bytesConversion","loading","progressProps","removeActionProps"]);let _=f&&h(s,{});m?_=h(t,{}):c&&(_=h(a,{}));const N=p&&((e,r)=>{const l="binary"===r?1024:1e3,i=l**2;return e<l?"".concat(e,"B"):e>=l&&e<i?"".concat(F(e/l),"KB"):"".concat(F(e/i),"MB")})(p,d);return b("li",w(B({className:y("sds-input-file-list__item",Boolean(c)&&"sds-input-file-list__item--error","ssds-typography-body--regular",n)},g),{children:[b("div",{className:"sds-input-file-list__item-start",children:[h("div",{className:"sds-input-file-list__item-name sds-typography-body--strong",children:o}),N&&h("div",{children:N}),c&&h(l,{error:!0,className:"sds-input-file-list__item-error",children:c})]}),b("div",{className:"sds-input-file-list__item-end",children:[u&&b("div",{role:"progressbar","aria-valuenow":u.value,"aria-label":u.label,children:[u.value,"%"]}),!m&&f&&h(v,w(B({variant:"transparent",size:"small",iconVariant:"only",icon:_,type:null!=(r=f.type)?r:"button"},f),{children:f.label})),m&&h("div",{className:"sds-input-file-list__item-icon",children:h(t,{})})]})]}))};export{k as FileList,S as FileListItem,C as InputFile};//# sourceMappingURL=index.mjs.map
+import{Paragraph as e}from"@sikt/sds-core";import{FormField as r,HelpText as l}from"@sikt/sds-form";import{UploadIcon as i,SpinnerIcon as t,DeleteIcon as s,CancelIcon as a}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{forwardRef as n,useId as c,useState as p,useEffect as d}from"react";import{DropZone as m,FileTrigger as u,Button as f}from"react-aria-components";import{jsxs as h,jsx as b,Fragment as v}from"react/jsx-runtime";import{Button as y}from"@sikt/sds-button";import{clsx as g}from"clsx";var _=Object.defineProperty,x=Object.defineProperties,N=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,O=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable,B=(e,r,l)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[r]=l,P=(e,r)=>{for(var l in r||(r={}))O.call(r,l)&&B(e,l,r[l]);if(T)for(var l of T(r))z.call(r,l)&&B(e,l,r[l]);return e},w=(e,r)=>x(e,N(r)),j=(e,r)=>{var l={};for(var i in e)O.call(e,i)&&r.indexOf(i)<0&&(l[i]=e[i]);if(null!=e&&T)for(var i of T(e))r.indexOf(i)<0&&z.call(e,i)&&(l[i]=e[i]);return l},C=n(((l,t)=>{var s=l,{label:a,"aria-label":n,errorText:y,helpText:g,children:_,className:x,placeholder:N="Dra og slipp filer her,",placeholderBridge:T="eller",triggerText:O="Åpne filutforskeren",onChange:z,accept:B,multiple:C=!1,capture:k,value:F,maxFileSize:S}=s,A=j(s,["label","aria-label","errorText","helpText","children","className","placeholder","placeholderBridge","triggerText","onChange","accept","multiple","capture","value","maxFileSize"]);const I=c(),D="".concat(I,"-error-text"),M="".concat(I,"-help-text"),[E,K]=p(null!=F?F:[]),V={id:I},q="string"==typeof B?B.split(","):B,G=[y&&D,g&&M].filter(Boolean).join(" ")||void 0;d((()=>{F&&K(F)}),[F]);const H=e=>{const r=(e=>e.map(((e,r)=>{const l=e,i=[];return q.some((r=>e.type.match(r.replaceAll("*",".*"))))||i.push("type"),S&&S<e.size&&i.push("size"),!C&&r>0&&i.push("multiple"),i.length>0&&(l.error=i),l})))(e);K([...E,...r]),null==z||z([...E,...r])};return h("div",{className:"sds-input-file-wrapper",children:[b(r,{className:o("sds-input-file",y&&"sds-input-file--error",x),label:a,errorText:y,errorTextId:D,helpText:g,helpTextId:M,htmlFor:I,children:h(m,w(P({className:o("sds-input-file__drop-zone",Boolean(y)&&"sds-input-file__drop-zone--error"),onDrop:e=>{(async()=>{const r=e.items.filter((e=>"file"===e.kind));return await Promise.all(r.map((e=>e.getFile())))})().then(H).catch((e=>{throw console.error(e),e}))},"aria-label":n,"aria-describedby":G,"aria-invalid":Boolean(y),"aria-errormessage":y?D:void 0,ref:t},A),{children:[b("div",{className:"sds-input-file__drop-zone-icon",children:b(i,{})}),h(e,{className:"sds-input-file__placeholder",children:[N,T&&h(v,{children:[b("br",{}),T]})]}),b(u,w(P({},V),{onSelect:e=>{if(!e)return;const r=Array.from(e);H(r)},acceptedFileTypes:q,allowsMultiple:C,defaultCamera:k,children:b(f,{className:o("sds-button","sds-button--".concat(y?"critical":"subtle")),children:b("span",{className:"sds-button__label",children:O})})}))]}))}),_]})}));C.displayName="InputFile";var k=e=>{var r=e,{children:l,className:i,figCaption:t}=r,s=j(r,["children","className","figCaption"]);return h("figure",w(P({className:o("sds-input-file-list",i)},s),{children:[t&&b("figcaption",{className:"sds-input-file-list__caption sds-typography-label",children:t}),b("ul",{className:"sds-input-file-list__list",children:l})]}))},F=e=>Math.round(100*e)/100,S=e=>{var r,i=e,{children:o,className:n,errorText:c,fileSize:p,bytesConversion:d="decimal",loading:m=!1,progressProps:u,removeActionProps:f}=i,v=j(i,["children","className","errorText","fileSize","bytesConversion","loading","progressProps","removeActionProps"]);let _=f&&b(s,{});m?_=b(t,{}):c&&(_=b(a,{}));const x=p&&((e,r)=>{const l="binary"===r?1024:1e3,i=l**2;return e<l?"".concat(e,"B"):e>=l&&e<i?"".concat(F(e/l),"KB"):"".concat(F(e/i),"MB")})(p,d);return h("li",w(P({className:g("sds-input-file-list__item",Boolean(c)&&"sds-input-file-list__item--error","ssds-typography-body",n)},v),{children:[h("div",{className:"sds-input-file-list__item-start",children:[b("div",{className:"sds-input-file-list__item-name sds-typography-label",children:o}),x&&b("div",{children:x}),c&&b(l,{error:!0,className:"sds-input-file-list__item-error",children:c})]}),h("div",{className:"sds-input-file-list__item-end",children:[u&&h("div",{role:"progressbar","aria-valuenow":u.value,"aria-label":u.label,children:[u.value,"%"]}),!m&&f&&b(y,w(P({variant:"transparent",size:"small",iconVariant:"only",icon:_,type:null!=(r=f.type)?r:"button"},f),{children:f.label})),m&&b("div",{className:"sds-input-file-list__item-icon",children:b(t,{})})]})]}))};export{k as FileList,S as FileListItem,C as InputFile};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["accept","jsxs","clsx","jsx","_a","Button"],"mappings":"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","file":"index.mjs","sourcesContent":["import { DropEvent } from \"@react-types/shared\";\nimport { Paragraph } from \"@sikt/sds-core\";\nimport { FormField } from \"@sikt/sds-form\";\nimport { UploadIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, useEffect, useId, useState } from \"react\";\nimport {\n  Button,\n  DropZone,\n  DropZoneProps,\n  FileDropItem,\n  FileTrigger,\n} from \"react-aria-components\";\nimport \"./input-file.pcss\";\n\nexport type FileError = \"type\" | \"size\" | \"multiple\";\n\nexport interface FileWithError extends File {\n  error?: FileError[];\n}\n\nexport interface InputFileProps extends DropZoneProps {\n  label: NonNullable<ReactNode>;\n  \"aria-label\": NonNullable<string>;\n  errorText?: ReactNode;\n  helpText?: ReactNode;\n  className?: string;\n  placeholder?: string;\n  placeholderBridge?: string;\n  triggerText?: ReactNode;\n  onChange?: (newValue: (File | FileWithError)[]) => void;\n  accept: string | string[];\n  multiple?: boolean;\n  capture?: \"user\" | \"environment\";\n  value?: File[];\n  maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n  (\n    {\n      label,\n      \"aria-label\": ariaLabel,\n      errorText,\n      helpText,\n      className,\n      placeholder = \"Dra og slipp filer her,\",\n      placeholderBridge = \"eller\",\n      triggerText = \"Åpne filutforskeren\",\n      onChange,\n      accept,\n      multiple = false,\n      capture,\n      value,\n      maxFileSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const helpTextId = `${id}-help-text`;\n    const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n    const inputId = { id };\n    const acceptedFileTypes =\n      typeof accept === \"string\" ? accept.split(\",\") : accept;\n\n    useEffect(() => {\n      if (value) {\n        setFiles(value);\n      }\n    }, [value]);\n\n    const validateFiles = (input: File[]) => {\n      return input.map((file, index) => {\n        const output: File | FileWithError = file;\n        const errors: FileError[] = [];\n\n        // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n        if (\n          !acceptedFileTypes.some((accept) =>\n            file.type.match(accept.replaceAll(\"*\", \".*\")),\n          )\n        ) {\n          errors.push(\"type\");\n        }\n\n        if (maxFileSize && maxFileSize < file.size) {\n          errors.push(\"size\");\n        }\n\n        // TODO: should this be accepted when file1 fails validation?\n        if (!multiple && index > 0) {\n          errors.push(\"multiple\");\n        }\n\n        if (errors.length > 0) {\n          (output as FileWithError).error = errors;\n        }\n\n        return output;\n      });\n    };\n\n    const handleOnChange = (input: File[]) => {\n      const output = validateFiles(input);\n      setFiles([...files, ...output]);\n      onChange?.([...files, ...output]);\n    };\n\n    const handleOnDrop = (e: DropEvent) => {\n      const handler = async () => {\n        const filtered = e.items.filter((item) => item.kind === \"file\");\n        return await Promise.all(\n          filtered.map((item: FileDropItem) => item.getFile()),\n        );\n      };\n\n      handler()\n        .then(handleOnChange)\n        .catch((err: unknown) => {\n          console.error(err);\n          throw err;\n        });\n    };\n\n    const handleOnSelect = (e: FileList | null) => {\n      if (!e) return;\n      const input = Array.from(e);\n      handleOnChange(input);\n    };\n\n    return (\n      <FormField\n        className={clsx(\n          \"sds-input-file\",\n          errorText && `sds-input-file--error`,\n          className,\n        )}\n        label={label}\n        errorText={errorText}\n        helpText={helpText}\n        htmlFor={id}\n        helpTextId={helpTextId}\n      >\n        <DropZone\n          className={clsx(\n            \"sds-input-file__drop-zone\",\n            Boolean(errorText) && \"sds-input-file__drop-zone--error\",\n          )}\n          onDrop={handleOnDrop}\n          aria-label={ariaLabel}\n          aria-describedby={(errorText ?? helpText) ? helpTextId : undefined}\n          aria-invalid={Boolean(errorText)}\n          aria-errormessage={errorText ? helpTextId : undefined}\n          ref={ref}\n          {...rest}\n        >\n          <div className=\"sds-input-file__drop-zone-icon\">\n            <UploadIcon />\n          </div>\n          <Paragraph className=\"sds-input-file__placeholder\">\n            {placeholder}\n            {placeholderBridge && (\n              <>\n                <br />\n                {placeholderBridge}\n              </>\n            )}\n          </Paragraph>\n          <FileTrigger\n            {...inputId}\n            onSelect={handleOnSelect}\n            acceptedFileTypes={acceptedFileTypes}\n            allowsMultiple={multiple}\n            defaultCamera={capture}\n          >\n            <Button\n              className={clsx(\n                \"sds-button\",\n                `sds-button--${errorText ? \"critical\" : \"subtle\"}`,\n              )}\n            >\n              <span className=\"sds-button__label\">{triggerText}</span>\n            </Button>\n          </FileTrigger>\n        </DropZone>\n      </FormField>\n    );\n  },\n);\n\nInputFile.displayName = \"InputFile\";\n","import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport \"./file-list.pcss\";\n\nexport interface FileListProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\n  figCaption?: string;\n}\n\nexport const FileList = ({\n  children,\n  className,\n  figCaption,\n  ...rest\n}: FileListProps) => {\n  return (\n    <figure className={clsx(\"sds-input-file-list\", className)} {...rest}>\n      {figCaption && (\n        <figcaption className=\"sds-input-file-list__caption sds-typography-heading--paragraph\">\n          {figCaption}\n        </figcaption>\n      )}\n      <ul className=\"sds-input-file-list__list\">{children}</ul>\n    </figure>\n  );\n};\n","import { Button, ButtonProps } from \"@sikt/sds-button\";\nimport { HelpText } from \"@sikt/sds-form\";\nimport { SpinnerIcon, DeleteIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport type ByteConversion = \"binary\" | \"decimal\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n  errorText?: ReactNode;\n  fileSize?: number;\n  bytesConversion?: ByteConversion;\n  loading?: boolean;\n  progressProps?: { label: string; value: number };\n  removeActionProps?: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst round = (n: number) => Math.round(n * 100) / 100;\n\nconst getFileSize = (n: number, conversion: ByteConversion) => {\n  const kb = conversion === \"binary\" ? 1024 : 1000;\n  const mb = kb ** 2;\n\n  if (n < kb) {\n    return `${n}B`;\n  } else if (n >= kb && n < mb) {\n    return `${round(n / kb)}KB`;\n  } else {\n    return `${round(n / mb)}MB`;\n  }\n};\n\nexport const FileListItem = ({\n  children,\n  className,\n  errorText,\n  fileSize,\n  bytesConversion = \"decimal\",\n  loading = false,\n  progressProps,\n  removeActionProps,\n  ...rest\n}: FileListItemProps) => {\n  let icon = removeActionProps && <DeleteIcon />;\n  if (loading) {\n    icon = <SpinnerIcon />;\n  } else if (errorText) {\n    icon = <CancelIcon />;\n  }\n\n  const size = fileSize && getFileSize(fileSize, bytesConversion);\n\n  return (\n    <li\n      className={clsx(\n        \"sds-input-file-list__item\",\n        Boolean(errorText) && \"sds-input-file-list__item--error\",\n        \"ssds-typography-body--regular\",\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"sds-input-file-list__item-start\">\n        <div className=\"sds-input-file-list__item-name sds-typography-body--strong\">\n          {children}\n        </div>\n        {size && <div>{size}</div>}\n        {errorText && (\n          <HelpText error className=\"sds-input-file-list__item-error\">\n            {errorText}\n          </HelpText>\n        )}\n      </div>\n      <div className=\"sds-input-file-list__item-end\">\n        {progressProps && (\n          <div\n            role=\"progressbar\"\n            aria-valuenow={progressProps.value}\n            aria-label={progressProps.label}\n          >\n            {progressProps.value}%\n          </div>\n        )}\n        {!loading && removeActionProps && (\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            iconVariant=\"only\"\n            icon={icon}\n            type={removeActionProps.type ?? \"button\"}\n            {...removeActionProps}\n          >\n            {removeActionProps.label}\n          </Button>\n        )}\n        {loading && (\n          <div className=\"sds-input-file-list__item-icon\">\n            <SpinnerIcon />\n          </div>\n        )}\n      </div>\n    </li>\n  );\n};\n"]}
+{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["accept","jsxs","clsx","jsx","_a","Button"],"mappings":"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","file":"index.mjs","sourcesContent":["import { DropEvent } from \"@react-types/shared\";\nimport { Paragraph } from \"@sikt/sds-core\";\nimport { FormField } from \"@sikt/sds-form\";\nimport { UploadIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, useEffect, useId, useState } from \"react\";\nimport {\n  Button,\n  DropZone,\n  DropZoneProps,\n  FileDropItem,\n  FileTrigger,\n} from \"react-aria-components\";\nimport \"./input-file.pcss\";\n\nexport type FileError = \"type\" | \"size\" | \"multiple\";\n\nexport interface FileWithError extends File {\n  error?: FileError[];\n}\n\nexport interface InputFileProps extends DropZoneProps {\n  label: NonNullable<ReactNode>;\n  \"aria-label\": NonNullable<string>;\n  errorText?: ReactNode;\n  helpText?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n  placeholder?: string;\n  placeholderBridge?: string;\n  triggerText?: ReactNode;\n  onChange?: (newValue: (File | FileWithError)[]) => void;\n  accept: string | string[];\n  multiple?: boolean;\n  capture?: \"user\" | \"environment\";\n  value?: File[];\n  maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n  (\n    {\n      label,\n      \"aria-label\": ariaLabel,\n      errorText,\n      helpText,\n      children,\n      className,\n      placeholder = \"Dra og slipp filer her,\",\n      placeholderBridge = \"eller\",\n      triggerText = \"Åpne filutforskeren\",\n      onChange,\n      accept,\n      multiple = false,\n      capture,\n      value,\n      maxFileSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const errorTextId = `${id}-error-text`;\n    const helpTextId = `${id}-help-text`;\n    const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n    const inputId = { id };\n    const acceptedFileTypes =\n      typeof accept === \"string\" ? accept.split(\",\") : accept;\n\n    const ariaDescribedBy =\n      [errorText && errorTextId, helpText && helpTextId]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    useEffect(() => {\n      if (value) {\n        setFiles(value);\n      }\n    }, [value]);\n\n    const validateFiles = (input: File[]) => {\n      return input.map((file, index) => {\n        const output: File | FileWithError = file;\n        const errors: FileError[] = [];\n\n        // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n        if (\n          !acceptedFileTypes.some((accept) =>\n            file.type.match(accept.replaceAll(\"*\", \".*\")),\n          )\n        ) {\n          errors.push(\"type\");\n        }\n\n        if (maxFileSize && maxFileSize < file.size) {\n          errors.push(\"size\");\n        }\n\n        // TODO: should this be accepted when file1 fails validation?\n        if (!multiple && index > 0) {\n          errors.push(\"multiple\");\n        }\n\n        if (errors.length > 0) {\n          (output as FileWithError).error = errors;\n        }\n\n        return output;\n      });\n    };\n\n    const handleOnChange = (input: File[]) => {\n      const output = validateFiles(input);\n      setFiles([...files, ...output]);\n      onChange?.([...files, ...output]);\n    };\n\n    const handleOnDrop = (e: DropEvent) => {\n      const handler = async () => {\n        const filtered = e.items.filter((item) => item.kind === \"file\");\n        return await Promise.all(\n          filtered.map((item: FileDropItem) => item.getFile()),\n        );\n      };\n\n      handler()\n        .then(handleOnChange)\n        .catch((err: unknown) => {\n          console.error(err);\n          throw err;\n        });\n    };\n\n    const handleOnSelect = (e: FileList | null) => {\n      if (!e) return;\n      const input = Array.from(e);\n      handleOnChange(input);\n    };\n\n    return (\n      <div className=\"sds-input-file-wrapper\">\n        <FormField\n          className={clsx(\n            \"sds-input-file\",\n            errorText && `sds-input-file--error`,\n            className,\n          )}\n          label={label}\n          errorText={errorText}\n          errorTextId={errorTextId}\n          helpText={helpText}\n          helpTextId={helpTextId}\n          htmlFor={id}\n        >\n          <DropZone\n            className={clsx(\n              \"sds-input-file__drop-zone\",\n              Boolean(errorText) && \"sds-input-file__drop-zone--error\",\n            )}\n            onDrop={handleOnDrop}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={Boolean(errorText)}\n            aria-errormessage={errorText ? errorTextId : undefined}\n            ref={ref}\n            {...rest}\n          >\n            <div className=\"sds-input-file__drop-zone-icon\">\n              <UploadIcon />\n            </div>\n            <Paragraph className=\"sds-input-file__placeholder\">\n              {placeholder}\n              {placeholderBridge && (\n                <>\n                  <br />\n                  {placeholderBridge}\n                </>\n              )}\n            </Paragraph>\n            <FileTrigger\n              {...inputId}\n              onSelect={handleOnSelect}\n              acceptedFileTypes={acceptedFileTypes}\n              allowsMultiple={multiple}\n              defaultCamera={capture}\n            >\n              <Button\n                className={clsx(\n                  \"sds-button\",\n                  `sds-button--${errorText ? \"critical\" : \"subtle\"}`,\n                )}\n              >\n                <span className=\"sds-button__label\">{triggerText}</span>\n              </Button>\n            </FileTrigger>\n          </DropZone>\n        </FormField>\n        {children}\n      </div>\n    );\n  },\n);\n\nInputFile.displayName = \"InputFile\";\n","import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport \"./file-list.pcss\";\n\nexport interface FileListProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\n  figCaption?: string;\n}\n\nexport const FileList = ({\n  children,\n  className,\n  figCaption,\n  ...rest\n}: FileListProps) => {\n  return (\n    <figure className={clsx(\"sds-input-file-list\", className)} {...rest}>\n      {figCaption && (\n        <figcaption className=\"sds-input-file-list__caption sds-typography-label\">\n          {figCaption}\n        </figcaption>\n      )}\n      <ul className=\"sds-input-file-list__list\">{children}</ul>\n    </figure>\n  );\n};\n","import { Button, ButtonProps } from \"@sikt/sds-button\";\nimport { HelpText } from \"@sikt/sds-form\";\nimport { SpinnerIcon, DeleteIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport type ByteConversion = \"binary\" | \"decimal\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n  errorText?: ReactNode;\n  fileSize?: number;\n  bytesConversion?: ByteConversion;\n  loading?: boolean;\n  progressProps?: { label: string; value: number };\n  removeActionProps?: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst round = (n: number) => Math.round(n * 100) / 100;\n\nconst getFileSize = (n: number, conversion: ByteConversion) => {\n  const kb = conversion === \"binary\" ? 1024 : 1000;\n  const mb = kb ** 2;\n\n  if (n < kb) {\n    return `${n}B`;\n  } else if (n >= kb && n < mb) {\n    return `${round(n / kb)}KB`;\n  } else {\n    return `${round(n / mb)}MB`;\n  }\n};\n\nexport const FileListItem = ({\n  children,\n  className,\n  errorText,\n  fileSize,\n  bytesConversion = \"decimal\",\n  loading = false,\n  progressProps,\n  removeActionProps,\n  ...rest\n}: FileListItemProps) => {\n  let icon = removeActionProps && <DeleteIcon />;\n  if (loading) {\n    icon = <SpinnerIcon />;\n  } else if (errorText) {\n    icon = <CancelIcon />;\n  }\n\n  const size = fileSize && getFileSize(fileSize, bytesConversion);\n\n  return (\n    <li\n      className={clsx(\n        \"sds-input-file-list__item\",\n        Boolean(errorText) && \"sds-input-file-list__item--error\",\n        \"ssds-typography-body\",\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"sds-input-file-list__item-start\">\n        <div className=\"sds-input-file-list__item-name sds-typography-label\">\n          {children}\n        </div>\n        {size && <div>{size}</div>}\n        {errorText && (\n          <HelpText error className=\"sds-input-file-list__item-error\">\n            {errorText}\n          </HelpText>\n        )}\n      </div>\n      <div className=\"sds-input-file-list__item-end\">\n        {progressProps && (\n          <div\n            role=\"progressbar\"\n            aria-valuenow={progressProps.value}\n            aria-label={progressProps.label}\n          >\n            {progressProps.value}%\n          </div>\n        )}\n        {!loading && removeActionProps && (\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            iconVariant=\"only\"\n            icon={icon}\n            type={removeActionProps.type ?? \"button\"}\n            {...removeActionProps}\n          >\n            {removeActionProps.label}\n          </Button>\n        )}\n        {loading && (\n          <div className=\"sds-input-file-list__item-icon\">\n            <SpinnerIcon />\n          </div>\n        )}\n      </div>\n    </li>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-input-file",
-  "version": "0.2.7",
+  "version": "1.0.1",
   "license": "MIT",
   "type": "commonjs",
   "main": "dist/index.js",
@@ -31,12 +31,11 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@phosphor-icons/react": "^2.1.7",
-    "@sikt/sds-button": "^4.0.1",
-    "@sikt/sds-core": "^4.4.0",
-    "@sikt/sds-form": "^3.0.3",
+    "@sikt/sds-button": "^4.2.0",
+    "@sikt/sds-core": "^4.6.0",
+    "@sikt/sds-form": "^4.0.1",
     "@sikt/sds-icons": "^3.0.0",
-    "react-aria-components": "^1.7.1"
+    "react-aria-components": "^1.10.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",