@wix/patterns 1.481.0 → 1.483.0

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

@@ -13,6 +13,7 @@ import {
 } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useCommitOnEnter } from '../useCommitOnEnter';
 import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
 import { FilterTranslationProvider } from '../../../../providers';
 import type { ReferenceItem, ReferenceTypeConfig } from './types';
@@ -182,6 +183,10 @@ function _ReferenceEditContent({
     ],
   );
 
+  // On a wrapper, not handleKeyDown — that runs on the input, before the
+  // highlighted option is selected.
+  const handleEnterCommit = useCommitOnEnter(onCommit);
+
   const closeDropdown = useCallback(() => acHandle.current?.hideOptions(), []);
   useCloseOnAncestorScroll(wrapperRef, closeDropdown, true);
 
@@ -210,25 +215,27 @@ function _ReferenceEditContent({
 
   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}
-        onOpenCollection={handleOpenCollection}
-        autoOpen={!!editTrigger}
-        inputRef={inputRef}
-      />
+      <div style={{ display: 'contents' }} onKeyDown={handleEnterCommit}>
+        <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}
+          onOpenCollection={handleOpenCollection}
+          autoOpen={!!editTrigger}
+          inputRef={inputRef}
+        />
+      </div>
     </Box>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit261524571";
+var _namespace_ = "Edit1954678177";
 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":"Edit261524571__root","selectInput":"Edit261524571__selectInput"};
+export var classes = {"root":"Edit1954678177__root","selectInput":"Edit1954678177__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_ = "Edit3788367266";
+var _namespace_ = "Edit888514343";
 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":"Edit3788367266__root","editWrapper":"Edit3788367266__editWrapper","inputArea":"Edit3788367266__inputArea"};
+export var classes = {"root":"Edit888514343__root","editWrapper":"Edit888514343__editWrapper","inputArea":"Edit888514343__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -7,6 +7,7 @@ import {
 import type { CellEditProps } from '../../types';
 import type { ValidationRule } from '../../../../state/EditableTable/types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useCommitOnEnter } from '../useCommitOnEnter';
 import { st, classes } from './Edit.st.css.js';
 
 function getMaxLength(validation?: ValidationRule[]) {
@@ -132,11 +133,14 @@ const TextEditSpecificValues: React.FC<
     [onCancel],
   );
 
+  const handleKeyDown = useCommitOnEnter(onCommit);
+
   return (
     <div
       ref={wrapperRef}
       className={classes.editWrapper}
       onKeyDownCapture={handleKeyDownCapture}
+      onKeyDown={handleKeyDown}
     >
       <CellAutoCompleteInput
         ref={acHandle}

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4054952893";
+var _namespace_ = "Edit3700267363";
 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":"Edit4054952893__root","wrapper":"Edit4054952893__wrapper","overlay":"Edit4054952893__overlay"};
+export var classes = {"root":"Edit3700267363__root","wrapper":"Edit3700267363__wrapper","overlay":"Edit3700267363__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -7,6 +7,7 @@ import {
 import type { TimeInputImperativeActions } from '@wix/design-system';
 import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useCommitOnEnter } from '../useCommitOnEnter';
 import { CellViewLayout } from '../CellViewLayout';
 import { classes } from './Edit.st.css.js';
 
@@ -37,10 +38,13 @@ export const TimeEdit: React.FC<CellEditProps<Time | null>> = ({
     [onCancel],
   );
 
+  const handleKeyDown = useCommitOnEnter(onCommit);
+
   return (
     <div
       ref={wrapperRef}
       onKeyDownCapture={handleKeyDownCapture}
+      onKeyDown={handleKeyDown}
       className={classes.wrapper}
     >
       <CellTimeInput

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3991289292";
+var _namespace_ = "Edit666191133";
 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":"Edit3991289292__root","urlInput":"Edit3991289292__urlInput"};
+export var classes = {"root":"Edit666191133__root","urlInput":"Edit666191133__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_ = "View4154240120";
+var _namespace_ = "View3273447384";
 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":"View4154240120__root","textView":"View4154240120__textView","urlText":"View4154240120__urlText","suffix":"View4154240120__suffix"};
+export var classes = {"root":"View3273447384__root","textView":"View3273447384__textView","urlText":"View3273447384__urlText","suffix":"View3273447384__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/useCommitOnEnter.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+import { useCallback } from 'react';
+
+/**
+ * Bubble-phase keydown handler that commits on Enter. Put it on a wrapper
+ * around an input with a dropdown: by the time it runs, the input has already
+ * applied a highlighted option (which commits on its own), so this commits
+ * the unchanged value. The input's own `onKeyDown` prop runs too early.
+ */
+export function useCommitOnEnter(onCommit: () => void) {
+  return useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        onCommit();
+      }
+    },
+    [onCommit],
+  );
+}

package/src/components/EditableTable/cellTypes/useMultilineEditKeyboard.ts

@@ -0,0 +1,39 @@
+import type React from 'react';
+import { useCallback, useRef } from 'react';
+
+/**
+ * Keys for a multi-line cell editor: Enter commits, Shift+Enter adds a new
+ * line, Escape cancels. Blur commits unless one of those already ended the edit.
+ */
+export function useMultilineEditKeyboard({
+  onCommit,
+  onCancel,
+}: {
+  onCommit: () => void;
+  onCancel: () => void;
+}) {
+  const endedRef = useRef(false);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        endedRef.current = true;
+        onCancel();
+      } else if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        endedRef.current = true;
+        onCommit();
+      }
+    },
+    [onCancel, onCommit],
+  );
+
+  const handleBlur = useCallback(() => {
+    if (!endedRef.current) {
+      onCommit();
+    }
+  }, [onCommit]);
+
+  return { handleKeyDown, handleBlur };
+}

