@wix/patterns 1.467.0 → 1.469.0

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

@@ -20,7 +20,9 @@ export interface AddressCellTypeConfig {
  * popover focus handling, and Enter-to-select are owned by AddressInput;
  * here we only forward the cell-framework callbacks.
  */
-export const AddressEdit: React.FC<CellEditProps<Address | undefined>> = ({
+export const AddressEdit: React.FC<
+  CellEditProps<Address | null | undefined>
+> = ({
   value,
   onChange,
   onCommit,
@@ -45,6 +47,7 @@ export const AddressEdit: React.FC<CellEditProps<Address | undefined>> = ({
     (e: React.KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault();
+        e.stopPropagation();
         onCancel();
       }
     },
@@ -75,8 +78,8 @@ export const AddressEdit: React.FC<CellEditProps<Address | undefined>> = ({
             inputRef.current = instance;
           }
         }}
-        value={value}
-        onChange={onChange}
+        value={value ?? undefined}
+        onChange={(address) => onChange(address ?? null)}
         onSelectAddress={onCommit}
         atlasService={atlasService}
         initialSearchText={initialSearchText}

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

@@ -1,5 +1,6 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../../../unidriver';
+import { AddressInputUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 
 const { fireEvent = null } =
   process.env.NODE_ENV === 'test'
@@ -11,19 +12,23 @@ const { fireEvent = null } =
       })()
     : {};
 
-export function AddressEditUniDriver(base: UniDriver) {
+export function AddressEditUniDriver(base: UniDriver, body: UniDriver) {
+  const addressInput = AddressInputUniDriver(
+    base.$('[data-hook="address-input"]'),
+    body,
+  );
   const getInput = () => base.$('input');
   const getNativeInput = async () =>
     (await getInput().getNative()) as HTMLInputElement | null;
 
   return {
     ...baseUniDriverFactory(base),
-    getValue: async () => {
-      const el = await getNativeInput();
-      return el?.value ?? '';
-    },
-    keyDown: async (key: string) => {
-      await getInput().pressKey(key as any);
+    getValue: addressInput.getInputValue,
+    typeValue: addressInput.enterText,
+    clickAtOption: addressInput.clickAtOption,
+    getAmountOfItems: addressInput.getAmountOfItems,
+    keyDown: async (key: Parameters<UniDriver['pressKey']>[0]) => {
+      await getInput().pressKey(key);
     },
     /**
      * Blur the input as if focus moved outside the cell. relatedTarget defaults
@@ -31,7 +36,9 @@ export function AddressEditUniDriver(base: UniDriver) {
      */
     blurOutside: async () => {
       const el = await getNativeInput();
-      if (!el) return;
+      if (!el) {
+        return;
+      }
       fireEvent.blur(el, { relatedTarget: document.body });
     },
   };

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

@@ -4,10 +4,10 @@ import type { Address } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
 import { CellViewLayout } from '../CellViewLayout';
 
-export const AddressCellView: React.FC<CellViewProps<Address | undefined>> = ({
-  value,
-}) => (
+export const AddressCellView: React.FC<
+  CellViewProps<Address | null | undefined>
+> = ({ value }) => (
   <CellViewLayout>
-    <CellAddressView data={value} />
+    <CellAddressView data={value ?? undefined} />
   </CellViewLayout>
 );

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Loader } from '@wix/design-system';
 import type { Address } from '@wix/patterns-fields';
+import { hardConvert, isValid } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { defineCellType } from '../../types';
 import { AddressCellView } from './View';
@@ -19,7 +20,7 @@ if (
 
 const LazyAddressEdit = React.lazy(addressEditFactory);
 
-const AddressEdit = (props: CellEditProps<Address | undefined>) => (
+const AddressEdit = (props: CellEditProps<Address | null | undefined>) => (
   <React.Suspense fallback={<Loader size="tiny" />}>
     <LazyAddressEdit {...props} />
   </React.Suspense>
@@ -28,7 +29,7 @@ const AddressEdit = (props: CellEditProps<Address | undefined>) => (
 export { AddressCellView };
 export type { AddressCellTypeConfig } from './Edit';
 
-export const addressCellType = defineCellType<Address | undefined>({
+export const addressCellType = defineCellType<Address | null | undefined>({
   type: 'address',
   ViewComponent: AddressCellView,
   EditComponent: AddressEdit,
@@ -37,28 +38,20 @@ export const addressCellType = defineCellType<Address | undefined>({
     if (!raw) {
       return undefined;
     }
-    try {
-      const parsed = JSON.parse(raw);
-      if (parsed && typeof parsed.formatted === 'string') {
-        return parsed as Address;
-      }
-    } catch {}
-    return undefined;
+    return hardConvert(raw);
   },
   validate: (value, _rules, translate) => {
-    if (!value) {
+    if (value == null) {
       return null;
     }
-    if (
-      typeof value === 'object' &&
-      typeof value.formatted === 'string' &&
-      value.formatted.length > 0
-    ) {
+    if (isValid(value) && value.formatted.trim().length > 0) {
       return null;
     }
     return translate!('cairo.editableTable.address.validation.invalid');
   },
   editable: true,
+  // null is an explicit clear; undefined means the editor was left unchanged.
+  normalizeOnCommit: (value) => value ?? undefined,
   // Type-to-edit clears the cell so the user starts a fresh search query.
   onTypeToEdit: () => ({ value: undefined }),
 });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1868111484";
+var _namespace_ = "Edit51404321";
 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":"Edit1868111484__root","jsonInput":"Edit1868111484__jsonInput"};
+export var classes = {"root":"Edit51404321__root","jsonInput":"Edit51404321__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2451847814";
+var _namespace_ = "Edit3650420564";
 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":"Edit2451847814__root","booleanEdit":"Edit2451847814__booleanEdit"};
+export var classes = {"root":"Edit3650420564__root","booleanEdit":"Edit3650420564__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View172351983";
+var _namespace_ = "View122554543";
 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":"View172351983__root","booleanView":"View172351983__booleanView"};
+export var classes = {"root":"View122554543__root","booleanView":"View122554543__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2163940710";
+var _namespace_ = "Edit3358315152";
 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":"Edit2163940710__root","dateInput":"Edit2163940710__dateInput"};
+export var classes = {"root":"Edit3358315152__root","dateInput":"Edit3358315152__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2976794873";
+var _namespace_ = "Edit531955114";
 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":"Edit2976794873__root","half":"Edit2976794873__half","dateHalf":"Edit2976794873__dateHalf Edit2976794873__half","timeHalf":"Edit2976794873__timeHalf Edit2976794873__half","divider":"Edit2976794873__divider","passiveText":"Edit2976794873__passiveText","placeholderText":"Edit2976794873__placeholderText Edit2976794873__passiveText"};
+export var classes = {"root":"Edit531955114__root","half":"Edit531955114__half","dateHalf":"Edit531955114__dateHalf Edit531955114__half","timeHalf":"Edit531955114__timeHalf Edit531955114__half","divider":"Edit531955114__divider","passiveText":"Edit531955114__passiveText","placeholderText":"Edit531955114__placeholderText Edit531955114__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3538288938";
+var _namespace_ = "View81328521";
 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":"View3538288938__root","leaf":"View3538288938__leaf","datePart":"View3538288938__datePart View3538288938__leaf","timePart":"View3538288938__timePart View3538288938__leaf","placeholder":"View3538288938__placeholder View3538288938__leaf","divider":"View3538288938__divider"};
+export var classes = {"root":"View81328521__root","leaf":"View81328521__leaf","datePart":"View81328521__datePart View81328521__leaf","timePart":"View81328521__timePart View81328521__leaf","placeholder":"View81328521__placeholder View81328521__leaf","divider":"View81328521__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit126112320";
+var _namespace_ = "Edit1668941113";
 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":"Edit126112320__root","emailInput":"Edit126112320__emailInput"};
+export var classes = {"root":"Edit1668941113__root","emailInput":"Edit1668941113__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3927719138";
+var _namespace_ = "Edit459163716";
 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":"Edit3927719138__root","numberInput":"Edit3927719138__numberInput"};
+export var classes = {"root":"Edit459163716__root","numberInput":"Edit459163716__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1078377146";
+var _namespace_ = "View1846099798";
 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":"View1078377146__root","textView":"View1078377146__textView"};
+export var classes = {"root":"View1846099798__root","textView":"View1846099798__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1069131793";
+var _namespace_ = "Edit1594528042";
 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":"Edit1069131793__root","jsonInput":"Edit1069131793__jsonInput"};
+export var classes = {"root":"Edit1594528042__root","jsonInput":"Edit1594528042__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit856266009";
+var _namespace_ = "Edit2161933100";
 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":"Edit856266009__root","selectInput":"Edit856266009__selectInput"};
+export var classes = {"root":"Edit2161933100__root","selectInput":"Edit2161933100__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit489911831";
+var _namespace_ = "Edit3590475092";
 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":"Edit489911831__root","editWrapper":"Edit489911831__editWrapper","inputArea":"Edit489911831__inputArea"};
+export var classes = {"root":"Edit3590475092__root","editWrapper":"Edit3590475092__editWrapper","inputArea":"Edit3590475092__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3891600389";
+var _namespace_ = "Edit75563061";
 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":"Edit3891600389__root","wrapper":"Edit3891600389__wrapper","overlay":"Edit3891600389__overlay"};
+export var classes = {"root":"Edit75563061__root","wrapper":"Edit75563061__wrapper","overlay":"Edit75563061__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3521130641";
+var _namespace_ = "Edit1058556639";
 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":"Edit3521130641__root","urlInput":"Edit3521130641__urlInput"};
+export var classes = {"root":"Edit1058556639__root","urlInput":"Edit1058556639__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1265987009";
+var _namespace_ = "View3625243124";
 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":"View1265987009__root","textView":"View1265987009__textView","urlText":"View1265987009__urlText","suffix":"View1265987009__suffix"};
+export var classes = {"root":"View3625243124__root","textView":"View3625243124__textView","urlText":"View3625243124__urlText","suffix":"View3625243124__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/useClearFocusOnBlur.ts

@@ -20,10 +20,21 @@ export function useClearFocusOnBlur<T, F extends FiltersMap>(
     return () => cancelAnimationFrame(blurFrameId.current);
   }, []);
 
-  const onFocus = useCallback(() => {
+  const onCellFocus = useCallback(() => {
+    // Focus from a cell's portaled controls also bubbles through that cell.
     cancelAnimationFrame(blurFrameId.current);
   }, []);
 
+  const onFocus = useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      // Portaled panels also bubble focus events through the table's React tree.
+      if (e.currentTarget.contains(e.target)) {
+        onCellFocus();
+      }
+    },
+    [onCellFocus],
+  );
+
   const onBlur = useCallback(
     (e: React.FocusEvent<HTMLDivElement>) => {
       cancelAnimationFrame(blurFrameId.current);
@@ -42,5 +53,5 @@ export function useClearFocusOnBlur<T, F extends FiltersMap>(
     [cellInteraction],
   );
 
-  return { onFocus, onBlur };
+  return { onFocus, onBlur, onCellFocus };
 }

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

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

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

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