@sikt/sds-input-file 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +3 -1
  3. package/dist/index.d.mts +3 -3
  4. package/dist/index.d.ts +3 -3
  5. package/dist/index.js +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +1 -1
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,29 @@
2
2
 
3
3
  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.
4
4
 
5
+ ## [0.2.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@0.2.0...@sikt/sds-input-file@0.2.1) (2024-10-25)
6
+
7
+ ### Bug Fixes
8
+
9
+ - **input-file:** catch accept wildcard ([bcbc572](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/bcbc5727850ef94e0adc6a3f490cdd44ba0fd1d1))
10
+
11
+ ## [0.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@0.1.0...@sikt/sds-input-file@0.2.0) (2024-10-23)
12
+
13
+ ### ⚠ BREAKING CHANGES
14
+
15
+ - **input-file:** rename actionProps
16
+
17
+ ### Features
18
+
19
+ - **input-file:** rename actionProps ([2820499](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/2820499262e4f3b91499363792b29278c6c4454f))
20
+ - **input-file:** make value prop overridable ([2820499](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/2820499262e4f3b91499363792b29278c6c4454f))
21
+
22
+ ### Bug Fixes
23
+
24
+ - **deps:** update @sikt/sds-button@4.0.0 ([d71dd86](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/d71dd868279e3b304c14f3e2ee9cb509896eb329))
25
+ - **deps:** update react-aria-components@1.4.1 ([14c37e7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/14c37e72df0ae3bacf7b5a8bfa02db0dd5d077d0))
26
+ - **input-file:** onChange return type ([5f68a30](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/5f68a3026a9aa0158381af7aa1090a22d8240bcd))
27
+
5
28
  ## 0.1.0 (2024-10-01)
6
29
 
7
30
  ### Features
package/README.md CHANGED
@@ -3,13 +3,14 @@
3
3
  ## Consume
4
4
 
5
5
  ```sh
6
- npm i -s @sikt/sds-input-file
6
+ npm i -s @sikt/sds-{form,input-file}
7
7
  ```
8
8
 
9
9
  ### React
10
10
 
11
11
  ```js
12
12
  import { InputFile, FileList, FileListItem } from "@sikt/sds-input-file";
13
+ import "@sikt/sds-form/dist/index.css";
13
14
  import "@sikt/sds-input-file/dist/index.css";
14
15
 
15
16
  <>
@@ -42,6 +43,7 @@ import "@sikt/sds-input-file/dist/index.css";
42
43
  Import stylesheet:
43
44
 
44
45
  ```css
46
+ @import url("@sikt/sds-form");
45
47
  @import url("@sikt/sds-input-file");
