@wix/patterns 1.366.0 → 1.369.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade817618918";
+var _namespace_ = "Fade3987565292";
 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":"Fade817618918__root"};
+export var classes = {"root":"Fade3987565292__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_ = "Heading2420093600";
+var _namespace_ = "Heading1326594153";
 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":"Heading2420093600__root"};
+export var classes = {"root":"Heading1326594153__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_ = "ImportStepUpload972892750";
+var _namespace_ = "ImportStepUpload2527291098";
 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":"ImportStepUpload972892750__root","fileUpload":"ImportStepUpload972892750__fileUpload"};
+export var classes = {"root":"ImportStepUpload2527291098__root","fileUpload":"ImportStepUpload2527291098__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_ = "InputOverflow2859286953";
+var _namespace_ = "InputOverflow2955188721";
 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":"InputOverflow2859286953__root"};
+export var classes = {"root":"InputOverflow2955188721__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_ = "LoadingRow641118317";
+var _namespace_ = "LoadingRow488784554";
 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":"LoadingRow641118317__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow641118317__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow488784554__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow488784554__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_ = "MaxHeightText222894855";
+var _namespace_ = "MaxHeightText2696233809";
 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":"MaxHeightText222894855__root"};
+export var classes = {"root":"MaxHeightText2696233809__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_ = "MaxLines3413711216";
+var _namespace_ = "MaxLines3057111191";
 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":"MaxLines3413711216__root"};
+export var classes = {"root":"MaxLines3057111191__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_ = "MultiBulkActionToolbar2017077380";
+var _namespace_ = "MultiBulkActionToolbar821506402";
 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":"MultiBulkActionToolbar2017077380__root","leftGroupWrapper":"MultiBulkActionToolbar2017077380__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2017077380__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2017077380__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar821506402__root","leftGroupWrapper":"MultiBulkActionToolbar821506402__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar821506402__selectedCountItem","selectedCountText":"MultiBulkActionToolbar821506402__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_ = "NestedTablePlaceholderStatesRow3998706015";
+var _namespace_ = "NestedTablePlaceholderStatesRow3678363266";
 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":"NestedTablePlaceholderStatesRow3998706015__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3678363266__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_ = "NestedTableRow1007766577";
+var _namespace_ = "NestedTableRow3906551943";
 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":"NestedTableRow1007766577__root","firstLevel":"NestedTableRow1007766577__firstLevel","placeholder":"NestedTableRow1007766577__placeholder","parentHovered":"NestedTableRow1007766577__parentHovered"};
+export var classes = {"root":"NestedTableRow3906551943__root","firstLevel":"NestedTableRow3906551943__firstLevel","placeholder":"NestedTableRow3906551943__placeholder","parentHovered":"NestedTableRow3906551943__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_ = "MultipleDragOverlayEffect2755059664";
+var _namespace_ = "MultipleDragOverlayEffect1706234059";
 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":"MultipleDragOverlayEffect2755059664__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1706234059__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_ = "NestedTableDragAndDropRow1618883091";
+var _namespace_ = "NestedTableDragAndDropRow963030393";
 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":"NestedTableDragAndDropRow1618883091__root"};
+export var classes = {"root":"NestedTableDragAndDropRow963030393__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_ = "PickerContent3783271928";
+var _namespace_ = "PickerContent4004721251";
 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":"PickerContent3783271928__root"};
+export var classes = {"root":"PickerContent4004721251__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep769599043";
+var _namespace_ = "PickerContentAdditionalStep3378583378";
 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":"PickerContentAdditionalStep769599043__root","titles":"PickerContentAdditionalStep769599043__titles","suffix":"PickerContentAdditionalStep769599043__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3378583378__root","titles":"PickerContentAdditionalStep3378583378__titles","suffix":"PickerContentAdditionalStep3378583378__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3453398691";
+var _namespace_ = "SkeletonCard2332620532";
 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":"SkeletonCard3453398691__root","headerLoading":"SkeletonCard3453398691__headerLoading"};
+export var classes = {"root":"SkeletonCard2332620532__root","headerLoading":"SkeletonCard2332620532__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/TableGridSwitchButton/TableGridSwitchButton.tsx

@@ -7,35 +7,16 @@ import {
   SegmentedToggle,
   Tooltip,
 } from '@wix/design-system';
-import {
-  LayoutGallery,
-  LayoutList,
-  LayoutSplit,
-} from '@wix/wix-ui-icons-common';
+import { LayoutGallery, LayoutList } from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { TranslationsKeys } from '@wix/bex-core';
 import { ViewType, ViewTypeState } from '../../state/ViewTypeState';
-
-const layoutOptions: ViewType[] = ['table', 'grid'];
+import { layoutOptions, layoutConfig } from './layoutConfig';
 
 export interface TableGridSwitchButtonProps {
   state: ViewTypeState;
 }
 
-const layoutConfig: Record<
-  ViewType,
-  { icon: React.ReactNode; translationKey: TranslationsKeys }
-> = {
-  table: {
-    icon: <LayoutSplit />,
-    translationKey: 'cairo.table.layout.table' as TranslationsKeys,
-  },
-  grid: {
-    icon: <LayoutGallery />,
-    translationKey: 'cairo.table.layout.grid' as TranslationsKeys,
-  },
-};
-
 function _TableGridSwitchButton(props: TableGridSwitchButtonProps) {
   const { translate: t, experiments } = useWixPatternsContainer();
   const { state } = props;

package/src/components/TableGridSwitchButton/layoutConfig.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { LayoutGallery, LayoutSplit } from '@wix/wix-ui-icons-common';
+import { TranslationsKeys } from '@wix/bex-core';
+import { ViewType } from '../../state/ViewTypeState';
+
+export const layoutOptions: ViewType[] = ['table', 'grid'];
+
+export const layoutConfig: Record<
+  ViewType,
+  { icon: React.ReactNode; translationKey: TranslationsKeys }
+> = {
+  table: {
+    icon: <LayoutSplit />,
+    translationKey: 'cairo.table.layout.table' as TranslationsKeys,
+  },
+  grid: {
+    icon: <LayoutGallery />,
+    translationKey: 'cairo.table.layout.grid' as TranslationsKeys,
+  },
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter4088703764";
+var _namespace_ = "TabsFilter409906628";
 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":"TabsFilter4088703764__root","title":"TabsFilter4088703764__title"};
+export var classes = {"root":"TabsFilter409906628__root","title":"TabsFilter409906628__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2705747369";
+var _namespace_ = "common1802833007";
 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":"common2705747369__root","column":"common2705747369__column","fullHeight":"common2705747369__fullHeight"};
+export var classes = {"root":"common1802833007__root","column":"common1802833007__column","fullHeight":"common1802833007__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useStaticListFilterCollection.ts

@@ -46,6 +46,7 @@ export function useStaticListFilterCollection<T>(
 
         return {
           items: filteredList,
+          hasNext: false,
         };
       },
       queryOptions: {

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/EditableTable/CellInteractionState.ts

@@ -15,6 +15,7 @@ export class CellInteractionState<T, F extends FiltersMap> {
   editTrigger: EditTrigger | null = null;
   selectedCells = new Set<string>();
   selectionAnchor: Cell | null = null;
+  focusedCellElement: HTMLElement | null = null;
   private readonly _parent: EditableTableState<T, F>;
   private readonly _commitHandler: CommitHandler;
 
@@ -262,6 +263,68 @@ export class CellInteractionState<T, F extends FiltersMap> {
     return result;
   }
 
+  scrollFocusedCellIntoView() {
+    if (typeof requestAnimationFrame === 'undefined') {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const cellEl = this.focusedCellElement;
+      if (!cellEl) {
+        return;
+      }
+
+      cellEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      this._adjustScrollForStickyElements(cellEl);
+    });
+  }
+
+  /**
+   * After scrollIntoView, the cell may be hidden behind sticky columns
+   * or the sticky header. If so, scroll a bit more to fully reveal it.
+   */
+  private _adjustScrollForStickyElements(cellEl: HTMLElement) {
+    const td = cellEl.parentElement;
+    if (!td) {
+      return;
+    }
+
+    // Horizontal: check if cell is behind a sticky column.
+    // Sticky columns stay in place while other columns scroll, so their
+    // bounding rect's right edge can overlap the focused cell's left edge.
+    const row = td.parentElement;
+    const cellLeft = td.getBoundingClientRect().left;
+    if (row) {
+      let maxPrevRight = 0;
+      for (const child of Array.from(row.children)) {
+        if (child === td) {
+          break;
+        }
+        const right = child.getBoundingClientRect().right;
+        if (right > maxPrevRight) {
+          maxPrevRight = right;
+        }
+      }
+      if (cellLeft < maxPrevRight) {
+        const scrollParent = cellEl.closest('table')?.parentElement;
+        if (scrollParent) {
+          scrollParent.scrollLeft -= maxPrevRight - cellLeft;
+        }
+      }
+    }
+
+    // Vertical: check if cell is behind the sticky header/toolbar.
+    const headerEl = this._parent.tableState.headerElement;
+    const scrollEl = this._parent.collection.scrollableContent;
+    if (headerEl && scrollEl) {
+      const headerBottom = headerEl.getBoundingClientRect().bottom;
+      const cellTop = td.getBoundingClientRect().top;
+      if (cellTop < headerBottom) {
+        // +2px buffer to prevent the cell from touching the header border
+        scrollEl.scrollTop -= headerBottom - cellTop + 2;
+      }
+    }
+  }
+
   getSelectionBorder(rowKey: string, columnId: string): CellBorder {
     if (!this.isCellSelected(rowKey, columnId)) {
       return noBorder;

package/src/state/EditableTable/types.ts

@@ -68,8 +68,10 @@ export interface CellTypeConfigMap {
   number: never;
   boolean: never;
   url: never;
+  email: never;
   select: SelectCellConfig;
   date: never;
+  object: never;
   custom: Record<string, unknown>;
 }
 

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/TableState.ts

@@ -70,6 +70,9 @@ export class TableState<T, F extends FiltersMap>
 
   tableDragAndDropState: TableDragAndDropStateBase<T, F> | null = null;
 
+  /** The sticky table header element (column headers row) */
+  headerElement: HTMLElement | null = null;
+
   constructor(params: TableStateParams<T, F>) {
     this.toolbar =
       params.toolbar ??