@wix/patterns 1.255.0 → 1.256.0

package/src/components/PickerEmptyState/PickerEmptyState.tsx

@@ -0,0 +1,107 @@
+import { FiltersMap, OptionalFiltersMap, PickerState } from '@wix/bex-core';
+import { Revert } from '@wix/wix-ui-icons-common';
+import React from 'react';
+import { Box, Text, TextButton } from '@wix/design-system';
+import {
+  CollectionEmptyStateBase,
+  CollectionEmptyStateBaseProps,
+} from '../CollectionEmptyStateBase';
+import { observer } from 'mobx-react-lite';
+
+interface PickerEmptyStateProps<T, F extends FiltersMap = OptionalFiltersMap>
+  extends Omit<CollectionEmptyStateBaseProps<T, F>, 'state'> {
+  hasFilterDropdown?: boolean;
+  state: PickerState<T, F>;
+}
+
+function _PickerEmptyState<T, F extends FiltersMap>(
+  props: PickerEmptyStateProps<T, F>,
+) {
+  const { state, hasFilterDropdown, ...rest } = props;
+  const { collection } = state;
+
+  const {
+    result: { hasAvailableItems },
+    translate: t,
+  } = collection;
+
+  const showFilterOnlyEmptyState = Boolean(
+    hasFilterDropdown && collection.query.search.isEmpty,
+  );
+
+  const showFilterWithSearchEmptyState = Boolean(
+    hasFilterDropdown && !collection.query.search.isEmpty,
+  );
+
+  const searchOnlyNoResultsStateProps = {
+    state: collection,
+    dataHook: 'picker-no-results-state',
+    title: t('cairo.search.nothingMatches.title', {
+      term: collection.result.originQuery.rawSearch,
+    }),
+    subtitle: (
+      <Box direction="vertical" gap="18px" align="center">
+        <Text dataHook="picker-no-results-state-subtitle" size="small">
+          {t('cairo.search.nothingMatches.text')}
+        </Text>
+        <TextButton
+          dataHook="picker-no-results-state-reset-button"
+          prefixIcon={<Revert />}
+          onClick={() => collection.clearSearch()}
+        >
+          {t('cairo.emptyState.reset.button')}
+        </TextButton>
+      </Box>
+    ),
+  };
+
+  const filterOnlyEmptyStateProps: CollectionEmptyStateBaseProps<T, F> = {
+    state: collection,
+    dataHook: 'picker-empty-state-only-filter',
+    title: t('cairo.search.noresults.title'),
+    subtitle: t('cairo.selectorModal.searchEmptyState.changeFilter.subtitle'),
+  };
+
+  const filterWithSearchEmptyStateProps: CollectionEmptyStateBaseProps<T, F> = {
+    state: collection,
+    dataHook: 'picker-empty-state-filter-with-search',
+    title: t('cairo.search.nothingMatches.title', {
+      term: collection.result.originQuery.rawSearch,
+    }),
+    subtitle: (
+      <Box direction="vertical" gap="18px" align="center">
+        <Text size="small" dataHook="picker-no-results-state-subtitle">
+          {t('cairo.selectorModal.searchEmptyState.subtitle')}
+        </Text>
+        <TextButton
+          dataHook="picker-no-results-state-reset-button"
+          prefixIcon={<Revert />}
+          onClick={() => collection.clearSearch()}
+        >
+          {t('cairo.emptyState.reset.button')}
+        </TextButton>
+      </Box>
+    ),
+  };
+
+  const getEmptyStateConfig = (): CollectionEmptyStateBaseProps<T, F> => {
+    if (!hasAvailableItems) {
+      return {
+        state: collection,
+        dataHook: 'picker-empty-state',
+      };
+    }
+    if (showFilterOnlyEmptyState) {
+      return filterOnlyEmptyStateProps;
+    }
+    if (showFilterWithSearchEmptyState) {
+      return filterWithSearchEmptyStateProps;
+    }
+
+    return searchOnlyNoResultsStateProps;
+  };
+
+  return <CollectionEmptyStateBase {...getEmptyStateConfig()} {...rest} />;
+}
+
+export const PickerEmptyState = observer(_PickerEmptyState);

