@wix/patterns 1.387.0 → 1.389.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2177108671";
+var _namespace_ = "CollectionToolbar3575638398";
 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":"CollectionToolbar2177108671__root","left":"CollectionToolbar2177108671__left","right":"CollectionToolbar2177108671__right","fullWidth":"CollectionToolbar2177108671__fullWidth"};
+export var classes = {"root":"CollectionToolbar3575638398__root","left":"CollectionToolbar3575638398__left","right":"CollectionToolbar3575638398__right","fullWidth":"CollectionToolbar3575638398__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1260543788";
+var _namespace_ = "SearchOrCustomFilter131580175";
 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":"SearchOrCustomFilter1260543788__root","search":"SearchOrCustomFilter1260543788__search","searchMobile":"SearchOrCustomFilter1260543788__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter131580175__root","search":"SearchOrCustomFilter131580175__search","searchMobile":"SearchOrCustomFilter131580175__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_ = "AutoCompleteReadonly14725273";
+var _namespace_ = "AutoCompleteReadonly2032414307";
 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":"AutoCompleteReadonly14725273__root"};
+export var classes = {"root":"AutoCompleteReadonly2032414307__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_ = "ViewsDropdown2478443290";
+var _namespace_ = "ViewsDropdown2270594407";
 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":"ViewsDropdown2478443290__root"};
+export var classes = {"root":"ViewsDropdown2270594407__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -14,6 +14,7 @@ export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   column: Column;
   state: CustomColumnsPanelStateBase<T, F>;
   showDivider?: boolean;
+  fieldActions?: React.ReactNode;
 }
 
 function _ColumnListTableListItem<T, F extends FiltersMap>(
@@ -23,6 +24,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
     column,
     state,
     showDivider,
+    fieldActions,
     domRef,
     dragging,
     dragHandleProps,
@@ -74,7 +76,8 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
     column.isPrimary ||
     column.isSystem ||
     !!column.dataExtension;
-  const hasRightContent = hasIndications || !!dataExtensionsCTA;
+  const hasRightContent =
+    hasIndications || !!dataExtensionsCTA || !!fieldActions;
 
   return (
     <div
@@ -204,6 +207,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     <Box gap="SP1" verticalAlign="middle">
                       <FieldIndications column={column} />
                       {dataExtensionsCTA}
+                      {fieldActions}
                     </Box>
                   ),
                   align: 'right' as const,

package/src/components/CustomColumnsPanel/ColumnsList.tsx

@@ -1,7 +1,7 @@
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, type ReactNode } from 'react';
 import { Column } from '../../model';
 import { Box } from '@wix/design-system';
 import { addEventListener } from '@wix/bex-core/util';
@@ -9,10 +9,11 @@ import { ColumnListTableListItem } from './ColumnListTableListItem';
 
 export interface ColumnsListProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
+  fieldActions?: Record<string, ReactNode>;
 }
 
 function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
-  const { state } = props;
+  const { state, fieldActions } = props;
   const { columnsCollection, dragAndDrop } = state;
   const hasSearchValue = state.searchValue.trim().length > 0;
 
@@ -48,6 +49,7 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
           state={state}
           column={column}
           showDivider={index < length - 1}
+          fieldActions={fieldActions?.[column.id]}
         />
       );
 

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -10,7 +10,8 @@ import { CustomColumnsNoResults } from './CustomColumnsNoResults';
 import { useRafRender } from '../../hooks/useRafRender';
 import { ScrollableContent } from '../ScrollableContent';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
-import { useSchemaContext } from '../../providers';
+import { useSchemaContext } from '../../providers/SchemaContext';
+import { useSidePanelFieldActions } from './useSidePanelFieldActions';
 
 export interface CustomColumnsPanelProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -26,6 +27,10 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const schemaCtx = useSchemaContext();
   const isSchema = !!schemaCtx?.schema;
   const isEditable = !!collectionDataExtension || isSchema;
