@wix/patterns 1.255.0 → 1.256.0

package/src/components/ActionControl/ActionSubItemProps.tsx

@@ -0,0 +1,67 @@
+import { IconElement, PopoverMenuProps } from '@wix/design-system';
+
+export type ActionSubitem = {
+  /**
+   * A callback that runs each time the button is clicked.
+   * @external
+   */
+  onClick?: any;
+  /**
+   * Button label.
+   * @external
+   */
+  label?: string;
+  /**
+   * Button subtitle. Relevant for buttons inside the popover.
+   * @external
+   */
+  subtitle?: string;
+  /**
+   * An optional Icon prefix.
+   * @external
+   */
+  prefixIcon?: IconElement;
+  /**
+   * An optional tooltip when the popover is disabled.
+   * @external
+   */
+  tooltip?: string;
+  /**
+   * An optional disabled flag.
+   * @external
+   */
+  disabled?: boolean;
+  /**
+   *  A data-hook for the button.
+   * @external
+   */
+  dataHook?: string;
+  /**
+   * A unique name for cairoPageCtaClicked BI event. For example: 'edit'.
+   */
+  biName?: string;
+  /**
+   * Additional info for cairoPageCtaClicked BI event.
+   */
+  biAdditionalInfo?: string;
+  /**
+   * Array of action items to render in a popover menu. Actions can be grouped by using an array of arrays, and a divider will be added between each group.
+   * @overrideType [ActionSubitem[]](./?path=/story/common-types--actionsubitem) | [ActionSubitem[][]](./?path=/story/common-types--actionsubitem)
+   * @external
+   */
+  subItems?: ActionSubitem[] | ActionSubitem[][];
+  /**
+   * Custom [PopoverMenuProps](https://www.docs.wixdesignsystem.com/?path=/story/components-overlays--popovermenu) to pass to the sub-items popover menu
+   * @external
+   */
+  popoverMenuProps?: Partial<PopoverMenuProps>;
+};
+
+export type MultiBulkActionSubItem = ActionSubitem;
+
+export type ActionSubItemPrivate = Omit<ActionSubitem, 'subItems'> & {
+  subItems?: (ActionSubitem & {
+    componentId?: string;
+    appId?: string;
+  })[][];
+};

package/src/components/ActionControl/index.ts

@@ -0,0 +1,4 @@
+export * from './ActionSubItemProps';
+export * from './ActionButton';
+export * from './ActionPopover';
+export * from './ActionControl';

package/src/components/ActionModal/CustomActionModal.tsx

@@ -0,0 +1,64 @@
+import {
+  CustomModalLayout,
+  CustomModalLayoutProps,
+  ModalProps,
+  Text,
+  TableActionCellSecondaryAction,
+} from '@wix/design-system';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ModalWrapper } from '../CollectionModal';
+import { ConditionalModalState } from '@wix/bex-core';
+
+export interface CustomActionModalProps
+  extends Partial<CustomModalLayoutProps> {
+  state: ConditionalModalState<unknown>;
+  onAfterClose?: ModalProps['onAfterClose'];
+  actionProps?: Partial<TableActionCellSecondaryAction>;
+}
+
+function _CustomActionModal({
+  state,
+  content,
+  onAfterClose,
+  primaryButtonOnClick,
+  secondaryButtonOnClick,
+  onCloseButtonClick,
+  ...rest
+}: CustomActionModalProps) {
+  const { modal } = state;
+
+  return (
+    <ModalWrapper
+      state={modal}
+      onAfterClose={() => {
+        state.afterClose();
+        onAfterClose?.();
+      }}
+    >
+      <CustomModalLayout
+        dataHook="collection-action-modal"
+        {...rest}
+        onCloseButtonClick={(e) => {
+          modal.close();
+          onCloseButtonClick?.(e);
+        }}
+        primaryButtonOnClick={() => {
+          modal.confirm();
+          primaryButtonOnClick?.();
+        }}
+        secondaryButtonOnClick={
+          rest.secondaryButtonText
+            ? () => {
+                modal.decline();
+                secondaryButtonOnClick?.();
+              }
+            : undefined
+        }
+        content={typeof content === 'string' ? <Text>{content}</Text> : content}
+      />
+    </ModalWrapper>
+  );
+}
+
+export const CustomActionModal = observer(_CustomActionModal);

