@payloadcms/ui 4.0.0-internal.cea8867 → 4.0.0-internal.d21c039

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTheme } from '../../../providers/Theme/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { PopupList } from '../../Popup/index.js';
+import { Switch } from '../../Switch/index.js';
+import './index.css';
+const widths = ['960', '1200', '1440', 'full'];
+export const EditViewWidthSettings = () => {
+  const $ = _c(16);
+  const {
+    editViewWidth,
+    setEditViewHeaderAlignment,
+    setEditViewWidth,
+    setListViewMaxWidth,
+    shouldAlignEditViewHeader,
+    shouldApplyListViewMaxWidth
+  } = useTheme();
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== editViewWidth || $[1] !== setEditViewHeaderAlignment || $[2] !== setEditViewWidth || $[3] !== setListViewMaxWidth || $[4] !== shouldAlignEditViewHeader || $[5] !== shouldApplyListViewMaxWidth || $[6] !== t) {
+    let t1;
+    if ($[8] !== editViewWidth || $[9] !== setEditViewWidth || $[10] !== t) {
+      t1 = width => _jsx(PopupList.RadioGroupItem, {
+        active: editViewWidth === width,
+        onClick: () => setEditViewWidth({
+          editViewWidth: width
+        }),
+        children: width === "full" ? t("general:editViewWidthFull") : `${width}px`
+      }, width);
+      $[8] = editViewWidth;
+      $[9] = setEditViewWidth;
+      $[10] = t;
+      $[11] = t1;
+    } else {
+      t1 = $[11];
+    }
+    let t2;
+    if ($[12] !== setListViewMaxWidth) {
+      t2 = isEnabled => setListViewMaxWidth({
+        isEnabled
+      });
+      $[12] = setListViewMaxWidth;
+      $[13] = t2;
+    } else {
+      t2 = $[13];
+    }
+    let t3;
+    if ($[14] !== setEditViewHeaderAlignment) {
+      t3 = isEnabled_0 => setEditViewHeaderAlignment({
+        isEnabled: isEnabled_0
+      });
+      $[14] = setEditViewHeaderAlignment;
+      $[15] = t3;
+    } else {
+      t3 = $[15];
+    }
+    t0 = _jsxs("div", {
+      "aria-label": t("general:editViewWidth"),
+      "data-popup-prevent-close": true,
+      role: "group",
+      children: [_jsx(PopupList.GroupLabel, {
+        label: t("general:editViewWidth")
+      }), _jsx(PopupList.RadioGroup, {
+        children: widths.map(t1)
+      }), _jsx(Switch, {
+        checked: shouldApplyListViewMaxWidth,
+        className: "edit-view-width-settings__list-views",
+        label: `${t("general:editViewWidth")}: ${t("dashboard:listView")}`,
+        onChange: t2
+      }), _jsx(Switch, {
+        checked: shouldAlignEditViewHeader,
+        className: "edit-view-width-settings__alignment",
+        label: t("general:alignHeaderAndControls"),
+        onChange: t3
+      })]
+    });
+    $[0] = editViewWidth;
+    $[1] = setEditViewHeaderAlignment;
+    $[2] = setEditViewWidth;
+    $[3] = setListViewMaxWidth;
+    $[4] = shouldAlignEditViewHeader;
+    $[5] = shouldApplyListViewMaxWidth;
+    $[6] = t;
+    $[7] = t0;
+  } else {
+    t0 = $[7];
+  }
+  return t0;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTheme","useTranslation","PopupList","Switch","widths","EditViewWidthSettings","$","editViewWidth","setEditViewHeaderAlignment","setEditViewWidth","setListViewMaxWidth","shouldAlignEditViewHeader","shouldApplyListViewMaxWidth","t","t0","t1","width","_jsx","RadioGroupItem","active","onClick","children","t2","isEnabled","t3","isEnabled_0","_jsxs","role","GroupLabel","label","RadioGroup","map","checked","className","onChange"],"sources":["../../../../src/elements/AppHeader/EditViewWidthSettings/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { EditViewWidth } from '../../../providers/Theme/shared.js'\n\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { PopupList } from '../../Popup/index.js'\nimport { Switch } from '../../Switch/index.js'\nimport './index.css'\n\nconst widths: EditViewWidth[] = ['960', '1200', '1440', 'full']\n\nexport const EditViewWidthSettings: React.FC = () => {\n  const {\n    editViewWidth,\n    setEditViewHeaderAlignment,\n    setEditViewWidth,\n    setListViewMaxWidth,\n    shouldAlignEditViewHeader,\n    shouldApplyListViewMaxWidth,\n  } = useTheme()\n  const { t } = useTranslation()\n\n  return (\n    <div aria-label={t('general:editViewWidth')} data-popup-prevent-close role=\"group\">\n      <PopupList.GroupLabel label={t('general:editViewWidth')} />\n      <PopupList.RadioGroup>\n        {widths.map((width) => (\n          <PopupList.RadioGroupItem\n            active={editViewWidth === width}\n            key={width}\n            onClick={() => setEditViewWidth({ editViewWidth: width })}\n          >\n            {width === 'full' ? t('general:editViewWidthFull') : `${width}px`}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n      <Switch\n        checked={shouldApplyListViewMaxWidth}\n        className=\"edit-view-width-settings__list-views\"\n        label={`${t('general:editViewWidth')}: ${t('dashboard:listView')}`}\n        onChange={(isEnabled) => setListViewMaxWidth({ isEnabled })}\n      />\n      <Switch\n        checked={shouldAlignEditViewHeader}\n        className=\"edit-view-width-settings__alignment\"\n        label={t('general:alignHeaderAndControls')}\n        onChange={(isEnabled) => setEditViewHeaderAlignment({ isEnabled })}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAIlB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,MAAA,GAA0B,CAAC,OAAO,QAAQ,QAAQ,OAAO;AAE/D,OAAO,MAAMC,qBAAA,GAAkCA,CAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAC7C;IAAAS,aAAA;IAAAC,0BAAA;IAAAC,gBAAA;IAAAC,mBAAA;IAAAC,yBAAA;IAAAC;EAAA,IAOIZ,QAAA;EACJ;IAAAa;EAAA,IAAcZ,cAAA;EAAA,IAAAa,EAAA;EAAA,IAAAR,CAAA,QAAAC,aAAA,IAAAD,CAAA,QAAAE,0BAAA,IAAAF,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAI,mBAAA,IAAAJ,CAAA,QAAAK,yBAAA,IAAAL,CAAA,QAAAM,2BAAA,IAAAN,CAAA,QAAAO,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAT,CAAA,QAAAC,aAAA,IAAAD,CAAA,QAAAG,gBAAA,IAAAH,CAAA,SAAAO,CAAA;MAMIE,EAAA,GAAAC,KAAA,IACVC,IAAA,CAAAf,SAAA,CAAAgB,cAAA;QAAAC,MAAA,EACUZ,aAAA,KAAkBS,KAAA;QAAAI,OAAA,EAAAA,CAAA,KAEXX,gBAAA;UAAAF,aAAA,EAAkCS;QAAA,CAAM;QAAAK,QAAA,EAEtDL,KAAA,KAAU,SAASH,CAAA,CAAE,+BAA+B,GAAGG,KAAA;MAAS,GAH5DA,KAAA;MAAAV,CAAA,MAAAC,aAAA;MAAAD,CAAA,MAAAG,gBAAA;MAAAH,CAAA,OAAAO,CAAA;MAAAP,CAAA,OAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IAAA,IAAAgB,EAAA;IAAA,IAAAhB,CAAA,SAAAI,mBAAA;MAWCY,EAAA,GAAAC,SAAA,IAAeb,mBAAA;QAAAa;MAAA,CAAgC;MAAAjB,CAAA,OAAAI,mBAAA;MAAAJ,CAAA,OAAAgB,EAAA;IAAA;MAAAA,EAAA,GAAAhB,CAAA;IAAA;IAAA,IAAAkB,EAAA;IAAA,IAAAlB,CAAA,SAAAE,0BAAA;MAM/CgB,EAAA,GAAAC,WAAA,IAAejB,0BAAA;QAAAe,SAAA,EAA6BA;MAAA,CAAU;MAAAjB,CAAA,OAAAE,0BAAA;MAAAF,CAAA,OAAAkB,EAAA;IAAA;MAAAA,EAAA,GAAAlB,CAAA;IAAA;IAvBpEQ,EAAA,GAAAY,KAAA,CAAC;MAAA,cAAgBb,CAAA,CAAE;MAAA;MAAAc,IAAA,EAAwD;MAAAN,QAAA,GACzEJ,IAAA,CAAAf,SAAA,CAAA0B,UAAA;QAAAC,KAAA,EAA6BhB,CAAA,CAAE;MAAA,C,GAC/BI,IAAA,CAAAf,SAAA,CAAA4B,UAAA;QAAAT,QAAA,EACGjB,MAAA,CAAA2B,GAAA,CAAWhB,EAGH;MAAA,C,GAOXE,IAAA,CAAAd,MAAA;QAAA6B,OAAA,EACWpB,2BAAA;QAAAqB,SAAA,EACC;QAAAJ,KAAA,EACH,GAAGhB,CAAA,CAAE,6BAA6BA,CAAA,CAAE,uBAAuB;QAAAqB,QAAA,EACxDZ;MAA+C,C,GAE3DL,IAAA,CAAAd,MAAA;QAAA6B,OAAA,EACWrB,yBAAA;QAAAsB,SAAA,EACC;QAAAJ,KAAA,EACHhB,CAAA,CAAE;QAAAqB,QAAA,EACCV;MAAsD,C;;;;;;;;;;;;;SAvBpEV,E;CA2BJ","ignoreList":[]}

package/dist/elements/AppHeader/SettingsMenu/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .app-header-settings {
+    flex-shrink: 0;
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.css';
+export declare const SettingsMenu: React.FC;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AppHeader/SettingsMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EA6BhC,CAAA"}

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { GearIcon } from '../../../icons/Gear/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { MenuSeparator } from '../../MenuSeparator/index.js';
+import { Popup } from '../../Popup/index.js';
+import { EditViewWidthSettings } from '../EditViewWidthSettings/index.js';
+import { TypeSizeSettings } from '../TypeSizeSettings/index.js';
+import './index.css';
+export const SettingsMenu = () => {
+  const $ = _c(2);
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== t) {
+    t0 = _jsxs(Popup, {
+      caret: false,
+      className: "app-header-settings",
+      horizontalAlign: "right",
+      renderButton: t1 => {
+        const {
+          active,
+          onClick,
+          onKeyDown,
+          ...ariaProps
+        } = t1;
+        return _jsx(Button, {
+          buttonStyle: "secondary",
+          extraButtonProps: {
+            ...ariaProps,
+            onKeyDown
+          },
+          icon: _jsx(GearIcon, {
+            size: 24
+          }),
+          iconPosition: "left",
+          onClick,
+          selected: active,
+          children: t("general:settings")
+        });
+      },
+      size: "large",
+      theme: "dark",
+      verticalAlign: "bottom",
+      children: [_jsx(TypeSizeSettings, {}), _jsx(MenuSeparator, {}), _jsx(EditViewWidthSettings, {})]
+    });
+    $[0] = t;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","GearIcon","useTranslation","Button","MenuSeparator","Popup","EditViewWidthSettings","TypeSizeSettings","SettingsMenu","$","t","t0","_jsxs","caret","className","horizontalAlign","renderButton","t1","active","onClick","onKeyDown","ariaProps","_jsx","buttonStyle","extraButtonProps","icon","size","selected","children","theme","verticalAlign"],"sources":["../../../../src/elements/AppHeader/SettingsMenu/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { GearIcon } from '../../../icons/Gear/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { MenuSeparator } from '../../MenuSeparator/index.js'\nimport { Popup } from '../../Popup/index.js'\nimport { EditViewWidthSettings } from '../EditViewWidthSettings/index.js'\nimport { TypeSizeSettings } from '../TypeSizeSettings/index.js'\nimport './index.css'\n\nexport const SettingsMenu: React.FC = () => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      caret={false}\n      className=\"app-header-settings\"\n      horizontalAlign=\"right\"\n      renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n        <Button\n          buttonStyle=\"secondary\"\n          extraButtonProps={{ ...ariaProps, onKeyDown }}\n          icon={<GearIcon size={24} />}\n          iconPosition=\"left\"\n          onClick={onClick}\n          selected={active}\n        >\n          {t('general:settings')}\n        </Button>\n      )}\n      size=\"large\"\n      theme=\"dark\"\n      verticalAlign=\"bottom\"\n    >\n      <TypeSizeSettings />\n      <MenuSeparator />\n      <EditViewWidthSettings />\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAC9B,SAASC,KAAK,QAAQ;AACtB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,gBAAgB,QAAQ;AACjC,OAAO;AAEP,OAAO,MAAMC,YAAA,GAAyBA,CAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACpC;IAAAW;EAAA,IAAcR,cAAA;EAAA,IAAAS,EAAA;EAAA,IAAAF,CAAA,QAAAC,CAAA;IAGZC,EAAA,GAAAC,KAAA,CAAAP,KAAA;MAAAQ,KAAA;MAAAC,SAAA,EAEY;MAAAC,eAAA,EACM;MAAAC,YAAA,EAAAC,EAAA;QACD;UAAAC,MAAA;UAAAC,OAAA;UAAAC,SAAA;UAAA,GAAAC;QAAA,IAAAJ,EAA4C;QAAA,OACzDK,IAAA,CAAAnB,MAAA;UAAAoB,WAAA,EACc;UAAAC,gBAAA;YAAA,GACWH,SAAS;YAAAD;UAAA;UAAAK,IAAA,EAC1BH,IAAA,CAAArB,QAAA;YAAAyB,IAAA;UAAA,C;wBACO;UAAAP,OAAA;UAAAQ,QAAA,EAEHT,MAAA;UAAAU,QAAA,EAETlB,CAAA,CAAE;QAAA,C;;YAGF;MAAAmB,KAAA,EACC;MAAAC,aAAA,EACQ;MAAAF,QAAA,GAEdN,IAAA,CAAAf,gBAAA,IAAC,GACDe,IAAA,CAAAlB,aAAA,IAAC,GACDkB,IAAA,CAAAhB,qBAAA,IAAC;IAAA,C;;;;;;SAtBHK,E;CAyBJ","ignoreList":[]}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const TypeSizeSettings: React.FC;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AppHeader/TypeSizeSettings/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAwBpC,CAAA"}

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

@@ -0,0 +1,58 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTheme } from '../../../providers/Theme/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { PopupList } from '../../Popup/index.js';
+export const TypeSizeSettings = () => {
+  const $ = _c(4);
+  const {
+    setTypeSize,
+    typeSize
+  } = useTheme();
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== setTypeSize || $[1] !== t || $[2] !== typeSize) {
+    const options = [{
+      label: t("general:typeSizeCurrent"),
+      value: "current"
+    }, {
+      label: t("general:typeSizeProposed"),
+      value: "proposed"
+    }];
+    t0 = _jsxs("div", {
+      "aria-label": t("general:typeSizes"),
+      "data-popup-prevent-close": true,
+      role: "group",
+      children: [_jsx(PopupList.GroupLabel, {
+        label: t("general:typeSizes")
+      }), _jsx(PopupList.RadioGroup, {
+        children: options.map(t1 => {
+          const {
+            label,
+            value
+          } = t1;
+          return _jsx(PopupList.RadioGroupItem, {
+            active: typeSize === value,
+            onClick: () => setTypeSize({
+              typeSize: value
+            }),
+            children: label
+          }, value);
+        })
+      })]
+    });
+    $[0] = setTypeSize;
+    $[1] = t;
+    $[2] = typeSize;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTheme","useTranslation","PopupList","TypeSizeSettings","$","setTypeSize","typeSize","t","t0","options","label","value","_jsxs","role","children","_jsx","GroupLabel","RadioGroup","map","t1","RadioGroupItem","active","onClick"],"sources":["../../../../src/elements/AppHeader/TypeSizeSettings/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { TypeSize } from '../../../providers/Theme/shared.js'\n\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { PopupList } from '../../Popup/index.js'\n\nexport const TypeSizeSettings: React.FC = () => {\n  const { setTypeSize, typeSize } = useTheme()\n  const { t } = useTranslation()\n  const options: { label: string; value: TypeSize }[] = [\n    { label: t('general:typeSizeCurrent'), value: 'current' },\n    { label: t('general:typeSizeProposed'), value: 'proposed' },\n  ]\n\n  return (\n    <div aria-label={t('general:typeSizes')} data-popup-prevent-close role=\"group\">\n      <PopupList.GroupLabel label={t('general:typeSizes')} />\n      <PopupList.RadioGroup>\n        {options.map(({ label, value }) => (\n          <PopupList.RadioGroupItem\n            active={typeSize === value}\n            key={value}\n            onClick={() => setTypeSize({ typeSize: value })}\n          >\n            {label}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAIlB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,SAAS,QAAQ;AAE1B,OAAO,MAAMC,gBAAA,GAA6BA,CAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACxC;IAAAO,WAAA;IAAAC;EAAA,IAAkCN,QAAA;EAClC;IAAAO;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAJ,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAG,CAAA,IAAAH,CAAA,QAAAE,QAAA;IACd,MAAAG,OAAA;MAAAC,KAAA,EACWH,CAAA,CAAE;MAAAI,KAAA,EAAmC;IAAA;MAAAD,KAAA,EACrCH,CAAA,CAAE;MAAAI,KAAA,EAAoC;IAAA;IAI/CH,EAAA,GAAAI,KAAA,CAAC;MAAA,cAAgBL,CAAA,CAAE;MAAA;MAAAM,IAAA,EAAoD;MAAAC,QAAA,GACrEC,IAAA,CAAAb,SAAA,CAAAc,UAAA;QAAAN,KAAA,EAA6BH,CAAA,CAAE;MAAA,C,GAC/BQ,IAAA,CAAAb,SAAA,CAAAe,UAAA;QAAAH,QAAA,EACGL,OAAA,CAAAS,GAAA,CAAAC,EAAA;UAAa;YAAAT,KAAA;YAAAC;UAAA,IAAAQ,EAAgB;UAAA,OAC5BJ,IAAA,CAAAb,SAAA,CAAAkB,cAAA;YAAAC,MAAA,EACUf,QAAA,KAAaK,KAAA;YAAAW,OAAA,EAAAA,CAAA,KAENjB,WAAA;cAAAC,QAAA,EAAwBK;YAAA,CAAM;YAAAG,QAAA,EAE5CJ;UAAA,GAHIC,KAAA;QAAA;MAAA,C;;;;;;;;;SANbH,E;CAeJ","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,12 +125,14 @@
     margin-right: var(--spacer-3);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1440px) {
     .app-header__actions {
       max-width: 500px;
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     .app-header__gradient-placeholder {
       right: var(--spacer-3);
@@ -143,6 +143,7 @@
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .app-header__wrapper {
       align-items: flex-start;

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,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAiB9E,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,qBA+GxF"}

package/dist/elements/AppHeader/index.js

@@ -8,6 +8,7 @@ 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';
@@ -15,6 +16,7 @@ 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 { SettingsMenu } from './SettingsMenu/index.js';
 import './index.css';
 const baseClass = 'app-header';
 export function AppHeader({
@@ -26,6 +28,9 @@ export function AppHeader({
     t
   } = useTranslation();
   const locale = useLocale();
+  const {
+    isEmbedded
+  } = useEmbed();
   const {
     Actions
   } = useActions();
@@ -121,14 +126,14 @@ export function AppHeader({
               ...ariaProps,
               children: /*#__PURE__*/_jsxs("div", {
                 className: "localizer__button-content",
-                children: [locale.code, /*#__PURE__*/_jsx(ChevronIcon, {
+                children: [locale?.code, /*#__PURE__*/_jsx(ChevronIcon, {
                   direction: active ? 'up' : 'down',
                   size: 16
                 })]
               })
             })
-          })]
-        }), /*#__PURE__*/_jsx(UserMenu, {
+          }), /*#__PURE__*/_jsx(SettingsMenu, {})]
+        }), !isEmbedded && /*#__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","UserMenu","SettingsMenu","baseClass","AppHeader","CustomAvatar","CustomLogoutButton","settingsItemGroups","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 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 { 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 { UserMenu } from '../UserMenu/index.js'\nimport { SettingsMenu } from './SettingsMenu/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  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            <SettingsMenu />\n          </div>\n          {!isEmbedded && (\n            <UserMenu\n              CustomAvatar={CustomAvatar}\n              CustomLogoutButton={CustomLogoutButton}\n              settingsItemGroups={settingsItemGroups}\n            />\n          )}\n        </div>\n      </div>\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ClipboardPasteEligibilityArgs } from '../ClipboardAction/types.js';
 import './index.css';
 export type Props = {
     addRow: (current: number, blockType?: string) => Promise<void> | void;
@@ -8,7 +9,9 @@ export type Props = {
     index: number;
     isSortable?: boolean;
     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;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;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,18 +4,19 @@ 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';
 import { Popup, PopupList } from '../Popup/index.js';
 import './index.css';
 const baseClass = 'array-actions';
 export const ArrayAction = t0 => {
-  const $ = _c(12);
+  const $ = _c(31);
   const {
     addRow,
     copyRow,
@@ -24,26 +25,39 @@ export const ArrayAction = t0 => {
     index,
     isSortable,
     moveRow,
+    pasteData,
     pasteRow,
+    pasteRowBelow,
     removeRow,
     rowCount
   } = t0;
   const {
     t
   } = useTranslation();
+  const {
+    canPaste,
+    refresh
+  } = useCanPasteClipboard(pasteData);
   let t1;
-  if ($[0] !== addRow || $[1] !== copyRow || $[2] !== duplicateRow || $[3] !== hasMaxRows || $[4] !== index || $[5] !== isSortable || $[6] !== moveRow || $[7] !== pasteRow || $[8] !== removeRow || $[9] !== rowCount || $[10] !== t) {
-    t1 = _jsx(Popup, {
-      button: _jsx(MoreIcon, {}),
-      buttonAriaLabel: t("general:moreOptions"),
-      buttonClassName: `${baseClass}__button`,
-      caret: false,
-      className: baseClass,
-      horizontalAlign: "right",
-      render: t2 => {
+  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 ($[15] !== refresh) {
+      t2 = active => {
+        if (active) {
+          refresh();
+        }
+      };
+      $[15] = refresh;
+      $[16] = t2;
+    } else {
+      t2 = $[16];
+    }
+    let t3;
+    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
-        } = t2;
+        } = t4;
         return _jsxs(PopupList.MenuItem, {
           children: [isSortable && index !== 0 && _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__move-up`,
@@ -99,16 +113,27 @@ export const ArrayAction = t0 => {
               close();
             },
             children: t("general:copyRow")
-          }), _jsx(PopupList.Button, {
-            className: `${baseClass}__action ${baseClass}__paste`,
-            icon: _jsx(ClipboardIcon, {
+          }), !hasMaxRows && _jsx(PopupList.Button, {
+            className: `${baseClass}__action ${baseClass}__paste-below`,
+            disabled: !canPaste,
+            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, {
@@ -121,22 +146,51 @@ export const ArrayAction = t0 => {
             children: t("general:remove")
           })]
         });
-      }
+      };
+      $[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 = $[30];
+    }
+    t1 = _jsx(Popup, {
+      button: _jsx(MoreIcon, {}),
+      buttonAriaLabel: t("general:moreOptions"),
+      buttonClassName: `${baseClass}__button`,
+      caret: false,
+      className: baseClass,
+      horizontalAlign: "right",
+      onToggleOpen: t2,
+      render: t3
     });
     $[0] = addRow;
-    $[1] = copyRow;
-    $[2] = duplicateRow;
-    $[3] = hasMaxRows;
-    $[4] = index;
-    $[5] = isSortable;
-    $[6] = moveRow;
-    $[7] = pasteRow;
-    $[8] = removeRow;
-    $[9] = rowCount;
-    $[10] = t;
-    $[11] = t1;
+    $[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;
+    $[14] = t1;
   } else {
-    t1 = $[11];
+    t1 = $[14];
   }
   return t1;
 };