package/src/components/EditableTable/useCellFocusAndEditing.ts

@@ -25,6 +25,7 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
   const isFocused = cellInteraction.isCellFocused(rowKey, columnId);
   const isEditing = cellInteraction.isCellEditing(rowKey, columnId);
   const isEditable = state.isCellEditable(rowKey, columnId);
+  const isToggle = !!resolved?.toggleValue;
 
   // Register the focused cell's DOM element on the state so
   // scrollFocusedCellIntoView can use it. useLayoutEffect ensures
@@ -68,7 +69,13 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
           | HTMLInputElement
           | HTMLTextAreaElement
           | null;
-        if (!input || !('selectionStart' in input)) {
+        // selectionStart is null for inputs without a caret (e.g. checkbox),
+        // and setSelectionRange throws on them.
+        if (
+          !input ||
+          !('selectionStart' in input) ||
+          input.selectionStart == null
+        ) {
           return;
         }
         if (input.selectionStart !== input.selectionEnd) {
@@ -80,20 +87,14 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
     } else {
       // Don't steal focus if a descendant already has it (e.g. image cell's
       // inner-focus buttons). The gridcell only needs focusing when it isn't
-      // already within the active focus subtree.
-      if (!cellRef.current?.contains(document.activeElement)) {
+      // already within the active focus subtree. Toggle cells are the
+      // exception: their control stays rendered after the edit ends, and
+      // leaving focus on it would keep its focus ring.
+      if (isToggle || !cellRef.current?.contains(document.activeElement)) {
         cellRef.current?.focus({ preventScroll: true });
       }
     }
-  }, [isFocused, isEditing, cellRef, editInputRef]);
-
-  const handleActivate = useCallback(() => {
-    if (resolved?.toggleValue) {
-      state.cellValue.toggleCell(rowKey, columnId);
-    } else {
-      cellInteraction.startEdit();
-    }
-  }, [resolved, state, rowKey, columnId, cellInteraction]);
+  }, [isFocused, isEditing, isToggle, cellRef, editInputRef]);
 
   // Handle Enter and type-to-edit at the cell level
   const onKeyDown = useCallback(
@@ -115,7 +116,9 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
           // needs to be true for useClearFocusOnBlur protection.
           editInputRef.current?.focus();
         } else {
-          handleActivate();
+          // Toggle cells too: the first Enter focuses the control, the second
+          // toggles it.
+          cellInteraction.startEdit();
         }
         return;
       }
@@ -197,7 +200,6 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
       state,
       cellInteraction,
       resolved,
-      handleActivate,
     ],
   );
 

package/src/components/EmptyState/EmptyStateBase.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase2686840201";
+var _namespace_ = "EmptyStateBase1424824079";
 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":"EmptyStateBase2686840201__root"};
+export var classes = {"root":"EmptyStateBase1424824079__root"};
 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_ = "EntityPagePlain907640231";
+var _namespace_ = "EntityPagePlain2844113434";
 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":"EntityPagePlain907640231__root"};
+export var classes = {"root":"EntityPagePlain2844113434__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_ = "Fade54617898";
+var _namespace_ = "Fade3152122153";
 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":"Fade54617898__root"};
+export var classes = {"root":"Fade3152122153__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_ = "Heading2348009961";
+var _namespace_ = "Heading3764728993";
 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":"Heading2348009961__root"};
+export var classes = {"root":"Heading3764728993__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_ = "ImportStepUpload3960496831";
+var _namespace_ = "ImportStepUpload2811416321";
 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":"ImportStepUpload3960496831__root","fileUpload":"ImportStepUpload3960496831__fileUpload"};
+export var classes = {"root":"ImportStepUpload2811416321__root","fileUpload":"ImportStepUpload2811416321__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_ = "InputOverflow381691028";
+var _namespace_ = "InputOverflow330524540";
 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":"InputOverflow381691028__root"};
+export var classes = {"root":"InputOverflow330524540__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_ = "LoadingRow1119038160";
+var _namespace_ = "LoadingRow1444698213";
 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":"LoadingRow1119038160__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1119038160__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1444698213__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1444698213__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_ = "MaxHeightText952229698";
+var _namespace_ = "MaxHeightText3443443614";
 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":"MaxHeightText952229698__root"};
+export var classes = {"root":"MaxHeightText3443443614__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_ = "MaxLines3960894775";
+var _namespace_ = "MaxLines1289721197";
 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":"MaxLines3960894775__root"};
+export var classes = {"root":"MaxLines1289721197__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_ = "MultiBulkActionToolbar629827729";
+var _namespace_ = "MultiBulkActionToolbar4156239102";
 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":"MultiBulkActionToolbar629827729__root","leftGroupWrapper":"MultiBulkActionToolbar629827729__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar629827729__selectedCountItem","selectedCountText":"MultiBulkActionToolbar629827729__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4156239102__root","leftGroupWrapper":"MultiBulkActionToolbar4156239102__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4156239102__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4156239102__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_ = "NestedTablePlaceholderStatesRow3297893429";
+var _namespace_ = "NestedTablePlaceholderStatesRow1382563741";
 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":"NestedTablePlaceholderStatesRow3297893429__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1382563741__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_ = "NestedTableRow3852827795";
+var _namespace_ = "NestedTableRow1404199394";
 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":"NestedTableRow3852827795__root","firstLevel":"NestedTableRow3852827795__firstLevel","placeholder":"NestedTableRow3852827795__placeholder","parentHovered":"NestedTableRow3852827795__parentHovered"};
+export var classes = {"root":"NestedTableRow1404199394__root","firstLevel":"NestedTableRow1404199394__firstLevel","placeholder":"NestedTableRow1404199394__placeholder","parentHovered":"NestedTableRow1404199394__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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