@danske/sapphire-react-lab 0.83.0 → 0.84.0

package/build/esm/FileDropzone/i18n/da-DK.js

@@ -0,0 +1,7 @@
+var da = {
+	"dropzone-heading-default": "Træk filer hertil, eller klik for at vælge",
+	"dropzone-heading-dropping": "Slip fil"
+};
+
+export { da as default };
+//# sourceMappingURL=da-DK.js.map

package/build/esm/FileDropzone/i18n/da-DK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"da-DK.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/de-DE.js

@@ -0,0 +1,7 @@
+var de = {
+	"dropzone-heading-default": "Ziehen Sie Dateien hierher oder klicken Sie, um sie auszuwählen",
+	"dropzone-heading-dropping": "Datei ablegen"
+};
+
+export { de as default };
+//# sourceMappingURL=de-DE.js.map

package/build/esm/FileDropzone/i18n/de-DE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"de-DE.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/en-US.js

@@ -0,0 +1,7 @@
+var en = {
+	"dropzone-heading-default": "Drag files here or click to select",
+	"dropzone-heading-dropping": "Drop file"
+};
+
+export { en as default };
+//# sourceMappingURL=en-US.js.map

package/build/esm/FileDropzone/i18n/en-US.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/fi-FI.js

@@ -0,0 +1,7 @@
+var fi = {
+	"dropzone-heading-default": "Vedä tiedostoja tähän tai valitse napsauttamalla",
+	"dropzone-heading-dropping": "Pudota tiedosto"
+};
+
+export { fi as default };
+//# sourceMappingURL=fi-FI.js.map

package/build/esm/FileDropzone/i18n/fi-FI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fi-FI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/index.js

