@wix/patterns 1.410.0 → 1.412.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3437704295";
+var _namespace_ = "MultiBulkActionToolbar237442543";
 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":"MultiBulkActionToolbar3437704295__root","leftGroupWrapper":"MultiBulkActionToolbar3437704295__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3437704295__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3437704295__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar237442543__root","leftGroupWrapper":"MultiBulkActionToolbar237442543__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar237442543__selectedCountItem","selectedCountText":"MultiBulkActionToolbar237442543__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_ = "NestedTablePlaceholderStatesRow987428613";
+var _namespace_ = "NestedTablePlaceholderStatesRow1920079017";
 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":"NestedTablePlaceholderStatesRow987428613__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1920079017__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_ = "NestedTableRow1885064963";
+var _namespace_ = "NestedTableRow1666962002";
 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":"NestedTableRow1885064963__root","firstLevel":"NestedTableRow1885064963__firstLevel","placeholder":"NestedTableRow1885064963__placeholder","parentHovered":"NestedTableRow1885064963__parentHovered"};
+export var classes = {"root":"NestedTableRow1666962002__root","firstLevel":"NestedTableRow1666962002__firstLevel","placeholder":"NestedTableRow1666962002__placeholder","parentHovered":"NestedTableRow1666962002__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_ = "MultipleDragOverlayEffect1117863190";
+var _namespace_ = "MultipleDragOverlayEffect119588866";
 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":"MultipleDragOverlayEffect1117863190__root"};
+export var classes = {"root":"MultipleDragOverlayEffect119588866__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_ = "NestedTableDragAndDropRow4280567028";
+var _namespace_ = "NestedTableDragAndDropRow3460602526";
 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":"NestedTableDragAndDropRow4280567028__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3460602526__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageWrapper/PageWrapperBase.tsx

@@ -19,12 +19,8 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
   const [state] = useState(() => pageState ?? new PageState());
   const { modalsContainerRef, stackingRootRef, _sidePanelOpen } = state;
   const sidePanelOpen = useReactive(_sidePanelOpen);
-  const { environment, useRelativeSidePanel } = useWixPatternsContainer();
-
-  // CAIRO-3582: modify mobile detection to use user agent
-  // useEffect(() => {
-  //   return state.init();
-  // }, [state]);
+  const { environment, useRelativeSidePanel, isMobile } =
+    useWixPatternsContainer();
 
   const pageAndModalsRootStyle = useMemo(
     () => ({
@@ -80,7 +76,7 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
     </PageContextProvider>
   );
 
-  if (state.isMobile) {
+  if (isMobile) {
     child = (
       <WixDesignSystemProvider mobile={true}>{child}</WixDesignSystemProvider>
     );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent638660902";
+var _namespace_ = "PickerContent447459424";
 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":"PickerContent638660902__root"};
+export var classes = {"root":"PickerContent447459424__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_ = "PickerContentAdditionalStep1971965885";
+var _namespace_ = "PickerContentAdditionalStep1622047031";
 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":"PickerContentAdditionalStep1971965885__root","titles":"PickerContentAdditionalStep1971965885__titles","suffix":"PickerContentAdditionalStep1971965885__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1622047031__root","titles":"PickerContentAdditionalStep1622047031__titles","suffix":"PickerContentAdditionalStep1622047031__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_ = "PickerTableListItem4072182285";
+var _namespace_ = "PickerTableListItem2250779644";
 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":"PickerTableListItem4072182285__root"};
+export var classes = {"root":"PickerTableListItem2250779644__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_ = "ScrollableContent1681270320";
+var _namespace_ = "ScrollableContent2784942911";
 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":"ScrollableContent1681270320__root"};
+export var classes = {"root":"ScrollableContent2784942911__root"};
 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_ = "SkeletonCard3903971855";
+var _namespace_ = "SkeletonCard1409224683";
 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":"SkeletonCard3903971855__root","headerLoading":"SkeletonCard3903971855__headerLoading"};
+export var classes = {"root":"SkeletonCard1409224683__root","headerLoading":"SkeletonCard1409224683__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_ = "SlidingModal2579078869";
+var _namespace_ = "SlidingModal67808172";
 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":"SlidingModal2579078869__root"};
+export var classes = {"root":"SlidingModal67808172__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2144118702";
+var _namespace_ = "TabsFilter672692964";
 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":"TabsFilter2144118702__root","title":"TabsFilter2144118702__title"};
+export var classes = {"root":"TabsFilter672692964__root","title":"TabsFilter672692964__title"};
 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_ = "ManageTagsModal252756386";
+var _namespace_ = "ManageTagsModal3369225347";
 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":"ManageTagsModal252756386__root"};
+export var classes = {"root":"ManageTagsModal3369225347__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -29,13 +29,8 @@ import { TAG_MAX_LENGTH, ToastConfig } from '@wix/bex-core';
 export interface ManageTagsModalProps {
   state: TagsModalState;
 }
-const ManageTagsModalComponent = ({ state }: ManageTagsModalProps) => {
-  if (process.env.NODE_ENV !== 'production') {
-    minimalRequiredWdsRuntimeCheck({
-      required: '^1.72.0',
-      requiredBy: 'WixPatterns/ManageTagsModal',
-    });
-  }
+
+const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
   const { translate: t } = useWixPatternsContainer();
   const closeModal = useCallback(() => {
     state.closeManageTagsModal();
@@ -68,7 +63,8 @@ const ManageTagsModalComponent = ({ state }: ManageTagsModalProps) => {
     [state],
   );
 
-  const shouldAllowTagsPagination = state.tagsManagementState.shouldAllowTagsPagination;
+  const shouldAllowTagsPagination =
+    state.tagsManagementState.shouldAllowTagsPagination;
 
   const scrollRef = useRef<HTMLDivElement>(null);
   state.ref = scrollRef;
@@ -78,132 +74,151 @@ const ManageTagsModalComponent = ({ state }: ManageTagsModalProps) => {
   });
 
   return (
-    <Modal
-      isOpen={state.isOpen}
-      onRequestClose={closeModal}
-      shouldCloseOnOverlayClick
-      dataHook="manage-tags-modal"
-    >
-      <Box width={510}>
-        <CustomModalLayout
-          className={st(classes.root)}
-          overflowY="visible"
-          showFooterDivider
-          removeContentPadding
-          title={t('cairo.tags.manageTags.modal.title', {
-            EntityName: state.entityTypeName,
-          })}
-          subtitle={t('cairo.tags.manageTags.modal.subtitle')}
-          sideActions={
-            <Box>
-              <TextButton
-                dataHook="manage-tags-modal-create-btn"
-                size="small"
-                prefixIcon={<Add />}
-                onClick={handleCreateClick}
-                disabled={state.isShowingNewTagListItem}
-              >
-                {t('cairo.tags.manageTags.modal.add.CTA')}
-              </TextButton>
+    <Box width={510}>
+      <CustomModalLayout
+        className={st(classes.root)}
+        overflowY="visible"
+        showFooterDivider
+        removeContentPadding
+        title={t('cairo.tags.manageTags.modal.title', {
+          EntityName: state.entityTypeName,
+        })}
+        subtitle={t('cairo.tags.manageTags.modal.subtitle')}
+        sideActions={
+          <Box>
+            <TextButton
+              dataHook="manage-tags-modal-create-btn"
+              size="small"
+              prefixIcon={<Add />}
+              onClick={handleCreateClick}
+              disabled={state.isShowingNewTagListItem}
+            >
+              {t('cairo.tags.manageTags.modal.add.CTA')}
+            </TextButton>
+          </Box>
+        }
+        primaryButtonText={t('cairo.tags.manageTags.modal.close.CTA')}
+        primaryButtonOnClick={closeModal}
+        onCloseButtonClick={closeModal}
+        dataHook="manage-tags-modal-layout"
+      >
+        <Box direction="vertical" height="100%" flex={1}>
+          <ToastContainer>
+            {state.toastConfig && (
+              <ManageTagsNotification
+                toastConfig={state.toastConfig}
+                onClose={handleNotificationClose}
+                dataHook="manage-tags-modal-notification"
+              />
+            )}
+          </ToastContainer>
+          <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>
-          }
-          primaryButtonText={t('cairo.tags.manageTags.modal.close.CTA')}
-          primaryButtonOnClick={closeModal}
-          onCloseButtonClick={closeModal}
-          dataHook="manage-tags-modal-layout"
-        >
-          <Box direction="vertical" height="100%" flex={1}>
-            <ToastContainer>
-              {state.toastConfig && (
-                <ManageTagsNotification
-                  toastConfig={state.toastConfig}
-                  onClose={handleNotificationClose}
-                  dataHook="manage-tags-modal-notification"
+            <Divider />
+          </Box>
+          <Box
+            ref={shouldAllowTagsPagination ? scrollRef : undefined}
+            direction="vertical"
+            maxHeight={446}
+            minHeight={225}
+            dataHook="manage-tags-modal-tags-list"
+            overflowY="auto"
+            paddingBottom="SP1"
+          >
+            <ScrollableContent
+              overflowY={!shouldAllowTagsPagination}
+              smooth={!shouldAllowTagsPagination}
+              ref={!shouldAllowTagsPagination ? state.ref : undefined}
+            >
+              {state.searchValue && state.shownItems.length === 0 && (
+                <div>
+                  <AddItem
+                    theme="plain"
+                    size="tiny"
+                    alignItems="left"
+                    onClick={handleCreateTagFromSearch}
+                    dataHook="manage-tags-modal-list-add"
+                  >
+                    <Text skin="primary">
+                      <Trans
+                        i18nKey="cairo.tags.manageTags.modal.list.create.CTA"
+                        values={{
+                          tagName: `${state.searchValue.slice(
+                            0,
+                            TAG_MAX_LENGTH,
+                          )}`,
+                        }}
+                        components={{
+                          name: <Text weight="bold" skin="primary" />,
+                        }}
+                      />
+                    </Text>
+                  </AddItem>
+                </div>
+              )}
+              {state.shownItems.map((tag, idx) => (
+                <TagsListItem
+                  state={state}
+                  key={tag.id}
+                  tag={tag}
+                  isLastTag={
+                    !state.isShowingNewTagListItem &&
+                    idx === state.shownItems.length - 1
+                  }
                 />
+              ))}
+              {state.isShowingNewTagListItem && (
+                <NewTagItemEditable state={state} />
               )}
-            </ToastContainer>
-            <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}
+              {shouldAllowTagsPagination && (
+                <InfiniteScrollLoader
+                  targetRef={targetRef}
+                  state={state.tagsManagementState.collection}
+                  size="small"
                 />
-              </Box>
-              <Divider />
-            </Box>
-            <Box
-              ref={shouldAllowTagsPagination ? scrollRef : undefined}
-              direction="vertical"
-              maxHeight={446}
-              minHeight={225}
-              dataHook="manage-tags-modal-tags-list"
-              overflowY="auto"
-              paddingBottom="SP1"
-            >
-              <ScrollableContent
-                overflowY={!shouldAllowTagsPagination}
-                smooth={!shouldAllowTagsPagination}
-                ref={!shouldAllowTagsPagination ? state.ref : undefined}
-              >
-                {state.searchValue && state.shownItems.length === 0 && (
-                  <div>
-                    <AddItem
-                      theme="plain"
-                      size="tiny"
-                      alignItems="left"
-                      onClick={handleCreateTagFromSearch}
-                      dataHook="manage-tags-modal-list-add"
-                    >
-                      <Text skin="primary">
-                        <Trans
-                          i18nKey="cairo.tags.manageTags.modal.list.create.CTA"
-                          values={{
-                            tagName: `${state.searchValue.slice(
-                              0,
-                              TAG_MAX_LENGTH,
-                            )}`,
-                          }}
-                          components={{
-                            name: <Text weight="bold" skin="primary" />,
-                          }}
-                        />
-                      </Text>
-                    </AddItem>
-                  </div>
-                )}
-                {state.shownItems.map((tag, idx) => (
-                  <TagsListItem
-                    state={state}
-                    key={tag.id}
-                    tag={tag}
-                    isLastTag={
-                      !state.isShowingNewTagListItem &&
-                      idx === state.shownItems.length - 1
-                    }
-                  />
-                ))}
-                {state.isShowingNewTagListItem && (
-                  <NewTagItemEditable state={state} />
-                )}
-                {shouldAllowTagsPagination && (
-                  <InfiniteScrollLoader
-                    targetRef={targetRef}
-                    state={state.tagsManagementState.collection}
-                    size="small"
-                  />
-                )}
-              </ScrollableContent>
-            </Box>
+              )}
+            </ScrollableContent>
           </Box>
-        </CustomModalLayout>
-      </Box>
+        </Box>
+      </CustomModalLayout>
+    </Box>
+  );
+});
+
+const ManageTagsModalComponent = ({ state }: ManageTagsModalProps) => {
+  if (process.env.NODE_ENV !== 'production') {
+    minimalRequiredWdsRuntimeCheck({
+      required: '^1.72.0',
+      requiredBy: 'WixPatterns/ManageTagsModal',
+    });
+  }
+
+  const closeModal = useCallback(() => {
+    state.closeManageTagsModal();
+  }, [state]);
+
+  return (
+    <>
+      <Modal
+        isOpen={state.isOpen}
+        onRequestClose={closeModal}
+        shouldCloseOnOverlayClick
+        dataHook="manage-tags-modal"
+      >
+        <ManageTagsModalContent state={state} />
+      </Modal>
       {state.confirmModalState.value && (
         <MessageActionModal
           dataHook="manage-tags-modal-confirm-delete-modal"
@@ -221,7 +236,7 @@ const ManageTagsModalComponent = ({ state }: ManageTagsModalProps) => {
           {...state.confirmModalState.value}
         />
       )}
-    </Modal>
+    </>
   );
 };
 

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.uni.driver.ts

@@ -109,6 +109,16 @@ export function ManageTagsModalUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
 
+  // Dispatches a scroll event on the tags list container — the element the
+  // infinite-scroll listener subscribes to. jsdom can't emit real scrolls, so
+  // we trigger it directly (encapsulated here so specs stay DOM-free).
+  const scrollListToBottom = async () => {
+    const listElement = await body
+      .$(`[data-hook="manage-tags-modal-tags-list"]`)
+      .getNative();
+    listElement.dispatchEvent(new Event('scroll'));
+  };
+
   return {
     ...baseUniDriverFactory(base),
     exists,
@@ -128,5 +138,6 @@ export function ManageTagsModalUniDriver(base: UniDriver, body: UniDriver) {
     clickTagDeleteButtonByIdx,
     getTagRows,
     getMessageModalLayout,
+    scrollListToBottom,
   };
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem2130246212";
+var _namespace_ = "ToolbarItem3661574882";
 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":"ToolbarItem2130246212__root"};
+export var classes = {"root":"ToolbarItem3661574882__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_ = "ToolbarItemBox1264806043";
+var _namespace_ = "ToolbarItemBox3667293015";
 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":"ToolbarItemBox1264806043__root"};
+export var classes = {"root":"ToolbarItemBox3667293015__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};