+  const fieldActions = useSidePanelFieldActions(
+    isEditable ? state.columnsCollection.result.items : [],
+    schemaCtx?.schema?.fieldActions,
+  );
 
   useEffect(() => state.init(), []);
 
@@ -87,7 +92,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
                   dataHook="custom-columns"
                 />
               )}
-            <ColumnsList state={state} />
+            <ColumnsList state={state} fieldActions={fieldActions} />
           </>
         )}
       </ScrollableContent>

package/src/components/CustomColumnsPanel/useSidePanelFieldActions.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo, type ReactNode } from 'react';
+import type { Column } from '../../model';
+import type { FieldActions } from '../../types/SchemaConfig';
+import {
+  buildFieldActionGroups,
+  HeaderActionsPopover,
+  type FieldActionColumn,
+  type FieldActionHandlers,
+  type FieldActionPermissions,
+} from '../FieldActions';
+
+const SIDE_PANEL_ACTION_GROUPS: Parameters<
+  typeof buildFieldActionGroups
+>[0]['groups'] = [
+  ['editField'],
+  ['makePrimary', 'duplicateField', 'duplicateFieldWithContent'],
+  ['delete'],
+];
+
+function toFieldActionColumn(col: Column): FieldActionColumn & { id: string } {
+  const isText =
+    col.fieldType === 'SHORT_TEXT' || col.fieldType === 'LONG_TEXT';
+  return {
+    id: col.id,
+    isPrimary: col.isPrimary,
+    isSystem: col.isSystem,
+    cellType: isText ? 'text' : col.fieldType,
+  };
+}
+
+export function useSidePanelFieldActions(
+  columns: Column[],
+  fieldActions?: FieldActions,
+  permissions?: FieldActionPermissions,
+): Record<string, ReactNode> {
+  return useMemo(() => {
+    const handlers: FieldActionHandlers = {
+      editField: fieldActions?.editField
+        ? (id) => fieldActions.editField!(id, {})
+        : undefined,
+      makePrimary: (id) => fieldActions?.makePrimary?.(id),
+      duplicateField: fieldActions?.duplicateField,
+      duplicateFieldWithContent: fieldActions?.duplicateField,
+      delete: fieldActions?.deleteField,
+    };
+
+    const result: Record<string, ReactNode> = {};
+
+    for (const col of columns) {
+      const groups = buildFieldActionGroups({
+        column: toFieldActionColumn(col),
+        permissions,
+        handlers,
+        groups: SIDE_PANEL_ACTION_GROUPS,
+      });
+
+      if (groups.length > 0) {
+        result[col.id] = (
+          <HeaderActionsPopover
+            actions={groups}
+            dataHook={`side-panel-field-actions-${col.id}`}
+          />
+        );
+      }
+    }
+
+    return result;
+  }, [columns, fieldActions, permissions]);
+}

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell3900691882";
+var _namespace_ = "EditableCell803715283";
 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":"EditableCell3900691882__root","validationIndicator":"EditableCell3900691882__validationIndicator"};
+export var classes = {"root":"EditableCell803715283__root","validationIndicator":"EditableCell803715283__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -76,14 +76,11 @@ function _EditableCell<T, F extends FiltersMap>({
     [cellInteraction],
   );
 
