@wix/patterns 1.255.0 → 1.256.0

package/src/bm/buildCreateEssentials.ts

@@ -0,0 +1,64 @@
+import { EssentialsOptions } from '@wix/fe-essentials/core';
+import { ReadOnlyExperiments } from '@wix/fe-essentials/experiments';
+import { FlowBusinessManagerModule } from '@wix/yoshi-flow-bm';
+import type { ModuleId } from '@wix/business-manager-api';
+import { getModule } from '@wix/business-manager-api';
+
+export const buildCreateEssentials = (
+  _essentials: FlowBusinessManagerModule['_essentials'],
+) => {
+  return (
+    options: EssentialsOptions & {
+      componentSettings?: { componentId?: string };
+    },
+  ) => {
+    return {
+      _i18n: options.i18n ? _essentials.createI18n(options.i18n) : null,
+      get i18n() {
+        return this._i18n!;
+      },
+      _dataCapsule: options.dataCapsule
+        ? _essentials.createDataCapsule(options.dataCapsule)
+        : null,
+      get dataCapsule() {
+        return this._dataCapsule!;
+      },
+      biLoggerFactory: _essentials.biLoggerFactory,
+      _errorMonitor: options.errorMonitor
+        ? _essentials.createErrorMonitor(options.errorMonitor)
+        : null,
+      get errorMonitor() {
+        return this._errorMonitor!;
+      },
+      _fedopsLogger: options.fedops
+        ? _essentials.createFedopsLogger(options.fedops.appName)
+        : null,
+      get fedopsLogger() {
+        return this._fedopsLogger!;
+      },
+      _experiments: (() => {
+        if (!options.experiments) {
+          return null;
+        }
+
+        if ('scopes' in options.experiments) {
+          if (getModule('FEDATA' as ModuleId) != null) {
+            return _essentials.createExperiments(options.experiments);
+          }
+
+          return null;
+        }
+
+        const Experiments = _essentials.experiments
+          .constructor as typeof ReadOnlyExperiments;
+
+        return new Experiments({
+          experiments: options.experiments.bag,
+        });
+      })(),
+      get experiments() {
+        return this._experiments!;
+      },
+    };
+  };
+};

package/src/bm/errorMonitorCompat.ts

@@ -0,0 +1,39 @@
+// currently `useErrorMonitor` is not always available - see https://wix.slack.com/archives/G011G2JCGGM/p1630590305001100
+import { ErrorMonitor } from '@wix/bex-core';
+import {
+  ComponentHooksFlowAPI,
+  useErrorMonitor,
+  useSentry,
+} from '@wix/yoshi-flow-bm';
+
+export function useErrorMonitorCompat(): ErrorMonitor {
+  let sentry: ErrorMonitor | null = null;
+  let errorMonitor: ErrorMonitor | null = null;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    errorMonitor = useErrorMonitor();
+  } catch (e) {}
+
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    sentry = useSentry();
+  } catch (e) {}
+
+  return (errorMonitor ?? sentry)!;
+}
+
+export function getErrorMonitorCompat(
+  flowAPI: ComponentHooksFlowAPI,
+): ErrorMonitor {
+  let sentry: ErrorMonitor | null = null;
+  let errorMonitor: ErrorMonitor | null = null;
+  try {
+    errorMonitor = flowAPI.errorMonitor;
+  } catch (e) {}
+
+  try {
+    sentry = flowAPI.sentry;
+  } catch (e) {}
+
+  return (errorMonitor ?? sentry)!;
+}

package/src/bm/testProviderPropsOverrides.ts

