@wix/patterns 1.477.0 → 1.478.0

package/src/components/EditableTable/EditableTable.tsx

@@ -97,7 +97,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
     hideHeaderActions,
   );
 
-  const { showAddItemRow, handleAddItem } = useAddRow(state);
+  const { showAddItemRow, addItemDisabledReason, handleAddItem } =
+    useAddRow(state);
 
   const tableColumns = useMemo(
     () =>
@@ -162,7 +163,12 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           showAddFieldButton
           {...(hasInvalidRows ? { rowStatus } : {})}
         >
-          {showAddItemRow && <AddItemRow onAdd={handleAddItem} />}
+          {showAddItemRow && (
+            <AddItemRow
+              onAdd={handleAddItem}
+              disabledReason={addItemDisabledReason}
+            />
+          )}
         </TableVirtual>
       </div>
       <EditableTableContextMenu

package/src/components/EditableTable/EditableTable.uni.driver.ts

@@ -106,6 +106,10 @@ export function EditableTableUniDriver(base: UniDriver, body: UniDriver) {
     getAddItemRow: () =>
       AddItemUniDriver(base.$('[data-hook="add-row-button"]'), body),
 
+    isAddItemRowDisabled: async () =>
+      (await base.$('[data-hook="add-row-button"] button').attr('disabled')) !==
+      null,
+
     /** Press a key on the table container (triggers useKeyboardNavigation) */
     pressKey: async (key: string, opts?: Record<string, unknown>) => {
       const el = await base.getNative();

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
@@ -16,7 +16,10 @@ import {
 import type { EditableTableState, Cell } from '../../state/EditableTable';
 import { startEditingNewRow } from './useAddRow';
 
-type ListItemActionBuilderParams = Parameters<typeof listItemActionBuilder>[0];
+type ListItemActionBuilderParams = Omit<
+  Parameters<typeof listItemActionBuilder>[0],
+  'disabledDescription'
+> & { disabledDescription?: ReactNode };
 
 export interface EditableTableContextMenuProps<T, F extends FiltersMap> {
   state: EditableTableState<T, F>;
@@ -33,6 +36,11 @@ const PADDING = 16;
 const OFFSET_X = 4;
 const OFFSET_Y = 4;
 const CONTEXT_MENU_Z_INDEX = 5001;
+const ADD_ROW_OPTION_IDS: (string | number)[] = [
+  'add-above',
+  'add-below',
+  'duplicate',
+];
 const SURFACE_BACKGROUND =
   'var(--wds-color-fill-surface-overlay, var(--wsr-color-D80, #FFFFFF))';
 const SURFACE_BORDER_RADIUS = 'var(--wds-border-radius-surface-overlay, 8px)';
@@ -85,7 +93,6 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     cellInteraction,
     clipboard,
     collection,
-    addItemDisabled,
     updateItemDisabled,
     removeItemDisabled,
   } = state;
@@ -178,8 +185,10 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       : state.rowDeleteDisabledReason(rowKeys[0] ?? cell.rowKey) ??
         t('cairo.editableTable.contextMenu.deleteRow.notDeletable.tooltip');
 
+  const addItemDisabled = state.isAddItemDisabled();
   const addDisabledReason = addItemDisabled
-    ? t('cairo.editableTable.contextMenu.addRow.noPermission.tooltip')
+    ? state.addItemDisabledReason() ??
+      t('cairo.editableTable.contextMenu.addRow.noPermission.tooltip')
     : undefined;
   const updateDisabledReason = updateItemDisabled
     ? t('cairo.editableTable.contextMenu.editRow.noPermission.tooltip')
@@ -315,6 +324,9 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       : cell.rowKey;
 
   const handleSelect = (option: { id: string | number }) => {
+    if (ADD_ROW_OPTION_IDS.includes(option.id) && state.isAddItemDisabled()) {
+      return;
+    }
     switch (option.id) {
       case 'copy':
         handleCopy();

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover3275242438";
+var _namespace_ = "HeaderActionsPopover1373088574";
 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":"HeaderActionsPopover3275242438__root"};
+export var classes = {"root":"HeaderActionsPopover1373088574__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout732390129";
+var _namespace_ = "CellViewLayout990787454";
 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":"CellViewLayout732390129__root"};
+export var classes = {"root":"CellViewLayout990787454__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit99357277";
+var _namespace_ = "Edit2722305770";
 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":"Edit99357277__root","addressInput":"Edit99357277__addressInput"};
+export var classes = {"root":"Edit2722305770__root","addressInput":"Edit2722305770__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1487541884";
+var _namespace_ = "Edit357726622";
 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":"Edit1487541884__root","jsonInput":"Edit1487541884__jsonInput"};
+export var classes = {"root":"Edit357726622__root","jsonInput":"Edit357726622__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4147843703";
+var _namespace_ = "Edit2609320197";
 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":"Edit4147843703__root","booleanEdit":"Edit4147843703__booleanEdit"};
+export var classes = {"root":"Edit2609320197__root","booleanEdit":"Edit2609320197__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View998597823";
+var _namespace_ = "View722233277";
 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":"View998597823__root","booleanView":"View998597823__booleanView"};
+export var classes = {"root":"View722233277__root","booleanView":"View722233277__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/color/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2175736022";
+var _namespace_ = "Edit3886572474";
 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":"Edit2175736022__root"};
+export var classes = {"root":"Edit3886572474__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2387630552";
+var _namespace_ = "Edit3624563720";
 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":"Edit2387630552__root","dateInput":"Edit2387630552__dateInput"};
+export var classes = {"root":"Edit3624563720__root","dateInput":"Edit3624563720__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2257259407";
+var _namespace_ = "View3669448249";
 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":"View2257259407__root"};
+export var classes = {"root":"View3669448249__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2736218085";
+var _namespace_ = "Edit2438624960";
 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":"Edit2736218085__root","half":"Edit2736218085__half","dateHalf":"Edit2736218085__dateHalf Edit2736218085__half","timeHalf":"Edit2736218085__timeHalf Edit2736218085__half","divider":"Edit2736218085__divider","passiveText":"Edit2736218085__passiveText","placeholderText":"Edit2736218085__placeholderText Edit2736218085__passiveText"};
+export var classes = {"root":"Edit2438624960__root","half":"Edit2438624960__half","dateHalf":"Edit2438624960__dateHalf Edit2438624960__half","timeHalf":"Edit2438624960__timeHalf Edit2438624960__half","divider":"Edit2438624960__divider","passiveText":"Edit2438624960__passiveText","placeholderText":"Edit2438624960__placeholderText Edit2438624960__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View497238197";
+var _namespace_ = "View3661061794";
 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":"View497238197__root","leaf":"View497238197__leaf","datePart":"View497238197__datePart View497238197__leaf","timePart":"View497238197__timePart View497238197__leaf","placeholder":"View497238197__placeholder View497238197__leaf","divider":"View497238197__divider"};
+export var classes = {"root":"View3661061794__root","leaf":"View3661061794__leaf","datePart":"View3661061794__datePart View3661061794__leaf","timePart":"View3661061794__timePart View3661061794__leaf","placeholder":"View3661061794__placeholder View3661061794__leaf","divider":"View3661061794__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2803015644";
+var _namespace_ = "Edit724469922";
 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":"Edit2803015644__root","emailInput":"Edit2803015644__emailInput"};
+export var classes = {"root":"Edit724469922__root","emailInput":"Edit724469922__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2980188437";
+var _namespace_ = "View2415997443";
 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":"View2980188437__root"};
+export var classes = {"root":"View2415997443__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1600468042";
+var _namespace_ = "Edit7950938";
 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":"Edit1600468042__root","numberInput":"Edit1600468042__numberInput"};
+export var classes = {"root":"Edit7950938__root","numberInput":"Edit7950938__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1002099887";
+var _namespace_ = "View3961498259";
 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":"View1002099887__root","textView":"View1002099887__textView"};
+export var classes = {"root":"View3961498259__root","textView":"View3961498259__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3959908439";
+var _namespace_ = "Edit58382595";
 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":"Edit3959908439__root","jsonInput":"Edit3959908439__jsonInput"};
+export var classes = {"root":"Edit58382595__root","jsonInput":"Edit58382595__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1121471793";
+var _namespace_ = "View3755779564";
 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":"View1121471793__root"};
+export var classes = {"root":"View3755779564__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1553685187";
+var _namespace_ = "Edit3543350856";
 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":"Edit1553685187__root","selectInput":"Edit1553685187__selectInput"};
+export var classes = {"root":"Edit3543350856__root","selectInput":"Edit3543350856__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3733797273";
+var _namespace_ = "Edit4280840684";
 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":"Edit3733797273__root","editWrapper":"Edit3733797273__editWrapper","inputArea":"Edit3733797273__inputArea"};
+export var classes = {"root":"Edit4280840684__root","editWrapper":"Edit4280840684__editWrapper","inputArea":"Edit4280840684__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View946200415";
+var _namespace_ = "View2174248763";
 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":"View946200415__root"};
+export var classes = {"root":"View2174248763__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2947994912";
+var _namespace_ = "Edit3797187847";
 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":"Edit2947994912__root","wrapper":"Edit2947994912__wrapper","overlay":"Edit2947994912__overlay"};
+export var classes = {"root":"Edit3797187847__root","wrapper":"Edit3797187847__wrapper","overlay":"Edit3797187847__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1329285447";
+var _namespace_ = "Edit378691195";
 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":"Edit1329285447__root","urlInput":"Edit1329285447__urlInput"};
+export var classes = {"root":"Edit378691195__root","urlInput":"Edit378691195__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2470847174";
+var _namespace_ = "View2801638895";
 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":"View2470847174__root","textView":"View2470847174__textView","urlText":"View2470847174__urlText","suffix":"View2470847174__suffix"};
+export var classes = {"root":"View2801638895__root","textView":"View2801638895__textView","urlText":"View2801638895__urlText","suffix":"View2801638895__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/useAddRow.ts

@@ -23,14 +23,20 @@ export function useAddRow<T, F extends FiltersMap>(
   state: EditableTableState<T, F>,
 ) {
   const handleAddItem = useCallback(() => {
+    if (state.isAddItemDisabled()) {
+      return;
+    }
     state.onAddItemClick('Card CTA');
 
     const lastRowKey = state.keyedItems[state.keyedItems.length - 1]?.key;
     startEditingNewRow(state, state.addItem(lastRowKey));
   }, [state]);
 
+  const addItemDisabledReason = state.addItemDisabledReason();
+
   const showAddItemRow =
-    !state.addItemDisabled && state.collection.initTask.status.isSuccess;
+    (!state.isAddItemDisabled() || !!addItemDisabledReason) &&
+    state.collection.initTask.status.isSuccess;
 
-  return { showAddItemRow, handleAddItem };
+  return { showAddItemRow, addItemDisabledReason, handleAddItem };
 }

package/src/components/EmptyState/EmptyStateBase.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase2060802551";
+var _namespace_ = "EmptyStateBase887233244";
 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":"EmptyStateBase2060802551__root"};
+export var classes = {"root":"EmptyStateBase887233244__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain2082051304";
+var _namespace_ = "EntityPagePlain2068132960";
 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":"EntityPagePlain2082051304__root"};
+export var classes = {"root":"EntityPagePlain2068132960__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade3243125242";
+var _namespace_ = "Fade606946213";
 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":"Fade3243125242__root"};
+export var classes = {"root":"Fade606946213__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading748213021";
+var _namespace_ = "Heading1247508333";
 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":"Heading748213021__root"};
+export var classes = {"root":"Heading1247508333__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};