@danske/sapphire-react-lab 0.105.2 → 0.106.2

package/build/esm/Breadcrumbs/src/BreadcrumbsSeparator.js

@@ -8,12 +8,14 @@ import { BreadcrumbsContext } from './Breadcrumbs.js';
 const BreadcrumbsSeparator = () => {
   const { size } = useContext(BreadcrumbsContext);
   const iconSize = size === "lg" ? "md" : "sm";
-  return /* @__PURE__ */ React.createElement("span", {
-    className: clsx(styles["sapphire-breadcrumbs__separator"]),
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    size: iconSize
-  }, /* @__PURE__ */ React.createElement(ChevronRight, null)));
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: clsx(styles["sapphire-breadcrumbs__separator"]),
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement(Icon, { size: iconSize }, /* @__PURE__ */ React.createElement(ChevronRight, null))
+  );
 };
 
 export { BreadcrumbsSeparator };

package/build/esm/Breadcrumbs/src/BreadcrumbsSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsSeparator.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbsSeparator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { ChevronRight } from '@danske/sapphire-icons/react';\nimport { Icon } from '@danske/sapphire-react';\nimport { BreadcrumbsContext } from './Breadcrumbs';\n\nexport const BreadcrumbsSeparator = (): JSX.Element => {\n  const { size } = useContext(BreadcrumbsContext);\n\n  // Based on the design\n  const iconSize = size === 'lg' ? 'md' : 'sm';\n\n  return (\n    <span\n      className={clsx(styles['sapphire-breadcrumbs__separator'])}\n      aria-hidden=\"true\"\n    >\n      <Icon size={iconSize}>\n        <ChevronRight />\n      </Icon>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,uBAAuB,MAAmB;AACrD,EAAM,MAAA,EAAE,SAAS,UAAW,CAAA,kBAAA,CAAA,CAAA;AAG5B,EAAM,MAAA,QAAA,GAAW,IAAS,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA,CAAA;AAExC,EAAA,2CACG,MAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,iCAAA,CAAA,CAAA;AAAA,IACvB,aAAY,EAAA,MAAA;AAAA,GAAA,sCAEX,IAAD,EAAA;AAAA,IAAM,IAAM,EAAA,QAAA;AAAA,GAAA,sCACT,YAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"BreadcrumbsSeparator.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbsSeparator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { ChevronRight } from '@danske/sapphire-icons/react';\nimport { Icon } from '@danske/sapphire-react';\nimport { BreadcrumbsContext } from './Breadcrumbs';\n\nexport const BreadcrumbsSeparator = (): JSX.Element => {\n  const { size } = useContext(BreadcrumbsContext);\n\n  // Based on the design\n  const iconSize = size === 'lg' ? 'md' : 'sm';\n\n  return (\n    <span\n      className={clsx(styles['sapphire-breadcrumbs__separator'])}\n      aria-hidden=\"true\"\n    >\n      <Icon size={iconSize}>\n        <ChevronRight />\n      </Icon>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,uBAAuB,MAAmB;AACrD,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,UAAA,CAAW,kBAAkB,CAAA;AAG9C,EAAA,MAAM,QAAA,GAAW,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA;AAExC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,iCAAiC,CAAC,CAAA;AAAA,MACzD,aAAA,EAAY;AAAA,KAAA;AAAA,wCAEX,IAAA,EAAA,EAAK,IAAA,EAAM,QAAA,EAAA,kBACV,KAAA,CAAA,aAAA,CAAC,kBAAa,CAChB;AAAA,GACF;AAEJ;;;;"}

package/build/esm/Breadcrumbs/src/useBreadcrumbThreshold.js

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { useResizeObserver } from '@react-aria/utils';
+import { useResizeObserver } from 'react-aria/private/utils/useResizeObserver';
 
 const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
   const [itemWidths, setItemWidths] = useState([]);
@@ -31,9 +31,10 @@ const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
     };
   }, [itemWidths, containerWidth, childrenCount]);
   const computeItemWidths = () => {
-    if (!breadcrumbRef.current)
-      return;
-    const breadcrumbItems = Array.from(breadcrumbRef.current.children);
+    if (!breadcrumbRef.current) return;
+    const breadcrumbItems = Array.from(
+      breadcrumbRef.current.children
+    );
     const widths = breadcrumbItems.map((item) => item.offsetWidth).filter(Boolean);
     if (widths.length === breadcrumbItems.length) {
       setItemWidths(widths);
@@ -47,8 +48,7 @@ const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
   useResizeObserver({
     ref: containerRef,
     onResize: () => {
-      if (!containerRef.current)
-        return;
+      if (!containerRef.current) return;
       setContainerWidth(containerRef.current.offsetWidth);
     }
   });

package/build/esm/Breadcrumbs/src/useBreadcrumbThreshold.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreadcrumbThreshold.js","sources":["../../../../src/Breadcrumbs/src/useBreadcrumbThreshold.ts"],"sourcesContent":["import { useState, useMemo, useEffect } from 'react';\nimport { useResizeObserver } from '@react-aria/utils';\n\nexport const useBreadcrumbThreshold = (\n  childrenCount: number,\n  containerRef: React.RefObject<HTMLElement>,\n  breadcrumbRef: React.RefObject<HTMLOListElement>\n) => {\n  const [itemWidths, setItemWidths] = useState<number[]>([]);\n  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  const { shouldRenderOverflow, maxVisibleTailChildren } = useMemo(() => {\n    if (!containerWidth || itemWidths.length === 0) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: childrenCount,\n      };\n    }\n\n    // Exit early if the container is wider than all items combined\n    const totalItemWidth = itemWidths.reduce((a, b) => a + b, 0);\n    if (totalItemWidth <= containerWidth) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: itemWidths.length - 1,\n      };\n    }\n\n    // The minimum number of items in the container is 2 (first and last).\n    let totalWidth = itemWidths[0] + itemWidths[itemWidths.length - 1];\n    let visibleTailCount = 1; // Last item counted by default\n\n    for (\n      let i = itemWidths.length - 2;\n      i > 0 && totalWidth + itemWidths[i] < containerWidth;\n      i--\n    ) {\n      totalWidth += itemWidths[i];\n      visibleTailCount++;\n    }\n\n    visibleTailCount--; // When we are overflowing, take into account the icon button that will be rendered\n    return {\n      shouldRenderOverflow: true,\n      maxVisibleTailChildren: Math.max(1, visibleTailCount),\n    };\n  }, [itemWidths, containerWidth, childrenCount]);\n\n  /**\n   * Compute the individual widths of the breadcrumb items.\n   * It's important to have these values for all the items, since they disappear if the container\n   * is overflowing. We need these values to recompute the number of items that can fit,\n   * but we can't do that once they have disappeared from the container.\n   */\n  const computeItemWidths = () => {\n    if (!breadcrumbRef.current) return;\n    const breadcrumbItems = Array.from(\n      breadcrumbRef.current.children\n    ) as HTMLElement[];\n    const widths = breadcrumbItems\n      .map((item) => item.offsetWidth)\n      .filter(Boolean);\n\n    if (widths.length === breadcrumbItems.length) {\n      setItemWidths(widths);\n    }\n  };\n\n  /**\n   * Recompute the item widths when the children change.\n   */\n  useEffect(() => {\n    if (childrenCount !== itemWidths.length) {\n      computeItemWidths();\n    }\n  }, [containerRef.current, childrenCount]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: () => {\n      if (!containerRef.current) return;\n      setContainerWidth(containerRef.current.offsetWidth);\n    },\n  });\n\n  const overflowNodes = useMemo(() => {\n    if (childrenCount > 0 && shouldRenderOverflow) {\n      const tailCount = maxVisibleTailChildren > 1 ? maxVisibleTailChildren : 1;\n      const actualTailCount =\n        maxVisibleTailChildren === 1 ? maxVisibleTailChildren : tailCount;\n      const limitedTailCount = Math.min(actualTailCount, 5); // By design, we limit the number of visible tail items to 6\n      const tailStartIndex = childrenCount - limitedTailCount;\n      // Return overflow indexes (hidden items) - all items except first and tail items\n      return Array.from({ length: tailStartIndex - 1 }, (_, i) => i + 1);\n    }\n    return [];\n  }, [childrenCount, shouldRenderOverflow, maxVisibleTailChildren]);\n\n  return {\n    overflowNodes,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useBreadcrumbThreshold.js","sources":["../../../../src/Breadcrumbs/src/useBreadcrumbThreshold.ts"],"sourcesContent":["import { useState, useMemo, useEffect } from 'react';\nimport { useResizeObserver } from 'react-aria/private/utils/useResizeObserver';\n\nexport const useBreadcrumbThreshold = (\n  childrenCount: number,\n  containerRef: React.RefObject<HTMLElement>,\n  breadcrumbRef: React.RefObject<HTMLOListElement>\n) => {\n  const [itemWidths, setItemWidths] = useState<number[]>([]);\n  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  const { shouldRenderOverflow, maxVisibleTailChildren } = useMemo(() => {\n    if (!containerWidth || itemWidths.length === 0) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: childrenCount,\n      };\n    }\n\n    // Exit early if the container is wider than all items combined\n    const totalItemWidth = itemWidths.reduce((a, b) => a + b, 0);\n    if (totalItemWidth <= containerWidth) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: itemWidths.length - 1,\n      };\n    }\n\n    // The minimum number of items in the container is 2 (first and last).\n    let totalWidth = itemWidths[0] + itemWidths[itemWidths.length - 1];\n    let visibleTailCount = 1; // Last item counted by default\n\n    for (\n      let i = itemWidths.length - 2;\n      i > 0 && totalWidth + itemWidths[i] < containerWidth;\n      i--\n    ) {\n      totalWidth += itemWidths[i];\n      visibleTailCount++;\n    }\n\n    visibleTailCount--; // When we are overflowing, take into account the icon button that will be rendered\n    return {\n      shouldRenderOverflow: true,\n      maxVisibleTailChildren: Math.max(1, visibleTailCount),\n    };\n  }, [itemWidths, containerWidth, childrenCount]);\n\n  /**\n   * Compute the individual widths of the breadcrumb items.\n   * It's important to have these values for all the items, since they disappear if the container\n   * is overflowing. We need these values to recompute the number of items that can fit,\n   * but we can't do that once they have disappeared from the container.\n   */\n  const computeItemWidths = () => {\n    if (!breadcrumbRef.current) return;\n    const breadcrumbItems = Array.from(\n      breadcrumbRef.current.children\n    ) as HTMLElement[];\n    const widths = breadcrumbItems\n      .map((item) => item.offsetWidth)\n      .filter(Boolean);\n\n    if (widths.length === breadcrumbItems.length) {\n      setItemWidths(widths);\n    }\n  };\n\n  /**\n   * Recompute the item widths when the children change.\n   */\n  useEffect(() => {\n    if (childrenCount !== itemWidths.length) {\n      computeItemWidths();\n    }\n  }, [containerRef.current, childrenCount]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: () => {\n      if (!containerRef.current) return;\n      setContainerWidth(containerRef.current.offsetWidth);\n    },\n  });\n\n  const overflowNodes = useMemo(() => {\n    if (childrenCount > 0 && shouldRenderOverflow) {\n      const tailCount = maxVisibleTailChildren > 1 ? maxVisibleTailChildren : 1;\n      const actualTailCount =\n        maxVisibleTailChildren === 1 ? maxVisibleTailChildren : tailCount;\n      const limitedTailCount = Math.min(actualTailCount, 5); // By design, we limit the number of visible tail items to 6\n      const tailStartIndex = childrenCount - limitedTailCount;\n      // Return overflow indexes (hidden items) - all items except first and tail items\n      return Array.from({ length: tailStartIndex - 1 }, (_, i) => i + 1);\n    }\n    return [];\n  }, [childrenCount, shouldRenderOverflow, maxVisibleTailChildren]);\n\n  return {\n    overflowNodes,\n  };\n};\n"],"names":[],"mappings":"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"}

package/build/esm/FileDropzone/i18n/{da-DK.js → da-DK.json.js}

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

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

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

package/build/esm/FileDropzone/i18n/{de-DE.js → de-DE.json.js}

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

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

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

package/build/esm/FileDropzone/i18n/{en-US.js → en-US.json.js}

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

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

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

package/build/esm/FileDropzone/i18n/{fi-FI.js → fi-FI.json.js}

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

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

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

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

@@ -1,12 +1,12 @@
-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';
+import da from './da-DK.json.js';
+import en from './en-US.json.js';
+import de from './de-DE.json.js';
+import fi from './fi-FI.json.js';
+import no from './nb-NO.json.js';
+import pl from './pl-PL.json.js';
+import se from './sv-SE.json.js';
 
-var intlMessages = {
+var intlMessages$2 = {
   "da-DK": da,
   "en-US": en,
   "de-DE": de,
@@ -16,5 +16,5 @@ var intlMessages = {
   "sv-SE": se
 };
 
-export { intlMessages as default };
+export { intlMessages$2 as default };
 //# sourceMappingURL=index.js.map

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

@@ -1 +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;;;;"}
+{"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,qBAAe;AAAA,EACb,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;;;;"}

package/build/esm/FileDropzone/i18n/{nb-NO.js → nb-NO.json.js}

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

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

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

package/build/esm/FileDropzone/i18n/{pl-PL.js → pl-PL.json.js}

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

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

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

package/build/esm/FileDropzone/i18n/{sv-SE.js → sv-SE.json.js}

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

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

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

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

@@ -3,48 +3,22 @@ import clsx from 'clsx';
 import { useSapphireStyleProps, useButton, Icon, Typography } from '@danske/sapphire-react';
 import styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';
 import { Upload } from '@danske/sapphire-icons/react';
-import { useHover, Pressable } from '@react-aria/interactions';
-import { useId, useObjectRef, filterDOMProps, mergeProps } from '@react-aria/utils';
+import { useHover } from 'react-aria/useHover';
+import { Pressable } from 'react-aria/Pressable';
+import { mergeProps } from 'react-aria/mergeProps';
+import { useId } from 'react-aria/useId';
+import { useObjectRef } from 'react-aria/useObjectRef';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 import { FileTrigger } from './FileTrigger.js';
-import { useDrop, useClipboard } from '@react-aria/dnd';
+import { useDrop } from 'react-aria/useDrop';
+import { useClipboard } from 'react-aria/useClipboard';
 import { convertFileListToFileDropItems } from './utils.js';
-import { useFocusRing } from '@react-aria/focus';
+import { useFocusRing } from 'react-aria/useFocusRing';
 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));
-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 FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedRef) {
-  const _a = props, {
+  const {
     isDisabled = false,
     hasError,
     renderInstruction,
@@ -52,30 +26,26 @@ const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedR
     acceptedFileTypes,
     allowsMultiple,
     onDrop = () => null,
-    getDropOperation = () => "copy"
-  } = _a, otherProps = __objRest(_a, [
-    "isDisabled",
-    "hasError",
-    "renderInstruction",
-    "onFileSelectOpen",
-    "acceptedFileTypes",
-    "allowsMultiple",
-    "onDrop",
-    "getDropOperation"
-  ]);
+    getDropOperation = () => "copy",
+    ...otherProps
+  } = props;
   const id = useId();
   const paragraphId = props["aria-label"] ? void 0 : id;
   const format = useMessageFormatter(intlMessages);
   const pressableRef = useObjectRef(forwardedRef);
   const { hoverProps, isHovered } = useHover({ isDisabled });
   const { styleProps } = useSapphireStyleProps(props);
-  const { dropProps, isDropTarget: isDropping } = useDrop(__spreadProps(__spreadValues({}, props), {
+  const { dropProps, isDropTarget: isDropping } = useDrop({
+    ...props,
     ref: pressableRef,
     hasDropButton: true,
     isDisabled,
     getDropOperation
-  }));
-  const { buttonProps, isPressed } = useButton({ elementType: "div" }, pressableRef);
+  });
+  const { buttonProps, isPressed } = useButton(
+    { elementType: "div" },
+    pressableRef
+  );
   const { focusProps, isFocusVisible } = useFocusRing();
   const { clipboardProps } = useClipboard({
     isDisabled,
@@ -97,44 +67,54 @@ const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedR
       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(__spreadValues({}, mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), filterDOMProps(otherProps, { global: true })), {
-    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, {
-    size: "lg"
-  }, /* @__PURE__ */ React.createElement(Upload, null))), /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-dropzone__heading"])
-  }, /* @__PURE__ */ React.createElement(Typography.Heading, {
-    level: 6
-  }, isDropping ? format("dropzone-heading-dropping") : allowsMultiple ? format("dropzone-heading-default") : format("dropzone-heading-default-single"))), /* @__PURE__ */ React.createElement("div", {
-    id: paragraphId,
-    className: clsx(styles["sapphire-dropzone__paragraph"])
-  }, /* @__PURE__ */ React.createElement(Typography.Body, {
-    size: "sm",
-    color: "secondary"
-  }, renderInstruction(isDropping)))))));
+  return /* @__PURE__ */ React.createElement(
+    FileTrigger,
+    {
+      acceptedFileTypes,
+      allowsMultiple,
+      onSelect: onFileTriggerSelect,
+      isDisabled
+    },
+    /* @__PURE__ */ React.createElement(Pressable, { ref: pressableRef, onPress: onFileSelectOpen }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...mergeProps(
+          dropProps,
+          hoverProps,
+          clipboardProps,
+          focusProps,
+          buttonProps
+        ),
+        ...filterDOMProps(otherProps, { global: true }),
+        style: { ...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, { size: "lg" }, /* @__PURE__ */ React.createElement(Upload, null))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-dropzone__heading"]) }, /* @__PURE__ */ React.createElement(Typography.Heading, { level: 6 }, isDropping ? format("dropzone-heading-dropping") : allowsMultiple ? format("dropzone-heading-default") : format("dropzone-heading-default-single"))), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          id: paragraphId,
+          className: clsx(styles["sapphire-dropzone__paragraph"])
+        },
+        /* @__PURE__ */ React.createElement(Typography.Body, { size: "sm", color: "secondary" }, renderInstruction(isDropping))
+      ))
+    ))
+  );
 });
 
 export { FileDropzone };

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropzone.js","sources":["../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Typography,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { HoverProps, Pressable, useHover } from '@react-aria/interactions';\nimport {\n  mergeProps,\n  useId,\n  useObjectRef,\n  filterDOMProps,\n} 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 GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      DropOptions,\n      | 'getDropOperation'\n      | 'onDropEnter'\n      | 'onDropActivate'\n      | 'onDropMove'\n      | 'onDropExit'\n      | 'onDrop'\n    >,\n    HoverProps,\n    FileSelectProps,\n    // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n    Pick<\n      AriaLabelingProps,\n      'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n    > {\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  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n    getDropOperation = () => 'copy',\n    ...otherProps\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useObjectRef(forwardedRef);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const { dropProps, isDropTarget: isDropping } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n    getDropOperation,\n  });\n  const { buttonProps, isPressed } = useButton(\n    { elementType: 'div' },\n    pressableRef as React.RefObject<Element>\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\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          )}\n          {...filterDOMProps(otherProps, { global: true })}\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 size=\"lg\">\n                <Upload />\n              </Icon>\n            </div>\n            <div className={clsx(styles['sapphire-dropzone__heading'])}>\n              <Typography.Heading level={6}>\n                {isDropping\n                  ? format('dropzone-heading-dropping')\n                  : allowsMultiple\n                  ? format('dropzone-heading-default')\n                  : format('dropzone-heading-default-single')}\n              </Typography.Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Typography.Body size=\"sm\" color=\"secondary\">\n                {renderInstruction(isDropping)}\n              </Typography.Body>\n            </div>\n          </div>\n        </div>\n      </Pressable>\n    </FileTrigger>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEO,MAAM,YAAe,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,eAAA,CAC3C,OACA,YACA,EAAA;AACA,EAAA,MAUI,EATF,GAAA,KAAA,EAAA;AAAA,IAAa,UAAA,GAAA,KAAA;AAAA,IACb,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAmB,MAAM,IAAA;AAAA,IACzB,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAS,MAAM,IAAA;AAAA,IACf,mBAAmB,MAAM,MAAA;AAAA,GAEvB,GAAA,EAAA,EADC,uBACD,EADC,EAAA;AAAA,IARH,YAAA;AAAA,IACA,UAAA;AAAA,IACA,mBAAA;AAAA,IACA,kBAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,kBAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,MAAM,EAAK,GAAA,KAAA,EAAA,CAAA;AACX,EAAM,MAAA,WAAA,GAAc,KAAM,CAAA,YAAA,CAAA,GAAgB,KAAY,CAAA,GAAA,EAAA,CAAA;AACtD,EAAA,MAAM,SAAS,mBAAoB,CAAA,YAAA,CAAA,CAAA;AACnC,EAAA,MAAM,eAAe,YAAa,CAAA,YAAA,CAAA,CAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAY,SAAc,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,SAAW,EAAA,YAAA,EAAc,UAAe,EAAA,GAAA,OAAA,CAAQ,iCACnD,KADmD,CAAA,EAAA;AAAA,IAEtD,GAAK,EAAA,YAAA;AAAA,IACL,aAAe,EAAA,IAAA;AAAA,IACf,UAAA;AAAA,IACA,gBAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAEF,EAAA,MAAM,EAAE,WAAa,EAAA,SAAA,EAAA,GAAc,SACjC,CAAA,EAAE,aAAa,KACf,EAAA,EAAA,YAAA,CAAA,CAAA;AAEF,EAAM,MAAA,EAAE,YAAY,cAAmB,EAAA,GAAA,YAAA,EAAA,CAAA;AAEvC,EAAM,MAAA,EAAE,mBAAmB,YAAa,CAAA;AAAA,IACtC,UAAA;AAAA,IACA,OAAA,EAAS,CAAC,KAAA,KACR,MAAO,CAAA;AAAA,MACL,IAAM,EAAA,MAAA;AAAA,MACN,KAAA;AAAA,MACA,CAAG,EAAA,CAAA;AAAA,MACH,CAAG,EAAA,CAAA;AAAA,MACH,aAAe,EAAA,MAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAIrB,EAAM,MAAA,SAAA,GAAoB,MAAM,YAAiB,CAAA,IAAA,UAAA,CAAA;AAEjD,EAAM,MAAA,mBAAA,GAAsB,CAAC,KAA2B,KAAA;AACtD,IAAO,MAAA,CAAA;AAAA,MACL,IAAM,EAAA,MAAA;AAAA,MACN,OAAO,8BAA+B,CAAA,KAAA,CAAA;AAAA,MACtC,CAAG,EAAA,CAAA;AAAA,MACH,CAAG,EAAA,CAAA;AAAA,MACH,aAAe,EAAA,MAAA;AAAA,KAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAInB,EAAA,2CACG,WAAD,EAAA;AAAA,IACE,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAU,EAAA,mBAAA;AAAA,IACV,UAAA;AAAA,GAAA,sCAEC,SAAD,EAAA;AAAA,IAAW,GAAK,EAAA,YAAA;AAAA,IAAc,OAAS,EAAA,gBAAA;AAAA,GAAA,kBACpC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CACF,SACA,EAAA,UAAA,EACA,cACA,EAAA,UAAA,EACA,WAEE,CAAA,CAAA,EAAA,cAAA,CAAe,UAAY,EAAA,EAAE,QAAQ,IAR3C,EAAA,CAAA,CAAA,EAAA;AAAA,IASE,KAAA,EAAO,mBAAK,UAAW,CAAA,KAAA,CAAA;AAAA,IACvB,WAAW,IACT,CAAA,MAAA,CAAO,sBACP,MAAO,CAAA,UAAA,CAAA,EACP,OAAO,UACP,CAAA,EAAA;AAAA,MACG,CAAA,MAAA,CAAO,UAAc,CAAA,GAAA,SAAA,IAAa,CAAC,UAAA;AAAA,MAAA,CACnC,OAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtB,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,MAAA,CACxB,OAAO,UAAc,CAAA,GAAA,cAAA;AAAA,MAAA,CACrB,OAAO,6BAAiC,CAAA,GAAA,UAAA;AAAA,MAAA,CACxC,OAAO,0BAA8B,CAAA,GAAA,QAAA;AAAA,KAAA,EAExC,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,YAAY,EAAA,SAAA;AAAA,IACZ,cAAc,EAAA,QAAA;AAAA,IACd,kBAAkB,EAAA,WAAA;AAAA,GAAA,CAAA,sCAEjB,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,GAAA,sCACzB,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,yBAAA,CAAA,CAAA;AAAA,GAAA,sCACzB,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GAAA,kBACR,KAAA,CAAA,aAAA,CAAA,MAAA,EAAD,IAGJ,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,OAAZ,EAAA;AAAA,IAAoB,KAAO,EAAA,CAAA;AAAA,GACxB,EAAA,UAAA,GACG,OAAO,2BACP,CAAA,GAAA,cAAA,GACA,OAAO,0BACP,CAAA,GAAA,MAAA,CAAO,iCAGf,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IACE,EAAI,EAAA,WAAA;AAAA,IACJ,SAAA,EAAW,KAAK,MAAO,CAAA,8BAAA,CAAA,CAAA;AAAA,GAEvB,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IAAiB,IAAK,EAAA,IAAA;AAAA,IAAK,KAAM,EAAA,WAAA;AAAA,GAAA,EAC9B,iBAAkB,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"FileDropzone.js","sources":["../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Typography,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { HoverProps, useHover } from 'react-aria/useHover';\nimport { Pressable } from 'react-aria/Pressable';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { useId } from 'react-aria/useId';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { FileSelectProps, FileTrigger } from './FileTrigger';\nimport { DropOptions, useDrop } from 'react-aria/useDrop';\nimport { useClipboard } from 'react-aria/useClipboard';\nimport { convertFileListToFileDropItems } from './utils';\nimport { useFocusRing } from 'react-aria/useFocusRing';\nimport { AriaLabelingProps } from '@react-types/shared';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nexport interface FileDropzoneProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      DropOptions,\n      | 'getDropOperation'\n      | 'onDropEnter'\n      | 'onDropActivate'\n      | 'onDropMove'\n      | 'onDropExit'\n      | 'onDrop'\n    >,\n    HoverProps,\n    FileSelectProps,\n    // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n    Pick<\n      AriaLabelingProps,\n      'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n    > {\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  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n    getDropOperation = () => 'copy',\n    ...otherProps\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useObjectRef(forwardedRef);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const { dropProps, isDropTarget: isDropping } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n    getDropOperation,\n  });\n  const { buttonProps, isPressed } = useButton(\n    { elementType: 'div' },\n    pressableRef as React.RefObject<Element>\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\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          )}\n          {...filterDOMProps(otherProps, { global: true })}\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 size=\"lg\">\n                <Upload />\n              </Icon>\n            </div>\n            <div className={clsx(styles['sapphire-dropzone__heading'])}>\n              <Typography.Heading level={6}>\n                {isDropping\n                  ? format('dropzone-heading-dropping')\n                  : allowsMultiple\n                  ? format('dropzone-heading-default')\n                  : format('dropzone-heading-default-single')}\n              </Typography.Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Typography.Body size=\"sm\" color=\"secondary\">\n                {renderInstruction(isDropping)}\n              </Typography.Body>\n            </div>\n          </div>\n        </div>\n      </Pressable>\n    </FileTrigger>\n  );\n});\n"],"names":[],"mappings":"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"}