@wix/patterns 1.255.0 → 1.256.0

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

@@ -0,0 +1,16 @@
+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="page-error-state"'), body),
+
+    getRetryButton: () =>
+      TextButtonUniDriver(base.$('[data-hook="retry-button"]'), body),
+  };
+};

package/src/components/PageErrorState/PageErrorStateIllustration.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const PageErrorStateIllustration = React.memo(() => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="121"
+    height="120"
+    viewBox="0 0 121 120"
+    fill="none"
+  >
+    <path
+      d="M86.6599 87.3384C85.6499 87.0184 84.9899 86.1284 84.2299 85.0984C83.8199 84.5484 83.3999 83.9784 82.8899 83.4484C82.2499 82.7884 81.3099 82.1384 80.3999 81.7284C80.1999 82.0784 79.9099 82.3984 79.5299 82.6684C78.3899 83.5084 77.6499 83.2984 77.3199 83.0984C76.8799 82.8384 76.6499 82.3384 76.7099 81.7884C76.7899 81.1284 77.2799 80.5884 77.9999 80.3784C78.5199 80.2284 79.1199 80.2684 79.7499 80.4284C79.7799 78.9584 78.2099 77.0684 77.3399 76.0384C77.1499 75.8084 76.9799 75.6084 76.8499 75.4384L77.6399 74.8284C77.7599 74.9784 77.9199 75.1784 78.0999 75.3884C79.1699 76.6584 80.9499 78.7984 80.7199 80.7184C80.7199 80.7384 80.7199 80.7484 80.7199 80.7584C81.8399 81.2484 82.9299 82.0284 83.6099 82.7384C84.1699 83.3184 84.6299 83.9384 85.0299 84.4884C85.6899 85.3784 86.2599 86.1484 86.9599 86.3684L86.6599 87.3184V87.3384ZM78.7099 81.2784C78.5499 81.2784 78.4099 81.2984 78.2699 81.3384C77.7899 81.4784 77.7099 81.8184 77.6999 81.9084C77.6899 82.0184 77.6999 82.1684 77.8199 82.2284C77.9799 82.3184 78.3599 82.2784 78.9399 81.8584C79.1399 81.7084 79.3099 81.5484 79.4299 81.3784C79.1799 81.3184 78.9299 81.2784 78.7099 81.2784ZM71.6699 53.5484C71.9999 51.7484 72.4199 49.4984 79.2099 48.1484C86.4299 46.7184 89.2099 42.6284 91.0499 39.9284C91.7499 38.9084 92.2999 38.0984 92.8599 37.7584L92.3399 36.8984C91.5899 37.3584 90.9799 38.2384 90.2199 39.3584C88.4699 41.9284 85.8299 45.8084 79.0099 47.1584C71.5499 48.6384 71.0499 51.3584 70.6799 53.3484C70.5999 53.7784 70.5299 54.1584 70.3899 54.4584L71.2999 54.8784C71.4899 54.4684 71.5699 54.0184 71.6599 53.5384L71.6699 53.5484Z"
+      fill="#192C55"
+    />
+    <path
+      d="M84.3299 64.45C84.3299 57.22 79.6199 51.15 73.2399 49.37C75.1299 46.9 76.1299 43.66 75.7099 40.16C74.9699 33.99 69.5099 30 63.5699 30H60.5699C60.5699 21.04 53.7799 13 45.2099 13H44.1699C35.5999 13 28.5699 21.04 28.5699 30H26.5699C20.6199 30 15.0499 34 14.3099 40.16C13.8899 43.66 14.8899 46.9 16.7799 49.37C10.3999 51.15 5.68994 57.22 5.68994 64.45C5.68994 72.4 11.3799 78.95 18.7299 79.94C17.5499 81.7 16.8499 83.84 16.8499 86.15C16.8499 92.14 21.4999 97 27.2299 97H62.7799C68.5199 97 73.1599 92.14 73.1599 86.15C73.1599 83.84 72.4599 81.7 71.2799 79.94C78.6299 78.96 84.3199 72.41 84.3199 64.45H84.3299Z"
+      fill="#28BF9A"
+    />
+    <path
+      d="M103.22 18.9205C99.0899 16.4705 93.7599 17.8205 91.2999 21.9505C88.5999 26.4905 90.8599 33.1205 91.9599 35.7705L89.6399 37.1905L93.3399 39.2405L93.5899 36.8505C96.3499 36.5805 103.49 35.4605 106.24 30.8405C108.7 26.7105 107.35 21.3805 103.23 18.9205H103.22Z"
+      fill="#116DFF"
+    />
+    <path
+      d="M74.84 72.1791C73.93 71.4391 73.19 70.7991 72.49 70.0791C69.24 66.7091 67.95 62.0391 69.2 58.1791L70.15 58.4891C69.01 61.9991 70.2 66.2791 73.2 69.3791C73.87 70.0691 74.59 70.6891 75.47 71.3991L74.84 72.1791ZM45.5 113.999V68.9791L59.81 58.7591L59.23 57.9491L45.5 67.7591V43.0091H44.5V55.3791L29.77 42.0391L29.1 42.7791L44.5 56.7291V68.4791H44.48L44.5 68.5191V84.5391L30.23 74.3491L29.65 75.1591L44.5 85.7591V113.999H9.5V114.999H112.5V113.999H45.5Z"
+      fill="#192C55"
+    />
+    <path
+      d="M61.8401 17.0009C61.6801 16.6909 61.5801 16.3309 61.5801 15.9609C61.5801 15.1209 62.0401 14.4009 62.6901 14.0909C63.0601 13.9109 63.3001 13.5109 63.3601 13.0709C63.5001 11.9509 64.1201 10.1109 66.6001 9.99094C66.6201 9.99094 66.6501 9.99094 66.6701 9.99094C67.5701 10.0109 68.3901 9.52094 68.8501 8.67094C69.4901 7.50094 70.6501 6.71094 71.9801 6.71094C73.3101 6.71094 74.4901 7.51094 75.1201 8.69094C75.5701 9.52094 76.4201 9.99094 77.2901 9.99094H77.3101C78.6401 9.99094 79.7701 10.9009 80.2301 12.1809C80.4601 12.8209 80.9001 13.3209 81.4901 13.5709C82.3601 13.9309 82.9601 14.7309 82.9601 15.6609C82.9601 16.1409 82.8001 16.6009 82.5301 16.9909H61.8301L61.8401 17.0009ZM115.28 76.0009C115.7 75.5409 115.97 74.9609 115.97 74.3109C115.97 73.2409 115.27 72.3309 114.27 71.9109C113.6 71.6309 113.09 71.0509 112.82 70.3209C112.28 68.8509 110.97 67.8109 109.44 67.8109H109.42C108.41 67.8109 107.43 67.2809 106.91 66.3209C106.17 64.9609 104.83 64.0509 103.28 64.0509C101.73 64.0509 100.4 64.9509 99.6701 66.2909C99.1301 67.2609 98.1801 67.8309 97.1501 67.8109C97.1201 67.8109 97.0901 67.8109 97.0601 67.8109C94.1901 67.9509 93.4801 70.0509 93.3101 71.3309C93.2401 71.8409 92.9701 72.3009 92.5401 72.5009C91.7901 72.8609 91.2601 73.6809 91.2601 74.6409C91.2601 75.1409 91.4101 75.6109 91.6601 75.9909H115.28V76.0009Z"
+      fill="#C2E2FF"
+    />
+  </svg>
+));

