@wix/patterns 1.488.0 → 1.489.0

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_ = "CellViewLayout1471818589";
 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":"CellViewLayout1471818589__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_ = "JsonInputEdit1323796447";
 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":"JsonInputEdit1323796447__root","jsonInput":"JsonInputEdit1323796447__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_ = "Edit1758884413";
 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":"Edit1758884413__root","addressInput":"Edit1758884413__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_ = "Edit2585657898";
 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":"Edit2585657898__root","booleanEdit":"Edit2585657898__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_ = "View3337898101";
 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":"View3337898101__root","booleanView":"View3337898101__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_ = "Edit1540632276";
 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":"Edit1540632276__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_ = "Edit3653339447";
 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":"Edit3653339447__root","dateInput":"Edit3653339447__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_ = "View1526289710";
 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":"View1526289710__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_ = "Edit3097552316";
 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":"Edit3097552316__root","half":"Edit3097552316__half","dateHalf":"Edit3097552316__dateHalf Edit3097552316__half","timeHalf":"Edit3097552316__timeHalf Edit3097552316__half","divider":"Edit3097552316__divider","passiveText":"Edit3097552316__passiveText","placeholderText":"Edit3097552316__placeholderText Edit3097552316__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_ = "View4161902837";
 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":"View4161902837__root","leaf":"View4161902837__leaf","datePart":"View4161902837__datePart View4161902837__leaf","timePart":"View4161902837__timePart View4161902837__leaf","placeholder":"View4161902837__placeholder View4161902837__leaf","divider":"View4161902837__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_ = "Edit2757947987";
 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":"Edit2757947987__root","emailInput":"Edit2757947987__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_ = "View3816612283";
 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":"View3816612283__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_ = "Edit2611956171";
 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":"Edit2611956171__root","numberInput":"Edit2611956171__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_ = "View520455076";
 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":"View520455076__root","textView":"View520455076__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_ = "View53998113";
 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":"View53998113__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_ = "EmptyReferenceView2001486617";
 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":"EmptyReferenceView2001486617__root","placeholder":"EmptyReferenceView2001486617__placeholder","placeholderIcon":"EmptyReferenceView2001486617__placeholderIcon","placeholderText":"EmptyReferenceView2001486617__placeholderText","arrow":"EmptyReferenceView2001486617__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_ = "Edit363092264";
 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":"Edit363092264__root","selectInput":"Edit363092264__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_ = "Edit370532703";
 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":"Edit370532703__root","editWrapper":"Edit370532703__editWrapper","inputArea":"Edit370532703__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_ = "View3335587135";
 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":"View3335587135__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_ = "Edit1207556939";
 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":"Edit1207556939__root","wrapper":"Edit1207556939__wrapper","overlay":"Edit1207556939__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_ = "Edit2535137660";
 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":"Edit2535137660__root","urlInput":"Edit2535137660__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_ = "View223563120";
 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":"View223563120__root","textView":"View223563120__textView","urlText":"View223563120__urlText","suffix":"View223563120__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_ = "EmptyStateBase1180215919";
 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":"EmptyStateBase1180215919__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_ = "EntityPagePlain2937287753";
 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":"EntityPagePlain2937287753__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%);
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "EntityPageField1863354397";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"EntityPageField1863354397__root","row":"EntityPageField1863354397__row"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/EntityPageFields/EntityPageField.tsx

@@ -7,10 +7,12 @@ import type {
 } from '@wix/bex-core';
 import { isReferenceField } from '@wix/bex-core';
 import type { Control } from '@wix/bex-core/form';
+import { useIsMobile } from '../../hooks/useIsMobile';
 import { FieldCell } from '../FieldCell/FieldCell';
 import { EntityPageReferenceField } from './EntityPageReferenceField';
 import { EntityPageReferenceValue } from './EntityPageReferenceValue';
 import { EntityPageCustomField } from './EntityPageCustomField';
+import { st, classes } from './EntityPageField.st.css.js';
 import {
   FormShortText,
   FormLongText,
@@ -106,6 +108,15 @@ const FIELD_INPUTS: Record<
   ADDRESS: FormAddress,
 };
 
+const FIT_CONTENT_FIELD_TYPES: ReadonlySet<PatternsFieldType> = new Set([
+  'COLOR',
+  'REFERENCE',
+  'DATE',
+  'DATETIME',
+  'TIME',
+  'NUMBER',
+]);
+
 export interface EntityPageFieldProps {
   field: Field;
   /** Value only: no input, and not registered in the form. */
@@ -216,8 +227,15 @@ function FieldRow({
   field: Field;
   children: React.ReactNode;
 }) {
+  const isMobile = useIsMobile();
+  const fitContent = !isMobile && FIT_CONTENT_FIELD_TYPES.has(field.type);
+
   return (
-    <Box direction="vertical" gap="SP1" width="100%">
+    <Box
+      direction="vertical"
+      gap="SP1"
+      className={st(classes.row, { fitContent })}
+    >
       {children}
       {field.helpText && (
         <Text

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

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

package/src/components/Grid/Grid.uni.driver.ts

@@ -310,6 +310,11 @@ export function GridUniDriver(base: UniDriver, body: UniDriver) {
     getRenderedItemsCount: () =>
       base.$$('[data-hook="grid-card-item"]').count(),
     gridContainerExists: () => _getInnerElement().exists(),
+    getVirtualizedBodyHeight: async () => {
+      const style = (await _getInnerElement().attr('style')) ?? '';
+      const height = Number(/(?:^|;)\s*height:\s*([\d.]+)px/.exec(style)?.[1]);
+      return !isNaN(height) ? height : 0;
+    },
     getVirtualizedRowsCount: async () => {
       const str = await _getInnerElement().attr('data-count');
       return !isNaN(Number(str)) ? Number(str) : 0;