@wix/patterns 1.486.0 → 1.487.0

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

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

package/src/components/MoreFiltersCTA/MoreFiltersCTA.tsx

@@ -1,13 +1,52 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { FilterSmall, ContentFilter } from '@wix/wix-ui-icons-common/lazy';
-import { Box, CounterBadge } from '@wix/design-system';
+import { Box, CounterBadge, IconButton, Tooltip } from '@wix/design-system';
 import { CounterBadgeButton } from '../CounterBadgeButton';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
-const _MoreFiltersCTA = () => {
+export interface MoreFiltersCTAProps {
+  minimized?: boolean;
+}
+
+interface IconWithCounterBadgeProps {
+  icon: React.ReactElement;
+  count: number;
+  size?: string;
+  width?: string;
+  height?: string;
+}
+
+// IconButton passes the icon size props to its child, so forward them to the icon.
+const IconWithCounterBadge = ({
+  icon,
+  count,
+  size,
+  width,
+  height,
+}: IconWithCounterBadgeProps) => (
+  <Box position="relative" display="inline-flex">
+    {React.cloneElement(icon, { size, width, height })}
+    {count > 0 && (
+      <Box
+        position="absolute"
+        top={0}
+        right={0}
+        transform="translate3d(50%, -50%, 0)"
+        pointerEvents="none"
+      >
+        <CounterBadge dataHook="more-filters-button-counter" skin="general">
+          {count}
+        </CounterBadge>
+      </Box>
+    )}
+  </Box>
+);
+
+const _MoreFiltersCTA = ({ minimized = false }: MoreFiltersCTAProps) => {
   const state = useToolbarCollectionContext();
   const {
     toolbar: { responsive },
@@ -15,8 +54,37 @@ const _MoreFiltersCTA = () => {
     toolbarFiltersState,
   } = state;
   const isBmHarmonyTheme = useBmHarmonyTheme();
+  const { sizes } = usePatternsTheme();
 
   const count = state.collection.query.nonPersistentCustomFiltersCount;
+  const label = t('cairo.toolbar.moreFiltersButton', { defaultValue: '' });
+
+  if (minimized) {
+    const ariaLabel =
+      count > 0
+        ? `${label}, ${t('cairo.appliedFilters', { num: count })}`
+        : label;
+
+    return (
+      <Tooltip content={label} dataHook="more-filters-button-tooltip">
+        <Box direction="vertical" minWidth="30px">
+          <IconButton
+            ref={toolbarFiltersState?.moreFiltersButtonRef}
+            priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
+            size={sizes.small}
+            ariaLabel={ariaLabel}
+            dataHook="more-filters-button"
+            onClick={toolbarFiltersState?.onFiltersButtonClick}
+          >
+            <IconWithCounterBadge
+              icon={isBmHarmonyTheme ? <FilterSmall /> : <ContentFilter />}
+              count={count}
+            />
+          </IconButton>
+        </Box>
+      </Tooltip>
+    );
+  }
 
   if (!isBmHarmonyTheme) {
     return (
@@ -30,7 +98,7 @@ const _MoreFiltersCTA = () => {
           icon={<ContentFilter />}
           onClick={toolbarFiltersState?.onFiltersButtonClick}
         >
-          {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
+          {label}
         </ResponsiveButton>
       </CounterBadgeButton>
     );
@@ -47,7 +115,7 @@ const _MoreFiltersCTA = () => {
       onClick={toolbarFiltersState?.onFiltersButtonClick}
     >
       <Box gap="SP1" verticalAlign="middle" display="inline-flex">
-        {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
+        {label}
         {count > 0 && (
           <CounterBadge
             dataHook="more-filters-button-counter"

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar4290567447";
+var _namespace_ = "MultiBulkActionToolbar1677630063";
 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":"MultiBulkActionToolbar4290567447__root","leftGroupWrapper":"MultiBulkActionToolbar4290567447__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4290567447__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4290567447__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1677630063__root","leftGroupWrapper":"MultiBulkActionToolbar1677630063__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1677630063__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1677630063__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow4069778159";
+var _namespace_ = "NestedTableRow126686359";
 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":"NestedTableRow4069778159__root","firstLevel":"NestedTableRow4069778159__firstLevel","placeholder":"NestedTableRow4069778159__placeholder","parentHovered":"NestedTableRow4069778159__parentHovered"};
+export var classes = {"root":"NestedTableRow126686359__root","firstLevel":"NestedTableRow126686359__firstLevel","placeholder":"NestedTableRow126686359__placeholder","parentHovered":"NestedTableRow126686359__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep157258724";
+var _namespace_ = "PickerContentAdditionalStep855646970";
 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":"PickerContentAdditionalStep157258724__root","titles":"PickerContentAdditionalStep157258724__titles","suffix":"PickerContentAdditionalStep157258724__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep855646970__root","titles":"PickerContentAdditionalStep855646970__titles","suffix":"PickerContentAdditionalStep855646970__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget1852209377";
+var _namespace_ = "SetupWidget3466095077";
 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":"SetupWidget1852209377__root","row":"SetupWidget1852209377__row","completedCta":"SetupWidget1852209377__completedCta","secondaryCta":"SetupWidget1852209377__secondaryCta","card":"SetupWidget1852209377__card","stepIcon":"SetupWidget1852209377__stepIcon","chevron":"SetupWidget1852209377__chevron","chevronDisabled":"SetupWidget1852209377__chevronDisabled","inProgressLabel":"SetupWidget1852209377__inProgressLabel"};
+export var classes = {"root":"SetupWidget3466095077__root","row":"SetupWidget3466095077__row","completedCta":"SetupWidget3466095077__completedCta","secondaryCta":"SetupWidget3466095077__secondaryCta","card":"SetupWidget3466095077__card","stepIcon":"SetupWidget3466095077__stepIcon","chevron":"SetupWidget3466095077__chevron","chevronDisabled":"SetupWidget3466095077__chevronDisabled","inProgressLabel":"SetupWidget3466095077__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3056681256";
+var _namespace_ = "SkeletonCard4240415242";
 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":"SkeletonCard3056681256__root","headerLoading":"SkeletonCard3056681256__headerLoading"};
+export var classes = {"root":"SkeletonCard4240415242__root","headerLoading":"SkeletonCard4240415242__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3703986941";
+var _namespace_ = "AddFieldColumnHeader3322376690";
 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":"AddFieldColumnHeader3703986941__root","anchorLayer":"AddFieldColumnHeader3703986941__anchorLayer","popover":"AddFieldColumnHeader3703986941__popover","title":"AddFieldColumnHeader3703986941__title","hoverBridge":"AddFieldColumnHeader3703986941__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3322376690__root","anchorLayer":"AddFieldColumnHeader3322376690__anchorLayer","popover":"AddFieldColumnHeader3322376690__popover","title":"AddFieldColumnHeader3322376690__title","hoverBridge":"AddFieldColumnHeader3322376690__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/NumberCell.st.css

@@ -0,0 +1,8 @@
+/* Numbers sit at the end of the cell so their digits line up, while the column
+   (and so its header) stays start-aligned. Fills the cell because a virtualized
+   row's cell is a flex box. */
+.root {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: end;
+}

package/src/components/Table/NumberCell.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "NumberCell2978180245";
+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":"NumberCell2978180245__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2938286757";
+var _namespace_ = "TabsFilter4015760724";
 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":"TabsFilter2938286757__root","titleBox":"TabsFilter2938286757__titleBox"};
+export var classes = {"root":"TabsFilter4015760724__root","titleBox":"TabsFilter4015760724__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common218497536";
+var _namespace_ = "common2758328366";
 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":"common218497536__root","column":"common218497536__column","fullHeight":"common218497536__fullHeight"};
+export var classes = {"root":"common2758328366__root","column":"common2758328366__column","fullHeight":"common2758328366__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader2584917838";
+var _namespace_ = "CollectionPageHeader554297078";
 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":"CollectionPageHeader2584917838__root","mobileMoreActions":"CollectionPageHeader2584917838__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader554297078__root","mobileMoreActions":"CollectionPageHeader554297078__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/MobilePrimaryActionBar.st.css.ts

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

package/src/state/CollectionPage/TitleBadges.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges230197350";
+var _namespace_ = "TitleBadges2059119480";
 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":"TitleBadges230197350__root","tooltip":"TitleBadges230197350__tooltip","tooltipTrigger":"TitleBadges230197350__tooltipTrigger"};
+export var classes = {"root":"TitleBadges2059119480__root","tooltip":"TitleBadges2059119480__tooltip","tooltipTrigger":"TitleBadges2059119480__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/EditableTableState.ts

@@ -420,6 +420,12 @@ export class EditableTableState<T, F extends FiltersMap>
     return this.cellValue.isCellEditable(rowKey, columnId);
   }
 
+  /** `isCellEditable` does not include the table-level `updateItemDisabled`
+   *  permission. Use this to decide whether the user can edit the cell now. */
+  canEditCell(rowKey: string, columnId: string): boolean {
+    return !this.updateItemDisabled && this.isCellEditable(rowKey, columnId);
+  }
+
   isColumnEditable(rowKey: string, columnId: string): boolean {
     return this.cellValue.isColumnEditable(rowKey, columnId);
   }
@@ -455,7 +461,7 @@ export class EditableTableState<T, F extends FiltersMap>
       const res = col ? this.resolveCellTypeByColumnId(col.id) : null;
       if (res?.editOnClick) {
         const val = this.getCellDisplayValue(rowKey, columnId);
-        if (res.editOnClick(val) && this.isCellEditable(rowKey, columnId)) {
+        if (res.editOnClick(val) && this.canEditCell(rowKey, columnId)) {
           this.cellInteraction.focusCell(rowKey, columnId);
           this.cellInteraction.startEdit(rowKey, columnId, 'click');
           return;
@@ -477,10 +483,7 @@ export class EditableTableState<T, F extends FiltersMap>
 
     if (resolved?.editOnClick) {
       const value = this.getCellDisplayValue(rowKey, columnId);
-      if (
-        resolved.editOnClick(value) &&
-        this.isCellEditable(rowKey, columnId)
-      ) {
+      if (resolved.editOnClick(value) && this.canEditCell(rowKey, columnId)) {
         this.cellInteraction.focusCell(rowKey, columnId);
         this.cellInteraction.startEdit(rowKey, columnId, 'click');
         return;
@@ -498,9 +501,6 @@ export class EditableTableState<T, F extends FiltersMap>
   }
 
   handleCellDoubleClick(rowKey: string, columnId: string) {
-    if (this.updateItemDisabled) {
-      return;
-    }
     const column = this._columnMap.get(columnId);
     const resolved = column ? this.resolveCellTypeByColumnId(column.id) : null;
     // Toggle-value cells (e.g. boolean) activate on single click, not double-click.
@@ -513,7 +513,7 @@ export class EditableTableState<T, F extends FiltersMap>
     if (this.cellInteraction.isCellEditing(rowKey, columnId)) {
       return;
     }
-    if (this.isCellEditable(rowKey, columnId)) {
+    if (this.canEditCell(rowKey, columnId)) {
       this.cellInteraction.startEdit(rowKey, columnId, 'doubleClick');
     }
   }

package/src/state/EntityPage/EntityPageState.ts

@@ -22,8 +22,13 @@ import {
   EntityPageDeleteActionState,
 } from './EntityPageDeleteActionState';
 
-type OnSaveParams = {
+type OnSaveParams<T> = {
   widgetsFormData: { [key: string]: any };
+  /**
+   * The entity as `fetch` loaded it, or `null` on a create route. Use it for what
+   * the form does not hold but the update needs, such as the record's revision.
+   */
+  entity: T | null;
 };
 
 interface EntityPageStateParamsBase<T, V extends FieldValues = FieldValues> {
@@ -37,7 +42,7 @@ interface EntityPageStateParamsBase<T, V extends FieldValues = FieldValues> {
    * A function to handle the save action.
    * @returns promise that resolves to an object that contains a 'updatedEntity' object.
    */
-  onSave: (params: OnSaveParams) => Promise<{ updatedEntity: T }>;
+  onSave: (params: OnSaveParams<T>) => Promise<{ updatedEntity: T }>;
 
   /**
    * An optional object with an optional message, or it can directly get a string message.
@@ -545,6 +550,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
             if (!this.isFetching) {
               const onSaveResult = await this.onSave({
                 widgetsFormData,
+                entity: this.entity,
               });
               savedEntity = onSaveResult?.updatedEntity;
             }