@payloadcms/ui 3.0.0-canary.d6053cd → 3.0.0-canary.dc8b1fe

package/dist/elements/Drawer/index.scss

@@ -2,133 +2,140 @@
 
 $transTime: 200;
 
-.drawer {
-  display: flex;
-  overflow: hidden;
-  position: fixed;
-  height: 100vh;
-
-  &__blur-bg {
-    @include blur-bg;
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    transition: all #{$transTime}ms linear;
-  }
-
-  &__content {
-    opacity: 0;
-    transform: translateX(calc(var(--base) * 4));
-    position: relative;
-    z-index: 2;
-    width: calc(100% - var(--gutter-h));
+@layer payload-default {
+  .drawer {
+    display: flex;
     overflow: hidden;
-    transition: all #{$transTime}ms linear;
-    background-color: var(--theme-bg);
-  }
-
-  &__content-children {
-    position: relative;
-    z-index: 1;
-    overflow: auto;
-    height: 100%;
-  }
-
-  &--is-open {
-    .drawer {
-      &__content,
-      &__blur-bg {
-        opacity: 1;
-      }
-
-      &__close {
-        opacity: 0.1;
-        transition: opacity #{$transTime}ms linear;
-        transition-delay: #{calc($transTime / 2)}ms;
-      }
+    position: fixed;
+    height: 100vh;
+
+    &__blur-bg {
+      @include blur-bg;
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      transition: all #{$transTime}ms linear;
+    }
 
-      &__content {
-        transform: translateX(0);
-      }
+    &__content {
+      opacity: 0;
+      transform: translateX(calc(var(--base) * 4));
+      position: relative;
+      z-index: 2;
+      // NOTE: width is controlled by js
+      // width: calc(100% - var(--gutter-h));
+      overflow: hidden;
+      transition: all #{$transTime}ms linear;
+      background-color: var(--theme-bg);
     }
-  }
 
-  &__close {
-    @extend %btn-reset;
-    position: relative;
-    z-index: 2;
-    flex-shrink: 0;
-    text-indent: -9999px;
-    cursor: pointer;
-    opacity: 0;
-    will-change: opacity;
-    transition: none;
-    transition-delay: 0ms;
-    flex-grow: 1;
-    background: var(--theme-elevation-800);
-
-    &:active,
-    &:focus {
-      outline: 0;
+    &__content-children {
+      position: relative;
+      z-index: 1;
+      overflow: auto;
+      height: 100%;
     }
-  }
 
-  &__header {
-    display: flex;
-    margin-top: base(2.5);
-    margin-bottom: base(1);
-    width: 100%;
+    &--is-open {
+      .drawer {
+        &__content,
+        &__blur-bg {
+          opacity: 1;
+        }
 
-    &__title {
-      margin: 0;
-      flex-grow: 1;
+        &__close {
+          opacity: 0.1;
+          transition: opacity #{$transTime}ms linear;
+          transition-delay: #{calc($transTime / 2)}ms;
+        }
+
+        &__content {
+          transform: translateX(0);
+        }
+      }
     }
 
     &__close {
-      border: 0;
-      background-color: transparent;
-      padding: 0;
+      @extend %btn-reset;
+      position: relative;
+      z-index: 2;
+      flex-shrink: 0;
+      text-indent: -9999px;
       cursor: pointer;
-      overflow: hidden;
-      width: base(1);
-      height: base(1);
-      direction: ltr;
-
-      svg {
-        width: base(2.75);
-        height: base(2.75);
-        position: relative;
-        left: base(-0.825);
-        top: base(-0.825);
-
-        .stroke {
-          stroke-width: 2px;
-          vector-effect: non-scaling-stroke;
-        }
+      opacity: 0;
+      will-change: opacity;
+      transition: none;
+      transition-delay: 0ms;
+      flex-grow: 1;
+      background: var(--theme-elevation-800);
+
+      &:active,
+      &:focus {
+        outline: 0;
       }
     }
-  }
 
-  @include mid-break {
     &__header {
-      margin-top: base(1.5);
+      display: flex;
+      align-items: center;
+      margin-top: base(2.5);
+      margin-bottom: base(1);
+      width: 100%;
+
+      &__title {
+        margin: 0;
+        flex-grow: 1;
+      }
+
+      &__close {
+        border: 0;
+        background-color: transparent;
+        padding: 0;
+        cursor: pointer;
+        overflow: hidden;
+        direction: ltr;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: base(1.2);
+        height: base(1.2);
+
+        svg {
+          margin: base(-1.2);
+          width: base(2.4);
+          height: base(2.4);
+
+          position: relative;
+
+          .stroke {
+            stroke-width: 1px;
+            vector-effect: non-scaling-stroke;
+          }
+        }
+      }
     }
-  }
-}
 
-html[data-theme='dark'] {
-  .drawer {
-    &__close {
-      background: var(--color-base-1000);
+    @include mid-break {
+      &__header {
+        margin-top: base(1.5);
+      }
     }
+  }
 
-    &--is-open {
-      .drawer__close {
-        opacity: 0.25;
+  html[data-theme='dark'] {
+    .drawer {
+      &__close {
+        background: var(--color-base-1000);
+      }
+
+      &--is-open {
+        .drawer__close {
+          opacity: 0.25;
+        }
       }
     }
   }

package/dist/elements/Drawer/types.d.ts

@@ -1,12 +1,12 @@
 import type { HTMLAttributes } from 'react';
 export type Props = {
-    Header?: React.ReactNode;
-    children: React.ReactNode;
-    className?: string;
-    gutter?: boolean;
-    hoverTitle?: boolean;
-    slug: string;
-    title?: string;
+    readonly children: React.ReactNode;
+    readonly className?: string;
+    readonly gutter?: boolean;
+    readonly Header?: React.ReactNode;
+    readonly hoverTitle?: boolean;
+    readonly slug: string;
+    readonly title?: string;
 };
 export type TogglerProps = {
     children: React.ReactNode;

package/dist/elements/Drawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}

package/dist/elements/Drawer/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/elements/Drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type Props = {\n  Header?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  gutter?: boolean\n  hoverTitle?: boolean\n  slug: string\n  title?: string\n}\n\nexport type TogglerProps = {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"names":[],"mappings":"AAYA,WAKqC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type Props = {\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly gutter?: boolean\n  readonly Header?: React.ReactNode\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"mappings":"AAYA","ignoreList":[]}

package/dist/elements/Drawer/useDrawerSlug.js

@@ -1,14 +1,26 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { useId } from 'react';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { formatDrawerSlug } from './index.js';
-export const useDrawerSlug = (slug)=>{
-    const uuid = useId();
-    const editDepth = useEditDepth();
-    return formatDrawerSlug({
-        slug: `${slug}-${uuid}`,
-        depth: editDepth
+export const useDrawerSlug = slug => {
+  const $ = _c(3);
+  const uuid = useId();
+  const editDepth = useEditDepth();
+  const t0 = `${slug}-${uuid}`;
+  let t1;
+  if ($[0] !== t0 || $[1] !== editDepth) {
+    t1 = formatDrawerSlug({
+      slug: t0,
+      depth: editDepth
     });
+    $[0] = t0;
+    $[1] = editDepth;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=useDrawerSlug.js.map

package/dist/elements/Drawer/useDrawerSlug.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/useDrawerSlug.tsx"],"sourcesContent":["'use client'\nimport { useId } from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { formatDrawerSlug } from './index.js'\n\nexport const useDrawerSlug = (slug: string): string => {\n  const uuid = useId()\n  const editDepth = useEditDepth()\n  return formatDrawerSlug({\n    slug: `${slug}-${uuid}`,\n    depth: editDepth,\n  })\n}\n"],"names":["useId","useEditDepth","formatDrawerSlug","useDrawerSlug","slug","uuid","editDepth","depth"],"mappings":"AAAA;AACA,SAASA,KAAK,QAAQ,QAAO;AAE7B,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,gBAAgB,QAAQ,aAAY;AAE7C,OAAO,MAAMC,gBAAgB,CAACC;IAC5B,MAAMC,OAAOL;IACb,MAAMM,YAAYL;IAClB,OAAOC,iBAAiB;QACtBE,MAAM,CAAC,EAAEA,KAAK,CAAC,EAAEC,KAAK,CAAC;QACvBE,OAAOD;IACT;AACF,EAAC"}
+{"version":3,"file":"useDrawerSlug.js","names":["c","_c","useId","useEditDepth","formatDrawerSlug","useDrawerSlug","slug","$","uuid","editDepth","t0","t1","depth"],"sources":["../../../src/elements/Drawer/useDrawerSlug.tsx"],"sourcesContent":["'use client'\nimport { useId } from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { formatDrawerSlug } from './index.js'\n\nexport const useDrawerSlug = (slug: string): string => {\n  const uuid = useId()\n  const editDepth = useEditDepth()\n  return formatDrawerSlug({\n    slug: `${slug}-${uuid}`,\n    depth: editDepth,\n  })\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AACA,SAASC,KAAK,QAAQ;AAEtB,SAASC,YAAY,QAAQ;AAC7B,SAASC,gBAAgB,QAAQ;AAEjC,OAAO,MAAMC,aAAA,GAAgBC,IAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAC3B,MAAAO,IAAA,GAAaN,KAAA;EACb,MAAAO,SAAA,GAAkBN,YAAA;EAEV,MAAAO,EAAA,MAAGJ,IAAA,IAAQE,IAAA,EAAM;EAAA,IAAAG,EAAA;EAAA,IAAAJ,CAAA,QAAAG,EAAA,IAAAH,CAAA,QAAAE,SAAA;IADlBE,EAAA,GAAAP,gBAAA;MAAAE,IAAA,EACCI,EAAiB;MAAAE,KAAA,EAChBH;IAAA,CACT;IAAAF,CAAA,MAAAG,EAAA;IAAAH,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,OAHOI,EAGP;AAAA,CACF","ignoreList":[]}

package/dist/elements/Dropzone/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import './index.scss';
 export type Props = {
-    className?: string;
-    mimeTypes?: string[];
-    onChange: (e: FileList) => void;
-    onPasteUrlClick?: () => void;
+    readonly children?: React.ReactNode;
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly dropzoneStyle?: 'default' | 'none';
+    readonly multipleFiles?: boolean;
+    readonly onChange: (e: FileList) => void;
 };
-export declare const Dropzone: React.FC<Props>;
+export declare function Dropzone({ children, className, disabled, dropzoneStyle, multipleFiles, onChange, }: Props): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Dropzone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC/B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiHpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3C,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,aAAyB,EACzB,aAAa,EACb,QAAQ,GACT,EAAE,KAAK,qBA6FP"}

package/dist/elements/Dropzone/index.js

@@ -1,122 +1,82 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { useTranslation } from '../../providers/Translation/index.js';
-import { Button } from '../Button/index.js';
 import './index.scss';
-const handleDragOver = (e)=>{
-    e.preventDefault();
-    e.stopPropagation();
+const handleDragOver = e => {
+  e.preventDefault();
+  e.stopPropagation();
 };
 const baseClass = 'dropzone';
-export const Dropzone = ({ className, mimeTypes, onChange, onPasteUrlClick })=>{
-    const dropRef = React.useRef(null);
-    const [dragging, setDragging] = React.useState(false);
-    const inputRef = React.useRef(null);
-    const { t } = useTranslation();
-    const handlePaste = React.useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        if (e.clipboardData.files && e.clipboardData.files.length > 0) {
-            onChange(e.clipboardData.files);
-        }
-    }, [
-        onChange
-    ]);
-    const handleDragEnter = React.useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        setDragging(true);
-    }, []);
-    const handleDragLeave = React.useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        setDragging(false);
-    }, []);
-    const handleDrop = React.useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        setDragging(false);
-        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-            onChange(e.dataTransfer.files);
-            setDragging(false);
-            e.dataTransfer.clearData();
-        }
-    }, [
-        onChange
-    ]);
-    const handleFileSelection = React.useCallback((e)=>{
-        if (e.target.files && e.target.files.length > 0) {
-            onChange(e.target.files);
-        }
-    }, [
-        onChange
-    ]);
-    React.useEffect(()=>{
-        const div = dropRef.current;
-        if (div) {
-            div.addEventListener('dragenter', handleDragEnter);
-            div.addEventListener('dragleave', handleDragLeave);
-            div.addEventListener('dragover', handleDragOver);
-            div.addEventListener('drop', handleDrop);
-            div.addEventListener('paste', handlePaste);
-            return ()=>{
-                div.removeEventListener('dragenter', handleDragEnter);
-                div.removeEventListener('dragleave', handleDragLeave);
-                div.removeEventListener('dragover', handleDragOver);
-                div.removeEventListener('drop', handleDrop);
-                div.removeEventListener('paste', handlePaste);
-            };
-        }
-        return ()=>null;
-    }, [
-        handleDragEnter,
-        handleDragLeave,
-        handleDrop,
-        handlePaste
-    ]);
-    const classes = [
-        baseClass,
-        className,
-        dragging ? 'dragging' : ''
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ _jsxs("div", {
-        className: classes,
-        ref: dropRef,
-        children: [
-            /*#__PURE__*/ _jsx(Button, {
-                buttonStyle: "secondary",
-                className: `${baseClass}__file-button`,
-                onClick: ()=>{
-                    inputRef.current.click();
-                },
-                size: "small",
-                children: t('upload:selectFile')
-            }),
-            /*#__PURE__*/ _jsx(Button, {
-                buttonStyle: "secondary",
-                className: `${baseClass}__file-button`,
-                onClick: onPasteUrlClick,
-                size: "small",
-                children: t('upload:pasteURL')
-            }),
-            /*#__PURE__*/ _jsx("input", {
-                accept: mimeTypes?.join(','),
-                className: `${baseClass}__hidden-input`,
-                onChange: handleFileSelection,
-                ref: inputRef,
-                type: "file"
-            }),
-            /*#__PURE__*/ _jsxs("p", {
-                className: `${baseClass}__label`,
-                children: [
-                    t('general:or'),
-                    " ",
-                    t('upload:dragAndDrop')
-                ]
-            })
-        ]
-    });
-};
-
+export function Dropzone({
+  children,
+  className,
+  disabled = false,
+  dropzoneStyle = 'default',
+  multipleFiles,
+  onChange
+}) {
+  const dropRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const addFiles = React.useCallback(files => {
+    if (!multipleFiles && files.length > 1) {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(files[0]);
+      onChange(dataTransfer.files);
+    } else {
+      onChange(files);
+    }
+  }, [multipleFiles, onChange]);
+  const handlePaste = React.useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.clipboardData.files && e.clipboardData.files.length > 0) {
+      addFiles(e.clipboardData.files);
+    }
+  }, [addFiles]);
+  const handleDragEnter = React.useCallback(e_0 => {
+    e_0.preventDefault();
+    e_0.stopPropagation();
+    setDragging(true);
+  }, []);
+  const handleDragLeave = React.useCallback(e_1 => {
+    e_1.preventDefault();
+    e_1.stopPropagation();
+    setDragging(false);
+  }, []);
+  const handleDrop = React.useCallback(e_2 => {
+    e_2.preventDefault();
+    e_2.stopPropagation();
+    setDragging(false);
+    if (e_2.dataTransfer.files && e_2.dataTransfer.files.length > 0) {
+      addFiles(e_2.dataTransfer.files);
+      setDragging(false);
+      e_2.dataTransfer.clearData();
+    }
+  }, [addFiles]);
+  React.useEffect(() => {
+    const div = dropRef.current;
+    if (div && !disabled) {
+      div.addEventListener('dragenter', handleDragEnter);
+      div.addEventListener('dragleave', handleDragLeave);
+      div.addEventListener('dragover', handleDragOver);
+      div.addEventListener('drop', handleDrop);
+      div.addEventListener('paste', handlePaste);
+      return () => {
+        div.removeEventListener('dragenter', handleDragEnter);
+        div.removeEventListener('dragleave', handleDragLeave);
+        div.removeEventListener('dragover', handleDragOver);
+        div.removeEventListener('drop', handleDrop);
+        div.removeEventListener('paste', handlePaste);
+      };
+    }
+    return () => null;
+  }, [disabled, handleDragEnter, handleDragLeave, handleDrop, handlePaste]);
+  const classes = [baseClass, className, dragging ? 'dragging' : '', `dropzoneStyle--${dropzoneStyle}`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    ref: dropRef,
+    children: children
+  });
+}
 //# sourceMappingURL=index.js.map

package/dist/elements/Dropzone/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Dropzone/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst handleDragOver = (e: DragEvent) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nconst baseClass = 'dropzone'\n\nexport type Props = {\n  className?: string\n  mimeTypes?: string[]\n  onChange: (e: FileList) => void\n  onPasteUrlClick?: () => void\n}\n\nexport const Dropzone: React.FC<Props> = ({ className, mimeTypes, onChange, onPasteUrlClick }) => {\n  const dropRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n  const inputRef = React.useRef(null)\n\n  const { t } = useTranslation()\n\n  const handlePaste = React.useCallback(\n    (e: ClipboardEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (e.clipboardData.files && e.clipboardData.files.length > 0) {\n        onChange(e.clipboardData.files)\n      }\n    },\n    [onChange],\n  )\n\n  const handleDragEnter = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(true)\n  }, [])\n\n  const handleDragLeave = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(false)\n  }, [])\n\n  const handleDrop = React.useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setDragging(false)\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        onChange(e.dataTransfer.files)\n        setDragging(false)\n\n        e.dataTransfer.clearData()\n      }\n    },\n    [onChange],\n  )\n\n  const handleFileSelection = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        onChange(e.target.files)\n      }\n    },\n    [onChange],\n  )\n\n  React.useEffect(() => {\n    const div = dropRef.current\n\n    if (div) {\n      div.addEventListener('dragenter', handleDragEnter)\n      div.addEventListener('dragleave', handleDragLeave)\n      div.addEventListener('dragover', handleDragOver)\n      div.addEventListener('drop', handleDrop)\n      div.addEventListener('paste', handlePaste)\n\n      return () => {\n        div.removeEventListener('dragenter', handleDragEnter)\n        div.removeEventListener('dragleave', handleDragLeave)\n        div.removeEventListener('dragover', handleDragOver)\n        div.removeEventListener('drop', handleDrop)\n        div.removeEventListener('paste', handlePaste)\n      }\n    }\n\n    return () => null\n  }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste])\n\n  const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ')\n\n  return (\n    <div className={classes} ref={dropRef}>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__file-button`}\n        onClick={() => {\n          inputRef.current.click()\n        }}\n        size=\"small\"\n      >\n        {t('upload:selectFile')}\n      </Button>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__file-button`}\n        onClick={onPasteUrlClick}\n        size=\"small\"\n      >\n        {t('upload:pasteURL')}\n      </Button>\n      <input\n        accept={mimeTypes?.join(',')}\n        className={`${baseClass}__hidden-input`}\n        onChange={handleFileSelection}\n        ref={inputRef}\n        type=\"file\"\n      />\n\n      <p className={`${baseClass}__label`}>\n        {t('general:or')} {t('upload:dragAndDrop')}\n      </p>\n    </div>\n  )\n}\n"],"names":["React","useTranslation","Button","handleDragOver","e","preventDefault","stopPropagation","baseClass","Dropzone","className","mimeTypes","onChange","onPasteUrlClick","dropRef","useRef","dragging","setDragging","useState","inputRef","t","handlePaste","useCallback","clipboardData","files","length","handleDragEnter","handleDragLeave","handleDrop","dataTransfer","clearData","handleFileSelection","target","useEffect","div","current","addEventListener","removeEventListener","classes","filter","Boolean","join","ref","buttonStyle","onClick","click","size","input","accept","type","p"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","handleDragOver","e","preventDefault","stopPropagation","baseClass","Dropzone","children","className","disabled","dropzoneStyle","multipleFiles","onChange","dropRef","useRef","dragging","setDragging","useState","addFiles","useCallback","files","length","dataTransfer","DataTransfer","items","add","handlePaste","clipboardData","handleDragEnter","handleDragLeave","handleDrop","clearData","useEffect","div","current","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsx","ref"],"sources":["../../../src/elements/Dropzone/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst handleDragOver = (e: DragEvent) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nconst baseClass = 'dropzone'\n\nexport type Props = {\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly disabled?: boolean\n  readonly dropzoneStyle?: 'default' | 'none'\n  readonly multipleFiles?: boolean\n  readonly onChange: (e: FileList) => void\n}\n\nexport function Dropzone({\n  children,\n  className,\n  disabled = false,\n  dropzoneStyle = 'default',\n  multipleFiles,\n  onChange,\n}: Props) {\n  const dropRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n\n  const addFiles = React.useCallback(\n    (files: FileList) => {\n      if (!multipleFiles && files.length > 1) {\n        const dataTransfer = new DataTransfer()\n        dataTransfer.items.add(files[0])\n        onChange(dataTransfer.files)\n      } else {\n        onChange(files)\n      }\n    },\n    [multipleFiles, onChange],\n  )\n\n  const handlePaste = React.useCallback(\n    (e: ClipboardEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (e.clipboardData.files && e.clipboardData.files.length > 0) {\n        addFiles(e.clipboardData.files)\n      }\n    },\n    [addFiles],\n  )\n\n  const handleDragEnter = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(true)\n  }, [])\n\n  const handleDragLeave = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(false)\n  }, [])\n\n  const handleDrop = React.useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setDragging(false)\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        addFiles(e.dataTransfer.files)\n        setDragging(false)\n\n        e.dataTransfer.clearData()\n      }\n    },\n    [addFiles],\n  )\n\n  React.useEffect(() => {\n    const div = dropRef.current\n\n    if (div && !disabled) {\n      div.addEventListener('dragenter', handleDragEnter)\n      div.addEventListener('dragleave', handleDragLeave)\n      div.addEventListener('dragover', handleDragOver)\n      div.addEventListener('drop', handleDrop)\n      div.addEventListener('paste', handlePaste)\n\n      return () => {\n        div.removeEventListener('dragenter', handleDragEnter)\n        div.removeEventListener('dragleave', handleDragLeave)\n        div.removeEventListener('dragover', handleDragOver)\n        div.removeEventListener('drop', handleDrop)\n        div.removeEventListener('paste', handlePaste)\n      }\n    }\n\n    return () => null\n  }, [disabled, handleDragEnter, handleDragLeave, handleDrop, handlePaste])\n\n  const classes = [\n    baseClass,\n    className,\n    dragging ? 'dragging' : '',\n    `dropzoneStyle--${dropzoneStyle}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes} ref={dropRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}