@sikt/sds-input-file 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+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.
+
+## 0.1.0 (2024-10-01)
+
+### Features
+
+- **input-file:** add component ([4734157](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/47341570daa36330f824f49dc3ba10dc7c5b15a2))

package/README.md

@@ -0,0 +1,52 @@
+# `@sikt/sds-input-file`
+
+## Consume
+
+```sh
+npm i -s @sikt/sds-input-file
+```
+
+### React
+
+```js
+import { InputFile, FileList, FileListItem } from "@sikt/sds-input-file";
+import "@sikt/sds-input-file/dist/index.css";
+
+<>
+  <InputFile
+    label="Upload documentation"
+    aria-label="Upload documentation"
+    accept=".doc,.docx"
+    onChange={changeHandler}
+  />
+  <FileList figCaption="Attatchments">
+    files.map((file) => {
+      <FileListItem
+        fileSize={file.size}
+        actionProps{{ label: `Remove ${file.name}`, onClick: handleFileClick }}
+      >
+        {file.name}
+      </FileListItem>
+    })
+  </FileList>
+</>
+```
+
+#### Caveats
+
+- "aria-label": Should be the text content of the label prop. This is used to override React Aria DropZone that sets it's own aria-label.
+- accept: Does not currently support wildcard (for example "\*" or "image/\*")
+
+### Stylesheets & custom markup
+
+Import stylesheet:
+
+```css
+@import url("@sikt/sds-input-file");
+```
+
+Create custom markup:
+
+```html
+<!-- N/A -->
+```

package/dist/index.css

