@wix/patterns 1.255.0 → 1.256.0

package/src/components/ToolbarCollection/ToolbarCollection.tsx

@@ -0,0 +1,390 @@
+import { Box, CardProps, usePageScrollContext } from '@wix/design-system';
+import React, {
+  CSSProperties,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+import { CollectionToolbarProps, FilterElement, TabsFilterProps } from '../..';
+import { ComputedQuery, FiltersMap } from '@wix/bex-core';
+import { ToolbarCollectionState } from '../../state';
+import {
+  assertComponentType,
+  CollectionSearchElement,
+  CollectionToolbarFiltersElement,
+  CollectionViewsDropdownElement,
+  CustomColumnsElement,
+  PrimaryActionButtonElement,
+  ReorderModeToolbarElement,
+  TabsFilterElement,
+  ToolbarTitleElement,
+  TopNotificationElement,
+  ToolbarSecondaryActionsElement,
+} from '../assertComponentType';
+import { CollectionToolbars } from '../CollectionToolbars';
+import {
+  DragAndDropBulkSubmit,
+  DragAndDropCancel,
+  DragAndDropSubmit,
+} from '../DragAndDrop';
+import { TableGridSwitchButtonProps } from '../TableGridSwitchButton';
+import { checkConflictingToolbarProps } from './checkConflictingToolbarProps';
+import type { AddApplyFiltersButtonType } from '../FiltersPanel/AddApplyFiltersButton';
+import type { TagsElement } from '../Tags';
+import type { ExtensionMenuItemsType } from '../ExtensionMenuItems';
+import { TablePlaceholderStatesProps } from '../TablePlaceholderStates/TablePlaceholderStates';
+import { DragAndDropCategoriesProps } from '../DragAndDrop/DragAndDropCategoriesProps';
+import { MoreActionsElement } from '../MoreActions';
+
+export interface ToolbarBaseProps {
+  /**
+   * Displays a title at the left of a toolbar. Accepts a [ToolbarTitle](./?path=/story/features-display-toolbar--toolbartitle) component.
+   * @overrideType [ToolbarTitle](./?path=/story/features-display-toolbar--toolbartitle)
+   * @external
+   */
+  title?: ToolbarTitleElement;
+  /**
+   * Displays a search input on the right side of the table toolbar.<br> <br>
+   * Accepts a boolean or a custom React element as a parameter. When passing `false`, no search input is displayed.
+   * @default true
+   * @external
+   */
+  search?: boolean | FilterElement | CollectionSearchElement;
+
+  /**
+   * Indicates whether to show Table Title Bar or not.
+   * Note: if you pass `showTitleBar = false` title bar is not removed from the DOM. For better accessibility column titles should be defined as well.
+   * @default true
+   * @external
+   */
+  showTitleBar?: boolean;
+  /**
+   * A [`<ExportButton />`](./?path=/story/features-export--exportto) react element to be added to the toolbar
+   */
+  exportButton?: ReactElement;
+
+  /**
+   * A [`<ExportModal />`](./?path=/story/features-export--exportto#CTA_is_out_of_the_table) react element to be rendered in table's context.
+   */
+  exportModal?: ReactElement;
+}
+
+export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
+  extends ToolbarBaseProps,
+    DragAndDropCategoriesProps<F> {
+  children?: ReactNode | ReactNode[];
+
+  /**
+   * Adds view options to the table headers.
+   * Accepts a [Views](./?path=/story/features-display-views--views) component.
+   * @overrideType [Views](./?path=/story/features-display-views--views)
+   * @external
+   */
+  views?: CollectionViewsDropdownElement<F>;
+  /**
+   * Adds filters to the toolbar and/or a sliding panel.
+   * Accepts a `ToolbarFilters` component, which must have the `panelTitle` prop defined.
+   * @overrideType [ToolbarFilters](./?path=%2Fstory%2Ffeatures-filter-components--toolbarfilters)
+   * @external
+   */
+  filters?: CollectionToolbarFiltersElement;
+  /**
+   * Displays tabs at the left of a toolbar.
+   * Accepts a [TabsFilter](./?path=/story/features-filter-components--tabsfilter) component.
+   * @overrideType [TabsFilter](./?path=/story/features-filter-components--tabsfilter)
+   * @external
+   */
+  tabs?: TabsFilterElement<TabsFilterProps<T>>;
+
+  selectionToolbar?: ReactElement;
+
+  sticky?: boolean;
+  /**
+   * Minimum height for a card's container when showing:<br>
+   * - A loader<br>
+   * - Empty state<br>
+   * - Error state
+   * <br><br>
+   * If no unit is specified, `px` is used.
+   * @default 300px
+   * @external
+   */
+  minCardHeight?: CSSProperties['minHeight'];
+
+  /**
+   * A render function to be rendered when there's an error fetching data from the server.<br>
+   * The function accepts the following parameters <br>
+   *   * `err`: The error thrown by the [fetchData](./?path=/story/common-hooks--usecollection) function <br>
+   *   * `isOnline`: Indicates whether internet connection is available <br>
+   *   * `retry`: Retry collection fetch on failed response, similar to `collection.retryFetch` <br>
+   * Returns [`EmptyState`](https://www.docs.wixdesignsystem.com/?path=/story/components-layout--emptystate) component.
+   * @external
+   * @deprecated Use `errorState` instead.
+   */
+  renderError?: TablePlaceholderStatesProps['renderError'];
+
+  /**
+   * A render function to be rendered when there's an error fetching data from the server.<br>
+   * The function accepts the following parameters <br>
+   *   * `err`: The error thrown by the [fetchData](./?path=/story/common-hooks--usecollection) function <br>
+   *   * `isOnline`: Indicates whether internet connection is available <br>
+   *   * `retry`: Retry collection fetch on failed response, similar to `collection.retryFetch` <br>
+   * Returns [`EmptyState`](https://www.docs.wixdesignsystem.com/?path=/story/components-layout--emptystate) component.
+   * @external
+   */
+  errorState?: TablePlaceholderStatesProps['errorState'];
+
+  /**
+   * Renders when there are no items to display. Accepts a [`CollectionEmptyState`](./?path=/story/features-display-empty-states--collectionemptystate) component.
+   * @external
+   * @overrideType [CollectionEmptyState](./?path=/story/features-display-empty-states--collectionemptystate)
+   */
+  emptyState?: ReactNode;
+
+  /**
+   * Shown when a search or filter has no results.
+   * Accepts a [`CollectionNoResultsState`](./?path=/story/features-display-empty-states--collectionnoresultsstate) component,
+   * or a function that accepts the following parameters:
+   * - `hasAvailableItems`: Indicates whether other items may be shown using other filter or search parameters.
+   * - `query`: An instance of [`ComputedQuery`](./?path=/story/common-models--computedquery) representing the query that resulted in the empty state.
+   * The function should return [`CollectionNoResultsState`](./?path=/story/features-display-empty-states--collectionnoresultsstate).
+   * @external
+   * @overrideType [CollectionNoResultsState](./?path=/story/features-display-empty-states--collectionnoresultsstate)
+   */
+  noResultsState?:
+    | ReactNode
+    | ((params: {
+        hasAvailableItems: boolean;
+        query: ComputedQuery<F>;
+      }) => ReactNode);
+
+  cardProps?: Partial<CardProps>;
+  onSelectedItems?: (allSelected: boolean, items: T[]) => unknown;
+  /**
+   * Renders a notification below the header. Accepts a [`TableTopNotification`](./?path=/story/features-display-tabletopnotification--tabletopnotification) component.
+   * @overrideType [TableTopNotification](./?path=/story/features-display-tabletopnotification--tabletopnotification)
+   * @external
+   */
+  topNotification?:
+    | TopNotificationElement
+    | ((params: {
+        query: ComputedQuery<F>;
+      }) => TopNotificationElement | boolean | null | undefined)
+    | boolean
+    | null
+    | undefined;
+
+  extraToolbar?: ReactNode;
+
+  /**
+   * Display a summary bar below the toolbar.
+   * Accepts a [`SummaryBar`](./?path=/story/features-display-toolbar--summarybar) component.
+   * @overrideType [SummaryBar](./?path=/story/features-display-toolbar--summarybar)
+   * @external
+   */
+  summaryBar?: ReactNode;
+  tableGridSwitchButton?: ReactElement<TableGridSwitchButtonProps>;
+
+  /**
+   * Function that submits a drop event to the server. <br> <br>
+   * The parameter is an event object containing the following details: <br>
+   * -`from: {item: T; index: number}`: The dragged item. <br>
+   * -`after: null | [item: T; iindex: number}`: The previous dropped item. If this is the first item to be dropped, this argument is `null`. <br>
+   * -`filters`: Applied [Drag and Drop](./?path=/story/features-sort-drag-and-drop--overview) filters.
+   *
+   * @returns Promise
+   * @external
+   */
+  dragAndDropSubmit?: DragAndDropSubmit<T, F>;
+
+  /**
+   * Function that submits an array of drop events to the server. <br> <br>
+   * The parameter is an array of event objects containing the following details: <br>
+   * -`from: {item: T; index: number}`: The dragged item. <br>
+   * -`after: null | [item: T; index: number}`: The previous dropped item. If this is the first item to be dropped, this argument is `null`. <br>
+   * -`filters`: Applied [Drag and Drop](./?path=/story/features-sort-drag-and-drop--overview) filters. <br>
+   *
+   * @returns Promise
+   * @external
+   */
+  dragAndDropBulkSubmit?: DragAndDropBulkSubmit<T, F>;
+
+  /**
+   * A function that cancels a drop event. <br>
+   * Supported arguments: <br>
+   * - `from: {item: T; index: number}`: The dragged item.
+   * - `after: null | {item: T; index: number}`: The item that the dragged item was dropped after. If dropped at the head of the collection, this argument will be `null`.
+   * - `filters`: Currently applied filters. Used in cases where your server holds a unique ordering per filtering. See the `dragAndDropCategories` prop.
+   *
+   * If the move is cancelled, the function returns a toast config object with a message. Otherwise, the function will return a null value.
+   * @external
+   */
+  dragAndDropCancel?: DragAndDropCancel<T, F>;
+
+  /**
+   * @deprecated It doesn't need to be passed implicitly anymore.
+   */
+  extensionMenuItems?: ExtensionMenuItemsType;
+
+  /**
+   * Drag and drop reorder mode toolbar. This prop accepts a `ReorderModeToolbar` component.<br>
+   * The `ReorderModeToolbar` component accepts the following props:<br>
+   *  + `learnMoreUrl`: [string] A URL in the toolbar.<br>
+   *  + `reorderModeTitle`: [string] A title in the toolbar.
+   * @external
+   */
+  dragAndDropReorderModeToolbar?: ReorderModeToolbarElement | null;
+
+  /**
+   * Adds functionality to allow visitors to create choose which columns to display and in what order. Accepts a [CustomColumns](./?path=/story/features-display--customcolumns) component.
+   * @overrideType [CustomColumns](./?path=/story/features-display--customcolumns)
+   * @external
+   */
+  customColumns?: CustomColumnsElement | null;
+
+  /**
+   * Adds functionality to allow visitors to sort multiple columns simultaneously.
+   * Accepts a [MultiLevelSorting](./?path=/story/features-sort-sortable-columns-multilevelsorting--multilevelsorting) component.
+   * @overrideType [MultiLevelSorting](./?path=/story/features-sort-sortable-columns-multilevelsorting--multilevelsorting)
+   * @external
+   */
+  multiLevelSorting?: CollectionToolbarProps<T, F>['multiLevelSorting'];
+
+  /**
+   * Adds functionality for a primary action button in the toolbar.
+   * Accepts a [PrimaryActionButton](./?path=/story/features-actions-primaryactionbutton--primaryactionbutton) component.
+   * @external
+   * @overrideType [PrimaryActionButton](./?path=/story/features-actions-primaryactionbutton--primaryactionbutton)
+   */
+  primaryActionButton?: PrimaryActionButtonElement;
+
+  /**
+   * Secondary buttons w/o PopoverMenu component to be rendered on the toolbar.
+   * @overrideType [ToolbarSecondaryActions](./?path=/story/wip-toolbarsecondaryactions--toolbarsecondaryactions)
+   * @external
+   */
+  secondaryActions?: ToolbarSecondaryActionsElement;
+
+  /**
+   * A [`MoreActions`](./?path=/story/features-actions-more-actions--more-actions) component to be rendered on the header.
+   * @overrideType [MoreActions](./?path=/story/features-actions-more-actions--more-actions)
+   * @external
+   */
+  moreActions?: MoreActionsElement;
+
+  /**
+   * Apply filter button implementation: `import { AddApplyFiltersButton } from '@wix/patterns';`
+   * <br>
+   * Add `Apply` button to the filters panel footer. Panel filters will be applied only after the button is clicked.
+   */
+  AddApplyFiltersButton?: AddApplyFiltersButtonType;
+
+  /**
+   * Limits the amount of rows a visitor can select.
+   * @external
+   */
+  maxSelection?: number;
+
+  /**
+   * Indicates whether the table should have an [internal scroll](./?path=/story/features-display-internal-scroll--internal-scroll) instead of the default page scroll.
+   * @external
+   */
+  internalScroll?: boolean;
+
+  /**
+   * Enables tags feature. In this element you can pass the configuration
+   * @overrideType [TagsElement](./?path=/story/features-enrich-tags--tags)
+   */
+  tags?: TagsElement<T, F>;
+}
+
+export interface ToolbarCollectionProps<T, F extends FiltersMap>
+  extends ToolbarCollectionBaseProps<T, F> {
+  state: ToolbarCollectionState<T, F>;
+}
+
+export function ToolbarCollection<T, F extends FiltersMap>(
+  props: ToolbarCollectionProps<T, F>,
+) {
+  const {
+    state,
+    filters,
+    title,
+    tabs,
+    views,
+    extraToolbar,
+    selectionToolbar,
+    dragAndDropReorderModeToolbar,
+    sticky: stickyProp,
+    search,
+    children,
+    tableGridSwitchButton,
+    exportButton,
+    primaryActionButton,
+    secondaryActions,
+    moreActions,
+    summaryBar,
+    topNotification,
+  } = props;
+  assertComponentType(views, 'CollectionViewsDropdown', 'views');
+  checkConflictingToolbarProps(props);
+
+  const { scrollableContentRef: scrollablePageRef } = usePageScrollContext();
+
+  const [sticky, setSticky] = useState(
+    stickyProp ?? scrollablePageRef?.current != null,
+  );
+
+  useEffect(() => {
+    setSticky(stickyProp ?? scrollablePageRef?.current != null);
+  }, [stickyProp]);
+
+  return (
+    <>
+      <CollectionToolbars
+        sticky={sticky}
+        state={state}
+        search={search}
+        views={views}
+        title={title}
+        tabs={tabs}
+        filters={filters}
+        selectionToolbar={selectionToolbar}
+        dragAndDropReorderModeToolbar={dragAndDropReorderModeToolbar}
+        extraToolbar={extraToolbar}
+        tableGridSwitchButton={tableGridSwitchButton}
+        exportButton={exportButton}
+        primaryActionButton={primaryActionButton}
+        secondaryActions={secondaryActions}
+        moreActions={moreActions}
+        summaryBar={summaryBar}
+        topNotification={
+          typeof topNotification === 'function'
+            ? () =>
+                topNotification({ query: state.collection.result.originQuery })
+            : topNotification
+        }
+        titleBar={
+          <Box
+            width="100%"
+            borderTopColor="D60"
+            borderTopWidth="1px"
+            borderTopStyle="solid"
+            boxSizing="border-box"
+          />
+        }
+      />
+      <Box
+        dataHook="toolbar-collection-content"
+        width="100%"
+        direction="vertical"
+        minHeight={0}
+        flex={1}
+        verticalAlign="middle"
+      >
+        {children}
+      </Box>
+    </>
+  );
+}

package/src/components/ToolbarCollection/checkConflictingToolbarProps.ts

@@ -0,0 +1,53 @@
+import { ToolbarCollectionProps } from './ToolbarCollection';
+import { FiltersMap } from '@wix/bex-core';
+
+export function checkConflictingToolbarProps<T, F extends FiltersMap>(
+  props: ToolbarCollectionProps<T, F>,
+) {
+  const {
+    tabs,
+    views,
+    title,
+    dragAndDropBulkSubmit,
+    dragAndDropSubmit,
+    dragAndDropReorderModeToolbar,
+  } = props;
+  if (process.env.NODE_ENV !== 'production') {
+    const tabsProp = { key: '`tabs`', val: tabs };
+    const viewsProp = { key: '`views`', val: views };
+    const titleProp = { key: '`title`', val: title?.props.title };
+    const dragAndDropSubmitProp = {
+      key: '`dragAndDropSubmit`',
+      val: dragAndDropSubmit,
+    };
+    const dragAndDropBulkSubmitProp = {
+      key: '`dragAndDropBulkSubmit`',
+      val: dragAndDropBulkSubmit,
+    };
+    const dragAndDropReorderModeToolbarProp = {
+      key: '`dragAndDropReorderModeToolbar`',
+      val: dragAndDropReorderModeToolbar,
+    };
+
+    const conflictingProps = [
+      [titleProp, tabsProp],
+      [titleProp, viewsProp],
+      [dragAndDropSubmitProp, dragAndDropReorderModeToolbarProp],
+      [dragAndDropSubmitProp, dragAndDropBulkSubmitProp],
+    ];
+
+    if (title?.props.subtitle != null && title?.props.title == null) {
+      throw new Error(
+        'Cairo: Invalid `subtitle` provided and `title` not provided.',
+      );
+    }
+
+    for (const pair of conflictingProps) {
+      if (pair[0].val != null && pair[1].val != null) {
+        throw new Error(
+          `Cairo: Invalid both ${pair[0].key} and ${pair[1].key} props provided, either ${pair[0].key} or ${pair[1].key} is supported.`,
+        );
+      }
+    }
+  }
+}

package/src/components/ToolbarCollection/index.ts

@@ -0,0 +1 @@
+export * from './ToolbarCollection';

package/src/components/ToolbarCollection/useToolbarCollectionSyncProps.ts

@@ -0,0 +1,192 @@
+import { FiltersMap } from '@wix/bex-core';
+import { useEffect, useMemo, useState } from 'react';
+import { action, reaction, runInAction } from 'mobx';
+import { ToolbarCollectionProps } from './ToolbarCollection';
+import { checkConflictingToolbarProps } from './checkConflictingToolbarProps';
+import { useCollectionPageContext } from '../../providers';
+import { useWixPatternsRouter } from '../../providers/WixPatternsRouterProvider';
+import { useSyncTotal } from '../../hooks/useSyncTotal';
+
+export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
+  props: ToolbarCollectionProps<T, F> & {
+    isUsingDragAndDrop: boolean;
+    isUsingBulkActionsToolbar: boolean;
+    isUsingHorizontalScroll: boolean;
+    isUsingFolders: boolean;
+    isUsingTableVirtualization: boolean;
+  },
+) {
+  const {
+    state,
+    views,
+    tabs,
+    exportButton,
+    dragAndDropCategories,
+    maxSelection,
+    search,
+    filters,
+    isUsingDragAndDrop,
+    isUsingBulkActionsToolbar,
+    isUsingHorizontalScroll,
+    isUsingFolders,
+    isUsingTableVirtualization,
+    summaryBar,
+    secondaryActions,
+    moreActions,
+  } = props;
+
+  checkConflictingToolbarProps(props);
+
+  state.internalScroll = props.internalScroll;
+
+  const pageState = useCollectionPageContext();
+  const router = useWixPatternsRouter();
+
+  useEffect(() => {
+    pageState.primaryToolbar = state;
+
+    return () => {
+      if (pageState.primaryToolbar === state) {
+        pageState.primaryToolbar = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    reaction(
+      () => ({
+        scrollTop: state.scrollTopBeforeUnmount,
+        routerState: router?.currentState,
+      }),
+      ({ scrollTop, routerState }) => {
+        pageState.scrollTopBeforeUnmount = routerState?._createdEntity
+          ? 0
+          : scrollTop;
+      },
+      { fireImmediately: true },
+    );
+
+    return () => {
+      const scrollTop =
+        pageState.pageState.scrollableContentRef.current?.scrollTop;
+      if (scrollTop !== undefined) {
+        state.scrollTopBeforeUnmount = scrollTop;
+      }
+    };
+  }, []);
+
+  const getIsUsingAllItemsView = () =>
+    !!(
+      // views=undefined, it means thw user didn't pass so allItemsViews=false
+      (
+        views &&
+        // views.props=undefined, it means the user passed views without configuring allItems so allItemsViews=true
+        (!views.props ||
+          // views.props.allItemsViewProps=undefined, it means the user passed allItemsViewProps
+          // without configuring the hidden so allItemsViews=true
+          !views.props.allItemsViewProps ||
+          // allItemsViews depends on hidden's value
+          !views.props.allItemsViewProps.hidden)
+      )
+    );
+
+  useEffect(() => {
+    if (exportButton) {
+      state.featuredComponents.exportButton.set(exportButton);
+    }
+
+    return () => {
+      state.featuredComponents.exportButton.set(null);
+    };
+  }, [exportButton]);
+
+  const tabsFilterProps = useMemo(() => {
+    return tabs?.props
+      ? {
+          filter: tabs.props.filter,
+        }
+      : undefined;
+  }, [tabs]);
+
+  useEffect(
+    () =>
+      reaction(
+        () => pageState.hasHeader,
+        (hasHeader) => {
+          if (hasHeader) {
+            state.minimizedHeaderHeight = 66;
+          }
+        },
+        {
+          fireImmediately: true,
+        },
+      ),
+    [],
+  );
+
+  useSyncTotal(state.collection);
+
+  useEffect(() => {
+    runInAction(() => {
+      state.dragAndDropCategories = dragAndDropCategories;
+    });
+    // We accept this prop once on purpose because it's array it changes on every render. We expose a setter `set dragAndDropCategories` instead.
+  }, []);
+
+  useState(() => views?.type.setViewsState(state, views?.props));
+
+  useEffect(
+    action(() => {
+      state.viewsProps = views?.props;
+    }),
+    [views],
+  );
+
+  useState(() => {
+    props.AddApplyFiltersButton?.setStateObject(state);
+
+    state.featuresAvailability = {
+      isDisablingSearch: search === false,
+      isUsingFilters: !!filters,
+      isUsingDragAndDrop,
+      isUsingBulkActionsToolbar,
+      isUsingHorizontalScroll,
+      isUsingFolders,
+      isUsingTableVirtualization,
+      isUsingTags: !!props.tags,
+      isUsingTabs: !!tabs,
+      isUsingSummaryRow: !!summaryBar,
+      isUsingSecondaryActions: !!secondaryActions,
+      isUsingMoreActions: !!moreActions,
+    };
+
+    state.additionalFeaturesAvailability = {
+      isUsingTableSubtitle: !!props.title?.props.subtitle,
+      isUsingCounterInHeader: !!props.title?.props.showTotal,
+      isUsingSelectAllLimitation: !!props.maxSelection,
+      isUsingErrorMessage: !!(props.errorState ?? props.renderError),
+      isUsingAllItemsView: getIsUsingAllItemsView(),
+      isUsingCustomEmptyState: !!props.emptyState,
+      isUsingCustomNoResultsState: !!props.noResultsState,
+      isUsingPrimaryActionCta: !!props.primaryActionButton,
+    };
+  });
+
+  useEffect(
+    action(() => {
+      if (tabsFilterProps?.filter) {
+        state.tabsFilterProps = tabsFilterProps;
+        tabsFilterProps.filter.persistent = true;
+      }
+    }),
+    [tabsFilterProps],
+  );
+
+  useEffect(() => {
+    runInAction(() => {
+      state.bulk.maxSelection = maxSelection;
+    });
+  }, [maxSelection]);
+
+  return state;
+}

package/src/components/ToolbarCollectionContentAutoSizer/ContainerRectDebug.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { usePageContext, useScrollableContentContext } from '../../providers';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { createPortal } from 'react-dom';
+import { observer } from 'mobx-react-lite';
+import { RectState } from '../../state/RectState';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+function _ContainerRectDebug() {
+  const container = useWixPatternsContainer();
+  const { stackingRootRef } = usePageContext();
+  const { scrollableContentRef } = useScrollableContentContext();
+  const toolbar = useToolbarCollectionContext();
+
+  const [scrollableContentRect] = useState(
+    () =>
+      new RectState({
+        container,
+      }),
+  );
+
+  useEffect(() => {
+    scrollableContentRect.element = scrollableContentRef?.current;
+    return scrollableContentRect.init();
+  }, []);
+
+  if (stackingRootRef?.current == null) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        zIndex: 50,
+        background: 'transparent',
+        pointerEvents: 'none',
+        border: '#15e9e9 1px solid',
+        ...(toolbar.containerRect && {
+          top: toolbar.containerRect.top,
+          left: toolbar.containerRect.left,
+          bottom: 0,
+          width: toolbar.containerRect.width,
+        }),
+      }}
+    />,
+    stackingRootRef.current,
+  );
+}
+
+export const ContainerRectDebug = observer(_ContainerRectDebug);