@wix/patterns 1.436.0 → 1.438.0

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -5,22 +5,10 @@ import { CustomActionModal, MessageActionModal } from '../ActionModal';
 import { CustomFieldForm } from '.';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalPrimaryButton } from './CustomFieldModalPrimaryButton';
-import {
-  CustomFieldModalState,
-  FieldModalSubtitle,
-  Translate,
-} from '@wix/bex-core';
+import { CustomFieldModalState, FieldModalSubtitle } from '@wix/bex-core';
 import { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
-// Lazy so the V2 form (and its subtree) stays out of the main bundle while the
-// flag is off.
-const CustomFieldFormV2 = React.lazy(() =>
-  import(
-    /* webpackChunkName: "CustomFieldFormV2" */ './CustomFieldFormV2'
-  ).then((m) => ({ default: m.CustomFieldFormV2 })),
-);
-
 export const _CustomFieldModal = ({
   state,
 }: {
@@ -35,15 +23,11 @@ export const _CustomFieldModal = ({
     });
   }
 
-  const {
-    translate: t,
-    environment: { language },
-    internalExperiments,
-  } = useWixPatternsContainer();
+  const { translate: t } = useWixPatternsContainer();
 
   const {
     mode,
-    customFieldModalBiReporter: { reportLearnMoreClick, reportModalEndProcess },
+    customFieldModalBiReporter: { reportModalEndProcess },
   } = state;
 
   if (mode === 'new' && state.fieldManagement.maxReached) {
@@ -60,7 +44,6 @@ export const _CustomFieldModal = ({
   const { text } = state.fieldManagement.fieldModal;
   const title = mode === 'new' ? text.addTitle : text.editTitle;
   const addSubtitle = mode === 'new' ? text.addSubtitle : undefined;
-  const useV2Form = internalExperiments?.enabled('newFieldsModal');
 
   return (
     <CustomActionModal
@@ -70,15 +53,7 @@ export const _CustomFieldModal = ({
       subtitle={
         addSubtitle && <CustomFieldModalSubtitle subtitle={addSubtitle} />
       }
-      content={
-        useV2Form ? (
-          <React.Suspense fallback={null}>
-            <CustomFieldFormV2 state={state} />
-          </React.Suspense>
-        ) : (
-          <CustomFieldForm state={state} />
-        )
-      }
+      content={<CustomFieldForm state={state} />}
       primaryButtonText={
         <CustomFieldModalPrimaryButton
           state={state}
@@ -96,52 +71,13 @@ export const _CustomFieldModal = ({
       secondaryButtonOnClick={() =>
         reportModalEndProcess({ endType: 'Cancel' })
       }
-      showFooterDivider={useV2Form}
-      // V2 has no footnote: whether the toggle row shows is the whole signal.
-      footnote={
-        useV2Form || state.fieldManagement.fieldModal.supportsPii ? null : (
-          <Footnote
-            language={language}
-            reportLearnMoreClick={reportLearnMoreClick}
-            t={t}
-          />
-        )
-      }
+      showFooterDivider
     />
   );
 };
 
 export const CustomFieldModal = observer(_CustomFieldModal);
 
-interface FootnoteProps {
-  language: string;
-  reportLearnMoreClick: () => void;
-  t: Translate;
-}
-
-const Footnote: React.FC<FootnoteProps> = ({
-  language,
-  reportLearnMoreClick,
-  t,
-}) => {
-  const isBmHarmonyTheme = useBmHarmonyTheme();
-
-  return (
-    <Text size={isBmHarmonyTheme ? 'tiny' : 'small'} dataHook="pii-footnote">
-      {t('cairo.customFields.addCustomField.modal.PII')}
-      &nbsp;
-      <a
-        href={`https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`}
-        target="_blank"
-        rel="noreferrer"
-        onClick={reportLearnMoreClick}
-      >
-        {t('cairo.customFields.addCustomField.modal.PII.learnMore')}
-      </a>
-    </Text>
-  );
-};
-
 interface CustomFieldModalSubtitleProps {
   subtitle: FieldModalSubtitle;
 }

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

@@ -6,7 +6,6 @@ import {
   FormFieldUniDriver,
   CheckboxUniDriver,
   InputUniDriver,
-  TextButtonUniDriver,
   LoaderUniDriver,
   FloatingNotificationUniDriver,
   TextUniDriver,
@@ -27,11 +26,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
 
-  const getSettingsButton = () =>
-    TextButtonUniDriver(
-      body.$('[data-hook="custom-field-modal-settings-button"]'),
-      body,
-    );
   const getSettingsAccordion = () =>
     AccordionUniDriver(
       body.$('[data-hook="custom-field-modal-settings-accordion"]'),
@@ -48,12 +42,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
 
-  const getFieldKeyTooltip = () =>
-    TextUniDriver(
-      body.$('[data-hook="custom-field-modal-fieldKey-tooltip"]'),
-      body,
-    );
-
   const exists = () => getCustomFieldModal().exists();
   const clickConfirm = () =>
     getCustomFieldModal()
@@ -64,7 +52,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     getCustomFieldModal()
       .getSecondaryButtonDriver()
       .then((driver: any) => driver.click());
-  const clickAdvancedSettings = () => getSettingsButton().click();
   const isSettingsVisible = () => getSettingsAccordion().exists();
   const getSettingsLabel = () => getSettingsAccordion().getItemTitleAt(0);
   const isSettingsExpanded = () => getSettingsAccordion().isItemExpandedAt(0);
@@ -139,9 +126,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
   const getPiiToggleText = () => {
     return TextUniDriver(body.$('[data-hook="pii-toggle-name"]'), body);
   };
-  const getPiiFootnote = () => {
-    return TextUniDriver(body.$('[data-hook="pii-footnote"]'), body);
-  };
   const getPiiToggleSwitch = () => {
     return ToggleSwitchUniDriver(
       body.$('[data-hook="pii-toggle-switch"]'),
@@ -169,12 +153,10 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     getTypeFormFieldDriver,
     getNameFormFieldDriver,
     getKeyFormFieldDriver,
-    getFieldKeyTooltip,
     getSubtitle,
     getPermissionNote,
     getEditPiiNote,
     getPiiToggleText,
-    getPiiFootnote,
     getPiiToggleSwitch,
   });
 
@@ -248,7 +230,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     clickConfirm,
     clickClose,
     clickCancel,
-    clickAdvancedSettings,
     isSettingsVisible,
     getSettingsLabel,
     isSettingsExpanded,

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';
+import {
+  AutoComplete,
+  Box,
+  Input,
+  listItemSectionBuilder,
+  listItemSelectBuilder,
+} from '@wix/design-system';
 import { CustomFieldModalState } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
@@ -15,7 +21,7 @@ export const _CustomFieldTypeDropdown = (
   const {
     state: {
       form: {
-        $: { type, name },
+        $: { type, name, containsPii },
       },
       mode,
       fieldManagement: { fieldModal },
@@ -26,42 +32,105 @@ export const _CustomFieldTypeDropdown = (
 
   const { translate: t } = useWixPatternsContainer();
 
-  const fieldTypeOptions = React.useMemo(
-    () =>
-      fieldModal.types.map((option) =>
-        listItemSelectBuilder({
-          dataHook: `custom-field-modal-type-${option.id}`,
-          id: option.id,
-          prefix: (
-            <Box>
-              {getFieldTypeIcon({
-                fieldType: option.patternsType,
-                size: 'medium',
-              })}
-            </Box>
-          ),
-          title: option.label,
-          label: option.label,
-        }),
-      ),
-    [fieldModal.types],
+  const [search, setSearch] = React.useState<string | null>(null);
+  const query = search?.trim().toLowerCase() ?? '';
+
+  const selectedType = fieldModal.types.find(
+    (option) => option.id === type.value,
   );
 
+  const fieldTypeOptions = React.useMemo(() => {
+    const toOption = (option: (typeof fieldModal.types)[number]) =>
+      listItemSelectBuilder({
+        dataHook: `custom-field-modal-type-${option.id}`,
+        id: option.id,
+        prefix: (
+          <Box>
+            {getFieldTypeIcon({
+              fieldType: option.patternsType,
+              size: 'medium',
+            })}
+          </Box>
+        ),
+        title: option.label,
+        subtitle: option.subtitle,
+        label: option.label,
+      });
+
+    if (query) {
+      return fieldModal.types
+        .filter((option) => option.label.toLowerCase().includes(query))
+        .map(toOption);
+    }
+
+    const groups = fieldModal.types.reduce<string[]>((labels, option) => {
+      const label = option.group;
+      if (label && !labels.includes(label)) {
+        labels.push(label);
+      }
+      return labels;
+    }, []);
+
+    if (groups.length === 0) {
+      return fieldModal.types.map(toOption);
+    }
+
+    const grouped = groups.flatMap((label) => [
+      listItemSectionBuilder({
+        id: `custom-field-modal-type-group-${label}`,
+        type: 'subheader',
+        title: label,
+      }),
+      ...fieldModal.types
+        .filter((option) => option.group === label)
+        .map(toOption),
+    ]);
+    const ungrouped = fieldModal.types
+      .filter((option) => !option.group)
+      .map(toOption);
+    return [...grouped, ...ungrouped];
+  }, [fieldModal.types, query]);
+
   return (
-    <Dropdown
+    <AutoComplete
       dataHook="custom-field-modal-type"
       disabled={mode === 'edit'}
-      valueParser={(option) => option.label}
+      value={search ?? selectedType?.label ?? ''}
       selectedId={type.value}
+      prefix={
+        search === null && selectedType ? (
+          <Input.IconAffix>
+            {/* WDS paints input affix icons blue; the type icons stay dark. */}
+            <Box color="D10">
+              {getFieldTypeIcon({
+                fieldType: selectedType.patternsType,
+                size: 'medium',
+              })}
+            </Box>
+          </Input.IconAffix>
+        ) : undefined
+      }
+      onChange={(e) => setSearch(e.target.value)}
       onSelect={({ id }) => {
-        type.onChange(String(id));
+        const nextType = String(id);
+        setSearch(null);
+        if (nextType !== type.value) {
+          // The settings were filled in for the old type; the new one starts fresh.
+          props.state.resetSettingsValues();
+        }
+        type.onChange(nextType);
+        // Read off `props.state` — a destructured computed holds the pre-change value.
+        if (!props.state.typeSupportsPii) {
+          containsPii.onChange(false);
+        }
         setKeyFieldIfNotDirty(generateUniqueKey(name.value));
       }}
+      onClose={() => setSearch(null)}
       popoverProps={{ appendTo: 'window', zIndex: 5001 }}
-      dropdownWidth="258px"
       placeholder={t(
         'cairo.customFields.addCustomField.modal.fieldType.placeholder',
       )}
+      emptyStateMessage={t('cairo.emptyState.subtitle.nothingMatchesCriteria')}
       options={fieldTypeOptions}
     />
   );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1315185218";
+var _namespace_ = "DragHandle4070074763";
 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":"DragHandle1315185218__root"};
+export var classes = {"root":"DragHandle4070074763__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_ = "EditableCell3789451680";
+var _namespace_ = "EditableCell1327135477";
 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":"EditableCell3789451680__root","validationIndicator":"EditableCell3789451680__validationIndicator"};
+export var classes = {"root":"EditableCell1327135477__root","validationIndicator":"EditableCell1327135477__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -13,6 +13,7 @@ import {
   DuplicateSmall,
 } from '@wix/wix-ui-icons-common';
 import type { EditableTableState, Cell } from '../../state/EditableTable';
+import { startEditingNewRow } from './useAddRow';
 
 type ListItemActionBuilderParams = Parameters<typeof listItemActionBuilder>[0];
 
@@ -326,12 +327,12 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         );
         const prevKey =
           rowIdx > 0 ? state.keyedItems[rowIdx - 1].key : undefined;
-        state.addItem(prevKey);
+        startEditingNewRow(state, state.addItem(prevKey));
         onClose();
         break;
       }
       case 'add-below':
-        state.addItem(targetRowKey);
+        startEditingNewRow(state, state.addItem(targetRowKey));
         onClose();
         break;
       case 'duplicate':

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover94982396";
+var _namespace_ = "HeaderActionsPopover4222929682";
 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":"HeaderActionsPopover94982396__root"};
+export var classes = {"root":"HeaderActionsPopover4222929682__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_ = "CellViewLayout4069277554";
+var _namespace_ = "CellViewLayout1504297684";
 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":"CellViewLayout4069277554__root"};
+export var classes = {"root":"CellViewLayout1504297684__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_ = "Edit1053882361";
+var _namespace_ = "Edit4033203347";
 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":"Edit1053882361__root","addressInput":"Edit1053882361__addressInput"};
+export var classes = {"root":"Edit4033203347__root","addressInput":"Edit4033203347__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_ = "Edit2452889646";
+var _namespace_ = "Edit2632208104";
 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":"Edit2452889646__root","jsonInput":"Edit2452889646__jsonInput"};
+export var classes = {"root":"Edit2632208104__root","jsonInput":"Edit2632208104__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_ = "Edit2817328666";
+var _namespace_ = "Edit1712396097";
 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":"Edit2817328666__root","booleanEdit":"Edit2817328666__booleanEdit"};
+export var classes = {"root":"Edit1712396097__root","booleanEdit":"Edit1712396097__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_ = "View2605884354";
+var _namespace_ = "View3455639257";
 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":"View2605884354__root","booleanView":"View2605884354__booleanView"};
+export var classes = {"root":"View3455639257__root","booleanView":"View3455639257__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_ = "Edit2078727186";
+var _namespace_ = "Edit940945430";
 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":"Edit2078727186__root"};
+export var classes = {"root":"Edit940945430__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_ = "Edit1268503090";
+var _namespace_ = "Edit2416414059";
 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":"Edit1268503090__root","dateInput":"Edit1268503090__dateInput"};
+export var classes = {"root":"Edit2416414059__root","dateInput":"Edit2416414059__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_ = "View3079562455";
+var _namespace_ = "View2734831996";
 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":"View3079562455__root"};
+export var classes = {"root":"View2734831996__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_ = "Edit427055386";
+var _namespace_ = "Edit944008074";
 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":"Edit427055386__root","half":"Edit427055386__half","dateHalf":"Edit427055386__dateHalf Edit427055386__half","timeHalf":"Edit427055386__timeHalf Edit427055386__half","divider":"Edit427055386__divider","passiveText":"Edit427055386__passiveText","placeholderText":"Edit427055386__placeholderText Edit427055386__passiveText"};
+export var classes = {"root":"Edit944008074__root","half":"Edit944008074__half","dateHalf":"Edit944008074__dateHalf Edit944008074__half","timeHalf":"Edit944008074__timeHalf Edit944008074__half","divider":"Edit944008074__divider","passiveText":"Edit944008074__passiveText","placeholderText":"Edit944008074__placeholderText Edit944008074__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_ = "View4124205410";
+var _namespace_ = "View2762908498";
 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":"View4124205410__root","leaf":"View4124205410__leaf","datePart":"View4124205410__datePart View4124205410__leaf","timePart":"View4124205410__timePart View4124205410__leaf","placeholder":"View4124205410__placeholder View4124205410__leaf","divider":"View4124205410__divider"};
+export var classes = {"root":"View2762908498__root","leaf":"View2762908498__leaf","datePart":"View2762908498__datePart View2762908498__leaf","timePart":"View2762908498__timePart View2762908498__leaf","placeholder":"View2762908498__placeholder View2762908498__leaf","divider":"View2762908498__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_ = "Edit1109350209";
+var _namespace_ = "Edit145852282";
 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":"Edit1109350209__root","emailInput":"Edit1109350209__emailInput"};
+export var classes = {"root":"Edit145852282__root","emailInput":"Edit145852282__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_ = "View1071015639";
+var _namespace_ = "View1141849023";
 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":"View1071015639__root"};
+export var classes = {"root":"View1141849023__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3602889209";
+var _namespace_ = "Edit3218579053";
 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":"Edit3602889209__root","numberInput":"Edit3602889209__numberInput"};
+export var classes = {"root":"Edit3218579053__root","numberInput":"Edit3218579053__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};