@wix/patterns 1.378.0 → 1.381.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2726814367";
+var _namespace_ = "View1938817342";
 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":"View2726814367__root"};
+export var classes = {"root":"View1938817342__root"};
 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_ = "Edit3289551781";
+var _namespace_ = "Edit454632388";
 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":"Edit3289551781__root","emailInput":"Edit3289551781__emailInput"};
+export var classes = {"root":"Edit454632388__root","emailInput":"Edit454632388__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_ = "View1484009695";
+var _namespace_ = "View3451977290";
 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":"View1484009695__root"};
+export var classes = {"root":"View3451977290__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import { CellImageEdit } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+
+export const ImageEdit: React.FC<CellEditProps<string | null>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+}) => {
+  const handleChange = useCallback(
+    (uri: string | null) => onChange(uri),
+    [onChange],
+  );
+
+  return (
+    <CellImageEdit
+      value={value}
+      onChange={handleChange}
+      onCommit={onCommit}
+      onCancel={onCancel}
+      onStartEdit={onStartEdit}
+      inputRef={inputRef}
+      dataHook="image-edit"
+    />
+  );
+};

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

@@ -0,0 +1,16 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ImageEditUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasAddButton: () => base.$('[data-hook="image-edit-add-button"]').exists(),
+    hasThumbnail: () => base.$('[data-hook="image-edit-thumbnail"]').exists(),
+    hasPasteUrlButton: () =>
+      base.$('[data-hook="image-edit-paste-url-button"]').exists(),
+    hasMoreButton: () =>
+      base.$('[data-hook="image-edit-more-button"]').exists(),
+    isLoading: () =>
+      base.$('[data-hook="image-edit"] [data-hook="loader"]').exists(),
+  };
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageView as FieldsImageView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+
+export const ImageView: React.FC<CellViewProps<string | null>> = ({ value }) => (
+  <FieldsImageView value={value} dataHook="image-view" />
+);

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

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ImageViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasThumbnail: () => base.$('[data-hook="image-thumbnail"]').exists(),
+    isEmpty: async () => {
+      const thumbnail = base.$('[data-hook="image-thumbnail"]');
+      return (await thumbnail.attr('data-empty')) === 'true';
+    },
+  };
+}

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

@@ -0,0 +1,18 @@
+import { defineCellType } from '../../types';
+import { ImageView } from './View';
+import { ImageEdit } from './Edit';
+
+export { ImageView, ImageEdit };
+
+export const imageCellType = defineCellType<string | null>({
+  type: 'image',
+  ViewComponent: ImageView,
+  EditComponent: ImageEdit,
+  serialize: (value) => value ?? '',
+  clearable: true,
+  showEditWhenFocused: true,
+  // Returning undefined blocks all key presses from starting type-to-edit, but
+  // the presence of the function sets the :typeToEdit CSS modifier which keeps
+  // the selection borders visible while the cell is in edit mode (double border).
+  onTypeToEdit: () => undefined,
+});

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

@@ -6,6 +6,8 @@ import { dateCellType } from './date';
 import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { objectCellType } from './object';
