@wix/patterns 1.254.0 → 1.256.0

package/src/components/CollectionPagination.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { Box, Pagination, PaginationProps } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { CollectionStateProps } from './collectionStateProps';
+import { FiltersMap } from '@wix/bex-core';
+import { useScrollableContentContext } from '../providers';
+
+export interface CollectionPaginationProps<T, F extends FiltersMap>
+  extends CollectionStateProps<T, F>,
+    Partial<PaginationProps> {}
+
+export const CollectionPagination = observer(function PaginationTable<
+  T,
+  F extends FiltersMap,
+>({ state, ...rest }: CollectionPaginationProps<T, F>) {
+  const {
+    result: { status },
+    totalPages,
+    query: { pagination },
+  } = state;
+
+  const { scrollableContentRef } = useScrollableContentContext();
+  const showPagination = totalPages > 0 && !status.isLoading;
+
+  const onPageChange = useCallback(async ({ page }: { page: number }) => {
+    scrollableContentRef?.current?.scrollTo({ top: 0 });
+    await state.clearAndMoveToPage(page);
+  }, []);
+
+  return (
+    <Box align="center" padding="SP8">
+      {showPagination && (
+        <Pagination
+          totalPages={totalPages}
+          currentPage={pagination.page}
+          onChange={onPageChange}
+          {...rest}
+        />
+      )}
+    </Box>
+  );
+});

package/src/components/CollectionSearch.tsx

@@ -0,0 +1,54 @@
+import { observer } from 'mobx-react-lite';
+import { Search, SearchProps } from '@wix/design-system';
+import React, { CSSProperties } from 'react';
+import { FiltersMap } from '@wix/bex-core';
+import { useCollectionContext } from '@wix/bex-core/react';
+
+export interface CollectionSearchProps extends Partial<SearchProps> {
+  onSearchChange?: (value: string) => unknown;
+  onSearchClick?: () => unknown;
+  onSearchBlur?: (value: string) => unknown;
+  visibility?: CSSProperties['visibility'];
+}
+
+export const CollectionSearch = observer(function CollectionSearch<
+  T,
+  F extends FiltersMap = FiltersMap,
+>({
+  onSearchChange,
+  onSearchClick,
+  onSearchBlur,
+  visibility,
+  ...rest
+}: CollectionSearchProps) {
+  const collection = useCollectionContext<T, F>();
+  const {
+    query: { search },
+    translate: t,
+  } = collection;
+
+  return (
+    <Search
+      dataHook="collection-search"
+      onChange={(e) => {
+        const value = e.target.value;
+        collection.search(e.target.value, { clearResult: true });
+        onSearchChange?.(value);
+      }}
+      value={search.value}
+      onClear={() => {
+        const value = '';
+        collection.clearSearch();
+        onSearchChange?.(value);
+      }}
+      placeholder={t('cairo.searchPlaceholder', { defaultValue: '' })}
+      onInputClicked={() => onSearchClick?.()}
+      textOverflow="ellipsis"
+      onBlur={(e) => {
+        const value = e.target.value;
+        onSearchBlur?.(value);
+      }}
+      {...rest}
+    />
+  );
+});

package/src/components/CollectionSectionHeader/CollectionSectionHeader.tsx

@@ -0,0 +1,57 @@
+import {
+  SectionHeader,
+  SectionHeaderProps,
+  Text,
+  CounterBadge,
+  Box,
+} from '@wix/design-system';
+import React from 'react';
+import { CollectionSectionHeaderActionBar } from './CollectionSectionHeaderActionBar';
+import { Section } from './CollectionSectionHeader.types';
+
+export interface CollectionSectionHeaderProps
+  extends Pick<SectionHeaderProps, 'skin' | 'dataHook'> {
+  section: Section & { count: number; hasMore?: boolean };
+  biComponentType: string;
+}
+
+export const CollectionSectionHeader = ({
+  section,
+  skin,
+  dataHook,
+  biComponentType,
+}: CollectionSectionHeaderProps) => {
+  const title = (
+    <Box verticalAlign="middle" gap="SP1">
+      <Text size="small" weight="normal">
+        {section.title}
+      </Text>
+      {section.badge?.visible && (
+        <CounterBadge
+          truncate={false}
+          skin={section.badge.skin || 'light'}
+          dataHook="section-header-badge"
+        >
+          {section.count}
+          {section.hasMore ? '+' : ''}
+        </CounterBadge>
+      )}
+    </Box>
+  );
+
+  return (
+    <SectionHeader
+      dataHook={dataHook}
+      title={title}
+      skin={skin}
+      divider="none"
+      size="small"
+      suffix={
+        <CollectionSectionHeaderActionBar
+          section={section}
+          biComponentType={biComponentType}
+        />
+      }
+    />
+  );
+};

