@wix/patterns 1.488.0 → 1.490.0

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1509611630";
+var _namespace_ = "EditableCell3365856660";
 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":"EditableCell1509611630__root","errorMessage":"EditableCell1509611630__errorMessage"};
+export var classes = {"root":"EditableCell3365856660__root","errorMessage":"EditableCell3365856660__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -39,7 +39,6 @@ function _EditableCell<T, F extends FiltersMap>({
   const isRowActive = cellInteraction.isRowActive(rowKey);
   const selectionBorder = cellInteraction.getSelectionBorder(rowKey, columnId);
   const copiedBorder = clipboard.getCopiedBorder(rowKey, columnId);
-  const isEditable = state.isCellEditable(rowKey, columnId);
   const canEdit = state.canEditCell(rowKey, columnId);
 
   const handleClick = useCallback(
@@ -208,7 +207,7 @@ function _EditableCell<T, F extends FiltersMap>({
           rowActive: isRowActive,
           rangeSelected: isSelected && isRangeSelection,
           invalid: !cellValidation.valid,
-          readOnly: !isEditable,
+          readOnly: !canEdit,
           showEditWhenFocused: !!resolved.showEditWhenFocused,
           growable: !!resolved.growable,
           selectionTop: isRangeSelection && selectionBorder.top,
@@ -226,7 +225,7 @@ function _EditableCell<T, F extends FiltersMap>({
         onKeyDown={cellKeyboard.onKeyDown}
         role="gridcell"
         aria-selected={isSelected}
-        aria-readonly={!isEditable}
+        aria-readonly={!canEdit}
         aria-invalid={!cellValidation.valid || undefined}
         tabIndex={isFocused ? 0 : -1}
         data-row-key={rowKey}

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -30,9 +30,10 @@ export interface EditableTableContextMenuProps<T, F extends FiltersMap> {
 }
 
 const MENU_WIDTH = 230;
-const ITEM_HEIGHT = 36;
+const ITEM_HEIGHT = 30;
 const DIVIDER_HEIGHT = 9;
-const PADDING = 16;
+const POSITIONING_ALLOWANCE = 16;
+const SURFACE_PADDING_Y = 12;
 const OFFSET_X = 4;
 const OFFSET_Y = 4;
 const CONTEXT_MENU_Z_INDEX = 5001;
@@ -56,7 +57,7 @@ const buildMenuAction = ({
   disabledDescription,
   ...params
 }: ListItemActionBuilderParams) => {
-  const built = listItemActionBuilder(params);
+  const built = listItemActionBuilder({ ...params, size: 'small' });
   if (!params.disabled || !disabledDescription) {
     return built;
   }
@@ -380,7 +381,10 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
   ).length;
   const itemCount = options.length - dividerCount;
   const estimatedHeight =
-    itemCount * ITEM_HEIGHT + dividerCount * DIVIDER_HEIGHT + PADDING;
+    itemCount * ITEM_HEIGHT +
+    dividerCount * DIVIDER_HEIGHT +
+    SURFACE_PADDING_Y * 2 +
+    POSITIONING_ALLOWANCE;
 
   const x =
     position.x + OFFSET_X + MENU_WIDTH > window.innerWidth
@@ -403,6 +407,7 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         background: SURFACE_BACKGROUND,
         borderRadius: SURFACE_BORDER_RADIUS,
         boxShadow: SURFACE_BOX_SHADOW,
+        padding: `var(--wds-space-200, ${SURFACE_PADDING_Y}px) 0`,
         overflow: 'hidden',
       }}
       onMouseDown={(e) => e.preventDefault()}

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

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

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

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

package/src/components/EditableTable/cellTypes/JsonInputEdit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "JsonInputEdit3232359785";
+var _namespace_ = "JsonInputEdit3646778353";
 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":"JsonInputEdit3232359785__root","jsonInput":"JsonInputEdit3232359785__jsonInput"};
+export var classes = {"root":"JsonInputEdit3646778353__root","jsonInput":"JsonInputEdit3646778353__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1744417643";
+var _namespace_ = "Edit1752151420";
 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":"Edit1744417643__root","addressInput":"Edit1744417643__addressInput"};
+export var classes = {"root":"Edit1752151420__root","addressInput":"Edit1752151420__addressInput"};
 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_ = "Edit1616516250";
+var _namespace_ = "Edit1805069588";
 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":"Edit1616516250__root","booleanEdit":"Edit1616516250__booleanEdit"};
+export var classes = {"root":"Edit1805069588__root","booleanEdit":"Edit1805069588__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_ = "View1830647550";
+var _namespace_ = "View1553330096";
 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":"View1830647550__root","booleanView":"View1830647550__booleanView"};
+export var classes = {"root":"View1553330096__root","booleanView":"View1553330096__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_ = "Edit3414477392";
+var _namespace_ = "Edit2985400601";
 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":"Edit3414477392__root"};
+export var classes = {"root":"Edit2985400601__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_ = "Edit2216049623";
+var _namespace_ = "Edit2921261578";
 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":"Edit2216049623__root","dateInput":"Edit2216049623__dateInput"};
+export var classes = {"root":"Edit2921261578__root","dateInput":"Edit2921261578__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_ = "View2443710305";
+var _namespace_ = "View3139048260";
 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":"View2443710305__root"};
+export var classes = {"root":"View3139048260__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_ = "Edit2893614685";
+var _namespace_ = "Edit1752866593";
 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":"Edit2893614685__root","half":"Edit2893614685__half","dateHalf":"Edit2893614685__dateHalf Edit2893614685__half","timeHalf":"Edit2893614685__timeHalf Edit2893614685__half","divider":"Edit2893614685__divider","passiveText":"Edit2893614685__passiveText","placeholderText":"Edit2893614685__placeholderText Edit2893614685__passiveText"};
+export var classes = {"root":"Edit1752866593__root","half":"Edit1752866593__half","dateHalf":"Edit1752866593__dateHalf Edit1752866593__half","timeHalf":"Edit1752866593__timeHalf Edit1752866593__half","divider":"Edit1752866593__divider","passiveText":"Edit1752866593__passiveText","placeholderText":"Edit1752866593__placeholderText Edit1752866593__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_ = "View190186027";
+var _namespace_ = "View868691029";
 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":"View190186027__root","leaf":"View190186027__leaf","datePart":"View190186027__datePart View190186027__leaf","timePart":"View190186027__timePart View190186027__leaf","placeholder":"View190186027__placeholder View190186027__leaf","divider":"View190186027__divider"};
+export var classes = {"root":"View868691029__root","leaf":"View868691029__leaf","datePart":"View868691029__datePart View868691029__leaf","timePart":"View868691029__timePart View868691029__leaf","placeholder":"View868691029__placeholder View868691029__leaf","divider":"View868691029__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_ = "Edit307714642";
+var _namespace_ = "Edit1886161632";
 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":"Edit307714642__root","emailInput":"Edit307714642__emailInput"};
+export var classes = {"root":"Edit1886161632__root","emailInput":"Edit1886161632__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_ = "View1375319147";
+var _namespace_ = "View3253746463";
 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":"View1375319147__root"};
+export var classes = {"root":"View3253746463__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_ = "Edit1525172478";
+var _namespace_ = "Edit2300028794";
 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":"Edit1525172478__root","numberInput":"Edit1525172478__numberInput"};
+export var classes = {"root":"Edit2300028794__root","numberInput":"Edit2300028794__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_ = "View4037908224";
+var _namespace_ = "View3544775576";
 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":"View4037908224__root","textView":"View4037908224__textView"};
+export var classes = {"root":"View3544775576__root","textView":"View3544775576__textView"};
 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_ = "View1744625114";
+var _namespace_ = "View3973601946";
 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":"View1744625114__root"};
+export var classes = {"root":"View3973601946__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/reference/EmptyReferenceView.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "EmptyReferenceView242146108";
+var _namespace_ = "EmptyReferenceView4149596897";
 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":"EmptyReferenceView242146108__root","placeholder":"EmptyReferenceView242146108__placeholder","placeholderIcon":"EmptyReferenceView242146108__placeholderIcon","placeholderText":"EmptyReferenceView242146108__placeholderText","arrow":"EmptyReferenceView242146108__arrow"};
+export var classes = {"root":"EmptyReferenceView4149596897__root","placeholder":"EmptyReferenceView4149596897__placeholder","placeholderIcon":"EmptyReferenceView4149596897__placeholderIcon","placeholderText":"EmptyReferenceView4149596897__placeholderText","arrow":"EmptyReferenceView4149596897__arrow"};
 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_ = "Edit3947891206";
+var _namespace_ = "Edit2722278753";
 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":"Edit3947891206__root","selectInput":"Edit3947891206__selectInput"};
+export var classes = {"root":"Edit2722278753__root","selectInput":"Edit2722278753__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_ = "Edit2615699824";
+var _namespace_ = "Edit3657017943";
 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":"Edit2615699824__root","editWrapper":"Edit2615699824__editWrapper","inputArea":"Edit2615699824__inputArea"};
+export var classes = {"root":"Edit3657017943__root","editWrapper":"Edit3657017943__editWrapper","inputArea":"Edit3657017943__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_ = "View435231739";
+var _namespace_ = "View1708771445";
 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":"View435231739__root"};
+export var classes = {"root":"View1708771445__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_ = "Edit12869818";
+var _namespace_ = "Edit2549157583";
 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":"Edit12869818__root","wrapper":"Edit12869818__wrapper","overlay":"Edit12869818__overlay"};
+export var classes = {"root":"Edit2549157583__root","wrapper":"Edit2549157583__wrapper","overlay":"Edit2549157583__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_ = "Edit4001724464";
+var _namespace_ = "Edit696354502";
 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":"Edit4001724464__root","urlInput":"Edit4001724464__urlInput"};
+export var classes = {"root":"Edit696354502__root","urlInput":"Edit696354502__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_ = "View3937214018";
+var _namespace_ = "View3252966235";
 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":"View3937214018__root","textView":"View3937214018__textView","urlText":"View3937214018__urlText","suffix":"View3937214018__suffix"};
+export var classes = {"root":"View3252966235__root","textView":"View3252966235__textView","urlText":"View3252966235__urlText","suffix":"View3252966235__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/index.ts

@@ -1,3 +1,4 @@
 export * from './EditableTable';
 export { defineCellType } from './types';
+export { CellViewLayout } from './cellTypes/CellViewLayout';
 export type { CellViewProps, CellEditProps, EditableCellConfig } from './types';

package/src/components/EditableTable/useClearFocusOnBlur.ts

@@ -3,7 +3,7 @@ import type { FiltersMap } from '@wix/bex-core';
 import type { CellInteractionState } from '../../state/EditableTable/CellInteractionState';
 
 /**
- * Clears cell focus when the user clicks outside the table container.
+ * Clears cell focus when focus moves to a non-cell control or outside the table.
  *
  * Skips clearFocus() while isEditing=true so that portaled editors (date
  * picker, select dropdown, media manager) can take focus without causing the
@@ -15,6 +15,7 @@ export function useClearFocusOnBlur<T, F extends FiltersMap>(
   cellInteraction: CellInteractionState<T, F>,
 ) {
   const blurFrameId = useRef(0);
+  const focusFromCell = useRef(false);
 
   useEffect(() => {
     return () => cancelAnimationFrame(blurFrameId.current);
@@ -23,16 +24,27 @@ export function useClearFocusOnBlur<T, F extends FiltersMap>(
   const onCellFocus = useCallback(() => {
     // Focus from a cell's portaled controls also bubbles through that cell.
     cancelAnimationFrame(blurFrameId.current);
+    focusFromCell.current = true;
   }, []);
 
   const onFocus = useCallback(
     (e: React.FocusEvent<HTMLDivElement>) => {
+      const fromCell = focusFromCell.current;
+      focusFromCell.current = false;
       // Portaled panels also bubble focus events through the table's React tree.
-      if (e.currentTarget.contains(e.target)) {
-        onCellFocus();
+      if (!e.currentTarget.contains(e.target)) {
+        return;
+      }
+      cancelAnimationFrame(blurFrameId.current);
+      if (
+        !fromCell &&
+        e.target !== e.currentTarget &&
+        !cellInteraction.isEditing
+      ) {
+        cellInteraction.clearFocus();
       }
     },
-    [onCellFocus],
+    [cellInteraction],
   );
 
   const onBlur = useCallback(

package/src/components/EditableTable/useKeyboardNavigation.ts

@@ -14,6 +14,17 @@ export function useKeyboardNavigation<T, F extends FiltersMap>(
         return;
       }
 
+      // The wrapper also contains the toolbar; its controls own their keys.
+      const target = e.target;
+      if (
+        target instanceof Node &&
+        e.currentTarget.contains(target) &&
+        target !== e.currentTarget &&
+        !cellInteraction.focusedCellElement?.contains(target)
+      ) {
+        return;
+      }
+
       // Don't intercept keys when editing (let the editor handle them)
       if (isEditing) {
         if (e.key === 'Escape') {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase406986653";
+var _namespace_ = "EmptyStateBase1463896951";
 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":"EmptyStateBase406986653__root"};
+export var classes = {"root":"EmptyStateBase1463896951__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_ = "EntityPagePlain1379562807";
+var _namespace_ = "EntityPagePlain3886472237";
 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":"EntityPagePlain1379562807__root"};
+export var classes = {"root":"EntityPagePlain3886472237__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPageFields/EntityPageField.st.css

@@ -0,0 +1,10 @@
+.row {
+  -st-states: fitContent;
+  width: 100%;
+  max-width: 100%;
+}
+
+.row:fitContent {
+  width: min-content;
+  min-width: min(300px, 100%);
+}