package/src/components/PageErrorState/index.ts

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

package/src/components/PageGridInfiniteScrollLoader.tsx

@@ -0,0 +1,36 @@
+import { useCollectionReachBottom } from './useCollectionReachBottom';
+import React from 'react';
+import {
+  SkeletonInfiniteScrollLoader,
+  SkeletonInfiniteScrollLoaderProps,
+} from './InfiniteScrollLoader/SkeletonInfiniteScrollLoader';
+import { FiltersMap } from '@wix/bex-core';
+import { useScrollableContentContext } from '../providers';
+import { observer } from 'mobx-react-lite';
+import { GridBaseState } from '../state';
+
+export interface PageGridInfiniteScrollLoaderProps<T, F extends FiltersMap>
+  extends Partial<SkeletonInfiniteScrollLoaderProps<T, F>> {
+  dataHook?: string;
+  state: GridBaseState<T, F>;
+  scrollMoreAlways?: boolean;
+}
+
+function _PageSkeletonInfiniteScrollLoader<T, F extends FiltersMap>(
+  props: PageGridInfiniteScrollLoaderProps<T, F>,
+) {
+  const { scrollMoreAlways, ...rest } = props;
+  const { scrollableContentRef } = useScrollableContentContext();
+
+  const { targetRef } = useCollectionReachBottom({
+    collection: props.state.collection,
+    containerRef: scrollableContentRef,
+    scrollMoreAlways,
+  });
+
+  return <SkeletonInfiniteScrollLoader targetRef={targetRef} {...rest} />;
+}
+
+export const PageGridInfiniteScrollLoader = observer(
+  _PageSkeletonInfiniteScrollLoader,
+);

