@payloadcms/ui 4.0.0-internal.add4c47 → 4.0.0-internal.af6aad0

package/dist/css/app.css

@@ -0,0 +1,121 @@
+@layer payload-default, payload;
+
+@import '../styles.css';
+
+@layer payload-default {
+  :root {
+    --font-body: var(--font-family-sans), sans-serif;
+    --font-mono: var(--font-family-mono), 'SF Mono', Menlo, Consolas, Monaco, monospace;
+
+    --app-header-height: 0px;
+    --doc-controls-height: 0px;
+    --doc-header-height: 0px;
+    --nav-width: 275px;
+  }
+
+  @media (max-width: 768px) {
+    :root {
+      --nav-width: 100vw;
+    }
+  }
+
+  /* GLOBAL STYLES */
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    background: var(--color-bg);
+    -webkit-font-smoothing: antialiased;
+
+    &[data-theme='dark'] {
+      color-scheme: dark;
+    }
+  }
+
+  html,
+  body,
+  #app {
+    height: 100%;
+  }
+
+  body {
+    font-family: var(--font-body);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-letter-spacing);
+    color: var(--color-text);
+    margin: 0;
+    /* this is for the nav to be able to push the document over */
+    overflow-x: hidden;
+  }
+
+  /* Lock background scroll while a drawer is open. Backs up faceless-ui's JS
+     body-scroll-lock, which a sibling modal can clear prematurely. */
+  body:has(.drawer--is-open) {
+    overflow: hidden;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 1.53846rem;
+    margin: 0;
+  }
+
+  :focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+    border-radius: var(--radius-medium);
+  }
+
+  a {
+    color: currentColor;
+
+    &:focus {
+      &:not(:focus-visible) {
+        opacity: 0.8;
+      }
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+
+  dialog {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    color: currentColor;
+  }
+
+  .payload__modal-item {
+    min-height: 100%;
+    background: transparent;
+  }
+
+  .payload__modal-container--enterDone {
+    overflow: auto;
+  }
+
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
+    z-index: var(--z-modal);
+  }
+}

package/dist/css/forms.css

@@ -13,9 +13,6 @@
     padding: 0 var(--field-padding-inline);
     appearance: none;
     -webkit-appearance: none;