@@ -0,0 +1,76 @@
+/* src/input-file.pcss */
+.sds-input-file__drop-zone {
+  align-items: center;
+  border: var(--sds-space-border-weight-regular) dashed var(--sds-color-interaction-neutral-strong-default);
+  border-radius: var(--sds-space-border-radius-medium);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sds-space-padding-small);
+  padding: var(--sds-space-padding-medium);
+}
+.sds-input-file__drop-zone--error {
+  border-color: var(--sds-color-interaction-danger-strong-default);
+  border-width: var(--sds-space-border-weight-bold);
+}
+.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);
+}
+.sds-input-file__drop-zone[data-drop-target],
+.sds-input-file__drop-zone[data-focus-visible] {
+  background-color: var( --sds-color-interaction-primary-transparent-highlight );
+}
+.sds-input-file__drop-zone-icon {
+  font-size: var(--sds-base-size-m);
+  height: var(--sds-base-size-m);
+  width: var(--sds-base-size-m);
+}
+.sds-input-file__placeholder {
+  color: var(--sds-color-text-primary);
+  text-align: center;
+}
+
+/* src/file-list.pcss */
+.sds-input-file-list {
+  margin: 0;
+}
+.sds-input-file-list__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sds-space-padding-tiny);
+  list-style: none;
+  margin: 0;
+  padding: var(--sds-space-padding-tiny) 0;
+}
+.sds-input-file-list__item {
+  background-color: var(--sds-color-layout-background-primary);
+  border-radius: var(--sds-space-border-radius-small);
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--sds-space-padding-tiny);
+  justify-content: space-between;
+  padding: calc(var(--sds-space-padding-minimal) + var(--sds-space-padding-minimal)) calc(var(--sds-space-padding-minimal) + var(--sds-space-padding-small));
+  padding-right: var(--sds-space-padding-small);
+}
+.sds-input-file-list__item--error {
+  background-color: var(--sds-color-layout-page-default);
+}
+.sds-input-file-list__item-start {
+  max-width: 50%;
+}
+.sds-input-file-list__item-end {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--sds-space-padding-tiny);
+}
+.sds-input-file-list__item-icon {
+  font-size: var(--sds-base-size-m);
+  padding: var(--sds-space-padding-minimal);
+}
+.sds-input-file-list__item-error {
+  padding: var(--sds-space-padding-minimal) 0;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +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      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__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      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,UAAQ,IAAI;AACZ,SAAO,IAAI;AACb;AACF,CAAC;AACC,SAAO,IAAI;AACX,cAAY;AACd;;;ACtCF,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,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,WAAS,IAAI;AACf;AAEF,CAAC;AACG,WAAS,IAAI,6BAA6B;AAC5C;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, LiHTMLAttributes } from 'react';
+import { DropZoneProps } from 'react-aria-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@sikt/sds-button';
+
+type FileError = "type" | "size" | "multiple";
+interface FileWithError extends File {
+    error?: FileError[];
+}
+interface InputFileProps extends DropZoneProps {
+    label: NonNullable<ReactNode>;
+    "aria-label": string;
+    errorText?: ReactNode;
+    helpText?: ReactNode;
+    className?: string;
+    placeholder?: string;
+    placeholderBridge?: string;
+    triggerText?: ReactNode;
+    onChange?: (newValue: FileWithError[]) => void;
+    accept: string;
+    multiple?: boolean;
+    capture?: "user" | "environment";
+    value?: File[];
+    maxFileSize?: number;
+}
+declare const InputFile: react.ForwardRefExoticComponent<InputFileProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FileListProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    className?: string;
+    figCaption?: string;
+}
+declare const FileList: ({ children, className, figCaption, ...rest }: FileListProps) => react_jsx_runtime.JSX.Element;
+
+interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    children: ReactNode;
+    errorText?: ReactNode;
+    fileSize?: number;
+    loading?: boolean;
+    progressProps?: {
+        label: string;
+        value: number;
+    };
+    actionProps: Pick<ButtonProps, "onClick" | "type"> & {
+        label: string;
+    };
+}
+declare const FileListItem: ({ children, className, errorText, fileSize, loading, progressProps, actionProps, ...rest }: FileListItemProps) => react_jsx_runtime.JSX.Element;
+
+export { FileList, FileListItem, type FileListItemProps, type FileListProps, type FileWithError, InputFile, type InputFileProps };

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, LiHTMLAttributes } from 'react';
+import { DropZoneProps } from 'react-aria-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@sikt/sds-button';
+
+type FileError = "type" | "size" | "multiple";
+interface FileWithError extends File {
+    error?: FileError[];
+}
+interface InputFileProps extends DropZoneProps {
+    label: NonNullable<ReactNode>;
+    "aria-label": string;
+    errorText?: ReactNode;
+    helpText?: ReactNode;
+    className?: string;
+    placeholder?: string;
+    placeholderBridge?: string;
+    triggerText?: ReactNode;
+    onChange?: (newValue: FileWithError[]) => void;
+    accept: string;
+    multiple?: boolean;
+    capture?: "user" | "environment";
+    value?: File[];
+    maxFileSize?: number;
+}
+declare const InputFile: react.ForwardRefExoticComponent<InputFileProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FileListProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    className?: string;
+    figCaption?: string;
+}
+declare const FileList: ({ children, className, figCaption, ...rest }: FileListProps) => react_jsx_runtime.JSX.Element;
+
+interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    children: ReactNode;
+    errorText?: ReactNode;
+    fileSize?: number;
+    loading?: boolean;
+    progressProps?: {
+        label: string;
+        value: number;
+    };
+    actionProps: Pick<ButtonProps, "onClick" | "type"> & {
+        label: string;
+    };
+}
+declare const FileListItem: ({ children, className, errorText, fileSize, loading, progressProps, actionProps, ...rest }: FileListItemProps) => react_jsx_runtime.JSX.Element;
+
+export { FileList, FileListItem, type FileListItemProps, type FileListProps, type FileWithError, InputFile, type InputFileProps };

package/dist/index.js

