@wix/patterns 1.476.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_ = "HeaderActionsPopover1831530829";
+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":"HeaderActionsPopover1831530829__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_ = "CellViewLayout3802124613";
+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":"CellViewLayout3802124613__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_ = "Edit156033193";
+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":"Edit156033193__root","addressInput":"Edit156033193__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_ = "Edit3125005888";
+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":"Edit3125005888__root","jsonInput":"Edit3125005888__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_ = "Edit1547377132";
+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":"Edit1547377132__root","booleanEdit":"Edit1547377132__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_ = "View3692456044";
+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":"View3692456044__root","booleanView":"View3692456044__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_ = "Edit160725417";
+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":"Edit160725417__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_ = "Edit3389653613";
+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":"Edit3389653613__root","dateInput":"Edit3389653613__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_ = "View2382768293";
+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":"View2382768293__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_ = "Edit37436918";
+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":"Edit37436918__root","half":"Edit37436918__half","dateHalf":"Edit37436918__dateHalf Edit37436918__half","timeHalf":"Edit37436918__timeHalf Edit37436918__half","divider":"Edit37436918__divider","passiveText":"Edit37436918__passiveText","placeholderText":"Edit37436918__placeholderText Edit37436918__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_ = "View1893555004";
+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":"View1893555004__root","leaf":"View1893555004__leaf","datePart":"View1893555004__datePart View1893555004__leaf","timePart":"View1893555004__timePart View1893555004__leaf","placeholder":"View1893555004__placeholder View1893555004__leaf","divider":"View1893555004__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_ = "Edit2586444128";
+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":"Edit2586444128__root","emailInput":"Edit2586444128__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_ = "View3056188327";
+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":"View3056188327__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_ = "Edit677987938";
+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":"Edit677987938__root","numberInput":"Edit677987938__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_ = "View1106809120";
+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":"View1106809120__root","textView":"View1106809120__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_ = "Edit1367430423";
+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":"Edit1367430423__root","jsonInput":"Edit1367430423__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_ = "View691617612";
+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":"View691617612__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_ = "Edit3038043633";
+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":"Edit3038043633__root","selectInput":"Edit3038043633__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_ = "Edit402714972";
+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":"Edit402714972__root","editWrapper":"Edit402714972__editWrapper","inputArea":"Edit402714972__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_ = "View1507287989";
+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":"View1507287989__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_ = "Edit450462936";
+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":"Edit450462936__root","wrapper":"Edit450462936__wrapper","overlay":"Edit450462936__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_ = "Edit1370591353";
+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":"Edit1370591353__root","urlInput":"Edit1370591353__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_ = "View3453873069";
+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":"View3453873069__root","textView":"View3453873069__textView","urlText":"View3453873069__urlText","suffix":"View3453873069__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_ = "EmptyStateBase3411603487";
+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":"EmptyStateBase3411603487__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_ = "EntityPagePlain1613052340";
+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":"EntityPagePlain1613052340__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_ = "Fade363126330";
+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":"Fade363126330__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_ = "Heading491245295";
+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":"Heading491245295__root"};
+export var classes = {"root":"Heading1247508333__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};