@wix/patterns 1.255.0 → 1.256.0

package/src/components/DragAndDrop/ReorderModeState.ts

@@ -0,0 +1,195 @@
+import {
+  WixPatternsContainer,
+  ConditionalModalState,
+  FiltersMap,
+  TypedEmitter,
+  withoutDefaults,
+  CloseSidePanel,
+} from '@wix/bex-core';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import { CollectionDragEndEvent } from './DragAndDrop';
+import { EventEmitter } from 'events';
+import {
+  cairoApplyButtonClicked,
+  cairoDiscardChangesBeforeApply,
+  cairoLearnMore,
+} from '@wix/bex-core/bi';
+import { ToolbarCollectionState } from '../../state';
+
+export class ReorderModeState<T, F extends FiltersMap> {
+  readonly discardChangesModal = new ConditionalModalState<null>();
+  readonly feature = 'Drag and Drop';
+  readonly origin = 'Table Toolbar';
+
+  toolbar: ToolbarCollectionState<T, F>;
+  container: WixPatternsContainer;
+
+  _isReorderModeSubmitted = false;
+  pendingPromise: Promise<void> | null = null;
+
+  closeSidePanel?: CloseSidePanel;
+
+  readonly events = new EventEmitter() as TypedEmitter<{
+    submitSuccess: () => void;
+    submitError: (error: unknown) => void;
+  }>;
+
+  constructor(params: {
+    toolbar: ToolbarCollectionState<T, F>;
+    container: WixPatternsContainer;
+    closeSidePanel?: CloseSidePanel;
+  }) {
+    this.toolbar = params.toolbar;
+    this.container = params.container;
+    this.closeSidePanel = params.closeSidePanel;
+
+    makeObservable(this, {
+      isReorderModeToolbarVisible: computed,
+      isReorderModePending: computed,
+      _isReorderModeSubmitted: observable.ref,
+      _setIsReorderModeSubmitted: action,
+    });
+
+    this.init();
+  }
+
+  init() {
+    const disposers = [
+      reaction(
+        () => this.moves.length,
+        async () => {
+          if (this.moves.length === 0) {
+            this.pendingPromise = null;
+            this._setIsReorderModeSubmitted(false);
+          } else {
+            this.closeSidePanel?.();
+          }
+        },
+      ),
+    ];
+
+    return () => {
+      disposers.forEach((disposer) => disposer?.());
+    };
+  }
+
+  get optimisticActions() {
+    return this.toolbar.collection._optimisticActions;
+  }
+
+  get patches() {
+    return this.optimisticActions?.state.patches ?? [];
+  }
+
+  get dnd() {
+    return this.toolbar._dnd!;
+  }
+
+  get moves(): CollectionDragEndEvent<T, F>[] {
+    const {
+      toolbar: { _dnd },
+    } = this;
+
+    if (_dnd == null) {
+      return [];
+    }
+
+    return (
+      this.patches
+        .filter((patch) => patch.move !== undefined && !patch.isStale)
+        .map(({ move }) => _dnd._createSimpleDragEndEvent(move!)) ?? []
+    );
+  }
+
+  get isReorderModeToolbarVisible() {
+    return this.moves.length > 0 && !this._isReorderModeSubmitted;
+  }
+
+  get isReorderModePending() {
+    return this.moves.length > 0 && this.pendingPromise !== null;
+  }
+
+  get snapshot(): T[][] {
+    return this.optimisticActions?.collection.result.pages ?? [];
+  }
+
+  get onSubmit() {
+    if (this.pendingPromise) {
+      return this.pendingPromise;
+    }
+
+    const { events } = this;
+    return (this.pendingPromise = new Promise<void>((resolve, reject) => {
+      events.once('submitSuccess', resolve);
+      events.once('submitError', reject);
+    }));
+  }
+
+  _showSuccessToast() {
+    this.container.showToast?.({
+      type: 'SUCCESS',
+      message: this.container.translate(
+        'cairo.dragAndDrop.reorderMode.toast.success',
+      ),
+      biName: 'reorder-mode-submit-success',
+    });
+  }
+
+  _reportApplyButtonClickedBiEvent() {
+    this.dnd.reportBi(
+      withoutDefaults(cairoApplyButtonClicked)({
+        numOfActions: this.moves.length,
+        feature: this.feature,
+        origin: this.origin,
+      }),
+    );
+  }
+
+  _reportDiscardChangesBeforeApplyBiEvent() {
+    this.dnd.reportBi(
+      withoutDefaults(cairoDiscardChangesBeforeApply)({
+        numOfActions: this.moves.length,
+        feature: this.feature,
+        origin: this.origin,
+      }),
+    );
+  }
+
+  reportLearnMoreClickedBiEvent() {
+    this.dnd.reportBi(
+      withoutDefaults(cairoLearnMore)({
+        origin: this.origin,
+      }),
+    );
+  }
+
+  async onBulkCancel() {
+    this.discardChangesModal.open(null);
+    const { result } = await this.discardChangesModal.modal.promise();
+    if (result === 'confirmed') {
+      this._reportDiscardChangesBeforeApplyBiEvent();
+      this.events.emit(
+        'submitError',
+        new Error(this.optimisticActions?.reorderModeCanceledMessage),
+      );
+    }
+  }
+
+  async onBulkSubmit() {
+    this._reportApplyButtonClickedBiEvent();
+
+    try {
+      this._setIsReorderModeSubmitted(true);
+      await this.dnd.onBulkSubmit?.(this.moves, this.snapshot);
+      this._showSuccessToast();
+      this.events.emit('submitSuccess');
+    } catch (error) {
+      this.events.emit('submitError', error);
+      this.pendingPromise = null;
+    }
+  }
+
+  _setIsReorderModeSubmitted(submitted: boolean) {
+    this._isReorderModeSubmitted = submitted;
+  }
+}

