@wix/patterns 1.477.0 → 1.479.0

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.tsx

@@ -11,6 +11,8 @@ import {
 } from '@wix/design-system';
 import type { FieldPiiWarning } from '@wix/bex-core';
 import { Trans } from '../Trans';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { classes } from './CustomFieldFormPiiFields.st.css.js';
 
 interface PiiFormFieldsProps {
   containsPii: {
@@ -29,6 +31,8 @@ export function PiiFormFields({
   language,
   piiWarning,
 }: PiiFormFieldsProps) {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const tooltipTextSize = isBmHarmonyTheme ? 'tiny' : 'small';
   const translateKeys = {
     toggleName:
       'cairo.customFields.addCustomField.modal.PII-setting.toggle.name',
@@ -59,20 +63,28 @@ export function PiiFormFields({
               <InfoIcon
                 size="small"
                 content={
-                  <Trans
-                    i18nKey={translateKeys.toggleInfo}
-                    components={{
-                      linkVal: (
-                        <TextButton
-                          as="a"
-                          href={whyIsItImportantLink}
-                          underline="always"
-                          size="small"
-                          target="_blank"
-                        />
-                      ),
-                    }}
-                  />
+                  <Text
+                    className={classes.tooltipText}
+                    size={tooltipTextSize}
+                    weight={isBmHarmonyTheme ? 'normal' : 'thin'}
+                    light
+                  >
+                    <Trans
+                      i18nKey={translateKeys.toggleInfo}
+                      components={{
+                        linkVal: (
+                          <TextButton
+                            as="a"
+                            href={whyIsItImportantLink}
+                            underline="always"
+                            size={tooltipTextSize}
+                            skin="light"
+                            target="_blank"
+                          />
+                        ),
+                      }}
+                    />
+                  </Text>
                 }
               />
             </Box>

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   AutoComplete,
@@ -12,6 +12,8 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
+const MAX_TYPE_DROPDOWN_HEIGHT = 400;
+
 export interface CustomFieldTypeDropdownProps {
   state: CustomFieldModalState;
 }
@@ -22,18 +24,25 @@ export const _CustomFieldTypeDropdown = (
   const {
     state: {
       form: {
-        $: { type, name, containsPii },
+        $: { type, containsPii },
       },
       mode,
       lockedProperties,
       fieldManagement: { fieldModal },
-      generateUniqueKey,
-      setKeyFieldIfNotDirty,
+      applyFieldTypeDefaults,
     },
   } = props;
 
   const { translate: t } = useWixPatternsContainer();
   const isBmHarmonyTheme = useBmHarmonyTheme();
+  const [maxHeight, setMaxHeight] = useState(MAX_TYPE_DROPDOWN_HEIGHT);
+  useEffect(() => {
+    const updateHeight = () =>
+      setMaxHeight(Math.min(MAX_TYPE_DROPDOWN_HEIGHT, window.innerHeight / 2));
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, []);
   const isFieldTypeDisabled =
     mode === 'edit' || lockedProperties.includes('type');
 
@@ -101,6 +110,7 @@ export const _CustomFieldTypeDropdown = (
       disabled={isFieldTypeDisabled}
       value={search ?? selectedType?.label ?? ''}
       selectedId={type.value}
+      maxHeightPixels={maxHeight}
       prefix={
         search === null && selectedType ? (
           <Input.IconAffix>
@@ -132,7 +142,7 @@ export const _CustomFieldTypeDropdown = (
         if (!props.state.typeSupportsPii) {
           containsPii.onChange(false);
         }
-        setKeyFieldIfNotDirty(generateUniqueKey(name.value));
+        applyFieldTypeDefaults();
       }}
       onClose={() => setSearch(null)}
       popoverProps={{ appendTo: 'window', zIndex: 5001 }}

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

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

package/src/components/EditableTable/AddItemRow.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { AddItem } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface AddItemRowProps {
   onAdd: () => void;
+  disabledReason?: ReactNode;
 }
 
-export function AddItemRow({ onAdd }: AddItemRowProps) {
+export function AddItemRow({ onAdd, disabledReason }: AddItemRowProps) {
   const { translate: t } = useWixPatternsContainer();
   return (
     <div
@@ -29,6 +30,8 @@ export function AddItemRow({ onAdd }: AddItemRowProps) {
         removePadding
         borderRadius="6px"
         onClick={onAdd}
+        disabled={!!disabledReason}
+        tooltipContent={disabledReason}
       >
         {t('cairo.editableTable.addItem.CTA')}
       </AddItem>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell63700743";
+var _namespace_ = "EditableCell84838942";
 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":"EditableCell63700743__root","errorMessage":"EditableCell63700743__errorMessage"};
+export var classes = {"root":"EditableCell84838942__root","errorMessage":"EditableCell84838942__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -61,12 +61,18 @@ function _EditableCell<T, F extends FiltersMap>({
   // For production cell types, consider the per-callback withEnterEdit pattern from cms-web.
   const handleChange = useCallback(
     (newValue: any) => {
+      // A checkbox click is a toggle, same as Enter on the cell. Starting an
+      // edit here would report that click as Enter.
+      if (resolved?.toggleValue) {
+        state.cellValue.toggleCell(rowKey, columnId);
+        return;
+      }
       if (!cellInteraction.isEditing) {
         cellInteraction.startEdit(rowKey, columnId, 'enter');
       }
       cellInteraction.setEditingValue(newValue);
     },
-    [cellInteraction, rowKey, columnId],
+    [resolved, state, cellInteraction, rowKey, columnId],
   );
 
   const handleCommit = useCallback(

package/src/components/EditableTable/EditableTable.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { GlobalAudioPlayer } from '@wix/patterns-fields';
 import { PatternsFieldsProvider } from '../../providers/PatternsFieldsProvider';
@@ -6,6 +6,7 @@ import type { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import type { FieldsSourceProvider } from '../fieldsSourceProvider';
 import { TableVirtual, type TableVirtualProps } from '../Table/TableVirtual';
 import {
+  type Cell,
   type EditableColumn,
   EditableTableState,
 } from '../../state/EditableTable';
@@ -97,7 +98,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
     hideHeaderActions,
   );
 
-  const { showAddItemRow, handleAddItem } = useAddRow(state);
+  const { showAddItemRow, addItemDisabledReason, handleAddItem } =
+    useAddRow(state);
 
   const tableColumns = useMemo(
     () =>
@@ -120,7 +122,20 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
     [editableColumns, state, builtInActions, onCellFocus],
   );
 
-  const contextMenu = useEditableTableContextMenu(state.cellInteraction);
+  const reportContextMenuOpenChange = useCallback(
+    (isOpened: boolean, cell: Cell) => {
+      state.bi.menuOpened({
+        menuType: 'Cell Context Menu',
+        isOpened,
+        cell,
+      });
+    },
+    [state],
+  );
+  const contextMenu = useEditableTableContextMenu(
+    state.cellInteraction,
+    reportContextMenuOpenChange,
+  );
 
   const invalidCellKeys = new Set(state.cellValue._pendingCells.keys());
   const hasInvalidRows = invalidCellKeys.size > 0;
@@ -162,7 +177,12 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           showAddFieldButton
           {...(hasInvalidRows ? { rowStatus } : {})}
         >
-          {showAddItemRow && <AddItemRow onAdd={handleAddItem} />}
+          {showAddItemRow && (
+            <AddItemRow
+              onAdd={handleAddItem}
+              disabledReason={addItemDisabledReason}
+            />
+          )}
         </TableVirtual>
       </div>
       <EditableTableContextMenu

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

@@ -106,6 +106,10 @@ export function EditableTableUniDriver(base: UniDriver, body: UniDriver) {
     getAddItemRow: () =>
       AddItemUniDriver(base.$('[data-hook="add-row-button"]'), body),
 
+    isAddItemRowDisabled: async () =>
+      (await base.$('[data-hook="add-row-button"] button').attr('disabled')) !==
+      null,
+
     /** Press a key on the table container (triggers useKeyboardNavigation) */
     pressKey: async (key: string, opts?: Record<string, unknown>) => {
       const el = await base.getNative();

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
@@ -16,7 +16,10 @@ import {
 import type { EditableTableState, Cell } from '../../state/EditableTable';
 import { startEditingNewRow } from './useAddRow';
 
-type ListItemActionBuilderParams = Parameters<typeof listItemActionBuilder>[0];
+type ListItemActionBuilderParams = Omit<
+  Parameters<typeof listItemActionBuilder>[0],
+  'disabledDescription'
+> & { disabledDescription?: ReactNode };
 
 export interface EditableTableContextMenuProps<T, F extends FiltersMap> {
   state: EditableTableState<T, F>;
@@ -33,6 +36,11 @@ const PADDING = 16;
 const OFFSET_X = 4;
 const OFFSET_Y = 4;
 const CONTEXT_MENU_Z_INDEX = 5001;
+const ADD_ROW_OPTION_IDS: (string | number)[] = [
+  'add-above',
+  'add-below',
+  'duplicate',
+];
 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)';
@@ -85,13 +93,12 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     cellInteraction,
     clipboard,
     collection,
-    addItemDisabled,
     updateItemDisabled,
     removeItemDisabled,
   } = state;
 
   const handleCopy = useCallback(async () => {
-    const tsv = clipboard.copy();
+    const tsv = clipboard.copy('Context Menu');
     try {
       await navigator.clipboard.writeText(tsv);
     } catch {}
@@ -99,7 +106,7 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
   }, [clipboard, onClose]);
 
   const handleCut = useCallback(async () => {
-    const tsv = clipboard.cut();
+    const tsv = clipboard.cut('Context Menu');
     try {
       await navigator.clipboard.writeText(tsv);
     } catch {}
@@ -112,13 +119,13 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     }
     try {
       const rawData = await navigator.clipboard.readText();
-      clipboard.paste(rawData);
+      clipboard.paste(rawData, 'Context Menu');
     } catch {}
     onClose();
   }, [cellInteraction, clipboard, onClose]);
 
   const handleClear = useCallback(() => {
-    state.clearCells(cellInteraction.selectedCellsList);
+    state.clearCells(cellInteraction.selectedCellsList, 'Context Menu');
     onClose();
   }, [state, cellInteraction, onClose]);
 
@@ -178,8 +185,10 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       : state.rowDeleteDisabledReason(rowKeys[0] ?? cell.rowKey) ??
         t('cairo.editableTable.contextMenu.deleteRow.notDeletable.tooltip');
 
+  const addItemDisabled = state.isAddItemDisabled();
   const addDisabledReason = addItemDisabled
-    ? t('cairo.editableTable.contextMenu.addRow.noPermission.tooltip')
+    ? state.addItemDisabledReason() ??
+      t('cairo.editableTable.contextMenu.addRow.noPermission.tooltip')
     : undefined;
   const updateDisabledReason = updateItemDisabled
     ? t('cairo.editableTable.contextMenu.editRow.noPermission.tooltip')
@@ -315,6 +324,9 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       : cell.rowKey;
 
   const handleSelect = (option: { id: string | number }) => {
+    if (ADD_ROW_OPTION_IDS.includes(option.id) && state.isAddItemDisabled()) {
+      return;
+    }
     switch (option.id) {
       case 'copy':
         handleCopy();

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

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

package/src/components/EditableTable/HeaderFieldActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import type { Field, FiltersMap } from '@wix/bex-core';
 import { resolveFieldTypeDefinition } from '@wix/bex-core';
@@ -34,6 +34,17 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
   state,
   column,
 }: HeaderFieldActionsProps<T, F>) {
+  const reportHeaderMenuOpenChange = useCallback(
+    (isOpened: boolean) => {
+      state.bi.menuOpened({
+        menuType: 'Column Header',
+        isOpened,
+        key: column.id,
+      });
+    },
+    [state, column.id],
+  );
+
   const { toolbar } = state;
   const { customColumnsState, panels, toolbarFiltersState } = toolbar;
   const source = toolbar.collectionFieldsSource;
@@ -113,6 +124,7 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
     <HeaderActionsPopover
       actions={groups}
       dataHook={`header-actions-${column.id}`}
+      onOpenChange={reportHeaderMenuOpenChange}
     />
   );
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit99357277";
+var _namespace_ = "Edit4064067805";
 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":"Edit99357277__root","addressInput":"Edit99357277__addressInput"};
+export var classes = {"root":"Edit4064067805__root","addressInput":"Edit4064067805__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_ = "Edit1487541884";
+var _namespace_ = "Edit4044920703";
 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":"Edit1487541884__root","jsonInput":"Edit1487541884__jsonInput"};
+export var classes = {"root":"Edit4044920703__root","jsonInput":"Edit4044920703__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4147843703";
+var _namespace_ = "Edit2257781110";
 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":"Edit4147843703__root","booleanEdit":"Edit4147843703__booleanEdit"};
+export var classes = {"root":"Edit2257781110__root","booleanEdit":"Edit2257781110__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_ = "View998597823";
+var _namespace_ = "View3676517918";
 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":"View998597823__root","booleanView":"View998597823__booleanView"};
+export var classes = {"root":"View3676517918__root","booleanView":"View3676517918__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_ = "Edit2175736022";
+var _namespace_ = "Edit1919896553";
 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":"Edit2175736022__root"};
+export var classes = {"root":"Edit1919896553__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_ = "Edit2387630552";
+var _namespace_ = "Edit1409204320";
 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":"Edit2387630552__root","dateInput":"Edit2387630552__dateInput"};
+export var classes = {"root":"Edit1409204320__root","dateInput":"Edit1409204320__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_ = "View2257259407";
+var _namespace_ = "View1676372965";
 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":"View2257259407__root"};
+export var classes = {"root":"View1676372965__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2736218085";
+var _namespace_ = "Edit1893675334";
 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":"Edit2736218085__root","half":"Edit2736218085__half","dateHalf":"Edit2736218085__dateHalf Edit2736218085__half","timeHalf":"Edit2736218085__timeHalf Edit2736218085__half","divider":"Edit2736218085__divider","passiveText":"Edit2736218085__passiveText","placeholderText":"Edit2736218085__placeholderText Edit2736218085__passiveText"};
+export var classes = {"root":"Edit1893675334__root","half":"Edit1893675334__half","dateHalf":"Edit1893675334__dateHalf Edit1893675334__half","timeHalf":"Edit1893675334__timeHalf Edit1893675334__half","divider":"Edit1893675334__divider","passiveText":"Edit1893675334__passiveText","placeholderText":"Edit1893675334__placeholderText Edit1893675334__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View497238197";
+var _namespace_ = "View3508275972";
 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":"View497238197__root","leaf":"View497238197__leaf","datePart":"View497238197__datePart View497238197__leaf","timePart":"View497238197__timePart View497238197__leaf","placeholder":"View497238197__placeholder View497238197__leaf","divider":"View497238197__divider"};
+export var classes = {"root":"View3508275972__root","leaf":"View3508275972__leaf","datePart":"View3508275972__datePart View3508275972__leaf","timePart":"View3508275972__timePart View3508275972__leaf","placeholder":"View3508275972__placeholder View3508275972__leaf","divider":"View3508275972__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_ = "Edit2803015644";
+var _namespace_ = "Edit1723470133";
 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":"Edit2803015644__root","emailInput":"Edit2803015644__emailInput"};
+export var classes = {"root":"Edit1723470133__root","emailInput":"Edit1723470133__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_ = "View2980188437";
+var _namespace_ = "View91542587";
 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":"View2980188437__root"};
+export var classes = {"root":"View91542587__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};