@@ -0,0 +1,23 @@
+import type { TestProviderPartialProps } from '@wix/yoshi-flow-bm/testkit';
+import { exportServiceMocks, appSettingsMocks } from '@wix/bex-core/testkit';
+import { whenRequest } from '@wix/yoshi-flow-bm/testkit/http-client/client';
+import { dataExtensionServiceMocks, tagsServiceMocks } from '../test-utils';
+import { asyncJobMocks } from '../test-utils/AsyncJobMocks';
+import { itemsSelectionAPIHttpClientMocks } from '../test-utils/ItemsSelectionMocks';
+
+export function wixPatternsTestProviderPropsOverrides(
+  overrides?: TestProviderPartialProps,
+): TestProviderPartialProps {
+  return {
+    ...overrides,
+    mocks: [
+      ...(overrides?.mocks ?? []),
+      ...exportServiceMocks(whenRequest).mocks,
+      ...appSettingsMocks(whenRequest),
+      ...dataExtensionServiceMocks(whenRequest).mocks,
+      ...asyncJobMocks(whenRequest).mocks,
+      ...tagsServiceMocks(whenRequest).mocks,
+      ...itemsSelectionAPIHttpClientMocks(whenRequest),
+    ],
+  };
+}

package/src/bm/useExperimentsCompat.ts

@@ -0,0 +1,16 @@
+import { Experiments, experimentsFallbackApi } from '@wix/bex-core';
+import { useExperiments } from '@wix/yoshi-flow-bm';
+import { useState } from 'react';
+
+export function useExperimentsCompat(): Experiments {
+  const [fallbackApi] = useState(() => experimentsFallbackApi());
+
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { experiments } = useExperiments() ?? {};
+    return experiments ?? fallbackApi;
+  } catch (e) {
+    console.error(e);
+    return fallbackApi;
+  }
+}

package/src/bm/usePickerModal.ts

@@ -0,0 +1,90 @@
+import {
+  useCreatePickerModal as useCreatePickerModalBase,
+  UsePickerModalParamsBase,
+  UsePickerModalParams as UsePickerModalParamsOriginal,
+  PickerModalState,
+  useSyncPickerModalProps,
+} from '../hooks';
+import {
+  wixPatternsEnvironment,
+  FiltersMap,
+  OptionalFiltersMap,
+} from '@wix/bex-core';
+import { PaginationModeConfig } from '@wix/bex-core/react';
+import {
+  FlowBusinessManagerModule,
+  useComponentInfo,
+  useModuleInfo,
+  useModuleParams,
+} from '@wix/yoshi-flow-bm';
+import { useErrorMonitorCompat } from './errorMonitorCompat';
+import { getModule } from '@wix/business-manager-api';
+import { useCallback, useState } from 'react';
+
+interface UsePickerModalParamsOverrides<T, F extends FiltersMap> {
+  environment?: Partial<UsePickerModalParamsBase<T, F>['environment']>;
+}
+
+type UsePickerModalParamsBM<T, F extends FiltersMap> = Omit<
+  UsePickerModalParamsBase<T, F>,
+  | 'paginationMode'
+  | 'fetchData'
+  | 'environment'
+  | 'errorMonitor'
+  | 'biLoggerFactory'
+>;
+
+export type UsePickerModalParams<
+  T,
+  F extends FiltersMap,
+> = UsePickerModalParamsBM<T, F> &
+  UsePickerModalParamsOverrides<T, F> &
+  PaginationModeConfig<T, F>;
+
+export type PikerModalFactory = <T, F extends FiltersMap = OptionalFiltersMap>(
+  config: UsePickerModalParams<T, F>,
+) => PickerModalState<T, F>;
+
+export function useCreatePickerModal(): PikerModalFactory {
+  const moduleParams = useModuleParams();
+  const moduleInfo = useModuleInfo();
+  const componentInfo = useComponentInfo();
+  const errorMonitor = useErrorMonitorCompat();
+  const createPicker = useCreatePickerModalBase();
+
+  return useCallback<PikerModalFactory>(
+    <T, F extends FiltersMap = OptionalFiltersMap>(
+      params: UsePickerModalParams<T, F>,
+    ) => {
+      const { accountLanguage: language } = moduleParams;
+      const { moduleId } = moduleInfo;
+      const { componentId } = componentInfo;
+
+      const { _essentials } = getModule(
+        moduleId as any,
+      ) as FlowBusinessManagerModule;
+
+      return createPicker({
+        ...params,
+        environment: wixPatternsEnvironment({
+          language,
+          componentId,
+          artifactId: moduleId,
+          ...params?.environment,
+        }),
+        errorMonitor,
+        biLoggerFactory: _essentials.biLoggerFactory,
+      } as UsePickerModalParamsOriginal<T, F>);
+    },
+    [],
+  );
+}
+
+export function usePickerModal<T, F extends FiltersMap = OptionalFiltersMap>(
+  params: UsePickerModalParams<T, F>,
+) {
+  const createPickerModal = useCreatePickerModal();
+  const [state] = useState(() => createPickerModal<T, F>(params));
+  useSyncPickerModalProps(state, params);
+  return state;
+}