@@ -0,0 +1,20 @@
+import da from './da-DK.js';
+import en from './en-US.js';
+import de from './de-DE.js';
+import fi from './fi-FI.js';
+import no from './nb-NO.js';
+import pl from './pl-PL.js';
+import se from './sv-SE.js';
+
+var intlMessages = {
+  "da-DK": da,
+  "en-US": en,
+  "de-DE": de,
+  "fi-FI": fi,
+  "nb-NO": no,
+  "pl-PL": pl,
+  "sv-SE": se
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/build/esm/FileDropzone/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/FileDropzone/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n  'da-DK': da,\n  'en-US': en,\n  'de-DE': de,\n  'fi-FI': fi,\n  'nb-NO': no,\n  'pl-PL': pl,\n  'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,mBAAe;AAAA,EACb,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,CAAA;;;;"}

package/build/esm/FileDropzone/i18n/nb-NO.js

@@ -0,0 +1,7 @@
+var no = {
+	"dropzone-heading-default": "Dra filer her eller klikk for å velge",
+	"dropzone-heading-dropping": "Slipp fil"
+};
+
+export { no as default };
+//# sourceMappingURL=nb-NO.js.map

package/build/esm/FileDropzone/i18n/nb-NO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nb-NO.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/pl-PL.js

@@ -0,0 +1,7 @@
+var pl = {
+	"dropzone-heading-default": "Przeciągnij pliki tutaj lub kliknij, aby wybrać",
+	"dropzone-heading-dropping": "Upuść plik"
+};
+
+export { pl as default };
+//# sourceMappingURL=pl-PL.js.map

package/build/esm/FileDropzone/i18n/pl-PL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pl-PL.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/sv-SE.js

@@ -0,0 +1,7 @@
+var se = {
+	"dropzone-heading-default": "Dra filer hit eller klicka för att välja",
+	"dropzone-heading-dropping": "Släpp filen"
+};
+
+export { se as default };
+//# sourceMappingURL=sv-SE.js.map

package/build/esm/FileDropzone/i18n/sv-SE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-SE.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/src/FileDropzone.js

@@ -0,0 +1,122 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { useSapphireStyleProps, useButton, Icon, Heading } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';
+import { Upload } from '@danske/sapphire-icons/react';
+import { Body } from '../../Typography/src/Body.js';
+import { useHover, usePress, Pressable } from '@react-aria/interactions';
+import { useId, mergeProps } from '@react-aria/utils';
+import { FileTrigger } from './FileTrigger.js';
+import { useDrop, useClipboard } from '@react-aria/dnd';
+import { convertFileListToFileDropItems } from './utils.js';
+import { useFocusRing } from '@react-aria/focus';
+import { useMessageFormatter } from '@react-aria/i18n';
+import intlMessages from '../i18n/index.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const FileDropzone = React.forwardRef(function DropzoneWrapper(props, ref) {
+  const {
+    isDisabled = false,
+    hasError,
+    renderInstruction,
+    onFileSelectOpen = () => null,
+    acceptedFileTypes,
+    allowsMultiple,
+    onDrop = () => null
+  } = props;
+  const id = useId();
+  const paragraphId = props["aria-label"] ? void 0 : id;
+  const format = useMessageFormatter(intlMessages);
+  const pressableRef = useRef(null);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const { styleProps } = useSapphireStyleProps(props);
+  const {
+    dropProps,
+    dropButtonProps,
+    isDropTarget: isDropping
+  } = useDrop(__spreadProps(__spreadValues({}, props), {
+    ref: pressableRef,
+    hasDropButton: true,
+    isDisabled
+  }));
+  const { buttonProps } = useButton(__spreadProps(__spreadValues({}, dropButtonProps), { elementType: "div" }), pressableRef);
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const { pressProps, isPressed } = usePress({});
+  const { clipboardProps } = useClipboard({
+    isDisabled,
+    onPaste: (items) => onDrop({
+      type: "drop",
+      items,
+      x: 0,
+      y: 0,
+      dropOperation: "copy"
+    })
+  });
+  const ariaLabel = props["aria-label"] || "Dropzone";
+  const onFileTriggerSelect = (files) => {
+    onDrop({
+      type: "drop",
+      items: convertFileListToFileDropItems(files),
+      x: 0,
+      y: 0,
+      dropOperation: "copy"
+    });
+  };
+  return /* @__PURE__ */ React.createElement(FileTrigger, {
+    acceptedFileTypes,
+    allowsMultiple,
+    onSelect: onFileTriggerSelect,
+    isDisabled
+  }, /* @__PURE__ */ React.createElement(Pressable, {
+    ref: pressableRef,
+    onPress: onFileSelectOpen
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps, pressProps)), {
+    ref,
+    style: __spreadValues({}, styleProps.style),
+    className: clsx(styles["sapphire-dropzone"], styles["js-focus"], styles["js-hover"], {
+      [styles["is-hover"]]: isHovered && !isDropping,
+      [styles["is-active"]]: isPressed,
+      [styles["is-disabled"]]: isDisabled,
+      [styles["is-focus"]]: isFocusVisible,
+      [styles["sapphire-dropzone--dropping"]]: isDropping,
+      [styles["sapphire-dropzone--error"]]: hasError
+    }, styleProps.className),
+    "aria-label": ariaLabel,
+    "aria-invalid": hasError,
+    "aria-describedby": paragraphId
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-dropzone__content"])
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-dropzone__icon"])
+  }, /* @__PURE__ */ React.createElement(Icon, null, /* @__PURE__ */ React.createElement(Upload, null))), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-dropzone__heading"])
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    level: 6
+  }, isDropping ? format("dropzone-heading-dropping") : format("dropzone-heading-default"))), /* @__PURE__ */ React.createElement("div", {
+    id: paragraphId,
+    className: clsx(styles["sapphire-dropzone__paragraph"])
+  }, /* @__PURE__ */ React.createElement(Body, {
+    level: 2
+  }, renderInstruction(isDropping)))))));
+});
+
+export { FileDropzone };
+//# sourceMappingURL=FileDropzone.js.map