package/src/components/ActionModal/MessageActionModal.tsx

@@ -0,0 +1,73 @@
+import {
+  MessageModalLayout,
+  ModalProps,
+  Text,
+  MessageModalLayoutProps,
+  TableActionCellSecondaryAction,
+} from '@wix/design-system';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ModalWrapper } from '../CollectionModal';
+import { ConditionalModalState } from '@wix/bex-core';
+
+export interface MessageActionModalProps
+  extends Partial<MessageModalLayoutProps> {
+  state: ConditionalModalState<unknown>;
+  onAfterClose?: ModalProps['onAfterClose'];
+  /**
+   * A [TableActionCellSecondaryAction](https://www.docs.wixdesignsystem.com/?activeTab=API&path=%2Fstory%2Fcomponents-api-components--tableactioncell) object to customize the "Delete" secondary action.<br>
+   */
+  actionProps?: Partial<TableActionCellSecondaryAction>;
+}
+
+function _MessageActionModal({
+  state,
+  content,
+  onAfterClose,
+  primaryButtonOnClick,
+  secondaryButtonOnClick,
+  onCloseButtonClick,
+  ...rest
+}: MessageActionModalProps) {
+  const { modal } = state;
+
+  return (
+    <ModalWrapper
+      state={modal}
+      onAfterClose={() => {
+        state.afterClose();
+        onAfterClose?.();
+      }}
+    >
+      <MessageModalLayout
+        dataHook="collection-action-modal"
+        {...rest}
+        onCloseButtonClick={(e) => {
+          modal.close();
+          onCloseButtonClick?.(e);
+        }}
+        primaryButtonOnClick={() => {
+          modal.confirm();
+          primaryButtonOnClick?.();
+        }}
+        secondaryButtonOnClick={
+          rest.secondaryButtonText
+            ? () => {
+                modal.decline();
+                secondaryButtonOnClick?.();
+              }
+            : undefined
+        }
+        content={
+          typeof content === 'string' ? (
+            <Text dataHook="action-modal-content">{content}</Text>
+          ) : (
+            content
+          )
+        }
+      />
+    </ModalWrapper>
+  );
+}
+
+export const MessageActionModal = observer(_MessageActionModal);

package/src/components/ActionModal/index.ts

@@ -0,0 +1,2 @@
+export * from './MessageActionModal';
+export * from './CustomActionModal';

package/src/components/AppliedFiltersTagList/AppliedFiltersTagList.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react';
+import { TagList } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { AppliedFiltersTagListState } from './AppliedFiltersTagListState';
+import { FiltersMap } from '@wix/bex-core';
+
+export interface AppliedFiltersTagListProps<T, F extends FiltersMap> {
+  state: AppliedFiltersTagListState<T, F>;
+  onClearButtonClicked?: () => unknown;
+}
+
+function _AppliedFiltersTagList<T, F extends FiltersMap>(
+  props: AppliedFiltersTagListProps<T, F>,
+) {
+  const { state, onClearButtonClicked, ...rest } = props;
+
+  const { table, tags } = state;
+  const { collection } = table;
+
+  const { translate: t } = collection;
+
+  const tagsMap = useMemo(
+    () => new Map(tags.map((tag) => [tag.id, tag])),
+    [tags],
+  );
+
+  return (
+    <TagList
+      dataHook="active-filter-tags"
+      tags={tags}
+      onTagRemove={(tagId) => {
+        const tag = tagsMap.get(tagId);
+        if (tag != null) {
+          const { values, filter, filterProps } = tag;
+          state._reportFilterToggleBiOnNextResult(filter, values);
+
+          filter.remove(values, {
+            emitEvents: ['change', 'refresh'],
+          });
+
+          values.forEach((value) => {
+            filterProps?.onAppliedFilterTagRemove?.(value);
+          });
+        }
+      }}
+      size="small"
+      maxVisibleTags={Infinity}
+      actionButton={{
+        label: t('cairo.clear'),
+        onClick: () => {
+          state.onClearButtonClick();
+          onClearButtonClicked?.();
+        },
+      }}
+      {...rest}
+    />
+  );
+}
+
+export const AppliedFiltersTagList = observer(_AppliedFiltersTagList);

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