package/src/bm/usePlatformApiCompat.ts

@@ -0,0 +1,13 @@
+import { usePlatformApi } from '@wix/yoshi-flow-bm';
+
+export function usePlatformApiCompat(): Partial<
+  ReturnType<typeof usePlatformApi>
+> {
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return usePlatformApi() ?? {};
+  } catch (e) {
+    console.error(e);
+    return {};
+  }
+}

package/src/bm/warmUpPickerStandalone.ts

@@ -0,0 +1,25 @@
+import { WarmUpPickerParams, getExperimentsCompat } from '@wix/bex-core';
+import { ComponentHooksFlowAPI } from '@wix/yoshi-flow-bm';
+import { buildBMCairoEssentials } from './buildBMCairoEssentials';
+import { getErrorMonitorCompat } from './errorMonitorCompat';
+import { warmUpPickerStandalone as warmUpPickerStandaloneBase } from '../state/warmUpPickerStandalone';
+
+export function warmUpPickerStandalone(
+  flowAPI: ComponentHooksFlowAPI,
+  params: WarmUpPickerParams,
+) {
+  warmUpPickerStandaloneBase(
+    buildBMCairoEssentials(
+      {
+        moduleParams: flowAPI.moduleParams,
+        moduleInfo: flowAPI.moduleInfo,
+        componentInfo: flowAPI.componentInfo,
+        httpClient: flowAPI.httpClient,
+        errorMonitor: getErrorMonitorCompat(flowAPI),
+        experiments: getExperimentsCompat(flowAPI),
+      },
+      params,
+    ),
+    params,
+  );
+}

package/src/bm/withWixPatternsProvider.tsx

@@ -0,0 +1,14 @@
+import React, { ComponentType, VoidFunctionComponent } from 'react';
+import { WixPatternsBMProvider } from './WixPatternsBMProvider';
+
+type ExtractProps<C> = C extends ComponentType<infer P> ? P : never;
+
+export function withWixPatternsProvider<C extends VoidFunctionComponent<any>>(
+  WrappedComponent: C,
+): C {
+  return ((props: ExtractProps<C>) => (
+    <WixPatternsBMProvider>
+      <WrappedComponent {...props} />
+    </WixPatternsBMProvider>
+  )) as C;
+}

package/src/components/ActionCell/ActionCell.ts

