@wix/patterns 1.432.0 → 1.434.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;
@@ -24,6 +30,46 @@ const DIVIDER_HEIGHT = 9;
 const PADDING = 16;
 const OFFSET_X = 4;
 const OFFSET_Y = 4;
+const CONTEXT_MENU_Z_INDEX = 5001;
+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)';
+const SURFACE_BOX_SHADOW =
+  'var(--wds-shadow-surface-overlay, var(--wsr-shadow30, 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12)))';
+
+// 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,
@@ -110,42 +156,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 +231,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 +280,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) {
@@ -289,8 +372,12 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         position: 'fixed',
         left: x,
         top: y,
-        zIndex: 1000,
+        zIndex: CONTEXT_MENU_Z_INDEX,
         width: MENU_WIDTH,
+        background: SURFACE_BACKGROUND,
+        borderRadius: SURFACE_BORDER_RADIUS,
+        boxShadow: SURFACE_BOX_SHADOW,
+        overflow: 'hidden',
       }}
       onMouseDown={(e) => e.preventDefault()}
     >

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_ = "HeaderActionsPopover650858329";
+var _namespace_ = "HeaderActionsPopover1458022149";
 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":"HeaderActionsPopover650858329__root"};
+export var classes = {"root":"HeaderActionsPopover1458022149__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,7 +1,7 @@
 .root {
   width: 100%;
   height: 100%;
-  padding: 9px 12px;
+  padding: 6px 8px;
   box-sizing: border-box;
   display: flex;
   align-items: center;

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

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

package/src/components/EditableTable/cellTypes/CellViewLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { classes } from './CellViewLayout.st.css.js';
 
-/** Shared wrapper that provides the default cell padding (9px 12px).
+/** Shared wrapper that provides the default cell padding (6px 8px).
  *  Standard cell types use this; types with custom layouts (e.g. URL) skip it. */
 export const CellViewLayout: React.FC<{ children: React.ReactNode }> = ({
   children,

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

@@ -4,8 +4,8 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-left: 8px;
+  padding-right: 8px;
   min-width: 0;
   overflow: hidden;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit615227027";
+var _namespace_ = "Edit2525511369";
 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":"Edit615227027__root","addressInput":"Edit615227027__addressInput"};
+export var classes = {"root":"Edit2525511369__root","addressInput":"Edit2525511369__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_ = "Edit3140383710";
+var _namespace_ = "Edit2981320112";
 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":"Edit3140383710__root","jsonInput":"Edit3140383710__jsonInput"};
+export var classes = {"root":"Edit2981320112__root","jsonInput":"Edit2981320112__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,5 +1,5 @@
 .booleanEdit {
   display: flex;
   align-items: center;
-  margin-left: 12px;
+  margin-left: 8px;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3638417173";
+var _namespace_ = "Edit4150083857";
 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":"Edit3638417173__root","booleanEdit":"Edit3638417173__booleanEdit"};
+export var classes = {"root":"Edit4150083857__root","booleanEdit":"Edit4150083857__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,6 +1,6 @@
 .booleanView {
   display: flex;
   align-items: center;
-  margin-left: 9px;
+  margin-left: 8px;
   pointer-events: none;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3019513156";
+var _namespace_ = "View772475961";
 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":"View3019513156__root","booleanView":"View3019513156__booleanView"};
+export var classes = {"root":"View772475961__root","booleanView":"View772475961__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_ = "Edit2049433503";
+var _namespace_ = "Edit770452658";
 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":"Edit2049433503__root"};
+export var classes = {"root":"Edit770452658__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_ = "Edit1850112909";
+var _namespace_ = "Edit4239755524";
 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":"Edit1850112909__root","dateInput":"Edit1850112909__dateInput"};
+export var classes = {"root":"Edit4239755524__root","dateInput":"Edit4239755524__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_ = "View4265877365";
+var _namespace_ = "View3401496092";
 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":"View4265877365__root"};
+export var classes = {"root":"View3401496092__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -27,7 +27,7 @@
 }
 
 .passiveText {
-  padding: 9px 12px;
+  padding: 6px 8px;
   font-size: 14px;
   line-height: 18px;
   font-family: inherit;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit589549391";
+var _namespace_ = "Edit4259770619";
 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":"Edit589549391__root","half":"Edit589549391__half","dateHalf":"Edit589549391__dateHalf Edit589549391__half","timeHalf":"Edit589549391__timeHalf Edit589549391__half","divider":"Edit589549391__divider","passiveText":"Edit589549391__passiveText","placeholderText":"Edit589549391__placeholderText Edit589549391__passiveText"};
+export var classes = {"root":"Edit4259770619__root","half":"Edit4259770619__half","dateHalf":"Edit4259770619__dateHalf Edit4259770619__half","timeHalf":"Edit4259770619__timeHalf Edit4259770619__half","divider":"Edit4259770619__divider","passiveText":"Edit4259770619__passiveText","placeholderText":"Edit4259770619__placeholderText Edit4259770619__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -3,7 +3,7 @@
 
 .leaf {
   min-width: 0;
-  padding: 9px 12px;
+  padding: 6px 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3747816942";
+var _namespace_ = "View4034504375";
 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":"View3747816942__root","leaf":"View3747816942__leaf","datePart":"View3747816942__datePart View3747816942__leaf","timePart":"View3747816942__timePart View3747816942__leaf","placeholder":"View3747816942__placeholder View3747816942__leaf","divider":"View3747816942__divider"};
+export var classes = {"root":"View4034504375__root","leaf":"View4034504375__leaf","datePart":"View4034504375__datePart View4034504375__leaf","timePart":"View4034504375__timePart View4034504375__leaf","placeholder":"View4034504375__placeholder View4034504375__leaf","divider":"View4034504375__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_ = "Edit4114511274";
+var _namespace_ = "Edit3518008869";
 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":"Edit4114511274__root","emailInput":"Edit4114511274__emailInput"};
+export var classes = {"root":"Edit3518008869__root","emailInput":"Edit3518008869__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_ = "View1248273100";
+var _namespace_ = "View61824962";
 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":"View1248273100__root"};
+export var classes = {"root":"View61824962__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_ = "Edit2444082246";
+var _namespace_ = "Edit3123858299";
 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":"Edit2444082246__root","numberInput":"Edit2444082246__numberInput"};
+export var classes = {"root":"Edit3123858299__root","numberInput":"Edit3123858299__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_ = "View1038111937";
+var _namespace_ = "View3131273237";
 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":"View1038111937__root","textView":"View1038111937__textView"};
+export var classes = {"root":"View3131273237__root","textView":"View3131273237__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_ = "Edit3699074681";
+var _namespace_ = "Edit4094000354";
 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":"Edit3699074681__root","jsonInput":"Edit3699074681__jsonInput"};
+export var classes = {"root":"Edit4094000354__root","jsonInput":"Edit4094000354__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};