@wix/patterns 1.395.0 → 1.396.0

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

@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box } from '@wix/design-system';
+import {
+  CellReferenceInput,
+  type CellReferenceInputHandle,
+  type CellReferenceItem,
+} from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
+import { FilterTranslationProvider } from '../../../../providers';
+import type { ReferenceItem, ReferenceTypeConfig } from './types';
+import { getImageFieldId } from './getImageFieldId';
+import { useCollection } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+
+type ReferenceValue = Record<string, unknown> | null;
+
+function _ReferenceEditContent({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  typeConfig,
+  editTrigger,
+  inputRef,
+}: CellEditProps<ReferenceValue>) {
+  const config = typeConfig as ReferenceTypeConfig | undefined;
+  const refSchema = config?.refSchema;
+  const acHandle = useRef<CellReferenceInputHandle | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  const collection = useCollection<ReferenceItem>({
+    queryName: `reference-cell-edit-${refSchema?.id ?? 'unknown'}`,
+    itemKey: (item) => item.id,
+    itemName: (item) => item.name,
+    fetchData: async (query) => {
+      if (!config?.fetchReferenceItems) {
+        return { items: [], total: 0 };
+      }
+      return config.fetchReferenceItems(query);
+    },
+  });
+
+  const initialSearchTextRef = useRef(
+    editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type'
+      ? editTrigger.key
+      : undefined,
+  );
+  // True once the user has typed into the search input. After that, displayValue
+  // follows searchValue directly (even when empty) rather than falling back to
+  // selectedDisplayValue — prevents the input from snapping back after backspace.
+  // useState (not useRef) so that setIsSearchActive(true) triggers a re-render
+  // even when collection.search('') produces no MobX change (searchValue already '').
+  const [isSearchActive, setIsSearchActive] = useState(
+    initialSearchTextRef.current !== undefined,
+  );
+
+  useEffect(() => {
+    const dispose = collection.init();
+    if (initialSearchTextRef.current !== undefined) {
+      collection.search(initialSearchTextRef.current);
+    }
+    return dispose;
+  }, [collection]);
+
+  const keyedItems = collection.result.keyedItems;
+  const fetchedLastPage = collection.fetchedLastPage;
+  const searchValue = collection.query.search.value;
+
+  const idField = refSchema?.idField ?? '_id';
+  const displayField = refSchema?.displayField ?? 'title';
+  const imageField = getImageFieldId(refSchema?.fields);
+
+  const selectedDisplayValue = value ? String(value[displayField] ?? '') : '';
+  const displayValue = isSearchActive
+    ? searchValue
+    : searchValue || selectedDisplayValue;
+
+  const selectedImage = useMemo(() => {
+    const selectedId = value?.[idField];
+    if (!selectedId) {
+      return undefined;
+    }
+    const foundItem = keyedItems.find((ki) => ki.key === String(selectedId));
+    if (foundItem?.item.image) {
+      return foundItem.item.image;
+    }
+    if (imageField) {
+      return value?.[imageField] as string | undefined;
+    }
+    return undefined;
+  }, [value, idField, keyedItems, imageField]);
+
+  const selectedId = value ? String(value[idField] ?? '') : '';
+  const selectedItem =
+    selectedDisplayValue && !searchValue && selectedId && !isSearchActive
+      ? { id: selectedId, name: selectedDisplayValue, image: selectedImage }
+      : undefined;
+
+  const items = useMemo(
+    () =>
+      keyedItems.map((ki) => ({
+        id: String(ki.key),
+        name: ki.item.name,
+        image: ki.item.image,
+      })),
+    [keyedItems],
+  );
+
+  const handleSelect = useCallback(
+    (item: CellReferenceItem) => {
+      onChange({
+        [idField]: item.id,
+        [displayField]: item.name,
+        ...(imageField && item.image ? { [imageField]: item.image } : {}),
+      });
+      collection.clearSearch();
+      onCommit();
+    },
+    [idField, displayField, imageField, onChange, onCommit, collection],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setIsSearchActive(true);
+      if (e.target.value) {
+        collection.search(e.target.value);
+      } else {
+        collection.clearSearch();
+      }
+    },
+    [collection],
+  );
+
+  const handleClear = useCallback(() => {
+    onChange(null);
+    collection.clearSearch();
+    onCommit();
+  }, [onChange, onCommit, collection]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+      } else if (
+        (e.key === 'Backspace' || e.key === 'Delete') &&
+        value &&
+        !displayValue &&
+        !isSearchActive
+      ) {
+        onChange(null);
+        collection.clearSearch();
+        onCommit();
+      }
+    },
+    [onCancel, onChange, onCommit, value, displayValue, collection, isSearchActive],
+  );
+
+  const closeDropdown = useCallback(() => acHandle.current?.hideOptions(), []);
+  useCloseOnAncestorScroll(wrapperRef, closeDropdown, true);
+
+  const { showInitialLoader, fixedFooter } = useFilterCollectionStates({
+    collection,
+    fixedFooter: config?.renderFooter?.(),
+  });
+
+  if (!refSchema) {
+    return null;
+  }
+
+  return (
+    <Box ref={wrapperRef} width="100%" height="100%">
+      <CellReferenceInput
+        ref={acHandle}
+        items={items}
+        value={displayValue}
+        selectedItem={selectedItem}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        onClear={handleClear}
+        onKeyDown={handleKeyDown}
+        clearButton={!!displayValue}
+        infiniteScroll
+        hasMore={!showInitialLoader && !fetchedLastPage}
+        loadMore={collection.fetchNextPageIfNeeded}
+        fixedFooter={fixedFooter}
+        onBlur={onCommit}
+        autoOpen={!!editTrigger}
+        inputRef={inputRef}
+      />
+    </Box>
+  );
+}
+
+const ReferenceEditContent = observer(_ReferenceEditContent);
+
+export const ReferenceEdit = (props: CellEditProps<ReferenceValue>) => (
+  <FilterTranslationProvider>
+    <ReferenceEditContent {...props} />
+  </FilterTranslationProvider>
+);

