@wix/patterns 1.430.0 → 1.432.0

package/src/components/SingleSelectFilterBase/SingleSelectFilterBase.tsx

@@ -57,7 +57,8 @@ function _SingleSelectFilterBase<V>(props: SingleSelectFilterBaseProps<V>) {
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border={isBmHarmonyTheme ? undefined : 'round'}
+      border={isBmHarmonyTheme ? 'standard' : 'round'}
+      size={isBmHarmonyTheme ? 'small' : undefined}
       closeOnSelect
       options={options}
       clearButton={clearButton}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard163200451";
+var _namespace_ = "SkeletonCard1840186893";
 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":"SkeletonCard163200451__root","headerLoading":"SkeletonCard163200451__headerLoading"};
+export var classes = {"root":"SkeletonCard1840186893__root","headerLoading":"SkeletonCard1840186893__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_ = "SlidingModal659202655";
+var _namespace_ = "SlidingModal3053485234";
 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":"SlidingModal659202655__root"};
+export var classes = {"root":"SlidingModal3053485234__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_ = "AddFieldColumnHeader4116971040";
+var _namespace_ = "AddFieldColumnHeader2380146996";
 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":"AddFieldColumnHeader4116971040__root","title":"AddFieldColumnHeader4116971040__title","hoverBridge":"AddFieldColumnHeader4116971040__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2380146996__root","title":"AddFieldColumnHeader2380146996__title","hoverBridge":"AddFieldColumnHeader2380146996__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useContext, useState } from 'react';
 import { IconButton, Popover } from '@wix/design-system';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { ToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { classes } from './AddFieldColumnHeader.st.css.js';
 

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

@@ -18,6 +18,18 @@ import { CollectionPremiumEmptyStateUniDriver } from '../EmptyState/CollectionPr
 import { CollectionNoResultsStateUniDriver } from '../EmptyState/CollectionNoResultsState.uni.driver';
 import { CollectionSectionHeaderUniDriver } from '../CollectionSectionHeader/CollectionSectionHeader.uni.driver';
 
+/** Click a table row's bulk-selection checkbox, given the row's own UniDriver. */
+export async function clickRowCheckbox(row: UniDriver): Promise<void> {
+  // The checkbox is display:none until the row is hovered (WDS RowNumberCell
+  // swaps the row number for it on hover). jsdom ignores CSS, but in a real
+  // browser (sled/Playwright) clicking without hovering waits forever.
+  await row.hover();
+  const checkbox = row
+    .$('[data-hook="bulk-selection-cell"]')
+    .$('[data-hook="row-select"]');
+  await checkbox.click();
+}
+
 export function TableUniDriver(base: UniDriver, body: UniDriver) {
   const collectionTable = CollectionTableUniDriver(
     base.$('[data-hook="collection-table"]'),
@@ -296,12 +308,6 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
       ? getVirtualizedBody().$$(`tr[data-table-row="dataTableRow"]`).count()
       : collectionTable.getRowsCount();
 
-  const getRowCheckbox = (index: number) => {
-    return getRowByIndex(index)
-      ?.$('[data-hook="bulk-selection-cell"]')
-      ?.$('[data-hook="row-select"]');
-  };
-
   const getRowKey = async (rowIndex: number, dataHook = 'table-row') => {
     const [attr] = await getRowsKeys([rowIndex], dataHook);
     return attr;
@@ -588,8 +594,7 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
       );
     },
     clickRowCheckbox: async (index: number) => {
-      const checkbox = await getRowCheckbox(index);
-      await checkbox.click();
+      await clickRowCheckbox(getRowByIndex(index));
     },
     /**
      * Gets number of rendered rows (not all items are rendered for virtualized table)

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1711245310";
+var _namespace_ = "TabsFilter773415960";
 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":"TabsFilter1711245310__root","title":"TabsFilter1711245310__title"};
+export var classes = {"root":"TabsFilter773415960__root","title":"TabsFilter773415960__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/BulkAssignTagsPopover/CreateTagButton.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback } from 'react';
 import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
 import { TextButton, Box } from '@wix/design-system';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { FiltersMap, TAG_MAX_LENGTH } from '@wix/bex-core';
+import { useBmHarmonyTheme } from '../../../hooks/useBmHarmonyTheme';
 
 export interface CreateTagButtonProps<T, F extends FiltersMap> {
   state: TagsBulkAssignPopoverState<T, F>;
@@ -15,6 +16,7 @@ export const CreateTagButton = <T, F extends FiltersMap>({
   searchValue,
 }: CreateTagButtonProps<T, F>) => {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const createAndAssignTag = useCallback(
     (tagName) => {
       state.createAndAssignTag(tagName);
@@ -28,6 +30,7 @@ export const CreateTagButton = <T, F extends FiltersMap>({
         dataHook="bulk-assign-tags-create-tag-button"
         prefixIcon={<AddIcon />}
         onClick={() => createAndAssignTag(searchValue)}
+        skin={isBmHarmonyTheme ? 'standard' : undefined}
         size="small"
         ellipsis
       >

package/src/components/Tags/BulkAssignTagsPopover/Footer.tsx

@@ -4,6 +4,7 @@ import { Box, Button, Divider, TextButton } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { FiltersMap } from '@wix/bex-core';
+import { useBmHarmonyTheme } from '../../../hooks/useBmHarmonyTheme';
 
 interface FooterProps<T, F extends FiltersMap> {
   state: TagsBulkAssignPopoverState<T, F>;
@@ -11,6 +12,7 @@ interface FooterProps<T, F extends FiltersMap> {
 
 const _Footer = <T, F extends FiltersMap>({ state }: FooterProps<T, F>) => {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const closePopover = useCallback(() => {
     state.closePopover();
@@ -26,7 +28,7 @@ const _Footer = <T, F extends FiltersMap>({ state }: FooterProps<T, F>) => {
 
   return (
     <Box height="54px" width="100%" direction="vertical">
-      <Divider />
+      {!isBmHarmonyTheme && <Divider />}
       <Box
         height="100%"
         align="space-between"
@@ -37,6 +39,7 @@ const _Footer = <T, F extends FiltersMap>({ state }: FooterProps<T, F>) => {
           <TextButton
             dataHook="bulk-assign-tags-manage-tags-button"
             size="small"
+            skin="dark"
             onClick={handleManageTagsCtaClick}
           >
             {t('cairo.tags.collectionPage.popover.manage.CTA')}

package/src/components/Tags/ManageTags/ManageTagsModal/List/TagListItemView.tsx

@@ -6,10 +6,11 @@ import {
   Box,
   Tooltip,
 } from '@wix/design-system';
-import { DeleteSmall, EditSmall } from '@wix/wix-ui-icons-common';
+import { DeleteSmall, EditSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
 import { TagsModalState } from '../../../../../state/TagsModalState';
+import { useBmHarmonyTheme } from '../../../../../hooks/useBmHarmonyTheme';
 
 export interface TagsListItemViewProps {
   state: TagsModalState;
@@ -23,6 +24,7 @@ export const TagsListItemView = ({
   isLastTag,
 }: TagsListItemViewProps) => {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const handleEditClick = () => {
     state.handleEditCtaClick(tag);
@@ -52,7 +54,7 @@ export const TagsListItemView = ({
         },
         {
           value: (
-            <Box gap="SP2" align="right">
+            <Box gap={isBmHarmonyTheme ? '2px' : 'SP2'} align="right">
               <Tooltip
                 content={t(
                   'cairo.tags.manageTags.modal.list.action.rename.CTA',
@@ -61,7 +63,7 @@ export const TagsListItemView = ({
                 <IconButton
                   dataHook="manage-tags-modal-tag-action-edit"
                   size="small"
-                  priority="secondary"
+                  priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
                   onClick={handleEditClick}
                 >
                   <EditSmall />
@@ -75,7 +77,7 @@ export const TagsListItemView = ({
                 <IconButton
                   dataHook="manage-tags-modal-tag-action-delete"
                   size="small"
-                  priority="secondary"
+                  priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
                   onClick={handleDeleteClick}
                 >
                   <DeleteSmall />
@@ -88,7 +90,7 @@ export const TagsListItemView = ({
         },
       ]}
       verticalPadding="tiny"
-      showDivider={!isLastTag}
+      showDivider={!isBmHarmonyTheme && !isLastTag}
     />
   );
 };

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

@@ -1,3 +1,12 @@
 .root {
   display: flex;
-}
+  -st-states: harmony;
+}
+
+.root:harmony :global(.wds_1_301_0_TableListItem__root) {
+  padding-inline-end: 16px;
+}
+
+.root:harmony :global(.wds_1_301_0_TableListItem__optionsContainer) {
+  align-items: start;
+}

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

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

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.tsx

@@ -12,7 +12,8 @@ import {
   ToastContainer,
 } from '@wix/design-system';
 import { useReachBottom } from '../../../../hooks/useReachBottom';
-import { Add } from '@wix/wix-ui-icons-common';
+import { useBmHarmonyTheme } from '../../../../hooks/useBmHarmonyTheme';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { TagsListItem } from './List/TagsListItem';
 import { st, classes } from './ManageTagsModal.st.css.js';
@@ -31,6 +32,7 @@ export interface ManageTagsModalProps {
 
 const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const closeModal = useCallback(() => {
     state.closeManageTagsModal();
   }, [state]);
@@ -78,9 +80,9 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
   return (
     <Box width={510}>
       <CustomModalLayout
-        className={st(classes.root)}
+        className={st(classes.root, { harmony: isBmHarmonyTheme })}
         overflowY="visible"
-        showFooterDivider
+        showFooterDivider={!isBmHarmonyTheme}
         removeContentPadding
         title={t('cairo.tags.manageTags.modal.title', {
           EntityName: state.entityTypeName,
@@ -94,6 +96,7 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
               prefixIcon={<Add />}
               onClick={handleCreateClick}
               disabled={state.isShowingNewTagListItem}
+              skin={isBmHarmonyTheme ? 'dark' : undefined}
             >
               {t('cairo.tags.manageTags.modal.add.CTA')}
             </TextButton>
@@ -101,6 +104,7 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
         }
         primaryButtonText={t('cairo.tags.manageTags.modal.close.CTA')}
         primaryButtonOnClick={closeModal}
+        primaryButtonProps={isBmHarmonyTheme ? { skin: 'dark' } : undefined}
         onCloseButtonClick={closeModal}
         dataHook="manage-tags-modal-layout"
       >
@@ -114,10 +118,11 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
               />
             )}
           </ToastContainer>
-          <Box direction="vertical" gap="SP2">
-            <Box padding="0 SP4">
+          {isBmHarmonyTheme ? (
+            <Box padding="0 SP6">
               <Search
                 autoFocus
+                border="standard"
                 dataHook="manage-tags-modal-search"
                 onChange={handleSearchChange}
                 value={state.searchValue}
@@ -128,8 +133,24 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
                 onClear={handleSearchClear}
               />
             </Box>
-            <Divider />
-          </Box>
+          ) : (
+            <Box direction="vertical" gap="SP2">
+              <Box padding="0 SP4">
+                <Search
+                  autoFocus
+                  dataHook="manage-tags-modal-search"
+                  onChange={handleSearchChange}
+                  value={state.searchValue}
+                  placeholder={t(
+                    'cairo.tags.manageTags.modal.search.placeholder',
+                  )}
+                  onEnterPressed={handleCreateTagFromSearch}
+                  onClear={handleSearchClear}
+                />
+              </Box>
+              <Divider />
+            </Box>
+          )}
           <Box
             ref={shouldAllowTagsPagination ? scrollRef : undefined}
             direction="vertical"
@@ -138,6 +159,7 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
             dataHook="manage-tags-modal-tags-list"
             overflowY="auto"
             paddingBottom="SP1"
+            marginTop={isBmHarmonyTheme ? 'SP4' : undefined}
           >
             <ScrollableContent
               overflowY={!shouldAllowTagsPagination}

package/src/components/Tags/ManageTags/ManageTagsModal/TagItemEditable.tsx

@@ -4,13 +4,17 @@ import {
   ListItemEditable,
   ListItemEditableSize,
   ListItemEditableMargins,
-  ListItemEditableProps,
   FormField,
   Input,
+  IconButton,
+  Box,
+  Tooltip,
 } from '@wix/design-system';
+import { ConfirmSmall, DismissSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../../../hooks/useBmHarmonyTheme';
 
-export interface TagItemEditableProps extends Partial<ListItemEditableProps> {
+export interface TagItemEditableProps {
   tagName?: string;
   isLastTag: boolean;
   errorMessage: string | null;
@@ -28,9 +32,81 @@ export const TagItemEditable = ({
   maxLength,
 }: TagItemEditableProps) => {
   const { translate: t } = useWixPatternsContainer();
-  const [currentValueLength, setCurrentValueLength] = useState(
-    tagName?.length ?? 0,
-  );
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const [value, setValue] = useState(tagName ?? '');
+
+  if (isBmHarmonyTheme) {
+    return (
+      <TableListItem
+        options={[
+          {
+            value: (
+              <FormField
+                dataHook="manage-tags-modal-tag-form-field"
+                stretchContent
+                status={errorMessage ? 'error' : undefined}
+                statusMessage={errorMessage}
+              >
+                <Input
+                  dataHook="manage-tags-modal-tag-editable"
+                  value={value}
+                  onChange={(e) => setValue(e.target.value)}
+                  onEnterPressed={() => onApprove(value)}
+                  onEscapePressed={onCancel}
+                  placeholder={t(
+                    'cairo.tags.manageTags.modal.list.input.placeholder',
+                  )}
+                  autoFocus
+                  size="small"
+                  suffix={
+                    <Input.Affix>
+                      {`${value.length} / ${maxLength}`}
+                    </Input.Affix>
+                  }
+                />
+              </FormField>
+            ),
+            width: '1fr',
+          },
+          {
+            value: (
+              <Box gap="2px">
+                <Tooltip
+                  content={t(
+                    'cairo.tags.manageTags.modal.list.input.cancel.CTA',
+                  )}
+                >
+                  <IconButton
+                    dataHook="manage-tags-modal-tag-action-cancel"
+                    size="small"
+                    priority="tertiary"
+                    onClick={onCancel}
+                  >
+                    <DismissSmall />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip
+                  content={t('cairo.tags.manageTags.modal.list.input.save.CTA')}
+                >
+                  <IconButton
+                    dataHook="manage-tags-modal-tag-action-approve"
+                    size="small"
+                    priority="tertiary"
+                    onClick={() => onApprove(value)}
+                  >
+                    <ConfirmSmall />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            ),
+            width: 'max-content',
+            align: 'right',
+          },
+        ]}
+        verticalPadding="tiny"
+      />
+    );
+  }
 
   return (
     <TableListItem
@@ -48,7 +124,7 @@ export const TagItemEditable = ({
                 onEnterPressed={(e: React.KeyboardEvent<HTMLInputElement>) => {
                   onApprove(e.currentTarget.value);
                 }}
-                onChange={(e) => setCurrentValueLength(e.target.value.length)}
+                onChange={(e) => setValue(e.target.value)}
                 onApprove={onApprove}
                 onCancel={onCancel}
                 placeholder={t(
@@ -65,9 +141,7 @@ export const TagItemEditable = ({
                 size={'small' as keyof typeof ListItemEditableSize}
                 margins={'none' as ListItemEditableMargins}
                 suffix={
-                  <Input.Affix>
-                    {`${currentValueLength} / ${maxLength}`}
-                  </Input.Affix>
+                  <Input.Affix>{`${value.length} / ${maxLength}`}</Input.Affix>
                 }
               />
             </FormField>

package/src/components/Tags/manageTagsPageAction.tsx

@@ -1,6 +1,6 @@
 import { CollectionPageState, WixPatternsContainer } from '@wix/bex-core';
 import { MoreActionsItem } from '../MoreActions';
-import { TagSmall } from '@wix/wix-ui-icons-common';
+import { TagSmall } from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 
 export function manageTagsPageAction({

package/src/components/TagsAssignButton/TagsAssignButton.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { Box, Button } from '@wix/design-system';
-import { TagSmall } from '@wix/wix-ui-icons-common';
+import { TagSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { BulkAssignTagsPopover } from '../Tags/BulkAssignTagsPopover';

package/src/components/TagsWidget/TagsWidget.tsx

@@ -16,7 +16,7 @@ import { TagsWidgetContextProvider } from '../TagsWidgetContext';
 import { TagsWidgetContent } from './TagsWidgetContent';
 import { Tags, OnSubmitTagsFuncType, TagsWidgetState } from '@wix/bex-core';
 import { useWidgetPageStatus } from '../useWidgetPageStatus';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 import { useTagsWidgetInternal } from '../../hooks/useTagsWidget';
 
 export type TagsWidgetProps = {

package/src/components/TagsWidget/TagsWidgetContent.tsx

@@ -12,7 +12,7 @@ import {
   Tag,
   Text,
 } from '@wix/design-system';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 import { TagsWidgetBaseProps } from './TagsWidget';
 import { runInAction } from 'mobx';
 import {

package/src/components/ToolbarCollection/useToolbarCollectionSyncProps.ts

@@ -60,26 +60,27 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
   }, []);
 
   useEffect(() => {
-    reaction(
-      () => ({
-        scrollTop: state.scrollTopBeforeUnmount,
-        routerState: router?.currentState,
-      }),
-      ({ scrollTop, routerState }) => {
-        pageState.scrollTopBeforeUnmount = routerState?._createdEntity
-          ? 0
-          : scrollTop;
+    pageState.scrollTopBeforeUnmount = router?.currentState?._createdEntity
+      ? 0
+      : state.scrollTopBeforeUnmount;
+    // The offset belongs to a single trip back. The cached state outlives it,
+    // so leaving it set would restore it again on any later remount.
+    state.scrollTopBeforeUnmount = null;
+
+    return reaction(
+      () => router?.currentState,
+      (routerState) => {
+        if (!routerState?._chosenEntity) {
+          return;
+        }
+        // Reading it on unmount is too late: React detaches the page before
+        // effect cleanups run, and a detached element reports scrollTop 0.
+        const el = pageState.pageState.scrollableContentRef.current;
+        if (el) {
+          state.scrollTopBeforeUnmount = el.scrollTop;
+        }
       },
-      { fireImmediately: true },
     );
-
-    return () => {
-      const scrollTop =
-        pageState.pageState.scrollableContentRef.current?.scrollTop;
-      if (scrollTop !== undefined) {
-        state.scrollTopBeforeUnmount = scrollTop;
-      }
-    };
   }, []);
 
   const getIsUsingAllItemsView = () =>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem714044881";
+var _namespace_ = "ToolbarItem236369946";
 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":"ToolbarItem714044881__root"};
+export var classes = {"root":"ToolbarItem236369946__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_ = "ToolbarItemBox2861690222";
+var _namespace_ = "ToolbarItemBox2074326680";
 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":"ToolbarItemBox2861690222__root"};
+export var classes = {"root":"ToolbarItemBox2074326680__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_ = "common843717652";
+var _namespace_ = "common3243586050";
 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":"common843717652__root","column":"common843717652__column","fullHeight":"common843717652__fullHeight"};
+export var classes = {"root":"common3243586050__root","column":"common3243586050__column","fullHeight":"common3243586050__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/deleteSecondaryAction/deleteSecondaryAction.tsx

@@ -1,4 +1,4 @@
-import { Delete } from '@wix/wix-ui-icons-common';
+import { Delete } from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 import {
   CollectionOptimisticActions,