@wix/patterns 1.370.0 → 1.372.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar979818899";
+var _namespace_ = "CollectionToolbar3211433462";
 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":"CollectionToolbar979818899__root","left":"CollectionToolbar979818899__left","right":"CollectionToolbar979818899__right","fullWidth":"CollectionToolbar979818899__fullWidth"};
+export var classes = {"root":"CollectionToolbar3211433462__root","left":"CollectionToolbar3211433462__left","right":"CollectionToolbar3211433462__right","fullWidth":"CollectionToolbar3211433462__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_ = "SearchOrCustomFilter3211790940";
+var _namespace_ = "SearchOrCustomFilter1641104256";
 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":"SearchOrCustomFilter3211790940__root","search":"SearchOrCustomFilter3211790940__search","searchMobile":"SearchOrCustomFilter3211790940__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1641104256__root","search":"SearchOrCustomFilter1641104256__search","searchMobile":"SearchOrCustomFilter1641104256__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_ = "AutoCompleteReadonly3014010660";
+var _namespace_ = "AutoCompleteReadonly831457872";
 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":"AutoCompleteReadonly3014010660__root"};
+export var classes = {"root":"AutoCompleteReadonly831457872__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_ = "ViewsDropdown2267900924";
+var _namespace_ = "ViewsDropdown1553220924";
 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":"ViewsDropdown2267900924__root"};
+export var classes = {"root":"ViewsDropdown1553220924__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -74,13 +74,6 @@ function _ViewsDropdown<T, F extends FiltersMap>({
           ) : undefined,
       });
 
-      if (isRedesign && isSelected) {
-        return {
-          ...option,
-          onDrillIn: () => manageViewRef.current?.focusTrigger(),
-        };
-      }
-
       return option;
     };
 
