@wix/patterns 1.374.0 → 1.375.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect531256030";
+var _namespace_ = "MultipleDragOverlayEffect312660433";
 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":"MultipleDragOverlayEffect531256030__root"};
+export var classes = {"root":"MultipleDragOverlayEffect312660433__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_ = "NestedTableDragAndDropRow2355513023";
+var _namespace_ = "NestedTableDragAndDropRow2206630667";
 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":"NestedTableDragAndDropRow2355513023__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2206630667__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/OperatorFilterPicker/OperatorFilterPicker.tsx

@@ -75,7 +75,6 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
           dataHook="operator-picker-operator-dropdown"
           appendTo="window"
           flip
-          fixed
           placement="bottom-start"
         >
           {({ toggle }) => (
@@ -95,7 +94,7 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
       {showValueInput && (
         <FormField>
           <Input
-            border={'round'}
+            border="round"
             value={state.value?.toString() || ''}
             placeholder={t('cairo.filterOperator.valuePlaceholder')}
             onChange={(e) => state.setValue(e.target.value as T)}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent2183702653";
+var _namespace_ = "PickerContent2384689736";
 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":"PickerContent2183702653__root"};
+export var classes = {"root":"PickerContent2384689736__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_ = "PickerContentAdditionalStep897378786";
+var _namespace_ = "PickerContentAdditionalStep2818293485";
 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":"PickerContentAdditionalStep897378786__root","titles":"PickerContentAdditionalStep897378786__titles","suffix":"PickerContentAdditionalStep897378786__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2818293485__root","titles":"PickerContentAdditionalStep2818293485__titles","suffix":"PickerContentAdditionalStep2818293485__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_ = "PickerTableListItem1804547356";
+var _namespace_ = "PickerTableListItem2916633825";
 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":"PickerTableListItem1804547356__root"};
+export var classes = {"root":"PickerTableListItem2916633825__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/RequestId/assets/locale/messages_cs.json

@@ -1,5 +1,5 @@
 {
-  "description": "Pokud nahlásíte tuto chybu péči o zákazníky, sdílejte ID požadavku, aby jej mohli prošetřit.",
   "cta": "Kopírovat ID",
+  "description": "Pokud nahlásíte tuto chybu péči o zákazníky, sdílejte ID požadavku, aby jej mohli prošetřit.",
   "copiedSuccess": "Zkopírováno!"
 }

package/src/components/RequestId/assets/locale/messages_da.json

@@ -1,5 +1,5 @@
 {
   "description": "Hvis du rapporterer denne fejl til kundeservice, skal du dele dette anmodnings-ID, så de kan undersøge sagen.",
-  "cta": "Kopiér ID",
-  "copiedSuccess": "Kopieret."
+  "copiedSuccess": "Kopieret.",
+  "cta": "Kopiér ID"
 }

package/src/components/RequestId/assets/locale/messages_de.json

@@ -1,5 +1,5 @@
 {
   "description": "Wenn du diesen Fehler dem Support-Team meldest, teile diese Anfrage-ID, damit diese die Anfrage prüfen können.",
-  "cta": "ID kopieren",
-  "copiedSuccess": "Kopiert"
+  "copiedSuccess": "Kopiert",
+  "cta": "ID kopieren"
 }

package/src/components/RequestId/assets/locale/messages_en.json

@@ -1,5 +1,5 @@
 {
-  "description": "If you report this error to Customer Care, share this request ID so they can investigate.",
   "cta": "Copy ID",
-  "copiedSuccess": "Copied!"
+  "copiedSuccess": "Copied!",
+  "description": "If you report this error to Customer Care, share this request ID so they can investigate."
 }

package/src/components/RequestId/assets/locale/messages_es.json

@@ -1,5 +1,5 @@
 {
-  "description": "Si reportas este error a Atención al Cliente, comparte este ID de solicitud para que puedan investigarlo.",
+  "copiedSuccess": "Copiado.",
   "cta": "Copiar ID",
-  "copiedSuccess": "Copiado."
+  "description": "Si reportas este error a Atención al Cliente, comparte este ID de solicitud para que puedan investigarlo."
 }

package/src/components/RequestId/assets/locale/messages_hi.json

@@ -1,5 +1,5 @@
 {
   "description": "यदि आप इस त्रुटि की रिपोर्ट ग्राहक सेवा को करते हैं, तो यह अनुरोध आईडी साझा करें ताकि वे जांच कर सकें।",
-  "cta": "आईडी कॉपी करें",
-  "copiedSuccess": "कॉपी कर लिया!"
+  "copiedSuccess": "कॉपी कर लिया!",
+  "cta": "आईडी कॉपी करें"
 }

package/src/components/RequestId/assets/locale/messages_id.json

@@ -1,5 +1,5 @@
 {
   "description": "Jika Anda melaporkan kesalahan ini ke Layanan Pelanggan, bagikan ID permintaan ini agar mereka dapat menyelidikinya.",
-  "cta": "Salin ID",
-  "copiedSuccess": "Disalin!"
+  "copiedSuccess": "Disalin!",
+  "cta": "Salin ID"
 }

package/src/components/RequestId/assets/locale/messages_it.json

@@ -1,5 +1,5 @@
 {
-  "description": "Se segnali un errore all'Assistenza clienti, condividi l'ID di questa richiesta per aiutarli a indagare.",
   "cta": "Copia ID",
+  "description": "Se segnali un errore all'Assistenza clienti, condividi l'ID di questa richiesta per aiutarli a indagare.",
   "copiedSuccess": "Copiato!"
 }

package/src/components/RequestId/assets/locale/messages_ja.json

@@ -1,5 +1,5 @@
 {
-  "description": "このエラーをカスタマーケアに報告する際、このリクエスト ID を共有してください。調査に役立ちます。",
   "cta": "ID をコピー",
+  "description": "このエラーをカスタマーケアに報告する際、このリクエスト ID を共有してください。調査に役立ちます。",
   "copiedSuccess": "コピー済み"
 }

package/src/components/RequestId/assets/locale/messages_nl.json

@@ -1,5 +1,5 @@
 {
-  "description": "Als je deze fout meldt bij de klantenservice, deel dan deze aanvraag-ID zodat ze dit kunnen onderzoeken.",
   "cta": "ID kopiëren",
-  "copiedSuccess": "Gekopieerd"
+  "copiedSuccess": "Gekopieerd",
+  "description": "Als je deze fout meldt bij de klantenservice, deel dan deze aanvraag-ID zodat ze dit kunnen onderzoeken."
 }

package/src/components/RequestId/assets/locale/messages_pl.json

@@ -1,5 +1,5 @@
 {
-  "description": "Jeśli skontaktujesz się z obsługą klienta w sprawie tego błędu, podaj ten identyfikator żądania, aby umożliwić jego weryfikację.",
   "cta": "Skopiuj identyfikator",
+  "description": "Jeśli skontaktujesz się z obsługą klienta w sprawie tego błędu, podaj ten identyfikator żądania, aby umożliwić jego weryfikację.",
   "copiedSuccess": "Skopiowano!"
 }

package/src/components/RequestId/assets/locale/messages_pt.json

@@ -1,5 +1,5 @@
 {
-  "description": "Se você for reportar esse erro ao Apoio ao Cliente, compartilhe esse ID de solicitação para que eles possam investigar.",
   "cta": "Copiar ID",
+  "description": "Se você for reportar esse erro ao Apoio ao Cliente, compartilhe esse ID de solicitação para que eles possam investigar.",
   "copiedSuccess": "Copiado"
 }

package/src/components/RequestId/assets/locale/messages_ru.json

@@ -1,5 +1,5 @@
 {
+  "copiedSuccess": "Скопировано!",
   "description": "Если вы сообщите об ошибке команде поддержки, отправьте этот идентификатор запроса, чтобы они могли разобраться.",
-  "cta": "Копировать ID",
-  "copiedSuccess": "Скопировано!"
+  "cta": "Копировать ID"
 }

package/src/components/RequestId/assets/locale/messages_sv.json

@@ -1,5 +1,5 @@
 {
-  "description": "Ange detta förfrågnings-id om du rapporterar felet till kundtjänst, så att de kan undersöka felet.",
   "cta": "Kopiera id",
+  "description": "Ange detta förfrågnings-id om du rapporterar felet till kundtjänst, så att de kan undersöka felet.",
   "copiedSuccess": "Kopierat!"
 }

package/src/components/RequestId/assets/locale/messages_th.json

@@ -1,5 +1,5 @@
 {
-  "description": "หากคุณรายงานปัญหานี้ให้ฝ่ายดูแลลูกค้าทราบ โปรดแจ้ง ID คำขอนี้เพื่อให้พวกเขาตรวจสอบได้",
   "cta": "คัดลอก ID",
+  "description": "หากคุณรายงานปัญหานี้ให้ฝ่ายดูแลลูกค้าทราบ โปรดแจ้ง ID คำขอนี้เพื่อให้พวกเขาตรวจสอบได้",
   "copiedSuccess": "คัดลอกแล้ว !"
 }

package/src/components/RequestId/assets/locale/messages_tr.json

@@ -1,5 +1,5 @@
 {
-  "description": "Bu hatayı müşteri hizmetlerine bildirirseniz araştırılabilmesi için bu talep kimliğini paylaşın.",
+  "copiedSuccess": "Kopyalandı!",
   "cta": "Kimliği Kopyala",
-  "copiedSuccess": "Kopyalandı!"
+  "description": "Bu hatayı müşteri hizmetlerine bildirirseniz araştırılabilmesi için bu talep kimliğini paylaşın."
 }

package/src/components/RequestId/assets/locale/messages_uk.json

@@ -1,5 +1,5 @@
 {
-  "description": "Якщо ви повідомляєте про цю помилку Службі підтримки, надайте їм ідентифікатор запиту, щоб вони могли дослідити помилку.",
   "cta": "Копіювати ідентифікатор",
+  "description": "Якщо ви повідомляєте про цю помилку Службі підтримки, надайте їм ідентифікатор запиту, щоб вони могли дослідити помилку.",
   "copiedSuccess": "Скопійовано"
 }

package/src/components/RequestId/assets/locale/messages_zh.json

@@ -1,5 +1,5 @@
 {
+  "copiedSuccess": "已複製！",
   "description": "如果您向顧客服務報告此錯誤，請提供此請求 ID 以便調查。",
-  "cta": "複製 ID",
-  "copiedSuccess": "已複製！"
+  "cta": "複製 ID"
 }

package/src/components/RequestId/assets/locale/version_file

@@ -0,0 +1 @@
+1774973451

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent189900633";
+var _namespace_ = "ScrollableContent3827443796";
 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":"ScrollableContent189900633__root"};
+export var classes = {"root":"ScrollableContent3827443796__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_ = "SkeletonCard4107778614";
+var _namespace_ = "SkeletonCard1215955230";
 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":"SkeletonCard4107778614__root","headerLoading":"SkeletonCard4107778614__headerLoading"};
+export var classes = {"root":"SkeletonCard1215955230__root","headerLoading":"SkeletonCard1215955230__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_ = "SlidingModal2746710606";
+var _namespace_ = "SlidingModal2881455252";
 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":"SlidingModal2746710606__root"};
+export var classes = {"root":"SlidingModal2881455252__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3564855939";
+var _namespace_ = "TabsFilter3422538499";
 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":"TabsFilter3564855939__root","title":"TabsFilter3564855939__title"};
+export var classes = {"root":"TabsFilter3422538499__root","title":"TabsFilter3422538499__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_ = "ManageTagsModal361100246";
+var _namespace_ = "ManageTagsModal292114332";
 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":"ManageTagsModal361100246__root"};
+export var classes = {"root":"ManageTagsModal292114332__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsNotification.tsx

@@ -55,7 +55,9 @@ export const ManageTagsNotification = ({
       onDismiss={() => onClose(toastConfig)}
       action={actionElement}
     >
-      <span data-hook="manage-tags-modal-notification-message">{toastConfig.message}</span>
+      <span data-hook="manage-tags-modal-notification-message">
+        {toastConfig.message}
+      </span>
     </StatusToast>
   );
 };

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem793996985";
+var _namespace_ = "ToolbarItem51720077";
 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":"ToolbarItem793996985__root"};
+export var classes = {"root":"ToolbarItem51720077__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_ = "ToolbarItemBox3984604464";
+var _namespace_ = "ToolbarItemBox3223110149";
 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":"ToolbarItemBox3984604464__root"};
+export var classes = {"root":"ToolbarItemBox3223110149__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_ = "common2106460737";
+var _namespace_ = "common2673743911";
 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":"common2106460737__root","column":"common2106460737__column","fullHeight":"common2106460737__fullHeight"};
+export var classes = {"root":"common2673743911__root","column":"common2673743911__column","fullHeight":"common2673743911__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/testkit/unidriver.ts

@@ -29,3 +29,5 @@ export { MoreActionsUniDriver } from '../../components/MoreActions/MoreActions.u
 export { CollectionDropdownFilterUniDriver } from '../../components/DropdownFilter/CollectionDropdownFilter.uni.driver';
 export { SuggestionsUniDriver } from '../../components/Suggestions/Suggestions.uni.driver';
 export { MarketingCardUniDriver } from '../../components/Suggestions/MarketingCard.uni.driver';
+export { default as EditableTableUniDriver } from '../../components/EditableTable/EditableTable.uni.driver';
+export { EditableCellUniDriver } from '../../components/EditableTable/EditableCell.uni.driver';

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

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

package/src/state/EditableTable/CellInteractionState.ts

@@ -15,7 +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;
+  focusedCellElement: HTMLElement | null | undefined = null;
   /** True while the user is performing a mouse sweep selection. */
   isSelecting = false;
   private readonly _parent: EditableTableState<T, F>;
@@ -84,6 +84,12 @@ export class CellInteractionState<T, F extends FiltersMap> {
       this.editTrigger = trigger;
       this.editingCell = { rowKey: rk, columnId: cid };
       this.focusedCell = { rowKey: rk, columnId: cid };
+      // Collapse any multi-cell range selection down to the editing cell.
+      // Without this, range-selected cells remain visually selected alongside
+      // the editing cell, producing an invalid "two cells selected" state.
+      this.selectedCells.clear();
+      this.selectedCells.add(cellKey(rk, cid));
+      this.selectionAnchor = { rowKey: rk, columnId: cid };
     }
   }
 
@@ -334,15 +340,21 @@ export class CellInteractionState<T, F extends FiltersMap> {
       }
     }
 
-    // Vertical: check if cell is behind the sticky header/toolbar.
+    // Vertical: same pattern — check if cell is behind the sticky header
+    // or below the visible area of the page-level scroll container.
     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;
+    if (scrollEl) {
+      const cellRect = td.getBoundingClientRect();
+      const scrollRect = scrollEl.getBoundingClientRect();
+      const effectiveTop = headerEl
+        ? headerEl.getBoundingClientRect().bottom
+        : scrollRect.top;
+
+      if (cellRect.top < effectiveTop) {
+        scrollEl.scrollTop -= effectiveTop - cellRect.top + 2;
+      } else if (cellRect.bottom > scrollRect.bottom) {
+        scrollEl.scrollTop += cellRect.bottom - scrollRect.bottom + 2;
       }
     }
   }

package/src/state/EditableTable/EditableTableState.ts

@@ -201,6 +201,25 @@ export class EditableTableState<T, F extends FiltersMap>
 
   handleCellClick(rowKey: string, columnId: string, shiftKey: boolean) {
     if (this.cellInteraction.isEditing) {
+      if (this.cellInteraction.isCellEditing(rowKey, columnId)) {
+        // Click landed inside the active editor — let the editor handle it.
+        return;
+      }
+      // Shift-click while editing: ignore — extending a range selection during
+      // an active edit is not a meaningful action.
+      if (shiftKey) {
+        return;
+      }
+      const column = this._columnMap.get(columnId);
+      const resolved = column ? this.resolveCellType(column.cellType) : null;
+      // Toggle-cell click while editing: ignore — committing and simultaneously
+      // toggling a boolean would be two unexpected actions from one click.
+      if (resolved?.toggleValue) {
+        return;
+      }
+      // Plain click on a different cell: commit the edit and move focus.
+      this.cellInteraction.commitEdit();
+      this.cellInteraction.focusCell(rowKey, columnId);
       return;
     }
 
@@ -226,6 +245,14 @@ export class EditableTableState<T, F extends FiltersMap>
     if (this.updateItemDisabled) {
       return;
     }
+    const column = this._columnMap.get(columnId);
+    const resolved = column ? this.resolveCellType(column.cellType) : null;
+    // Toggle-value cells (e.g. boolean) activate on single click, not double-click.
+    // Entering edit mode on double-click would apply the editing box-shadow
+    // without any EditComponent being shown, causing a visual border glitch.
+    if (resolved?.toggleValue) {
+      return;
+    }
     if (this.isCellEditable(rowKey, columnId)) {
       this.cellInteraction.startEdit(rowKey, columnId, 'doubleClick');
     }

package/src/state/EditableTable/types.ts

@@ -60,7 +60,8 @@ export interface CellType {
    *  CMS-web pattern: text clears to '', number clears only for digits, date blocks non-digits. */
   onTypeToEdit?: (params: {
     key: string;
-  }) => { value?: any; prevent?: boolean } | undefined;
+  }) => { value?: any } | undefined;
+
 }
 
 export interface CellTypeConfigMap {

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

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