@@ -0,0 +1,38 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  TagListUniDriver,
+  TagUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export function AppliedFiltersTagListUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const tagList = TagListUniDriver(
+    base.$('[data-hook="active-filter-tags"]'),
+    body,
+  );
+
+  const getAppliedFilterTag = (filterName: string, id?: string) =>
+    TagUniDriver(
+      base.$(`[data-hook="${filterName}${id ? `-${id}` : ''}"]`),
+      body,
+    );
+
+  const appliedFilterTagExists = (filterName: string, id?: string) =>
+    getAppliedFilterTag(filterName, id).exists();
+
+  const getAppliedFilterTagText = (filterName: string, id?: string) =>
+    getAppliedFilterTag(filterName, id).getLabel();
+
+  const removeAppliedFilterTag = (filterName: string, id?: string) =>
+    getAppliedFilterTag(filterName, id).removeTag();
+
+  return {
+    ...tagList,
+    getAppliedFilterTagText,
+    removeAppliedFilterTag,
+    appliedFilterTagExists,
+    getAppliedFilterTag,
+  };
+}

package/src/components/AppliedFiltersTagList/AppliedFiltersTagListState.tsx

@@ -0,0 +1,204 @@
+import {
+  CollectionState,
+  Filter,
+  FilterItem,
+  FiltersMap,
+  withoutDefaults,
+} from '@wix/bex-core';
+import { cairoFilterToggled } from '@wix/bex-core/bi';
+import { action, computed, makeObservable } from 'mobx';
+import { ToolbarCollectionState } from '../../state';
+import { EventEmitter } from 'events';
+import { TypedEmitter } from '@wix/bex-core/events';
+import { addEventListener } from '@wix/bex-core/util';
+import groupBy from 'lodash/groupBy';
+import { FilterTagContent } from './FilterTagContent';
+import React from 'react';
+import { FilterProps } from '../../model';
+
+export interface FilterTagValue<V> {
+  id: string;
+  filter: Filter<V>;
+  value: FilterItem<V>;
+}
+
+export interface AppliedFiltersTagListStateParams<T, F extends FiltersMap> {
+  readonly table: ToolbarCollectionState<T, F>;
+}
+
+export class AppliedFiltersTagListState<T, F extends FiltersMap> {
+  readonly table;
+  readonly events = new EventEmitter() as TypedEmitter<{
+    fetch: (collection: CollectionState<unknown, {}>) => () => unknown;
+  }>;
+
+  maxWidth = '408px';
+  constructor(params: Readonly<AppliedFiltersTagListStateParams<T, F>>) {
+    this.table = params.table;
+
+    makeObservable(this, {
+      filterValues: computed,
+      tags: computed,
+      filterPropsMap: computed,
+    });
+  }
+
+  init() {
+    const {
+      multi: { collections },
+    } = this.table;
+
+    const disposers = [
+      ...collections.map((collection) =>
+        addEventListener(collection.emitter, 'fetch', () => {
+          const ls = this.events.listeners('fetch').map((l) => l(collection));
+          return () => {
+            ls.forEach((l) => l());
+          };
+        }),
+      ),
+    ];
+
+    return () => {
+      disposers.forEach((d) => d());
+    };
+  }
+
+  get filterPropsMap() {
+    const {
+      table: { filtersProps },
+    } = this;
+
+    return new Map(
+      filtersProps?.map((filterProps) => [filterProps.filter, filterProps]) ??
+        [],
+    );
+  }
+
+  toTag<V>(key: string, filter: Filter<V>) {
+    const { filterPropsMap } = this;
+    const { value: filterValue } = filter;
+
+    const explodeTags = filterPropsMap.get(filter)?.explodeTags;
+
+    return filter.toArray.map((value) => ({
+      id:
+        Array.isArray(filterValue) || explodeTags
+          ? `${key}-${filter.itemKey(value)}`
+          : key,
+      filter,
+      value,
+    }));
+  }
+
+  get filterValues() {
+    const {
+      table: { activeFiltersEntries },
+    } = this;
+
+    return activeFiltersEntries
+      .filter(([_, filter]) => !filter._hideFromToolbar)
+      .flatMap(([key, filter]) => this.toTag(key, filter));
+  }
+
+  get tags() {
+    const { filterValues, filterPropsMap } = this;
+    const groupedFilters = groupBy(filterValues, 'filter.name');
+
+    return Object.entries(groupedFilters).flatMap(([_, filterValuesGroup]) => {
+      const filterProps = filterPropsMap.get(filterValuesGroup[0].filter);
+
+      if (filterProps?.renderToolbarTag) {
+        return this.generateNonAggregatedTag(filterValuesGroup, filterProps);
+      }
+
+      return this.generateAggregatedTag(filterValuesGroup, filterProps);
+    });
+  }
+
+  _reportFilterToggleBiOnNextResult<V>(
+    filter: Filter<V>,
+    values: FilterItem<V>[],
+  ) {
+    const filterValuesKeys = values.map((value) => filter.itemKey(value));
+
+    const { table, events } = this;
+    const { reportBi } = table;
+
+    const onFetch = (collection: CollectionState<unknown>) => {
+      events.off('fetch', onFetch);
+
+      return action(() => {
+        reportBi(
+          withoutDefaults(cairoFilterToggled)({
+            ...table._commonDynamicBiParams(),
+            ...collection._commonDynamicBiParams(),
+            actionType: 'remove',
+            origin: 'sub-toolbar',
+            filterName: filter.name,
+            filterValue: filterValuesKeys.join(),
+            numFiltersActive: collection.query.activeFiltersCount,
+            filteredListSize: collection.result.total,
+            isCustomField: !!filter.isCustomField,
+          }),
+        );
+      });
+    };
+
+    events.on('fetch', onFetch);
+  }
+
+  onClearButtonClick = action(() => {
+    const { table } = this;
+    const { collection } = table;
+    const {
+      query: { nonPersistentFilters },
+    } = collection;
+    collection.emitter.emit('beforeClearFilters', { origin: 'toolbar' });
+    nonPersistentFilters
+      .filter((filter) => !filter._hideFromToolbar)
+      .forEach((filter) => {
+        filter?.reset({ emitEvents: ['change', 'refresh'] });
+      });
+  });
+
+  private generateNonAggregatedTag<V>(
+    filterValuesGroup: FilterTagValue<V>[],
+    filterProps?: FilterProps<V>,
+  ) {
+    return filterValuesGroup.map(({ id, filter, value }) => {
+      return {
+        children: filter.itemName(value),
+        key: id,
+        filterProps,
+        id,
+        dataHook: id,
+        filter,
+        values: [value],
+        maxWidth: this.maxWidth,
+        ...filterProps?.renderToolbarTag?.(value),
+      };
+    });
+  }
+
+  private generateAggregatedTag<V>(
+    filterValuesGroup: FilterTagValue<V>[],
+    filterProps?: FilterProps<V>,
+  ) {
+    return {
+      children: (
+        <FilterTagContent
+          filterProps={filterProps}
+          values={filterValuesGroup}
+        />
+      ),
+      key: filterProps?.filter.name!,
+      filterProps,
+      id: filterProps?.filter.name!,
+      dataHook: filterProps?.filter.name!,
+      filter: filterValuesGroup[0].filter,
+      values: filterValuesGroup.map(({ value }) => value),
+      maxWidth: this.maxWidth,
+    };
+  }
+}

