@wix/patterns 1.431.0 → 1.433.0

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -2,14 +2,20 @@ import React, { useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
-import { DropdownLayout, listItemActionBuilder } from '@wix/design-system';
+import {
+  DropdownLayout,
+  Tooltip,
+  listItemActionBuilder,
+} from '@wix/design-system';
 import {
   DeleteSmall,
   AddSmall,
   DuplicateSmall,
-} from '@wix/wix-ui-icons-common/lazy';
+} from '@wix/wix-ui-icons-common';
 import type { EditableTableState, Cell } from '../../state/EditableTable';
 
+type ListItemActionBuilderParams = Parameters<typeof listItemActionBuilder>[0];
+
 export interface EditableTableContextMenuProps<T, F extends FiltersMap> {
   state: EditableTableState<T, F>;
   position: { x: number; y: number } | null;
@@ -25,6 +31,40 @@ const PADDING = 16;
 const OFFSET_X = 4;
 const OFFSET_Y = 4;
 
+// ListItemAction's built-in disabledDescription tooltip is hardcoded to open
+// above the item, where it covers neighboring menu items. Build the item
+// without it and attach our own tooltip to the side instead. The hidden span
+// mirrors what ListItemAction renders for disabledDescription, keeping the
+// description reachable by screen readers and testkits.
+const buildMenuAction = ({
+  disabledDescription,
+  ...params
+}: ListItemActionBuilderParams) => {
+  const built = listItemActionBuilder(params);
+  if (!params.disabled || !disabledDescription) {
+    return built;
+  }
+  const descriptionId = `editable-table-context-menu-${params.id}-disabled-description`;
+  return {
+    ...built,
+    value: (args: { hovered: boolean }) => (
+      <>
+        <Tooltip
+          content={disabledDescription}
+          placement="right"
+          enterDelay={450}
+          aria-describedby={descriptionId}
+        >
+          {built.value(args)}
+        </Tooltip>
+        <span id={descriptionId} hidden>
+          {disabledDescription}
+        </span>
+      </>
+    ),
+  };
+};
+
 function _EditableTableContextMenu<T, F extends FiltersMap>({
   state,
   position,
@@ -110,42 +150,71 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
 
   const options = [];
 
-  const pushRowActions = (multipleRows: boolean) => {
-    if (!multipleRows && !addItemDisabled) {
+  const isDeleteDisabledFor = (rowKeys: string[]) =>
+    rowKeys.length > 1
+      ? state.isMultiDeleteDisabled(rowKeys)
+      : state.isRowDeleteDisabled(rowKeys[0] ?? cell.rowKey);
+  const deleteDisabledReasonFor = (rowKeys: string[]) =>
+    removeItemDisabled
+      ? "You don't have permission to delete rows"
+      : rowKeys.length > 1 && state.multiDeleteDisabled
+      ? "You don't have permission to delete multiple rows at once"
+      : rowKeys.length > 1
+      ? "Some of the selected rows can't be deleted"
+      : state.rowDeleteDisabledReason(rowKeys[0] ?? cell.rowKey) ??
+        "This row can't be deleted";
+
+  const addDisabledReason = addItemDisabled
+    ? "You don't have permission to add rows"
+    : undefined;
+  const updateDisabledReason = updateItemDisabled
+    ? "You don't have permission to edit rows"
+    : undefined;
+
+  const pushRowActions = (targetKeys: string[]) => {
+    if (targetKeys.length === 1) {
       options.push(
-        listItemActionBuilder({
+        buildMenuAction({
           id: 'add-above',
           title: 'Add Row Above',
           prefixIcon: <AddSmall />,
+          disabled: !!addItemDisabled,
+          disabledDescription: addDisabledReason,
         }),
-        listItemActionBuilder({
+        buildMenuAction({
           id: 'add-below',
           title: 'Add Row Below',
           prefixIcon: <AddSmall />,
+          disabled: !!addItemDisabled,
+          disabledDescription: addDisabledReason,
         }),
-        listItemActionBuilder({
+        buildMenuAction({
           id: 'duplicate',
           title: 'Duplicate Row',
           prefixIcon: <DuplicateSmall />,
+          disabled: !!addItemDisabled,
+          disabledDescription: addDisabledReason,
         }),
       );
+      options.push({ id: 'divider-2', value: '-' });
     }
 
-    if (!removeItemDisabled) {
-      if (!multipleRows && !addItemDisabled) {
-        options.push({ id: 'divider-2', value: '-' });
-      }
-      options.push(
-        listItemActionBuilder({
-          id: 'delete',
-          title: multipleRows
-            ? `Delete ${selectedRowCount} Rows`
+    const deleteDisabled = isDeleteDisabledFor(targetKeys);
+    options.push(
+      buildMenuAction({
+        id: 'delete',
+        title:
+          targetKeys.length > 1
+            ? `Delete ${targetKeys.length} Rows`
             : 'Delete Row',
-          prefixIcon: <DeleteSmall />,
-          skin: 'destructive',
-        }),
-      );
-    }
+        prefixIcon: <DeleteSmall />,
+        skin: 'destructive',
+        disabled: deleteDisabled,
+        disabledDescription: deleteDisabled
+          ? deleteDisabledReasonFor(targetKeys)
+          : undefined,
+      }),
+    );
   };
 
   if (isRowSelectionMode) {
@@ -156,43 +225,48 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     // selected row is actually loaded client-side.
     if (collection.bulkSelect.allSelectedItemsFetched) {
       if (hasMultipleRows) {
-        if (!removeItemDisabled) {
-          options.push(
-            listItemActionBuilder({
-              id: 'delete',
-              title: `Remove ${selectedRowCount} Rows`,
-              prefixIcon: <DeleteSmall />,
-              skin: 'destructive',
-            }),
-          );
-        }
+        const deleteDisabled = isDeleteDisabledFor(selectedRowKeys);
+        options.push(
+          buildMenuAction({
+            id: 'delete',
+            title: `Remove ${selectedRowCount} Rows`,
+            prefixIcon: <DeleteSmall />,
+            skin: 'destructive',
+            disabled: deleteDisabled,
+            disabledDescription: deleteDisabled
+              ? deleteDisabledReasonFor(selectedRowKeys)
+              : undefined,
+          }),
+        );
       } else {
         // A single checked row gets the full row menu, targeting the checked
         // row — not the row under the cursor.
-        pushRowActions(false);
+        pushRowActions(selectedRowKeys);
       }
     }
   } else {
     options.push(
-      listItemActionBuilder({
+      buildMenuAction({
         id: 'copy',
         title: `Copy`,
         disabled: selectedCount === 0,
       }),
-      listItemActionBuilder({
+      buildMenuAction({
         id: 'cut',
         title: `Cut`,
         disabled:
           selectedCount === 0 ||
           !!updateItemDisabled ||
           areSelectedCellsReadOnly,
+        disabledDescription: updateDisabledReason,
       }),
-      listItemActionBuilder({
+      buildMenuAction({
         id: 'paste',
         title: `Paste`,
         disabled: !!updateItemDisabled || isPasteTargetReadOnly,
+        disabledDescription: updateDisabledReason,
       }),
-      listItemActionBuilder({
+      buildMenuAction({
         id: 'clear',
         title:
           selectedCount > 1 ? `Clear ${selectedCount} Cells` : 'Clear Cell',
@@ -200,16 +274,19 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
           selectedCount === 0 ||
           !!updateItemDisabled ||
           areSelectedCellsReadOnly,
+        disabledDescription: updateDisabledReason,
       }),
     );
 
-    // A cell-range selection spanning several rows offers cell ops plus
+    options.push({ id: 'divider-1', value: '-' });
+
+    // A cell-range selection spanning several rows only offers cell ops plus
     // deleting the spanned rows; a single-row context gets the full row menu.
-    const hasRowOps = !addItemDisabled || !removeItemDisabled;
-    if (hasRowOps) {
-      options.push({ id: 'divider-1', value: '-' });
-    }
-    pushRowActions(isMultiCellSelection && hasMultipleRows);
+    const deleteKeys =
+      isMultiCellSelection && selectedRowKeys.length > 0
+        ? selectedRowKeys
+        : [cell.rowKey];
+    pushRowActions(deleteKeys);
   }
 
   if (options.length === 0) {

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

@@ -25,10 +25,17 @@ export function EditableTableContextMenuUniDriver(
     },
 
     isOptionDisabled: async (optionId: string) => {
-      const disabled = await body
-        .$(`[data-hook="dropdown-item-${optionId}"]`)
-        .attr('data-option-disabled');
-      return disabled === 'true';
+      const option = await getDropdownLayout().optionById(optionId);
+      return option.isDisabled();
+    },
+
+    // The menu renders each disabled reason into a hidden span
+    // (referenced by aria-describedby) alongside the side tooltip.
+    getOptionDisabledDescription: async (optionId: string) => {
+      const description = body.$(
+        `[data-hook="dropdown-item-${optionId}"] span[hidden]`,
+      );
+      return (await description.exists()) ? description.text() : null;
     },
 
     clickOption: async (optionId: string) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover2912949458";
+var _namespace_ = "HeaderActionsPopover2149224872";
 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":"HeaderActionsPopover2912949458__root"};
+export var classes = {"root":"HeaderActionsPopover2149224872__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_ = "CellViewLayout2642242987";
+var _namespace_ = "CellViewLayout1552180148";
 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":"CellViewLayout2642242987__root"};
+export var classes = {"root":"CellViewLayout1552180148__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_ = "Edit2609722555";
+var _namespace_ = "Edit2058877370";
 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":"Edit2609722555__root","addressInput":"Edit2609722555__addressInput"};
+export var classes = {"root":"Edit2058877370__root","addressInput":"Edit2058877370__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_ = "Edit254985112";
+var _namespace_ = "Edit1749998855";
 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":"Edit254985112__root","jsonInput":"Edit254985112__jsonInput"};
+export var classes = {"root":"Edit1749998855__root","jsonInput":"Edit1749998855__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_ = "Edit2369361531";
+var _namespace_ = "Edit3605644959";
 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":"Edit2369361531__root","booleanEdit":"Edit2369361531__booleanEdit"};
+export var classes = {"root":"Edit3605644959__root","booleanEdit":"Edit3605644959__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_ = "View140178427";
+var _namespace_ = "View1659296202";
 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":"View140178427__root","booleanView":"View140178427__booleanView"};
+export var classes = {"root":"View1659296202__root","booleanView":"View1659296202__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_ = "Edit2849672228";
+var _namespace_ = "Edit1758951656";
 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":"Edit2849672228__root"};
+export var classes = {"root":"Edit1758951656__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_ = "Edit190091011";
+var _namespace_ = "Edit895269248";
 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":"Edit190091011__root","dateInput":"Edit190091011__dateInput"};
+export var classes = {"root":"Edit895269248__root","dateInput":"Edit895269248__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_ = "View141344198";
+var _namespace_ = "View1685294746";
 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":"View141344198__root"};
+export var classes = {"root":"View1685294746__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_ = "Edit3782397597";
+var _namespace_ = "Edit4238098641";
 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":"Edit3782397597__root","half":"Edit3782397597__half","dateHalf":"Edit3782397597__dateHalf Edit3782397597__half","timeHalf":"Edit3782397597__timeHalf Edit3782397597__half","divider":"Edit3782397597__divider","passiveText":"Edit3782397597__passiveText","placeholderText":"Edit3782397597__placeholderText Edit3782397597__passiveText"};
+export var classes = {"root":"Edit4238098641__root","half":"Edit4238098641__half","dateHalf":"Edit4238098641__dateHalf Edit4238098641__half","timeHalf":"Edit4238098641__timeHalf Edit4238098641__half","divider":"Edit4238098641__divider","passiveText":"Edit4238098641__passiveText","placeholderText":"Edit4238098641__placeholderText Edit4238098641__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_ = "View1682123110";
+var _namespace_ = "View1910944526";
 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":"View1682123110__root","leaf":"View1682123110__leaf","datePart":"View1682123110__datePart View1682123110__leaf","timePart":"View1682123110__timePart View1682123110__leaf","placeholder":"View1682123110__placeholder View1682123110__leaf","divider":"View1682123110__divider"};
+export var classes = {"root":"View1910944526__root","leaf":"View1910944526__leaf","datePart":"View1910944526__datePart View1910944526__leaf","timePart":"View1910944526__timePart View1910944526__leaf","placeholder":"View1910944526__placeholder View1910944526__leaf","divider":"View1910944526__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_ = "Edit3200373441";
+var _namespace_ = "Edit1227363736";
 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":"Edit3200373441__root","emailInput":"Edit3200373441__emailInput"};
+export var classes = {"root":"Edit1227363736__root","emailInput":"Edit1227363736__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_ = "View812756463";
+var _namespace_ = "View1581649439";
 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":"View812756463__root"};
+export var classes = {"root":"View1581649439__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_ = "Edit3691147245";
+var _namespace_ = "Edit1369489208";
 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":"Edit3691147245__root","numberInput":"Edit3691147245__numberInput"};
+export var classes = {"root":"Edit1369489208__root","numberInput":"Edit1369489208__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_ = "View3559157400";
+var _namespace_ = "View1644359652";
 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":"View3559157400__root","textView":"View3559157400__textView"};
+export var classes = {"root":"View1644359652__root","textView":"View1644359652__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_ = "Edit2050020221";
+var _namespace_ = "Edit2157031009";
 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":"Edit2050020221__root","jsonInput":"Edit2050020221__jsonInput"};
+export var classes = {"root":"Edit2157031009__root","jsonInput":"Edit2157031009__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_ = "View2117584149";
+var _namespace_ = "View1850741015";
 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":"View2117584149__root"};
+export var classes = {"root":"View1850741015__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_ = "Edit526154172";
+var _namespace_ = "Edit391171980";
 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":"Edit526154172__root","selectInput":"Edit526154172__selectInput"};
+export var classes = {"root":"Edit391171980__root","selectInput":"Edit391171980__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_ = "Edit2692897257";
+var _namespace_ = "Edit813414738";
 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":"Edit2692897257__root","editWrapper":"Edit2692897257__editWrapper","inputArea":"Edit2692897257__inputArea"};
+export var classes = {"root":"Edit813414738__root","editWrapper":"Edit813414738__editWrapper","inputArea":"Edit813414738__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_ = "View231089227";
+var _namespace_ = "View2241280045";
 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":"View231089227__root"};
+export var classes = {"root":"View2241280045__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};