package/src/components/CollectionSectionHeader/CollectionSectionHeader.types.ts

@@ -0,0 +1,29 @@
+import { CtaBaseProps } from '../CtaProps';
+
+export interface Section {
+  /**
+   * A unique identifier for the section.
+   * @external
+   */
+  id: string;
+  /**
+   * A title for the section.
+   * @external
+   */
+  title: string;
+  /**
+   * A primary call to action for the section.
+   * @overrideType [CtaBaseProps](./?path=/story/common-types--ctabaseprops)
+   * @external
+   */
+  primaryAction?: CtaBaseProps;
+  /**
+   * A badge for the section.
+   * @external
+   */
+  badge?: {
+    visible: boolean;
+    skin?: 'light' | 'danger' | 'neutralLight';
+  };
+}
+export type RenderSection<T> = (item: T) => Section;

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

@@ -0,0 +1,22 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  SectionHeaderUniDriver,
+  TextButtonUniDriver,
+  CounterBadgeUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export function CollectionSectionHeaderUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  return {
+    ...SectionHeaderUniDriver(base, body),
+    getPrimaryAction: () =>
+      TextButtonUniDriver(
+        base.$('[data-hook="collection-section-header-primary-action"]'),
+        body,
+      ),
+    getBadge: () =>
+      CounterBadgeUniDriver(base.$('[data-hook="section-header-badge"]'), body),
+  };
+}

package/src/components/CollectionSectionHeader/CollectionSectionHeaderActionBar.tsx

@@ -0,0 +1,45 @@
+import { Box, TextButton } from '@wix/design-system';
+import React from 'react';
+import { Section } from './CollectionSectionHeader.types';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { wixPatternsSectionHeaderPrimaryActionClicked } from '@wix/bex-core/bi';
+
+export interface CollectionSectionHeaderActionBarProps {
+  section: Section;
+  biComponentType: string;
+}
+
+export const CollectionSectionHeaderActionBar = ({
+  section,
+  biComponentType,
+}: CollectionSectionHeaderActionBarProps) => {
+  const { toolbarBIReporter } = useToolbarCollectionContext();
+  const { primaryAction } = section;
+
+  const handleClick = () => {
+    toolbarBIReporter.reportBi(
+      wixPatternsSectionHeaderPrimaryActionClicked({
+        sectionId: section.id,
+        cta: primaryAction?.id,
+        componentType: biComponentType,
+      }),
+    );
+
+    primaryAction?.onClick?.();
+  };
+
+  return (
+    <Box direction="horizontal">
+      {primaryAction && (
+        <TextButton
+          prefixIcon={primaryAction.prefixIcon}
+          dataHook="collection-section-header-primary-action"
+          onClick={handleClick}
+          size="small"
+        >
+          {primaryAction.label}
+        </TextButton>
+      )}
+    </Box>
+  );
+};

package/src/components/CollectionSectionHeader/index.ts

@@ -0,0 +1,6 @@
+export {
+  CollectionSectionHeader,
+  CollectionSectionHeaderProps,
+} from './CollectionSectionHeader';
+
+export * from './CollectionSectionHeader.types';

package/src/components/CollectionTable/CollectionTable.st.css

@@ -0,0 +1,11 @@
+.root {
+  -st-states: mobile;
+}
+
+.root:mobile td:first-child {
+  padding-left: 18px;
+}
+
+.root:mobile td:last-child {
+  padding-right: 18px;
+}

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "CollectionTable4261317431";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"CollectionTable4261317431__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/CollectionTable/CollectionTable.tsx

