@wix/patterns 1.255.0 → 1.256.0

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

@@ -0,0 +1,355 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { SlidingModalUniDriver } from '../SlidingModal/SlidingModal.uni.driver';
+import {
+  AccordionUniDriver,
+  ButtonUniDriver,
+  FieldSetUniDriver,
+  FormFieldUniDriver,
+  InputUniDriver,
+  InputWithOptionsUniDriver,
+  MessageModalLayoutUniDriver,
+  MultiSelectUniDriver,
+  SidePanelUniDriver,
+  TextButtonUniDriver,
+  TextUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { CollectionDropdownFilterUniDriver } from '../DropdownFilter/CollectionDropdownFilter.uni.driver';
+import { MultiInlineCheckboxUniDriver } from '../MultiInlineCheckbox/MultiInlineCheckbox.uni.driver';
+import { DateRangePickerUniDriver } from '../DateRangePicker/DateRangeFilter.uni.driver';
+import { RadioGroupFilterUniDriver } from '../RadioGroupFilter/RadioGroupFilter.uni.driver';
+
+export const FiltersPanelUniDriver = (base: UniDriver, body: UniDriver) => {
+  const slidingModal = SlidingModalUniDriver(
+    base.$('[data-hook="cairo-side-panel-modal"]'),
+    body,
+  );
+
+  const sidePanel = SidePanelUniDriver(
+    base.$('[data-hook="filters-side-panel"]'),
+    body,
+  );
+
+  const accordionBase = base.$('[data-hook="filters-panel-accordion"]');
+
+  const accordion = AccordionUniDriver(accordionBase, body);
+
+  const getInlineCheckboxFilter = (filterName: string) =>
+    MultiInlineCheckboxUniDriver(
+      accordionBase.$(`[data-hook="collection-filter-${filterName}"]`),
+      body,
+    );
+
+  const getDateRangeFilter = (filterName: string) =>
+    DateRangePickerUniDriver(
+      accordionBase.$(`[data-hook="date-range-filter-${filterName}"]`),
+      body,
+    );
+
+  const getRadioGroupFilter = (filterName: string) =>
+    RadioGroupFilterUniDriver(
+      accordionBase.$(`[data-hook="radio-group-filter-${filterName}"]`),
+      body,
+    );
+
+  const getAccordionItemTitle = (filterName: string) =>
+    accordionBase.$(`[data-hook="accordion-item-title-${filterName}"]`);
+
+  const getAccordionItem = async (filterName: string) => {
+    const items = accordionBase.$$('[data-hook="accordion-item"]');
+
+    const count = await items.count();
+    for (let i = 0; i < count; i++) {
+      const item = items.get(i);
+      if (
+        await item
+          .$(`[data-hook="accordion-item-title-${filterName}"]`)
+          .exists()
+      ) {
+        return item;
+      }
+    }
+
+    throw new Error(`Accordion item for filter: "${filterName}" was not found`);
+  };
+
+  const getAccordionItemAt = (index: number) =>
+    accordionBase.$$('[data-hook="accordion-item"]').get(index);
+
+  const isFilterExpanded = async (filterName: string) =>
+    (await getAccordionItem(filterName)).$('[data-hook="children"]').exists();
+
+  const isFilterExpandedAt = (index: number) =>
+    getAccordionItemAt(index).$('[data-hook="children"]').exists();
+
+  const clickFilter = async (filterName: string) => {
+    if (!(await isFilterExpanded(filterName))) {
+      await clickFilterTitle(filterName);
+    }
+  };
+  const checkFilterInlineCheckboxes = async (
+    filterName: string,
+    ids: string[],
+    {
+      closePanel = true,
+      closeAccordionItem = true,
+    }: { closePanel?: boolean; closeAccordionItem?: boolean } = {},
+  ) => {
+    await clickFilter(filterName);
+    await getInlineCheckboxFilter(filterName).checkOptions(ids);
+
+    if (closeAccordionItem) {
+      await clickFilterTitle(filterName);
+    }
+
+    if (closePanel) {
+      await sidePanel.clickClose();
+    }
+  };
+
+  const chooseDatesFilterDateRange = async (
+    filterName: string,
+    {
+      dates = undefined,
+      closePanel = true,
+      closeAccordionItem = true,
+    }: {
+      closePanel?: boolean;
+      closeAccordionItem?: boolean;
+      dates?: Date[];
+    } = {},
+  ) => {
+    await clickFilter(filterName);
+    const dateRange = await getDateRangeFilter(filterName);
+    let datesResult;
+    if (dates && dates.length > 1) {
+      const from = await dateRange.chooseDate('from', dates[0]);
+      const to = await dateRange.chooseDate('to', dates[1]);
+      datesResult = { from, to };
+    } else {
+      datesResult = await dateRange.chooseRandomDates();
+    }
+
+    if (closeAccordionItem) {
+      await clickFilterTitle(filterName);
+    }
+
+    if (closePanel) {
+      await sidePanel.clickClose();
+    }
+    return datesResult;
+  };
+
+  const getInputWithOptionsDriver = (filterName: string) => {
+    const dataHook = `collection-filter-${filterName}`;
+
+    const optionsBase = accordionBase.$(
+      `[data-hook="collection-filter-${filterName}"]`,
+    );
+
+    const inputWithOptionsDriver = InputWithOptionsUniDriver(optionsBase, body);
+
+    return CollectionDropdownFilterUniDriver(
+      inputWithOptionsDriver,
+      dataHook,
+      optionsBase,
+      body,
+    );
+  };
+
+  const selectFilterOptions = async (
+    filterName: string,
+    ids: string[],
+    {
+      closePanel = true,
+      closeAccordionItem = true,
+      closeDropdown = true,
+    }: {
+      closePanel?: boolean;
+      closeAccordionItem?: boolean;
+      closeDropdown?: boolean;
+    } = {},
+  ) => {
+    if (!(await isFilterExpanded(filterName))) {
+      await clickFilterTitle(filterName);
+    }
+
+    await getInputWithOptionsDriver(filterName).selectOptions(ids, {
+      closeDropdown,
+    });
+
+    if (closeAccordionItem) {
+      await clickFilterTitle(filterName);
+    }
+
+    if (closePanel) {
+      await sidePanel.clickClose();
+    }
+  };
+
+  const selectFilterRandomOptions = async (
+    filterName: string,
+    count: number,
+    {
+      closePanel = true,
+      closeAccordionItem = true,
+      closeDropdown = true,
+    }: {
+      closePanel?: boolean;
+      closeAccordionItem?: boolean;
+      closeDropdown?: boolean;
+    } = {},
+  ) => {
+    if (!(await isFilterExpanded(filterName))) {
+      await clickFilterTitle(filterName);
+    }
+
+    const ids = await getInputWithOptionsDriver(filterName).selectRandomOptions(
+      count,
+      {
+        closeDropdown,
+      },
+    );
+
+    if (closeAccordionItem) {
+      await getAccordionItemTitle(filterName).click();
+    }
+
+    if (closePanel) {
+      await sidePanel.clickClose();
+    }
+
+    return ids;
+  };
+
+  const getFilterTitleText = (filterName: string) =>
+    TextUniDriver(getAccordionItemTitle(filterName), body).getText();
+
+  const getFilterAppliedText = () =>
+    TextUniDriver(body.$('[data-hook="applied-filters"]'), body).getText();
+
+  const clickFilterTitle = (filterName: string) =>
+    getAccordionItemTitle(filterName).click();
+
+  const getCustomFilter = async <E, T>(
+    filterName: string,
+    fn: (element: E) => T,
+  ) => {
+    if (!(await isFilterExpanded(filterName))) {
+      await clickFilterTitle(filterName);
+    }
+
+    return fn(await accordion.element());
+  };
+
+  const clickClearAllFilters = () => getClearAllFiltersButton().click();
+
+  const getClearAllFiltersButton = () =>
+    TextButtonUniDriver(base.$('[data-hook="clear-all-filters"]'), body);
+
+  const getPanelFiltersCount = () => {
+    const items = accordionBase.$$('[data-hook="accordion-item"]');
+    return items.count();
+  };
+
+  const getItemTextAt = (index: number) => {
+    return accordionBase.$$(':scope > div').get(index).text();
+  };
+
+  const getItemsCount = () => {
+    return accordionBase.$$(':scope > div').count();
+  };
+
+  return {
+    isOpen: slidingModal.isOpen,
+    clickCloseButton: sidePanel.clickClose,
+    getTitleText: sidePanel.getTitleText,
+    selectFilterOptions,
+    selectFilterRandomOptions,
+    checkFilterInlineCheckboxes,
+    chooseDatesFilterDateRange,
+    getFilterTitleText,
+    getFilterAppliedText,
+    clickFilterTitle,
+    isFilterExpanded,
+    isFilterExpandedAt,
+    getCustomFilter,
+    getInputWithOptionsDriver,
+    clickClearAllFilters,
+    getClearAllFiltersButton,
+    getPanelFiltersCount,
+    getDateRangeFilter,
+
+    getNumberRangeDriver: (filterName: string) => {
+      const getNumberRangeFilter = () =>
+        accordionBase.$(`[data-hook="number-range-filter-${filterName}"]`);
+
+      const getNumberRangeFilterFromInput = () =>
+        InputUniDriver(
+          getNumberRangeFilter().$(
+            '[data-hook="number-range-filter-from-input"]',
+          ),
+          body,
+        );
+
+      const getNumberRangeFilterToInput = () =>
+        InputUniDriver(
+          getNumberRangeFilter().$(
+            '[data-hook="number-range-filter-to-input"]',
+          ),
+          body,
+        );
+
+      const getNumberRangeFilterFromError = () => {
+        const fieldsetDriver = FieldSetUniDriver(getNumberRangeFilter(), body);
+        return {
+          exists: () => fieldsetDriver.hasStatus('error'),
+          getText: () => fieldsetDriver.getStatusMessage(),
+        };
+      };
+
+      const getNumberRangeFilterToError = () => {
+        const formField = FormFieldUniDriver(
+          getNumberRangeFilter().$(
+            '[data-hook="number-range-filter-to-form-field"]',
+          ),
+          body,
+        );
+        return {
+          exists: () => formField.hasStatus('error'),
+          getText: () => formField.getStatusMessage(),
+        };
+      };
+
+      return {
+        getNumberRangeFilter,
+        getNumberRangeFilterFromInput,
+        getNumberRangeFilterToInput,
+        getNumberRangeFilterFromError,
+        getNumberRangeFilterToError,
+      };
+    },
+    getRadioGroupFilter,
+    getItemTextAt,
+    getItemsCount,
+    applyButton: () =>
+      ButtonUniDriver(base.$('[data-hook="apply-button"]'), body),
+    discardChangesModal: () =>
+      MessageModalLayoutUniDriver(
+        body.$('[data-hook="discard-changes-modal"]'),
+        body,
+      ),
+    getFiltersPanelMultiSelect: (filterName: string) =>
+      MultiSelectUniDriver(
+        accordionBase.$(`[data-hook="collection-filter-${filterName}"]`),
+        base,
+      ),
+    _getAccordionItemTitle: (
+      filterName: string,
+      { index = 0 }: { index?: number } = {},
+    ) =>
+      accordionBase
+        .$$(`[data-hook="accordion-item-title-${filterName}"]`)
+        .get(index),
+    _getInlineCheckboxFilter: getInlineCheckboxFilter,
+  };
+};

package/src/components/FiltersPanel/FiltersPanelAppliedFiltersSection.tsx

@@ -0,0 +1,65 @@
+import { Box, Text, TextButton } from '@wix/design-system';
+import React from 'react';
+import { ToolbarCollectionState } from '../../state';
+import { FiltersMap } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { runInAction } from 'mobx';
+
+export interface FiltersPanelAppliedFiltersSectionProps<
+  T,
+  F extends FiltersMap,
+> {
+  state: ToolbarCollectionState<T, F>;
+  onClearButtonClicked?: () => unknown;
+}
+
+function _FiltersPanelAppliedFiltersSection<T, F extends FiltersMap>(
+  props: FiltersPanelAppliedFiltersSectionProps<T, F>,
+) {
+  const { state, onClearButtonClicked } = props;
+
+  const { collection } = state;
+
+  const { translate: t, query } = collection;
+  const { nonPersistentCustomFiltersCount } = query;
+
+  return (
+    <>
+      <Text weight="bold" dataHook="applied-filters" size="small">
+        {t('cairo.appliedFilters', {
+          num: nonPersistentCustomFiltersCount,
+        })}
+      </Text>
+
+      <Box align="right" flex={1}>
+        <TextButton
+          dataHook="clear-all-filters"
+          size="small"
+          onClick={() => {
+            runInAction(() => {
+              const {
+                query: { nonPersistentCustomFilters },
+              } = collection;
+              collection.emitter.emit('beforeClearFilters', {
+                origin: 'sidebar',
+              });
+              nonPersistentCustomFilters
+                .filter((filter) => !filter._hideFromToolbar)
+                .forEach((filter) => {
+                  filter?.reset({ emitEvents: ['change', 'refresh'] });
+                });
+            });
+            onClearButtonClicked?.();
+          }}
+          disabled={!nonPersistentCustomFiltersCount}
+        >
+          {t('cairo.clear')}
+        </TextButton>
+      </Box>
+    </>
+  );
+}
+
+export const FiltersPanelAppliedFiltersSection = observer(
+  _FiltersPanelAppliedFiltersSection,
+);

package/src/components/FiltersPanel/FiltersPanelContext.tsx

@@ -0,0 +1,15 @@
+import { createContext, ReactNode, useContext } from 'react';
+import { FilterElement } from '../CollectionToolbarFilters';
+import { SlidingModalProps } from '../SlidingModal';
+
+export interface IFiltersPanelContext {
+  filters: FilterElement[];
+  className?: SlidingModalProps['className'];
+  title?: string | ReactNode;
+  onClearButtonClicked?: () => unknown;
+}
+
+export const FiltersPanelContext = createContext<IFiltersPanelContext>({
+  filters: [],
+});
+export const useFiltersPanelContext = () => useContext(FiltersPanelContext);

package/src/components/FiltersPanel/FiltersPanelFooter.tsx

@@ -0,0 +1,44 @@
+import { Box } from '@wix/design-system';
+import React from 'react';
+import { ToolbarCollectionState } from '../../state';
+import { FiltersMap } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { FiltersPanelAppliedFiltersSection } from './FiltersPanelAppliedFiltersSection';
+
+export interface FiltersPanelFooterProps<T, F extends FiltersMap> {
+  state: ToolbarCollectionState<T, F>;
+  onClearButtonClicked?: () => unknown;
+}
+
+function _FiltersPanelFooter<T, F extends FiltersMap>(
+  props: FiltersPanelFooterProps<T, F>,
+) {
+  const { state, onClearButtonClicked } = props;
+
+  const FiltersPanelSelectedFiltersSection =
+    state.AddApplyFiltersButton?.FiltersPanelSelectedFiltersSection;
+
+  return (
+    <Box
+      gap="SP2"
+      paddingTop="SP3"
+      paddingBottom="SP3"
+      paddingLeft="SP4"
+      paddingRight="SP4"
+      verticalAlign="middle"
+      width="100%"
+      boxSizing="border-box"
+    >
+      {FiltersPanelSelectedFiltersSection ? (
+        <FiltersPanelSelectedFiltersSection state={state} />
+      ) : (
+        <FiltersPanelAppliedFiltersSection
+          state={state}
+          onClearButtonClicked={onClearButtonClicked}
+        />
+      )}
+    </Box>
+  );
+}
+
+export const FiltersPanelFooter = observer(_FiltersPanelFooter);

package/src/components/FiltersPanel/FiltersPanelSelectedFiltersSection.tsx

@@ -0,0 +1,76 @@
+import { Box, Button, Text, TextButton } from '@wix/design-system';
+import React, { useEffect } from 'react';
+import { ToolbarCollectionState } from '../../state';
+import { FiltersMap } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface FiltersPanelSelectedFiltersSectionProps<
+  T,
+  F extends FiltersMap,
+> {
+  state: ToolbarCollectionState<T, F>;
+  onClearButtonClicked?: () => unknown;
+}
+
+function _FiltersPanelSelectedFiltersSection<T, F extends FiltersMap>(
+  props: FiltersPanelSelectedFiltersSectionProps<T, F>,
+) {
+  const { state } = props;
+
+  const container = useWixPatternsContainer();
+
+  const { translate: t } = container;
+
+  const { pendingQuery } = state;
+
+  useEffect(() => pendingQuery?.init(), []);
+
+  if (pendingQuery == null) {
+    return null;
+  }
+
+  const { trackedFiltersCount, hasChanged } = pendingQuery;
+
+  return (
+    <>
+      <Text weight="bold" dataHook="applied-filters" size="small">
+        {hasChanged
+          ? t('cairo.appliedFilters.selected', {
+              num: trackedFiltersCount,
+            })
+          : t('cairo.appliedFilters', {
+              num: trackedFiltersCount,
+            })}
+      </Text>
+
+      <TextButton
+        dataHook="clear-all-filters"
+        size="small"
+        onClick={() => {
+          pendingQuery.clearSelected();
+        }}
+        disabled={!trackedFiltersCount}
+      >
+        {t('cairo.clear')}
+      </TextButton>
+
+      <Box align="right" flex={1}>
+        <Button
+          dataHook="apply-button"
+          ellipsis
+          disabled={!hasChanged}
+          onClick={() => {
+            pendingQuery.apply();
+          }}
+        >
+          {t('cair.appliedFilters.Apply.CTA')}
+        </Button>
+      </Box>
+    </>
+  );
+}
+
+export const FiltersPanelSelectedFiltersSection = observer(
+  _FiltersPanelSelectedFiltersSection,
+);

package/src/components/FiltersPanel/FiltersPanelState.ts

@@ -0,0 +1,36 @@
+import { ToolbarCollectionState } from '../../state';
+import { FiltersMap, withoutDefaults } from '@wix/bex-core';
+import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
+import { action } from 'mobx';
+
+export interface FiltersPanelStateParams<T, F extends FiltersMap> {
+  readonly toolbar: ToolbarCollectionState<T, F>;
+}
+
+export class FiltersPanelState<T, F extends FiltersMap> {
+  readonly toolbar;
+
+  constructor(params: FiltersPanelStateParams<T, F>) {
+    this.toolbar = params.toolbar;
+  }
+
+  onCloseButtonClick = action(async () => {
+    const { reportBi, panels, pendingQuery } = this.toolbar;
+
+    const result = await pendingQuery?.onCloseFiltersPanelClick();
+
+    if (result === 'dismissed') {
+      return;
+    }
+
+    panels.closeSidePanel();
+    reportBi(
+      withoutDefaults(cairoFiltersPanelUsed)({
+        ...this.toolbar._commonDynamicBiParams(),
+        origin: 'X Button',
+        isOpened: false,
+        feature: 'Filter',
+      }),
+    );
+  });
+}

package/src/components/FiltersPanel/index.ts

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

package/src/components/FolderIcon.tsx

@@ -0,0 +1,23 @@
+import React, { memo, SVGAttributes } from 'react';
+
+export interface FolderIconProps extends SVGAttributes<SVGElement> {}
+
+export const FolderIcon = memo(function FolderIcon(props: FolderIconProps) {
+  return (
+    <svg
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M15.0751 10.8334C15.1917 10.9834 15.3084 11.1334 15.4084 11.2917L17.1584 14.0667H34.1667V10.8334H15.0751Z"
+        fill="#116DFF"
+      />
+      <path
+        d="M17.1333 14.025L15.3833 11.1C14.3604 9.38619 12.5125 8.33564 10.5166 8.33337H5.78326V31.6667H34.1666V14.025H17.1333Z"
+        fill="#C2E2FF"
+      />
+    </svg>
+  );
+});

package/src/components/FormFieldInput/FormFieldInput.tsx

@@ -0,0 +1,71 @@
+import React, { ComponentType } from 'react';
+import {
+  BaseInputProps,
+  Checkbox,
+  DateInput,
+  DateTime,
+  Dropdown,
+  LongText,
+  Number,
+  ShortText,
+} from '../../fields';
+import { CustomField, CustomFieldType } from '@wix/bex-core';
+import { CustomFieldsFormState } from '../../state';
+import { Url } from '../../fields/Url';
+
+type InputElements = {
+  [fieldType in CustomFieldType]: ComponentType<BaseInputProps<any>>;
+};
+
+export const EDITABLE_INPUT_ELEMENTS = {
+  dropdown: Dropdown,
+  checkbox: Checkbox,
+  shortText: ShortText,
+  longText: LongText,
+  date: DateInput,
+  dateTime: DateTime,
+  integer: Number,
+  decimal: Number,
+  url: Url,
+};
+
+const INPUT_ELEMENTS: InputElements = {
+  ...EDITABLE_INPUT_ELEMENTS,
+  files: () => null, // not supported
+  multiSelect: () => null, // not supported
+};
+
+export interface FormFieldInputProps {
+  dataHook?: string;
+  state: CustomFieldsFormState;
+  initialValue?: any;
+  schema: CustomField;
+  onChange: (newValue: any) => void;
+  inputRef?: BaseInputProps<any>['inputRef'];
+}
+
+export const FormFieldInput = ({
+  dataHook,
+  state,
+  schema,
+  initialValue,
+  onChange,
+  inputRef,
+}: FormFieldInputProps) => {
+  if (INPUT_ELEMENTS.hasOwnProperty(schema.type)) {
+    const FieldInput = INPUT_ELEMENTS[schema.type];
+
+    return (
+      <FieldInput
+        dataHook={dataHook}
+        state={state}
+        initialValue={initialValue}
+        schema={schema}
+        onChange={(newValue) => onChange(newValue)}
+        inputRef={inputRef}
+      />
+    );
+  }
+
+  return null;
+};

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

@@ -0,0 +1,6 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import FieldUniDriver from '../../fields/Field/Field.uni.driver';
+
+export default (base: UniDriver, body: UniDriver) => {
+  return FieldUniDriver(base, body);
+};

package/src/components/FormFieldInput/index.ts

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