46
48
  ```
47
49
 
package/dist/index.d.mts CHANGED
@@ -17,7 +17,7 @@ interface InputFileProps extends DropZoneProps {
17
17
  placeholder?: string;
18
18
  placeholderBridge?: string;
19
19
  triggerText?: ReactNode;
20
- onChange?: (newValue: FileWithError[]) => void;
20
+ onChange?: (newValue: (File | FileWithError)[]) => void;
21
21
  accept: string;
22
22
  multiple?: boolean;
23
23
  capture?: "user" | "environment";
@@ -42,10 +42,10 @@ interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {
42
42
  label: string;
43
43
  value: number;
44
44
  };
45
- actionProps: Pick<ButtonProps, "onClick" | "type"> & {
45
+ removeActionProps?: Pick<ButtonProps, "onClick" | "type"> & {
46
46
  label: string;
47
47
  };
48
48
  }
49
- declare const FileListItem: ({ children, className, errorText, fileSize, loading, progressProps, actionProps, ...rest }: FileListItemProps) => react_jsx_runtime.JSX.Element;
49
+ declare const FileListItem: ({ children, className, errorText, fileSize, loading, progressProps, removeActionProps, ...rest }: FileListItemProps) => react_jsx_runtime.JSX.Element;
50
50
 
51
51
  export { FileList, FileListItem, type FileListItemProps, type FileListProps, type FileWithError, InputFile, type InputFileProps };
package/dist/index.d.ts CHANGED
@@ -17,7 +17,7 @@ interface InputFileProps extends DropZoneProps {
17
17
  placeholder?: string;
18
18
  placeholderBridge?: string;
19
19
  triggerText?: ReactNode;
20
- onChange?: (newValue: FileWithError[]) => void;
20
+ onChange?: (newValue: (File | FileWithError)[]) => void;
21
21
  accept: string;
22
22
  multiple?: boolean;
23
23
  capture?: "user" | "environment";
@@ -42,10 +42,10 @@ interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {
42
42
  label: string;
43
43
  value: number;
44
44
  };
45
- actionProps: Pick<ButtonProps, "onClick" | "type"> & {
45
+ removeActionProps?: Pick<ButtonProps, "onClick" | "type"> & {
46
46
  label: string;
47
47
  };
48
48
  }
49
- declare const FileListItem: ({ children, className, errorText, fileSize, loading, progressProps, actionProps, ...rest }: FileListItemProps) => react_jsx_runtime.JSX.Element;
49
+ declare const FileListItem: ({ children, className, errorText, fileSize, loading, progressProps, removeActionProps, ...rest }: FileListItemProps) => react_jsx_runtime.JSX.Element;
50
50
 
51
51
  export { FileList, FileListItem, type FileListItemProps, type FileListProps, type FileWithError, InputFile, type InputFileProps };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-form"),s=require("@sikt/sds-icons"),l=require("clsx/lite"),i=require("react"),t=require("react-aria-components"),a=require("react/jsx-runtime"),n=require("@sikt/sds-button"),o=require("clsx"),c=Object.defineProperty,p=Object.defineProperties,d=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,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
1
+ "use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-form"),s=require("@sikt/sds-icons"),l=require("clsx/lite"),i=require("react"),t=require("react-aria-components"),a=require("react/jsx-runtime"),n=require("@sikt/sds-button"),o=require("clsx"),c=Object.defineProperty,p=Object.defineProperties,d=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,x=(e,r,s)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s,f=(e,r)=>{for(var s in r||(r={}))m.call(r,s)&&x(e,s,r[s]);if(u)for(var s of u(r))h.call(r,s)&&x(e,s,r[s]);return e},g=(e,r)=>p(e,d(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&&h.call(e,l)&&(s[l]=e[l]);return s},j=i.forwardRef(((n,o)=>{var c=n,{label:p,"aria-label":d,errorText:u,helpText:m,className:h,placeholder:x="Dra og slipp filer her,",placeholderBridge:j="eller",triggerText:v="Åpne filutforskeren",onChange:_,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(",");i.useEffect((()=>{F&&S(F)}),[F]);const k=e=>{const r=(e=>e.map(((e,r)=>{const s=e,l=[];return w.some((r=>e.type.match(r.replaceAll("*",".*").replaceAll("/","/\\/"))))||l.push("type"),I&&I<e.size&&l.push("size"),!N&&r>0&&l.push("multiple"),l.length>0&&(s.error=l),s})))(e);S([...B,...r]),_&&_([...B,...r])};return a.jsx(r.FormField,{className:l.clsx("sds-input-file",u&&"sds-input-file--error",h),label:p,errorText:u,helpText:m,htmlFor:P,helpTextId:z,children:a.jsxs(t.DropZone,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:m)?z:void 0,"aria-invalid":Boolean(u),"aria-errormessage":u?z:void 0,ref:o},O),{children:[a.jsx("div",{className:"sds-input-file__drop-zone-icon",children:a.jsx(s.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:v})})}))]}))})}));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:m,removeActionProps:h}=i,x=b(i,["children","className","errorText","fileSize","loading","progressProps","removeActionProps"]);let j=h&&a.jsx(s.TrashIcon,{});u?j=a.jsx(s.SpinnerIcon,{}):p&&(j=a.jsx(s.XIcon,{}));const v=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}),v&&a.jsx("div",{children:v}),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:[m&&a.jsxs("div",{role:"progressbar","aria-valuenow":m.value,"aria-label":m.label,children:[m.value,"%"]}),!u&&h&&a.jsx(n.Button,g(f({variant:"transparent",size:"small",iconVariant:"only",icon:j,type:null!=(l=h.type)?l:"button"},h),{children:h.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 CHANGED
@@ -1 +1 @@
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"]}
1
+ {"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["forwardRef","useId","useState","useEffect","accept","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, 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\": string;\n errorText?: ReactNode;\n helpText?: ReactNode;\n className?: string;\n placeholder?: string;\n placeholderBridge?: string;\n triggerText?: ReactNode;\n onChange?: (newValue: (File | FileWithError)[]) => void;\n accept: string;\n multiple?: boolean;\n capture?: \"user\" | \"environment\";\n value?: File[];\n maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n (\n {\n label,\n \"aria-label\": ariaLabel,\n errorText,\n helpText,\n className,\n placeholder = \"Dra og slipp filer her,\",\n placeholderBridge = \"eller\",\n triggerText = \"Åpne filutforskeren\",\n onChange,\n accept,\n multiple = false,\n capture,\n value,\n maxFileSize,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const helpTextId = `${id}-help-text`;\n const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n const inputId = { id };\n const acceptedFileTypes = accept.split(\",\");\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(\n accept.replaceAll(\"*\", \".*\").replaceAll(\"/\", \"/\\\\/\"),\n ),\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 && 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 removeActionProps?: 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 removeActionProps,\n ...rest\n}: FileListItemProps) => {\n let icon = removeActionProps && <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 && removeActionProps && (\n <Button\n variant=\"transparent\"\n size=\"small\"\n iconVariant=\"only\"\n icon={icon}\n type={removeActionProps.type ?? \"button\"}\n {...removeActionProps}\n >\n {removeActionProps.label}\n </Button>\n )}\n {loading && (\n <div className=\"sds-input-file-list__item-icon\">\n <SpinnerIcon />\n </div>\n )}\n </div>\n </li>\n );\n};\n"]}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
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
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,useEffect as d}from"react";import{DropZone as m,FileTrigger as u,Button as f}from"react-aria-components";import{jsx as h,jsxs as b,Fragment as g}from"react/jsx-runtime";import{Button as v}from"@sikt/sds-button";import{clsx as _}from"clsx";var y=Object.defineProperty,N=Object.defineProperties,x=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,O=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable,P=(e,r,l)=>r in e?y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[r]=l,B=(e,r)=>{for(var l in r||(r={}))O.call(r,l)&&P(e,l,r[l]);if(T)for(var l of T(r))z.call(r,l)&&P(e,l,r[l]);return e},w=(e,r)=>N(e,x(r)),j=(e,r)=>{var l={};for(var i in e)O.call(e,i)&&r.indexOf(i)<0&&(l[i]=e[i]);if(null!=e&&T)for(var i of T(e))r.indexOf(i)<0&&z.call(e,i)&&(l[i]=e[i]);return l},k=n(((l,t)=>{var a=l,{label:s,"aria-label":n,errorText:v,helpText:_,className:y,placeholder:N="Dra og slipp filer her,",placeholderBridge:x="eller",triggerText:T="Åpne filutforskeren",onChange:O,accept:z,multiple:P=!1,capture:k,value:F,maxFileSize:S}=a,A=j(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!=F?F:[]),E={id:C},K=z.split(",");d((()=>{F&&M(F)}),[F]);const V=e=>{const r=(e=>e.map(((e,r)=>{const l=e,i=[];return K.some((r=>e.type.match(r.replaceAll("*",".*").replaceAll("/","/\\/"))))||i.push("type"),S&&S<e.size&&i.push("size"),!P&&r>0&&i.push("multiple"),i.length>0&&(l.error=i),l})))(e);M([...I,...r]),O&&O([...I,...r])};return h(r,{className:o("sds-input-file",v&&"sds-input-file--error",y),label:s,errorText:v,helpText:_,htmlFor:C,helpTextId:D,children:b(m,w(B({className:o("sds-input-file__drop-zone",Boolean(v)&&"sds-input-file__drop-zone--error"),onDrop:e=>{(async()=>{const r=e.items.filter((e=>"file"===e.kind));return await Promise.all(r.map((e=>e.getFile())))})().then(V).catch((e=>{throw console.error(e),e}))},"aria-label":n,"aria-describedby":(null!=v?v:_)?D:void 0,"aria-invalid":Boolean(v),"aria-errormessage":v?D:void 0,ref:t},A),{children:[h("div",{className:"sds-input-file__drop-zone-icon",children:h(i,{})}),b(e,{className:"sds-input-file__placeholder",children:[N,x&&b(g,{children:[h("br",{}),x]})]}),h(u,w(B({},E),{onSelect:e=>{if(!e)return;const r=Array.from(e);V(r)},acceptedFileTypes:K,allowsMultiple:P,defaultCamera:k,children:h(f,{className:o("sds-button","sds-button--".concat(v?"critical":"subtle")),children:h("span",{className:"sds-button__label",children:T})})}))]}))})}));k.displayName="InputFile";var F=e=>{var r=e,{children:l,className:i,figCaption:t}=r,a=j(r,["children","className","figCaption"]);return b("figure",w(B({className:o("sds-input-file-list",i)},a),{children:[t&&h("figcaption",{className:"sds-input-file-list__caption sds-typography-heading--paragraph",children:t}),h("ul",{className:"sds-input-file-list__list",children:l})]}))},S=e=>{var r,i=e,{children:o,className:n,errorText:c,fileSize:p,loading:d=!1,progressProps:m,removeActionProps:u}=i,f=j(i,["children","className","errorText","fileSize","loading","progressProps","removeActionProps"]);let g=u&&h(a,{});d?g=h(t,{}):c&&(g=h(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 b("li",w(B({className:_("sds-input-file-list__item",Boolean(c)&&"sds-input-file-list__item--error","ssds-typography-body--regular",n)},f),{children:[b("div",{className:"sds-input-file-list__item-start",children:[h("div",{className:"sds-input-file-list__item-name sds-typography-body--strong",children:o}),y&&h("div",{children:y}),c&&h(l,{error:!0,className:"sds-input-file-list__item-error",children:c})]}),b("div",{className:"sds-input-file-list__item-end",children:[m&&b("div",{role:"progressbar","aria-valuenow":m.value,"aria-label":m.label,children:[m.value,"%"]}),!d&&u&&h(v,w(B({variant:"transparent",size:"small",iconVariant:"only",icon:g,type:null!=(r=u.type)?r:"button"},u),{children:u.label})),d&&h("div",{className:"sds-input-file-list__item-icon",children:h(t,{})})]})]}))};export{F as FileList,S as FileListItem,k as InputFile};//# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
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"]}
1
+ {"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["accept","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, 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\": string;\n errorText?: ReactNode;\n helpText?: ReactNode;\n className?: string;\n placeholder?: string;\n placeholderBridge?: string;\n triggerText?: ReactNode;\n onChange?: (newValue: (File | FileWithError)[]) => void;\n accept: string;\n multiple?: boolean;\n capture?: \"user\" | \"environment\";\n value?: File[];\n maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n (\n {\n label,\n \"aria-label\": ariaLabel,\n errorText,\n helpText,\n className,\n placeholder = \"Dra og slipp filer her,\",\n placeholderBridge = \"eller\",\n triggerText = \"Åpne filutforskeren\",\n onChange,\n accept,\n multiple = false,\n capture,\n value,\n maxFileSize,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const helpTextId = `${id}-help-text`;\n const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n const inputId = { id };\n const acceptedFileTypes = accept.split(\",\");\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(\n accept.replaceAll(\"*\", \".*\").replaceAll(\"/\", \"/\\\\/\"),\n ),\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 && 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 removeActionProps?: 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 removeActionProps,\n ...rest\n}: FileListItemProps) => {\n let icon = removeActionProps && <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 && removeActionProps && (\n <Button\n variant=\"transparent\"\n size=\"small\"\n iconVariant=\"only\"\n icon={icon}\n type={removeActionProps.type ?? \"button\"}\n {...removeActionProps}\n >\n {removeActionProps.label}\n </Button>\n )}\n {loading && (\n <div className=\"sds-input-file-list__item-icon\">\n <SpinnerIcon />\n </div>\n )}\n </div>\n </li>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikt/sds-input-file",
3
- "version": "0.1.0",
3
+ "version": "0.2.1",
4
4
  "license": "MIT",
5
5
  "type": "commonjs",
6
6
  "main": "dist/index.js",
@@ -32,11 +32,11 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@phosphor-icons/react": "^2.1.7",
35
- "@sikt/sds-button": "^3.1.1",
36
- "@sikt/sds-core": "^3.0.0",
35
+ "@sikt/sds-button": "^4.0.0",
36
+ "@sikt/sds-core": "^4.1.0",
37
37
  "@sikt/sds-form": "^3.0.0",
38
38
  "@sikt/sds-icons": "^2.0.1",
39
- "react-aria-components": "^1.3.3"
39
+ "react-aria-components": "^1.4.1"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@types/react": "^18.0.0",