@payloadcms/ui 4.0.0-canary.2 → 4.0.0-canary.4

package/dist/css/colors.css

@@ -35,6 +35,9 @@
     /* Modal */
     --color-modalbackdrop: rgba(0, 0, 0, 0.5);
 
+    /* Focal point */
+    --color-focal-point-backdrop: var(--ramp-black-500);
+
     /* ——————————————————————————————————————————————
        Light Theme (default)
 
@@ -315,6 +318,9 @@
     --color-bg-component-tertiary: var(--ramp-pale-purple-800);
     --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700);
 
+    --color-bg-danger: var(--ramp-dark-red-500);
+    --color-bg-danger-hover: var(--ramp-dark-red-600);
+    --color-bg-danger-pressed: var(--ramp-dark-red-700);
     --color-bg-danger-tertiary: var(--ramp-pale-red-800);
     --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700);
     --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600);

package/dist/css/design-tokens.css

@@ -88,6 +88,11 @@
     --ramp-red-900: #771208;
     --ramp-red-1000: #660e0b;
 
+    /* Dark Red */
+    --ramp-dark-red-500: #e03e1a;
+    --ramp-dark-red-600: #c4381c;
+    --ramp-dark-red-700: #963323;
+
     /* Pale Red */
     --ramp-pale-red-600: #a55440;
     --ramp-pale-red-700: #864537;

package/dist/css/elevations.css

@@ -2,6 +2,8 @@
   :root {
     /* Light mode elevations */
 
+    --elevation-100-canvas: 0 0 0.5px 0 rgba(0, 0, 0, 0.3);
+
     --elevation-300-tooltip:
       0 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.13),
       0 1px 3px 0 rgba(0, 0, 0, 0.1);
@@ -18,6 +20,8 @@
   [data-theme='dark'] {
     /* Dark mode elevations */
 
+    --elevation-100-canvas: 0 0 0.5px 0 rgba(0, 0, 0, 0.5);
+
     --elevation-300-tooltip:
       0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset, 0 5px 12px 0 rgba(0, 0, 0, 0.35),
       0 0 0.5px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.5);

package/dist/css/utilities.css

