@wix/patterns 1.378.0 → 1.381.0

package/dist/cjs/components/EditableTable/types.js

@@ -2,6 +2,11 @@
 
 exports.__esModule = true;
 exports.defineCellType = defineCellType;
+/**
+ * Type-safe definition for a cell type. Non-value-typed props are derived
+ * directly from CellType via Pick so new additions propagate automatically.
+ */
+
 /** Type-safe factory for defining cell types. V ensures all value-typed fields are consistent. */
 function defineCellType(cellType) {
   return cellType;

package/dist/cjs/components/EditableTable/types.js.map

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

package/dist/cjs/components/EditableTable/useAddRow.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useAddRow = useAddRow;
+var _react = require("react");
+function useAddRow(state) {
+  var _state$editableColumn;
+  const firstEditableColId = (_state$editableColumn = state.editableColumns.find(col => col.editable !== false && !!col.setValue)) == null ? void 0 : _state$editableColumn.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 = (0, _react.useRef)(undefined);
+  const handleAddItem = (0, _react.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) {
+      var _state$keyedItems;
+      addItemAnchorRef.current = (_state$keyedItems = state.keyedItems[state.keyedItems.length - 1]) == null ? void 0 : _state$keyedItems.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
+  };
+}
+//# sourceMappingURL=useAddRow.js.map

package/dist/cjs/components/EditableTable/useAddRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","useAddRow","state","_state$editableColumn","firstEditableColId","editableColumns","find","col","editable","setValue","id","addItemAnchorRef","useRef","undefined","handleAddItem","useCallback","isAnchorStale","current","keyedItems","some","ki","key","_state$keyedItems","length","newKey","addItem","requestAnimationFrame","cellInteraction","startEdit","showAddItemRow","addItemDisabled","collection","initTask","status","isSuccess"],"sources":["../../../../src/components/EditableTable/useAddRow.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport type { FiltersMap } from '@wix/bex-core';\nimport type { EditableTableState } from '../../state/EditableTable';\n\nexport function useAddRow<T, F extends FiltersMap>(\n  state: EditableTableState<T, F>,\n) {\n  const firstEditableColId = state.editableColumns.find(\n    (col) => col.editable !== false && !!col.setValue,\n  )?.id;\n\n  // Cached anchor so chained afterItemKey deps are avoided —\n  // prepareItemsToMergeIntoPage reverses createdPatches, so chained anchors\n  // would strand later items at the top of the table.\n  const addItemAnchorRef = useRef<string | undefined>(undefined);\n\n  const handleAddItem = useCallback(() => {\n    // Refresh the anchor if it's missing or no longer in the current page\n    // (e.g. after query/filter/pagination changes moved it off-page).\n    const isAnchorStale =\n      !addItemAnchorRef.current ||\n      !state.keyedItems.some((ki) => ki.key === addItemAnchorRef.current);\n    if (isAnchorStale) {\n      addItemAnchorRef.current =\n        state.keyedItems[state.keyedItems.length - 1]?.key;\n    }\n    const newKey = state.addItem(addItemAnchorRef.current);\n    if (!newKey || !firstEditableColId) return;\n    // RAF gives React one frame to render the new row before we try to focus it.\n    requestAnimationFrame(() => {\n      state.cellInteraction.startEdit(newKey, firstEditableColId, 'enter');\n    });\n  }, [state, firstEditableColId]);\n\n  const showAddItemRow =\n    !state.addItemDisabled && state.collection.initTask.status.isSuccess;\n\n  return { showAddItemRow, handleAddItem };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIO,SAASC,SAASA,CACvBC,KAA+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,kBAAkB,IAAAD,qBAAA,GAAGD,KAAK,CAACG,eAAe,CAACC,IAAI,CAClDC,GAAG,IAAKA,GAAG,CAACC,QAAQ,KAAK,KAAK,IAAI,CAAC,CAACD,GAAG,CAACE,QAC3C,CAAC,qBAF0BN,qBAAA,CAExBO,EAAE;;EAEL;EACA;EACA;EACA,MAAMC,gBAAgB,GAAG,IAAAC,aAAM,EAAqBC,SAAS,CAAC;EAE9D,MAAMC,aAAa,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtC;IACA;IACA,MAAMC,aAAa,GACjB,CAACL,gBAAgB,CAACM,OAAO,IACzB,CAACf,KAAK,CAACgB,UAAU,CAACC,IAAI,CAAEC,EAAE,IAAKA,EAAE,CAACC,GAAG,KAAKV,gBAAgB,CAACM,OAAO,CAAC;IACrE,IAAID,aAAa,EAAE;MAAA,IAAAM,iBAAA;MACjBX,gBAAgB,CAACM,OAAO,IAAAK,iBAAA,GACtBpB,KAAK,CAACgB,UAAU,CAAChB,KAAK,CAACgB,UAAU,CAACK,MAAM,GAAG,CAAC,CAAC,qBAA7CD,iBAAA,CAA+CD,GAAG;IACtD;IACA,MAAMG,MAAM,GAAGtB,KAAK,CAACuB,OAAO,CAACd,gBAAgB,CAACM,OAAO,CAAC;IACtD,IAAI,CAACO,MAAM,IAAI,CAACpB,kBAAkB,EAAE;IACpC;IACAsB,qBAAqB,CAAC,MAAM;MAC1BxB,KAAK,CAACyB,eAAe,CAACC,SAAS,CAACJ,MAAM,EAAEpB,kBAAkB,EAAE,OAAO,CAAC;IACtE,CAAC,CAAC;EACJ,CAAC,EAAE,CAACF,KAAK,EAAEE,kBAAkB,CAAC,CAAC;EAE/B,MAAMyB,cAAc,GAClB,CAAC3B,KAAK,CAAC4B,eAAe,IAAI5B,KAAK,CAAC6B,UAAU,CAACC,QAAQ,CAACC,MAAM,CAACC,SAAS;EAEtE,OAAO;IAAEL,cAAc;IAAEf;EAAc,CAAC;AAC1C","ignoreList":[]}

package/dist/cjs/components/EditableTable/useCellFocusAndEditing.js

@@ -63,10 +63,15 @@ function useCellFocusAndEditing({
       }, 0);
     } else {
       var _cellRef$current;
-      // Let CellInteractionState own scroll positioning for the focused cell.
-      (_cellRef$current = cellRef.current) == null || _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 = cellRef.current) != null && _cellRef$current.contains(document.activeElement))) {
+        var _cellRef$current2;
+        (_cellRef$current2 = cellRef.current) == null || _cellRef$current2.focus({
+          preventScroll: true
+        });
+      }
     }
   }, [isFocused, isEditing, cellRef, editInputRef]);
   const handleActivate = (0, _react.useCallback)(() => {
@@ -87,7 +92,17 @@ function useCellFocusAndEditing({
     }
     if (e.key === 'Enter') {
       e.preventDefault();
-      handleActivate();
+      if (resolved != null && resolved.showEditWhenFocused) {
+        var _editInputRef$current;
+        // 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 = editInputRef.current) == null || _editInputRef$current.focus();
+      } else {
+        handleActivate();
+      }
       return;
     }
 
@@ -96,7 +111,7 @@ function useCellFocusAndEditing({
     // startEdit() must come before setEditingValue() because it resets
     // editingValue to undefined.
     if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.nativeEvent.isComposing) {
-      var _editInputRef$current;
+      var _editInputRef$current2;
       // Cell-type-level gate: only cell types that define onTypeToEdit support
       // type-to-edit. Absence of onTypeToEdit is the natural opt-out (e.g. boolean).
       if (!(resolved != null && resolved.onTypeToEdit)) {
@@ -128,7 +143,7 @@ function useCellFocusAndEditing({
       // Best-effort: editInputRef.current is null here because the Edit
       // component only mounts after isEditing flips. The useEffect above
       // is the reliable focus path once the component renders.
-      (_editInputRef$current = editInputRef.current) == null || _editInputRef$current.focus();
+      (_editInputRef$current2 = editInputRef.current) == null || _editInputRef$current2.focus();
       e.stopPropagation();
     }
   }, [editInputRef, isFocused, isEditable, isEditing, state, cellInteraction, resolved, handleActivate]);

package/dist/cjs/components/EditableTable/useCellFocusAndEditing.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","useCellFocusAndEditing","state","rowKey","columnId","cellRef","editInputRef","cellInteraction","column","_columnMap","get","resolved","resolveCellTypeByColumnId","id","isFocused","isCellFocused","isEditing","isCellEditing","isEditable","isCellEditable","useLayoutEffect","focusedCellElement","current","useEffect","document","activeElement","focus","setTimeout","_input$value","input","selectionStart","selectionEnd","len","value","length","setSelectionRange","_cellRef$current","preventScroll","handleActivate","useCallback","toggleValue","cellValue","toggleCell","startEdit","onKeyDown","e","updateItemDisabled","key","preventDefault","ctrlKey","metaKey","altKey","nativeEvent","isComposing","_editInputRef$current","onTypeToEdit","typeResult","validation","undefined","kind","setEditingValue","stopPropagation","useMemo"],"sources":["../../../../src/components/EditableTable/useCellFocusAndEditing.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useCallback, useMemo } from 'react';\nimport type { FiltersMap } from '@wix/bex-core';\nimport type { EditableTableState } from '../../state/EditableTable';\nimport { Focusable } from './types';\n\ninterface UseCellFocusAndEditingParams<T, F extends FiltersMap> {\n  state: EditableTableState<T, F>;\n  rowKey: string;\n  columnId: string;\n  cellRef: React.MutableRefObject<HTMLDivElement | null | undefined>;\n  editInputRef: React.MutableRefObject<Focusable | null | undefined>;\n}\n\nexport function useCellFocusAndEditing<T, F extends FiltersMap>({\n  state,\n  rowKey,\n  columnId,\n  cellRef,\n  editInputRef,\n}: UseCellFocusAndEditingParams<T, F>) {\n  const { cellInteraction } = state;\n  const column = state._columnMap.get(columnId);\n  const resolved = column ? state.resolveCellTypeByColumnId(column.id) : null;\n  const isFocused = cellInteraction.isCellFocused(rowKey, columnId);\n  const isEditing = cellInteraction.isCellEditing(rowKey, columnId);\n  const isEditable = state.isCellEditable(rowKey, columnId);\n\n  // Register the focused cell's DOM element on the state so\n  // scrollFocusedCellIntoView can use it. useLayoutEffect ensures\n  // the element is set before the requestAnimationFrame in\n  // scrollFocusedCellIntoView runs.\n  useLayoutEffect(() => {\n    if (isFocused) {\n      cellInteraction.focusedCellElement = cellRef.current;\n    }\n    return () => {\n      if (cellInteraction.focusedCellElement === cellRef.current) {\n        cellInteraction.focusedCellElement = null;\n      }\n    };\n  }, [isFocused, cellRef, cellInteraction]);\n\n  // When focused (not editing): focus the cell div so it receives keyboard events.\n  // When editing starts: focus the input, then place caret at end in a setTimeout\n  // so it runs after the browser's own selection (e.g. from autoSelect) settles.\n  // Skip caret placement if the input already has a non-collapsed selection.\n  useEffect(() => {\n    if (!isFocused) {\n      return;\n    }\n\n    if (isEditing) {\n      if (\n        editInputRef.current &&\n        (document.activeElement as\n          | HTMLInputElement\n          | HTMLTextAreaElement\n          | null) !== editInputRef.current\n      ) {\n        editInputRef.current.focus();\n      }\n      setTimeout(() => {\n        // Use document.activeElement rather than editInputRef.current because\n        // editInputRef may point to a React component instance (e.g. InputArea)\n        // rather than the underlying DOM element, which has no .value property.\n        const input = document.activeElement as\n          | HTMLInputElement\n          | HTMLTextAreaElement\n          | null;\n        if (!input || !('selectionStart' in input)) {\n          return;\n        }\n        if (input.selectionStart !== input.selectionEnd) {\n          return;\n        }\n        const len = input.value?.length ?? 0;\n        input.setSelectionRange(len, len);\n      }, 0);\n    } else {\n      // Let CellInteractionState own scroll positioning for the focused cell.\n      cellRef.current?.focus({ preventScroll: true });\n    }\n  }, [isFocused, isEditing, cellRef, editInputRef]);\n\n  const handleActivate = useCallback(() => {\n    if (resolved?.toggleValue) {\n      state.cellValue.toggleCell(rowKey, columnId);\n    } else {\n      cellInteraction.startEdit();\n    }\n  }, [resolved, state, rowKey, columnId, cellInteraction]);\n\n  // Handle Enter and type-to-edit at the cell level\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isFocused || !isEditable || isEditing) {\n        return;\n      }\n      if (state.updateItemDisabled) {\n        return;\n      }\n\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        handleActivate();\n        return;\n      }\n\n      // Type-to-edit: prevent the browser's default text insertion, start\n      // edit mode, then set the value programmatically via React state.\n      // startEdit() must come before setEditingValue() because it resets\n      // editingValue to undefined.\n      if (\n        e.key.length === 1 &&\n        !e.ctrlKey &&\n        !e.metaKey &&\n        !e.altKey &&\n        !e.nativeEvent.isComposing\n      ) {\n        // Cell-type-level gate: only cell types that define onTypeToEdit support\n        // type-to-edit. Absence of onTypeToEdit is the natural opt-out (e.g. boolean).\n        if (!resolved?.onTypeToEdit) {\n          return;\n        }\n\n        // Key-level gate: onTypeToEdit returning undefined means \"block this key\"\n        // (e.g. number blocks non-digit keys).\n        const typeResult = resolved.onTypeToEdit({\n          key: e.key,\n          validation: column?.validation,\n        });\n        if (typeResult === undefined) {\n          return;\n        }\n\n        e.preventDefault();\n        cellInteraction.startEdit(undefined, undefined, { kind: 'type', key: e.key });\n\n        if ('value' in typeResult) {\n          // Cell type provides an explicit pre-populated value (e.g. first typed\n          // char for text, or the digit for number).\n          cellInteraction.setEditingValue(typeResult.value);\n        }\n        // onTypeToEdit returned {} (no value): enter edit mode with current value intact\n        // (e.g. select/date open their picker without pre-populating).\n\n        // Best-effort: editInputRef.current is null here because the Edit\n        // component only mounts after isEditing flips. The useEffect above\n        // is the reliable focus path once the component renders.\n        editInputRef.current?.focus();\n        e.stopPropagation();\n      }\n    },\n    [\n      editInputRef,\n      isFocused,\n      isEditable,\n      isEditing,\n      state,\n      cellInteraction,\n      resolved,\n      handleActivate,\n    ],\n  );\n\n  return useMemo(() => ({ onKeyDown }), [onKeyDown]);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","useCellFocusAndEditing","state","rowKey","columnId","cellRef","editInputRef","cellInteraction","column","_columnMap","get","resolved","resolveCellTypeByColumnId","id","isFocused","isCellFocused","isEditing","isCellEditing","isEditable","isCellEditable","useLayoutEffect","focusedCellElement","current","useEffect","document","activeElement","focus","setTimeout","_input$value","input","selectionStart","selectionEnd","len","value","length","setSelectionRange","_cellRef$current","contains","_cellRef$current2","preventScroll","handleActivate","useCallback","toggleValue","cellValue","toggleCell","startEdit","onKeyDown","e","updateItemDisabled","key","preventDefault","showEditWhenFocused","_editInputRef$current","ctrlKey","metaKey","altKey","nativeEvent","isComposing","_editInputRef$current2","onTypeToEdit","typeResult","validation","undefined","kind","setEditingValue","stopPropagation","useMemo"],"sources":["../../../../src/components/EditableTable/useCellFocusAndEditing.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useCallback, useMemo } from 'react';\nimport type { FiltersMap } from '@wix/bex-core';\nimport type { EditableTableState } from '../../state/EditableTable';\nimport { Focusable } from './types';\n\ninterface UseCellFocusAndEditingParams<T, F extends FiltersMap> {\n  state: EditableTableState<T, F>;\n  rowKey: string;\n  columnId: string;\n  cellRef: React.MutableRefObject<HTMLDivElement | null | undefined>;\n  editInputRef: React.MutableRefObject<Focusable | null | undefined>;\n}\n\nexport function useCellFocusAndEditing<T, F extends FiltersMap>({\n  state,\n  rowKey,\n  columnId,\n  cellRef,\n  editInputRef,\n}: UseCellFocusAndEditingParams<T, F>) {\n  const { cellInteraction } = state;\n  const column = state._columnMap.get(columnId);\n  const resolved = column ? state.resolveCellTypeByColumnId(column.id) : null;\n  const isFocused = cellInteraction.isCellFocused(rowKey, columnId);\n  const isEditing = cellInteraction.isCellEditing(rowKey, columnId);\n  const isEditable = state.isCellEditable(rowKey, columnId);\n\n  // Register the focused cell's DOM element on the state so\n  // scrollFocusedCellIntoView can use it. useLayoutEffect ensures\n  // the element is set before the requestAnimationFrame in\n  // scrollFocusedCellIntoView runs.\n  useLayoutEffect(() => {\n    if (isFocused) {\n      cellInteraction.focusedCellElement = cellRef.current;\n    }\n    return () => {\n      if (cellInteraction.focusedCellElement === cellRef.current) {\n        cellInteraction.focusedCellElement = null;\n      }\n    };\n  }, [isFocused, cellRef, cellInteraction]);\n\n  // When focused (not editing): focus the cell div so it receives keyboard events.\n  // When editing starts: focus the input, then place caret at end in a setTimeout\n  // so it runs after the browser's own selection (e.g. from autoSelect) settles.\n  // Skip caret placement if the input already has a non-collapsed selection.\n  useEffect(() => {\n    if (!isFocused) {\n      return;\n    }\n\n    if (isEditing) {\n      if (\n        editInputRef.current &&\n        (document.activeElement as\n          | HTMLInputElement\n          | HTMLTextAreaElement\n          | null) !== editInputRef.current\n      ) {\n        editInputRef.current.focus();\n      }\n      setTimeout(() => {\n        // Use document.activeElement rather than editInputRef.current because\n        // editInputRef may point to a React component instance (e.g. InputArea)\n        // rather than the underlying DOM element, which has no .value property.\n        const input = document.activeElement as\n          | HTMLInputElement\n          | HTMLTextAreaElement\n          | null;\n        if (!input || !('selectionStart' in input)) {\n          return;\n        }\n        if (input.selectionStart !== input.selectionEnd) {\n          return;\n        }\n        const len = input.value?.length ?? 0;\n        input.setSelectionRange(len, len);\n      }, 0);\n    } else {\n      // Don't steal focus if a descendant already has it (e.g. image cell's\n      // inner-focus buttons). The gridcell only needs focusing when it isn't\n      // already within the active focus subtree.\n      if (!cellRef.current?.contains(document.activeElement)) {\n        cellRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [isFocused, isEditing, cellRef, editInputRef]);\n\n  const handleActivate = useCallback(() => {\n    if (resolved?.toggleValue) {\n      state.cellValue.toggleCell(rowKey, columnId);\n    } else {\n      cellInteraction.startEdit();\n    }\n  }, [resolved, state, rowKey, columnId, cellInteraction]);\n\n  // Handle Enter and type-to-edit at the cell level\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isFocused || !isEditable || isEditing) {\n        return;\n      }\n      if (state.updateItemDisabled) {\n        return;\n      }\n\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        if (resolved?.showEditWhenFocused) {\n          // EditComponent is always visible. Focus into its first interactive\n          // element (inner focus) rather than entering full edit mode now —\n          // the cell type calls onStartEdit() itself right before any external\n          // UI (media manager / modal) opens, which is the only time isEditing\n          // needs to be true for useClearFocusOnBlur protection.\n          editInputRef.current?.focus();\n        } else {\n          handleActivate();\n        }\n        return;\n      }\n\n      // Type-to-edit: prevent the browser's default text insertion, start\n      // edit mode, then set the value programmatically via React state.\n      // startEdit() must come before setEditingValue() because it resets\n      // editingValue to undefined.\n      if (\n        e.key.length === 1 &&\n        !e.ctrlKey &&\n        !e.metaKey &&\n        !e.altKey &&\n        !e.nativeEvent.isComposing\n      ) {\n        // Cell-type-level gate: only cell types that define onTypeToEdit support\n        // type-to-edit. Absence of onTypeToEdit is the natural opt-out (e.g. boolean).\n        if (!resolved?.onTypeToEdit) {\n          return;\n        }\n\n        // Key-level gate: onTypeToEdit returning undefined means \"block this key\"\n        // (e.g. number blocks non-digit keys).\n        const typeResult = resolved.onTypeToEdit({\n          key: e.key,\n          validation: column?.validation,\n        });\n        if (typeResult === undefined) {\n          return;\n        }\n\n        e.preventDefault();\n        cellInteraction.startEdit(undefined, undefined, { kind: 'type', key: e.key });\n\n        if ('value' in typeResult) {\n          // Cell type provides an explicit pre-populated value (e.g. first typed\n          // char for text, or the digit for number).\n          cellInteraction.setEditingValue(typeResult.value);\n        }\n        // onTypeToEdit returned {} (no value): enter edit mode with current value intact\n        // (e.g. select/date open their picker without pre-populating).\n\n        // Best-effort: editInputRef.current is null here because the Edit\n        // component only mounts after isEditing flips. The useEffect above\n        // is the reliable focus path once the component renders.\n        editInputRef.current?.focus();\n        e.stopPropagation();\n      }\n    },\n    [\n      editInputRef,\n      isFocused,\n      isEditable,\n      isEditing,\n      state,\n      cellInteraction,\n      resolved,\n      handleActivate,\n    ],\n  );\n\n  return useMemo(() => ({ onKeyDown }), [onKeyDown]);\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/EditableTable/useClearFocusOnBlur.js

@@ -5,6 +5,12 @@ exports.useClearFocusOnBlur = useClearFocusOnBlur;
 var _react = require("react");
 /**
  * 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.
  */
 function useClearFocusOnBlur(cellInteraction) {
   const blurFrameId = (0, _react.useRef)(0);

package/dist/cjs/components/EditableTable/useClearFocusOnBlur.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","useClearFocusOnBlur","cellInteraction","blurFrameId","useRef","useEffect","cancelAnimationFrame","current","onFocus","useCallback","onBlur","e","container","currentTarget","requestAnimationFrame","contains","document","activeElement","isEditing","clearFocus"],"sources":["../../../../src/components/EditableTable/useClearFocusOnBlur.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { FiltersMap } from '@wix/bex-core';\nimport type { CellInteractionState } from '../../state/EditableTable/CellInteractionState';\n\n/**\n * Clears cell focus when the user clicks outside the table container.\n */\nexport function useClearFocusOnBlur<T, F extends FiltersMap>(\n  cellInteraction: CellInteractionState<T, F>,\n) {\n  const blurFrameId = useRef(0);\n\n  useEffect(() => {\n    return () => cancelAnimationFrame(blurFrameId.current);\n  }, []);\n\n  const onFocus = useCallback(() => {\n    cancelAnimationFrame(blurFrameId.current);\n  }, []);\n\n  const onBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      cancelAnimationFrame(blurFrameId.current);\n      const container = e.currentTarget;\n\n      blurFrameId.current = requestAnimationFrame(() => {\n        if (container.contains(document.activeElement)) {\n          return;\n        }\n\n        if (!cellInteraction.isEditing) {\n          cellInteraction.clearFocus();\n        }\n      });\n    },\n    [cellInteraction],\n  );\n\n  return { onFocus, onBlur };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA;AACA;AACA;AACO,SAASC,mBAAmBA,CACjCC,eAA2C,EAC3C;EACA,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAC,CAAC,CAAC;EAE7B,IAAAC,gBAAS,EAAC,MAAM;IACd,OAAO,MAAMC,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;EACxD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAO,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAChCH,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;EAC3C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,MAAM,GAAG,IAAAD,kBAAW,EACvBE,CAAmC,IAAK;IACvCL,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;IACzC,MAAMK,SAAS,GAAGD,CAAC,CAACE,aAAa;IAEjCV,WAAW,CAACI,OAAO,GAAGO,qBAAqB,CAAC,MAAM;MAChD,IAAIF,SAAS,CAACG,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,EAAE;QAC9C;MACF;MAEA,IAAI,CAACf,eAAe,CAACgB,SAAS,EAAE;QAC9BhB,eAAe,CAACiB,UAAU,CAAC,CAAC;MAC9B;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACjB,eAAe,CAClB,CAAC;EAED,OAAO;IAAEM,OAAO;IAAEE;EAAO,CAAC;AAC5B","ignoreList":[]}
+{"version":3,"names":["_react","require","useClearFocusOnBlur","cellInteraction","blurFrameId","useRef","useEffect","cancelAnimationFrame","current","onFocus","useCallback","onBlur","e","container","currentTarget","requestAnimationFrame","contains","document","activeElement","isEditing","clearFocus"],"sources":["../../../../src/components/EditableTable/useClearFocusOnBlur.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { FiltersMap } from '@wix/bex-core';\nimport type { CellInteractionState } from '../../state/EditableTable/CellInteractionState';\n\n/**\n * Clears cell focus when the user clicks outside the table container.\n *\n * Skips clearFocus() while isEditing=true so that portaled editors (date\n * picker, select dropdown, media manager) can take focus without causing the\n * cell to lose its editing state. Cell types that open external UI are\n * responsible for calling onStartEdit() before the modal opens (which sets\n * isEditing=true) and onCancel()/onCommit() when it closes.\n */\nexport function useClearFocusOnBlur<T, F extends FiltersMap>(\n  cellInteraction: CellInteractionState<T, F>,\n) {\n  const blurFrameId = useRef(0);\n\n  useEffect(() => {\n    return () => cancelAnimationFrame(blurFrameId.current);\n  }, []);\n\n  const onFocus = useCallback(() => {\n    cancelAnimationFrame(blurFrameId.current);\n  }, []);\n\n  const onBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      cancelAnimationFrame(blurFrameId.current);\n      const container = e.currentTarget;\n\n      blurFrameId.current = requestAnimationFrame(() => {\n        if (container.contains(document.activeElement)) {\n          return;\n        }\n\n        if (!cellInteraction.isEditing) {\n          cellInteraction.clearFocus();\n        }\n      });\n    },\n    [cellInteraction],\n  );\n\n  return { onFocus, onBlur };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,mBAAmBA,CACjCC,eAA2C,EAC3C;EACA,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAC,CAAC,CAAC;EAE7B,IAAAC,gBAAS,EAAC,MAAM;IACd,OAAO,MAAMC,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;EACxD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAO,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAChCH,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;EAC3C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,MAAM,GAAG,IAAAD,kBAAW,EACvBE,CAAmC,IAAK;IACvCL,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;IACzC,MAAMK,SAAS,GAAGD,CAAC,CAACE,aAAa;IAEjCV,WAAW,CAACI,OAAO,GAAGO,qBAAqB,CAAC,MAAM;MAChD,IAAIF,SAAS,CAACG,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,EAAE;QAC9C;MACF;MAEA,IAAI,CAACf,eAAe,CAACgB,SAAS,EAAE;QAC9BhB,eAAe,CAACiB,UAAU,CAAC,CAAC;MAC9B;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACjB,eAAe,CAClB,CAAC;EAED,OAAO;IAAEM,OAAO;IAAEE;EAAO,CAAC;AAC5B","ignoreList":[]}

package/dist/cjs/components/EntityPage/EntityPagePlain.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "EntityPagePlain1641086988";
+var _namespace_ = "EntityPagePlain758988730";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "EntityPagePlain1641086988__root"
+  "root": "EntityPagePlain758988730__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/EntityPage/EntityPagePlain.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/EntityPage/EntityPagePlain.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"EntityPagePlain1641086988\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"EntityPagePlain1641086988__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-page-header-padding-horizontal\":\"--wds-page-header-padding-horizontal\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAiC,CAAC;AACxD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oCAAoC,EAAC;AAAsC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/EntityPage/EntityPagePlain.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"EntityPagePlain758988730\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"EntityPagePlain758988730__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-page-header-padding-horizontal\":\"--wds-page-header-padding-horizontal\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oCAAoC,EAAC;AAAsC,CAAC","ignoreList":[]}

package/dist/cjs/components/Fade/Fade.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "Fade329759489";
+var _namespace_ = "Fade4037385382";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "Fade329759489__root"
+  "root": "Fade4037385382__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/Fade/Fade.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Fade/Fade.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"Fade329759489\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"Fade329759489__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,eAAe;AACjC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAqB,CAAC;AAC5C,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Fade/Fade.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"Fade4037385382\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"Fade4037385382__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,gBAAgB;AAClC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAsB,CAAC;AAC7C,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/Heading/Heading.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "Heading841018376";
+var _namespace_ = "Heading3014193496";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "Heading841018376__root"
+  "root": "Heading3014193496__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/Heading/Heading.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Heading/Heading.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"Heading841018376\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"Heading841018376__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAwB,CAAC;AAC/C,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Heading/Heading.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"Heading3014193496\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"Heading3014193496__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,mBAAmB;AACrC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAyB,CAAC;AAChD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/ImportButton/ImportStepUpload.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "ImportStepUpload686656776";
+var _namespace_ = "ImportStepUpload162635118";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "ImportStepUpload686656776__root",
-  "fileUpload": "ImportStepUpload686656776__fileUpload"
+  "root": "ImportStepUpload162635118__root",
+  "fileUpload": "ImportStepUpload162635118__fileUpload"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/ImportButton/ImportStepUpload.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ImportButton/ImportStepUpload.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ImportStepUpload686656776\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ImportStepUpload686656776__root\",\"fileUpload\":\"ImportStepUpload686656776__fileUpload\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,iCAAiC;EAAC,YAAY,EAAC;AAAuC,CAAC;AAC7G,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ImportButton/ImportStepUpload.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ImportStepUpload162635118\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ImportStepUpload162635118__root\",\"fileUpload\":\"ImportStepUpload162635118__fileUpload\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,iCAAiC;EAAC,YAAY,EAAC;AAAuC,CAAC;AAC7G,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/InputOverflow/InputOverflow.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "InputOverflow1271182134";
+var _namespace_ = "InputOverflow1873892648";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "InputOverflow1271182134__root"
+  "root": "InputOverflow1873892648__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/InputOverflow/InputOverflow.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/InputOverflow/InputOverflow.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"InputOverflow1271182134\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"InputOverflow1271182134__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/InputOverflow/InputOverflow.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"InputOverflow1873892648\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"InputOverflow1873892648__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/LayoutSwitch/LayoutSwitch.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.LayoutSwitch = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _Table = require("../Table");
+var _Grid = require("../Grid");
+var _InitialLoader = require("../InitialLoader");
+var _LayoutSwitchButton = require("../LayoutSwitchButton");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/LayoutSwitch/LayoutSwitch.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const LazyEditableTable = /*#__PURE__*/_react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require('../EditableTable'))).then(m => ({
+  default: m.EditableTable
+})));
+function _LayoutSwitch({
+  state,
+  tableProps,
+  gridProps,
+  spreadsheetProps
+}) {
+  const {
+    viewTypeState,
+    initTask,
+    toolbar
+  } = state;
+  const isLoading = initTask.status.isIdle || initTask.status.isLoading;
+
+  // Recompute only when a prop flips between defined and undefined.
+  const availableOptions = (0, _react.useMemo)(() => viewTypeState.options.filter(option => {
+    if (option === 'table') {
+      return !!tableProps;
+    }
+    if (option === 'grid') {
+      return !!gridProps;
+    }
+    if (option === 'spreadsheet') {
+      return !!spreadsheetProps;
+    }
+    return false;
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [!!tableProps, !!gridProps, !!spreadsheetProps]);
+  (0, _react.useEffect)(() => state.init(), []);
+
+  // If the stored viewType is not among the available options (e.g. 'grid' was
+  // persisted but gridProps is not provided), persist the correction so the next
+  // load starts from a valid value. changeViewType also updates dataCapsule.
+  (0, _react.useEffect)(() => {
+    if (availableOptions.length > 0 && !availableOptions.includes(viewTypeState.viewType)) {
+      viewTypeState.changeViewType(availableOptions[0]);
+    }
+  }, [availableOptions, viewTypeState.viewType]);
+  if (!availableOptions.length) {
+    console.error('[LayoutSwitch] At least one of tableProps, gridProps, or spreadsheetProps must be provided.');
+    return null;
+  }
+  const layoutSwitchButton = /*#__PURE__*/_react.default.createElement(_LayoutSwitchButton.LayoutSwitchButton, {
+    state: viewTypeState,
+    options: availableOptions,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 74,
+      columnNumber: 5
+    }
+  });
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(_InitialLoader.InitialLoader, {
+      dataHook: "initial-loader",
+      state: toolbar,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 78,
+        columnNumber: 12
+      }
+    });
+  }
+
+  // If viewType is not yet available (loaded from storage but xProp absent),
+  // fall back locally without waiting for the correction effect to fire.
+  const activeView = availableOptions.includes(viewTypeState.viewType) ? viewTypeState.viewType : availableOptions[0];
+  if (activeView === 'table') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": "layout-view-table",
+      style: {
+        display: 'contents'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 89,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Table.Table, (0, _extends2.default)({}, tableProps, {
+      tableGridSwitchButton: layoutSwitchButton,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 90,
+        columnNumber: 9
+      }
+    })));
+  }
+  if (activeView === 'grid') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": "layout-view-grid",
+      style: {
+        display: 'contents'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 97,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Grid, (0, _extends2.default)({}, gridProps, {
+      tableGridSwitchButton: layoutSwitchButton,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 98,
+        columnNumber: 9
+      }
+    })));
+  }
+  if (activeView === 'spreadsheet') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": "layout-view-spreadsheet",
+      style: {
+        display: 'contents'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 105,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+      fallback: /*#__PURE__*/_react.default.createElement(_InitialLoader.InitialLoader, {
+        dataHook: "initial-loader",
+        state: toolbar,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 107,
+          columnNumber: 21
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 106,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/_react.default.createElement(LazyEditableTable, (0, _extends2.default)({}, spreadsheetProps, {
+      tableGridSwitchButton: layoutSwitchButton,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 109,
+        columnNumber: 11
+      }
+    }))));
+  }
+  return null;
+}
+const LayoutSwitch = exports.LayoutSwitch = (0, _mobxReactLite.observer)(_LayoutSwitch);
+//# sourceMappingURL=LayoutSwitch.js.map