package/src/components/EditableTable/cellTypes/reference/Edit.uni.driver.ts

@@ -0,0 +1,41 @@
+import { fireEvent } from '@testing-library/react';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ReferenceEditUniDriver(base: UniDriver, body: UniDriver) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getNativeInput = () => (base.$('input') as any).getNative() as Promise<HTMLInputElement>;
+
+  return {
+    ...baseUniDriverFactory(base),
+    hasInput: () => base.$('input').exists(),
+    getInputValue: () => base.$('input').value(),
+    typeInInput: async (value: string) => {
+      fireEvent.change(await getNativeInput(), { target: { value } });
+    },
+    pressKeyOnInput: async (key: string) => {
+      fireEvent.keyDown(await getNativeInput(), { key });
+    },
+    hasDropdown: () => base.$('[data-hook="dropdown-layout-wrapper"]').exists(),
+    hasClearButton: () =>
+      base.$('[data-hook="input-clear-button"]').exists(),
+    clickClearButton: async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const el = (base.$('[data-hook="input-clear-button"]') as any).getNative() as Promise<HTMLElement>;
+      fireEvent.click(await el);
+    },
+    hasAvatarPrefix: () =>
+      base.$('[data-hook="reference-input-avatar-prefix"]').exists(),
+    hasInitialLoader: () => body.$('[data-hook="initial-loader"]').exists(),
+    // Dropdown is portal-mounted to document.body, so search in body, not base.
+    getOptionCount: async () => body.$$('[data-hook="list-item-select"]').count(),
+    getOptionTitleByIndex: async (index: number) => {
+      const option = await body.$$('[data-hook="list-item-select"]').get(index);
+      return option.$('[data-hook="list-item-select-title"]').text();
+    },
+    clickOptionByIndex: async (index: number) => {
+      const option = await body.$$('[data-hook="list-item-select"]').get(index);
+      return option.click();
+    },
+  };
+}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CellReferenceView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { CellViewLayout } from '../CellViewLayout';
+import type { ReferenceTypeConfig } from './types';
+import { getImageFieldId } from './getImageFieldId';
+
+type ReferenceValue = Record<string, unknown> | null;
+
+export const ReferenceView: React.FC<CellViewProps<ReferenceValue>> = ({
+  value,
+  typeConfig,
+}) => {
+  const config = typeConfig as ReferenceTypeConfig | undefined;
+  if (!value || !config?.refSchema) {
+    return <CellViewLayout>{null}</CellViewLayout>;
+  }
+
+  const { displayField, fields } = config.refSchema;
+  const imageField = getImageFieldId(fields);
+  const name = String(value[displayField] ?? '');
+  const imageUrl = imageField
+    ? (value[imageField] as string | undefined)
+    : undefined;
+
+  return (
+    <CellReferenceView
+      name={name}
+      imageUrl={imageUrl}
+      dataHook="reference-view"
+    />
+  );
+};

package/src/components/EditableTable/cellTypes/reference/View.uni.driver.ts

@@ -0,0 +1,11 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ReferenceViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    isEmpty: async () => !(await base.$('[data-hook="reference-view"]').exists()),
+    getName: () => base.$('[data-hook="reference-view"]').text(),
+    hasAvatar: () => base.$('[data-hook="reference-view"] [data-hook="avatar"]').exists(),
+  };
+}

package/src/components/EditableTable/cellTypes/reference/getImageFieldId.ts