@@ -0,0 +1,75 @@
+import {
+  TableActionCellProps,
+  TableActionCellSecondaryAction,
+  TableActionCellSecondaryDivider,
+} from '@wix/design-system';
+import { FiltersMap } from '@wix/bex-core';
+import { ActionCellAPI as ActionCellAPIType } from '../../state';
+
+export type SecondaryActionAction = TableActionCellSecondaryAction & {
+  biName?: string;
+  componentId?: string;
+  appId?: string;
+  divider?: false;
+};
+
+export type SecondaryAction =
+  | SecondaryActionAction
+  | TableActionCellSecondaryDivider;
+
+export type ActionCellAPI<T, F extends FiltersMap> = ActionCellAPIType<T, F>;
+
+export interface ActionCellProps
+  extends Omit<TableActionCellProps, 'primaryAction' | 'secondaryActions'> {
+  /**
+   * Primary call to action for each item in a table. Controls the behavior and appearance of the primary action. <br>
+   * Supported parameters:
+   *  + `disabledMessage`: Message to show when the action is disabled. Relevant only to grid.
+   *  + `text`: Specifies action label.
+   *  + `skin`: Deprecated property that was previously used to control the visual appearance of a button. It has been replaced by the visibility property, which switches skin properties automatically based on visibility options.
+   *  + `onClick`: Defines a callback function which is called on button click.
+   *  + `disabled`: [bool] Whether user interactions are disabled.
+   *  + `prefixIcon`: Icon in front of a button label.
+   *  + `suffixIcon`: Icon after a button label.
+   *  + `as`: Renders button as another component or a DOM tag.
+   *  + `visibility`: Specifies whether the primary action button is visible. When the value is set to `'onHover'`, the button is only visible when the mouse hovers over it, and it appears as a primary button. When the value is set to `'always'`, the button is always visible and appears as a secondary button.
+   * 
+   * This prop extends the `primaryAction` prop in Wix Design System's [TableActionCellProp](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--tableactioncell) component.   
+
+   * @external
+   */
+  primaryAction?: TableActionCellProps['primaryAction'] & {
+    biName?: string;
+    disabledMessage?: string;
+  };
+  /**
+   * Secondary CTAs for each item in a table. Controls the behavior and appearance of the secondary actions. <br>
+   * Supported parameters:
+   *  + `deleteSecondaryAction:` A function that adds a "Delete" action as a secondary action.
+   *  + `text`: Specifies action label to be shown in the tooltip or popover menu.
+   *  + `icon`: Action icon.
+   *  + `onClick`: Defines a callback function which is called on button click.
+   *  + `subtitle`: Action subtitle.
+   *  + `disabled`: [bool] Whether user interactions are disabled.
+   *  + `dataHook`: A data-hook HTML attribute to be used in the tests.
+   *  + `disabledDescription`: [string] Text to display in tooltip when action is visible and disabled.
+   *  + `tooltipProps`: Controls the tooltip appearance.
+   *  + `skin`: Controls the skin of the item.
+   *
+   * OR Divider object containing
+   *  + `divider`: A divider between the action items in popover menu.
+   *
+   * This prop extends the `primaryAction` prop in Wix Design System's [TableActionCellProp](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--tableactioncell) component.
+   * @external
+   */
+  secondaryActions?: SecondaryAction[];
+
+  /**
+   * This ID is used to specify the target container for [dashboard menu plugin](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins) items.
+   */
+  containerId?: string;
+}
+
+export type ActionCell<T, F extends FiltersMap> =
+  | ActionCellProps
+  | ((item: T, index: number, api: ActionCellAPI<T, F>) => ActionCellProps);

package/src/components/ActionCell/index.ts

@@ -0,0 +1,4 @@
+export * from './ActionCell';
+export * from './useActionCellColumnBase';
+export * from './useRenderActionCellColumn';
+export * from './useActionCellColumn';

package/src/components/ActionCell/useActionCellColumn.ts

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { CollectionState, FiltersMap } from '@wix/bex-core';
+import { TableColumn as TableColumnWSR } from '@wix/design-system/dist/types/Table';
+import { ActionCell } from './ActionCell';
+import { useRenderActionCellColumn } from './useRenderActionCellColumn';
+import { useActionCellColumnBase } from './useActionCellColumnBase';
+
+export interface UseActionCellColumnParams<T, F extends FiltersMap> {
+  actionCellWidth?: string | number;
+  actionCellProps?: Partial<Omit<TableColumnWSR<T>, 'render' | 'style'>>;
+  sticky?: boolean;
+  actionCell?: ActionCell<T, F>;
+  collection: CollectionState<T, F>;
+}
+
+export function useActionCellColumn<T, F extends FiltersMap>(
+  params: UseActionCellColumnParams<T, F>,
+) {
+  const { collection, actionCell, actionCellProps, actionCellWidth, sticky } =
+    params;
+
+  const baseColumn = useActionCellColumnBase({
+    actionCellProps,
+    actionCellWidth,
+  });
+
+  const render = useRenderActionCellColumn({
+    actionCell,
+    sticky,
+    collection,
+  });
+
+  return useMemo(() => {
+    if (render == null) {
+      return null;
+    }
+
+    return {
+      ...baseColumn,
+      render,
+    };
+  }, [baseColumn, render]);
+}

