@wix/patterns 1.255.0 → 1.256.0

package/src/components/EntityPage/useEntityPageLoadReporting.ts

@@ -0,0 +1,57 @@
+import { TaskState } from '@wix/bex-core';
+import {
+  wixPatternsFullPageLoadCompletedSrc144Evid1001,
+  wixPatternsPageInteractiveSrc144Evid1000,
+} from '@wix/bex-core/bi';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useEffect } from 'react';
+
+export const useEntityPageLoadReporting = ({
+  startTime,
+  withinRouter,
+  isFetching,
+  initTask,
+}: {
+  startTime: number;
+  withinRouter: boolean;
+  isFetching: boolean;
+  initTask: TaskState<unknown>;
+}) => {
+  const getBIParams = () => {
+    const loadingTime = Math.round(performance.now() - startTime);
+    return {
+      componentType: 'Entity',
+      loadingTime,
+      withinRouter,
+      routerUsage: withinRouter,
+    };
+  };
+
+  const { createBILogger } = useWixPatternsContainer();
+
+  const reportBI = createBILogger({
+    pageType: 'Entity',
+  });
+
+  const reportPageInteractive = () => {
+    const params = getBIParams();
+    reportBI(wixPatternsPageInteractiveSrc144Evid1000(params));
+  };
+
+  const reportPageFullyLoaded = () => {
+    const params = getBIParams();
+    reportBI(wixPatternsFullPageLoadCompletedSrc144Evid1001(params));
+  };
+
+  useEffect(() => {
+    if (isFetching) {
+      reportPageInteractive();
+      return;
+    }
+
+    if (initTask.status.isSuccess) {
+      reportPageFullyLoaded();
+      return;
+    }
+  }, [isFetching, initTask.status.isSuccess]);
+};

package/src/components/EntityPageAdditionalContent/EntityPageAdditionalContent.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  FormPageAdditionalContent,
+  FormPageAdditionalContentProps,
+} from '../FormPageAdditionalContent';
+
+export interface EntityPageAdditionalContentProps
+  extends FormPageAdditionalContentProps {}
+
+export function EntityPageAdditionalContent(
+  props: EntityPageAdditionalContentProps,
+) {
+  return <FormPageAdditionalContent {...props} />;
+}
+
+EntityPageAdditionalContent.displayName = 'EntityPageAdditionalContent';

package/src/components/EntityPageAdditionalContent/index.ts

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

package/src/components/EntityPageCard/EntityPageCard.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FormPageCard, FormPageCardProps } from '../FormPageCard';
+
+export interface EntityPageCardProps extends FormPageCardProps {}
+
+export function _EntityPageCard(props: EntityPageCardProps) {
+  return <FormPageCard {...props} />;
+}
+
+_EntityPageCard.displayName = 'EntityPageCard';
+
+export const EntityPageCard = observer(_EntityPageCard);

package/src/components/EntityPageCard/index.ts

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

package/src/components/EntityPageContent/EntityPageContent.tsx

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from 'react';
+import { useEntityPageContent } from '../../state/EntityPage';
+
+export interface EntityPageContentProps {
+  /**
+   * <EntityPage.MainContent> and, if needed, <EntityPage.AdditionalContent> elements
+   */
+  children: ReactNode;
+}
+
+export type EntityPageContentElement = ReactElement<
+  EntityPageContentProps,
+  typeof EntityPageContent
+>;
+
+export function EntityPageContent(_props: EntityPageContentProps) {
+  return null;
+}
+
+EntityPageContent.useEntityPageContent = useEntityPageContent;
+EntityPageContent.displayName = 'EntityPageContent';

package/src/components/EntityPageContent/index.ts

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

