@wix/patterns 1.425.0 → 1.426.0

package/src/components/SchemaSource/schemaImportRef.ts

@@ -0,0 +1,122 @@
+import type {
+  BackupConfig,
+  BackupFn,
+  Field,
+  ImportButtonConfig,
+  ImportField,
+  NewFieldDefinition,
+  Schema,
+} from '@wix/bex-core';
+import type { TableSchemaSource } from './tableSchemaSource';
+import { toPatternsFieldType } from '../ImportButton/newFieldTypeMapping';
+
+// Adapts a schema's BackupConfig (create / wait / restore steps) to the import's
+// BackupFn: snapshot on call, and hand back a `restore` used to undo the import
+// on cancel. A source without `restore` snapshots but offers no undo.
+const composeBackupFn =
+  (backup: BackupConfig): BackupFn =>
+  async (signal) => {
+    const { backupId } = await backup.create();
+    await backup.waitForCompletion(backupId, { signal });
+
+    const restore = backup.restore;
+    if (!restore) {
+      return;
+    }
+    return {
+      restore: async (restoreSignal) => {
+        const { restorationId } = await restore(backupId);
+        await backup.waitForRestoration?.(restorationId, {
+          signal: restoreSignal,
+        });
+      },
+    };
+  };
+
+// Builds the Field to create from a pending new column: import decides the key,
+// and the detected NewFieldType maps to the schema's PatternsFieldType. Import
+// only ever creates non-reference fields, so the cast is safe.
+const toField = (def: NewFieldDefinition): Field =>
+  ({
+    id: def.key,
+    displayName: def.displayName,
+    type: toPatternsFieldType(def.type),
+    ...(def.config?.validation && { validation: def.config.validation }),
+    ...(def.config?.isPii && { isPii: true }),
+    ...(def.config?.helpText && { helpText: def.config.helpText }),
+  } as Field);
+
+/**
+ * An `ImportButtonConfig` that reads the table's live `SchemaState` — the same
+ * one the table renders from. Every input is read on demand, so:
+ *  - the async schema load needn't resolve before this is constructed, and
+ *  - fields the import creates (merged back via `mergeFields`) and fields added
+ *    through the field-management panel show up immediately, with no stale copy.
+ *
+ * Reads `source.schemaState`, which the source only populates when it attaches
+ * to the table (`setOnTable`) — after this is built. Reading it through the
+ * getter each time gives that late binding: `state` is `undefined` until then
+ * (fields empty, no create).
+ */
+export class SchemaImportRef implements ImportButtonConfig {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private readonly source: TableSchemaSource<any>;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(source: TableSchemaSource<any>) {
+    this.source = source;
+  }
+
+  private get state() {
+    return this.source.schemaState;
+  }
+
+  get fields(): ImportField[] {
+    const state = this.state;
+    if (!state) {
+      return [];
+    }
+    return state.fields.map((f) => ({ id: f.id, header: f.displayName }));
+  }
+
+  get collectionId(): string | undefined {
+    return this.state?.source.collectionId;
+  }
+
+  get idFieldKey(): string | undefined {
+    return this.state?.schema?.idField;
+  }
+
+  get canAddFields(): boolean {
+    const state = this.state;
+    const schema = state?.schema;
+    // Require both the create-field permission and a batch action to create
+    // with; otherwise columns would default to "new" but nothing gets created
+    // and the upload writes values under keys with no field.
+    if (!schema || !state.fieldActions?.addFields) {
+      return false;
+    }
+    return state.source.canAddFields(schema);
+  }
+
+  updateSchema = async (
+    defs: NewFieldDefinition[],
+  ): Promise<Schema['fields'] | void> => {
+    const add = this.state?.fieldActions?.addFields;
+    if (!add) {
+      return;
+    }
+    return add(defs.map(toField));
+  };
+
+  // Merge the created fields into the live SchemaState so the table's columns
+  // update with no reload (CAIRO-4400). Reads the same state the table renders.
+  mergeFields = (fields: Schema['fields']): void => {
+    this.state?.mergeFields(fields);
+  };
+
+  get backup(): BackupFn | undefined {
+    const backup = this.state?.loadedSchema?.backend.backup;
+    return backup ? composeBackupFn(backup) : undefined;
+  }
+}

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -10,18 +10,35 @@ import { SchemaState } from './SchemaState';
  *
  * It stays the full config, so you can still spread and override it. `setOnTable`
  * reads `this`, so any overrides on the (possibly spread) object take effect.
+ *
+ * `schemaState` exposes the attached state so `useSchemaImport` reads the same
+ * live schema the table renders — import always matches the visible columns
+ * (including fields it just created, or ones added via the field-management
+ * panel), rather than a separate loaded copy.
  */
 export type TableSchemaSource<T = Record<string, unknown>> = SchemaSource<T> &
