@wix/patterns 1.480.0 → 1.481.0

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

@@ -1,8 +1,13 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { DatePicker } from '@wix/design-system';
-import { closeDatePickerCalendar } from '@wix/patterns-fields';
+import {
+  closeDatePickerCalendar,
+  onSameDayCalendarPick,
+  typedDateInputProps,
+} from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { mergeDate } from '../datetime/mergeDateTime';
 import { classes } from './Edit.st.css.js';
 
 function isValidDate(value: Date | string | null | undefined): boolean {
@@ -22,6 +27,7 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
   editTrigger,
 }) => {
   const datePickerRef = useRef<DatePicker | null>(null);
+  const inputElementRef = useRef<HTMLInputElement | null>(null);
   const validDate = isValidDate(value);
 
   // Auto-open calendar when entering edit mode via type-to-edit
@@ -47,6 +53,12 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
       ? value
       : new Date(value)
     : null;
+  const pickerValue =
+    dateValue && !isNaN(dateValue.getTime()) ? dateValue : undefined;
+  // WDS rewrites the input text whenever `value` changes, so typed dates
+  // must not reach the picker until the edit ends. The calendar keeps
+  // highlighting this date while the user types.
+  const [initialPickerValue] = useState(pickerValue);
 
   const handleChange = useCallback(
     (date: Date) => {
@@ -56,6 +68,37 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
     [onChange, onCommit],
   );
 
+  // The edit value may no longer be the frozen day, so picking it commits too.
+  useEffect(
+    () =>
+      onSameDayCalendarPick(datePickerRef.current, (date) =>
+        handleChange(mergeDate(initialPickerValue ?? null, date)),
+      ),
+    [handleChange, initialPickerValue],
+  );
+
+  // A typed date is local midnight. Keep the current time of day, as a
+  // calendar pick does.
+  const handleType = useCallback(
+    (date: Date) => onChange(mergeDate(initialPickerValue ?? null, date)),
+    [onChange, initialPickerValue],
+  );
+
+  const handleEnter = useCallback(
+    (date: Date) => {
+      handleType(date);
+      onCommit();
+    },
+    [handleType, onCommit],
+  );
+
+  const handleEmpty = useCallback(() => onChange(null), [onChange]);
+
+  const handleEmptyEnter = useCallback(() => {
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -80,19 +123,30 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
       <DatePicker
         ref={datePickerRef}
         size="small"
+        width="100%"
         inputProps={{
           border: 'none',
           prefix: <span />,
           ...(validDate
             ? {}
             : { value: typeof value === 'string' ? value : '' }),
+          // Typing doesn't commit: Enter or leaving the cell does.
+          ...typedDateInputProps({
+            picker: datePickerRef,
+            input: inputElementRef,
+            onEmpty: handleEmpty,
+            onEmptyEnter: handleEmptyEnter,
+            onType: handleType,
+            onEnter: handleEnter,
+          }),
           inputRef: (el: HTMLInputElement) => {
+            inputElementRef.current = el;
             if (inputRef) {
               inputRef.current = el;
             }
           },
         }}
-        value={dateValue && !isNaN(dateValue.getTime()) ? dateValue : undefined}
+        value={initialPickerValue}
         onChange={handleChange}
         popoverProps={{ appendTo: 'window', moveBy: { y: 4 } }}
         className={classes.dateInput}

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

@@ -14,5 +14,7 @@ export function DateEditUniDriver(base: UniDriver, body: UniDriver) {
     ) => datePicker.inputDriver.keyDown({ key, ...opts }),
     blur: () => datePicker.inputDriver.blur(),
     clickInput: () => datePicker.inputDriver.click(),
+    enterText: (text: string) => datePicker.inputDriver.enterText(text),
+    hasClearButton: () => datePicker.inputDriver.hasClearButton(),
   };
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2685516161";
+var _namespace_ = "View3156271880";
 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":"View2685516161__root"};
+export var classes = {"root":"View3156271880__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_ = "Edit3062184052";
+var _namespace_ = "Edit710968093";
 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":"Edit3062184052__root","half":"Edit3062184052__half","dateHalf":"Edit3062184052__dateHalf Edit3062184052__half","timeHalf":"Edit3062184052__timeHalf Edit3062184052__half","divider":"Edit3062184052__divider","passiveText":"Edit3062184052__passiveText","placeholderText":"Edit3062184052__placeholderText Edit3062184052__passiveText"};
+export var classes = {"root":"Edit710968093__root","half":"Edit710968093__half","dateHalf":"Edit710968093__dateHalf Edit710968093__half","timeHalf":"Edit710968093__timeHalf Edit710968093__half","divider":"Edit710968093__divider","passiveText":"Edit710968093__passiveText","placeholderText":"Edit710968093__placeholderText Edit710968093__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -85,8 +85,9 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
   // editingValue. WDS DateInput's `componentDidUpdate` reformats the input
   // text on every props.value change, so calling onChange while the user is
   // still in the date half would overwrite mid-typing input. We stash here
-  // and flush on focusout / intra-cell Tab / Escape.
-  const typedDateRef = useRef<Date | null>(null);
+  // and flush on focusout / intra-cell Tab / Escape. `null` = emptied,
+  // `undefined` = nothing stashed.
+  const typedDateRef = useRef<Date | null | undefined>(undefined);
 
   const onChangeRef = useRef(onChange);
   const onCommitRef = useRef(onCommit);
@@ -104,9 +105,9 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
   const typeTriggerConsumedRef = useRef(false);
 
   const commitTypedDate = useCallback(() => {
-    if (typedDateRef.current) {
+    if (typedDateRef.current !== undefined) {
       onChangeRef.current(typedDateRef.current);
-      typedDateRef.current = null;
+      typedDateRef.current = undefined;
     }
   }, []);
 
@@ -125,11 +126,11 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
 
   // Flush typed-but-not-committed date when focus leaves the date half. The
   // gesture paths (calendar day pick, Tab/Enter on focused day, intra-cell
-  // Tab, Enter on input) flush via their own handlers; this covers external
-  // exits — clicking another cell, the toolbar, or anything else outside
-  // the date wrapper. Without it the framework's commitEdit (triggered by
-  // the focus shift to another cell) would read the stale editingValue and
-  // silently discard the user's typing.
+  // Tab) flush via their own handlers, and Enter on the input commits; this
+  // covers external exits — clicking another cell, the toolbar, or anything
+  // else outside the date wrapper. Without it the framework's commitEdit
+  // (triggered by the focus shift to another cell) would read the stale
+  // editingValue and silently discard the user's typing.
   useEffect(() => {
     if (subEdit !== 'date') {
       return;
@@ -288,6 +289,19 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
     typedDateRef.current = mergeDate(valueRef.current, newDate);
   }, []);
 
+  const handleDateEmpty = useCallback(() => {
+    typedDateRef.current = null;
+  }, []);
+
+  const handleDateEnter = useCallback(
+    (newDate: Date | null) => {
+      typedDateRef.current = undefined;
+      onChange(newDate ? mergeDate(valueRef.current, newDate) : null);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
   const handleTimeChange = useCallback(
     (time: Time | null) => {
       if (!time) {
@@ -309,7 +323,7 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
   const handleDateClear = useCallback(() => {
     // Drop any stashed typed date so the focusout flush doesn't restore it
     // after we commit null.
-    typedDateRef.current = null;
+    typedDateRef.current = undefined;
     onChange(null);
     onCommit();
   }, [onChange, onCommit]);
@@ -323,7 +337,7 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
         // delayed focusout (browsers fire blur asynchronously when the
         // focused element is removed) could re-introduce the typed value
         // after the user already pressed Escape.
-        typedDateRef.current = null;
+        typedDateRef.current = undefined;
         onCancel();
       }
     },
@@ -378,6 +392,8 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
             inputRef={dateInputElRef}
             value={validDate}
             onChange={handleDateChange}
+            onEmpty={handleDateEmpty}
+            onEnter={handleDateEnter}
             onClear={handleDateClear}
             placeholder={datePh}
             ariaLabel={t('CMS.cellDateTime.ariaLabel.date')}

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

@@ -1,7 +1,8 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { DatePickerUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 import { baseUniDriverFactory } from '../../../../unidriver';
 
-export function DateTimeEditUniDriver(base: UniDriver, _body: UniDriver) {
+export function DateTimeEditUniDriver(base: UniDriver, body: UniDriver) {
   const dateHalf = () => base.$('[data-sub-cell="date"]');
   const timeHalf = () => base.$('[data-sub-cell="time"]');
 
@@ -9,6 +10,8 @@ export function DateTimeEditUniDriver(base: UniDriver, _body: UniDriver) {
     ...baseUniDriverFactory(base),
     getDateInputValue: () => dateHalf().$('input').attr('value'),
     getTimeInputValue: () => timeHalf().$('input').attr('value'),
+    enterDateText: (text: string) =>
+      DatePickerUniDriver(dateHalf(), body).inputDriver.enterText(text),
     clickDateHalf: () => dateHalf().click(),
     clickTimeHalf: () => timeHalf().click(),
     dateHalfHasInput: () => dateHalf().$('input').exists(),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View612183954";
+var _namespace_ = "View1588932039";
 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":"View612183954__root","leaf":"View612183954__leaf","datePart":"View612183954__datePart View612183954__leaf","timePart":"View612183954__timePart View612183954__leaf","placeholder":"View612183954__placeholder View612183954__leaf","divider":"View612183954__divider"};
+export var classes = {"root":"View1588932039__root","leaf":"View1588932039__leaf","datePart":"View1588932039__datePart View1588932039__leaf","timePart":"View1588932039__timePart View1588932039__leaf","placeholder":"View1588932039__placeholder View1588932039__leaf","divider":"View1588932039__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_ = "Edit2311684223";
+var _namespace_ = "Edit3266938706";
 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":"Edit2311684223__root","emailInput":"Edit2311684223__emailInput"};
+export var classes = {"root":"Edit3266938706__root","emailInput":"Edit3266938706__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_ = "View625904045";
+var _namespace_ = "View282533428";
 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":"View625904045__root"};
+export var classes = {"root":"View282533428__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_ = "Edit3329408817";
+var _namespace_ = "Edit1428708983";
 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":"Edit3329408817__root","numberInput":"Edit3329408817__numberInput"};
+export var classes = {"root":"Edit1428708983__root","numberInput":"Edit1428708983__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_ = "View1911097068";
+var _namespace_ = "View4254107584";
 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":"View1911097068__root","textView":"View1911097068__textView"};
+export var classes = {"root":"View4254107584__root","textView":"View4254107584__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_ = "Edit3863363173";
+var _namespace_ = "Edit4155910577";
 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":"Edit3863363173__root","jsonInput":"Edit3863363173__jsonInput"};
+export var classes = {"root":"Edit4155910577__root","jsonInput":"Edit4155910577__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_ = "View702044422";
+var _namespace_ = "View1925819975";
 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":"View702044422__root"};
+export var classes = {"root":"View1925819975__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_ = "Edit1285713997";
+var _namespace_ = "Edit261524571";
 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":"Edit1285713997__root","selectInput":"Edit1285713997__selectInput"};
+export var classes = {"root":"Edit261524571__root","selectInput":"Edit261524571__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_ = "Edit2829224628";
+var _namespace_ = "Edit3788367266";
 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":"Edit2829224628__root","editWrapper":"Edit2829224628__editWrapper","inputArea":"Edit2829224628__inputArea"};
+export var classes = {"root":"Edit3788367266__root","editWrapper":"Edit3788367266__editWrapper","inputArea":"Edit3788367266__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_ = "View3790671902";
+var _namespace_ = "View716379435";
 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":"View3790671902__root"};
+export var classes = {"root":"View716379435__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_ = "Edit101690587";
+var _namespace_ = "Edit4054952893";
 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":"Edit101690587__root","wrapper":"Edit101690587__wrapper","overlay":"Edit101690587__overlay"};
+export var classes = {"root":"Edit4054952893__root","wrapper":"Edit4054952893__wrapper","overlay":"Edit4054952893__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_ = "Edit1496408529";
+var _namespace_ = "Edit3991289292";
 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":"Edit1496408529__root","urlInput":"Edit1496408529__urlInput"};
+export var classes = {"root":"Edit3991289292__root","urlInput":"Edit3991289292__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_ = "View102358572";
+var _namespace_ = "View4154240120";
 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":"View102358572__root","textView":"View102358572__textView","urlText":"View102358572__urlText","suffix":"View102358572__suffix"};
+export var classes = {"root":"View4154240120__root","textView":"View4154240120__textView","urlText":"View4154240120__urlText","suffix":"View4154240120__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase1448918574";
+var _namespace_ = "EmptyStateBase2686840201";
 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":"EmptyStateBase1448918574__root"};
+export var classes = {"root":"EmptyStateBase2686840201__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_ = "EntityPagePlain3293418886";
+var _namespace_ = "EntityPagePlain907640231";
 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":"EntityPagePlain3293418886__root"};
+export var classes = {"root":"EntityPagePlain907640231__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/FieldActions/FieldActions.tsx

@@ -58,6 +58,7 @@ export const FIELD_ACTIONS: Record<FieldActionKey, FieldActionDef> = {
   hideColumn: {
     label: 'Hide Column',
     dataHook: 'field-action-hide',
+    ctaName: 'Hide Column',
     icon: <HiddenSmall />,
   },
   duplicateField: {
@@ -75,16 +76,19 @@ export const FIELD_ACTIONS: Record<FieldActionKey, FieldActionDef> = {
   sortAscending: {
     label: 'Sort Ascending',
     dataHook: 'field-action-sort-ascending',
+    ctaName: 'Sort Ascending',
     icon: <SortAscendingSmall />,
   },
   sortDescending: {
     label: 'Sort Descending',
     dataHook: 'field-action-sort-descending',
+    ctaName: 'Sort Descending',
     icon: <SortDescendingSmall />,
   },
   filter: {
     label: 'Filter',
     dataHook: 'field-action-filter',
+    ctaName: 'Filter',
     icon: <ContentFilterSmall />,
   },
   archive: {
@@ -123,6 +127,7 @@ export interface FieldActionsBIContext {
   reportBi: ReportBI;
   location: string;
   listSize: number;
+  fieldType?: string;
 }
 
 const MENU_OPEN_CTA_NAME = 'More Actions Menu';
@@ -147,6 +152,7 @@ const reportFieldActionCta = (
       numCtas: cta.numCtas,
       numItems: 1,
       url: typeof window !== 'undefined' ? window.location.href : '',
+      fieldType: bi.fieldType,
     }),
   );
 

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1828701032";
+var _namespace_ = "ImportStepUpload3960496831";
 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":"ImportStepUpload1828701032__root","fileUpload":"ImportStepUpload1828701032__fileUpload"};
+export var classes = {"root":"ImportStepUpload3960496831__root","fileUpload":"ImportStepUpload3960496831__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};