package/src/components/PageInfiniteScrollLoader.tsx

@@ -0,0 +1,29 @@
+import { useCollectionReachBottom } from './useCollectionReachBottom';
+import React from 'react';
+import { InfiniteScrollLoader } from './InfiniteScrollLoader/InfiniteScrollLoader';
+import { CollectionState, FiltersMap } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { useScrollableContentContext } from '../providers';
+
+export interface PageInfiniteScrollLoaderProps<T, F extends FiltersMap> {
+  dataHook?: string;
+  state: CollectionState<T, F>;
+  scrollMoreAlways?: boolean;
+}
+
+function _PageInfiniteScrollLoader<T, F extends FiltersMap>(
+  props: PageInfiniteScrollLoaderProps<T, F>,
+) {
+  const { scrollMoreAlways, ...rest } = props;
+  const { scrollableContentRef } = useScrollableContentContext();
+
+  const { targetRef } = useCollectionReachBottom({
+    collection: props.state,
+    containerRef: scrollableContentRef,
+    scrollMoreAlways,
+  });
+
+  return <InfiniteScrollLoader targetRef={targetRef} {...rest} />;
+}
+
+export const PageInfiniteScrollLoader = observer(_PageInfiniteScrollLoader);

package/src/components/PageSubTitle/PageSubTitle.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Box, TextButton } from '@wix/design-system';
+import {
+  useCollectionPageContext,
+  useWixPatternsContainer,
+} from '@wix/bex-core/react';
+import { useSelector } from '../../useSelector';
+import { withoutDefaults } from '@wix/bex-core';
+import { cairoPageCtaClicked } from '@wix/bex-core/bi';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+/**
+ * Props for the PageSubTitle component.
+ * @property {string} text The subtitle text.
+ * @property {Object} [learnMore] An object with a `url` (required) for displaying a link button on the subtitle.
+ * @property {string} learnMore.url where the link should navigate to
+ * @property {string} [learnMore.label ="Learn more"] - the label of the link button. defaults to "Learn More"
+ */
+export interface PageSubTitleProps {
+  text: string;
+  learnMore?: {
+    url: string;
+    label?: string;
+  };
+}
+
+/**
+ * Renders a page subtitle with an optional learn more button
+ * @component
+ * @param {PageSubTitleProps} props The props for the component.
+ * @example
+ * ```jsx
+ * <PageSubTitle text="Welcome to my page" learnMore={{ url: "/learn-more", label: "Learn More" }} />
+ * ```
+ */
+export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
+  const { translate: t, initTask } = useWixPatternsContainer();
+  const { bi } = useCollectionPageContext();
+  useSelector(() => initTask.status);
+
+  const isMobile = useIsMobile();
+
+  return (
+    <Box dataHook="page-subtitle" display="inline">
+      {text}
+      {learnMore && (
+        <>
+          <Box inline marginLeft="SP1" />
+          <TextButton
+            dataHook="subtitle-learn-more-cta"
+            as="a"
+            rel="noopener"
+            target="_blank"
+            href={learnMore.url}
+            size={isMobile ? 'small' : 'medium'}
+            onClick={() => {
+              bi?.reportBI(
+                withoutDefaults(cairoPageCtaClicked)({
+                  location: 'Collection Page Header',
+                  ctaType: 'link',
+                  ctaName: 'Learn more',
+                }),
+              );
+            }}
+          >
+            {learnMore.label ?? t('cairo.subtitle.learnMore')}
+          </TextButton>
+        </>
+      )}
+    </Box>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import { TextButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+export default function SubTitleUniDriver(base: UniDriver, body: UniDriver) {
+  const getLearnMoreButton = () =>
+    TextButtonUniDriver(base.$(`[data-hook="subtitle-learn-more-cta"]`), body);
+  return {
+    getLearnMoreButton,
+
+    getText() {
+      return base.$('[data-hook="page-subtitle"]').text();
+    },
+    getLearnMoreLabel() {
+      return getLearnMoreButton().getButtonTextContent();
+    },
+    getLearnMoreHref() {
+      return this.getLearnMoreButton().getHref();
+    },
+    ...baseUniDriverFactory(base),
+  };
+}

package/src/components/PageSubTitle/index.ts

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

package/src/components/PageWrapper/InfiniteScrollPage.tsx

@@ -0,0 +1,39 @@
+import { Page, PageProps } from '@wix/design-system';
+import React, { Children, ReactNode } from 'react';
+import { CollectionPageContextProvider } from '../../providers';
+import { usePageHeader } from '../../hooks/usePageHeader';
+import { CollectionPageState } from '@wix/bex-core';
+import { useCollectionPageState } from '@wix/bex-core/react';
+import { PageWrapperBase } from './PageWrapperBase';
+
+interface PagePropsWithChildren extends PageProps {
+  state?: CollectionPageState;
+}
+
+export interface InfiniteScrollPageProps extends PagePropsWithChildren {
+  children: ReactNode;
+}
+
+export function InfiniteScrollPage({
+  children,
+  ...props
+}: InfiniteScrollPageProps) {
+  // WSR <Page /> expects a flattened children array
+  const childrenArr = Children.toArray(children);
+
+  const { title: pageTitle, header } = usePageHeader(childrenArr);
+  const collectionPageState = useCollectionPageState(
+    { pageTitle, hasHeader: header != null },
+    props.state,
+  );
+
+  const { pageState } = collectionPageState;
+
+  return (
+    <CollectionPageContextProvider value={collectionPageState}>
+      <PageWrapperBase pageState={pageState}>
+        <Page {...props}>{childrenArr}</Page>
+      </PageWrapperBase>
+    </CollectionPageContextProvider>
+  );
+}

package/src/components/PageWrapper/PageWrapper.tsx

@@ -0,0 +1,10 @@
+import { PageWrapperBase } from './PageWrapperBase';
+import React from 'react';
+
+export interface PageWrapperProps {
+  children?: React.ReactNode;
+}
+
+export function PageWrapper(props: PageWrapperProps) {
+  return <PageWrapperBase {...props} />;
+}

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

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export function PageWrapperUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    getLang: async () => base.attr('lang'),
+    getDndKitLiveRegion: (count: number) =>
+      base
+        .$('[data-hook="modals-container"]')
+        .$(`#DndLiveRegion-${count}[role="status"]`),
+    ...baseUniDriverFactory(base),
+  };
+}

