@payloadcms/ui 3.0.0-beta.12 → 3.0.0-beta.121

package/dist/elements/AppHeader/index.js

@@ -1,84 +1,115 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LinkWithDefault from 'next/link.js';
 import React, { useEffect, useRef, useState } from 'react';
 import { Account } from '../../graphics/Account/index.js';
 import { useActions } from '../../providers/Actions/index.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { formatAdminURL } from '../../utilities/formatAdminURL.js';
 import { Hamburger } from '../Hamburger/index.js';
-import { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js';
 import { Localizer } from '../Localizer/index.js';
-import { NavToggler } from '../Nav/NavToggler/index.js';
+import { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js';
 import { useNav } from '../Nav/context.js';
+import { NavToggler } from '../Nav/NavToggler/index.js';
 import { StepNav } from '../StepNav/index.js';
+import './index.scss';
 const baseClass = 'app-header';
-export const AppHeader = ()=>{
-    const { t } = useTranslation();
-    const { localization, routes: { admin: adminRoute } } = useConfig();
-    const { actions } = useActions();
-    const { navOpen } = useNav();
-    const customControlsRef = useRef(null);
-    const [isScrollable, setIsScrollable] = useState(false);
-    useEffect(()=>{
-        const checkIsScrollable = ()=>{
-            const el = customControlsRef.current;
-            if (el) {
-                const scrollable = el.scrollWidth > el.clientWidth;
-                setIsScrollable(scrollable);
-            }
-        };
-        checkIsScrollable();
-        window.addEventListener('resize', checkIsScrollable);
-        return ()=>{
-            window.removeEventListener('resize', checkIsScrollable);
-        };
-    }, [
-        actions
-    ]);
-    const Link = LinkWithDefault.default;
-    const LinkElement = Link || 'a';
-    return /*#__PURE__*/ React.createElement("header", {
-        className: [
-            baseClass,
-            navOpen && `${baseClass}--nav-open`
-        ].filter(Boolean).join(' ')
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__bg`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__content`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrapper`
-    }, /*#__PURE__*/ React.createElement(NavToggler, {
-        className: `${baseClass}__mobile-nav-toggler`,
-        tabIndex: -1
-    }, /*#__PURE__*/ React.createElement(Hamburger, null)), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__controls-wrapper`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__step-nav-wrapper`
-    }, /*#__PURE__*/ React.createElement(StepNav, {
-        Link: Link,
-        className: `${baseClass}__step-nav`
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions-wrapper`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions`,
-        ref: customControlsRef
-    }, Array.isArray(actions) && actions.map((Action, i)=>/*#__PURE__*/ React.createElement("div", {
-            className: isScrollable && i === actions.length - 1 ? `${baseClass}__last-action` : '',
-            key: i
-        }, Action))), isScrollable && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__gradient-placeholder`
-    })), localization && /*#__PURE__*/ React.createElement(LocalizerLabel, {
-        ariaLabel: "invisible",
-        className: `${baseClass}__localizer-spacing`
-    }), /*#__PURE__*/ React.createElement(LinkElement, {
-        "aria-label": t('authentication:account'),
-        className: `${baseClass}__account`,
-        href: `${adminRoute}/account`,
-        tabIndex: 0
-    }, /*#__PURE__*/ React.createElement(Account, null))))), /*#__PURE__*/ React.createElement(Localizer, {
-        className: `${baseClass}__localizer`
-    }));
+export const AppHeader = () => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    config: {
+      admin: {
+        routes: {
+          account: accountRoute
+        }
+      },
+      localization,
+      routes: {
+        admin: adminRoute
+      }
+    }
+  } = useConfig();
+  const {
+    actions
+  } = useActions();
+  const {
+    navOpen
+  } = useNav();
+  const customControlsRef = useRef(null);
+  const [isScrollable, setIsScrollable] = useState(false);
+  useEffect(() => {
+    const checkIsScrollable = () => {
+      const el = customControlsRef.current;
+      if (el) {
+        const scrollable = el.scrollWidth > el.clientWidth;
+        setIsScrollable(scrollable);
+      }
+    };
+    checkIsScrollable();
+    window.addEventListener('resize', checkIsScrollable);
+    return () => {
+      window.removeEventListener('resize', checkIsScrollable);
+    };
+  }, [actions]);
+  const Link = LinkWithDefault.default;
+  const LinkElement = Link || 'a';
+  return /*#__PURE__*/_jsxs("header", {
+    className: [baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__bg`
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__content`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__wrapper`,
+        children: [/*#__PURE__*/_jsx(NavToggler, {
+          className: `${baseClass}__mobile-nav-toggler`,
+          tabIndex: -1,
+          children: /*#__PURE__*/_jsx(Hamburger, {})
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__controls-wrapper`,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__step-nav-wrapper`,
+            children: /*#__PURE__*/_jsx(StepNav, {
+              className: `${baseClass}__step-nav`,
+              Link: Link
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__actions-wrapper`,
+            children: [/*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__actions`,
+              ref: customControlsRef,
+              children: Array.isArray(actions) && actions.map((Action, i) => /*#__PURE__*/_jsx("div", {
+                className: isScrollable && i === actions.length - 1 ? `${baseClass}__last-action` : '',
+                children: /*#__PURE__*/_jsx(RenderComponent, {
+                  mappedComponent: Action
+                })
+              }, i))
+            }), isScrollable && /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__gradient-placeholder`
+            })]
+          }), localization && /*#__PURE__*/_jsx(LocalizerLabel, {
+            ariaLabel: "invisible",
+            className: `${baseClass}__localizer-spacing`
+          }), /*#__PURE__*/_jsx(LinkElement, {
+            "aria-label": t('authentication:account'),
+            className: `${baseClass}__account`,
+            href: formatAdminURL({
+              adminRoute,
+              path: accountRoute
+            }),
+            tabIndex: 0,
+            children: /*#__PURE__*/_jsx(Account, {})
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Localizer, {
+      className: `${baseClass}__localizer`
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport LinkWithDefault from 'next/link.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Hamburger } from '../Hamburger/index.js'\nimport { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { StepNav } from '../StepNav/index.js'\nimport './index.scss'\n\nconst baseClass = 'app-header'\n\nexport const AppHeader: React.FC = () => {\n  const { t } = useTranslation()\n\n  const {\n    localization,\n    routes: { admin: adminRoute },\n  } = useConfig()\n\n  const { actions } = useActions()\n\n  const { navOpen } = useNav()\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 Link = LinkWithDefault.default\n\n  const LinkElement = Link || 'a'\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__bg`} />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>\n            <Hamburger />\n          </NavToggler>\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <StepNav Link={Link} className={`${baseClass}__step-nav`} />\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {Array.isArray(actions) &&\n                  actions.map((Action, i) => (\n                    <div\n                      className={\n                        isScrollable && i === actions.length - 1 ? `${baseClass}__last-action` : ''\n                      }\n                      key={i}\n                    >\n                      {Action}\n                    </div>\n                  ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <LocalizerLabel ariaLabel=\"invisible\" className={`${baseClass}__localizer-spacing`} />\n            )}\n            <LinkElement\n              aria-label={t('authentication:account')}\n              className={`${baseClass}__account`}\n              href={`${adminRoute}/account`}\n              tabIndex={0}\n            >\n              <Account />\n            </LinkElement>\n          </div>\n        </div>\n      </div>\n      <Localizer className={`${baseClass}__localizer`} />\n    </header>\n  )\n}\n"],"names":["LinkWithDefault","React","useEffect","useRef","useState","Account","useActions","useConfig","useTranslation","Hamburger","LocalizerLabel","Localizer","NavToggler","useNav","StepNav","baseClass","AppHeader","t","localization","routes","admin","adminRoute","actions","navOpen","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","Link","default","LinkElement","header","className","filter","Boolean","join","div","tabIndex","ref","Array","isArray","map","Action","i","length","key","ariaLabel","aria-label","href"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["LinkWithDefault","React","useEffect","useRef","useState","Account","useActions","useConfig","RenderComponent","useTranslation","formatAdminURL","Hamburger","Localizer","LocalizerLabel","useNav","NavToggler","StepNav","baseClass","AppHeader","t","config","admin","routes","account","accountRoute","localization","adminRoute","actions","navOpen","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","Link","default","LinkElement","_jsxs","className","filter","Boolean","join","_jsx","tabIndex","ref","Array","isArray","map","Action","i","length","mappedComponent","ariaLabel","href","path"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport LinkWithDefault from 'next/link.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { Hamburger } from '../Hamburger/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport './index.scss'\n\nconst baseClass = 'app-header'\n\nexport const AppHeader: React.FC = () => {\n  const { t } = useTranslation()\n\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute },\n      },\n      localization,\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { actions } = useActions()\n\n  const { navOpen } = useNav()\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 Link = LinkWithDefault.default\n\n  const LinkElement = Link || 'a'\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__bg`} />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>\n            <Hamburger />\n          </NavToggler>\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <StepNav className={`${baseClass}__step-nav`} Link={Link} />\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {Array.isArray(actions) &&\n                  actions.map((Action, i) => (\n                    <div\n                      className={\n                        isScrollable && i === actions.length - 1 ? `${baseClass}__last-action` : ''\n                      }\n                      key={i}\n                    >\n                      <RenderComponent mappedComponent={Action} />\n                    </div>\n                  ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <LocalizerLabel ariaLabel=\"invisible\" className={`${baseClass}__localizer-spacing`} />\n            )}\n            <LinkElement\n              aria-label={t('authentication:account')}\n              className={`${baseClass}__account`}\n              href={formatAdminURL({ adminRoute, path: accountRoute })}\n              tabIndex={0}\n            >\n              <Account />\n            </LinkElement>\n          </div>\n        </div>\n      </div>\n      <Localizer className={`${baseClass}__localizer`} />\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/AppHeader/index.scss

@@ -1,192 +1,195 @@
 @import '../../scss/styles.scss';
 
-.app-header {
-  position: relative;
-  width: 100%;
-  height: var(--app-header-height);
-  z-index: var(--z-modal);
-
-  &__mobile-nav-toggler {
-    display: none;
-  }
-
-  // place the localizer outside the `overflow: hidden` container so that the popup is visible
-  // this means we need to use a placeholder div so that the space is retained in the DOM
-  [dir='rtl'] &__localizer {
-    right: unset;
-    left: base(4.5);
-  }
-  &__localizer {
-    position: absolute;
-    top: 50%;
-    right: base(4.5);
-    transform: translate3d(0, -50%, 0);
-  }
-
-  &__localizer-spacing {
-    visibility: hidden;
-  }
-
-  &__bg {
-    opacity: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
+@layer payload-default {
+  .app-header {
+    position: relative;
     width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
+    height: var(--app-header-height);
+    z-index: var(--z-modal);
 
-  &--show-bg {
-    opacity: 1;
-  }
+    &__mobile-nav-toggler {
+      display: none;
+    }
 
-  &__content {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 var(--gutter-h);
-    position: relative;
-    flex-grow: 1;
-  }
+    // place the localizer outside the `overflow: hidden` container so that the popup is visible
+    // this means we need to use a placeholder div so that the space is retained in the DOM
+    [dir='rtl'] &__localizer {
+      right: unset;
+      left: base(4.5);
+    }
+    &__localizer.localizer {
+      position: absolute;
+      top: 50%;
+      right: base(4.5);
+      transform: translate3d(0, -50%, 0);
+    }
 
-  &__wrapper {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    align-items: center;
-    height: 100%;
-    flex-grow: 1;
-    justify-content: space-between;
-    overflow: hidden;
-  }
+    &__localizer-spacing {
+      visibility: hidden;
+    }
 
-  &__account {
-    position: relative;
+    &__bg {
+      opacity: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
 
-    &:focus:not(:focus-visible) {
+    &--show-bg {
       opacity: 1;
     }
 
-    // Use a pseudo element for the accessability so that it doesn't take up DOM space
-    // Also because the parent element has `overflow: hidden` which would clip an outline
-    &:focus-visible {
-      outline: none;
+    &__content {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding: 0 var(--gutter-h);
+      position: relative;
+      flex-grow: 1;
+    }
 
-      &::after {
-        content: '';
-        border: var(--accessibility-outline);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-      }
+    &__wrapper {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      align-items: center;
+      height: 100%;
+      flex-grow: 1;
+      justify-content: space-between;
+      width: 100%;
     }
-  }
 
-  &__controls-wrapper {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    overflow: hidden;
-  }
+    &__account {
+      position: relative;
 
-  &__step-nav-wrapper {
-    flex: 1;
-    overflow: auto;
-    display: flex;
+      &:focus:not(:focus-visible) {
+        opacity: 1;
+      }
 
-    &::-webkit-scrollbar {
-      display: none;
+      // Use a pseudo element for the accessability so that it doesn't take up DOM space
+      // Also because the parent element has `overflow: hidden` which would clip an outline
+      &:focus-visible {
+        outline: none;
+
+        &::after {
+          content: '';
+          border: var(--accessibility-outline);
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+        }
+      }
     }
-  }
 
-  &__actions-wrapper {
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    margin-right: var(--base);
-  }
-
-  &__gradient-placeholder {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: var(--base);
-    height: var(--base);
-    background: linear-gradient(to right, transparent, var(--theme-bg));
-  }
+    &__controls-wrapper {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      overflow: hidden;
+      width: 100%;
+    }
 
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    flex-shrink: 0;
-    max-width: 600px;
-    overflow: auto;
-    white-space: nowrap;
+    &__step-nav-wrapper {
+      flex-grow: 0;
+      overflow: auto;
+      display: flex;
+      width: 100%;
 
-    &::-webkit-scrollbar {
-      display: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
-  }
 
-  &__last-action {
-    margin-right: var(--base);
-  }
-
-  @include large-break {
-    &__actions {
-      max-width: 500px;
+    &__actions-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      margin-right: var(--base);
     }
-  }
 
-  @include mid-break {
     &__gradient-placeholder {
-      right: var(--base);
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: var(--base);
+      height: var(--base);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
     }
 
     &__actions {
-      max-width: 300px;
-      margin-right: var(--base);
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      flex-shrink: 0;
+      max-width: 600px;
+      overflow: auto;
+      white-space: nowrap;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
-  }
 
-  @include small-break {
-    &__localizer {
-      right: base(2);
+    &__last-action {
+      margin-right: var(--base);
     }
 
-    &--nav-open {
-      .app-header__localizer {
-        display: none;
+    @include large-break {
+      &__actions {
+        max-width: 500px;
       }
     }
 
-    &__mobile-nav-toggler {
-      display: flex;
-      align-items: center;
+    @include mid-break {
+      &__gradient-placeholder {
+        right: var(--base);
+      }
 
-      &.nav-toggler--is-open {
-        opacity: 0.5;
+      &__actions {
+        max-width: 300px;
+        margin-right: var(--base);
       }
     }
 
-    &__step-header {
-      // TODO: overflow the step header instead of hide it
-      display: none;
-    }
+    @include small-break {
+      &__localizer.localizer {
+        right: base(2);
+      }
 
-    &__gradient-placeholder {
-      right: 0;
-    }
+      &--nav-open {
+        .app-header__localizer {
+          display: none;
+        }
+      }
 
-    &__actions {
-      max-width: 150px;
-      margin-right: 0;
+      &__mobile-nav-toggler {
+        display: flex;
+        align-items: center;
+
+        &.nav-toggler--is-open {
+          opacity: 0.5;
+        }
+      }
+
+      &__step-header {
+        // TODO: overflow the step header instead of hide it
+        display: none;
+      }
+
+      &__gradient-placeholder {
+        right: 0;
+      }
+
+      &__actions {
+        max-width: 150px;
+        margin-right: 0;
+      }
     }
   }
 }

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import './index.scss';
 export type Props = {
-    addRow: (current: number, blockType?: string) => void;
+    addRow: (current: number, blockType?: string) => Promise<void> | void;
     duplicateRow: (current: number) => void;
     hasMaxRows: boolean;
     index: number;
+    isSortable?: boolean;
     moveRow: (from: number, to: 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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,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,CAwFvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ArrayAction/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,cAAc,CAAA;AAIrB,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,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,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyFvC,CAAA"}