@@ -147,6 +140,15 @@ function _ViewsDropdown<T, F extends FiltersMap>({
           dropdownWidth={isRedesign ? '264px' : dropdownWidth}
           popoverProps={{ placement: 'bottom-start' }}
           {...dropdownProps}
+          onDrillIn={
+            isRedesign
+              ? (option) => {
+                  if (option.id === currentView?.id) {
+                    manageViewRef.current?.focusTrigger();
+                  }
+                }
+              : undefined
+          }
           onInputClicked={(e) => {
             state.viewsStateBIReporter.clickOnViewDropdownBI();
             dropdownProps?.onInputClicked?.(e);

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -8,6 +8,7 @@ import { GridCardItemProps } from '../DragAndDrop';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
+import { FieldIndications } from './FieldIndications';
 
 export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   extends GridCardItemProps {
@@ -39,7 +40,9 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
   const showFieldTypeIcons = state.table.showFieldTypeIcons;
 
   const { infoTooltipProps } = column;
-  const prefixIcon = showFieldTypeIcons ? getFieldTypeIcon({ fieldType: column.fieldType }) : null;
+  const prefixIcon = showFieldTypeIcons
+    ? getFieldTypeIcon({ fieldType: column.fieldType })
+    : null;
 
   const checkboxDisabled = !column.hideable;
   const hasSearchValue = state.searchValue.trim().length > 0;
@@ -47,7 +50,8 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
   const checked = select.isChecked(column.id);
   const infoContent =
     infoTooltipProps?.panelContent || infoTooltipProps?.content;
-
+  const isRequired =
+    column.validation?.some((r) => r.type === 'required') ?? false;
   const style = useMemo<CSSProperties>(
     () => ({
       display: 'flex',
@@ -66,6 +70,13 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
       />
     );
 
+  const hasIndications =
+    column.isPii ||
+    column.isPrimary ||
+    column.isSystem ||
+    !!column.dataExtension;
+  const hasRightContent = hasIndications || !!dataExtensionsCTA;
+
   return (
     <div
       {...rest}
@@ -78,6 +89,8 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
         checkbox
         checked={checked}
         verticalPadding="tiny"
+        horizontalPadding="small"
+        dragHandleSize="small"
         checkboxDisabled={checkboxDisabled}
         checkboxTooltipContent={
           checkboxDisabled
@@ -123,10 +136,14 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
               <Box {...(prefixIcon ? { verticalAlign: 'middle' } : {})}>
                 <div
                   style={{
-                    ...(prefixIcon ? { display: 'flex', alignItems: 'center' } : {}),
-                    padding: '0 6px',
+                    ...(prefixIcon
+                      ? { display: 'flex', alignItems: 'center' }
+                      : {}),
+                    padding: '0',
                     cursor: checkboxDisabled ? undefined : 'pointer',
-                    wordBreak: 'break-word',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
                   }}
                   onClick={() => {
                     if (checkboxDisabled) {
@@ -136,13 +153,23 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                   }}
                 >
                   {prefixIcon && (
-                    <Box align="center" verticalAlign="middle" marginRight="SP1" flexShrink={0}>
+                    <Box
+                      align="center"
+                      verticalAlign="middle"
+                      marginRight="SP1"
+                      flexShrink={0}
+                    >
                       {prefixIcon}
                     </Box>
                   )}
-                  <Text size="small" dataHook="tableListItem-label">
+                  <Text size="small" weight="normal" dataHook="tableListItem-label">
                     {column.name || column.title || column.id}
                   </Text>
+                  {isRequired && (
+                    <Text size="tiny" skin="error" weight="bold">
+                      &nbsp;*
+                    </Text>
+                  )}
                 </div>
 
                 <div
@@ -162,10 +189,17 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
             ),
           },
 
-          ...(dataExtensionsCTA
+          ...(hasRightContent
             ? [
                 {
-                  value: dataExtensionsCTA,
+                  value: (
+                    <Box gap="SP1" verticalAlign="middle">
+                      <FieldIndications
+                        column={column}
+                      />
+                      {dataExtensionsCTA}
+                    </Box>
+                  ),
                   align: 'right' as const,
                 },
               ]

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -88,7 +88,6 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
                   dataExtension={collectionDataExtension.dataExtension}
                   onCloseSidePanel={() => sidePanel.close()}
                   dataHook="custom-columns"
-                  actionContainerProps={{ paddingInlineEnd: '12px' }}
                 />
               )}
             <ColumnsList state={state} />

package/src/components/CustomColumnsPanel/FieldIndications.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Badge, Box, Tooltip } from '@wix/design-system';
+import {
+  LockLockedFilledSmall,
+  FlagFilledSmall,
+} from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+import { Column } from '../../model';
+
+export interface FieldIndicationsProps {
+  column: Column;
+}
+
+function _FieldIndications({ column }: FieldIndicationsProps) {
+  const { translate: t } = useWixPatternsContainer();
+  const { isPii, isPrimary,isSystem, dataExtension } = column;
+  const isDataExtension = !!dataExtension;
+  const isNonEditableAppField =
+    !isSystem && isDataExtension && !dataExtension?.editable;
+  const isEditableAppField =
+    !isSystem && isDataExtension && dataExtension?.editable;
+
+  const hasAny = isPii || isPrimary || isSystem || isDataExtension;
+  if (!hasAny) {
+    return null;
+  }
+
+  return (
+    <Box gap="SP1" verticalAlign="middle" inline>
+      {isPii && (
+        <Tooltip
+          key="pii"
+          content={t('cairo.table.custom-columns.indication.pii.tooltip')}
+          appendTo="window"
+        >
+          <Box align="center" verticalAlign="middle" color="G10">
+            <LockLockedFilledSmall />
+          </Box>
+        </Tooltip>
+      )}
+      {isPrimary && (
+        <Tooltip
+          key="primary"
+          content={t('cairo.table.custom-columns.indication.primary.tooltip')}
+          appendTo="window"
+        >
+          <Box align="center" verticalAlign="middle">
+            <FlagFilledSmall />
+          </Box>
+        </Tooltip>
+      )}
+      {isSystem && (
+        <Tooltip
+          key="system"
+          content={t('cairo.table.custom-columns.indication.system.tooltip')}
+          appendTo="window"
+        >
+          <Badge
+            size="tiny"
+            skin="neutralLight"
+            type="outlined"
+            uppercase={false}
+          >
+            {t('cairo.table.custom-columns.indication.system')}
+          </Badge>
+        </Tooltip>
+      )}
+      {isNonEditableAppField && (
+        <Tooltip
+          key="app"
+          content={t('cairo.table.custom-columns.indication.app.tooltip')}
+          appendTo="window"
+        >
+          <Badge
+            size="tiny"
+            skin="neutralLight"
+            type="outlined"
+            uppercase={false}
+          >
+            {t('cairo.table.custom-columns.indication.app')}
+          </Badge>
+        </Tooltip>
+      )}
+      {isEditableAppField && (
+        <Tooltip
+          key="user"
+          content={t('cairo.table.custom-columns.indication.user.tooltip')}
+          appendTo="window"
+        >
+          <Badge
+            size="tiny"
+            skin="neutralLight"
+            type="outlined"
+            uppercase={false}
+          >
+            {t('cairo.table.custom-columns.indication.user')}
+          </Badge>
+        </Tooltip>
+      )}
+    </Box>
+  );
+}
+
+export const FieldIndications = observer(_FieldIndications);

package/src/components/CustomFieldsPanel/CustomColumnsEditCustomFieldCTAButton.tsx

@@ -23,7 +23,6 @@ export function CustomColumnsEditCustomFieldCTAButton({
         origin="Custom columns panel"
         location="Customize columns action cell"
       />
-      <Box paddingInlineEnd="12px" />
     </Box>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle2165418528";
+var _namespace_ = "DragHandle4278266936";
 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":"DragHandle2165418528__root"};
+export var classes = {"root":"DragHandle4278266936__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_ = "EditableCell771327262";
+var _namespace_ = "EditableCell3007846860";
 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":"EditableCell771327262__root","validationIndicator":"EditableCell771327262__validationIndicator"};
+export var classes = {"root":"EditableCell3007846860__root","validationIndicator":"EditableCell3007846860__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -51,9 +51,17 @@ function _EditableCell<T, F extends FiltersMap>({
     [state, rowKey, columnId],
   );
 
+  // Auto-start edit if onChange fires before explicit startEdit (e.g., onOptionMarked
+  // in select). startEdit resets editingValue, so it must come before setEditingValue.
+  // For production cell types, consider the per-callback withEnterEdit pattern from cms-web.
   const handleChange = useCallback(
-    (newValue: any) => cellInteraction.setEditingValue(newValue),
-    [cellInteraction],
+    (newValue: any) => {
+      if (!cellInteraction.isEditing) {
+        cellInteraction.startEdit(rowKey, columnId, 'enter');
+      }
+      cellInteraction.setEditingValue(newValue);
+    },
+    [cellInteraction, rowKey, columnId],
   );
 
   const handleCommit = useCallback(

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

@@ -0,0 +1,14 @@
+.root {
+  width: 100%;
+  height: 100%;
+  padding: 9px 12px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  overflow: clip;
+}
+
+.root > * {
+  flex: 1;
+  min-width: 0;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "CellViewLayout3107312690";
+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":"CellViewLayout3107312690__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2088892532";
+var _namespace_ = "Edit166605484";
 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":"Edit2088892532__root","booleanEdit":"Edit2088892532__booleanEdit"};
+export var classes = {"root":"Edit166605484__root","booleanEdit":"Edit166605484__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Checkbox } from '@wix/design-system';
+import { CellCheckbox } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { classes } from './Edit.st.css.js';
 
@@ -9,10 +9,13 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
   onCommit,
   onCancel,
 }) => {
-  const handleChange = useCallback(() => {
-    onChange(!value);
-    onCommit();
-  }, [value, onChange, onCommit]);
+  const handleChange = useCallback(
+    (checked: boolean) => {
+      onChange(checked);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -30,7 +33,7 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
 
   return (
     <div onKeyDown={handleKeyDown} className={classes.booleanEdit}>
-      <Checkbox
+      <CellCheckbox
         dataHook="boolean-checkbox"
         checked={!!value}
         onChange={handleChange}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2530445919";
+var _namespace_ = "View3413904664";
 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":"View2530445919__root","booleanView":"View2530445919__booleanView"};
+export var classes = {"root":"View3413904664__root","booleanView":"View3413904664__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,15 +1,12 @@
 import React from 'react';
-import { Box } from '@wix/design-system';
-import { CheckboxChecked } from '@wix/wix-ui-icons-common/system';
+import { BooleanView as FieldsBooleanView } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
 import { classes } from './View.st.css.js';
 
 export const BooleanView: React.FC<CellViewProps<boolean>> = ({ value }) => (
-  <div className={classes.booleanView}>
-    {value && (
-      <Box color="G10" margin="0px 12px 0px 6px" dataHook="boolean-check-icon">
-        <CheckboxChecked />
-      </Box>
-    )}
-  </div>
+  <FieldsBooleanView
+    value={value}
+    dataHook="boolean-check-icon"
+    className={classes.booleanView}
+  />
 );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3674829988";
+var _namespace_ = "Edit4270586868";
 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":"Edit3674829988__root","dateInput":"Edit3674829988__dateInput"};
+export var classes = {"root":"Edit4270586868__root","dateInput":"Edit4270586868__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,6 +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 { classes } from './Edit.st.css.js';
 
 function isValidDate(value: Date | string | null | undefined): boolean {
@@ -29,6 +30,14 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
     }
   }, [editTrigger]);
 
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  // WDS DatePicker types declare closeCalendar but only _closeCalendar exists at runtime.
+  const closeCalendar = useCallback(
+    () => (datePickerRef.current as any)?._closeCalendar?.(),
+    [],
+  );
+  useCloseOnAncestorScroll(wrapperRef, closeCalendar, !!editTrigger);
+
   const dateValue = value
     ? value instanceof Date
       ? value
@@ -55,6 +64,7 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
 
   return (
     <div
+      ref={wrapperRef}
       onKeyDown={handleKeyDown}
       style={{
         width: '100%',

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

@@ -1,4 +1 @@
-.textView {
-  width: 100%;
-  padding: 9px 12px;
-}
+/* Padding provided by CellViewLayout */

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2865880142";
+var _namespace_ = "View4111116935";
 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":"View2865880142__root","textView":"View2865880142__textView"};
+export var classes = {"root":"View4111116935__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from '@wix/design-system';
 import type { CellViewProps } from '../../types';
-import { classes } from './View.st.css.js';
+import { CellViewLayout } from '../CellViewLayout';
 
 const dateFormatter = new Intl.DateTimeFormat(undefined, {
   day: '2-digit',
@@ -23,7 +23,9 @@ function formatDate(value: Date | string | null | undefined): string {
 export const DateView: React.FC<CellViewProps<Date | string | null>> = ({
   value,
 }) => (
-  <Text size="small" ellipsis className={classes.textView}>
-    {formatDate(value)}
-  </Text>
+  <CellViewLayout>
+    <Text size="small" ellipsis>
+      {formatDate(value)}
+    </Text>
+  </CellViewLayout>
 );