package/build/esm/FileDropzone/src/FileDropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.js","sources":["../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Heading,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { Body } from '../../Typography/src/Body';\nimport {\n  HoverProps,\n  Pressable,\n  useHover,\n  usePress,\n} from '@react-aria/interactions';\nimport { mergeProps, useId } from '@react-aria/utils';\nimport { FileSelectProps, FileTrigger } from './FileTrigger';\nimport { DropOptions, useClipboard, useDrop } from '@react-aria/dnd';\nimport { convertFileListToFileDropItems } from './utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { AriaLabelingProps } from '@react-types/shared';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nexport interface FileDropzoneProps\n  extends SapphireStyleProps,\n    Omit<DropOptions, 'hasDropButton'>,\n    HoverProps,\n    FileSelectProps,\n    AriaLabelingProps {\n  /**\n   * Whether the dropzone has an error\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * The body text of the dropzone which can contain the instructions for the files to be uploaded.\n   * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.\n   * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.\n   */\n  renderInstruction: (isDropping: boolean) => string;\n  /**\n   * Function that is called when the file select is opened on press, before any file is selected.\n   * @default \"() => null\"\n   */\n  onFileSelectOpen?: () => void;\n}\n\nexport const FileDropzone = React.forwardRef(function DropzoneWrapper(\n  props: FileDropzoneProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useRef(null);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const {\n    dropProps,\n    dropButtonProps,\n    isDropTarget: isDropping,\n  } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n  });\n  const { buttonProps } = useButton(\n    { ...dropButtonProps, elementType: 'div' },\n    pressableRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps, isPressed } = usePress({});\n\n  const { clipboardProps } = useClipboard({\n    isDisabled,\n    onPaste: (items) =>\n      onDrop({\n        type: 'drop',\n        items,\n        x: 0,\n        y: 0,\n        dropOperation: 'copy',\n      }),\n  });\n\n  const ariaLabel: string = props['aria-label'] || 'Dropzone';\n\n  const onFileTriggerSelect = (files: FileList | null) => {\n    onDrop({\n      type: 'drop',\n      items: convertFileListToFileDropItems(files),\n      x: 0,\n      y: 0,\n      dropOperation: 'copy',\n    });\n  };\n\n  return (\n    <FileTrigger\n      acceptedFileTypes={acceptedFileTypes}\n      allowsMultiple={allowsMultiple}\n      onSelect={onFileTriggerSelect}\n      isDisabled={isDisabled}\n    >\n      <Pressable ref={pressableRef} onPress={onFileSelectOpen}>\n        <div\n          {...mergeProps(\n            dropProps,\n            hoverProps,\n            clipboardProps,\n            focusProps,\n            buttonProps,\n            pressProps\n          )}\n          ref={ref}\n          style={{ ...styleProps.style }}\n          className={clsx(\n            styles['sapphire-dropzone'],\n            styles['js-focus'],\n            styles['js-hover'],\n            {\n              [styles['is-hover']]: isHovered && !isDropping,\n              [styles['is-active']]: isPressed,\n              [styles['is-disabled']]: isDisabled,\n              [styles['is-focus']]: isFocusVisible,\n              [styles['sapphire-dropzone--dropping']]: isDropping,\n              [styles['sapphire-dropzone--error']]: hasError,\n            },\n            styleProps.className\n          )}\n          aria-label={ariaLabel}\n          aria-invalid={hasError}\n          aria-describedby={paragraphId}\n        >\n          <div className={clsx(styles['sapphire-dropzone__content'])}>\n            <div className={clsx(styles['sapphire-dropzone__icon'])}>\n              <Icon>\n                <Upload />\n              </Icon>\n            </div>\n            <div className={clsx(styles['sapphire-dropzone__heading'])}>\n              <Heading level={6}>\n                {isDropping\n                  ? format('dropzone-heading-dropping')\n                  : format('dropzone-heading-default')}\n              </Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Body level={2}>{renderInstruction(isDropping)}</Body>\n            </div>\n          </div>\n        </div>\n      </Pressable>\n    </FileTrigger>\n  );\n});\n"],"names":[],"mappings":"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"}

package/build/esm/FileDropzone/src/FileTrigger.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useObjectRef, filterDOMProps } from '@react-aria/utils';
+import { PressResponder } from '@react-aria/interactions';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const HiddenFileInput = React.forwardRef(function InputWrapper(props, ref) {
+  return /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
+    ref,
+    type: "file",
+    style: { display: "none" }
+  }));
+});
+const FileTrigger = React.forwardRef(function FileTriggerWrapper(props, ref) {
+  const _a = props, {
+    acceptedFileTypes,
+    allowsMultiple = false,
+    onSelect = () => null,
+    children,
+    isDisabled = false
+  } = _a, rest = __objRest(_a, [
+    "acceptedFileTypes",
+    "allowsMultiple",
+    "onSelect",
+    "children",
+    "isDisabled"
+  ]);
+  const inputRef = useObjectRef(ref);
+  const domProps = filterDOMProps(rest);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PressResponder, {
+    onPress: () => {
+      var _a2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+    }
+  }, children), /* @__PURE__ */ React.createElement(HiddenFileInput, __spreadProps(__spreadValues({}, domProps), {
+    disabled: isDisabled,
+    ref: inputRef,
+    accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
+    onChange: (e) => onSelect == null ? void 0 : onSelect(e.target.files),
+    multiple: allowsMultiple
+  })));
+});
+
+export { FileTrigger };
+//# sourceMappingURL=FileTrigger.js.map