@@ -1,8 +1,9 @@
 @layer payload-default {
   :root {
     --accessibility-focus-color: var(--color-border-selected);
-    --accessibility-outline: 1px solid var(--accessibility-focus-color);
+    --accessibility-outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
     --accessibility-outline-offset: 1px;
+    --scrollbar-color: var(--color-bg-secondary-pressed);
   }
 
   /* Screen reader only */
@@ -20,7 +21,7 @@
 
   .scrollbar-thin {
     scrollbar-width: thin;
-    scrollbar-color: var(--color-border) transparent;
+    scrollbar-color: var(--scrollbar-color) transparent;
   }
 
   /* Global focus ring */

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import type { UserMenuSettingsGroup } from '../UserMenu/SettingsMenu/index.js';
 import './index.css';
 type Props = {
     CustomAvatar?: React.ReactNode;
-    settingsItems?: React.ReactNode[];
+    settingsItemGroups?: UserMenuSettingsGroup[];
 };
-export declare function AppHeader({ CustomAvatar, settingsItems }: Props): React.JSX.Element;
+export declare function AppHeader({ CustomAvatar, settingsItemGroups }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AppHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAe1D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CAClC,CAAA;AACD,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,KAAK,qBAkG/D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AppHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAE1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAgB9E,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB,CAAC,EAAE,qBAAqB,EAAE,CAAA;CAC7C,CAAA;AACD,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,EAAE,KAAK,qBAwGpE"}

package/dist/elements/AppHeader/index.js

@@ -2,6 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
+import { useElementHeightVariable } from '../../hooks/useElementHeightVariable.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { LanguageIcon } from '../../icons/Language/index.js';
 import { SidebarIcon } from '../../icons/Sidebar/index.js';
@@ -19,7 +20,7 @@ import './index.css';
 const baseClass = 'app-header';
 export function AppHeader({
   CustomAvatar,
-  settingsItems
+  settingsItemGroups
 }) {
   const {
     t
@@ -37,8 +38,13 @@ export function AppHeader({
       localization
     }
   } = useConfig();
+  const headerRef = useRef(null);
   const customControlsRef = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
+  useElementHeightVariable({
+    cssVar: '--app-header-height',
+    ref: headerRef
+  });
   useEffect(() => {
     const checkIsScrollable = () => {
       const el = customControlsRef.current;
@@ -56,6 +62,7 @@ export function AppHeader({
   const ActionComponents = Actions ? Object.values(Actions) : [];
   return /*#__PURE__*/_jsx("header", {
     className: [baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' '),
+    ref: headerRef,
     children: /*#__PURE__*/_jsx("div", {
       className: `${baseClass}__content`,
       children: /*#__PURE__*/_jsxs("div", {
@@ -125,7 +132,7 @@ export function AppHeader({
             })
           }), /*#__PURE__*/_jsx(UserMenu, {
             CustomAvatar: CustomAvatar,
-            settingsItems: settingsItems
+            settingsItemGroups: settingsItemGroups
           })]
         })]
       })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useRef","useState","ChevronIcon","LanguageIcon","SidebarIcon","useActions","useConfig","useLocale","useTranslation","Button","Localizer","useNav","NavToggler","StepNav","UserMenu","baseClass","AppHeader","CustomAvatar","settingsItems","t","locale","Actions","navOpen","setNavOpen","config","localization","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsx","className","filter","Boolean","join","_jsxs","tabIndex","buttonStyle","icon","onClick","type","ref","map","Action","i","length","renderButton","active","onKeyDown","ariaProps","extraButtonProps","style","padding","size","iconPosition","selected","code","direction"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { SidebarIcon } from '../../icons/Sidebar/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport { UserMenu } from '../UserMenu/index.js'\nimport './index.css'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n  settingsItems?: React.ReactNode[]\n}\nexport function AppHeader({ CustomAvatar, settingsItems }: Props) {\n  const { t } = useTranslation()\n  const locale = useLocale()\n\n  const { Actions } = useActions()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1} />\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <Button\n                aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__sidebar-toggle`}\n                icon={<SidebarIcon />}\n                onClick={() => setNavOpen(!navOpen)}\n                type=\"button\"\n              />\n              <div className={`${baseClass}__step-nav-wrapper`}>\n                <StepNav className={`${baseClass}__step-nav`} />\n              </div>\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <Localizer\n                className={`${baseClass}__localizer`}\n                renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n                  <Button\n                    aria-label={t('general:locale')}\n                    buttonStyle=\"secondary\"\n                    extraButtonProps={{ onKeyDown, style: { padding: '0 var(--spacer-1) 0 0' } }}\n                    icon={<LanguageIcon size={24} />}\n                    iconPosition=\"left\"\n                    onClick={onClick}\n                    selected={active}\n                    {...ariaProps}\n                  >\n                    <div className=\"localizer__button-content\">\n                      {locale.code}\n                      <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                    </div>\n                  </Button>\n                )}\n              />\n            )}\n            <UserMenu CustomAvatar={CustomAvatar} settingsItems={settingsItems} />\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useRef","useState","useElementHeightVariable","ChevronIcon","LanguageIcon","SidebarIcon","useActions","useConfig","useLocale","useTranslation","Button","Localizer","useNav","NavToggler","StepNav","UserMenu","baseClass","AppHeader","CustomAvatar","settingsItemGroups","t","locale","Actions","navOpen","setNavOpen","config","localization","headerRef","customControlsRef","isScrollable","setIsScrollable","cssVar","ref","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsx","className","filter","Boolean","join","_jsxs","tabIndex","buttonStyle","icon","onClick","type","map","Action","i","length","renderButton","active","onKeyDown","ariaProps","extraButtonProps","style","padding","size","iconPosition","selected","code","direction"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { UserMenuSettingsGroup } from '../UserMenu/SettingsMenu/index.js'\n\nimport { useElementHeightVariable } from '../../hooks/useElementHeightVariable.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { SidebarIcon } from '../../icons/Sidebar/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport { UserMenu } from '../UserMenu/index.js'\nimport './index.css'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n  settingsItemGroups?: UserMenuSettingsGroup[]\n}\nexport function AppHeader({ CustomAvatar, settingsItemGroups }: Props) {\n  const { t } = useTranslation()\n  const locale = useLocale()\n\n  const { Actions } = useActions()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const headerRef = useRef<HTMLElement>(null)\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useElementHeightVariable({ cssVar: '--app-header-height', ref: headerRef })\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header\n      className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}\n      ref={headerRef}\n    >\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1} />\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <Button\n                aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__sidebar-toggle`}\n                icon={<SidebarIcon />}\n                onClick={() => setNavOpen(!navOpen)}\n                type=\"button\"\n              />\n              <div className={`${baseClass}__step-nav-wrapper`}>\n                <StepNav className={`${baseClass}__step-nav`} />\n              </div>\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <Localizer\n                className={`${baseClass}__localizer`}\n                renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n                  <Button\n                    aria-label={t('general:locale')}\n                    buttonStyle=\"secondary\"\n                    extraButtonProps={{ onKeyDown, style: { padding: '0 var(--spacer-1) 0 0' } }}\n                    icon={<LanguageIcon size={24} />}\n                    iconPosition=\"left\"\n                    onClick={onClick}\n                    selected={active}\n                    {...ariaProps}\n                  >\n                    <div className=\"localizer__button-content\">\n                      {locale.code}\n                      <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                    </div>\n                  </Button>\n                )}\n              />\n            )}\n            <UserMenu CustomAvatar={CustomAvatar} settingsItemGroups={settingsItemGroups} />\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ArrayAction/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4GvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ArrayAction/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2GvC,CAAA"}

package/dist/elements/ArrayAction/index.js

@@ -120,8 +120,7 @@ export const ArrayAction = t0 => {
             children: t("general:remove")
           })]
         });
-      },
-      size: "medium"
+      }
     });
     $[0] = addRow;
     $[1] = copyRow;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ArrowIcon","ClipboardIcon","CopyIcon","DuplicateIcon","MoreIcon","PlusIcon","XIcon","useTranslation","Popup","PopupList","baseClass","ArrayAction","t0","$","addRow","copyRow","duplicateRow","hasMaxRows","index","isSortable","moveRow","pasteRow","removeRow","rowCount","t","t1","_jsx","button","buttonClassName","caret","className","horizontalAlign","render","t2","close","_jsxs","MenuItem","children","Button","icon","direction","size","Fragment"],"sources":["../../../src/elements/ArrayAction/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ArrowIcon } from '../../icons/Arrow/index.js'\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { DuplicateIcon } from '../../icons/Duplicate/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'array-actions'\n\nexport type Props = {\n  addRow: (current: number, blockType?: string) => Promise<void> | void\n  copyRow: (index: number) => void\n  duplicateRow: (current: number) => void\n  hasMaxRows: boolean\n  index: number\n  isSortable?: boolean\n  moveRow: (from: number, to: number) => void\n  pasteRow: (index: number) => void\n  removeRow: (index: number) => void\n  rowCount: number\n}\n\nexport const ArrayAction: React.FC<Props> = ({\n  addRow,\n  copyRow,\n  duplicateRow,\n  hasMaxRows,\n  index,\n  isSortable,\n  moveRow,\n  pasteRow,\n  removeRow,\n  rowCount,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => {\n        return (\n          <PopupList.MenuItem>\n            {isSortable && index !== 0 && (\n              <PopupList.Button\n                className={`${baseClass}__action ${baseClass}__move-up`}\n                icon={<ArrowIcon direction=\"up\" size={24} />}\n                onClick={() => {\n                  moveRow(index, index - 1)\n                  close()\n                }}\n              >\n                {t('general:moveUp')}\n              </PopupList.Button>\n            )}\n            {isSortable && index < rowCount - 1 && (\n              <PopupList.Button\n                className={`${baseClass}__action`}\n                icon={<ArrowIcon direction=\"down\" size={24} />}\n                onClick={() => {\n                  moveRow(index, index + 1)\n                  close()\n                }}\n              >\n                {t('general:moveDown')}\n              </PopupList.Button>\n            )}\n            {!hasMaxRows && (\n              <React.Fragment>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__add`}\n                  icon={<PlusIcon size={24} />}\n                  onClick={() => {\n                    void addRow(index + 1)\n                    close()\n                  }}\n                >\n                  {t('general:addBelow')}\n                </PopupList.Button>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__duplicate`}\n                  icon={<DuplicateIcon size={24} />}\n                  onClick={() => {\n                    duplicateRow(index)\n                    close()\n                  }}\n                >\n                  {t('general:duplicate')}\n                </PopupList.Button>\n              </React.Fragment>\n            )}\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__copy`}\n              icon={<CopyIcon size={24} />}\n              onClick={() => {\n                copyRow(index)\n                close()\n              }}\n            >\n              {t('general:copyRow')}\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__paste`}\n              icon={<ClipboardIcon size={24} />}\n              onClick={() => {\n                pasteRow(index)\n                close()\n              }}\n            >\n              {t('general:pasteRow')}\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__remove`}\n              icon={<XIcon size={24} />}\n              onClick={() => {\n                removeRow(index)\n                close()\n              }}\n            >\n              {t('general:remove')}\n            </PopupList.Button>\n          </PopupList.MenuItem>\n        )\n      }}\n      size=\"medium\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ArrowIcon","ClipboardIcon","CopyIcon","DuplicateIcon","MoreIcon","PlusIcon","XIcon","useTranslation","Popup","PopupList","baseClass","ArrayAction","t0","$","addRow","copyRow","duplicateRow","hasMaxRows","index","isSortable","moveRow","pasteRow","removeRow","rowCount","t","t1","_jsx","button","buttonClassName","caret","className","horizontalAlign","render","t2","close","_jsxs","MenuItem","children","Button","icon","direction","size","Fragment"],"sources":["../../../src/elements/ArrayAction/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ArrowIcon } from '../../icons/Arrow/index.js'\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { DuplicateIcon } from '../../icons/Duplicate/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'array-actions'\n\nexport type Props = {\n  addRow: (current: number, blockType?: string) => Promise<void> | void\n  copyRow: (index: number) => void\n  duplicateRow: (current: number) => void\n  hasMaxRows: boolean\n  index: number\n  isSortable?: boolean\n  moveRow: (from: number, to: number) => void\n  pasteRow: (index: number) => void\n  removeRow: (index: number) => void\n  rowCount: number\n}\n\nexport const ArrayAction: React.FC<Props> = ({\n  addRow,\n  copyRow,\n  duplicateRow,\n  hasMaxRows,\n  index,\n  isSortable,\n  moveRow,\n  pasteRow,\n  removeRow,\n  rowCount,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => {\n        return (\n          <PopupList.MenuItem>\n            {isSortable && index !== 0 && (\n              <PopupList.Button\n                className={`${baseClass}__action ${baseClass}__move-up`}\n                icon={<ArrowIcon direction=\"up\" size={24} />}\n                onClick={() => {\n                  moveRow(index, index - 1)\n                  close()\n                }}\n              >\n                {t('general:moveUp')}\n              </PopupList.Button>\n            )}\n            {isSortable && index < rowCount - 1 && (\n              <PopupList.Button\n                className={`${baseClass}__action`}\n                icon={<ArrowIcon direction=\"down\" size={24} />}\n                onClick={() => {\n                  moveRow(index, index + 1)\n                  close()\n                }}\n              >\n                {t('general:moveDown')}\n              </PopupList.Button>\n            )}\n            {!hasMaxRows && (\n              <React.Fragment>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__add`}\n                  icon={<PlusIcon size={24} />}\n                  onClick={() => {\n                    void addRow(index + 1)\n                    close()\n                  }}\n                >\n                  {t('general:addBelow')}\n                </PopupList.Button>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__duplicate`}\n                  icon={<DuplicateIcon size={24} />}\n                  onClick={() => {\n                    duplicateRow(index)\n                    close()\n                  }}\n                >\n                  {t('general:duplicate')}\n                </PopupList.Button>\n              </React.Fragment>\n            )}\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__copy`}\n              icon={<CopyIcon size={24} />}\n              onClick={() => {\n                copyRow(index)\n                close()\n              }}\n            >\n              {t('general:copyRow')}\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__paste`}\n              icon={<ClipboardIcon size={24} />}\n              onClick={() => {\n                pasteRow(index)\n                close()\n              }}\n            >\n              {t('general:pasteRow')}\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__remove`}\n              icon={<XIcon size={24} />}\n              onClick={() => {\n                removeRow(index)\n                close()\n              }}\n            >\n              {t('general:remove')}\n            </PopupList.Button>\n          </PopupList.MenuItem>\n        )\n      }}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BulkUpload/ActionsBar/index.css

@@ -1,19 +1,19 @@
 @layer payload-default {
   .bulk-upload--actions-bar {
     display: flex;
+    flex-shrink: 0;
     padding-inline: var(--gutter-h);
+    padding-block: var(--spacer-2);
     align-items: center;
-    border-bottom: 1px solid var(--color-border);
-    position: sticky;
+    border-top: var(--stroke-width-small) solid var(--color-border);
     z-index: 1;
-    top: 0;
     background-color: var(--color-bg);
-    height: var(--doc-controls-height);
     gap: var(--spacer-2-5);
   }
 
   .bulk-upload--actions-bar__multipleFiles {
     display: flex;
+    align-items: center;
     gap: var(--spacer-2-5);
   }
 
@@ -49,9 +49,5 @@
     .bulk-upload--actions-bar__navigation {
       justify-content: space-between;
     }
-
-    .bulk-upload--actions-bar__saveButtons {
-      display: none;
-    }
   }
 }