@@ -0,0 +1,394 @@
+import { Table, TableColumn as WSRTableColumn } from '@wix/design-system';
+import React, { ReactElement } from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap, KeyedItem } from '@wix/bex-core';
+import { CollectionCard } from '../CollectionCard';
+import { TableColumn } from '../../model';
+import { TableState } from '../../state';
+import { useTableCollectionSyncProps } from './useTableCollectionSyncProps';
+import type { TableDragAndDropType } from '../TableDragAndDrop';
+import {
+  CollectionTableWSRTable,
+  CollectionTableWSRTableBaseProps,
+} from './CollectionTableWSRTable';
+import { CollectionTableContent } from './CollectionTableContent';
+import { PageInfiniteScrollLoader } from '../PageInfiniteScrollLoader';
+import { useActionCellColumn } from '../ActionCell';
+import {
+  BulkActionModalRenderProp,
+  BulkActionToolbarRenderProp,
+  SingleCollectionBulkActionModal,
+  SingleCollectionBulkActionToolbar,
+} from '../BulkAction';
+import { CollectionTableActionCellProps } from './CollectionTableBaseCommonProps';
+import {
+  type DataExtensionElement,
+  DataExtensionProps,
+  type DataExtensionType,
+} from '../DataExtension';
+import { useCreateWSRColumnBase } from '../../hooks/useCreateWSRColumnBase';
+import type { TagsElement } from '../Tags';
+import { TablePlaceholderStates } from '../TablePlaceholderStates/TablePlaceholderStates';
+import { useScrollableContentContext } from '../../providers';
+import { isValidElement } from '../isValidElement';
+import { st, classes } from './CollectionTable.st.css.js';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+export interface CollectionTableBaseProps<T, F extends FiltersMap>
+  extends CollectionTableWSRTableBaseProps<T, T, F>,
+    CollectionTableActionCellProps<T, F> {
+  /**
+   * Defines the columns of the table. Accepts an array of [`TableColumn`](./?path=/story/common-types--tablecolumn) objects.
+   * @overrideType [TableColumn](./?path=/story/common-types--tablecolumn)[]
+   * @external
+   */
+  columns: TableColumn<T>[];
+
+  /**
+   * Whether to show a checkbox column for selecting items.
+   * @default false
+   * @external
+   */
+  showSelection?: boolean;
+  /**
+   * A callback method to be called on row click. Signature: `onRowClick(rowData, rowNum)`. To enable hover effect you should set this prop.
+   * @external
+   */
+  onRowClick?: (item: T, index: number) => void;
+  /**
+   * A [`<ExportButton />`](./?path=/story/features-export--exportto) react element to be added to the toolbar.
+   */
+  exportButton?: ReactElement;
+
+  /**
+   * Adds functionality to allow visitors to reorder items manually.
+   * For more information, see the [Drag and Drop Overview](./?path=/story/features-sort-drag-and-drop--overview).
+   * @overrideType [TableDragAndDrop](./?path=/story/features-sort-drag-and-drop--tabledraganddrop)
+   * @external
+   */
+  dragAndDrop?: TableDragAndDropType;
+
+  /**
+   * Data extension implementation: `import { DataExtension } from '@wix/patterns';`
+   */
+  dataExtension?: DataExtensionType | DataExtensionElement;
+
+  tags?: TagsElement<T, F>;
+
+  /**
+   * A function that receives the item of the row and returns a string for tooltip content.
+   * @external
+   */
+  checkboxTooltipContent?: (rowData: KeyedItem<T>) => string | undefined;
+
+  /**
+   * Render a custom toolbar when more than 1 item is selected.<br>
+   * The function accepts the following parameters
+   *   * `selectedValues`: The items that were checked via the selection column
+   *   * `uncheckedValues`: The items that were unchecked via the selection column
+   *   * `allSelected`: Indicates whether the "Select All" checkbox is checked
+   *   * `openModal`: Opens the modal that contains the component from `bulkActionModal` render prop
+   *   * `clearSelection`: Clears all existing selection, call this after the action on the selected items was done
+   *   * `total`: Total items in the server (taken from [`fetchData`](./?path=/story/common-hooks--usecollection) return value).
+   *   * `openConfirmModal`: Opens a `<MessageModalLayout/>` to confirm an action about to be applied on the selected items.
+   *   * `query`: ComputedQuery<F> - Representation of the current paging, sorting & filtering applied. Usually for using together with bulk action such as `updateAll` and `deleteAll`
+   *
+   * > When passed, enables `showSelection` by default.
+   * @external
+   */
+  bulkActionToolbar?: BulkActionToolbarRenderProp<T, F>;
+  /**
+   * Opens a modal from the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar).
+   * Supported parameters:
+   *  + `selectedValues`: Selected item values.
+   *  + `uncheckedValues`: Unselected item values.
+   *  + `isSelectAll`: [bool] Whether the **Select All** option is selected.
+   *  + `closeModal`: Closes the modal.
+   *  + `query`: [object] Instance of [ComputedQuery](./?path=/story/common-types--computedquery) that represents the query that resulted in an empty state. Representation of the current paging, sorting and filtering applied. Usually for using together with bulk action such as `updateAll` and `deleteAll`.
+   * @external
+   */
+  bulkActionModal?: BulkActionModalRenderProp<T, F>;
+}
+
+export interface CollectionTableProps<T, F extends FiltersMap>
+  extends CollectionTableBaseProps<T, F> {
+  state: TableState<T, F>;
+  keyedItems?: KeyedItem<T>[];
+}
+
+function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
+  props: CollectionTableProps<T, F>,
+) {
+  const {
+    state: tableState,
+    filters,
+    title,
+    tabs,
+    customColumns: customColumnsProp,
+    multiLevelSorting: multiLevelSortingProp,
+    dataExtension,
+    tags,
+    views,
+    extraToolbar,
+    bulkActionToolbar,
+    exportButton,
+    exportModal,
+    bulkActionModal,
+    sticky: stickyProp,
+    actionCell,
+    actionCellWidth,
+    actionCellProps,
+    columns: columnsProp,
+    onRowClick,
+    onSortClick,
+    showSelection: showSelectionProp,
+    search,
+    renderError,
+    errorState = renderError &&
+      (((err, { isOnline, retry }) =>
+        renderError?.({
+          err,
+          isOnline,
+          retry,
+        })) as CollectionTableProps<T, F>['errorState']),
+    emptyState,
+    noResultsState,
+    children,
+    onSelectedItems,
+    cardProps,
+    minCardHeight,
+    dataHook,
+    topNotification,
+    tableGridSwitchButton,
+    useShowLoaderWhenEmpty,
+    useNewInfiniteScrollLoader,
+    dragAndDrop,
+    dragAndDropBulkSubmit,
+    dragAndDropSubmit,
+    dragAndDropCancel,
+    dragAndDropReorderModeToolbar,
+    horizontalScroll: horizontalScrollProp,
+    stickyColumns,
+    stickySelectionColumn,
+    hideBulkSelectionCheckbox,
+    maxSelection,
+    showTitleBar = true,
+    BodyElementType,
+    isApplyColumnWidthStyle,
+    rowVerticalPadding,
+    keyedItems,
+    ...rest
+  } = props;
+
+  const dataExtensionType = isValidElement<
+    DataExtensionProps,
+    DataExtensionType
+  >(dataExtension)
+    ? dataExtension.type
+    : dataExtension;
+
+  const state = tableState.toolbar;
+
+  const showSelection = showSelectionProp ?? bulkActionToolbar != null;
+
+  const horizontalScroll =
+    horizontalScrollProp ??
+    state.container.internalExperiments?.enabled(
+      'specs.cairo.HorizontalScrollAsDefault',
+    );
+
+  const { scrollableContentRef } = useScrollableContentContext();
+
+  const sticky = stickyProp ?? scrollableContentRef?.current != null;
+
+  const { collection, internalScroll } = state;
+
+  const customColumns =
+    props.customColumns ||
+    (dataExtensionType && <dataExtensionType.CustomColumns />);
+
+  const isMobile = useIsMobile();
+
+  useTableCollectionSyncProps({
+    ...props,
+    dataExtension,
+    showSelection,
+    customColumns,
+    tags,
+    isUsingTableVirtualization: !!BodyElementType,
+  });
+
+  const { selectedOrderedColumnsOrAll } = state;
+
+  const { bulkSelect, query } = collection;
+
+  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
+
+  const transformedColumns: WSRTableColumn<KeyedItem<T>>[] =
+    selectedOrderedColumnsOrAll.map((column, index, { length }) => {
+      const {
+        render,
+        id,
+        sortable,
+        infoTooltipProps,
+        title,
+        width,
+        style,
+        ...restColumn
+      } = column;
+
+      const columnBase = createWSRColumnBase(column, index, length);
+
+      return {
+        ...restColumn,
+        ...columnBase,
+        ...(isApplyColumnWidthStyle ? undefined : { style, width }),
+        sortDescending:
+          sortable && id ? query.sort.getIsSortDescending(id) : undefined,
+        render: (keyedItem: KeyedItem<T>, rowNum: number) =>
+          render(keyedItem.item, rowNum),
+      };
+    });
+
+  const actionCellColumn = useActionCellColumn({
+    actionCellProps: {
+      ...(actionCellProps ?? {}),
+      stickyActionCell: horizontalScroll || actionCellProps?.stickyActionCell,
+    },
+    actionCellWidth,
+    collection,
+    sticky,
+    actionCell,
+  });
+
+  const columnsWithActions: WSRTableColumn<KeyedItem<T>>[] = actionCellColumn
+    ? [...transformedColumns, actionCellColumn]
+    : transformedColumns;
+
+  const internalOnSortClick = (col: TableColumn<F>, index: number) => {
+    onSortClick?.(col, index);
+
+    if (col.id != null) {
+      state.collection.sort(
+        { id: col.id, sortMode: col.sortMode },
+        {
+          clearResult: true,
+          multiple: multiLevelSortingProp !== undefined,
+        },
+      );
+    }
+  };
+
+  const { st: tableRowSt, classes: tableRowClasses } = Table.dataTableRowStyle;
+
+  let table = (
+    <CollectionTableWSRTable
+      rowClass={st(classes.root, { mobile: isMobile })}
+      {...props}
+      topNotification={
+        typeof topNotification === 'function'
+          ? () => topNotification({ query: collection.result.originQuery })
+          : topNotification
+      }
+      customColumns={customColumns}
+      rowVerticalPadding={rowVerticalPadding}
+      dragAndDropReorderModeToolbar={dragAndDropReorderModeToolbar}
+      selectionToolbar={
+        bulkActionToolbar && (
+          <SingleCollectionBulkActionToolbar
+            state={state}
+            bulkActionToolbar={bulkActionToolbar}
+          />
+        )
+      }
+      dynamicRowClass={() =>
+        tableRowSt(tableRowClasses.root, {
+          skin: 'light',
+        })
+      }
+      horizontalScroll={horizontalScroll}
+      minCardHeight={minCardHeight}
+      sticky={sticky}
+      showTitleBar={showTitleBar}
+      state={tableState}
+      columns={columnsWithActions}
+      onSortClick={internalOnSortClick}
+      showSelection={showSelection}
+      onSelectionChanged={(_selectedIds, _change) => {
+        state.onSelectionChanged(_selectedIds, _change);
+        onSelectedItems?.(bulkSelect.allSelected, bulkSelect.selectedValues);
+        rest.onSelectionChanged?.(_selectedIds, _change);
+      }}
+      selectionDisabled={(row) => state.bulk.isRowCheckboxDisabled(row)}
+      onRowClick={onRowClick && (({ item }, index) => onRowClick(item, index))}
+      isApplyColumnWidthStyle={isApplyColumnWidthStyle}
+      keyedItems={keyedItems}
+    >
+      <TablePlaceholderStates
+        state={tableState}
+        errorState={errorState}
+        rowVerticalPadding={rowVerticalPadding}
+        emptyState={emptyState}
+        noResultsState={
+          typeof noResultsState === 'function'
+            ? () => {
+                const {
+                  result: { originQuery, hasAvailableItems },
+                } = collection;
+                return noResultsState({
+                  hasAvailableItems,
+                  query: originQuery,
+                });
+              }
+            : noResultsState
+        }
+      />
+
+      <CollectionTableContent state={tableState}>
+        {useNewInfiniteScrollLoader || internalScroll ? (
+          <PageInfiniteScrollLoader
+            dataHook="infinite-scroll-loader"
+            state={collection}
+            scrollMoreAlways
+          />
+        ) : undefined}
+        {children}
+      </CollectionTableContent>
+    </CollectionTableWSRTable>
+  );
+
+  if (dragAndDrop) {
+    const { TableDragAndDropContext } = dragAndDrop;
+    table = (
+      <TableDragAndDropContext
+        state={state}
+        onSubmit={dragAndDropSubmit}
+        onBulkSubmit={dragAndDropBulkSubmit}
+      >
+        {table}
+      </TableDragAndDropContext>
+    );
+  }
+
+  return (
+    <CollectionCard
+      errorState={errorState}
+      state={state}
+      dataHook={dataHook}
+      dataExtension={dataExtensionType}
+      tags={tags}
+      {...cardProps}
+    >
+      {exportModal ?? state.featuredComponents.exportModal.value}
+      {bulkActionModal && (
+        <SingleCollectionBulkActionModal
+          state={state}
+          bulkActionModal={bulkActionModal}
+        />
+      )}
+      {table}
+    </CollectionCard>
+  );
+}
+
+export const CollectionTable = observer(_CollectionTable);