@wix/patterns 1.387.0 → 1.388.0

package/src/components/FieldActions/HeaderActionsPopover.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useCallback, useRef, type ReactNode } from 'react';
+import { PopoverMenu, IconButton, Loader } from '@wix/design-system';
+import { MoreSmall } from '@wix/wix-ui-icons-common';
+import type { HeaderAction } from './headerActionTypes';
+import { useCloseOnAncestorScroll } from '../../hooks/useCloseOnAncestorScroll';
+
+export interface HeaderActionsPopoverProps {
+  actions: HeaderAction[][];
+  dataHook?: string;
+  className?: string;
+}
+
+export function HeaderActionsPopover({
+  actions,
+  dataHook,
+  className,
+}: HeaderActionsPopoverProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [popoverKey, setPopoverKey] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const closePopover = useCallback(() => {
+    setMenuOpen(false);
+    setPopoverKey((k) => k + 1);
+  }, []);
+
+  useCloseOnAncestorScroll(wrapperRef, closePopover, menuOpen);
+
+  const menuItems = actions
+    .filter((group) => group.length > 0)
+    .reduce<ReactNode[]>((result, group, index, array) => {
+      const items = group.map((action, i) => (
+        <PopoverMenu.MenuItem
+          key={`${index}-${i}`}
+          text={action.label}
+          onClick={
+            action.disabled || action.loading ? undefined : action.onClick
+          }
+          prefixIcon={
+            action.loading ? (
+              <span>
+                <Loader size="tiny" />
+              </span>
+            ) : (
+              action.icon
+            )
+          }
+          disabled={action.disabled || action.loading}
+          disabledDescription={
+            action.loading ? undefined : action.disabledTooltip
+          }
+          skin={action.skin}
+        />
+      ));
+      const divider =
+        index < array.length - 1
+          ? [<PopoverMenu.Divider key={`divider-${index}`} />]
+          : [];
+      return [...result, ...items, ...divider];
+    }, []);
+
+  if (menuItems.length === 0) {
+    return null;
+  }
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      ref={wrapperRef}
+      className={className}
+      data-menu-open={menuOpen ? 'true' : 'false'}
+      data-hook={dataHook}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <PopoverMenu
+        key={popoverKey}
+        dataHook={dataHook ? `${dataHook}-menu` : undefined}
+        textSize="small"
+        triggerElement={
+          <IconButton
+            size="tiny"
+            skin="dark"
+            priority="tertiary"
+            ariaLabel="Column actions"
+            dataHook={dataHook ? `${dataHook}-more-button` : undefined}
+          >
+            <MoreSmall />
+          </IconButton>
+        }
+        appendTo="window"
+        placement="bottom-end"
+        onShow={() => setMenuOpen(true)}
+        onHide={() => setMenuOpen(false)}
+      >
+        {menuItems}
+      </PopoverMenu>
+    </div>
+  );
+}

package/src/components/{EditableTable → FieldActions}/headerActionTypes.ts

@@ -13,4 +13,6 @@ export interface HeaderAction {
   disabledTooltip?: string;
   /** Visual style — 'dark' (default) or 'destructive' (red). */
   skin?: 'dark' | 'destructive';
+  /** When true, replaces the icon with a spinner, forces disabled, and suppresses `disabledTooltip`. */
+  loading?: boolean;
 }

package/src/components/FieldActions/index.ts

@@ -0,0 +1,17 @@
+export {
+  FIELD_ACTIONS,
+  FIELD_ACTION_DISABLE_REASON_TOOLTIPS,
+  buildFieldActionGroups,
+  getFieldActionDisableReason,
+  getFieldActionDisableState,
+} from './FieldActions';
+export type {
+  FieldActionKey,
+  FieldActionDisableReason,
+  FieldActionPermissions,
+  FieldActionColumn,
+  FieldActionHandlers,
+} from './FieldActions';
+export { HeaderActionsPopover } from './HeaderActionsPopover';
+export type { HeaderActionsPopoverProps } from './HeaderActionsPopover';
+export type { HeaderAction } from './headerActionTypes';