package/src/components/PageWrapper/PageWrapperBase.tsx

@@ -0,0 +1,79 @@
+import React, { ReactNode, useEffect, useMemo, useState } from 'react';
+import { useReactive } from '@wix/bex-utils/react';
+import {
+  PageContextProvider,
+  useWixPatternsContainer,
+} from '@wix/bex-core/react';
+import { PageState, SidePanelWidth } from '@wix/bex-core';
+import { runInAction } from 'mobx';
+
+export interface PageWrapperBaseProps {
+  pageState?: PageState;
+  children?: ReactNode;
+}
+
+export function PageWrapperBase(props: PageWrapperBaseProps) {
+  const { pageState, children } = props;
+
+  const [state] = useState(() => pageState ?? new PageState());
+  const { modalsContainerRef, stackingRootRef, _sidePanelOpen } = state;
+  const sidePanelOpen = useReactive(_sidePanelOpen);
+  const { environment } = useWixPatternsContainer();
+
+  useEffect(() => {
+    return state.init();
+  }, [state]);
+
+  const pageAndModalsRootStyle = useMemo(
+    () => ({
+      position: 'relative' as const,
+      width: sidePanelOpen ? `calc(100% - ${SidePanelWidth}px)` : '100%',
+      height: '100%',
+      transition: 'width 0.4s ease 0s',
+      zIndex: 1,
+    }),
+    [sidePanelOpen],
+  );
+
+  const rootStyle = useMemo(
+    () => ({
+      position: 'relative' as const,
+      width: '100%',
+      height: '100%',
+    }),
+    [],
+  );
+
+  const modalsContainerStyle = useMemo(
+    () => ({
+      position: 'absolute' as const,
+      zIndex: 1,
+    }),
+    [],
+  );
+
+  return (
+    <PageContextProvider value={state}>
+      <div
+        data-wix-patterns
+        style={rootStyle}
+        data-hook="cairo-root-stacking"
+        ref={(el) => {
+          stackingRootRef.current = el;
+        }}
+        lang={environment.language}
+      >
+        <div style={pageAndModalsRootStyle}>{children}</div>
+        <div
+          data-hook="modals-container"
+          ref={(el) => {
+            runInAction(() => {
+              modalsContainerRef.current = el;
+            });
+          }}
+          style={modalsContainerStyle}
+        />
+      </div>
+    </PageContextProvider>
+  );
+}

