@sikt/sds-input-file 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.3.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@1.3.0...@sikt/sds-input-file@1.3.1) (2025-10-09)
+
+### Bug Fixes
+
+- **deps:** update dependency react-aria-components to ^1.12.2 ([d6c8b67](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/d6c8b67afbb193c3237a467b1c5be94dfb90734d))
+- update border color token ([629a582](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/629a582023f405acdec8bede427e285847795891))
+
+## [1.3.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@1.2.0...@sikt/sds-input-file@1.3.0) (2025-09-10)
+
+### Features
+
+- **input-file:** add min file size 0 validation ([3444986](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/34449863b981a75b01eec406b32937648c50ac23))
+
 ## [1.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@1.1.0...@sikt/sds-input-file@1.2.0) (2025-09-09)
 
 ### Features

package/dist/index.css

@@ -6,7 +6,7 @@
 }
 .sds-input-file__drop-zone {
   align-items: center;
-  border: var(--sds-space-border-weight-regular) dashed var(--sds-color-interaction-neutral-strong-default);
+  border: var(--sds-space-border-weight-regular) dashed var(--sds-color-layout-divider-strong);
   border-radius: var(--sds-space-border-radius-medium);
   cursor: pointer;
   display: flex;
@@ -21,7 +21,7 @@
 .sds-input-file__drop-zone[data-hovered],
 .sds-input-file__drop-zone[data-drop-target],
 .sds-input-file__drop-zone[data-focus-visible] {
-  border-color: var(--sds-color-interaction-neutral-strong-highlight);
+  border-color: var(--sds-color-layout-divider-strong);
 }
 .sds-input-file__drop-zone[data-drop-target],
 .sds-input-file__drop-zone[data-focus-visible] {

package/dist/index.css.map

@@ -1 +1 @@
-{"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__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-interaction-neutral-subtle-default);\n    border-radius: var(--sds-space-border-radius-small);\n    color: var(--sds-color-text-primary);\n    display: flex;\n    flex-flow: row wrap;\n    gap: var(--sds-space-padding-tiny);\n    justify-content: space-between;\n    padding: var(--sds-space-padding-minimal);\n    padding-right: var(--sds-space-padding-small);\n  }\n\n  .sds-input-file-list__item-start {\n      display: flex;\n      flex-flow: row wrap;\n      gap: var(--sds-space-padding-tiny);\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      --input-file-list-icon-background-color: var(\n        --sds-color-support-success-strong\n      );\n      --input-file-list-icon-color: var(--sds-color-text-on-strong);\n\n      align-items: center;\n      background-color: var(--input-file-list-icon-background-color);\n      border-radius: var(--sds-space-border-radius-full);\n      color: var(--input-file-list-icon-color);\n      display: flex;\n      font-size: var(--sds-typography-fontsize-500);\n      justify-content: center;\n      height: var(--sds-typography-fontsize-700);\n      min-width: var(--sds-typography-fontsize-700);\n    }\n\n  .sds-input-file-list__item-icon--loading {\n        --input-file-list-icon-background-color: var(\n          --sds-color-interaction-neutral-transparent-pressed\n        );\n        --input-file-list-icon-color: var(--sds-color-text-primary);\n      }\n\n  .sds-input-file-list__item-size {\n      color: var(--sds-color-text-secondary);\n      font-size: var(--sds-typography-fontsize-200);\n    }\n\n  .sds-input-file-list__item-error {\n      padding: 0;\n    }\n\n  .sds-input-file-list__item-error .sds-input-file-list__item-icon {\n        --input-file-list-icon-background-color: var(\n          --sds-color-support-critical-strong\n        );\n      }\n\n  .sds-input-file-list__item--error {\n      background-color: var(--sds-color-support-critical-subtle);\n    }\n\n  .sds-input-file-list__item--error .sds-input-file-list__item-icon {\n        --input-file-list-icon-background-color: var(\n          --sds-color-support-critical-strong\n        );\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,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,cAAY;AACZ,UAAQ;AACR,WAAS,IAAI,0BAA0B;AACzC;AAEA,CAAC;AACC,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,OAAK,IAAI;AACT,mBAAiB;AACjB,WAAS,IAAI;AACb,iBAAe,IAAI;AACrB;AAEA,CAAC;AACG,WAAS;AACT,aAAW,IAAI;AACf,OAAK,IAAI;AACX;AAEF,CAAC;AACG,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AAEF,CAAC;AACG,2CAAyC,KACvC;AAEF,gCAA8B,IAAI;AAElC,eAAa;AACb,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,UAAQ,IAAI;AACZ,aAAW,IAAI;AACjB;AAEF,CAAC;AACK,2CAAyC,KACvC;AAEF,gCAA8B,IAAI;AACpC;AAEJ,CAAC;AACG,SAAO,IAAI;AACX,aAAW,IAAI;AACjB;AAEF,CAAC;AACG,WAAS;AACX;AAEF,CAJC,gCAIgC,CAjChC;AAkCK,2CAAyC,KACvC;AAEJ;AAEJ,CAAC;AACG,oBAAkB,IAAI;AACxB;AAEF,CAJC,iCAIiC,CA3CjC;AA4CK,2CAAyC,KACvC;AAEJ;","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-layout-divider-strong);\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-layout-divider-strong);\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__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-interaction-neutral-subtle-default);\n    border-radius: var(--sds-space-border-radius-small);\n    color: var(--sds-color-text-primary);\n    display: flex;\n    flex-flow: row wrap;\n    gap: var(--sds-space-padding-tiny);\n    justify-content: space-between;\n    padding: var(--sds-space-padding-minimal);\n    padding-right: var(--sds-space-padding-small);\n  }\n\n  .sds-input-file-list__item-start {\n      display: flex;\n      flex-flow: row wrap;\n      gap: var(--sds-space-padding-tiny);\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      --input-file-list-icon-background-color: var(\n        --sds-color-support-success-strong\n      );\n      --input-file-list-icon-color: var(--sds-color-text-on-strong);\n\n      align-items: center;\n      background-color: var(--input-file-list-icon-background-color);\n      border-radius: var(--sds-space-border-radius-full);\n      color: var(--input-file-list-icon-color);\n      display: flex;\n      font-size: var(--sds-typography-fontsize-500);\n      justify-content: center;\n      height: var(--sds-typography-fontsize-700);\n      min-width: var(--sds-typography-fontsize-700);\n    }\n\n  .sds-input-file-list__item-icon--loading {\n        --input-file-list-icon-background-color: var(\n          --sds-color-interaction-neutral-transparent-pressed\n        );\n        --input-file-list-icon-color: var(--sds-color-text-primary);\n      }\n\n  .sds-input-file-list__item-size {\n      color: var(--sds-color-text-secondary);\n      font-size: var(--sds-typography-fontsize-200);\n    }\n\n  .sds-input-file-list__item-error {\n      padding: 0;\n    }\n\n  .sds-input-file-list__item-error .sds-input-file-list__item-icon {\n        --input-file-list-icon-background-color: var(\n          --sds-color-support-critical-strong\n        );\n      }\n\n  .sds-input-file-list__item--error {\n      background-color: var(--sds-color-support-critical-subtle);\n    }\n\n  .sds-input-file-list__item--error .sds-input-file-list__item-icon {\n        --input-file-list-icon-background-color: var(\n          --sds-color-support-critical-strong\n        );\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,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,cAAY;AACZ,UAAQ;AACR,WAAS,IAAI,0BAA0B;AACzC;AAEA,CAAC;AACC,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,OAAK,IAAI;AACT,mBAAiB;AACjB,WAAS,IAAI;AACb,iBAAe,IAAI;AACrB;AAEA,CAAC;AACG,WAAS;AACT,aAAW,IAAI;AACf,OAAK,IAAI;AACX;AAEF,CAAC;AACG,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AAEF,CAAC;AACG,2CAAyC,KACvC;AAEF,gCAA8B,IAAI;AAElC,eAAa;AACb,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,UAAQ,IAAI;AACZ,aAAW,IAAI;AACjB;AAEF,CAAC;AACK,2CAAyC,KACvC;AAEF,gCAA8B,IAAI;AACpC;AAEJ,CAAC;AACG,SAAO,IAAI;AACX,aAAW,IAAI;AACjB;AAEF,CAAC;AACG,WAAS;AACX;AAEF,CAJC,gCAIgC,CAjChC;AAkCK,2CAAyC,KACvC;AAEJ;AAEJ,CAAC;AACG,oBAAkB,IAAI;AACxB;AAEF,CAJC,iCAIiC,CA3CjC;AA4CK,2CAAyC,KACvC;AAEJ;","names":[]}

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-input-file",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "license": "MIT",
   "type": "commonjs",
   "main": "dist/index.js",
@@ -35,7 +35,7 @@
     "@sikt/sds-core": "^4.6.0",
     "@sikt/sds-form": "^4.1.0",
     "@sikt/sds-icons": "^3.0.0",
-    "react-aria-components": "^1.12.1"
+    "react-aria-components": "^1.12.2"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",