package/build/esm/FileDropzone/src/FileTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTrigger.js","sources":["../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport { filterDOMProps, useObjectRef } from '@react-aria/utils';\nimport { PressResponder } from '@react-aria/interactions';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  return <input {...props} ref={ref} type=\"file\" style={{ display: 'none' }} />;\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest);\n\n  return (\n    <>\n      <PressResponder\n        onPress={() => {\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,eAAkB,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CACvC,OACA,GACA,EAAA;AACA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,GAAA;AAAA,IAAU,IAAK,EAAA,MAAA;AAAA,IAAO,KAAA,EAAO,EAAE,OAAS,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA;AAG5D,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,kBAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,iBAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAa,GAAA,KAAA;AAAA,GAEX,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IALH,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,WAAW,YAAa,CAAA,GAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,WAAW,cAAe,CAAA,IAAA,CAAA,CAAA;AAEhC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,cAAD,EAAA;AAAA,IACE,SAAS,MAAM;AAtDvB,MAAA,IAAA,GAAA,CAAA;AAuDU,MAAA,CAAA,GAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAGnB,QAEH,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,QADN,CAAA,EAAA;AAAA,IAEE,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,QAAA;AAAA,IACL,QAAQ,iBAAmB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,QAAA,EAAA;AAAA,IAC3B,QAAU,EAAA,CAAC,CAAM,KAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAY,EAAE,MAA4B,CAAA,KAAA,CAAA;AAAA,IAC3D,QAAU,EAAA,cAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/build/esm/FileDropzone/src/utils.js

@@ -0,0 +1,20 @@
+const convertFileListToFileDropItems = (fileList) => {
+  if (!fileList) {
+    return [];
+  }
+  return Array.from(fileList).map((file) => ({
+    kind: "file",
+    type: file.type,
+    name: file.name,
+    getFile: () => Promise.resolve(file),
+    getText: () => new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsText(file);
+    })
+  }));
+};
+
+export { convertFileListToFileDropItems };
+//# sourceMappingURL=utils.js.map

package/build/esm/FileDropzone/src/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/FileDropzone/src/utils.ts"],"sourcesContent":["import { FileDropItem } from '@react-types/shared';\n\nexport const convertFileListToFileDropItems = (\n  fileList: FileList | null\n): FileDropItem[] => {\n  if (!fileList) {\n    return [];\n  }\n\n  return Array.from(fileList).map((file) => ({\n    kind: 'file',\n    type: file.type,\n    name: file.name,\n    getFile: () => Promise.resolve(file),\n    getText: () =>\n      new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => resolve(reader.result as string);\n        reader.onerror = () => reject(reader.error);\n        reader.readAsText(file);\n      }),\n  }));\n};\n"],"names":[],"mappings":"AAEa,MAAA,8BAAA,GAAiC,CAC5C,QACmB,KAAA;AACnB,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAO,OAAA,EAAA,CAAA;AAAA,GAAA;AAGT,EAAA,OAAO,KAAM,CAAA,IAAA,CAAK,QAAU,CAAA,CAAA,GAAA,CAAI,CAAC,IAAU,MAAA;AAAA,IACzC,IAAM,EAAA,MAAA;AAAA,IACN,MAAM,IAAK,CAAA,IAAA;AAAA,IACX,MAAM,IAAK,CAAA,IAAA;AAAA,IACX,OAAA,EAAS,MAAM,OAAA,CAAQ,OAAQ,CAAA,IAAA,CAAA;AAAA,IAC/B,SAAS,MACP,IAAI,OAAgB,CAAA,CAAC,SAAS,MAAW,KAAA;AACvC,MAAA,MAAM,SAAS,IAAI,UAAA,EAAA,CAAA;AACnB,MAAO,MAAA,CAAA,MAAA,GAAS,MAAM,OAAA,CAAQ,MAAO,CAAA,MAAA,CAAA,CAAA;AACrC,MAAO,MAAA,CAAA,OAAA,GAAU,MAAM,MAAA,CAAO,MAAO,CAAA,KAAA,CAAA,CAAA;AACrC,MAAA,MAAA,CAAO,UAAW,CAAA,IAAA,CAAA,CAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -17,6 +17,8 @@ export { Accordion } from './Accordion/index.js';
 export { Typography } from './Typography/index.js';
 export { Fieldset } from './Fieldset/src/Fieldset.js';
 export { Avatar } from './Avatar/src/Avatar.js';