-  const handleStartEdit = useCallback(
-    () => {
-      if (!cellInteraction.isEditing) {
-        cellInteraction.startEdit(rowKey, columnId);
-      }
-    },
-    [cellInteraction, rowKey, columnId],
-  );
+  const handleStartEdit = useCallback(() => {
+    if (!cellInteraction.isEditing) {
+      cellInteraction.startEdit(rowKey, columnId);
+    }
+  }, [cellInteraction, rowKey, columnId]);
 
   const cellKeyboard = useCellFocusAndEditing({
     state,

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

@@ -41,5 +41,15 @@ export function EditableColumnHeaderUniDriver(
     /** Click a menu item by index */
     clickMenuItem: async (index: number) =>
       (await getPopoverMenu()).clickAtChild(index),
+
+    /** Whether the menu item at the given index is disabled */
+    isMenuItemDisabled: async (index: number) => {
+      const popover = await getPopoverMenu();
+      const contentElement = await popover.getContentElement();
+      const item = contentElement
+        .$$('[data-hook="dropdown-layout-options"] > *')
+        .get(index);
+      return (await item.attr('data-option-disabled')) === 'true';
+    },
   };
 }

package/src/components/EditableTable/EditableTable.tsx

@@ -19,14 +19,20 @@ import { useMouseSweepSelection } from './useMouseSweepSelection';
 import { AddItemRow } from './AddItemRow';
 import { useAddRow } from './useAddRow';
 import type { TableColumn } from '../../model';
-import { useBuiltInHeaderActions } from './useBuiltInHeaderActions';
+import { useHeaderActions } from './useHeaderActions';
 
 export interface EditableTableProps<
   T,
   F extends FiltersMap = OptionalFiltersMap,
 > extends Omit<
     TableVirtualProps<T, F>,
-    'columns' | 'state' | 'onRowClick' | 'forceResize' | 'horizontalScroll'
+    | 'columns'
+    | 'state'
+    | 'onRowClick'
+    | 'forceResize'
+    | 'horizontalScroll'
+    | 'showSelection'
+    | 'showRowNumbers'
   > {
   /** EditableTableState instance, created via useEditableTableCollection */
   state: EditableTableState<T, F>;
@@ -62,7 +68,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
   const { onFocus, onBlur } = useClearFocusOnBlur(state.cellInteraction);
   useMouseSweepSelection(state, containerRef);
 
-  const builtInActions = useBuiltInHeaderActions(
+  const builtInActions = useHeaderActions(
     state,
     editableColumns,
     hideHeaderActions,
@@ -105,6 +111,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           columns={tableColumns}
           forceResize
           horizontalScroll
+          showSelection
+          showRowNumbers
         >
           {showAddItemRow && <AddItemRow onAdd={handleAddItem} />}
         </TableVirtual>

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

@@ -1,12 +1,10 @@
 .root {
-  -st-states: menuOpen;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
 
-/* Reveal when the table header cell is hovered or the menu is open */
-:global(th):hover .root,
-.root:menuOpen,
-.root:focus-within {
-  opacity: 1;
-}
+  :global(th):hover .root,
+  .root[data-menu-open="true"],
+  .root:focus-within {
+    opacity: 1;
+  }

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

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

package/src/components/EditableTable/HeaderActionsPopover.tsx

@@ -1,85 +1,10 @@
-import React, { useState, useCallback, useRef, type ReactNode } from 'react';
-import { PopoverMenu, IconButton } from '@wix/design-system';
-import { MoreSmall } from '@wix/wix-ui-icons-common';
-import type { HeaderAction } from './headerActionTypes';
-import { st, classes } from './HeaderActionsPopover.st.css.js';
-import { useCloseOnAncestorScroll } from './useCloseOnAncestorScroll';
-
-export interface HeaderActionsPopoverProps {
-  actions: HeaderAction[][];
-  dataHook?: string;
-}
-
-export function HeaderActionsPopover({
-  actions,
-  dataHook,
-}: HeaderActionsPopoverProps) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [popoverKey, setPopoverKey] = useState(0);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  const closePopover = useCallback(() => {
-    setMenuOpen(false);
-    setPopoverKey((k) => k + 1);
-  }, []);
-
-  useCloseOnAncestorScroll(wrapperRef, closePopover, menuOpen);
-
-  const menuItems = actions
-    .filter((group) => group.length > 0)
-    .reduce<ReactNode[]>((result, group, index, array) => {
-      const items = group.map((action, i) => (
-        <PopoverMenu.MenuItem
-          key={`${index}-${i}`}
-          text={action.label}
-          onClick={action.onClick}
-          prefixIcon={action.icon}
-          disabled={action.disabled}
-          disabledDescription={action.disabledTooltip}
-          skin={action.skin}
-        />
-      ));
-      const divider =
-        index < array.length - 1
-          ? [<PopoverMenu.Divider key={`divider-${index}`} />]
-          : [];
-      return [...result, ...items, ...divider];
-    }, []);
-
-  if (menuItems.length === 0) {
-    return null;
-  }
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div
-      ref={wrapperRef}
-      className={st(classes.root, { menuOpen })}
-      data-hook={dataHook}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <PopoverMenu
-        key={popoverKey}
-        dataHook={dataHook ? `${dataHook}-menu` : undefined}
-        textSize="small"
-        triggerElement={
-          <IconButton
-            size="tiny"
-            skin="dark"
-            priority="tertiary"
-            ariaLabel="Column actions"
-            dataHook={dataHook ? `${dataHook}-more-button` : undefined}
-          >
-            <MoreSmall />
-          </IconButton>
-        }
-        appendTo="window"
-        placement="bottom-end"
-        onShow={() => setMenuOpen(true)}
-        onHide={() => setMenuOpen(false)}
-      >
-        {menuItems}
-      </PopoverMenu>
-    </div>
-  );
+import React from 'react';
+import {
+  HeaderActionsPopover as SharedHeaderActionsPopover,
+  type HeaderActionsPopoverProps,
+} from '../FieldActions';
+import { classes } from './HeaderActionsPopover.st.css.js';
+
+export function HeaderActionsPopover(props: HeaderActionsPopoverProps) {
+  return <SharedHeaderActionsPopover {...props} className={classes.root} />;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout3566532917";
+var _namespace_ = "CellViewLayout3312877165";
 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":"CellViewLayout3566532917__root"};
+export var classes = {"root":"CellViewLayout3312877165__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_ = "Edit3615457965";
+var _namespace_ = "Edit2776254426";
 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":"Edit3615457965__root","booleanEdit":"Edit3615457965__booleanEdit"};
+export var classes = {"root":"Edit2776254426__root","booleanEdit":"Edit2776254426__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_ = "View3415268382";
+var _namespace_ = "View4114941033";
 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":"View3415268382__root","booleanView":"View3415268382__booleanView"};
+export var classes = {"root":"View4114941033__root","booleanView":"View4114941033__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_ = "Edit2107511674";
+var _namespace_ = "Edit3429442494";
 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":"Edit2107511674__root","dateInput":"Edit2107511674__dateInput"};
+export var classes = {"root":"Edit3429442494__root","dateInput":"Edit3429442494__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { DatePicker } from '@wix/design-system';
 import type { CellEditProps } from '../../types';
-import { useCloseOnAncestorScroll } from '../../useCloseOnAncestorScroll';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
 import { classes } from './Edit.st.css.js';
 
 function isValidDate(value: Date | string | null | undefined): boolean {
@@ -25,7 +25,11 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
 
   // Auto-open calendar when entering edit mode via type-to-edit
   useEffect(() => {
-    if (editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type') {
+    if (
+      editTrigger &&
+      typeof editTrigger === 'object' &&
+      editTrigger.kind === 'type'
+    ) {
       datePickerRef.current?.openCalendar();
     }
   }, [editTrigger]);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View297002052";
+var _namespace_ = "View1963242972";
 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":"View297002052__root"};
+export var classes = {"root":"View1963242972__root"};
 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_ = "Edit1408306505";
+var _namespace_ = "Edit1006158419";
 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":"Edit1408306505__root","emailInput":"Edit1408306505__emailInput"};
+export var classes = {"root":"Edit1006158419__root","emailInput":"Edit1006158419__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_ = "View3600357910";
+var _namespace_ = "View3299905835";
 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":"View3600357910__root"};
+export var classes = {"root":"View3299905835__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/image/View.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { ImageView as FieldsImageView } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
 
-export const ImageView: React.FC<CellViewProps<string | null>> = ({ value }) => (
-  <FieldsImageView value={value} dataHook="image-view" />
-);
+export const ImageView: React.FC<CellViewProps<string | null>> = ({
+  value,
+}) => <FieldsImageView value={value} dataHook="image-view" />;