@payloadcms/ui 3.0.0-canary.b922438 → 3.0.0-canary.bb00d64

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\nconst zBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') onClick(e)\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  Header,\n  children,\n  className,\n  gutter = true,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useEditDepth()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        slug={slug}\n        style={{\n          zIndex: zBase + drawerDepth,\n        }}\n      >\n        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div\n          className={`${baseClass}__content`}\n          style={{\n            width: `calc(100% - (${drawerDepth} * var(--gutter-h))`,\n          }}\n        >\n          <div className={`${baseClass}__blur-bg-content`} />\n          <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n            <EditDepthContext.Provider value={drawerDepth + 1}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <button\n                    aria-label={t('general:close')}\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </EditDepthContext.Provider>\n          </Gutter>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n"],"names":["Modal","useModal","React","useCallback","useEffect","useState","XIcon","EditDepthContext","useEditDepth","useTranslation","Gutter","baseClass","zBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","children","className","disabled","onClick","rest","openModal","handleClick","e","button","type","Drawer","Header","gutter","hoverTitle","title","t","closeModal","modalState","drawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","filter","Boolean","join","style","zIndex","div","aria-label","id","width","left","right","Provider","value","undefined","h2"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","createContext","useCallback","useContext","useEffect","useState","XIcon","useTranslation","Gutter","baseClass","drawerZBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","onClick","className","disabled","rest","children","openModal","t1","e","handleClick","t2","_jsx","type","Drawer","gutter","Header","hoverTitle","title","undefined","t","closeModal","modalState","drawerDepth","useDrawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","t3","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","DrawerDepthProvider","_jsxs","style","zIndex","id","width","left","right","DrawerDepthContext","parentDepth","Provider","value"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { createContext, useCallback, useContext, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  gutter = true,\n  Header,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useDrawerDepth()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <DrawerDepthProvider>\n        <Modal\n          className={[\n            className,\n            baseClass,\n            animateIn && `${baseClass}--is-open`,\n            drawerDepth > 1 && `${baseClass}--nested`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          slug={slug}\n          style={{\n            zIndex: drawerZBase + drawerDepth,\n          }}\n        >\n          {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n          <button\n            aria-label={t('general:close')}\n            className={`${baseClass}__close`}\n            id={`close-drawer__${slug}`}\n            onClick={() => closeModal(slug)}\n            type=\"button\"\n          />\n          <div\n            className={`${baseClass}__content`}\n            style={{\n              width: `calc(100% - (${drawerDepth} * var(--gutter-h))`,\n            }}\n          >\n            <div className={`${baseClass}__blur-bg-content`} />\n            <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <button\n                    aria-label={t('general:close')}\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </Gutter>\n          </div>\n        </Modal>\n      </DrawerDepthProvider>\n    )\n  }\n\n  return null\n}\n\nexport const DrawerDepthContext = createContext(1)\n\nexport const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDrawerDepth()\n  const depth = parentDepth + 1\n\n  return <DrawerDepthContext.Provider value={depth}>{children}</DrawerDepthContext.Provider>\n}\n\nexport const useDrawerDepth = (): number => useContext(DrawerDepthContext)\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Drawer/index.scss

@@ -2,138 +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;
-    // NOTE: width is controlled by js
-    // 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;
-    align-items: center;
-    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;
-      direction: ltr;
+      opacity: 0;
+      will-change: opacity;
+      transition: none;
+      transition-delay: 0ms;
+      flex-grow: 1;
+      background: var(--theme-elevation-800);
+
+      &:active,
+      &:focus {
+        outline: 0;
+      }
+    }
+
+    &__header {
       display: flex;
       align-items: center;
-      justify-content: center;
-      width: base(1.2);
-      height: base(1.2);
+      margin-top: base(2.5);
+      margin-bottom: base(1);
+      width: 100%;
 
-      svg {
-        margin: base(-1.2);
-        width: base(2.4);
-        height: base(2.4);
-
-        position: relative;
+      &__title {
+        margin: 0;
+        flex-grow: 1;
+      }
 
-        .stroke {
-          stroke-width: 1px;
-          vector-effect: non-scaling-stroke;
+      &__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;
+          }
         }
       }
     }
-  }
 
-  @include mid-break {
-    &__header {
-      margin-top: base(1.5);
+    @include mid-break {
+      &__header {
+        margin-top: base(1.5);
+      }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .drawer {
-    &__close {
-      background: var(--color-base-1000);
-    }
+  html[data-theme='dark'] {
+    .drawer {
+      &__close {
+        background: var(--color-base-1000);
+      }
 
-    &--is-open {
-      .drawer__close {
-        opacity: 0.25;
+      &--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: "medium",
-                children: t('upload:selectFile')
-            }),
-            /*#__PURE__*/ _jsx(Button, {
-                buttonStyle: "secondary",
-                className: `${baseClass}__file-button`,
-                onClick: onPasteUrlClick,
-                size: "medium",
-                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