@wix/patterns 1.377.0 → 1.380.0

package/src/components/CollectionTable/CollectionTable.tsx

@@ -77,6 +77,8 @@ export interface CollectionTableBaseProps<T, F extends FiltersMap>
 
   tags?: TagsElement<T, F>;
 
+  forceResize?: boolean;
+
   /**
    * A function that receives the item of the row and returns a string for tooltip content.
    * @external
@@ -182,6 +184,7 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     rowVerticalPadding,
     keyedItems,
     resizeProps,
+    forceResize,
     ...rest
   } = props;
 
@@ -231,16 +234,19 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
 
   const { bulkSelect, query } = collection;
 
-  const { isResizable, tableResizeProps, resizePlaceholderColumn } =
-    useCollectionTableResize({
-      columns: columnsProp,
-      userResizeProps: resizeProps,
-      horizontalScroll,
-      columnSizesState: state.columnSizesState,
-      isVirtualized,
-    });
+  const { isResizable, tableResizeProps } = useCollectionTableResize({
+    columns: columnsProp,
+    userResizeProps: resizeProps,
+    horizontalScroll,
+    columnSizesState: state.columnSizesState,
+    isVirtualized,
+    forceResize,
+  });
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: state.showFieldTypeIcons });
+  const createWSRColumnBase = useCreateWSRColumnBase({
+    horizontalScroll,
+    showFieldTypeIcons: state.showFieldTypeIcons,
+  });
 
   const transformedColumns: WSRTableColumn<KeyedItem<T>>[] =
     selectedOrderedColumnsOrAll.map((column, index, { length }) => {
@@ -290,10 +296,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     actionCell,
   });
 
-  if (isResizable) {
-    transformedColumns.push(resizePlaceholderColumn);
-  }
-
   const columnsWithActions: WSRTableColumn<KeyedItem<T>>[] = actionCellColumn
     ? [...transformedColumns, actionCellColumn]
     : transformedColumns;
@@ -313,7 +315,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
   };
 
   const { st: tableRowSt, classes: tableRowClasses } = Table.dataTableRowStyle;
-
   let table = (
     <CollectionTableWSRTable
       rowClass={st(classes.root, { mobile: isMobile })}

package/src/components/CollectionTable/CollectionTableWSRTable.st.css

@@ -0,0 +1,12 @@
+.root {
+  -st-states: resizable;
+}
+
+.root:resizable :global(table) {
+  min-width: 100%;
+}
+
+.root:resizable :global([data-hook="table-resize-handle"]) {
+  right: -4px !important;
+  z-index: 1;
+}

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "CollectionTableWSRTable3488119013";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"CollectionTableWSRTable3488119013__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -18,6 +18,10 @@ import { TableState, ToolbarCollectionState } from '../../state';
 import { ToolbarCollectionBaseProps } from '../ToolbarCollection';
 import { CollectionTableContentBaseProps } from './CollectionTableContent';
 import { classes, st } from '../common.st.css.js';
+import {
+  classes as wsrTableClasses,
+  st as wsrTableSt,
+} from './CollectionTableWSRTable.st.css.js';
 import { CollectionToolbars } from '../CollectionToolbars/CollectionToolbars';
 import { BorderOnlyBox } from '../BorderOnlyBox';
 import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
@@ -128,6 +132,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
     onSelectionChanged,
     moreActions,
     visualization,
+    resizable,
   } = props;
 
   const isMobile = useIsMobile();
@@ -215,7 +220,11 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
   return (
     <div
       data-hook="collection-table"
-      className={st(classes.fullHeight, classes.column)}
+      className={wsrTableSt(
+        wsrTableClasses.root,
+        { resizable: !!resizable },
+        st(classes.fullHeight, classes.column),
+      )}
     >
       <Table
         {...props}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2434720965";
+var _namespace_ = "CollectionToolbar1960205501";
 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":"CollectionToolbar2434720965__root","left":"CollectionToolbar2434720965__left","right":"CollectionToolbar2434720965__right","fullWidth":"CollectionToolbar2434720965__fullWidth"};
+export var classes = {"root":"CollectionToolbar1960205501__root","left":"CollectionToolbar1960205501__left","right":"CollectionToolbar1960205501__right","fullWidth":"CollectionToolbar1960205501__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -43,7 +43,7 @@ export const CollectionToolbarUniDriver = (
 
   const getSwitchButton = () =>
     TableGridSwitchButtonUniDriver(
-      base.$('[data-hook="table-grid-switch-toggle-button"]'),
+      base.$('[data-hook="layout-switch-toggle-button"]'),
       body,
     );
 

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3862038183";
+var _namespace_ = "SearchOrCustomFilter2207618735";
 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":"SearchOrCustomFilter3862038183__root","search":"SearchOrCustomFilter3862038183__search","searchMobile":"SearchOrCustomFilter3862038183__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2207618735__root","search":"SearchOrCustomFilter2207618735__search","searchMobile":"SearchOrCustomFilter2207618735__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -2,10 +2,9 @@ import { Box, InfoIcon, TableListItem, Text } from '@wix/design-system';
 import React, { CSSProperties, useMemo } from 'react';
 import { Column } from '../../model';
 import { observer } from 'mobx-react-lite';
-import { FiltersMap } from '@wix/bex-core';
 import { CustomColumnsState } from '../../state';
+import { FiltersMap } from '@wix/bex-core';
 import { GridCardItemProps } from '../DragAndDrop';
-import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 import { FieldIndications } from './FieldIndications';
@@ -35,9 +34,9 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
   } = props;
   const { select } = state;
 
-  const { collectionDataExtension } = useToolbarCollectionContext();
+  const { collectionDataExtension } = state;
   const { translate: t } = useWixPatternsContainer();
-  const showFieldTypeIcons = state.table.showFieldTypeIcons;
+  const showFieldTypeIcons = state.showFieldTypeIcons;
 
   const { infoTooltipProps } = column;
   const prefixIcon = showFieldTypeIcons

package/src/components/CustomColumnsPanel/ColumnsList.tsx

@@ -20,14 +20,17 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
     if (dragAndDrop == null) {
       return;
     }
-    const {
-      table: { sidePanel },
-    } = state;
+
+    const { sidePanelTransition } = state;
 
     const disposers = [
-      addEventListener(sidePanel.transition.events, 'entered', () => {
-        dragAndDrop.listRect._syncThrottled();
-      }),
+      ...(sidePanelTransition
+        ? [
+            addEventListener(sidePanelTransition.events, 'entered', () => {
+              dragAndDrop.listRect._syncThrottled();
+            }),
+          ]
+        : []),
       dragAndDrop.listRect.init(),
     ];
 

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -1,14 +1,13 @@
 import { Box, SidePanel } from '@wix/design-system';
 import React, { useEffect } from 'react';
 import { CustomColumnsState } from '../../state';
-import { FiltersMap, withoutDefaults } from '@wix/bex-core';
+import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { ColumnsList } from './ColumnsList';
 import { CustomColumnsSearch } from './CustomColumnsSearch';
 import { CustomColumnsNoResults } from './CustomColumnsNoResults';
 import { useRafRender } from '../../hooks/useRafRender';
-import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { ScrollableContent } from '../ScrollableContent';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
@@ -22,8 +21,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const entered = useRafRender();
   const { translate: t } = useWixPatternsContainer();
 
-  const { table, dragAndDrop } = state;
-  const { sidePanel, collectionDataExtension } = table;
+  const { dragAndDrop, collectionDataExtension } = state;
 
   useEffect(() => state.init(), []);
 
@@ -43,16 +41,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
     <PatternsSidePanel
       dataHook="custom-columns-panel"
       width="100%"
-      onClose={() => {
-        table.reportBi(
-          withoutDefaults(cairoFiltersPanelUsed)({
-            isOpened: false,
-            feature: 'Custom Columns',
-            origin: 'X Button',
-          }),
-        );
-        sidePanel.close();
-      }}
+      onClose={() => state.onClose()}
     >
       <SidePanel.Header
         title={t('cairo.table.custom-columns.title')}
@@ -86,7 +75,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
                 ?.CustomColumnsArchivedItemsCTAButton && (
                 <collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton
                   dataExtension={collectionDataExtension.dataExtension}
-                  onCloseSidePanel={() => sidePanel.close()}
+                  onCloseSidePanel={() => state.onClose()}
                   dataHook="custom-columns"
                 />
               )}

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

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

package/src/components/EditableTable/AddItemRow.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { AddItem } from '@wix/design-system';
+
+export interface AddItemRowProps {
+  onAdd: () => void;
+}
+
+export function AddItemRow({ onAdd }: AddItemRowProps) {
+  return (
+    <div
+      data-hook="add-row-button"
+      style={
+        {
+          borderTop: '1px solid var(--wsr-color-D60)',
+          height: 36,
+          boxSizing: 'border-box',
+          padding: 4,
+          '--wds-add-item-fill-hover': 'var(--wsr-color-D70)',
+          '--wds-add-item-fill': 'transparent',
+        } as React.CSSProperties
+      }
+    >
+      <AddItem
+        skin="plain"
+        size="tiny"
+        alignItems="left"
+        removePadding
+        borderRadius="6px"
+        onClick={onAdd}
+      >
+        Add Item
+      </AddItem>
+    </div>
+  );
+}

package/src/components/EditableTable/EditableCell.st.css

@@ -10,9 +10,9 @@
 }
 
 .root {
-  -st-states: editing, focused, selected, invalid, typeToEdit, selectionTop, selectionBottom,
-    selectionLeft, selectionRight, copiedTop, copiedBottom, copiedLeft,
-    copiedRight;
+  -st-states: editing, focused, selected, invalid, typeToEdit, showEditWhenFocused,
+    selectionTop, selectionBottom, selectionLeft, selectionRight,
+    copiedTop, copiedBottom, copiedLeft, copiedRight;
   display: flex;
   align-items: center;
   padding: 0;
@@ -45,10 +45,24 @@
   z-index: 3;
   user-select: auto;
   overflow: visible;
+}
+
+/* showEditWhenFocused cells (e.g. image) stay within their row bounds when
+   editing — the EditComponent is always visible so no height expansion is needed. */
+.root:editing:not(:showEditWhenFocused) {
   bottom: auto;
   min-height: 100%;
 }
 