package/src/components/ActionCell/useActionCellColumnBase.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { TableColumn as TableColumnWSR } from '@wix/design-system/dist/types/Table';
+
+export interface UseActionCellColumnBaseParams<T> {
+  actionCellWidth?: string | number;
+  actionCellProps?: Partial<Omit<TableColumnWSR<T>, 'render' | 'style'>>;
+}
+
+export function useActionCellColumnBase<T>(
+  params: UseActionCellColumnBaseParams<T>,
+) {
+  const { actionCellProps, actionCellWidth } = params;
+
+  return useMemo(() => {
+    return {
+      title: '',
+      id: 'cairo-action-cell',
+      key: 'cairo-action-cell',
+      width: actionCellWidth ?? '48px',
+      style: { justifyContent: 'flex-end' },
+      ...actionCellProps,
+    };
+  }, [actionCellProps, actionCellWidth]);
+}

package/src/components/ActionCell/useRenderActionCellColumn.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { CollectionState, FiltersMap, KeyedItem } from '@wix/bex-core';
+import { CollectionTableActionsColumn } from '../CollectionTableActionsColumn';
+import { ActionCell } from './ActionCell';
+
+export interface UseRenderActionCellColumnParams<T, F extends FiltersMap> {
+  sticky?: boolean;
+  actionCell?: ActionCell<T, F>;
+  collection: CollectionState<T, F>;
+}
+
+export function useRenderActionCellColumn<T, F extends FiltersMap>(
+  params: UseRenderActionCellColumnParams<T, F>,
+) {
+  const { collection, actionCell, sticky } = params;
+
+  return useMemo(() => {
+    if (actionCell == null) {
+      return null;
+    }
+
+    return (keyedItem: KeyedItem<T>, index: number) => {
+      return (
+        <CollectionTableActionsColumn
+          index={index}
+          sticky={sticky}
+          collection={collection}
+          keyedItem={keyedItem}
+          actionCell={actionCell}
+        />
+      );
+    };
+  }, [sticky, actionCell]);
+}

package/src/components/ActionControl/ActionButton.tsx

@@ -0,0 +1,37 @@
+import { Button, ButtonProps } from '@wix/design-system';
+import React from 'react';
+import { DisabledTooltip } from '../DisabledTooltip';
+import { ActionSubItemPrivate } from './ActionSubItemProps';
+
+export interface ActionButtonProps {
+  actionItem: ActionSubItemPrivate;
+  suffixIcon?: ButtonProps['suffixIcon'];
+  size?: ButtonProps['size'];
+  priority?: ButtonProps['priority'];
+  fullWidth?: ButtonProps['fullWidth'];
+}
+
+export function ActionButton(props: ActionButtonProps) {
+  const { actionItem, suffixIcon, size, priority, fullWidth } = props;
+  const { tooltip, prefixIcon, label, onClick, dataHook, disabled } =
+    actionItem;
+
+  return (
+    <DisabledTooltip content={tooltip} dataHook={`${dataHook}-tooltip`}>
+      <Button
+        skin="standard"
+        priority={priority}
+        size={size}
+        prefixIcon={prefixIcon}
+        ellipsis
+        onClick={onClick}
+        dataHook={dataHook}
+        disabled={disabled}
+        suffixIcon={suffixIcon}
+        fullWidth={fullWidth}
+      >
+        {label}
+      </Button>
+    </DisabledTooltip>
+  );
+}