package/src/components/PageWrapper/index.ts

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

package/src/components/PaginationTable/PaginationTable.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { CollectionPagination } from '../CollectionPagination';
+import { CollectionState, FiltersMap } from '@wix/bex-core';
+import { CollectionTable, CollectionTableProps } from '../CollectionTable';
+import { TableState } from '../../state';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface PaginationTableProps<T, F extends FiltersMap>
+  extends Omit<CollectionTableProps<T, F>, 'state'> {
+  state: CollectionState<T, F>;
+}
+
+export function _PaginationTable<T, F extends FiltersMap = FiltersMap>(
+  props: PaginationTableProps<T, F>,
+) {
+  const { state: collection, cardProps, ...rest } = props;
+
+  const container = useWixPatternsContainer();
+
+  const [state] = useState(
+    () =>
+      new TableState({
+        collection,
+        container,
+      }),
+  );
+
+  useEffect(
+    () =>
+      state.init({
+        featuresInitializers: [],
+      }),
+    [],
+  );
+
+  return (
+    <>
+      <CollectionTable
+        state={state}
+        cardProps={{ stretchVertically: true, ...cardProps }}
+        {...rest}
+      />
+      <CollectionPagination state={state.collection} />
+    </>
+  );
+}
+
+export const PaginationTable = observer(_PaginationTable);

package/src/components/PaginationTable/index.ts

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

package/src/components/PartialFunctionComponent.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren, ReactElement } from 'react';
+
+export type PartialFunctionComponent<P = {}> = (
+  props: PropsWithChildren<P>,
+  context?: any,
+) => Partial<ReactElement<any, any>> | null;

package/src/components/Picker/Picker.tsx