-  FieldsSourceProvider;
+  FieldsSourceProvider & {
+    readonly schemaState?: SchemaState<T>;
+  };
 
 export const tableSchemaSource = <T>(
   source: SchemaSource<T>,
-): TableSchemaSource<T> => ({
-  ...source,
-  setOnTable(toolbar) {
-    new SchemaState({
-      container: toolbar.container,
-      source: this,
-    }).setOnTable(toolbar);
-  },
-});
+): TableSchemaSource<T> => {
+  // Created once on attach and reused, so the table and `useSchemaImport` share
+  // one SchemaState (and one load).
+  let state: SchemaState<T> | undefined;
+
+  return {
+    ...source,
+    get schemaState() {
+      return state;
+    },
+    setOnTable(toolbar) {
+      state ??= new SchemaState<T>({
+        container: toolbar.container,
+        source: this,
+      });
+      state.setOnTable(toolbar);
+    },
+  };
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent1473945663";
+var _namespace_ = "ScrollableContent350807700";
 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":"ScrollableContent1473945663__root"};
+export var classes = {"root":"ScrollableContent350807700__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_ = "SetupWidget2333671370";
+var _namespace_ = "SetupWidget1455868437";
 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":"SetupWidget2333671370__root","row":"SetupWidget2333671370__row","completedCta":"SetupWidget2333671370__completedCta","card":"SetupWidget2333671370__card","stepIcon":"SetupWidget2333671370__stepIcon","chevron":"SetupWidget2333671370__chevron","chevronDisabled":"SetupWidget2333671370__chevronDisabled","inProgressLabel":"SetupWidget2333671370__inProgressLabel"};
+export var classes = {"root":"SetupWidget1455868437__root","row":"SetupWidget1455868437__row","completedCta":"SetupWidget1455868437__completedCta","card":"SetupWidget1455868437__card","stepIcon":"SetupWidget1455868437__stepIcon","chevron":"SetupWidget1455868437__chevron","chevronDisabled":"SetupWidget1455868437__chevronDisabled","inProgressLabel":"SetupWidget1455868437__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_ = "SkeletonCard1380766072";
+var _namespace_ = "SkeletonCard2287561488";
 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":"SkeletonCard1380766072__root","headerLoading":"SkeletonCard1380766072__headerLoading"};
+export var classes = {"root":"SkeletonCard2287561488__root","headerLoading":"SkeletonCard2287561488__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_ = "SlidingModal2315682368";
+var _namespace_ = "SlidingModal2066405265";
 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":"SlidingModal2315682368__root"};
+export var classes = {"root":"SlidingModal2066405265__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_ = "TabsFilter311251995";
+var _namespace_ = "TabsFilter1693177651";
 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":"TabsFilter311251995__root","title":"TabsFilter311251995__title"};
+export var classes = {"root":"TabsFilter1693177651__root","title":"TabsFilter1693177651__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_ = "ManageTagsModal885634463";
+var _namespace_ = "ManageTagsModal1377424349";
 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":"ManageTagsModal885634463__root"};
+export var classes = {"root":"ManageTagsModal1377424349__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -11,8 +11,7 @@ import {
   Search,
   ToastContainer,
 } from '@wix/design-system';
-import { useCollectionReachBottom } from '../../../useCollectionReachBottom';
-import { InfiniteScrollLoader } from '../../../InfiniteScrollLoader/InfiniteScrollLoader';
+import { useReachBottom } from '../../../../hooks/useReachBottom';
 import { Add } from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { TagsListItem } from './List/TagsListItem';
@@ -68,9 +67,12 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
 
   const scrollRef = useRef<HTMLDivElement>(null);
   state.ref = scrollRef;
-  const { targetRef } = useCollectionReachBottom({
-    collection: state.tagsManagementState.collection,
-    containerRef: shouldAllowTagsPagination ? scrollRef : undefined,
+
+  // Grows the local render window when the user scrolls near the bottom —
+  // all tags are already in memory, only rendering is windowed
+  useReachBottom({
+    containerRef: scrollRef,
+    onReachBottom: state.showMoreItems,
   });
 
   return (
@@ -182,13 +184,6 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
               {state.isShowingNewTagListItem && (
                 <NewTagItemEditable state={state} />
               )}
-              {shouldAllowTagsPagination && (
-                <InfiniteScrollLoader
-                  targetRef={targetRef}
-                  state={state.tagsManagementState.collection}
-                  size="small"
-                />
-              )}
             </ScrollableContent>
           </Box>
         </Box>

package/src/components/TagsWidget/TagsWidgetContent.tsx

@@ -117,8 +117,6 @@ const _TagsWidgetContent = ({
     );
   }, [initialTagIdsKey]);
 
-  const { shouldAllowTagsPagination } = formState.tagsManagementState;
-
   const tagsOptions = useMemo(() => {
     const options = formState.displayedTagOptions;
 
@@ -192,13 +190,6 @@ const _TagsWidgetContent = ({
     <>
       <MultiSelect
         popoverProps={popoverProps}
-        {...(shouldAllowTagsPagination
-          ? {
-              infiniteScroll: true,
-              hasMore: formState.tagsManagementState.hasMore,
-              loadMore: () => formState.tagsManagementState.loadMore(),
-            }
-          : {})}
         value={formState.searchValue}
         onChange={handleSearchChange}
         options={tagsOptions}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem3003316184";
+var _namespace_ = "ToolbarItem1774963001";
 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":"ToolbarItem3003316184__root"};
+export var classes = {"root":"ToolbarItem1774963001__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_ = "ToolbarItemBox1042953345";
+var _namespace_ = "ToolbarItemBox3581991017";
 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":"ToolbarItemBox1042953345__root"};
+export var classes = {"root":"ToolbarItemBox3581991017__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_ = "common1291335839";
+var _namespace_ = "common1406259648";
 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":"common1291335839__root","column":"common1291335839__column","fullHeight":"common1291335839__fullHeight"};
+export var classes = {"root":"common1406259648__root","column":"common1406259648__column","fullHeight":"common1406259648__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './useBuildOption';
 export * from './usePickerModal';
 export * from './usePickerStandalone';
 export * from './useViews';
+export * from './useSchemaImport';
 export * from './useEmptyStateTexts';
 export * from './customModalContent';
 export * from './useDropdownSelectFilterState';

package/src/hooks/useReachBottom.ts

@@ -0,0 +1,50 @@
+import { RefObject, useEffect, useRef } from 'react';
+import {
+  ReachBottomListener,
+  ScrollableWindow,
+} from '../reach-bottom-listener';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface UseReachBottomParams {
+  containerRef: RefObject<ScrollableWindow | null | undefined>;
+  onReachBottom: () => unknown;
+  // distance from the bottom to trigger the callback
+  offsetPX?: number;
+  // throttle scroll event
+  delay?: number;
+}
+
+/**
+ * Calls `onReachBottom` when the container is scrolled near its bottom.
+ * For fetching more pages of a collection, use `useCollectionReachBottom`
+ * instead — it also refills under-filled containers and reacts to
+ * collection events.
+ */
+export function useReachBottom({
+  containerRef,
+  onReachBottom,
+  offsetPX = 250,
+  delay = 200,
+}: UseReachBottomParams) {
+  const { lodash } = useWixPatternsContainer();
+
+  const onReachBottomRef = useRef(onReachBottom);
+  onReachBottomRef.current = onReachBottom;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container == null) {
+      return;
+    }
+
+    const listener = new ReachBottomListener({
+      onReachBottom: () => onReachBottomRef.current(),
+      delay,
+      offsetPX,
+      lodash,
+      container,
+    });
+    listener.subscribe();
+    return () => listener.unsubscribe();
+  }, []);
+}

package/src/hooks/useSchemaImport.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import type { ImportButtonConfig } from '@wix/bex-core';
+import type { TableSchemaSource } from '../components/SchemaSource/tableSchemaSource';
+import { SchemaImportRef } from '../components/SchemaSource/schemaImportRef';
+
+/**
+ * Builds an `ImportButtonConfig` for the CSV import flow that reads the table's
+ * live `SchemaState` — the same one `source` attaches to the table. Pass the
+ * result to `<ImportButton config={config} />`.
+ *
+ * Because it reads the live state, the import always matches the table's current
+ * fields (including ones it just created) and needs no load of its own.
+ * `source` is expected to be stable (memoized, as `CmsFieldsTable` does).
+ */
+export function useSchemaImport<T = Record<string, unknown>>(
+  source: TableSchemaSource<T>,
+): ImportButtonConfig {
+  const [config] = useState(() => new SchemaImportRef(source));
+
+  return config;
+}

package/src/index.ts

@@ -131,6 +131,7 @@ export {
 export * from './hooks/usePickerStandalone';
 export * from './hooks/useSetupWidget';
 export * from './hooks/useViews';
+export * from './hooks/useSchemaImport';
 export * from './hooks/useTableGridSwitchFolders';
 export * from './hooks/useTableCollection';
 export * from './hooks/useGridCollection';

package/src/state/CollectionFieldsSourceState.ts

@@ -5,6 +5,7 @@ import type {
   FieldsSource,
   CustomFieldOrigin,
   Field,
+  Schema,
   WixPatternsErrorCode,
 } from '@wix/bex-core';
 import type { Column } from '../model';
@@ -211,6 +212,12 @@ export class CollectionFieldsSourceState {
     }
   }
 
+  /** Merges a returned fields map into the source (no refetch). No-ops for sources
+   *  that don't support in-place merging. The fields reaction rebuilds columns. */
+  mergeFields(fields: Schema['fields']) {
+    this.fieldsSource.mergeFields?.(fields);
+  }
+
   init() {
     this.initTask.runOnce(() => this.fieldsSource.load());
     this.initTask.status.promise?.catch(() => this.handleLoadError());

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

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

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/TagsModalState.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { action, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import {
   ConditionalModalState,
   TAG_MAX_LENGTH,
@@ -21,6 +21,10 @@ export interface TagsModalStateParams {
 
 const actionOrigin = 'Manage Tags Modal';
 
+// Render window for the tags list — the full list (up to 1000 tags) is in
+// memory, but rendering it all at once makes the modal sluggish
+const SHOWN_ITEMS_WINDOW_SIZE = 100;
+
 export class TagsModalState {
   readonly tagsManagementState;
   readonly tagsSearchState;
@@ -42,6 +46,7 @@ export class TagsModalState {
     deep: false,
   });
   ref: RefObject<HTMLDivElement> | null = null;
+  shownItemsLimit: number = SHOWN_ITEMS_WINDOW_SIZE;
 
   constructor({
     tagsManagementState,
@@ -68,6 +73,9 @@ export class TagsModalState {
       editedTagId: observable,
       editedTagErrorMessage: observable,
       isShowingNewTagListItem: observable,
+      shownItemsLimit: observable,
+      shownItems: computed,
+      showMoreItems: action.bound,
       init: action,
       openManageTagsModal: action,
       closeManageTagsModal: action,
@@ -124,6 +132,7 @@ export class TagsModalState {
   }) {
     this.origin = origin;
     this.tagSubOrigin = tagSubOrigin;
+    this.shownItemsLimit = SHOWN_ITEMS_WINDOW_SIZE;
     this.manageTagsModalState.modal.open();
     this._reportBiModalOpened();
     this.tagsManagementState.overrideShowToast = true;
@@ -161,16 +170,23 @@ export class TagsModalState {
   handleSearchChange(newSearchValue: string) {
     this.editedTagId = null;
     this.isShowingNewTagListItem = false;
+    this.shownItemsLimit = SHOWN_ITEMS_WINDOW_SIZE;
     this._reportSearchChangedBi(newSearchValue);
     this.tagsSearchState.setSearchValue(newSearchValue);
   }
 
   handleSearchClear() {
     this._reportSearchEventsBi('clear');
+    this.shownItemsLimit = SHOWN_ITEMS_WINDOW_SIZE;
     this.tagsSearchState.setSearchValue('');
   }
 
+  showMoreItems() {
+    this.shownItemsLimit += SHOWN_ITEMS_WINDOW_SIZE;
+  }
+
   handleCreateCtaClick() {
+    this._showAllItems();
     this.tagsSearchState.setSearchValue('');
     this.editedTagId = null;
     this.isShowingNewTagListItem = true;
@@ -210,6 +226,7 @@ export class TagsModalState {
       return;
     }
 
+    this._showAllItems();
     const newName = this.searchValue.slice(0, TAG_MAX_LENGTH);
     this._reportSearchEventsBi('add');
     this._createTag({
@@ -221,6 +238,7 @@ export class TagsModalState {
   }
 
   async createTagFromList(newName: string) {
+    this._showAllItems();
     const { status, statusMessage } = this._isValidName(newName);
     if (status === 'error') {
       this.editedTagErrorMessage = statusMessage;
@@ -346,11 +364,13 @@ export class TagsModalState {
   }
 
   get shownItems() {
-    return [...this.tagsSearchState.items].sort(
-      (tag1, tag2) =>
-        new Date(tag1.createdDate!).valueOf() -
-        new Date(tag2.createdDate!).valueOf(),
-    );
+    return [...this.tagsSearchState.items]
+      .sort(
+        (tag1, tag2) =>
+          new Date(tag1.createdDate!).valueOf() -
+          new Date(tag2.createdDate!).valueOf(),
+      )
+      .slice(0, this.shownItemsLimit);
   }
 
   get isOpen() {
@@ -366,6 +386,12 @@ export class TagsModalState {
   private createTagFromListTimeout?: number;
   private updateTagTimeout?: number;
 
+  // A created tag sorts to the end of the list — the render window must cover
+  // the full list so the deferred scroll-to-bottom actually reveals it
+  private _showAllItems() {
+    this.shownItemsLimit = Number.MAX_SAFE_INTEGER;
+  }
+
   private async _createTag({
     name,
     isFromSearch = false,