package/src/components/DragAndDrop/TableDragAndDropState.ts

@@ -0,0 +1,55 @@
+import { FiltersMap } from '@wix/bex-core';
+import { TableState } from '../../state';
+import { action, makeObservable } from 'mobx';
+import { CollectionDragAndDropState } from './CollectionDragAndDropState';
+import { DragAndDropCancel } from './DragAndDrop';
+
+export interface TableDragAndDropStateParams<T, F extends FiltersMap> {
+  readonly tableState: TableState<T, F>;
+  readonly modalsContainerRef: {
+    current: HTMLElement | null | undefined;
+  };
+  readonly dragAndDropCancel?: DragAndDropCancel<T, F>;
+}
+
+export class TableDragAndDropState<T, F extends FiltersMap> {
+  readonly tableState;
+  readonly dragAndDrop;
+
+  constructor(params: TableDragAndDropStateParams<T, F>) {
+    this.tableState = params.tableState;
+    this.dragAndDrop = new CollectionDragAndDropState({
+      state: params.tableState.toolbar,
+      container: params.tableState.toolbar.container,
+      a11yContainer: params.modalsContainerRef,
+    });
+
+    makeObservable(this, {
+      init: action,
+    });
+  }
+
+  get dnd() {
+    return this.dragAndDrop.dnd;
+  }
+
+  getStickyColumnsCount({
+    stickyColumns,
+    horizontalScroll,
+  }: {
+    stickyColumns: number;
+    showSelection?: boolean;
+    horizontalScroll?: boolean;
+  }) {
+    const { dragAndDrop } = this;
+    return horizontalScroll && !dragAndDrop.dnd.isDisabled
+      ? stickyColumns + 1
+      : stickyColumns;
+  }
+
+  init() {
+    const { dragAndDrop } = this;
+
+    return dragAndDrop.init();
+  }
+}

package/src/components/DragAndDrop/hasExceededDistance.ts

@@ -0,0 +1,22 @@
+export function hasExceededDistance({
+  delta,
+  measurement,
+  axis = 'all',
+}: {
+  delta: { x: number; y: number };
+  measurement: number;
+  axis?: 'x' | 'y' | 'all';
+}): boolean {
+  const dx = Math.abs(delta.x);
+  const dy = Math.abs(delta.y);
+
+  switch (axis) {
+    case 'y':
+      return dy > measurement;
+    case 'x':
+      return dx > measurement;
+    case 'all':
+    default:
+      return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
+  }
+}

package/src/components/DragAndDrop/index.ts

@@ -0,0 +1,3 @@
+export * from './DragAndDrop';
+export * from './DragAndDropState';
+export * from './CollectionDragAndDropState';

package/src/components/DragAndDrop/initReordeModeState.ts