package/src/components/EntityPageExtensions/EntityPageExtensions.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { useEntityPageContext } from '../../providers';
+import { SkeletonCard } from '../SkeletonCard';
+import { Extensions } from '../Extensions';
+import { ExtensionsState } from '../../state/ExtensionsState';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+
+export interface EntityPageSlotsProps {
+  /**
+   * An id of the container defined in the installed on a site application that contains TPA's actions.
+   */
+  containerId: string;
+  /**
+   * Applies a data-hook HTML attribute that can be used in tests.
+   */
+  dataHook?: string;
+  /**
+   * Props passed to Slots Widgets
+   */
+  [x: string]: any;
+}
+export function _EntityPageSlots(props: EntityPageSlotsProps) {
+  const { containerId, dataHook, ...rest } = props;
+  const pageState = useEntityPageContext();
+  const container = useWixPatternsContainer();
+
+  const [state] = useState(() => {
+    return new ExtensionsState({
+      container,
+      containerId,
+    });
+  });
+
+  useEffect(() => {
+    return state.init();
+  }, []);
+
+  return !pageState ||
+    pageState.isFetching ||
+    state.initTask.status.isLoading ? (
+    <SkeletonCard dataHook={dataHook} />
+  ) : (
+    <Extensions
+      form={pageState.form}
+      entity={pageState.entity}
+      dataHook={dataHook}
+      {...rest}
+      state={state}
+    />
+  );
+}
+
+export const EntityPageSlots = observer(_EntityPageSlots);

package/src/components/EntityPageExtensions/index.ts

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

package/src/components/EntityPageHeader/EntityPageHeader.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { useEntityPageHeader } from '../../state/EntityPage';
+import { FormPageHeaderProps } from '../FormPageHeader';
+
+export interface EntityPageHeaderProps extends FormPageHeaderProps {}
+
+export type EntityPageHeaderElement = ReactElement<
+  EntityPageHeaderProps,
+  typeof EntityPageHeader
+>;
+
+export function EntityPageHeader(_props: EntityPageHeaderProps) {
+  return null;
+}
+
+EntityPageHeader.useEntityPageHeader = useEntityPageHeader;
+EntityPageHeader.displayName = 'EntityPageHeader';

package/src/components/EntityPageHeader/index.ts

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

package/src/components/EntityPageMainContent/EntityPageMainContent.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {
+  FormPageMainContent,
+  FormPageMainContentProps,
+} from '../FormPageMainContent';
+
+export interface EntityPageMainContentProps extends FormPageMainContentProps {}
+
+export function EntityPageMainContent(props: EntityPageMainContentProps) {
+  return <FormPageMainContent {...props} />;
+}
+
+EntityPageMainContent.displayName = 'EntityPageMainContent';