package/src/components/PickerEmptyState/PickerEmptyStateContainer.tsx

@@ -0,0 +1,59 @@
+import {
+  ComputedQuery,
+  FiltersMap,
+  OptionalFiltersMap,
+  PickerState,
+} from '@wix/bex-core';
+import React, { ReactElement } from 'react';
+import { Box } from '@wix/design-system';
+import { PickerEmptyState } from './PickerEmptyState';
+import { observer } from 'mobx-react-lite';
+
+interface PickerEmptyStateContainerProps<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+> {
+  hasFilterDropdown?: boolean;
+  state: PickerState<T, F>;
+  renderEmptyState?: (params: {
+    hasAvailableItems: boolean;
+    query: ComputedQuery<F>;
+  }) => ReactElement | null | undefined;
+}
+
+function _PickerEmptyStateContainer<T, F extends FiltersMap>({
+  state,
+  renderEmptyState,
+  hasFilterDropdown,
+}: PickerEmptyStateContainerProps<T, F>) {
+  const { minContentHeight, collection } = state;
+
+  const {
+    result: { originQuery, hasAvailableItems },
+  } = collection;
+
+  return (
+    <Box direction="vertical" overflow="auto">
+      <Box
+        align="center"
+        verticalAlign="middle"
+        paddingTop="SP2"
+        paddingBottom="SP9"
+        height="100%"
+        minHeight={minContentHeight}
+      >
+        {renderEmptyState?.({
+          hasAvailableItems,
+          query: originQuery,
+        }) ?? (
+          <PickerEmptyState
+            state={state}
+            hasFilterDropdown={hasFilterDropdown}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export const PickerEmptyStateContainer = observer(_PickerEmptyStateContainer);

package/src/components/PickerEmptyState/index.ts

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

package/src/components/PickerListContent/PickerListContent.tsx

@@ -0,0 +1,126 @@
+import React, {
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useRef,
+} from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap, KeyedItem, PickerState } from '@wix/bex-core';
+import { useCollectionReachBottom } from '../useCollectionReachBottom';
+import { Box, FloatingNotification } from '@wix/design-system';
+import { InfiniteScrollLoader } from '../InfiniteScrollLoader/InfiniteScrollLoader';
+import { PickerListItemProps } from '../PickerListItemProps';
+import { TransitionGroup } from 'react-transition-group';
+import { useIsScrollTop } from '../../hooks/useIsScrollTop';
+import { Fade } from '../Fade';
+
+export interface PickerListContentProps<T, F extends FiltersMap>
+  extends HTMLAttributes<HTMLDivElement> {
+  state: PickerState<T, F>;
+  renderItem: (
+    keyedItem: KeyedItem<T>,
+    index: number,
+  ) => ReactElement<PickerListItemProps>;
+  hiddenItemsWarningText?: ReactNode;
+  spacing?: 30 | 94;
+  multiple?: boolean;
+}
+
+function _PickerListContent<T, F extends FiltersMap = FiltersMap>(
+  props: PickerListContentProps<T, F>,
+) {
+  const {
+    state,
+    renderItem,
+    hiddenItemsWarningText,
+    spacing = 30,
+    multiple,
+    ...rest
+  } = props;
+
+  const { collection, someHidden } = state;
+  const {
+    result: { keyedItems },
+  } = collection;
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const { targetRef } = useCollectionReachBottom({
+    collection,
+    containerRef: scrollRef,
+  });
+  const isScrollTop = useIsScrollTop(scrollRef);
+
+  useEffect(() => {
+    state.updateIsScrollTop(isScrollTop);
+  }, [isScrollTop]);
+
+  const notification = someHidden && hiddenItemsWarningText && (
+    <Box padding={`0 ${spacing}px 18px ${spacing}px`}>
+      <FloatingNotification
+        dataHook="floating-notification"
+        width="100%"
+        showCloseButton={false}
+        type="warning"
+        text={hiddenItemsWarningText}
+      />
+    </Box>
+  );
+
+  const listItems: ReactElement[] = keyedItems.map((keyedItem, index) => {
+    const { type: PickerListItem, props: pickerListItemProps } = renderItem(
+      keyedItem,
+      index,
+    );
+    return (
+      <PickerListItem
+        dataHook="selector-list-selector"
+        key={keyedItem.key}
+        keyedItem={keyedItem}
+        state={state}
+        multiple={multiple}
+        {...pickerListItemProps}
+      />
+    );
+  });
+
+  return (
+    <div
+      ref={scrollRef}
+      {...rest}
+      data-hook="selector-list-content"
+      style={{
+        height: 'inherit',
+        overflow: 'auto',
+        ...rest.style,
+      }}
+    >
+      {notification}
+
+      <TransitionGroup>
+        {listItems.flatMap((child, index, { length }) => {
+          return (
+            <Fade key={child.key} timeout={300}>
+              <Box direction="vertical" dataHook="picker-list-fade-item">
+                {child}
+                {index !== length - 1 && (
+                  <Box paddingLeft="SP5" paddingRight="SP5">
+                    <Box width="100%" height="1px" backgroundColor="D60" />
+                  </Box>
+                )}
+              </Box>
+            </Fade>
+          );
+        })}
+      </TransitionGroup>
+
+      <InfiniteScrollLoader
+        targetRef={targetRef}
+        state={collection}
+        size="small"
+      />
+    </div>
+  );
+}
+
+export const PickerListContent = observer(_PickerListContent);

package/src/components/PickerListContent/index.ts

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

package/src/components/PickerListItemProps.ts

@@ -0,0 +1,15 @@
+import {
+  SelectorListItem,
+  TableListItemProps,
+  TableListItemColumn,
+} from '@wix/design-system';
+import { ReactNode } from 'react';
+
+export interface PickerListItemProps
+  extends Partial<Omit<TableListItemProps, 'options'>>,
+    SelectorListItem {
+  options: (Omit<TableListItemColumn, 'value'> & {
+    value?: ReactNode;
+    end?: boolean;
+  })[];
+}

package/src/components/PickerModal/PickerModal.tsx

@@ -0,0 +1,133 @@
+import { CustomModalLayoutProps, Modal, ModalProps } from '@wix/design-system';
+import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
+import { PickerModalState } from '../../hooks';
+import { FiltersMap } from '@wix/bex-core';
+import { useReactive } from '@wix/bex-utils/react';
+import { PickerModalSplash } from '../PickerModalSplash';
+import { MultipleSelection } from '../MaxSelection';
+
+export interface PickerModalProps<T, F extends FiltersMap = FiltersMap>
+  extends Partial<CustomModalLayoutProps> {
+  /**
+   * Optional props to forward to `Modal` component
+   */
+  modalProps?: Partial<ModalProps>;
+  /** State object created with [`usePickerModal`](./?path=/story/base-components-collections-picker-hooks--usepickermodal) */
+  state: PickerModalState<T, F>;
+  /**
+   * A component to be rendered in the modal content when there's a failure fetching the data
+   * @param params
+   * @param params.err - The original failure error object
+   * @param params.isOnline - Indicates whether internet connection is available or not
+   */
+  renderError: (params: { err: unknown; isOnline: boolean }) => ReactElement;
+  /**
+   * Limits the number of items that can be selected.<br>
+   * Either a boolean or a number. A number indicates the maximum number of selections, `true` indicates no limit, `false` indicates only 1 item (radio button will be shown instead of checkboxes)
+   */
+  multiple?: MultipleSelection;
+}
+
+export function PickerModal<T, F extends FiltersMap = FiltersMap>(
+  props: PickerModalProps<T, F>,
+) {
+  const {
+    dataHook,
+    state,
+    modalProps,
+    renderError,
+    width = '618px',
+    multiple,
+    ...rest
+  } = props;
+  const {
+    _isModalOpen,
+    _customContent,
+    _isCustomContentVisible,
+    fetchPickerComponent,
+    fetchFirstPage,
+    fetchInitialProps,
+  } = state;
+
+  const isModalOpen = useReactive(_isModalOpen);
+  const fetchPickerComponentStatus = useReactive(fetchPickerComponent.status);
+  const fetchFirstPageStatus = useReactive(fetchFirstPage.status);
+  const fetchInitialPropsStatus = useReactive(fetchInitialProps.status);
+  const customContent = useReactive(_customContent);
+  const isCustomContentVisible = useReactive(_isCustomContentVisible);
+
+  useState(() => {
+    state.multipleRef.current = multiple;
+  });
+
+  useEffect(() => {
+    state.multipleRef.current = multiple;
+  }, [multiple]);
+
+  useEffect(() => {
+    state.onIsOpenChanged();
+  }, [isModalOpen]);
+
+  useEffect(() => state.init(), []);
+
+  let child: ReactNode;
+
+  if (
+    fetchPickerComponentStatus.type === 'success' &&
+    fetchFirstPageStatus.type === 'success' &&
+    fetchInitialPropsStatus.type === 'success'
+  ) {
+    const { data: PickerContentComponent } = fetchPickerComponentStatus;
+
+    child = (
+      <PickerContentComponent
+        dataHook={dataHook}
+        width="100%"
+        modalState={state}
+        renderError={renderError}
+        multiple={multiple}
+        {...rest}
+      />
+    );
+  } else {
+    child = (
+      <PickerModalSplash
+        dataHook={dataHook}
+        state={state}
+        width="100%"
+        renderError={renderError}
+        {...rest}
+        primaryButtonText={undefined}
+        secondaryButtonText={undefined}
+        primaryButtonOnClick={undefined}
+        secondaryButtonOnClick={undefined}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Modal
+        dataHook={
+          dataHook ? `${dataHook}-picker-modal` : 'picker-modal-lazy-modal'
+        }
+        onRequestClose={() => state.closeModal()}
+        {...modalProps}
+        isOpen={isModalOpen}
+      >
+        <div
+          data-wix-patterns
+          style={{ width, maxHeight: '100%', display: 'flex' }}
+        >
+          {child}
+        </div>
+      </Modal>
+
+      {customContent?.({
+        isOpen: isCustomContentVisible,
+        width,
+        close: state.onCreateNew,
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,216 @@
+import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import { PickerUniDriver } from '../Picker/Picker.uni.driver';
+import {
+  ModalUniDriver,
+  TextButtonUniDriver,
+  TextUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { PickerModalLayoutUniDriver } from './PickerModalLayout.uni.driver';
+
+export function PickerModalUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+  { dataHook }: { dataHook?: string } = {},
+) {
+  const modalBase = () =>
+    body.$(
+      dataHook
+        ? `.portal-${dataHook}-picker-modal`
+        : '.portal-picker-modal-lazy-modal',
+    );
+  const modal = () => ModalUniDriver(modalBase(), modalBase());
+
+  const layout = () => PickerModalLayoutUniDriver(modalBase(), body);
+
+  const picker = () =>
+    PickerUniDriver(modalBase().$('[data-hook="picker"]'), body);
+
+  const additionalStepDriver = () => {
+    return {
+      title: () =>
+        TextUniDriver(modalBase().$('[data-hook="title"]'), body).getText(),
+      subtitle: () =>
+        TextUniDriver(modalBase().$('[data-hook="subtitle"]'), body).getText(),
+      suffixText: () =>
+        TextUniDriver(
+          modalBase().$('[data-hook="suffix-text"]'),
+          body,
+        ).getText(),
+      suffixNode: () => modalBase().$('[data-hook="suffix-node"]'),
+    };
+  };
+
+  const getNoResultsSubtitle = () =>
+    TextUniDriver(
+      body.$('[data-hook="picker-no-results-state-subtitle"]'),
+      body,
+    );
+
+  const getNoResultsResetButton = () =>
+    TextButtonUniDriver(
+      body.$('[data-hook="picker-no-results-state-reset-button"]'),
+      body,
+    );
+
+  return {
+    ...baseUniDriverFactory(base),
+    isOpen: () => modal().isOpen(),
+    wait: (timeout?: number) => base.wait(timeout),
+    modalLayoutExists: () => layout().exists(),
+    pickerExists: () => picker().exists(),
+    waitPicker: (timeout?: number) => picker().wait(timeout),
+    waitModalClosed: (timeout?: number) =>
+      waitFor(async () => !(await picker().exists()), timeout),
+    /** Indicates whether the modal is open */
+    isModalOpen: () => modal().isOpen(),
+    /** Get the modal layout title text */
+    getTitleText: () => layout().getTitleText(),
+    /** Get the modal layout subtitle text */
+    getSubtitleText: () => layout().getSubtitleText(),
+    /** Clear the search input */
+    clearSearchTerm: () => layout().clearSearchTerm(),
+    /** Enter a value to the search input */
+    enterSearchTerm: (value: string) => layout().enterSearchTerm(value),
+    /** Get the value of the search input  */
+    getSearchTerm: () => layout().getSearchTerm(),
+    /** Get the placeholder of the search input */
+    getSearchPlaceholder: () => layout().getSearchPlaceholder(),
+    searchExists: () => layout().searchExists(),
+    waitSearchLoader: (timeout?: number) => picker().waitSearchLoader(timeout),
+    waitSearchLoaderRemoved: (timeout?: number) =>
+      picker().waitSearchLoaderRemoved(timeout),
+    floatingNotificationExists: () => picker().floatingNotificationExists(),
+    /**
+     * Get the text of the floating notification at the top of the list
+     */
+    getFloatingNotificationText: () => picker().getFloatingNotificationText(),
+    waitInitialLoader: (timeout?: number) =>
+      layout().waitInitialLoader(timeout),
+    waitInitialLoaderRemoved: (timeout?: number) =>
+      layout().waitInitialLoaderRemoved(timeout),
+
+    /** Get the number of rows currently rendered inside the selector list */
+    numberOfItemsInList: () => picker().numberOfItemsInList(),
+    /** Get the number of selected rows */
+    getTotalSelected: () => picker().getTotalSelected(),
+    /**
+     * Triggers "scroll" event on the list.
+     */
+    scrollDown: () => picker().scrollDown(),
+    /**
+     * Toggles selector of the item at the passed index.
+     * @param {number} index Item index
+     * @returns {Promise<void>} Resolves when selector is toggled.
+     */
+    toggleSelectorAt: (index: number) => picker().toggleSelectorAt(index),
+    /**
+     * Checks whether the selector of the item at the passed index is checked.
+     * @param {number} index Item index
+     * @returns {Promise<boolean>}
+     */
+    isSelectorCheckedAt: (index: number) => picker().isSelectorCheckedAt(index),
+    /**
+     * Wait for a item to be added to the list
+     * @param index
+     * @param timeout
+     */
+    waitListItemAt: (index: number, timeout?: number) =>
+      picker().waitListItemAt(index, timeout),
+    /**
+     * Get the title text of a list item
+     * @param index
+     */
+    getTitleTextAt: (index: number) => picker().getTitleTextAt(index),
+    /** Indicates whether item checkbox is in indeterminate mode  */
+    isIndeterminateAt: (index: number) => picker().isIndeterminateAt(index),
+    /**
+     * Get the sub-title text of a list item
+     * @param index
+     */
+    getSubtitleTextAt: (index: number) => picker().getSubtitleTextAt(index),
+    /**
+     * Get the image element of a list item
+     * @param index
+     */
+    getImageElementAt: (index: number) => picker().getImageElementAt(index),
+    /**
+     * Get the extra node element of a list item
+     * @param index
+     */
+    getExtraNodeElementAt: (index: number) =>
+      picker().getExtraNodeElementAt(index),
+    /**
+     * Indicates whether the initial loader of the modal is shown
+     */
+    initialLoaderExists: () => layout().initialLoaderExists(),
+
+    /** Get empty state within the modal that by a specific data hook */
+    getEmptyStateByDataHook: (dataHook: string) =>
+      picker().getEmptyStateByDataHook(dataHook),
+
+    /** Indicates whether the loader after search exists */
+    searchLoaderExists: () => picker().searchLoaderExists(),
+
+    /** Indicates whether the CTA button exists */
+    ctaButtonExists: () => layout().ctaButtonExists(),
+    /** Click the CTA button of the modal */
+    clickCTAButton: () => layout().clickCTAButton(),
+    /** Click the back button on the additional step */
+    clickBackButton: () => layout().clickBackButton(),
+    /** Get the text of the suffix content if exists on the additional step */
+    additionalStepSuffixText: () => additionalStepDriver().suffixText(),
+    /** Get the node of the suffix content if exists on the additional step */
+    additionalStepSuffixNode: () => additionalStepDriver().suffixNode(),
+    /** Get the text of the item title on the additional step */
+    additionalStepTitleText: () => additionalStepDriver().title(),
+    /** Get the text of the item subtitle on the additional step */
+    additionalStepSubtitleText: () => additionalStepDriver().subtitle(),
+    /** Click modal cancel button **/
+    clickCancelButton: () => layout().clickCancelButton(),
+    /** Get the text of the cancel button */
+    getCancelButtonText: () => layout().getCancelButtonText(),
+    /** Indicates whether the cancel button exists */
+    cancelButtonExists: () => layout().cancelButtonExists(),
+    /** Click modal close (x) button **/
+    clickCloseButton: () => layout().clickCloseButton(),
+    /** Get the text of the CTA button */
+    getCTAButtonText: () => layout().getCTAButtonText(),
+    /** Indicates whether the CTA button is disabled */
+    isCTAButtonDisabled: () => layout().isCTAButtonDisabled(),
+    /** Get the error state before the modal content is fetched */
+    getSplashErrorStateByDataHook: (dataHook: string) =>
+      layout().getErrorStateByDataHook(dataHook),
+    /** Get the error state within the modal content */
+    getErrorStateByDataHook: (dataHook: string) =>
+      picker().getEmptyStateByDataHook(dataHook),
+    customContentButtonExists: () => layout().customContentButtonExists(),
+    getCustomContentButtonText: () => layout().getCustomContentButtonText(),
+    isCustomContentButtonDisabled: () =>
+      layout().isCustomContentButtonDisabled(),
+    customContentButtonTooltipExists: () =>
+      layout().customContentButtonTooltipExists(),
+    getCustomContentButtonTooltipText: () =>
+      layout().getCustomContentButtonTooltipText(),
+    clickCustomContentButton: () => layout().clickCustomContentButton(),
+    getMaxSelectionLabelText: () => layout().getMaxSelectionLabelText(),
+    getSelectAllCheckbox: () => layout().getSelectAllCheckbox(),
+    getSelectedItemsCountText: () => layout().getSelectedItemsCountText(),
+    customNotificationExists: () => layout().customNotificationExists(),
+
+    getFilterDropdown: (filterName: string) =>
+      layout().getFilterDropdown(filterName),
+    filterDropdownExists: (filterName: string) =>
+      layout().filterDropdownExists(filterName),
+    getSelectedFilterName: (filterName: string) =>
+      layout().getSelectedFilterName(filterName),
+    selectFilterItem: (filterName: string, index: number) =>
+      layout().selectFilterItem(filterName, index),
+    selectFilterItems: (filterName: string, ids: string[]) =>
+      layout().selectFilterItems(filterName, ids),
+    getNoResultsSubtitle,
+    getNoResultsResetButton,
+  };
+}
+
+export default PickerModalUniDriver;