@@ -0,0 +1,19 @@
+import { FiltersMap } from '@wix/bex-core';
+import { ToolbarCollectionState } from '../../state';
+import { ReorderModeState } from './ReorderModeState';
+import { runInAction } from 'mobx';
+
+export function setReorderModeState<T, F extends FiltersMap>(
+  toolbar: ToolbarCollectionState<T, F>,
+) {
+  runInAction(() => {
+    if (!toolbar._dnd) {
+      return;
+    }
+    toolbar._dnd.reorderModeState ??= new ReorderModeState({
+      toolbar,
+      container: toolbar.container,
+      closeSidePanel: toolbar.closeSidePanel,
+    });
+  });
+}

package/src/components/DragAndDrop/rectIntersection.ts

@@ -0,0 +1,15 @@
+interface Rect {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+}
+
+export function haveIntersection(entry: Rect, target: Rect) {
+  const top = Math.max(target.top, entry.top);
+  const left = Math.max(target.left, entry.left);
+  const right = Math.min(target.left + target.width, entry.left + entry.width);
+  const bottom = Math.min(target.top + target.height, entry.top + entry.height);
+
+  return left < right && top < bottom;
+}

package/src/components/DragHandle/DragHandle.st.css

@@ -0,0 +1,27 @@
+ .root {
+  -st-states: disabled, dragging;
+  display: flex;
+  align-items: center;
+}
+
+.root:not(:disabled) {
+  cursor: grab;
+  color: #A8CAFF;
+}
+
+.root:disabled {
+  color: #ACAFC4
+}
+
+.root:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 3px #A6D0FF;
+}
+
+.root:disabled {
+  pointer-events: none;
+}
+
+.root:dragging:not(:disabled) {
+  cursor: grabbing;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "DragHandle2439316473";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"DragHandle2439316473__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/DragHandle/DragHandle.tsx

@@ -0,0 +1,40 @@
+import { classes, st } from './DragHandle.st.css.js';
+import React, { HTMLAttributes } from 'react';
+import {
+  DragAndDropLockedLarge,
+  DragAndDropLarge,
+} from '@wix/wix-ui-icons-common/system';
+
+export interface DragHandleProps extends HTMLAttributes<HTMLDivElement> {
+  dataHook?: string;
+  dragging?: boolean;
+  disabled?: boolean;
+  domRef?: React.Ref<HTMLDivElement>;
+}
+
+export function DragHandle(props: DragHandleProps) {
+  const { dataHook, domRef, dragging, disabled, className, ...rest } = props;
+  const dragHandleIcon = disabled ? (
+    <DragAndDropLockedLarge data-hook="dnd-locked" />
+  ) : (
+    <DragAndDropLarge />
+  );
+
+  return (
+    <div
+      data-hook={dataHook}
+      ref={domRef}
+      {...rest}
+      className={st(
+        classes.root,
+        {
+          disabled,
+          dragging,
+        },
+        className,
+      )}
+    >
+      {dragHandleIcon}
+    </div>
+  );
+}

package/src/components/DropdownFilter/CollectionDropdownFilter.uni.driver.ts

@@ -0,0 +1,200 @@
+import { TextUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { InputWithOptionsUniDriver } from '@wix/design-system/dist/types/InputWithOptions/InputWithOptions.uni.driver';
+import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+import shuffle from 'lodash/shuffle';
+
+export const CollectionDropdownFilterUniDriver = <
+  T extends Omit<InputWithOptionsUniDriver, 'driver'>,
+>(
+  optionsDriver: T,
+  dataHook: string,
+  base: UniDriver,
+  body: UniDriver,
+) => {
+  const waitForOptions = async (total = 1, timeout = 3000) => {
+    await waitFor(
+      async () =>
+        (await optionsDriver.dropdownLayoutDriver.optionsLength()) >= total,
+      timeout,
+    );
+
+    return optionsDriver.dropdownLayoutDriver.options();
+  };
+
+  const getDropdownLayoutBase = async () =>
+    body.$(`[data-content-element="${await base.attr('data-content-hook')}"]`);
+
+  const getOptions = async (ids: string[]) => {
+    return ids.map(async (id) => {
+      return optionsDriver.dropdownLayoutDriver.optionById(id);
+    });
+  };
+
+  const getOptionsCount = () => {
+    return optionsDriver.dropdownLayoutDriver.optionsLength();
+  };
+
+  const getAvailableOptionsIds = async () => {
+    const options = await optionsDriver.dropdownLayoutDriver.options();
+
+    const maybeIds = await Promise.all(
+      options.map(async (option) => {
+        const hook = await option.element().attr('data-hook');
+        return hook?.replace(/^dropdown-item-/, '');
+      }),
+    );
+
+    return maybeIds.filter((value): value is string => value != null);
+  };
+
+  const getInputPlaceholder = () => {
+    return optionsDriver.inputDriver.getPlaceholder();
+  };
+
+  const isNoSearchResults = async () =>
+    (await getDropdownLayoutBase()).$('[data-hook="empty-state"]').exists();
+
+  const isErrorStateExists = async () =>
+    (await getDropdownLayoutBase())
+      .$('[data-hook="filter-error-state"]')
+      .exists();
+
+  const getEmptyStateText = async () =>
+    TextUniDriver(
+      (await getDropdownLayoutBase()).$('[data-hook="empty-state-text"]'),
+      body,
+    ).getText();
+
+  const initialLoaderExists = async () =>
+    (await getDropdownLayoutBase()).$('[data-hook="initial-loader"]').exists();
+  const infiniteScrollLoaderExists = async () =>
+    (await getDropdownLayoutBase())
+      .$('[data-hook="dropdownLayout-loader"]')
+      .exists();
+
+  const clickOptions = async (ids: string[]) => {
+    for (const id of ids) {
+      await optionsDriver.dropdownLayoutDriver.clickAtOptionByDataHook(
+        `dropdown-item-${id}`,
+      );
+    }
+
+    return ids;
+  };
+
+  const existInFilter = async (dataHook: string) =>
+    (await getDropdownLayoutBase()).$(`[data-hook="${dataHook}"]`).exists();
+
+  const selectRandomOptions = async (
+    count: number,
+    options: { closeDropdown?: boolean } = {},
+  ) => {
+    await optionsDriver.inputDriver.click();
+
+    const ids = await getRandomOptions(count);
+
+    return selectOptions(ids, options);
+  };
+
+  const close = () => optionsDriver.dropdownLayoutDriver.mouseClickOutside();
+  const clickInputClear = () => optionsDriver.inputDriver.clickClear();
+
+  const getRandomOptions = async (count: number) => {
+    await waitForOptions(count);
+
+    const options = await optionsDriver.dropdownLayoutDriver.options();
+    const maybeIds = await Promise.all(
+      options.map(async (option) => {
+        const dataHook = await option.element().attr('data-hook');
+        return dataHook?.replace(/^dropdown-item-/, '');
+      }),
+    );
+
+    const ids = maybeIds.filter((value): value is string => value != null);
+
+    return shuffle(ids).slice(0, count);
+  };
+
+  const selectOptions = async (
+    ids: string[],
+    { closeDropdown = true }: { closeDropdown?: boolean } = {},
+  ) => {
+    await optionsDriver.inputDriver.click();
+
+    await waitForOptions();
+    const clickedIds = await clickOptions(ids);
+
+    if (closeDropdown) {
+      await close();
+    }
+
+    return clickedIds;
+  };
+
+  const selectOption = async (id: string) => {
+    await optionsDriver.inputDriver.click();
+
+    await waitForOptions();
+    const clickedId = await clickOptions([id]);
+
+    return clickedId[0] || [];
+  };
+
+  const hasDivider = async () => {
+    return (await getAvailableOptionsIds()).some(
+      (id) => id === 'promoted-section-divider',
+    );
+  };
+
+  return {
+    ...optionsDriver,
+    waitForOptions,
+    getOptions,
+    clickOptions,
+    close,
+    clickInputClear,
+    selectOptions,
+    selectOption,
+    selectRandomOptions,
+    getRandomOptions,
+    getOptionsCount,
+    getAvailableOptionsIds,
+    getInputPlaceholder,
+    isNoSearchResults,
+    getEmptyStateText,
+    isErrorStateExists,
+    initialLoaderExists,
+    infiniteScrollLoaderExists,
+    hasDivider,
+    existInFilter,
+    _getDropdownLayoutBase: getDropdownLayoutBase,
+    scrollDown: async () => {
+      const element = await base.getNative();
+
+      const { page } = element;
+
+      const contentHook = await base.attr('data-content-hook');
+      const contentSelector = `[data-content-element="${contentHook}"]`;
+
+      // puppeteer
+      if (page?.evaluate) {
+        await page.evaluate(
+          (_dataHook: string, _contentSelector: string) => {
+            const e = document.querySelector(
+              `[data-hook="${_dataHook}"] ${_contentSelector}`,
+            )!;
+            e.scrollBy({ behavior: 'smooth', top: e.scrollHeight });
+          },
+          dataHook,
+          contentSelector,
+        );
+      }
+      // jsdom
+      else {
+        await (
+          await base.$(contentSelector).getNative()
+        ).dispatchEvent(new Event('scroll'));
+      }
+    },
+  };
+};

package/src/components/DropdownFilter/selectedItemsLabel.tsx

@@ -0,0 +1,15 @@
+export function selectedItemsLabel({
+  labels,
+  totalItemsInLabel = 2,
+  remaining = (totalRemaining) =>
+    totalRemaining > 0 ? `, +${totalRemaining}` : '',
+}: {
+  labels: string[];
+  totalItemsInLabel?: number;
+  remaining?: (totalRemaining: number) => string;
+}) {
+  const totalRemaining = labels.length - totalItemsInLabel;
+  return (
+    labels.slice(0, totalItemsInLabel).join(', ') + remaining(totalRemaining)
+  );
+}

package/src/components/EditorXLogo.tsx

@@ -0,0 +1,22 @@
+import React, { memo, SVGAttributes } from 'react';
+
+export interface EditorXLogoProps extends SVGAttributes<SVGElement> {
+  height?: string | number;
+}
+
+export const EditorXLogo = memo(function EditorXLogo({
+  height = 24,
+  ...rest
+}: EditorXLogoProps) {
+  return (
+    <svg viewBox="0 0 215 43" height={height} {...rest}>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g transform="translate(-421.000000, -3100.000000)" fill="#000000">
+          <g transform="translate(112.000000, 2861.000000)">
+            <path d="M373.110711,240.412412 L373.110711,281.097042 L365.782721,281.097042 L365.782721,277.481169 C364.812722,278.873987 363.516724,279.975919 361.894726,280.785956 C360.272728,281.594982 358.398731,282 356.272734,282 C353.661738,282 351.293741,281.358637 349.167744,280.078941 C347.041747,278.798236 345.343749,277.01959 344.076751,274.739974 C342.807753,272.461368 342.174754,269.833295 342.174754,266.856765 C342.174754,263.882255 342.807753,261.263272 344.076751,259.003857 C345.343749,256.742421 347.041747,254.971856 349.167744,253.69115 C351.293741,252.411454 353.642738,251.770091 356.215734,251.770091 C358.378731,251.770091 360.262728,252.1943 361.866726,253.041707 C363.469724,253.889114 364.756722,255.029427 365.726721,256.460626 L365.726721,240.412412 L373.110711,240.412412 Z M431.571529,251.770899 C434.629525,251.770899 437.333521,252.411252 439.683518,253.690948 C442.032514,254.972664 443.869512,256.75232 445.19451,259.030925 C446.517508,261.310541 447.179507,263.918414 447.179507,266.856563 C447.179507,269.794712 446.517508,272.403595 445.19451,274.683211 C443.869512,276.962827 442.032514,278.751573 439.683518,280.051469 C437.333521,281.350355 434.629525,281.999798 431.571529,281.999798 C428.550533,281.999798 425.864537,281.350355 423.51554,280.051469 C421.165543,278.751573 419.328546,276.962827 418.005548,274.683211 C416.68055,272.403595 416.019551,269.794712 416.019551,266.856563 C416.019551,263.918414 416.68055,261.310541 418.005548,259.030925 C419.328546,256.75232 421.165543,254.972664 423.51554,253.690948 C425.864537,252.411252 428.550533,251.770899 431.571529,251.770899 Z M470.451775,252.166019 L470.451775,258.946286 L468.941777,258.946286 C466.33078,258.946286 464.242783,259.729051 462.675786,261.291553 C461.109788,262.855064 460.326789,265.407386 460.326789,268.947507 L460.326789,281.097042 L452.941799,281.097042 L452.941799,252.675069 L460.269789,252.675069 L460.269789,258.268562 C460.903788,256.725251 461.724787,255.510197 462.731785,254.624409 C463.738784,253.739631 464.829783,253.108368 466.004781,252.731631 C467.179779,252.354893 468.326778,252.166019 469.444776,252.166019 L470.451775,252.166019 Z M511.377018,263.867105 L524,281.097042 L513.598015,281.097042 L506.176025,270.965528 L511.377018,263.867105 Z M337.139961,240.695824 L337.139961,247.136724 L316.552989,247.136724 L316.552989,257.420751 L336.076962,257.420751 L336.076962,263.862661 L316.552989,263.862661 L316.552989,274.654728 L337.139961,274.654728 L337.139961,281.096638 L309,281.096638 L309,240.695824 L337.139961,240.695824 Z M387.264791,252.674665 L387.264791,281.096638 L379.879801,281.096638 L379.879801,252.674665 L387.264791,252.674665 Z M404.997866,245.160114 L404.997866,252.674665 L411.990856,252.674665 L411.990856,258.720647 L404.997866,258.720647 L404.997866,272.055946 C404.997866,274.014375 405.929865,274.994095 407.794862,274.994095 L412.326856,274.994095 L412.326856,281.096638 L405.277866,281.096638 C400.167873,281.096638 397.613876,278.516036 397.613876,273.354832 L397.613876,258.720647 L392.690883,258.720647 L392.690883,252.674665 L397.613876,252.674665 L397.613876,245.160114 L404.997866,245.160114 Z M494.401041,240.695824 L509.200021,260.896231 L494.401041,281.096638 L484.000056,281.096638 L498.799035,260.896231 L484.000056,240.695824 L494.401041,240.695824 Z M357.782732,257.985756 C355.395735,257.985756 353.474738,258.825083 352.02074,260.500707 C350.565742,262.177341 349.838743,264.296363 349.838743,266.856765 C349.838743,269.456557 350.593742,271.59477 352.10474,273.270394 C353.614738,274.947028 355.600735,275.785345 358.062732,275.785345 C359.852729,275.785345 361.437727,275.333866 362.817725,274.428888 C364.196723,273.524919 365.167722,272.318955 365.726721,270.813015 L365.726721,267.08402 C365.726721,264.296363 364.980722,262.081389 363.488724,260.443136 C361.996726,258.804883 360.094729,257.985756 357.782732,257.985756 Z M431.571529,257.985554 C429.221532,257.985554 427.319535,258.814781 425.864537,260.472224 C424.410539,262.129668 423.68354,264.257781 423.68354,266.856563 C423.68354,269.493726 424.410539,271.641029 425.864537,273.298473 C427.319535,274.956926 429.221532,275.785143 431.571529,275.785143 C433.957526,275.785143 435.879523,274.956926 437.333521,273.298473 C438.788519,271.641029 439.515518,269.493726 439.515518,266.856563 C439.515518,264.257781 438.788519,262.129668 437.333521,260.472224 C435.879523,258.814781 433.957526,257.985554 431.571529,257.985554 Z M523.9995,240.69542 L511.377518,257.924347 L506.176525,250.825924 L513.598515,240.69542 L523.9995,240.69542 Z M383.571796,239 C384.839794,239 385.902793,239.424209 386.760791,240.271616 C387.61879,241.120033 388.04779,242.164394 388.04779,243.407729 C388.04779,244.613693 387.61879,245.639874 386.760791,246.487281 C385.902793,247.334688 384.839794,247.757886 383.571796,247.757886 C382.303798,247.757886 381.240799,247.334688 380.3828,246.487281 C379.524802,245.639874 379.096802,244.613693 379.096802,243.407729 C379.096802,242.164394 379.524802,241.120033 380.3828,240.271616 C381.240799,239.424209 382.303798,239 383.571796,239 Z" />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+});

package/src/components/EmptyState/CollectionEmptyState.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { AddItemEmptyState } from '../Illustration/AddItemEmptyState';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { EmptyStateBase, EmptyStateBaseProps } from './EmptyStateBase';
+import { NewItemButton, NewItemButtonProps } from './NewItemButton';
+
+export interface CollectionEmptyStateProps
+  extends Omit<Partial<EmptyStateBaseProps>, 'cta'> {
+  /**
+   * Configuration for the default call to action button.\
+   * `onClick`: Adds a callback for when the button is clicked. <br>
+   * `text`: Text of the button.
+   *  To render the default add new item button, you must provide the `onClick` callback.
+   * @external
+   */
+  addNewCta?: NewItemButtonProps;
+}
+
+function _CollectionEmptyState(props: CollectionEmptyStateProps) {
+  const { translate: t } = useWixPatternsContainer();
+  const { addNewCta } = props;
+
+  return (
+    <EmptyStateBase
+      dataHook="collection-empty-state"
+      title={t('cairo.emptyState.additem.title')}
+      subtitle={t('cairo.emptyState.additem.text')}
+      image={
+        <AddItemEmptyState data-hook="empty-state-new-item-illustration" />
+      }
+      {...props}
+      cta={addNewCta && <NewItemButton {...addNewCta} />}
+    />
+  );
+}
+
+export const CollectionEmptyState = observer(_CollectionEmptyState);