package/src/components/Heading/Heading.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading3062876130";
+var _namespace_ = "Heading2428011585";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Heading3062876130__root"};
+export var classes = {"root":"Heading2428011585__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3828955019";
+var _namespace_ = "ImportStepUpload2889347292";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ImportStepUpload3828955019__root","fileUpload":"ImportStepUpload3828955019__fileUpload"};
+export var classes = {"root":"ImportStepUpload2889347292__root","fileUpload":"ImportStepUpload2889347292__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow1147860988";
+var _namespace_ = "InputOverflow788375391";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow1147860988__root"};
+export var classes = {"root":"InputOverflow788375391__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3732638543";
+var _namespace_ = "LoadingRow2398801252";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow3732638543__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3732638543__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2398801252__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2398801252__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText2833716073";
+var _namespace_ = "MaxHeightText2225652198";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText2833716073__root"};
+export var classes = {"root":"MaxHeightText2225652198__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines2918359679";
+var _namespace_ = "MaxLines4249316507";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines2918359679__root"};
+export var classes = {"root":"MaxLines4249316507__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar4201128667";
+var _namespace_ = "MultiBulkActionToolbar4235211275";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar4201128667__root","leftGroupWrapper":"MultiBulkActionToolbar4201128667__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4201128667__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4201128667__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4235211275__root","leftGroupWrapper":"MultiBulkActionToolbar4235211275__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4235211275__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4235211275__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow3795561005";
+var _namespace_ = "NestedTablePlaceholderStatesRow1946540713";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow3795561005__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1946540713__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow4145297049";
+var _namespace_ = "NestedTableRow2460612389";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow4145297049__root","firstLevel":"NestedTableRow4145297049__firstLevel","placeholder":"NestedTableRow4145297049__placeholder","parentHovered":"NestedTableRow4145297049__parentHovered"};
+export var classes = {"root":"NestedTableRow2460612389__root","firstLevel":"NestedTableRow2460612389__firstLevel","placeholder":"NestedTableRow2460612389__placeholder","parentHovered":"NestedTableRow2460612389__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect124075843";
+var _namespace_ = "MultipleDragOverlayEffect1249922194";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect124075843__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1249922194__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow2583153299";
+var _namespace_ = "NestedTableDragAndDropRow4174353810";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow2583153299__root"};
+export var classes = {"root":"NestedTableDragAndDropRow4174353810__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent142245375";
+var _namespace_ = "PickerContent3973713495";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent142245375__root"};
+export var classes = {"root":"PickerContent3973713495__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep3927095749";
+var _namespace_ = "PickerContentAdditionalStep2016124852";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep3927095749__root","titles":"PickerContentAdditionalStep3927095749__titles","suffix":"PickerContentAdditionalStep3927095749__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2016124852__root","titles":"PickerContentAdditionalStep2016124852__titles","suffix":"PickerContentAdditionalStep2016124852__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem1608188941";
+var _namespace_ = "PickerTableListItem2433074301";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem1608188941__root"};
+export var classes = {"root":"PickerTableListItem2433074301__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaCard/SchemaCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Button, Card, CardProps } from '@wix/design-system';
+import { Button, Card, CardProps, Layout } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
 import { SidePanelsState } from '../../state/SidePanelsState';
@@ -90,10 +90,12 @@ function _SchemaCard({
       />
       <Card.Divider />
       <Card.Content>
-        {fieldsState &&
-          fieldsState.orderedFields
-            .filter((f) => fieldsState.isFieldVisible(f.id))
-            .map((f) => renderField(f.id))}
+        <Layout>
+          {fieldsState &&
+            fieldsState.orderedFields
+              .filter((f) => fieldsState.isFieldVisible(f.id))
+              .map((f) => renderField(f.id))}
+        </Layout>
       </Card.Content>
       {state && <CustomColumnsEntityPageCTA state={state} />}
     </Card>

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent452829219";
+var _namespace_ = "ScrollableContent2625116042";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent452829219__root"};
+export var classes = {"root":"ScrollableContent2625116042__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1862786481";
+var _namespace_ = "SkeletonCard567081106";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard1862786481__root","headerLoading":"SkeletonCard1862786481__headerLoading"};
+export var classes = {"root":"SkeletonCard567081106__root","headerLoading":"SkeletonCard567081106__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal3640650316";
+var _namespace_ = "SlidingModal1034207869";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal3640650316__root"};
+export var classes = {"root":"SlidingModal1034207869__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter100310117";
+var _namespace_ = "TabsFilter118117328";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"TabsFilter100310117__root","title":"TabsFilter100310117__title"};
+export var classes = {"root":"TabsFilter118117328__root","title":"TabsFilter118117328__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3725940786";
+var _namespace_ = "ManageTagsModal536355500";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ManageTagsModal3725940786__root"};
+export var classes = {"root":"ManageTagsModal536355500__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarItem/ToolbarItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem3280184156";
+var _namespace_ = "ToolbarItem4246765503";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ToolbarItem3280184156__root"};
+export var classes = {"root":"ToolbarItem4246765503__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItemBox2347880808";
+var _namespace_ = "ToolbarItemBox1967016999";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ToolbarItemBox2347880808__root"};
+export var classes = {"root":"ToolbarItemBox1967016999__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/common.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common4202460000";
+var _namespace_ = "common3424099641";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"common4202460000__root","column":"common4202460000__column","fullHeight":"common4202460000__fullHeight"};
+export var classes = {"root":"common3424099641__root","column":"common3424099641__column","fullHeight":"common3424099641__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader2799500605";
+var _namespace_ = "CollectionPageHeader297172699";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPageHeader2799500605__root"};
+export var classes = {"root":"CollectionPageHeader297172699__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/EditableTableState.ts

@@ -20,12 +20,9 @@ import { FieldActionsState } from './FieldActionsState';
 import type { EditableTableMutationHandlers } from './MutationState';
 import type { Cell, EditableColumn, ValidationResult } from './types';
 import type { FieldActions } from '../../types/SchemaConfig';
+import type { FieldActionPermissions } from '../../components/FieldActions';
 
-export interface EditableTableFieldActionsPermissions {
-  addDisabled?: boolean;
-  editDisabled?: boolean;
-  deleteDisabled?: boolean;
-}
+export type EditableTableFieldActionsPermissions = FieldActionPermissions;
 
 export interface EditableTablePermissions {
   addItemDisabled?: boolean;
@@ -114,6 +111,7 @@ export class EditableTableState<T, F extends FiltersMap>
       params.collection.translate,
       params.fieldActions,
       params.permissions?.fieldActions,
+      params.collection.showToast,
     );
 
     makeObservable(this, {