@@ -0,0 +1,124 @@
+import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ComputedQuery, FiltersMap, PickerState } from '@wix/bex-core';
+import {
+  Box,
+  BoxProps,
+  SkeletonCircle,
+  SkeletonGroup,
+  SkeletonLine,
+} from '@wix/design-system';
+import { PickerEmptyStateContainer } from '../PickerEmptyState/PickerEmptyStateContainer';
+
+export interface PickerProps<T, F extends FiltersMap> {
+  dataHook?: BoxProps['dataHook'];
+  flex?: CSSProperties['flex'];
+  state: PickerState<T, F>;
+  renderError: (params: { err: unknown; isOnline: boolean }) => ReactElement;
+  renderEmptyState?: (params: {
+    hasAvailableItems: boolean;
+    query: ComputedQuery<F>;
+  }) => ReactElement | null | undefined;
+  hasFilterDropdown?: boolean;
+  children: ReactNode;
+}
+
+function _Picker<T, F extends FiltersMap = FiltersMap>(
+  props: PickerProps<T, F>,
+) {
+  const {
+    state,
+    renderEmptyState,
+    renderError,
+    dataHook,
+    children,
+    flex,
+    hasFilterDropdown,
+  } = props;
+  const { collection, minContentHeight } = state;
+  const {
+    showRefreshLoader,
+    result: { status, isEmptyAndNotFetching },
+  } = collection;
+
+  let child: ReactNode;
+  if (status.isIdle || showRefreshLoader) {
+    // the loader container should be according to the last number of items height (`contentHeight`)
+    child = (
+      <SkeletonGroup>
+        <Box
+          direction="vertical"
+          width="100%"
+          minHeight={minContentHeight}
+          dataHook="search-loader"
+          gap="0"
+        >
+          {Array.from({ length: 8 }).map((_, index) => (
+            <>
+              <Box
+                key={index}
+                direction="horizontal"
+                gap="24px"
+                padding="12px 24px"
+                align="center"
+                verticalAlign="middle"
+                justifyItems="center"
+              >
+                <SkeletonCircle diameter="48px" />
+                <Box direction="vertical" gap="6px" flex="1">
+                  <SkeletonLine width="120px" />
+                  <SkeletonLine width="240px" />
+                </Box>
+              </Box>
+            </>
+          ))}
+        </Box>
+      </SkeletonGroup>
+    );
+  } else if (status.isError) {
+    child = renderError({
+      err: status.error,
+      isOnline: collection.isOnline(),
+    });
+    child = (
+      <Box
+        align="center"
+        verticalAlign="middle"
+        paddingTop="SP2"
+        paddingBottom="SP9"
+        height="100%"
+        minHeight={minContentHeight}
+      >
+        {child}
+      </Box>
+    );
+
+    child = (
+      <Box direction="vertical" overflow="auto">
+        {child}
+      </Box>
+    );
+  } else if (isEmptyAndNotFetching) {
+    child = (
+      <PickerEmptyStateContainer
+        state={state}
+        hasFilterDropdown={hasFilterDropdown}
+        renderEmptyState={renderEmptyState}
+      />
+    );
+  } else {
+    child = (
+      <Box minHeight={minContentHeight} direction="vertical">
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <Box dataHook={dataHook} direction="vertical" overflow="hidden" flex={flex}>
+      {child}
+    </Box>
+  );
+}
+
+export const Picker = observer(_Picker);

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

@@ -0,0 +1,108 @@
+import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import {
+  EmptyStateUniDriver,
+  FloatingNotificationUniDriver,
+  SelectorListUniDriver,
+  SelectorUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { PickerTableListItemUniDriver } from '../PickerTableListItem/PickerTableListItem.uni.driver';
+
+export function PickerUniDriver(base: UniDriver, body: UniDriver) {
+  const selectorList = SelectorListUniDriver(base, body);
+
+  const getEmptyState = async <T, E>(factory: (element: E) => T) =>
+    factory(await base.getNative());
+
+  const getSelectors = () =>
+    base
+      .$('[data-hook="selector-list-content"]')
+      .$$('[data-hook="selector-list-selector"]');
+
+  const selectorDriverAt = (i: number) =>
+    SelectorUniDriver(getSelectors().get(i), body);
+
+  const tableListItemDriverAt = (i: number) =>
+    PickerTableListItemUniDriver(getSelectors().get(i), body);
+
+  const getSearchLoader = () => base.$('[data-hook="search-loader"]');
+
+  const getFloatingNotification = () =>
+    FloatingNotificationUniDriver(
+      base.$('[data-hook="floating-notification"]'),
+      body,
+    );
+
+  const getPrimaryActionButtonAt = (i: number) =>
+    getSelectors().get(i).$('[data-hook="primary-action-button"]');
+
+  return {
+    ...baseUniDriverFactory(base),
+    wait: (timeout?: number) => base.wait(timeout),
+    waitSearchLoader: (timeout?: number) => getSearchLoader().wait(timeout),
+    searchLoaderExists: () => getSearchLoader().exists(),
+    waitSearchLoaderRemoved: (timeout?: number) =>
+      waitFor(async () => !(await getSearchLoader().exists()), timeout),
+    numberOfItemsInList: () => getSelectors().count(),
+    primaryButtonExistsAt: (i: number) => getPrimaryActionButtonAt(i).exists(),
+    getPrimaryActionButtonAt,
+    scrollDown: async () => {
+      const element = await base.getNative();
+
+      const { page } = element;
+
+      // puppeteer
+      if (page?.evaluate) {
+        await page.evaluate(() => {
+          const e = document.querySelector(
+            '[data-hook="selector-list-content"]',
+          )!;
+          e.scrollBy({ behavior: 'smooth', top: e.scrollHeight });
+        });
+      } else {
+        await selectorList.scrollDown();
+      }
+    },
+    scrollTo: (i: number) => getSelectors().get(i).scrollIntoView?.(),
+    toggleSelectorAt: selectorList.toggleSelectorAt,
+    getTotalSelected: async () => {
+      const checked = await Promise.all(
+        await getSelectors().map((selector) =>
+          SelectorUniDriver(selector, body).isChecked(),
+        ),
+      );
+
+      return checked.filter(Boolean).length;
+    },
+    isSelectorCheckedAt: selectorList.isSelectorCheckedAt,
+    waitListItemAt: async (i: number, timeout?: number) =>
+      waitFor(() => selectorDriverAt(i).exists(), timeout),
+    getTableListItemAt: (i: number) => tableListItemDriverAt(i),
+    waitRowEntered: (i: number, timeout?: number) =>
+      base
+        .$('[data-hook="selector-list-content"]')
+        .$$('[data-hook="picker-list-fade-item"].fade-entered')
+        .get(i)
+        .wait(timeout),
+    hoverItemAt: (i: number) => getSelectors().get(i).hover(),
+    getTitleTextAt: async (i: number) =>
+      selectorDriverAt(i).titleTextDriver().getText(),
+    isIndeterminateAt: async (i: number) =>
+      selectorDriverAt(i).isIndeterminate(),
+    getTitleTextContentAt: async (i: number) =>
+      getSelectors().get(i).$('[data-hook="selector-title"]').text(),
+    getSubtitleTextAt: async (i: number) =>
+      selectorDriverAt(i).subtitleTextDriver().getText(),
+    getSubtitleTextContentAt: async (i: number) =>
+      getSelectors().get(i).$('[data-hook="selector-subtitle"]').text(),
+    getExtraNodeElementAt: (i: number) => selectorDriverAt(i).getExtraNode(),
+    getImageElementAt: (i: number) => selectorDriverAt(i).getImage(),
+    floatingNotificationExists: () => getFloatingNotification().exists(),
+    getFloatingNotificationText: () => getFloatingNotification().getText(),
+    getEmptyState,
+    getEmptyStateByDataHook: (dataHook = 'picker-empty-state') =>
+      EmptyStateUniDriver(base.$(`[data-hook="${dataHook}"]`), body),
+    getErrorStateByDataHook: (dataHook: string) =>
+      EmptyStateUniDriver(base.$(`[data-hook="${dataHook}"]`), body),
+  };
+}

package/src/components/Picker/index.ts

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

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

@@ -0,0 +1,3 @@
+.root {
+  display: flex;
+}