@@ -0,0 +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,h=Object.prototype.hasOwnProperty,m=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={}))h.call(r,s)&&x(e,s,r[s]);if(u)for(var s of u(r))m.call(r,s)&&x(e,s,r[s]);return e},g=(e,r)=>p(e,d(r)),b=(e,r)=>{var s={};for(var l in e)h.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&&m.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:h,className:m,placeholder:x="Dra og slipp filer her,",placeholderBridge:j="eller",triggerText:_="Åpne filutforskeren",onChange:v,accept:y,multiple:N=!1,capture:T,value:F,maxFileSize:I}=c,O=b(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,S]=i.useState(null!=F?F:[]),q={id:P},w=y.split(","),k=e=>{const r=(e=>e.map(((e,r)=>{const s=e,l=[];return w.includes(e.type)||l.push("type"),I&&I<e.size&&l.push("size"),!N&&r>0&&l.push("multiple"),l.length>0&&(s.error=l),s})))(e);S([...B,...r]),v&&v([...B,...r])};return a.jsx(r.FormField,{className:l.clsx("sds-input-file",u&&"sds-input-file--error",m),label:p,errorText:u,helpText:h,htmlFor:P,helpTextId:z,children:a.jsxs(t.DropZone,g(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(k).catch((e=>{throw console.error(e),e}))},"aria-label":d,"aria-describedby":(null!=u?u:h)?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.UploadSimpleIcon,{})}),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,g(f({},q),{onSelect:e=>{if(!e)return;const r=Array.from(e);k(r)},acceptedFileTypes:w,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:_})})}))]}))})}));j.displayName="InputFile";exports.FileList=e=>{var r=e,{children:s,className:i,figCaption:t}=r,n=b(r,["children","className","figCaption"]);return a.jsxs("figure",g(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,loading:u=!1,progressProps:h,actionProps:m}=i,x=b(i,["children","className","errorText","fileSize","loading","progressProps","actionProps"]);let j=a.jsx(s.TrashIcon,{});u?j=a.jsx(s.SpinnerIcon,{}):p&&(j=a.jsx(s.XIcon,{}));const _=d&&(e=>{const r=e=>Math.round(100*e)/100;return e<1e3?"".concat(e,"B"):e>=1e3&&e<1e6?"".concat(r(e/1e3),"KB"):"".concat(r(e/1e6),"MB")})(d);return a.jsxs("li",g(f({className:o.clsx("sds-input-file-list__item",Boolean(p)&&"sds-input-file-list__item--error","ssds-typography-body--regular",c)},x),{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,"%"]}),!u&&a.jsx(n.Button,g(f({variant:"transparent",size:"small",iconVariant:"only",icon:j,type:null!=(l=m.type)?l:"button"},m),{children:m.label})),u&&a.jsx("div",{className:"sds-input-file-list__item-icon",children:a.jsx(s.SpinnerIcon,{})})]})]}))},exports.InputFile=j;//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["forwardRef","useId","useState","jsx","FormField","clsx","jsxs","DropZone","UploadSimpleIcon","Paragraph","Fragment","FileTrigger","Button","n","_a","TrashIcon","SpinnerIcon","XIcon","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 { UploadSimpleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, 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\": string;\n  errorText?: ReactNode;\n  helpText?: ReactNode;\n  className?: string;\n  placeholder?: string;\n  placeholderBridge?: string;\n  triggerText?: ReactNode;\n  onChange?: (newValue: FileWithError[]) => void;\n  accept: 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<FileWithError[]>(value ?? []);\n    const inputId = { id };\n    const acceptedFileTypes = accept.split(\",\");\n\n    const validateFiles = (input: File[]) => {\n      return input.map((file, index) => {\n        const output: FileWithError = file;\n        const errors: FileError[] = [];\n\n        // TODO: accept wildcard [\"*\", \"image/*\"]\n        // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n        if (!acceptedFileTypes.includes(file.type)) {\n          errors.push(\"type\");\n        }\n\n        if (maxFileSize && maxFileSize < file.size) {\n          errors.push(\"size\");\n        }\n\n        // TODO: should first/last be without error\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.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 && 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            <UploadSimpleIcon />\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, TrashIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n  errorText?: ReactNode;\n  fileSize?: number;\n  loading?: boolean;\n  progressProps?: { label: string; value: number };\n  actionProps: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst getFileSize = (n: number) => {\n  const round = (n: number) => Math.round(n * 100) / 100;\n\n  if (n < 1e3) {\n    return `${n}B`;\n  } else if (n >= 1e3 && n < 1e6) {\n    return `${round(n / 1e3)}KB`;\n  } else {\n    return `${round(n / 1e6)}MB`;\n  }\n};\n\nexport const FileListItem = ({\n  children,\n  className,\n  errorText,\n  fileSize,\n  loading = false,\n  progressProps,\n  actionProps,\n  ...rest\n}: FileListItemProps) => {\n  let icon = <TrashIcon />;\n  if (loading) {\n    icon = <SpinnerIcon />;\n  } else if (errorText) {\n    icon = <XIcon />;\n  }\n\n  const size = fileSize && getFileSize(fileSize);\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 && (\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            iconVariant=\"only\"\n            icon={icon}\n            type={actionProps.type ?? \"button\"}\n            {...actionProps}\n          >\n            {actionProps.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

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

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["jsxs","clsx","jsx","n","_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 { UploadSimpleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, 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\": string;\n  errorText?: ReactNode;\n  helpText?: ReactNode;\n  className?: string;\n  placeholder?: string;\n  placeholderBridge?: string;\n  triggerText?: ReactNode;\n  onChange?: (newValue: FileWithError[]) => void;\n  accept: 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<FileWithError[]>(value ?? []);\n    const inputId = { id };\n    const acceptedFileTypes = accept.split(\",\");\n\n    const validateFiles = (input: File[]) => {\n      return input.map((file, index) => {\n        const output: FileWithError = file;\n        const errors: FileError[] = [];\n\n        // TODO: accept wildcard [\"*\", \"image/*\"]\n        // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n        if (!acceptedFileTypes.includes(file.type)) {\n          errors.push(\"type\");\n        }\n\n        if (maxFileSize && maxFileSize < file.size) {\n          errors.push(\"size\");\n        }\n\n        // TODO: should first/last be without error\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.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 && 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            <UploadSimpleIcon />\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, TrashIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n  errorText?: ReactNode;\n  fileSize?: number;\n  loading?: boolean;\n  progressProps?: { label: string; value: number };\n  actionProps: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst getFileSize = (n: number) => {\n  const round = (n: number) => Math.round(n * 100) / 100;\n\n  if (n < 1e3) {\n    return `${n}B`;\n  } else if (n >= 1e3 && n < 1e6) {\n    return `${round(n / 1e3)}KB`;\n  } else {\n    return `${round(n / 1e6)}MB`;\n  }\n};\n\nexport const FileListItem = ({\n  children,\n  className,\n  errorText,\n  fileSize,\n  loading = false,\n  progressProps,\n  actionProps,\n  ...rest\n}: FileListItemProps) => {\n  let icon = <TrashIcon />;\n  if (loading) {\n    icon = <SpinnerIcon />;\n  } else if (errorText) {\n    icon = <XIcon />;\n  }\n\n  const size = fileSize && getFileSize(fileSize);\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 && (\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            iconVariant=\"only\"\n            icon={icon}\n            type={actionProps.type ?? \"button\"}\n            {...actionProps}\n          >\n            {actionProps.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

@@ -0,0 +1,48 @@
+{
+  "name": "@sikt/sds-input-file",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "style": "./dist/index.css",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./dist/*": "./dist/*"
+  },
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "files": [
+    "CHANGELOG.md",
+    "dist",
+    "LICENSE.md",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.7",
+    "@sikt/sds-button": "^3.1.1",
+    "@sikt/sds-core": "^3.0.0",
+    "@sikt/sds-form": "^3.0.0",
+    "@sikt/sds-icons": "^2.0.1",
+    "react-aria-components": "^1.3.3"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "clsx": "^1.0.0 || ^2.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}