package/src/components/AppliedFiltersTagList/FilterTagContent.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FilterTagValue } from './AppliedFiltersTagListState';
+import { FilterProps } from '../../model';
+
+export function FilterTagContent<V>({
+  filterProps,
+  values,
+}: {
+  filterProps?: FilterProps<V>;
+  values: FilterTagValue<V>[];
+}) {
+  const filterName =
+    filterProps?.toolbarTagProps?.label ??
+    filterProps?.accordionItemProps?.label;
+
+  return (
+    <>
+      {filterName && (
+        <span style={{ fontWeight: 530 }}>{`${filterName}: `}</span>
+      )}
+      {values
+        .map(({ filter, value }: FilterTagValue<V>) => filter.itemName(value))
+        .join(', ')}
+    </>
+  );
+}

package/src/components/AppliedFiltersTagList/index.ts

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

package/src/components/AutoCompleteFilter/AutoCompleteFilter.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import {
+  CollectionAutoComplete,
+  CollectionAutoCompleteProps,
+} from '../CollectionAutoComplete';
+import { FilterTranslationProvider } from '../../providers';
+
+export interface AutoCompleteFilterProps<V, F extends FiltersMap>
+  extends Omit<
+    CollectionAutoCompleteProps<V, F>,
+    'noResultsText' | 'emptyStateText'
+  > {}
+
+function _AutoCompleteFilter<V, F extends FiltersMap>(
+  props: Omit<
+    AutoCompleteFilterProps<V, F>,
+    'emptyStateText' | 'noResultsText'
+  >,
+) {
+  return (
+    <FilterTranslationProvider>
+      <CollectionAutoComplete {...props} />
+    </FilterTranslationProvider>
+  );
+}
+
+export const AutoCompleteFilter = observer(_AutoCompleteFilter);