+/* showEditWhenFocused cells: when a button inside has focus (inner focus),
+   show the editing ring and allow button focus rings to render unclipped.
+   isEditing is false here, so we use data-inner-focused set by the EditComponent. */
+.root:has([data-inner-focused]) {
+  overflow: visible;
+  z-index: 3;
+  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
+}
+
 .root:selectionTop:not(:editing) { border-top: 2px solid var(--wsr-color-B10); }
 .root:selectionBottom:not(:editing) { border-bottom: 2px solid var(--wsr-color-B10); }
 .root:selectionLeft:not(:editing) { border-left: 2px solid var(--wsr-color-B10); }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1967585030";
+var _namespace_ = "EditableCell43257584";
 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":"EditableCell1967585030__root","validationIndicator":"EditableCell1967585030__validationIndicator"};
+export var classes = {"root":"EditableCell43257584__root","validationIndicator":"EditableCell43257584__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -76,6 +76,15 @@ function _EditableCell<T, F extends FiltersMap>({
     [cellInteraction],
   );
 
+  const handleStartEdit = useCallback(
+    () => {
+      if (!cellInteraction.isEditing) {
+        cellInteraction.startEdit(rowKey, columnId);
+      }
+    },
+    [cellInteraction, rowKey, columnId],
+  );
+
   const cellKeyboard = useCellFocusAndEditing({
     state,
     rowKey,
@@ -92,7 +101,11 @@ function _EditableCell<T, F extends FiltersMap>({
   const showValidationIndicator = !cellValidation.valid && !isEditing;
 
   const showEdit =
-    (isEditing || (isFocused && isEditable && !!resolved.toggleValue)) &&
+    (isEditing ||
+      (isFocused &&
+        isEditable &&
+        !state.updateItemDisabled &&
+        (!!resolved.toggleValue || !!resolved.showEditWhenFocused))) &&
     EditComponent;
 
   return (
@@ -104,6 +117,7 @@ function _EditableCell<T, F extends FiltersMap>({
         selected: isSelected,
         invalid: !cellValidation.valid,
         typeToEdit: !!resolved.onTypeToEdit,
+        showEditWhenFocused: !!resolved.showEditWhenFocused,
         selectionTop: selectionBorder.top,
         selectionBottom: selectionBorder.bottom,
         selectionLeft: selectionBorder.left,
@@ -134,17 +148,26 @@ function _EditableCell<T, F extends FiltersMap>({
       )}
       {showEdit ? (
         <EditComponent
-          value={cellInteraction.editingValue !== undefined ? cellInteraction.editingValue : value}
+          value={
+            cellInteraction.editingValue !== undefined
+              ? cellInteraction.editingValue
+              : value
+          }
           onChange={handleChange}
           onCommit={handleCommit}
           onCancel={handleCancel}
+          onStartEdit={handleStartEdit}
           inputRef={editInputRef}
           typeConfig={column.typeConfig}
           editTrigger={cellInteraction.editTrigger}
           validation={column.validation}
         />
       ) : (
-        <ViewComponent value={value} typeConfig={column.typeConfig} validation={column.validation} />
+        <ViewComponent
+          value={value}
+          typeConfig={column.typeConfig}
+          validation={column.validation}
+        />
       )}
     </div>
   );

package/src/components/EditableTable/EditableTable.tsx

@@ -16,13 +16,18 @@ import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { useClipboardHandler } from './useClipboardHandler';
 import { useClearFocusOnBlur } from './useClearFocusOnBlur';
 import { useMouseSweepSelection } from './useMouseSweepSelection';
+import { AddItemRow } from './AddItemRow';
+import { useAddRow } from './useAddRow';
 import type { TableColumn } from '../../model';
 import { useBuiltInHeaderActions } from './useBuiltInHeaderActions';
 
 export interface EditableTableProps<
   T,
   F extends FiltersMap = OptionalFiltersMap,
-> extends Omit<TableVirtualProps<T, F>, 'columns' | 'state' | 'onRowClick'> {
+> extends Omit<
+    TableVirtualProps<T, F>,
+    'columns' | 'state' | 'onRowClick' | 'forceResize' | 'horizontalScroll'
+  > {
   /** EditableTableState instance, created via useEditableTableCollection */
   state: EditableTableState<T, F>;
 
@@ -63,6 +68,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
     hideHeaderActions,
   );
 
+  const { showAddItemRow, handleAddItem } = useAddRow(state);
+
   const tableColumns = useMemo(
     () =>
       editableColumns.map((col) => ({
@@ -96,7 +103,11 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           {...tableBaseProps}
           state={state.tableState}
           columns={tableColumns}
-        />
+          forceResize
+          horizontalScroll
+        >
+          {showAddItemRow && <AddItemRow onAdd={handleAddItem} />}
+        </TableVirtual>
       </div>
       <EditableTableContextMenu
         state={state}

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

@@ -1,5 +1,8 @@
 import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
-import { MessageModalLayoutUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import {
+  AddItemUniDriver,
+  MessageModalLayoutUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
 import { EditableCellUniDriver } from './EditableCell.uni.driver';
 import { EditableTableContextMenuUniDriver } from './EditableTableContextMenu.uni.driver';
@@ -81,6 +84,10 @@ export function EditableTableUniDriver(base: UniDriver, body: UniDriver) {
     /** Get the context menu driver (portaled to body) */
     getContextMenu: () => EditableTableContextMenuUniDriver(base, body),
 
+    /** Get the add item row driver */
+    getAddItemRow: () =>
+      AddItemUniDriver(base.$('[data-hook="add-row-button"]'), body),
+
     /** Get the delete confirmation modal driver */
     getConfirmActionModal: () =>
       MessageModalLayoutUniDriver(

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover835706258";
+var _namespace_ = "HeaderActionsPopover1524078716";
 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":"HeaderActionsPopover835706258__root"};
+export var classes = {"root":"HeaderActionsPopover1524078716__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_ = "CellViewLayout3612497033";
+var _namespace_ = "CellViewLayout1672861084";
 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":"CellViewLayout3612497033__root"};
+export var classes = {"root":"CellViewLayout1672861084__root"};
 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_ = "Edit550253640";
+var _namespace_ = "Edit3584242642";
 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":"Edit550253640__root","booleanEdit":"Edit550253640__booleanEdit"};
+export var classes = {"root":"Edit3584242642__root","booleanEdit":"Edit3584242642__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_ = "View4179032775";
+var _namespace_ = "View2229488320";
 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":"View4179032775__root","booleanView":"View4179032775__booleanView"};
+export var classes = {"root":"View2229488320__root","booleanView":"View2229488320__booleanView"};
 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_ = "Edit1249065124";
+var _namespace_ = "Edit3931809708";
 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":"Edit1249065124__root","dateInput":"Edit1249065124__dateInput"};
+export var classes = {"root":"Edit3931809708__root","dateInput":"Edit3931809708__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};