package/src/components/ActionControl/ActionControl.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ActionButton } from './ActionButton';
+import { ActionPopover } from './ActionPopover';
+import { ActionSubItemPrivate } from './ActionSubItemProps';
+import { ButtonProps } from '@wix/design-system';
+
+export function ActionControl(props: {
+  actionItem: ActionSubItemPrivate;
+  size?: ButtonProps['size'];
+  priority?: ButtonProps['priority'];
+  fullWidth?: ButtonProps['fullWidth'];
+  onPopoverClick?: () => void;
+}) {
+  const {
+    actionItem: { subItems },
+  } = props;
+
+  return subItems ? <ActionPopover {...props} /> : <ActionButton {...props} />;
+}

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

@@ -0,0 +1,30 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  ButtonUniDriver,
+  PopoverMenuUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export const ActionControlUniDriver = (base: UniDriver, body: UniDriver) => {
+  const getActionControl = (dataHook: string) => {
+    return {
+      getButton: () =>
+        ButtonUniDriver(base.$(`[data-hook="${dataHook}"]`), body),
+      getPopover: () => {
+        const popover = PopoverMenuUniDriver(
+          base.$(`[data-hook="${dataHook}-popover"]`),
+          body,
+        );
+        return {
+          ...popover,
+          open: () => popover.getTriggerElement(dataHook).click(),
+          getTriggerElement() {
+            return popover.getTriggerElement(dataHook);
+          },
+        };
+      },
+    };
+  };
+  return {
+    getActionControl,
+  };
+};

package/src/components/ActionControl/ActionPopover.tsx

@@ -0,0 +1,75 @@
+import { PopoverMenu, Button, ButtonProps } from '@wix/design-system';
+import React, { ReactNode, useMemo } from 'react';
+import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ActionSubItemPrivate } from './ActionSubItemProps';
+import { DisabledTooltip } from '../DisabledTooltip';
+
+export function ActionPopover(props: {
+  actionItem: ActionSubItemPrivate;
+  size?: ButtonProps['size'];
+  priority?: ButtonProps['priority'];
+  fullWidth?: ButtonProps['fullWidth'];
+  onPopoverClick?: () => void;
+}) {
+  const { actionItem, size, priority, onPopoverClick, fullWidth } = props;
+  const { dataHook, subItems, popoverMenuProps } = actionItem;
+
+  const allActions = useMemo(() => {
+    return subItems
+      ?.filter((subItemGroup) => subItemGroup?.length)
+      .reduce<ReactNode[]>((result, group, index, array) => {
+        return [
+          ...result,
+          ...group.map((item) => {
+            return (
+              <PopoverMenu.MenuItem
+                prefixIcon={item.prefixIcon}
+                disabled={item.disabled}
+                text={item.label}
+                key={item.label}
+                subtitle={item.subtitle}
+                dataHook={item.dataHook}
+                onClick={item.onClick}
+              />
+            );
+          }),
+          ...(index !== array.length - 1
+            ? [<PopoverMenu.Divider key={index} />]
+            : []),
+        ];
+      }, []);
+  }, [subItems]);
+
+  return (
+    <PopoverMenu
+      {...popoverMenuProps}
+      dataHook={dataHook ? `${dataHook}-popover` : undefined}
+      triggerElement={({ toggle }) => (
+        <DisabledTooltip
+          content={actionItem.tooltip}
+          dataHook={dataHook ? `${dataHook}-tooltip` : undefined}
+        >
+          <Button
+            skin="standard"
+            priority={priority}
+            size={size}
+            fullWidth={fullWidth}
+            dataHook={actionItem.dataHook}
+            onClick={() => {
+              onPopoverClick?.();
+              toggle();
+            }}
+            ellipsis
+            prefixIcon={actionItem.prefixIcon}
+            disabled={actionItem.disabled}
+            suffixIcon={<ChevronDown />}
+          >
+            {actionItem.label}
+          </Button>
+        </DisabledTooltip>
+      )}
+    >
+      {allActions}
+    </PopoverMenu>
+  );
+}