package/src/components/EntityPageMainContent/index.ts

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

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,21 @@
+import React, { Component, ReactNode } from 'react';
+
+export class ErrorBoundary extends Component<{ fallback: ReactNode }> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, _errorInfo: React.ErrorInfo) {
+    console.error(error);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/ErrorCard/ErrorCard.tsx

@@ -0,0 +1,71 @@
+import React, { Children, isValidElement } from 'react';
+import {
+  Card,
+  CardProps,
+  EmptyState as WSREmptyState,
+  TextButton,
+  IconElement,
+} from '@wix/design-system';
+
+export interface ErrorCardProps extends CardProps {
+  /**
+   * Title to display in the error state.
+   */
+  title?: string;
+  /**
+   * Subtitle to display in the error state.
+   */
+  subtitle?: string;
+  /**
+   * Action button to display in the error state.
+   */
+  action?: {
+    /**
+     * Action button text.
+     */
+    text: string;
+    /**
+     * Callback function to run when the action button is clicked.
+     */
+    onClick: () => void;
+    /**
+     * [Icon](https://www.docs.wixdesignsystem.com/?path=/story/foundations-icons--icons) to display on the action button before the text.
+     */
+    prefixIcon?: IconElement;
+  };
+}
+
+export function ErrorCard({
+  children,
+  title,
+  subtitle,
+  action,
+  ...rest
+}: ErrorCardProps & { children?: React.ReactNode }) {
+  const childrenArray = Children.toArray(children);
+
+  return (
+    <Card {...rest}>
+      {childrenArray.filter(
+        (el) =>
+          isValidElement(el) &&
+          (el.type as any)?.displayName !== 'Card.Content',
+      )}
+      <Card.Content>
+        <WSREmptyState
+          dataHook="error-card-state"
+          title={title}
+          subtitle={subtitle}
+        >
+          <TextButton
+            dataHook="error-card-state-action-button"
+            prefixIcon={action?.prefixIcon}
+            onClick={action?.onClick}
+          >
+            {action?.text}
+          </TextButton>
+        </WSREmptyState>
+      </Card.Content>
+    </Card>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  EmptyStateUniDriver,
+  TextButtonUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export default (base: UniDriver, body: UniDriver) => {
+  return {
+    ...baseUniDriverFactory(base),
+    ...EmptyStateUniDriver(base.$('[data-hook="error-card-state"'), body),
+
+    getRetryButton: () =>
+      TextButtonUniDriver(
+        base.$('[data-hook="error-card-state-action-button"]'),
+        body,
+      ),
+  };
+};

package/src/components/ErrorCard/index.ts

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

package/src/components/ErrorState/ErrorState.tsx

@@ -0,0 +1,89 @@
+import React, { ReactElement } from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { OfflineErrorState } from './OfflineErrorState';
+import { CollectionErrorState } from '../CollectionErrorState';
+import { observer } from 'mobx-react-lite';
+import { isServerErrorCode } from '@wix/bex-core';
+
+export interface ErrorStateProps {
+  dataHook?: string;
+  errorStatus?: {
+    error: unknown;
+  } | null;
+  /** @deprecated */
+  renderError?: (params: {
+    err: unknown;
+    isOnline: boolean;
+    retry: () => void;
+  }) => ReactElement;
+  errorState?: (
+    err: unknown,
+    params: {
+      isOnline: boolean;
+      retry: () => void;
+    },
+  ) => ReactElement;
+  state: {
+    errorStatus?: {
+      error: unknown;
+    } | null;
+    retryErrorState: () => void;
+  };
+  image?: ReactElement;
+}
+
+function _ErrorState({
+  state,
+  errorStatus: errorStatusProp,
+  errorState,
+  dataHook,
+  image,
+}: ErrorStateProps) {
+  const {
+    onlineState: { isOnline },
+    errorHandler,
+    translate: t,
+  } = useWixPatternsContainer();
+
+  const errorStatus = errorStatusProp ?? state.errorStatus;
+
+  if (!isOnline) {
+    return (
+      <OfflineErrorState
+        image={image}
+        onRetry={state.retryErrorState}
+        dataHook={dataHook}
+      />
+    );
+  }
+
+  if (errorState && errorStatus) {
+    return errorState(errorStatus.error, {
+      isOnline,
+      retry: state.retryErrorState,
+    });
+  }
+
+  const resolvedError = errorHandler.getResolvedError?.(errorStatus?.error);
+  const action =
+    resolvedError?.action ??
+    (isServerErrorCode(errorStatus?.error)
+      ? { text: t('cairo.error.tryAgain.cta'), onClick: state.retryErrorState }
+      : undefined);
+
+  return (
+    <CollectionErrorState
+      dataHook={dataHook}
+      title={t('cairo.technical.error.title', {
+        defaultValue: 'We couldn’t load your items',
+      })}
+      subtitle={resolvedError?.message}
+      action={
+        action && { text: action?.text, onClick: () => action?.onClick?.() }
+      }
+      requestId={resolvedError?.requestId}
+    />
+  );
+}
+
+export const ErrorState = observer(_ErrorState);

package/src/components/ErrorState/LoadingErrorState.tsx

@@ -0,0 +1,52 @@
+import React, { ReactElement } from 'react';
+import { EmptyState, TextButton } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface LoadingErrorStateProps {
+  dataHook?: string;
+  image?: ReactElement;
+  title?: string;
+  subtitle?: string;
+  action?: {
+    text: string;
+    onClick?: () => void;
+    prefixIcon?: ReactElement;
+  };
+}
+
+export function LoadingErrorState(props: LoadingErrorStateProps) {
+  const { dataHook, title, subtitle, image, action, ...rest } = props;
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <EmptyState
+      theme="page-no-border"
+      dataHook={dataHook}
+      title={
+        title ??
+        t('cairo.technical.error.title', {
+          defaultValue: 'We couldn’t load your items',
+        })
+      }
+      subtitle={
+        subtitle ??
+        t('cairo.technical.error.text', {
+          defaultValue:
+            'There was a technical problem on our end. Refresh the page and try again in a moment.',
+        })
+      }
+      image={image}
+      {...rest}
+    >
+      {action && (
+        <TextButton
+          onClick={action.onClick}
+          prefixIcon={action.prefixIcon}
+          dataHook="retry-button"
+        >
+          {action.text}
+        </TextButton>
+      )}
+    </EmptyState>
+  );
+}

package/src/components/ErrorState/OfflineErrorState.tsx

@@ -0,0 +1,51 @@
+import React, { ReactElement, Suspense } from 'react';
+import { EmptyState, TextButton } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { Refresh } from '@wix/wix-ui-icons-common';
+import { ErrorBoundary } from '../ErrorBoundary';
+
+const offlineIllustrationPromise = import(
+  /* webpackChunkName: "OfflineIllustration" */ './OfflineIllustration'
+);
+
+const OfflineIllustrationLazy = React.lazy(async () => ({
+  default: (await offlineIllustrationPromise).OfflineIllustration,
+}));
+
+export interface OfflineErrorStateProps {
+  onRetry: () => void;
+  dataHook?: string;
+  image?: ReactElement;
+}
+
+export function OfflineErrorState(props: OfflineErrorStateProps) {
+  const { dataHook, onRetry, image, ...rest } = props;
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <EmptyState
+      theme="page-no-border"
+      dataHook={dataHook}
+      title={t('cairo.connection.error.title')}
+      subtitle={t('cairo.connection.error.text')}
+      image={
+        image ?? (
+          <ErrorBoundary fallback={null}>
+            <Suspense fallback={null}>
+              <OfflineIllustrationLazy />
+            </Suspense>
+          </ErrorBoundary>
+        )
+      }
+      {...rest}
+    >
+      <TextButton
+        dataHook="retry-button"
+        onClick={onRetry}
+        prefixIcon={<Refresh />}
+      >
+        {t('cairo.error.tryAgain.cta')}
+      </TextButton>
+    </EmptyState>
+  );
+}

package/src/components/ErrorState/OfflineIllustration.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+export const OfflineIllustration = React.memo(() => (
+  <svg
+    width="120"
+    height="120"
+    viewBox="0 0 120 120"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Group">
+      <path
+        id="Vector"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.72855 82.6115C5.96155 82.6115 5.25455 82.3155 4.73655 81.7795C4.21755 81.2425 3.94755 80.5235 3.97455 79.7575C4.03155 78.1255 5.40555 76.7975 7.03655 76.7975C7.80255 76.7975 8.50955 77.0925 9.02855 77.6295C9.54655 78.1665 9.81755 78.8845 9.79155 79.6515C9.73455 81.2835 8.36055 82.6115 6.72855 82.6115ZM21.0996 67.0005L20.2946 68.0005L20.0996 67.0005H10.4106L10.1366 74.6955C9.22355 74.1135 8.16055 73.7975 7.03655 73.7975C3.80755 73.7975 1.08955 76.4235 0.976551 79.6515C0.920551 81.2395 1.48955 82.7345 2.57855 83.8625C3.66655 84.9905 5.14055 85.6115 6.72855 85.6115C7.83455 85.6115 8.87755 85.2975 9.78055 84.7615L9.46955 93.5005H30.1796L31.1206 67.0005H21.0996Z"
+        fill="#28BF9A"
+      />
+      <path
+        id="Vector_2"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M111.211 89.4182H28.598L34.842 31.0002H117.455L111.211 89.4182Z"
+        fill="#116DFF"
+      />
+      <path
+        id="Vector_3"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M37.632 37.0002L32.035 89.5442H67.44H67.672H108.107L113.702 37.0002H37.632Z"
+        fill="#C2E2FF"
+      />
+      <path
+        id="Vector_4"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M111.238 89.0002H99.4183L93.3033 90.7972L95.3423 93.5002L106.677 93.4952C109.014 93.4942 110.977 91.5602 111.238 89.0002Z"
+        fill="#192C55"
+      />
+      <path
+        id="Vector_5"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M94.7314 93.4942H17.8454C15.6624 93.4942 13.9684 91.3902 14.2284 89.0002H51.1524L57.1104 90.2262L62.8454 89.0002H99.4184C99.0904 91.5772 97.0914 93.4942 94.7314 93.4942Z"
+        fill="#116DFF"
+      />
+      <path
+        id="Vector_6"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.0992 67.0002L21.0102 73.0002H23.4902L23.2192 81.0002H17.0992L17.3702 73.0002H20.0102L20.0992 67.0002H21.0992ZM73.959 47.9053C82.569 47.9053 89.062 54.8863 88.46 63.4963C87.857 72.1063 80.39 79.0873 71.778 79.0873C63.168 79.0873 56.676 72.1063 57.278 63.4963C57.88 54.8863 65.349 47.9053 73.959 47.9053Z"
+        fill="white"
+      />
+      <path
+        id="Vector_7"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M118 93.0002V94.0002H2V93.0002H118ZM63 89.0002C63 90.4182 62.012 91.5682 60.794 91.5682H53.206C51.988 91.5682 51 90.4182 51 89.0002H63ZM73.4302 69.2487C73.9602 69.8187 73.8942 70.7427 73.2852 71.3127C72.6752 71.8827 71.7502 71.8827 71.2202 71.3127C70.6892 70.7427 70.7542 69.8187 71.3642 69.2487C71.9742 68.6777 72.8982 68.6777 73.4302 69.2487ZM80.93 54.67L81.61 55.401L65.46 70.51L64.77 69.781L72.07 62.96C70.22 63.1 68.36 63.821 66.79 65.13L66.15 64.361C68.22 62.64 70.731 61.84 73.15 61.95L75.561 59.69C72 59.04 68.03 60.04 64.85 62.71L64.21 61.94C67.83 58.901 72.43 57.88 76.45 58.861L80.93 54.67ZM76.4902 67.3205L75.7802 68.0195C74.4602 66.6895 72.4392 66.3495 70.6502 67.0195L72.0302 65.7195C73.6702 65.5905 75.3102 66.1205 76.4902 67.3205ZM75.6104 62.3801C76.9104 62.7901 78.1204 63.5001 79.1394 64.5001L78.4394 65.2201C77.3894 64.1901 76.1204 63.5101 74.7594 63.1801L75.6104 62.3801ZM26.2899 43.2884L26.0399 44.2574C22.4059 43.3164 18.1949 44.5844 15.5659 47.4074C14.8819 48.1424 14.4579 48.8224 14.2709 49.4864C14.0509 50.2634 14.1769 51.0504 14.5979 51.5374C14.7289 51.6884 14.8879 51.8164 15.0769 51.9244C17.6429 49.9924 20.8069 48.8654 23.9839 48.7854C24.8119 48.7824 25.3339 49.1274 25.3859 49.7014C25.4276 50.1822 25.0845 50.5242 24.8735 50.6965L24.7669 50.7794C22.5119 52.4704 19.7169 53.3754 16.9719 53.3284C16.2999 53.3174 15.7219 53.2334 15.2309 53.0744C14.9589 53.2964 14.6959 53.5274 14.4419 53.7674C14.2189 53.9814 13.9359 54.3304 13.8619 54.7724L13.8437 54.9217C13.8102 55.3733 13.9948 55.8499 15.1279 56.1604C16.1159 56.4314 17.1699 56.4954 18.2179 56.3634C18.3839 56.1624 18.5629 55.9614 18.7549 55.7624C19.1539 55.3464 19.7999 54.7684 20.6089 54.3754C21.1609 54.1064 21.7849 54.3144 22.0599 54.8624C22.3389 55.4204 22.1319 56.0574 21.5769 56.3454C20.6849 56.8084 19.7279 57.1264 18.7569 57.2934C18.1819 58.0564 17.8299 58.8154 17.7089 59.5574C17.5189 60.7354 17.9839 61.8874 18.8429 62.3594L18.3599 63.2364C17.1389 62.5634 16.4649 60.9854 16.7229 59.3974C16.8299 58.7394 17.0779 58.0804 17.4669 57.4244C16.5819 57.4494 15.7019 57.3544 14.8639 57.1254C12.9649 56.6054 12.7339 55.4714 12.8759 54.6104C12.9689 54.0444 13.2729 53.5024 13.7539 53.0434C13.9189 52.8864 14.0889 52.7324 14.2609 52.5834C14.1069 52.4674 13.9659 52.3364 13.8409 52.1904C13.2019 51.4524 12.9979 50.3114 13.3079 49.2154C13.5399 48.3944 14.0389 47.5804 14.8339 46.7254C17.7039 43.6404 22.3069 42.2594 26.2899 43.2884ZM78.5802 59.5994C79.7192 60.1304 80.8002 60.8304 81.7402 61.7404L81.0402 62.4604C80.0802 61.5404 78.9802 60.8404 77.7902 60.3494L78.5802 59.5994ZM21.1029 55.2554C21.0849 55.2554 21.0659 55.2634 21.0469 55.2734C20.6719 55.4574 20.3349 55.6904 20.0509 55.9234C20.4139 55.7924 20.7709 55.6374 21.1159 55.4584C21.1529 55.4384 21.2139 55.4074 21.1659 55.3104C21.1449 55.2684 21.1239 55.2554 21.1029 55.2554ZM24.0089 49.7854C21.2869 49.8534 18.5749 50.7444 16.2949 52.2834C16.5089 52.3094 16.7389 52.3244 16.9869 52.3284L17.1729 52.3304C19.6619 52.3304 22.1389 51.4994 24.1669 49.9784L24.2286 49.9305L24.3168 49.8532C24.328 49.8423 24.3377 49.8324 24.3459 49.8234C24.2739 49.8024 24.1549 49.7834 24.0089 49.7854Z"
+        fill="#192C55"
+      />
+    </g>
+  </svg>
+));

package/src/components/ErrorState/ToolbarCollectionErrorState.uni.driver.ts

@@ -0,0 +1,27 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  EmptyStateUniDriver,
+  TextButtonUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import RequestIdUniDriver from '../RequestId/RequestId.uni.driver';
+
+export function ToolbarCollectionErrorStateUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  return {
+    ...EmptyStateUniDriver(base, body),
+
+    getRequestIdUniDriver: () =>
+      RequestIdUniDriver(body.$('[data-hook="request-id"]'), body),
+
+    getButtonByDataHook: (dataHook: string) =>
+      TextButtonUniDriver(base.$(`[data-hook="${dataHook}"]`), body),
+
+    getRetryButton: () =>
+      TextButtonUniDriver(
+        base.$('[data-hook="collection-error-state-action-button"]'),
+        body,
+      ),
+  };
+}

package/src/components/ErrorState/index.ts

@@ -0,0 +1,2 @@
+export * from './LoadingErrorState';
+export * from './ErrorState';

package/src/components/ExpandableSearch.tsx

@@ -0,0 +1,30 @@
+import React, { CSSProperties } from 'react';
+import { CollectionSearch, CollectionSearchProps } from './CollectionSearch';
+import { observer } from 'mobx-react-lite';
+import { useElementSize } from 'usehooks-ts';
+
+export interface ExpandableSearchProps extends CollectionSearchProps {
+  visibility?: CSSProperties['visibility'];
+}
+
+function _ExpandableSearch({ visibility, ...rest }: CollectionSearchProps) {
+  const [containerRef, { width }] = useElementSize();
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-end',
+      }}
+      ref={containerRef}
+    >
+      <div style={{ marginLeft: 'auto' }}>
+        <CollectionSearch {...rest} expandWidth={width} />
+      </div>
+    </div>
+  );
+}
+
+export const ExpandableSearch = observer(_ExpandableSearch);