+export { FileDropzone } from './FileDropzone/src/FileDropzone.js';
+export { FileTrigger } from './FileDropzone/src/FileTrigger.js';
 export { AlertDialog } from './AlertDialog/src/AlertDialog.js';
 export { NumberField } from './NumberField/src/NumberField.js';
 export { useLocale } from '@react-aria/i18n';

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.d.ts

@@ -1,5 +1,5 @@
 import * as _react_types_shared from '@react-types/shared';
-import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps, FocusableRefValue } from '@react-types/shared';
+import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue } from '@react-types/shared';
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, RefObject } from 'react';
 import { AriaToggleButtonProps } from '@react-aria/button';
@@ -13,6 +13,8 @@ import { ComboBoxProps } from '@react-types/combobox';
 import { AriaSearchFieldProps } from '@react-aria/searchfield';
 import { AriaToastRegionProps } from '@react-aria/toast';
 import { ToastState } from '@react-stately/toast';
+import { HoverProps } from '@react-aria/interactions';
+import { DropOptions } from '@react-aria/dnd';
 import { AriaModalOverlayProps } from '@react-aria/overlays';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
 export { useLocale } from '@react-aria/i18n';
@@ -786,6 +788,51 @@ declare type SapphireAvatarProps = SapphireStyleProps & {
 });
 declare const Avatar: ({ monogram, icon, color, size, ...props }: SapphireAvatarProps) => React__default.ReactElement;
 
+interface FileSelectProps {
+    /**
+     * List of file types that are allowed to be selected using the file select.
+     * When no list is passed, all file types will be allowed to be selected.
+     * @default ""
+     */
+    acceptedFileTypes?: string[];
+    /**
+     * Whether multiple files are allowed to be selected using the file select.
+     * @default "false"
+     */
+    allowsMultiple?: boolean;
+}
+interface FileTriggerProps extends FileSelectProps {
+    /**
+     * Callback for file selection.
+     * @param files - the list of selected files
+     * @default "() => null"
+     */
+    onSelect?: (files: FileList | null) => void;
+    isDisabled?: boolean;
+    children?: React__default.ReactNode;
+}
+declare const FileTrigger: React__default.ForwardRefExoticComponent<FileTriggerProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface FileDropzoneProps extends SapphireStyleProps, Omit<DropOptions, 'hasDropButton'>, HoverProps, FileSelectProps, AriaLabelingProps {
+    /**
+     * Whether the dropzone has an error
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * The body text of the dropzone which can contain the instructions for the files to be uploaded.
+     * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.
+     * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.
+     */
+    renderInstruction: (isDropping: boolean) => string;
+    /**
+     * Function that is called when the file select is opened on press, before any file is selected.
+     * @default "() => null"
+     */
+    onFileSelectOpen?: () => void;
+}
+declare const FileDropzone: React__default.ForwardRefExoticComponent<Omit<FileDropzoneProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
 declare type SapphireAlertDialogProps = AriaModalOverlayProps & SapphireStyleProps & Pick<DialogProps, 'isOpen' | 'onClose'> & Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {
     /**
      *
@@ -879,4 +926,4 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
 }
 declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldProps & React__default.RefAttributes<NumberFieldRef>>;
 
-export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
+export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.83.0",
+  "version": "0.84.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -36,7 +36,7 @@
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^28.0.2",
+    "@danske/sapphire-css": "^28.1.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.27",
@@ -45,6 +45,7 @@
     "@react-aria/combobox": "^3.8.4",
     "@react-aria/datepicker": "^3.9.3",
     "@react-aria/dialog": "^3.5.12",
+    "@react-aria/dnd": "^3.6.1",
     "@react-aria/focus": "^3.16.2",
     "@react-aria/i18n": "^3.10.2",
     "@react-aria/interactions": "^3.21.1",
@@ -71,5 +72,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "442856d9937fb96e3a92299a39106fa720f34180"
+  "gitHead": "07a564af42921a372a62519265afe48ec303efdb"
 }