@@ -0,0 +1,6 @@
+import type { RefSchemaField } from './types';
+
+export const getImageFieldId = (
+  fields: Record<string, RefSchemaField | undefined> | undefined,
+): string | undefined =>
+  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];

package/src/components/EditableTable/cellTypes/reference/index.ts

@@ -0,0 +1,30 @@
+import { defineCellType } from '../../types';
+import { ReferenceView } from './View';
+import { ReferenceEdit } from './Edit';
+
+export { ReferenceView, ReferenceEdit };
+export type { ReferenceItem, RefSchema, ReferenceTypeConfig } from './types';
+
+type ReferenceValue = Record<string, unknown> | null;
+
+export const referenceCellType = defineCellType<ReferenceValue>({
+  type: 'reference',
+  ViewComponent: ReferenceView,
+  EditComponent: ReferenceEdit,
+  serialize: (value) => (value ? JSON.stringify(value) : ''),
+  deserialize: (raw) => {
+    if (!raw) {
+      return null;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === 'object') {
+        return parsed;
+      }
+    } catch {}
+    return null;
+  },
+  editable: true,
+  clearable: true,
+  onTypeToEdit: () => ({}),
+});

package/src/components/EditableTable/cellTypes/reference/types.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+import { ComputedQuery } from '@wix/bex-core';
+
+export interface ReferenceItem {
+  id: string;
+  name: string;
+  image?: string;
+}
+
+export type RefFieldType = 'IMAGE';
+
+export interface RefSchemaField {
+  type: RefFieldType;
+}
+
+export interface RefSchema {
+  id: string;
+  displayField: string;
+  idField: string;
+  fields?: Record<string, RefSchemaField | undefined>;
+}
+
+export interface ReferenceTypeConfig {
+  refSchema: RefSchema;
+  fetchReferenceItems: (
+    query: ComputedQuery,
+  ) => Promise<{ items: ReferenceItem[]; total: number }>;
+  renderFooter?: () => React.ReactNode;
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2636752142";
+var _namespace_ = "Edit1642995125";
 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":"Edit2636752142__root","selectInput":"Edit2636752142__selectInput"};
+export var classes = {"root":"Edit1642995125__root","selectInput":"Edit1642995125__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2440547839";
+var _namespace_ = "Edit3900930784";
 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":"Edit2440547839__root","editWrapper":"Edit2440547839__editWrapper","inputArea":"Edit2440547839__inputArea"};
+export var classes = {"root":"Edit3900930784__root","editWrapper":"Edit3900930784__editWrapper","inputArea":"Edit3900930784__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View709281504";
+var _namespace_ = "View350961446";
 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":"View709281504__root"};
+export var classes = {"root":"View350961446__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1654419121";
+var _namespace_ = "Edit2616508223";
 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":"Edit1654419121__root","urlInput":"Edit1654419121__urlInput"};
+export var classes = {"root":"Edit2616508223__root","urlInput":"Edit2616508223__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3029553590";
+var _namespace_ = "View1876394791";
 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":"View3029553590__root","textView":"View3029553590__textView","urlText":"View3029553590__urlText","suffix":"View3029553590__suffix"};
+export var classes = {"root":"View1876394791__root","textView":"View1876394791__textView","urlText":"View1876394791__urlText","suffix":"View1876394791__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1822850314";
+var _namespace_ = "ImportStepUpload112089049";
 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":"ImportStepUpload1822850314__root","fileUpload":"ImportStepUpload1822850314__fileUpload"};
+export var classes = {"root":"ImportStepUpload112089049__root","fileUpload":"ImportStepUpload112089049__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2681381090";
+var _namespace_ = "LoadingRow3229587494";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2681381090__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2681381090__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3229587494__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3229587494__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3706513071";
+var _namespace_ = "MultiBulkActionToolbar672486749";
 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":"MultiBulkActionToolbar3706513071__root","leftGroupWrapper":"MultiBulkActionToolbar3706513071__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3706513071__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3706513071__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar672486749__root","leftGroupWrapper":"MultiBulkActionToolbar672486749__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar672486749__selectedCountItem","selectedCountText":"MultiBulkActionToolbar672486749__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow3848748466";
+var _namespace_ = "NestedTableRow2698853610";
 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":"NestedTableRow3848748466__root","firstLevel":"NestedTableRow3848748466__firstLevel","placeholder":"NestedTableRow3848748466__placeholder","parentHovered":"NestedTableRow3848748466__parentHovered"};
+export var classes = {"root":"NestedTableRow2698853610__root","firstLevel":"NestedTableRow2698853610__firstLevel","placeholder":"NestedTableRow2698853610__placeholder","parentHovered":"NestedTableRow2698853610__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};