package/dist/cjs/components/LayoutSwitch/LayoutSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_mobxReactLite","_Table","_Grid","_InitialLoader","_LayoutSwitchButton","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LazyEditableTable","React","lazy","Promise","resolve","then","m","EditableTable","_LayoutSwitch","state","tableProps","gridProps","spreadsheetProps","viewTypeState","initTask","toolbar","isLoading","status","isIdle","availableOptions","useMemo","options","filter","option","useEffect","init","length","includes","viewType","changeViewType","console","error","layoutSwitchButton","createElement","LayoutSwitchButton","__self","__source","fileName","lineNumber","columnNumber","InitialLoader","dataHook","activeView","style","display","Table","_extends2","tableGridSwitchButton","Grid","Suspense","fallback","LayoutSwitch","exports","observer"],"sources":["../../../../src/components/LayoutSwitch/LayoutSwitch.tsx"],"sourcesContent":["import React, { Suspense, useEffect, useMemo } from 'react';\nimport { FiltersMap } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport { Table, TableProps } from '../Table';\nimport { Grid, GridProps } from '../Grid';\nimport type { EditableTableProps } from '../EditableTable';\nimport { InitialLoader } from '../InitialLoader';\nimport { LayoutSwitchButton } from '../LayoutSwitchButton';\nimport type { ILayoutSwitchState } from '../../state/ILayoutSwitchState';\n\nconst LazyEditableTable = React.lazy(() =>\n  import('../EditableTable').then((m) => ({\n    default: m.EditableTable as React.ComponentType<any>,\n  })),\n);\n\nexport interface LayoutSwitchProps<T, F extends FiltersMap> {\n  state: ILayoutSwitchState<T, F>;\n  tableProps?: Omit<TableProps<T, F>, 'tableGridSwitchButton'>;\n  gridProps?: Omit<GridProps<T, F>, 'tableGridSwitchButton'>;\n  spreadsheetProps?: Omit<EditableTableProps<T, F>, 'tableGridSwitchButton'>;\n}\n\nfunction _LayoutSwitch<T, F extends FiltersMap>({\n  state,\n  tableProps,\n  gridProps,\n  spreadsheetProps,\n}: LayoutSwitchProps<T, F>) {\n  const { viewTypeState, initTask, toolbar } = state;\n  const isLoading = initTask.status.isIdle || initTask.status.isLoading;\n\n  // Recompute only when a prop flips between defined and undefined.\n  const availableOptions = useMemo(\n    () =>\n      viewTypeState.options.filter((option) => {\n        if (option === 'table') {\n          return !!tableProps;\n        }\n        if (option === 'grid') {\n          return !!gridProps;\n        }\n        if (option === 'spreadsheet') {\n          return !!spreadsheetProps;\n        }\n        return false;\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [!!tableProps, !!gridProps, !!spreadsheetProps],\n  );\n\n  useEffect(() => state.init(), []);\n\n  // If the stored viewType is not among the available options (e.g. 'grid' was\n  // persisted but gridProps is not provided), persist the correction so the next\n  // load starts from a valid value. changeViewType also updates dataCapsule.\n  useEffect(() => {\n    if (\n      availableOptions.length > 0 &&\n      !availableOptions.includes(viewTypeState.viewType)\n    ) {\n      viewTypeState.changeViewType(availableOptions[0]!);\n    }\n  }, [availableOptions, viewTypeState.viewType]);\n\n  if (!availableOptions.length) {\n    console.error(\n      '[LayoutSwitch] At least one of tableProps, gridProps, or spreadsheetProps must be provided.',\n    );\n    return null;\n  }\n\n  const layoutSwitchButton = (\n    <LayoutSwitchButton state={viewTypeState} options={availableOptions} />\n  );\n\n  if (isLoading) {\n    return <InitialLoader dataHook=\"initial-loader\" state={toolbar} />;\n  }\n\n  // If viewType is not yet available (loaded from storage but xProp absent),\n  // fall back locally without waiting for the correction effect to fire.\n  const activeView = availableOptions.includes(viewTypeState.viewType)\n    ? viewTypeState.viewType\n    : availableOptions[0];\n\n  if (activeView === 'table') {\n    return (\n      <div data-hook=\"layout-view-table\" style={{ display: 'contents' }}>\n        <Table {...tableProps!} tableGridSwitchButton={layoutSwitchButton} />\n      </div>\n    );\n  }\n\n  if (activeView === 'grid') {\n    return (\n      <div data-hook=\"layout-view-grid\" style={{ display: 'contents' }}>\n        <Grid {...gridProps!} tableGridSwitchButton={layoutSwitchButton} />\n      </div>\n    );\n  }\n\n  if (activeView === 'spreadsheet') {\n    return (\n      <div data-hook=\"layout-view-spreadsheet\" style={{ display: 'contents' }}>\n        <Suspense\n          fallback={<InitialLoader dataHook=\"initial-loader\" state={toolbar} />}\n        >\n          <LazyEditableTable\n            {...spreadsheetProps!}\n            tableGridSwitchButton={layoutSwitchButton}\n          />\n        </Suspense>\n      </div>\n    );\n  }\n\n  return null;\n}\n\nexport const LayoutSwitch = observer(_LayoutSwitch);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/LayoutSwitch/LayoutSwitch.uni.driver.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.LayoutSwitchUniDriver = LayoutSwitchUniDriver;
+exports.default = void 0;
+var _unidriver = require("../../unidriver");
+var _CollectionToolbarUni = require("../CollectionToolbar/CollectionToolbar.uni.driver");
+var _TableUni = require("../Table/Table.uni.driver");
+var _GridUni = require("../Grid/Grid.uni.driver");
+var _EditableTableUni = require("../EditableTable/EditableTable.uni.driver");
+function LayoutSwitchUniDriver(base, body) {
+  const getToolbar = () => (0, _CollectionToolbarUni.CollectionToolbarUniDriver)(base.$('[data-hook="collection-toolbar"]'), body);
+  return {
+    ...(0, _unidriver.baseUniDriverFactory)(base),
+    wait: timeout => base.wait(timeout),
+    /** Get the layout switch button */
+    getSwitchButton: () => getToolbar().getSwitchButton(),
+    /** Check if the table layout is currently shown */
+    isShowingTable: () => base.$('[data-hook="layout-view-table"]').exists(),
+    /** Check if the grid layout is currently shown */
+    isShowingGrid: () => base.$('[data-hook="layout-view-grid"]').exists(),
+    /** Check if the spreadsheet layout is currently shown */
+    isShowingSpreadsheet: () => base.$('[data-hook="layout-view-spreadsheet"]').exists(),
+    /** Get Table driver */
+    getTable: () => (0, _TableUni.TableUniDriver)(base, body),
+    /** Get Grid driver */
+    getGrid: () => (0, _GridUni.GridUniDriver)(base, body),
+    /** Get Spreadsheet (EditableTable) driver */
+    getSpreadsheet: () => (0, _EditableTableUni.EditableTableUniDriver)(base, body)
+  };
+}
+var _default = exports.default = LayoutSwitchUniDriver;
+//# sourceMappingURL=LayoutSwitch.uni.driver.js.map

package/dist/cjs/components/LayoutSwitch/LayoutSwitch.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","_CollectionToolbarUni","_TableUni","_GridUni","_EditableTableUni","LayoutSwitchUniDriver","base","body","getToolbar","CollectionToolbarUniDriver","$","baseUniDriverFactory","wait","timeout","getSwitchButton","isShowingTable","exists","isShowingGrid","isShowingSpreadsheet","getTable","TableUniDriver","getGrid","GridUniDriver","getSpreadsheet","EditableTableUniDriver","_default","exports","default"],"sources":["../../../../src/components/LayoutSwitch/LayoutSwitch.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { baseUniDriverFactory } from '../../unidriver';\nimport { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';\nimport { TableUniDriver } from '../Table/Table.uni.driver';\nimport { GridUniDriver } from '../Grid/Grid.uni.driver';\nimport { EditableTableUniDriver } from '../EditableTable/EditableTable.uni.driver';\n\nexport function LayoutSwitchUniDriver(base: UniDriver, body: UniDriver) {\n  const getToolbar = () =>\n    CollectionToolbarUniDriver(\n      base.$('[data-hook=\"collection-toolbar\"]'),\n      body,\n    );\n\n  return {\n    ...baseUniDriverFactory(base),\n    wait: (timeout?: number) => base.wait(timeout),\n    /** Get the layout switch button */\n    getSwitchButton: () => getToolbar().getSwitchButton(),\n    /** Check if the table layout is currently shown */\n    isShowingTable: () => base.$('[data-hook=\"layout-view-table\"]').exists(),\n    /** Check if the grid layout is currently shown */\n    isShowingGrid: () => base.$('[data-hook=\"layout-view-grid\"]').exists(),\n    /** Check if the spreadsheet layout is currently shown */\n    isShowingSpreadsheet: () =>\n      base.$('[data-hook=\"layout-view-spreadsheet\"]').exists(),\n    /** Get Table driver */\n    getTable: () => TableUniDriver(base, body),\n    /** Get Grid driver */\n    getGrid: () => GridUniDriver(base, body),\n    /** Get Spreadsheet (EditableTable) driver */\n    getSpreadsheet: () => EditableTableUniDriver(base, body),\n  };\n}\n\nexport default LayoutSwitchUniDriver;\n"],"mappings":";;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,qBAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAEO,SAASK,qBAAqBA,CAACC,IAAe,EAAEC,IAAe,EAAE;EACtE,MAAMC,UAAU,GAAGA,CAAA,KACjB,IAAAC,gDAA0B,EACxBH,IAAI,CAACI,CAAC,CAAC,kCAAkC,CAAC,EAC1CH,IACF,CAAC;EAEH,OAAO;IACL,GAAG,IAAAI,+BAAoB,EAACL,IAAI,CAAC;IAC7BM,IAAI,EAAGC,OAAgB,IAAKP,IAAI,CAACM,IAAI,CAACC,OAAO,CAAC;IAC9C;IACAC,eAAe,EAAEA,CAAA,KAAMN,UAAU,CAAC,CAAC,CAACM,eAAe,CAAC,CAAC;IACrD;IACAC,cAAc,EAAEA,CAAA,KAAMT,IAAI,CAACI,CAAC,CAAC,iCAAiC,CAAC,CAACM,MAAM,CAAC,CAAC;IACxE;IACAC,aAAa,EAAEA,CAAA,KAAMX,IAAI,CAACI,CAAC,CAAC,gCAAgC,CAAC,CAACM,MAAM,CAAC,CAAC;IACtE;IACAE,oBAAoB,EAAEA,CAAA,KACpBZ,IAAI,CAACI,CAAC,CAAC,uCAAuC,CAAC,CAACM,MAAM,CAAC,CAAC;IAC1D;IACAG,QAAQ,EAAEA,CAAA,KAAM,IAAAC,wBAAc,EAACd,IAAI,EAAEC,IAAI,CAAC;IAC1C;IACAc,OAAO,EAAEA,CAAA,KAAM,IAAAC,sBAAa,EAAChB,IAAI,EAAEC,IAAI,CAAC;IACxC;IACAgB,cAAc,EAAEA,CAAA,KAAM,IAAAC,wCAAsB,EAAClB,IAAI,EAAEC,IAAI;EACzD,CAAC;AACH;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEctB,qBAAqB","ignoreList":[]}