+import { imageCellType } from './image';
+import { richContentCellType } from './richContent';
 
 export {
   textCellType,
@@ -15,6 +17,8 @@ export {
   urlCellType,
   emailCellType,
   objectCellType,
+  imageCellType,
+  richContentCellType,
 };
 
 /** All built-in cell types */
@@ -26,4 +30,6 @@ export const builtInCellTypes: CellType[] = [
   urlCellType,
   emailCellType,
   objectCellType,
+  imageCellType,
+  richContentCellType,
 ];

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1540636546";
+var _namespace_ = "Edit3405934222";
 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":"Edit1540636546__root","numberInput":"Edit1540636546__numberInput"};
+export var classes = {"root":"Edit3405934222__root","numberInput":"Edit3405934222__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1894319470";
+var _namespace_ = "View467769775";
 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":"View1894319470__root","textView":"View1894319470__textView"};
+export var classes = {"root":"View467769775__root","textView":"View467769775__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3961799499";
+var _namespace_ = "Edit975343976";
 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":"Edit3961799499__root","jsonInput":"Edit3961799499__jsonInput"};
+export var classes = {"root":"Edit975343976__root","jsonInput":"Edit975343976__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+
+import type { RichContent } from '@wix/ricos';
+import { CellRichContentInput } from '@wix/patterns-fields/form-rich-content-input';
+
+import type { CellEditProps } from '../../types';
+import { RichContentView } from './View';
+
+export const RichContentEdit: React.FC<CellEditProps<unknown>> = ({
+  value,
+  onChange,
+  onCommit,
+  // onCancel intentionally unused: Escape commits via RichContentEditor.onClose → editorEvents.publish().
+  editTrigger,
+}) => {
+  const initialTypedKey =
+    editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type'
+      ? editTrigger.key
+      : undefined;
+
+  const handleSave = useCallback(() => {
+    onCommit();
+  }, [onCommit]);
+
+  return (
+    <>
+      {/* Show cell view underneath while the modal is open */}
+      <RichContentView value={value} />
+      <CellRichContentInput
+        value={value}
+        onChange={onChange as (v: RichContent | undefined) => void}
+        onSave={handleSave}
+        initialTypedKey={initialTypedKey}
+      />
+    </>
+  );
+};
+
+export default RichContentEdit;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { CellRichContentView } from '@wix/patterns-fields';
+
+import type { CellViewProps } from '../../types';
+import { CellViewLayout } from '../CellViewLayout';
+
+export const RichContentView: React.FC<CellViewProps<unknown>> = ({
+  value,
+}) => (
+  <CellViewLayout>
+    <CellRichContentView value={value} />
+  </CellViewLayout>
+);

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

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function RichContentViewUniDriver(
+  base: UniDriver,
+  _body: UniDriver,
+) {
+  return {
+    ...baseUniDriverFactory(base),
+    /** Returns the plain-text content shown in the cell */
+    getValue: () => base.text(),
+  };
+}

package/src/components/EditableTable/cellTypes/richContent/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Loader } from '@wix/design-system';
+import {
+  ensureRicosContent,
+  fromPlainText,
+  toPlainTextSync,
+} from '@wix/ricos/content';
+
+import type { CellEditProps } from '../../types';
+import { defineCellType } from '../../types';
+import { RichContentView } from './View';
+
+const richContentEditFactory = () =>
+  import(/* webpackChunkName: "EditableTableRichContentEdit" */ './Edit');
+
+if (process.env.STORYBOOK_VISUAL_E2E !== 'true') {
+  richContentEditFactory();
+}
+
+const LazyRichContentEdit = React.lazy(richContentEditFactory);
+
+const RichContentEdit = (props: CellEditProps<unknown>) => (
+  <React.Suspense fallback={<Loader size="tiny" />}>
+    <LazyRichContentEdit {...props} />
+  </React.Suspense>
+);
+
+export const richContentCellType = defineCellType<unknown>({
+  type: 'richContent',
+  ViewComponent: RichContentView,
+  EditComponent: RichContentEdit,
+
+  /** Serialize to single-line plain text for TSV clipboard. */
+  serialize: (value) => {
+    if (!value) {
+      return '';
+    }
+    return toPlainTextSync(ensureRicosContent(value as any), {
+      delimiter: ' ',
+    });
+  },
+
+  /** Deserialize a pasted plain-text string back to a minimal Ricos document. */
+  deserialize: (raw) => (raw ? fromPlainText(raw) : null),
+
+  editable: true,
+  clearable: false,
+
+  onTypeToEdit: () => ({}),
+});

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit245233832";
+var _namespace_ = "Edit2187970819";
 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":"Edit245233832__root","selectInput":"Edit245233832__selectInput"};
+export var classes = {"root":"Edit2187970819__root","selectInput":"Edit2187970819__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_ = "Edit4234533147";
+var _namespace_ = "Edit1413525660";
 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":"Edit4234533147__root","editWrapper":"Edit4234533147__editWrapper","inputArea":"Edit4234533147__inputArea"};
+export var classes = {"root":"Edit1413525660__root","editWrapper":"Edit1413525660__editWrapper","inputArea":"Edit1413525660__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_ = "View3084968754";
+var _namespace_ = "View3635888428";
 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":"View3084968754__root"};
+export var classes = {"root":"View3635888428__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_ = "Edit2992387440";
+var _namespace_ = "Edit3375197161";
 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":"Edit2992387440__root","urlInput":"Edit2992387440__urlInput"};
+export var classes = {"root":"Edit3375197161__root","urlInput":"Edit3375197161__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_ = "View3921770292";
+var _namespace_ = "View2866048905";
 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":"View3921770292__root","textView":"View3921770292__textView","urlText":"View3921770292__urlText","suffix":"View3921770292__suffix"};
+export var classes = {"root":"View2866048905__root","textView":"View2866048905__textView","urlText":"View2866048905__urlText","suffix":"View2866048905__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/types.ts

@@ -10,34 +10,58 @@ export interface Focusable {
   focus: () => void;
 }
 
+export type EditTrigger =
+  | { kind: 'type'; key: string }
+  | 'enter'
+  | 'click'
+  | 'doubleClick';
+
 export interface CellEditProps<V> {
   value: V;
   onChange: (value: V) => void;
   onCommit: () => void;
   onCancel: () => void;
+  /**
+   * Signals that the cell is starting an editing operation that will move focus
+   * outside the table (e.g., opening a media manager or a modal). Calling this
+   * sets isEditing=true so useClearFocusOnBlur does not clear cell focus while
+   * the external UI is open. Pair with onCommit (after the operation succeeds)
+   * or onCancel (if the user dismisses without a value change).
+   */
+  onStartEdit?: () => void;
   /** Ref to the focusable input element. Used for type-to-edit (focusing the input when user starts typing on a focused cell). */
   inputRef?: React.MutableRefObject<Focusable | undefined | null>;
   typeConfig?: unknown;
   /** How edit mode was triggered. Edit components can use this to customize behavior (e.g., date picker auto-opens on 'type'). */
-  editTrigger?: { kind: 'type'; key: string } | 'enter' | 'doubleClick' | null;
+  editTrigger?: EditTrigger | null;
   /** Column-level validation rules. Edit components can derive UI behavior (e.g., maxLength blocking/tooltip) from these. */
   validation?: ValidationRule[];
 }
 
-/** Type-safe factory for defining cell types. V ensures all value-typed fields are consistent. */
-export function defineCellType<V>(cellType: {
+/**
+ * Type-safe definition for a cell type. Non-value-typed props are derived
+ * directly from CellType via Pick so new additions propagate automatically.
+ */
+export type CellTypeDefinition<V> = Pick<
+  CellType,
+  'editable' | 'clearable' | 'showEditWhenFocused'
+> & {
   type: CellType['type'];
   ViewComponent: React.ComponentType<CellViewProps<V>>;
   EditComponent?: React.ComponentType<CellEditProps<V>>;
   serialize?: (value: V) => string;
   deserialize?: (raw: string) => V;
   validate?: (value: V, rules?: ValidationRule[]) => string | null;
-  editable?: boolean;
-  clearable?: boolean;
   toggleValue?: (value: V) => V;
-  onTypeToEdit?: (params: { key: string; validation?: ValidationRule[] }) => { value?: V } | undefined;
+  editOnClick?: (value: V) => boolean;
+  onTypeToEdit?: (params: {
+    key: string;
+    validation?: ValidationRule[];
+  }) => { value?: V } | undefined;
   normalizeOnCommit?: (value: V) => V;
-}): CellType {
-  return cellType;
-}
+};
 
+/** Type-safe factory for defining cell types. V ensures all value-typed fields are consistent. */
+export function defineCellType<V>(cellType: CellTypeDefinition<V>): CellType {
+  return cellType as CellType;
+}

package/src/components/EditableTable/useAddRow.ts

@@ -0,0 +1,39 @@
+import { useCallback, useRef } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from '../../state/EditableTable';
+
+export function useAddRow<T, F extends FiltersMap>(
+  state: EditableTableState<T, F>,
+) {
+  const firstEditableColId = state.editableColumns.find(
+    (col) => col.editable !== false && !!col.setValue,
+  )?.id;
+
+  // Cached anchor so chained afterItemKey deps are avoided —
+  // prepareItemsToMergeIntoPage reverses createdPatches, so chained anchors
+  // would strand later items at the top of the table.
+  const addItemAnchorRef = useRef<string | undefined>(undefined);
+
+  const handleAddItem = useCallback(() => {
+    // Refresh the anchor if it's missing or no longer in the current page
+    // (e.g. after query/filter/pagination changes moved it off-page).
+    const isAnchorStale =
+      !addItemAnchorRef.current ||
+      !state.keyedItems.some((ki) => ki.key === addItemAnchorRef.current);
+    if (isAnchorStale) {
+      addItemAnchorRef.current =
+        state.keyedItems[state.keyedItems.length - 1]?.key;
+    }
+    const newKey = state.addItem(addItemAnchorRef.current);
+    if (!newKey || !firstEditableColId) return;
+    // RAF gives React one frame to render the new row before we try to focus it.
+    requestAnimationFrame(() => {
+      state.cellInteraction.startEdit(newKey, firstEditableColId, 'enter');
+    });
+  }, [state, firstEditableColId]);
+
+  const showAddItemRow =
+    !state.addItemDisabled && state.collection.initTask.status.isSuccess;
+
+  return { showAddItemRow, handleAddItem };
+}

package/src/components/EditableTable/useCellFocusAndEditing.ts

@@ -77,8 +77,12 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
         input.setSelectionRange(len, len);
       }, 0);
     } else {
-      // Let CellInteractionState own scroll positioning for the focused cell.
-      cellRef.current?.focus({ preventScroll: true });
+      // 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)) {
+        cellRef.current?.focus({ preventScroll: true });
+      }
     }
   }, [isFocused, isEditing, cellRef, editInputRef]);
 
@@ -102,7 +106,16 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
 
       if (e.key === 'Enter') {
         e.preventDefault();
-        handleActivate();
+        if (resolved?.showEditWhenFocused) {
+          // EditComponent is always visible. Focus into its first interactive
+          // element (inner focus) rather than entering full edit mode now —
+          // the cell type calls onStartEdit() itself right before any external
+          // UI (media manager / modal) opens, which is the only time isEditing
+          // needs to be true for useClearFocusOnBlur protection.
+          editInputRef.current?.focus();
+        } else {
+          handleActivate();
+        }
         return;
       }
 

package/src/components/EditableTable/useClearFocusOnBlur.ts

@@ -4,6 +4,12 @@ import type { CellInteractionState } from '../../state/EditableTable/CellInterac
 
 /**
  * Clears cell focus when the user clicks outside the table container.
+ *
+ * Skips clearFocus() while isEditing=true so that portaled editors (date
+ * picker, select dropdown, media manager) can take focus without causing the
+ * cell to lose its editing state. Cell types that open external UI are
+ * responsible for calling onStartEdit() before the modal opens (which sets
+ * isEditing=true) and onCancel()/onCommit() when it closes.
  */
 export function useClearFocusOnBlur<T, F extends FiltersMap>(
   cellInteraction: CellInteractionState<T, F>,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain1641086988";
+var _namespace_ = "EntityPagePlain758988730";
 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":"EntityPagePlain1641086988__root"};
+export var classes = {"root":"EntityPagePlain758988730__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_ = "Fade329759489";
+var _namespace_ = "Fade4037385382";
 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":"Fade329759489__root"};
+export var classes = {"root":"Fade4037385382__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};