package/src/components/AutoCompleteFilter/AutoCompleteFilterState.ts

@@ -0,0 +1,97 @@
+import {
+  DropdownCollectionFilterState,
+  DropdownCollectionFilterStateParams,
+} from '../../state';
+import { FiltersMap } from '@wix/bex-core';
+import { action, makeObservable, observable } from 'mobx';
+import debounce from 'lodash/debounce';
+
+export interface AutoCompleteFilterStateParams<V, F extends FiltersMap>
+  extends DropdownCollectionFilterStateParams<V, F> {}
+
+export class AutoCompleteFilterState<V, F extends FiltersMap> {
+  dropdown: DropdownCollectionFilterState<V, F>;
+  searchInputValue = '';
+
+  constructor(params: AutoCompleteFilterStateParams<V, F>) {
+    this.dropdown = new DropdownCollectionFilterState(params);
+
+    makeObservable(this, {
+      syncSelectedToInput: action.bound,
+      clearSelectionAndSearch: action.bound,
+      onInputBlur: action.bound,
+      searchInputValue: observable.ref,
+    });
+
+    const { events } = this.dropdown.dropdownSelect;
+    events.on('syncSelectedItems', this.syncSelectedToInput);
+
+    this.syncSelectedToInput();
+  }
+
+  syncSelectedToInput() {
+    const {
+      dropdown: {
+        dropdownSelect,
+        collectionFilter: { collection },
+      },
+    } = this;
+    const [selected] = dropdownSelect.selectedItems;
+
+    collection.search('');
+
+    if (selected) {
+      this.searchInputValue = collection.itemName(selected);
+    } else {
+      this.searchInputValue = '';
+    }
+  }
+
+  clearSelectionAndSearch() {
+    const {
+      dropdown: { dropdownSelect },
+      collection,
+    } = this;
+    this.searchInputValue = '';
+    dropdownSelect.clear();
+    collection.clearSearch();
+  }
+
+  _scheduleOnInputBlur = debounce(
+    action((searchValue: string) => {
+      const {
+        dropdown: { dropdownSelect },
+        searchInputValue,
+      } = this;
+
+      if (searchValue !== searchInputValue) {
+        return;
+      }
+
+      if (!searchInputValue) {
+        dropdownSelect.clear();
+      } else {
+        this.syncSelectedToInput();
+      }
+    }),
+    100,
+  );
+
+  onInputBlur() {
+    this._scheduleOnInputBlur(this.searchInputValue);
+  }
+
+  get collection() {
+    const {
+      dropdown: {
+        collectionFilter: { collection },
+      },
+    } = this;
+
+    return collection;
+  }
+
+  init() {
+    return this.dropdown.init();
+  }
+}

package/src/components/AutoCompleteFilter/index.tsx

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

package/src/components/BorderOnlyBox.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@wix/design-system';
+import React from 'react';
+
+export function BorderOnlyBox() {
+  return (
+    <Box
+      width="100%"
+      borderTopColor="D60"
+      borderTopWidth="1px"
+      borderTopStyle="solid"
+      boxSizing="border-box"
+    />
+  );
+}