package/dist/elements/BulkUpload/ActionsBar/index.d.ts

@@ -1,10 +1,6 @@
-import type { ClientCollectionConfig } from 'payload';
 import React from 'react';
 import './index.css';
-type Props = {
-    readonly collectionConfig: ClientCollectionConfig;
-};
-export declare function ActionsBar({ collectionConfig }: Props): React.JSX.Element;
+export declare function ActionsBar(): React.JSX.Element;
 type ActionsProps = {
     readonly className?: string;
 };

package/dist/elements/BulkUpload/ActionsBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;CAClD,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,gBAAgB,EAAE,EAAE,KAAK,qBAqDrD;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,qBA4BlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,aAAa,CAAA;AAIpB,wBAAgB,UAAU,sBAoDzB;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,qBA4BlD"}

package/dist/elements/BulkUpload/ActionsBar/index.js

@@ -7,15 +7,12 @@ import { ChevronIcon } from '../../../icons/Chevron/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
-import { EditManyBulkUploads } from '../EditMany/index.js';
+import { DialogFooter } from '../../Dialog/DialogFooter/index.js';
 import { useFormsManager } from '../FormsManager/index.js';
 import './index.css';
 const baseClass = 'bulk-upload--actions-bar';
-export function ActionsBar(t0) {
-  const $ = _c(6);
-  const {
-    collectionConfig
-  } = t0;
+export function ActionsBar() {
+  const $ = _c(5);
   const {
     activeIndex,
     forms,
@@ -24,13 +21,12 @@ export function ActionsBar(t0) {
   const {
     t
   } = useTranslation();
-  let t1;
-  if ($[0] !== activeIndex || $[1] !== collectionConfig || $[2] !== forms.length || $[3] !== setActiveIndex || $[4] !== t) {
-    t1 = _jsxs("div", {
-      className: baseClass,
-      children: [forms.length > 1 && _jsxs("div", {
+  let t0;
+  if ($[0] !== activeIndex || $[1] !== forms.length || $[2] !== setActiveIndex || $[3] !== t) {
+    t0 = _jsxs(DialogFooter, {
+      children: [forms.length > 1 && _jsx("div", {
         className: `${baseClass}__multipleFiles`,
-        children: [_jsxs("div", {
+        children: _jsxs("div", {
           className: `${baseClass}__navigation`,
           children: [_jsxs("p", {
             className: `${baseClass}__locationText`,
@@ -73,23 +69,20 @@ export function ActionsBar(t0) {
               type: "button"
             })]
           })]
-        }), _jsx(EditManyBulkUploads, {
-          collection: collectionConfig
-        })]
+        })
       }), _jsx(Actions, {
         className: `${baseClass}__saveButtons`
       })]
     });
     $[0] = activeIndex;
-    $[1] = collectionConfig;
-    $[2] = forms.length;
-    $[3] = setActiveIndex;
-    $[4] = t;
-    $[5] = t1;
+    $[1] = forms.length;
+    $[2] = setActiveIndex;
+    $[3] = t;
+    $[4] = t0;
   } else {
-    t1 = $[5];
+    t0 = $[4];
   }
-  return t1;
+  return t0;
 }
 export function Actions(t0) {
   const $ = _c(12);

package/dist/elements/BulkUpload/ActionsBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useConfig","useTranslation","Button","EditManyBulkUploads","useFormsManager","baseClass","ActionsBar","t0","$","collectionConfig","activeIndex","forms","setActiveIndex","t","t1","length","_jsxs","className","children","_jsx","buttonStyle","icon","direction","nextIndex","type","nextIndex_0","collection","Actions","getEntityConfig","collectionSlug","hasPublishPermission","hasSavePermission","saveAllDocs","t2","filter","Boolean","t3","join","t4","versions","drafts","onClick","overrides","_status"],"sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { EditManyBulkUploads } from '../EditMany/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--actions-bar'\n\ntype Props = {\n  readonly collectionConfig: ClientCollectionConfig\n}\n\nexport function ActionsBar({ collectionConfig }: Props) {\n  const { activeIndex, forms, setActiveIndex } = useFormsManager()\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      {forms.length > 1 && (\n        <div className={`${baseClass}__multipleFiles`}>\n          <div className={`${baseClass}__navigation`}>\n            <p className={`${baseClass}__locationText`}>\n              <strong>{activeIndex + 1}</strong>\n              {` ${t('general:of')} `}\n              <strong>{forms.length}</strong>\n            </p>\n\n            <div className={`${baseClass}__controls`}>\n              <Button\n                aria-label={t('general:previous')}\n                buttonStyle=\"secondary\"\n                icon={<ChevronIcon direction=\"left\" />}\n                onClick={() => {\n                  const nextIndex = activeIndex - 1\n                  if (nextIndex < 0) {\n                    setActiveIndex(forms.length - 1)\n                  } else {\n                    setActiveIndex(nextIndex)\n                  }\n                }}\n                type=\"button\"\n              />\n              <Button\n                aria-label={t('general:next')}\n                buttonStyle=\"secondary\"\n                icon={<ChevronIcon direction=\"right\" />}\n                onClick={() => {\n                  const nextIndex = activeIndex + 1\n                  if (nextIndex === forms.length) {\n                    setActiveIndex(0)\n                  } else {\n                    setActiveIndex(nextIndex)\n                  }\n                }}\n                type=\"button\"\n              />\n            </div>\n          </div>\n          <EditManyBulkUploads collection={collectionConfig} />\n        </div>\n      )}\n\n      <Actions className={`${baseClass}__saveButtons`} />\n    </div>\n  )\n}\n\ntype ActionsProps = {\n  readonly className?: string\n}\nexport function Actions({ className }: ActionsProps) {\n  const { getEntityConfig } = useConfig()\n  const { t } = useTranslation()\n  const { collectionSlug, hasPublishPermission, hasSavePermission, saveAllDocs } = useFormsManager()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  return (\n    <div className={[`${baseClass}__buttons`, className].filter(Boolean).join(' ')}>\n      {collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button\n          buttonStyle=\"secondary\"\n          onClick={() => void saveAllDocs({ overrides: { _status: 'draft' } })}\n        >\n          {t('version:saveDraft')}\n        </Button>\n      ) : null}\n      {collectionConfig?.versions?.drafts && hasPublishPermission ? (\n        <Button onClick={() => void saveAllDocs({ overrides: { _status: 'published' } })}>\n          {t('version:publish')}\n        </Button>\n      ) : null}\n\n      {!collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button onClick={() => void saveAllDocs()}>{t('general:save')}</Button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useConfig","useTranslation","Button","DialogFooter","useFormsManager","baseClass","ActionsBar","$","activeIndex","forms","setActiveIndex","t","t0","length","_jsxs","children","_jsx","className","buttonStyle","icon","direction","nextIndex","type","nextIndex_0","Actions","getEntityConfig","collectionSlug","hasPublishPermission","hasSavePermission","saveAllDocs","t1","collectionConfig","t2","filter","Boolean","t3","join","t4","versions","drafts","onClick","overrides","_status"],"sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogFooter } from '../../Dialog/DialogFooter/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--actions-bar'\n\nexport function ActionsBar() {\n  const { activeIndex, forms, setActiveIndex } = useFormsManager()\n  const { t } = useTranslation()\n\n  return (\n    <DialogFooter>\n      {forms.length > 1 && (\n        <div className={`${baseClass}__multipleFiles`}>\n          <div className={`${baseClass}__navigation`}>\n            <p className={`${baseClass}__locationText`}>\n              <strong>{activeIndex + 1}</strong>\n              {` ${t('general:of')} `}\n              <strong>{forms.length}</strong>\n            </p>\n\n            <div className={`${baseClass}__controls`}>\n              <Button\n                aria-label={t('general:previous')}\n                buttonStyle=\"secondary\"\n                icon={<ChevronIcon direction=\"left\" />}\n                onClick={() => {\n                  const nextIndex = activeIndex - 1\n                  if (nextIndex < 0) {\n                    setActiveIndex(forms.length - 1)\n                  } else {\n                    setActiveIndex(nextIndex)\n                  }\n                }}\n                type=\"button\"\n              />\n              <Button\n                aria-label={t('general:next')}\n                buttonStyle=\"secondary\"\n                icon={<ChevronIcon direction=\"right\" />}\n                onClick={() => {\n                  const nextIndex = activeIndex + 1\n                  if (nextIndex === forms.length) {\n                    setActiveIndex(0)\n                  } else {\n                    setActiveIndex(nextIndex)\n                  }\n                }}\n                type=\"button\"\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <Actions className={`${baseClass}__saveButtons`} />\n    </DialogFooter>\n  )\n}\n\ntype ActionsProps = {\n  readonly className?: string\n}\nexport function Actions({ className }: ActionsProps) {\n  const { getEntityConfig } = useConfig()\n  const { t } = useTranslation()\n  const { collectionSlug, hasPublishPermission, hasSavePermission, saveAllDocs } = useFormsManager()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  return (\n    <div className={[`${baseClass}__buttons`, className].filter(Boolean).join(' ')}>\n      {collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button\n          buttonStyle=\"secondary\"\n          onClick={() => void saveAllDocs({ overrides: { _status: 'draft' } })}\n        >\n          {t('version:saveDraft')}\n        </Button>\n      ) : null}\n      {collectionConfig?.versions?.drafts && hasPublishPermission ? (\n        <Button onClick={() => void saveAllDocs({ overrides: { _status: 'published' } })}>\n          {t('version:publish')}\n        </Button>\n      ) : null}\n\n      {!collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button onClick={() => void saveAllDocs()}>{t('general:save')}</Button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BulkUpload/AddFilesView/index.css

@@ -1,22 +1,28 @@
 @layer payload-default {
-  .bulk-upload--add-files {
-    height: 100%;
+  .bulk-upload--add-files__body {
     display: flex;
-    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--spacer-2-5);
   }
 
   .bulk-upload--add-files__dropArea {
-    height: 100%;
-    padding: var(--spacer-2-5);
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    /* Prefer a 1.5 aspect ratio, but never exceed the available height. When the dialog is height
+       constrained the body shrinks (via the flex chain) and `max-height: 100%` caps the drop area so
+       the ratio yields instead of the bottom being clipped by the dialog's `overflow: clip`. */
+    max-height: 100%;
+    aspect-ratio: 1.5;
 
     .dropzone {
-      height: 100%;
+      flex: 1 1 auto;
       align-items: center;
       flex-direction: column;
       justify-content: center;
       display: flex;
-      gap: var(--spacer-4);
-      background-color: var(--color-bg-secondary);
+      gap: var(--spacer-2);
 
       p {
         margin: 0;

package/dist/elements/BulkUpload/AddFilesView/index.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import './index.css';
 type Props = {
     readonly acceptMimeTypes?: string;
-    readonly onCancel: () => void;
+    readonly modalSlug: string;
     readonly onDrop: (acceptedFiles: FileList) => void;
 };
-export declare function AddFilesView({ acceptMimeTypes, onCancel, onDrop }: Props): React.JSX.Element;
+export declare function AddFilesView({ acceptMimeTypes, modalSlug: modalSlug, onDrop }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/BulkUpload/AddFilesView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAA;CACnD,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,KAAK,qBA4CxE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAA;CACnD,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,qBA8CpF"}

package/dist/elements/BulkUpload/AddFilesView/index.js

@@ -4,56 +4,61 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
+import { DialogHeader, DialogModal } from '../../Dialog/index.js';
 import { Dropzone } from '../../Dropzone/index.js';
-import { DrawerHeader } from '../Header/index.js';
 import './index.css';
 const baseClass = 'bulk-upload--add-files';
 export function AddFilesView({
   acceptMimeTypes,
-  onCancel,
+  modalSlug: modalSlug,
   onDrop
 }) {
   const {
     t
   } = useTranslation();
   const inputRef = React.useRef(null);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(DialogModal, {
     className: baseClass,
-    children: [/*#__PURE__*/_jsx(DrawerHeader, {
-      onClose: onCancel,
+    size: "large",
+    slug: modalSlug,
+    children: [/*#__PURE__*/_jsx(DialogHeader, {
+      showClose: true,
       title: t('upload:addFiles')
     }), /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__dropArea`,
-      children: /*#__PURE__*/_jsxs(Dropzone, {
-        multipleFiles: true,
-        onChange: onDrop,
-        children: [/*#__PURE__*/_jsx(Button, {
-          buttonStyle: "primary",
-          iconPosition: "left",
-          onClick: () => {
-            if (inputRef.current) {
-              inputRef.current.click();
-            }
-          },
-          size: "medium",
-          children: t('upload:selectFile')
-        }), /*#__PURE__*/_jsx("input", {
-          accept: acceptMimeTypes,
-          "aria-hidden": "true",
-          className: `${baseClass}__hidden-input`,
-          hidden: true,
-          multiple: true,
-          onChange: e => {
-            if (e.target.files && e.target.files.length > 0) {
-              onDrop(e.target.files);
-            }
-          },
-          ref: inputRef,
-          type: "file"
-        }), /*#__PURE__*/_jsxs("p", {
-          className: `${baseClass}__dragAndDropText`,
-          children: [t('general:or'), " ", t('upload:dragAndDrop')]
-        })]
+      className: `${baseClass}__body`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__dropArea`,
+        children: /*#__PURE__*/_jsxs(Dropzone, {
+          multipleFiles: true,
+          onChange: onDrop,
+          children: [/*#__PURE__*/_jsx(Button, {
+            buttonStyle: "primary",
+            iconPosition: "left",
+            onClick: () => {
+              if (inputRef.current) {
+                inputRef.current.click();
+              }
+            },
+            size: "medium",
+            children: t('upload:selectFile')
+          }), /*#__PURE__*/_jsx("input", {
+            accept: acceptMimeTypes,
+            "aria-hidden": "true",
+            className: `${baseClass}__hidden-input`,
+            hidden: true,
+            multiple: true,
+            onChange: e => {
+              if (e.target.files && e.target.files.length > 0) {
+                onDrop(e.target.files);
+              }
+            },
+            ref: inputRef,
+            type: "file"
+          }), /*#__PURE__*/_jsxs("p", {
+            className: `${baseClass}__dragAndDropText`,
+            children: [t('general:or'), " ", t('upload:dragAndDrop')]
+          })]
+        })
       })
     })]
   });

package/dist/elements/BulkUpload/AddFilesView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useTranslation","Button","Dropzone","DrawerHeader","baseClass","AddFilesView","acceptMimeTypes","onCancel","onDrop","t","inputRef","useRef","_jsxs","className","_jsx","onClose","title","multipleFiles","onChange","buttonStyle","iconPosition","onClick","current","click","size","accept","hidden","multiple","e","target","files","length","ref","type"],"sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Dropzone } from '../../Dropzone/index.js'\nimport { DrawerHeader } from '../Header/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--add-files'\n\ntype Props = {\n  readonly acceptMimeTypes?: string\n  readonly onCancel: () => void\n  readonly onDrop: (acceptedFiles: FileList) => void\n}\nexport function AddFilesView({ acceptMimeTypes, onCancel, onDrop }: Props) {\n  const { t } = useTranslation()\n\n  const inputRef = React.useRef(null)\n\n  return (\n    <div className={baseClass}>\n      <DrawerHeader onClose={onCancel} title={t('upload:addFiles')} />\n      <div className={`${baseClass}__dropArea`}>\n        <Dropzone multipleFiles onChange={onDrop}>\n          <Button\n            buttonStyle=\"primary\"\n            iconPosition=\"left\"\n            onClick={() => {\n              if (inputRef.current) {\n                inputRef.current.click()\n              }\n            }}\n            size=\"medium\"\n          >\n            {t('upload:selectFile')}\n          </Button>\n          <input\n            accept={acceptMimeTypes}\n            aria-hidden=\"true\"\n            className={`${baseClass}__hidden-input`}\n            hidden\n            multiple\n            onChange={(e) => {\n              if (e.target.files && e.target.files.length > 0) {\n                onDrop(e.target.files)\n              }\n            }}\n            ref={inputRef}\n            type=\"file\"\n          />\n\n          <p className={`${baseClass}__dragAndDropText`}>\n            {t('general:or')} {t('upload:dragAndDrop')}\n          </p>\n        </Dropzone>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,SAASC,aAAa;EAAEC,eAAe;EAAEC,QAAQ;EAAEC;AAAM,CAAS;EACvE,MAAM;IAAEC;EAAC,CAAE,GAAGT,cAAA;EAEd,MAAMU,QAAA,GAAWX,KAAA,CAAMY,MAAM,CAAC;EAE9B,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAWT,SAAA;4BACdU,IAAA,CAACX,YAAA;MAAaY,OAAA,EAASR,QAAA;MAAUS,KAAA,EAAOP,CAAA,CAAE;qBAC1CK,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGT,SAAA,YAAqB;gBACtC,aAAAQ,KAAA,CAACV,QAAA;QAASe,aAAa;QAACC,QAAA,EAAUV,MAAA;gCAChCM,IAAA,CAACb,MAAA;UACCkB,WAAA,EAAY;UACZC,YAAA,EAAa;UACbC,OAAA,EAASA,CAAA;YACP,IAAIX,QAAA,CAASY,OAAO,EAAE;cACpBZ,QAAA,CAASY,OAAO,CAACC,KAAK;YACxB;UACF;UACAC,IAAA,EAAK;oBAEJf,CAAA,CAAE;yBAELK,IAAA,CAAC;UACCW,MAAA,EAAQnB,eAAA;UACR,eAAY;UACZO,SAAA,EAAW,GAAGT,SAAA,gBAAyB;UACvCsB,MAAM;UACNC,QAAQ;UACRT,QAAA,EAAWU,CAAA;YACT,IAAIA,CAAA,CAAEC,MAAM,CAACC,KAAK,IAAIF,CAAA,CAAEC,MAAM,CAACC,KAAK,CAACC,MAAM,GAAG,GAAG;cAC/CvB,MAAA,CAAOoB,CAAA,CAAEC,MAAM,CAACC,KAAK;YACvB;UACF;UACAE,GAAA,EAAKtB,QAAA;UACLuB,IAAA,EAAK;yBAGPrB,KAAA,CAAC;UAAEC,SAAA,EAAW,GAAGT,SAAA,mBAA4B;qBAC1CK,CAAA,CAAE,eAAc,KAAEA,CAAA,CAAE;;;;;AAMjC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useTranslation","Button","DialogHeader","DialogModal","Dropzone","baseClass","AddFilesView","acceptMimeTypes","modalSlug","onDrop","t","inputRef","useRef","_jsxs","className","size","slug","_jsx","showClose","title","multipleFiles","onChange","buttonStyle","iconPosition","onClick","current","click","accept","hidden","multiple","e","target","files","length","ref","type"],"sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogHeader, DialogModal } from '../../Dialog/index.js'\nimport { Dropzone } from '../../Dropzone/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--add-files'\n\ntype Props = {\n  readonly acceptMimeTypes?: string\n  readonly modalSlug: string\n  readonly onDrop: (acceptedFiles: FileList) => void\n}\nexport function AddFilesView({ acceptMimeTypes, modalSlug: modalSlug, onDrop }: Props) {\n  const { t } = useTranslation()\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  return (\n    <DialogModal className={baseClass} size=\"large\" slug={modalSlug}>\n      <DialogHeader showClose title={t('upload:addFiles')} />\n      <div className={`${baseClass}__body`}>\n        <div className={`${baseClass}__dropArea`}>\n          <Dropzone multipleFiles onChange={onDrop}>\n            <Button\n              buttonStyle=\"primary\"\n              iconPosition=\"left\"\n              onClick={() => {\n                if (inputRef.current) {\n                  inputRef.current.click()\n                }\n              }}\n              size=\"medium\"\n            >\n              {t('upload:selectFile')}\n            </Button>\n            <input\n              accept={acceptMimeTypes}\n              aria-hidden=\"true\"\n              className={`${baseClass}__hidden-input`}\n              hidden\n              multiple\n              onChange={(e) => {\n                if (e.target.files && e.target.files.length > 0) {\n                  onDrop(e.target.files)\n                }\n              }}\n              ref={inputRef}\n              type=\"file\"\n            />\n\n            <p className={`${baseClass}__dragAndDropText`}>\n              {t('general:or')} {t('upload:dragAndDrop')}\n            </p>\n          </Dropzone>\n        </div>\n      </div>\n    </DialogModal>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,YAAY,EAAEC,WAAW,QAAQ;AAC1C,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,SAASC,aAAa;EAAEC,eAAe;EAAEC,SAAA,EAAWA,SAAS;EAAEC;AAAM,CAAS;EACnF,MAAM;IAAEC;EAAC,CAAE,GAAGV,cAAA;EAEd,MAAMW,QAAA,GAAWZ,KAAA,CAAMa,MAAM,CAAmB;EAEhD,oBACEC,KAAA,CAACV,WAAA;IAAYW,SAAA,EAAWT,SAAA;IAAWU,IAAA,EAAK;IAAQC,IAAA,EAAMR,SAAA;4BACpDS,IAAA,CAACf,YAAA;MAAagB,SAAS;MAACC,KAAA,EAAOT,CAAA,CAAE;qBACjCO,IAAA,CAAC;MAAIH,SAAA,EAAW,GAAGT,SAAA,QAAiB;gBAClC,aAAAY,IAAA,CAAC;QAAIH,SAAA,EAAW,GAAGT,SAAA,YAAqB;kBACtC,aAAAQ,KAAA,CAACT,QAAA;UAASgB,aAAa;UAACC,QAAA,EAAUZ,MAAA;kCAChCQ,IAAA,CAAChB,MAAA;YACCqB,WAAA,EAAY;YACZC,YAAA,EAAa;YACbC,OAAA,EAASA,CAAA;cACP,IAAIb,QAAA,CAASc,OAAO,EAAE;gBACpBd,QAAA,CAASc,OAAO,CAACC,KAAK;cACxB;YACF;YACAX,IAAA,EAAK;sBAEJL,CAAA,CAAE;2BAELO,IAAA,CAAC;YACCU,MAAA,EAAQpB,eAAA;YACR,eAAY;YACZO,SAAA,EAAW,GAAGT,SAAA,gBAAyB;YACvCuB,MAAM;YACNC,QAAQ;YACRR,QAAA,EAAWS,CAAA;cACT,IAAIA,CAAA,CAAEC,MAAM,CAACC,KAAK,IAAIF,CAAA,CAAEC,MAAM,CAACC,KAAK,CAACC,MAAM,GAAG,GAAG;gBAC/CxB,MAAA,CAAOqB,CAAA,CAAEC,MAAM,CAACC,KAAK;cACvB;YACF;YACAE,GAAA,EAAKvB,QAAA;YACLwB,IAAA,EAAK;2BAGPtB,KAAA,CAAC;YAAEC,SAAA,EAAW,GAAGT,SAAA,mBAA4B;uBAC1CK,CAAA,CAAE,eAAc,KAAEA,CAAA,CAAE;;;;;;AAOnC","ignoreList":[]}