-    transition-property: box-shadow, background-color;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
     outline: none;
 
     &[data-rtl='true'] {
@@ -70,9 +67,6 @@
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
     min-height: var(--field-min-height-large);
-    transition-property: box-shadow, background-color;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
     &:where(:hover:not(:focus-within):not(:has(input:disabled)):not(:has(input:read-only))) {
       border-color: var(--field-color-border-hover);

package/dist/css/spacing.css

@@ -16,19 +16,26 @@
     --spacing-view-bottom: var(--gutter-h);
 
     /* Breakpoints */
-    --breakpoint-m-width: 1024px;
+    --breakpoint-xs-width: 400px;
     --breakpoint-s-width: 768px;
+    --breakpoint-m-width: 1024px;
+    --breakpoint-l-width: 1440px;
   }
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1440px) {
     :root {
       --gutter-h: var(--spacer-4);
     }
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 1024px) {
     :root {
       --gutter-h: var(--spacer-3);
+    }
+  }
+
+  @media (max-width: 768px) {
+    :root {
       --spacing-field: var(--spacer-2-5);
       --spacing-view-bottom: var(--spacer-6);
     }

package/dist/css/z-index.css

@@ -1,5 +1,6 @@
 @layer payload-default {
   :root {
+    /* --z-popup needs to be higher than --z-modal to ensure the popup is displayed when modal is open */
     --z-popup: 60;
     --z-nav: 20;
     --z-modal: 30;

package/dist/elements/AddNewRelation/index.css

@@ -17,12 +17,7 @@
       padding-inline: var(--spacer-1);
       height: var(--field-min-height-large);
       margin: 0;
-      background: var(--color-bg-secondary);
-      border: none;
-      border-radius: var(--button-radius);
-      color: var(--color-icon);
       cursor: pointer;
-      transition: background-color 100ms;
 
       &:hover {
         background: var(--color-bg-secondary-hover);

package/dist/elements/AddNewRelation/index.js

@@ -200,7 +200,7 @@ export const AddNewRelation = t0 => {
         id: `${path}-add-new`,
         children: [relatedCollections.length === 1 && _jsxs(Fragment, {
           children: [_jsx(DocumentDrawerToggler, {
-            buttonStyle: "pill",
+            buttonStyle: "secondary",
             className: [`${baseClass}__add-button`, unstyled && `${baseClass}__add-button--unstyled`].filter(Boolean).join(" "),
             tooltip: ButtonFromProps ? undefined : label,
             children: ButtonFromProps ? ButtonFromProps : _jsx(PlusIcon, {})
@@ -241,7 +241,7 @@ export const AddNewRelation = t0 => {
               return _jsx(Button, {
                 className: `${baseClass}__add-button`,
                 ...buttonProps,
-                buttonStyle: "pill",
+                buttonStyle: "secondary",
                 selected: active,
                 tooltip: popupOpen ? "" : t("fields:addNew"),
                 children: _jsx(PlusIcon, {})

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","hasAutosaveEnabled","React","Fragment","useCallback","useEffect","useState","useRelatedCollections","PlusIcon","useAuth","useTranslation","Button","useDocumentDrawer","Popup","PopupList","baseClass","AddNewRelation","t0","$","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","t1","undefined","collectionConfig","setCollectionConfig","popupOpen","setPopupOpen","i18n","t","t2","slug","t3","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t4","isDrawerOpen","toggleDrawer","t5","t6","doc","operation","isNewValue","some","v","id","Array","isArray","onSave","t7","collections","create","collection","t8","t9","find","collection_0","t10","t11","t12","t13","t14","labels","singular","t15","t16","Symbol","for","bb0","label","_jsxs","className","children","_jsx","buttonStyle","filter","Boolean","join","tooltip","buttonType","horizontalAlign","onToggleClose","onToggleOpen","render","t17","close","closePopup","ButtonGroup","map","relatedCollection","onClick","active","buttonProps","t18","selected"],"sources":["../../../src/elements/AddNewRelation/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { hasAutosaveEnabled } from 'payload/shared'\nimport React, { Fragment, useCallback, useEffect, useState } from 'react'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\nimport type { Props } from './types.js'\n\nimport { useRelatedCollections } from '../../hooks/useRelatedCollections.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { Popup } from '../Popup/index.js'\nimport * as PopupList from '../Popup/PopupButtonList/index.js'\nimport './index.css'\n\nconst baseClass = 'relationship-add-new'\n\nexport const AddNewRelation: React.FC<Props> = ({\n  Button: ButtonFromProps,\n  hasMany,\n  onChange,\n  path,\n  relationTo,\n  unstyled,\n  value,\n}) => {\n  const relatedCollections = useRelatedCollections(relationTo)\n  const { permissions } = useAuth()\n  const [show, setShow] = useState(false)\n  const [selectedCollection, setSelectedCollection] = useState<string>()\n\n  const relatedToMany = relatedCollections.length > 1\n\n  const [collectionConfig, setCollectionConfig] = useState<ClientCollectionConfig>(() =>\n    !relatedToMany ? relatedCollections[0] : undefined,\n  )\n\n  const [popupOpen, setPopupOpen] = useState(false)\n  const { i18n, t } = useTranslation()\n\n  const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen, toggleDrawer }] = useDocumentDrawer(\n    {\n      collectionSlug: collectionConfig?.slug,\n    },\n  )\n\n  const onSave: DocumentDrawerContextType['onSave'] = useCallback(\n    ({ doc, operation }) => {\n      // if autosave is enabled, the operation will be 'update'\n      if (\n        operation === 'create' ||\n        (operation === 'update' && hasAutosaveEnabled(collectionConfig))\n      ) {\n        // ensure the value is not already in the array\n        let isNewValue = false\n        if (!value) {\n          isNewValue = true\n        } else {\n          isNewValue = Array.isArray(value)\n            ? !value.some((v) => v && v.value === doc.id)\n            : value.value !== doc.id\n        }\n\n        if (isNewValue) {\n          if (hasMany === true) {\n            onChange([\n              ...(Array.isArray(value) ? value : []),\n              {\n                relationTo: collectionConfig?.slug,\n                value: doc.id,\n              },\n            ])\n          } else {\n            onChange({\n              relationTo: collectionConfig?.slug,\n              value: doc.id,\n            })\n          }\n        }\n\n        setSelectedCollection(undefined)\n      }\n    },\n    [collectionConfig, hasMany, onChange, value],\n  )\n\n  useEffect(() => {\n    if (permissions) {\n      if (relatedCollections.length === 1) {\n        setShow(permissions.collections[relatedCollections[0]?.slug]?.create)\n      } else {\n        setShow(\n          relatedCollections.some(\n            (collection) => permissions.collections[collection?.slug]?.create,\n          ),\n        )\n      }\n    }\n  }, [permissions, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && selectedCollection) {\n      setCollectionConfig(\n        relatedCollections.find((collection) => collection?.slug === selectedCollection),\n      )\n    }\n  }, [selectedCollection, relatedToMany, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && collectionConfig) {\n      // the drawer must be rendered on the page before before opening it\n      // this is why 'selectedCollection' is different from 'collectionConfig'\n      toggleDrawer()\n      setSelectedCollection(undefined)\n    }\n  }, [toggleDrawer, relatedToMany, collectionConfig])\n\n  useEffect(() => {\n    if (relatedToMany && !isDrawerOpen) {\n      setCollectionConfig(undefined)\n    }\n  }, [isDrawerOpen, relatedToMany])\n\n  const label = t('fields:addNewLabel', {\n    label: getTranslation(relatedCollections[0]?.labels.singular, i18n),\n  })\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <div className={baseClass} id={`${path}-add-new`}>\n      {relatedCollections.length === 1 && (\n        <Fragment>\n          <DocumentDrawerToggler\n            buttonStyle=\"pill\"\n            className={[\n              `${baseClass}__add-button`,\n              unstyled && `${baseClass}__add-button--unstyled`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            tooltip={ButtonFromProps ? undefined : label}\n          >\n            {ButtonFromProps ? ButtonFromProps : <PlusIcon />}\n          </DocumentDrawerToggler>\n          <DocumentDrawer onSave={onSave} />\n        </Fragment>\n      )}\n      {relatedCollections.length > 1 && (\n        <Fragment>\n          <Popup\n            buttonType=\"custom\"\n            horizontalAlign=\"right\"\n            onToggleClose={() => setPopupOpen(false)}\n            onToggleOpen={() => setPopupOpen(true)}\n            render={({ close: closePopup }) => (\n              <PopupList.ButtonGroup>\n                {relatedCollections.map((relatedCollection) => {\n                  if (permissions.collections[relatedCollection?.slug]?.create) {\n                    return (\n                      <PopupList.Button\n                        className={`${baseClass}__relation-button--${relatedCollection?.slug}`}\n                        key={relatedCollection?.slug}\n                        onClick={() => {\n                          closePopup()\n                          setSelectedCollection(relatedCollection?.slug)\n                        }}\n                      >\n                        {getTranslation(relatedCollection?.labels?.singular, i18n)}\n                      </PopupList.Button>\n                    )\n                  }\n\n                  return null\n                })}\n              </PopupList.ButtonGroup>\n            )}\n            renderButton={({ active, ...buttonProps }) => (\n              <Button\n                className={`${baseClass}__add-button`}\n                {...buttonProps}\n                buttonStyle=\"pill\"\n                selected={active}\n                tooltip={popupOpen ? '' : t('fields:addNew')}\n              >\n                <PlusIcon />\n              </Button>\n            )}\n          />\n          {collectionConfig && permissions.collections[collectionConfig?.slug]?.create && (\n            <DocumentDrawer onSave={onSave} />\n          )}\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","hasAutosaveEnabled","React","Fragment","useCallback","useEffect","useState","useRelatedCollections","PlusIcon","useAuth","useTranslation","Button","useDocumentDrawer","Popup","PopupList","baseClass","AddNewRelation","t0","$","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","t1","undefined","collectionConfig","setCollectionConfig","popupOpen","setPopupOpen","i18n","t","t2","slug","t3","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t4","isDrawerOpen","toggleDrawer","t5","t6","doc","operation","isNewValue","some","v","id","Array","isArray","onSave","t7","collections","create","collection","t8","t9","find","collection_0","t10","t11","t12","t13","t14","labels","singular","t15","t16","Symbol","for","bb0","label","_jsxs","className","children","_jsx","buttonStyle","filter","Boolean","join","tooltip","buttonType","horizontalAlign","onToggleClose","onToggleOpen","render","t17","close","closePopup","ButtonGroup","map","relatedCollection","onClick","active","buttonProps","t18","selected"],"sources":["../../../src/elements/AddNewRelation/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { hasAutosaveEnabled } from 'payload/shared'\nimport React, { Fragment, useCallback, useEffect, useState } from 'react'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\nimport type { Props } from './types.js'\n\nimport { useRelatedCollections } from '../../hooks/useRelatedCollections.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { Popup } from '../Popup/index.js'\nimport * as PopupList from '../Popup/PopupButtonList/index.js'\nimport './index.css'\n\nconst baseClass = 'relationship-add-new'\n\nexport const AddNewRelation: React.FC<Props> = ({\n  Button: ButtonFromProps,\n  hasMany,\n  onChange,\n  path,\n  relationTo,\n  unstyled,\n  value,\n}) => {\n  const relatedCollections = useRelatedCollections(relationTo)\n  const { permissions } = useAuth()\n  const [show, setShow] = useState(false)\n  const [selectedCollection, setSelectedCollection] = useState<string>()\n\n  const relatedToMany = relatedCollections.length > 1\n\n  const [collectionConfig, setCollectionConfig] = useState<ClientCollectionConfig>(() =>\n    !relatedToMany ? relatedCollections[0] : undefined,\n  )\n\n  const [popupOpen, setPopupOpen] = useState(false)\n  const { i18n, t } = useTranslation()\n\n  const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen, toggleDrawer }] = useDocumentDrawer(\n    {\n      collectionSlug: collectionConfig?.slug,\n    },\n  )\n\n  const onSave: DocumentDrawerContextType['onSave'] = useCallback(\n    ({ doc, operation }) => {\n      // if autosave is enabled, the operation will be 'update'\n      if (\n        operation === 'create' ||\n        (operation === 'update' && hasAutosaveEnabled(collectionConfig))\n      ) {\n        // ensure the value is not already in the array\n        let isNewValue = false\n        if (!value) {\n          isNewValue = true\n        } else {\n          isNewValue = Array.isArray(value)\n            ? !value.some((v) => v && v.value === doc.id)\n            : value.value !== doc.id\n        }\n\n        if (isNewValue) {\n          if (hasMany === true) {\n            onChange([\n              ...(Array.isArray(value) ? value : []),\n              {\n                relationTo: collectionConfig?.slug,\n                value: doc.id,\n              },\n            ])\n          } else {\n            onChange({\n              relationTo: collectionConfig?.slug,\n              value: doc.id,\n            })\n          }\n        }\n\n        setSelectedCollection(undefined)\n      }\n    },\n    [collectionConfig, hasMany, onChange, value],\n  )\n\n  useEffect(() => {\n    if (permissions) {\n      if (relatedCollections.length === 1) {\n        setShow(permissions.collections[relatedCollections[0]?.slug]?.create)\n      } else {\n        setShow(\n          relatedCollections.some(\n            (collection) => permissions.collections[collection?.slug]?.create,\n          ),\n        )\n      }\n    }\n  }, [permissions, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && selectedCollection) {\n      setCollectionConfig(\n        relatedCollections.find((collection) => collection?.slug === selectedCollection),\n      )\n    }\n  }, [selectedCollection, relatedToMany, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && collectionConfig) {\n      // the drawer must be rendered on the page before before opening it\n      // this is why 'selectedCollection' is different from 'collectionConfig'\n      toggleDrawer()\n      setSelectedCollection(undefined)\n    }\n  }, [toggleDrawer, relatedToMany, collectionConfig])\n\n  useEffect(() => {\n    if (relatedToMany && !isDrawerOpen) {\n      setCollectionConfig(undefined)\n    }\n  }, [isDrawerOpen, relatedToMany])\n\n  const label = t('fields:addNewLabel', {\n    label: getTranslation(relatedCollections[0]?.labels.singular, i18n),\n  })\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <div className={baseClass} id={`${path}-add-new`}>\n      {relatedCollections.length === 1 && (\n        <Fragment>\n          <DocumentDrawerToggler\n            buttonStyle=\"secondary\"\n            className={[\n              `${baseClass}__add-button`,\n              unstyled && `${baseClass}__add-button--unstyled`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            tooltip={ButtonFromProps ? undefined : label}\n          >\n            {ButtonFromProps ? ButtonFromProps : <PlusIcon />}\n          </DocumentDrawerToggler>\n          <DocumentDrawer onSave={onSave} />\n        </Fragment>\n      )}\n      {relatedCollections.length > 1 && (\n        <Fragment>\n          <Popup\n            buttonType=\"custom\"\n            horizontalAlign=\"right\"\n            onToggleClose={() => setPopupOpen(false)}\n            onToggleOpen={() => setPopupOpen(true)}\n            render={({ close: closePopup }) => (\n              <PopupList.ButtonGroup>\n                {relatedCollections.map((relatedCollection) => {\n                  if (permissions.collections[relatedCollection?.slug]?.create) {\n                    return (\n                      <PopupList.Button\n                        className={`${baseClass}__relation-button--${relatedCollection?.slug}`}\n                        key={relatedCollection?.slug}\n                        onClick={() => {\n                          closePopup()\n                          setSelectedCollection(relatedCollection?.slug)\n                        }}\n                      >\n                        {getTranslation(relatedCollection?.labels?.singular, i18n)}\n                      </PopupList.Button>\n                    )\n                  }\n\n                  return null\n                })}\n              </PopupList.ButtonGroup>\n            )}\n            renderButton={({ active, ...buttonProps }) => (\n              <Button\n                className={`${baseClass}__add-button`}\n                {...buttonProps}\n                buttonStyle=\"secondary\"\n                selected={active}\n                tooltip={popupOpen ? '' : t('fields:addNew')}\n              >\n                <PlusIcon />\n              </Button>\n            )}\n          />\n          {collectionConfig && permissions.collections[collectionConfig?.slug]?.create && (\n            <DocumentDrawer onSave={onSave} />\n          )}\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/AppHeader/index.css

@@ -60,6 +60,7 @@
     flex-grow: 0;
     gap: var(--spacer-1);
     width: 100%;
+    min-width: 0;
   }
 
   .app-header__controls-wrapper {
@@ -80,9 +81,6 @@
     border-radius: var(--button-radius);
     cursor: pointer;
     color: var(--color-icon);
-    transition:
-      background-color 0.15s ease,
-      border-color 0.15s ease;
 
     &:hover {
       background-color: var(--color-bg-transparent-hover);
@@ -127,6 +125,10 @@
     margin-right: var(--spacer-3);
   }
 
+  .app-header--nav-open .app-header__sidebar-toggle {
+    display: none;
+  }
+
   @media (max-width: 1440px) {
     .app-header__actions {
       max-width: 500px;

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

@@ -1,11 +1,4 @@
 import React from 'react';
-import type { UserMenuSettingsGroup } from '../UserMenu/SettingsMenu/index.js';
 import './index.css';
-type Props = {
-    CustomAvatar?: React.ReactNode;
-    CustomLogoutButton?: React.ReactNode;
-    settingsItemGroups?: UserMenuSettingsGroup[];
-};
-export declare function AppHeader({ CustomAvatar, CustomLogoutButton, settingsItemGroups }: Props): React.JSX.Element;
-export {};
+export declare function AppHeader(): React.JSX.Element;
 //# 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,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAe9E,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC,kBAAkB,CAAC,EAAE,qBAAqB,EAAE,CAAA;CAC7C,CAAA;AACD,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,EAAE,KAAK,qBA2GxF"}
+{"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,wBAAgB,SAAS,sBAuGxB"}

package/dist/elements/AppHeader/index.js

@@ -8,24 +8,23 @@ import { LanguageIcon } from '../../icons/Language/index.js';
 import { SidebarIcon } from '../../icons/Sidebar/index.js';
 import { useActions } from '../../providers/Actions/index.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { useEmbed } from '../../providers/Embed/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
 import { Localizer } from '../Localizer/index.js';
 import { useNav } from '../Nav/context.js';
 import { StepNav } from '../StepNav/index.js';
-import { UserMenu } from '../UserMenu/index.js';
 import './index.css';
 const baseClass = 'app-header';
-export function AppHeader({
-  CustomAvatar,
-  CustomLogoutButton,
-  settingsItemGroups
-}) {
+export function AppHeader() {
   const {
     t
   } = useTranslation();
   const locale = useLocale();
+  const {
+    isEmbedded
+  } = useEmbed();
   const {
     Actions
   } = useActions();
@@ -65,9 +64,9 @@ export function AppHeader({
     ref: headerRef,
     children: /*#__PURE__*/_jsx("div", {
       className: `${baseClass}__content`,
-      children: /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__wrapper`,
-        children: [/*#__PURE__*/_jsxs("div", {
+        children: /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__controls-wrapper`,
           children: [/*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__step-nav-wrapper`,
@@ -128,11 +127,7 @@ export function AppHeader({
               })
             })
           })]
-        }), /*#__PURE__*/_jsx(UserMenu, {
-          CustomAvatar: CustomAvatar,
-          CustomLogoutButton: CustomLogoutButton,
-          settingsItemGroups: settingsItemGroups
-        })]
+        })
       })
     })
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useRef","useState","useElementHeightVariable","ChevronIcon","LanguageIcon","SidebarIcon","useActions","useConfig","useLocale","useTranslation","Button","Localizer","useNav","StepNav","UserMenu","baseClass","AppHeader","CustomAvatar","CustomLogoutButton","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","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 { 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  CustomLogoutButton?: React.ReactNode\n  settingsItemGroups?: UserMenuSettingsGroup[]\n}\nexport function AppHeader({ CustomAvatar, CustomLogoutButton, 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          <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          </div>\n          <UserMenu\n            CustomAvatar={CustomAvatar}\n            CustomLogoutButton={CustomLogoutButton}\n            settingsItemGroups={settingsItemGroups}\n          />\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","useEmbed","useLocale","useTranslation","Button","Localizer","useNav","StepNav","baseClass","AppHeader","t","locale","isEmbedded","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","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 { 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 { useEmbed } from '../../providers/Embed/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 { StepNav } from '../StepNav/index.js'\nimport './index.css'\n\nconst baseClass = 'app-header'\n\nexport function AppHeader() {\n  const { t } = useTranslation()\n  const locale = useLocale()\n  const { isEmbedded } = useEmbed()\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          <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          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -11,6 +11,7 @@ export type Props = {
     moveRow: (from: number, to: number) => void;
     pasteData: ClipboardPasteEligibilityArgs;
     pasteRow: (index: number) => void;
+    pasteRowBelow: (index: number) => void;
     removeRow: (index: number) => void;
     rowCount: number;
 };

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;AAEzB,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAA;AAYhF,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,SAAS,EAAE,6BAA6B,CAAA;IACxC,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,CAqHvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ArrayAction/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAA;AAYhF,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,SAAS,EAAE,6BAA6B,CAAA;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,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,CAmIvC,CAAA"}

package/dist/elements/ArrayAction/index.js

@@ -4,11 +4,11 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ArrowIcon } from '../../icons/Arrow/index.js';
-import { ClipboardIcon } from '../../icons/Clipboard/index.js';
 import { CopyIcon } from '../../icons/Copy/index.js';
 import { DuplicateIcon } from '../../icons/Duplicate/index.js';
 import { MoreIcon } from '../../icons/More/index.js';
 import { PlusIcon } from '../../icons/Plus/index.js';
+import { SwapIcon } from '../../icons/Swap/index.js';
 import { XIcon } from '../../icons/X/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { useCanPasteClipboard } from '../ClipboardAction/useCanPasteClipboard.js';
@@ -16,7 +16,7 @@ import { Popup, PopupList } from '../Popup/index.js';
 import './index.css';
 const baseClass = 'array-actions';
 export const ArrayAction = t0 => {
-  const $ = _c(29);
+  const $ = _c(31);
   const {
     addRow,
     copyRow,
@@ -27,6 +27,7 @@ export const ArrayAction = t0 => {
     moveRow,
     pasteData,
     pasteRow,
+    pasteRowBelow,
     removeRow,
     rowCount
   } = t0;
@@ -38,21 +39,21 @@ export const ArrayAction = t0 => {
     refresh
   } = useCanPasteClipboard(pasteData);
   let t1;
-  if ($[0] !== addRow || $[1] !== canPaste || $[2] !== copyRow || $[3] !== duplicateRow || $[4] !== hasMaxRows || $[5] !== index || $[6] !== isSortable || $[7] !== moveRow || $[8] !== pasteRow || $[9] !== refresh || $[10] !== removeRow || $[11] !== rowCount || $[12] !== t) {
+  if ($[0] !== addRow || $[1] !== canPaste || $[2] !== copyRow || $[3] !== duplicateRow || $[4] !== hasMaxRows || $[5] !== index || $[6] !== isSortable || $[7] !== moveRow || $[8] !== pasteRow || $[9] !== pasteRowBelow || $[10] !== refresh || $[11] !== removeRow || $[12] !== rowCount || $[13] !== t) {
     let t2;
-    if ($[14] !== refresh) {
+    if ($[15] !== refresh) {
       t2 = active => {
         if (active) {
           refresh();
         }
       };
-      $[14] = refresh;
-      $[15] = t2;
+      $[15] = refresh;
+      $[16] = t2;
     } else {
-      t2 = $[15];
+      t2 = $[16];
     }
     let t3;
-    if ($[16] !== addRow || $[17] !== canPaste || $[18] !== copyRow || $[19] !== duplicateRow || $[20] !== hasMaxRows || $[21] !== index || $[22] !== isSortable || $[23] !== moveRow || $[24] !== pasteRow || $[25] !== removeRow || $[26] !== rowCount || $[27] !== t) {
+    if ($[17] !== addRow || $[18] !== canPaste || $[19] !== copyRow || $[20] !== duplicateRow || $[21] !== hasMaxRows || $[22] !== index || $[23] !== isSortable || $[24] !== moveRow || $[25] !== pasteRow || $[26] !== pasteRowBelow || $[27] !== removeRow || $[28] !== rowCount || $[29] !== t) {
       t3 = t4 => {
         const {
           close
@@ -112,17 +113,27 @@ export const ArrayAction = t0 => {
               close();
             },
             children: t("general:copyRow")
-          }), _jsx(PopupList.Button, {
-            className: `${baseClass}__action ${baseClass}__paste`,
+          }), !hasMaxRows && _jsx(PopupList.Button, {
+            className: `${baseClass}__action ${baseClass}__paste-below`,
             disabled: !canPaste,
-            icon: _jsx(ClipboardIcon, {
+            icon: _jsx(ArrowIcon, {
+              direction: "down",
               size: 24
             }),
+            onClick: () => {
+              pasteRowBelow(index);
+              close();
+            },
+            children: t("general:pasteBelow")
+          }), _jsx(PopupList.Button, {
+            className: `${baseClass}__action ${baseClass}__paste`,
+            disabled: !canPaste,
+            icon: _jsx(SwapIcon, {}),
             onClick: () => {
               pasteRow(index);
               close();
             },
-            children: t("general:pasteRow")
+            children: t("general:replaceRow")
           }), _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__remove`,
             icon: _jsx(XIcon, {
@@ -136,21 +147,22 @@ export const ArrayAction = t0 => {
           })]
         });
       };
-      $[16] = addRow;
-      $[17] = canPaste;
-      $[18] = copyRow;
-      $[19] = duplicateRow;
-      $[20] = hasMaxRows;
-      $[21] = index;
-      $[22] = isSortable;
-      $[23] = moveRow;
-      $[24] = pasteRow;
-      $[25] = removeRow;
-      $[26] = rowCount;
-      $[27] = t;
-      $[28] = t3;
+      $[17] = addRow;
+      $[18] = canPaste;
+      $[19] = copyRow;
+      $[20] = duplicateRow;
+      $[21] = hasMaxRows;
+      $[22] = index;
+      $[23] = isSortable;
+      $[24] = moveRow;
+      $[25] = pasteRow;
+      $[26] = pasteRowBelow;
+      $[27] = removeRow;
+      $[28] = rowCount;
+      $[29] = t;
+      $[30] = t3;
     } else {
-      t3 = $[28];
+      t3 = $[30];
     }
     t1 = _jsx(Popup, {
       button: _jsx(MoreIcon, {}),
@@ -171,13 +183,14 @@ export const ArrayAction = t0 => {
     $[6] = isSortable;
     $[7] = moveRow;
     $[8] = pasteRow;
-    $[9] = refresh;
-    $[10] = removeRow;
-    $[11] = rowCount;
-    $[12] = t;
-    $[13] = t1;
+    $[9] = pasteRowBelow;
+    $[10] = refresh;
+    $[11] = removeRow;
+    $[12] = rowCount;
+    $[13] = t;
+    $[14] = t1;
   } else {
-    t1 = $[13];
+    t1 = $[14];
   }
   return t1;
 };