@wix/patterns 1.255.0 → 1.256.0

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,154 @@
+import React, { useMemo, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Box,
+  DatePicker,
+  DatePickerProps,
+  Text,
+  TimeInput,
+  Input,
+  TimeInputProps,
+} from '@wix/design-system';
+import { DateRangePickerState } from '../../state';
+import { TimeSmall } from '@wix/wix-ui-icons-common';
+import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
+
+export interface DateRangePickerProps extends Partial<DatePickerProps> {
+  state: DateRangePickerState;
+}
+
+function _DateRangePicker(props: DateRangePickerProps) {
+  const { state, dataHook, popoverProps, ...rest } = props;
+  const { translate: t, filterByTime } = state;
+  const datePickerFrom = useRef<DatePicker>(null);
+  const datePickerTo = useRef<DatePicker>(null);
+  const { windowFlipPopoverProps } = useWindowFlipPopoverProps({
+    popoverProps,
+  });
+  const commonDatePickerProps: Partial<DatePickerProps> = {
+    shouldCloseOnSelect: true,
+    size: 'medium',
+    dateStyle: 'medium',
+    width: filterByTime ? '100%' : '172px',
+  };
+  const commonTimeInputProps: Partial<TimeInputProps> = {
+    size: 'medium',
+    prefix: (
+      <Input.IconAffix>
+        <TimeSmall />
+      </Input.IconAffix>
+    ),
+    popoverProps: windowFlipPopoverProps,
+  };
+
+  const filterDateFrom = useMemo(
+    () => (date: Date) => state.filterDateFrom(date),
+    [state.to],
+  );
+  const filterDateTo = useMemo(
+    () => (date: Date) => state.filterDateTo(date),
+    [state.from],
+  );
+
+  const filterDateTimeFrom = useMemo(
+    () => (date: Date) => state.filterDateTimeFrom(date),
+    [state.to, state.from, state.isToTimeSet],
+  );
+  const filterDateTimeTo = useMemo(
+    () => (date: Date) => state.filterDateTimeTo(date),
+    [state.from, state.to, state.isFromTimeSet],
+  );
+
+  const fromPicker = (
+    <DatePicker
+      ref={datePickerFrom}
+      placeholderText={t('cairo.filtersPanel.date.title')}
+      onChange={(from: Date) => state.onFromSelected(from)}
+      value={state.from ?? undefined}
+      filterDate={filterDateFrom}
+      onClose={() => state.onFromClosed()}
+      dataHook="date-range-picker-from"
+      popoverProps={{
+        ...windowFlipPopoverProps,
+        placement: 'bottom-start',
+      }}
+      clearButton
+      onClear={() => state.onFromSelected(null)}
+      {...rest}
+      {...commonDatePickerProps}
+    />
+  );
+
+  const toPicker = (
+    <DatePicker
+      ref={datePickerTo}
+      placeholderText={t('cairo.filtersPanel.date.title')}
+      onChange={(to: Date) => state.onToSelected(to)}
+      value={state.to ?? undefined}
+      filterDate={filterDateTo}
+      onClose={() => state.onToClosed()}
+      dataHook="date-range-picker-to"
+      popoverProps={{
+        ...windowFlipPopoverProps,
+        placement: 'bottom-end',
+      }}
+      clearButton
+      onClear={() => state.onToSelected(null)}
+      {...rest}
+      {...commonDatePickerProps}
+    />
+  );
+
+  return (
+    <Box
+      direction={filterByTime ? 'vertical' : 'horizontal'}
+      gap="SP2"
+      dataHook={dataHook}
+      width="100%"
+    >
+      <Box direction="vertical" gap="SP1">
+        <Text size="small">
+          {t('cairo.filtersPanel.date.from.placeholder')}
+        </Text>
+        {filterByTime ? (
+          <Box gap="SP2" width="100%">
+            <Box flex={1}>{fromPicker}</Box>
+            <TimeInput
+              dataHook="date-range-picker-time-from"
+              placeholder={t('cairo.filtersPanel.time.title')}
+              value={state.isFromTimeSet ? state.from : null}
+              onChange={({ date }) => state.onFromTimeSelected(date)}
+              disabled={!state.from}
+              filterTime={filterDateTimeFrom}
+              {...commonTimeInputProps}
+            />
+          </Box>
+        ) : (
+          fromPicker
+        )}
+      </Box>
+
+      <Box direction="vertical" gap="SP1">
+        <Text size="small">{t('cairo.filtersPanel.date.to.placeholder')}</Text>
+        {filterByTime ? (
+          <Box gap="SP2" width="100%">
+            <Box flex={1}>{toPicker}</Box>
+            <TimeInput
+              dataHook="date-range-picker-time-to"
+              placeholder={t('cairo.filtersPanel.time.title')}
+              value={state.isToTimeSet ? state.to : null}
+              onChange={({ date }) => state.onToTimeSelected(date)}
+              disabled={!state.to}
+              filterTime={filterDateTimeTo}
+              {...commonTimeInputProps}
+            />
+          </Box>
+        ) : (
+          toPicker
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export const DateRangePicker = observer(_DateRangePicker);

package/src/components/DateRangePicker/index.ts

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

package/src/components/DisabledTooltip/DisabledTooltip.tsx

@@ -0,0 +1,36 @@
+import { Box, Tooltip, TooltipProps } from '@wix/design-system';
+import React, { ReactElement } from 'react';
+
+export interface DisabledProps {
+  dataHook?: string;
+  disabled?: boolean;
+}
+
+export interface DisabledTooltipProps<P extends DisabledProps>
+  extends TooltipProps {
+  children: ReactElement<P>;
+  width?: string | number;
+}
+
+export function DisabledTooltip<P extends DisabledProps>(
+  props: DisabledTooltipProps<P>,
+) {
+  const { children, width, ...rest } = props;
+  const {
+    props: { disabled },
+  } = children;
+
+  let child = children;
+
+  if (disabled) {
+    child = (
+      <Tooltip {...rest}>
+        <Box direction="horizontal" width={width}>
+          {child}
+        </Box>
+      </Tooltip>
+    );
+  }
+
+  return child;
+}

package/src/components/DisabledTooltip/DisabledTooltipButton.uni.driver.ts

@@ -0,0 +1,25 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import {
+  ButtonUniDriver,
+  TooltipUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export function DisabledTooltipButtonUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+  { dataHook }: { dataHook: string },
+) {
+  const buttonBase = () => base.$(`[data-hook="${dataHook}"]`);
+
+  return {
+    ...baseUniDriverFactory(buttonBase()),
+    ...ButtonUniDriver(buttonBase(), body),
+    hover: () => buttonBase().hover(),
+    getTooltipText: () =>
+      TooltipUniDriver(
+        base.$(`[data-hook="${dataHook}-disabled-tooltip"]`),
+        body,
+      ).getTooltipText(),
+  };
+}

package/src/components/DisabledTooltip/index.ts

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

package/src/components/DiscardChangesModal.tsx

@@ -0,0 +1,25 @@
+import { useToolbarCollectionContext } from './ToolbarCollectionContext';
+
+import React from 'react';
+import { MessageActionModal } from './ActionModal';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export function DiscardChangesModal() {
+  const { translate: t } = useWixPatternsContainer();
+  const { pendingQuery } = useToolbarCollectionContext();
+
+  if (pendingQuery == null) {
+    return null;
+  }
+
+  return (
+    <MessageActionModal
+      dataHook="discard-changes-modal"
+      state={pendingQuery.discardChangesModal}
+      title={t('cairo.appliedFilters.discardChanges.title')}
+      content={t('cairo.appliedFilters.discardChanges.description')}
+      primaryButtonText={t('cairo.appliedFilters.discardChanges.CTA')}
+      secondaryButtonText={t('cairo.appliedFilters.applyAndClose.CTA')}
+    />
+  );
+}

package/src/components/DragAndDrop/CollectionDragAndDropBI.ts

@@ -0,0 +1,230 @@
+import { ActionMoveBase, FiltersMap, withoutIrrelevant } from '@wix/bex-core';
+import {
+  cairoDragActionUnsuccessfulUpdateInServer,
+  cairoDragItem,
+  cairoDragItemEndDrop,
+  cairoTryAgainClicked,
+} from '@wix/bex-core/bi';
+import { action } from 'mobx';
+import { OptimisticPatch } from '@wix/bex-core/dist/types/state/CollectionOptimisticPatch';
+import {
+  DragAndDropCollection,
+  DragAndDropParentState,
+} from './DragAndDropState';
+
+const withoutDefaults = withoutIrrelevant<
+  | 'currentTab'
+  | 'currentView'
+  | 'currentFilters'
+  | 'currentSortOrder'
+  | 'listSize'
+  | 'filteredListSize'
+  | 'initialItems'
+>();
+
+export interface CollectionDragAndDropBIParams<T, F extends FiltersMap> {
+  state: DragAndDropParentState<T, F>;
+  collection: DragAndDropCollection<F>;
+  getCollectionSnapshot?: () => {
+    [key: string]: string | number | undefined;
+  };
+  getBulkSelectCount: () => number;
+  getPendingMovePatchesCount: () => number | null | undefined;
+}
+export class CollectionDragAndDropBI<T, F extends FiltersMap> {
+  readonly state;
+  readonly collection;
+  readonly getCollectionSnapshot;
+  readonly getBulkSelectCount;
+  readonly getPendingMovePatchesCount;
+
+  startTime = 0;
+
+  constructor(params: CollectionDragAndDropBIParams<T, F>) {
+    this.state = params.state;
+    this.collection = params.collection;
+    this.getCollectionSnapshot = params.getCollectionSnapshot;
+    this.getBulkSelectCount = params.getBulkSelectCount;
+    this.getPendingMovePatchesCount = params.getPendingMovePatchesCount;
+  }
+
+  get dnd() {
+    return this.state._dnd;
+  }
+
+  get reportBi() {
+    return this.state.reportBi;
+  }
+
+  onAttemptDragStart = action((itemId: string) => {
+    if (!this.dnd) {
+      return () => {};
+    }
+    const { reportBi, dnd, collection, getBulkSelectCount } = this;
+
+    const { _isHandleActive } = dnd;
+    const {
+      query: { search },
+    } = collection;
+
+    const item = collection.getKeyedItem(itemId);
+
+    const startTime = performance.now();
+
+    reportBi(
+      withoutDefaults(cairoDragItem)({
+        itemId,
+        itemIndex: item?.index,
+        isFromHandle: _isHandleActive,
+        numItemsBefore: getBulkSelectCount(),
+        searchQuery: search.value,
+        isFromSearch: !search.isEmpty,
+      }),
+    );
+
+    return action(() => {
+      reportBi(
+        withoutDefaults(cairoDragItemEndDrop)({
+          isFromHandle: _isHandleActive,
+          itemId,
+          itemIndexBefore: item?.index,
+          duration: Math.round(performance.now() - startTime),
+          endType: 'drag disabled',
+          numItemsBefore: getBulkSelectCount(),
+          searchQuery: search.value,
+          isFromSearch: !search.isEmpty,
+        }),
+      );
+    });
+  });
+
+  onDragStart() {
+    if (!this.dnd) {
+      return;
+    }
+
+    const { reportBi, dnd, collection, getBulkSelectCount } = this;
+    const { active, _isHandleActive } = dnd;
+    const {
+      query: { search },
+    } = collection;
+
+    if (active == null) {
+      return;
+    }
+
+    this.startTime = performance.now();
+
+    reportBi(
+      withoutDefaults(cairoDragItem)({
+        itemId: active.key,
+        itemIndex: active.index,
+        isFromHandle: _isHandleActive,
+        numItemsBefore: getBulkSelectCount(),
+        searchQuery: search.value,
+        isFromSearch: !search.isEmpty,
+        dragAndDropID: dnd._moveId,
+      }),
+    );
+
+    return (params: { endType?: 'clicked ESC' | 'drop outside' | null }) => {
+      const { startTime } = this;
+
+      const { overId } = dnd;
+
+      const activeAfter = collection.getKeyedItem(active.key);
+
+      reportBi(
+        withoutDefaults(cairoDragItemEndDrop)({
+          isFromHandle: _isHandleActive,
+          itemId: active.key,
+          duration: Math.round(performance.now() - startTime),
+          endType:
+            params.endType ??
+            (overId === active.key ? 'drop back' : 'drop succeeded'),
+          numItemsBefore: getBulkSelectCount(),
+          itemIndexBefore: active.index,
+          itemIndexAfter: activeAfter?.index,
+          dragAndDropID: dnd._moveId,
+        }),
+      );
+    };
+  }
+
+  onMoveFailure(params: {
+    reason: 'Update failed' | 'Window closed' | 'Left page';
+    patches: OptimisticPatch<T>[];
+  }) {
+    const { reportBi, getBulkSelectCount } = this;
+    const { reason, patches } = params;
+    const errorPatch = patches[0];
+
+    if (!errorPatch?.move) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error('Missing move data in patch');
+      }
+      return;
+    }
+
+    const { from, over, moveId, isFromHandle } = errorPatch.move;
+
+    reportBi(
+      withoutDefaults(cairoDragActionUnsuccessfulUpdateInServer)({
+        ...errorPatch.collectionSnapshot,
+        numItemsBefore: getBulkSelectCount(),
+        numOfWaitingUpdates: patches.length,
+        timeFromEndDrag: Date.now() - errorPatch.createdAt,
+        itemIndexBefore: from.index,
+        itemIndexAfter: over.index,
+        errorType: reason,
+        itemId: from.key,
+        dragAndDropID: moveId,
+        wasFromHandle: isFromHandle,
+      }),
+    );
+  }
+
+  onMoveCancelled(move: ActionMoveBase<T>) {
+    const {
+      reportBi,
+      getCollectionSnapshot,
+      getBulkSelectCount,
+      getPendingMovePatchesCount,
+    } = this;
+
+    const { from, over, moveId, isFromHandle } = move;
+
+    reportBi(
+      withoutDefaults(cairoDragActionUnsuccessfulUpdateInServer)({
+        ...(getCollectionSnapshot?.() ?? {}),
+        numItemsBefore: getBulkSelectCount(),
+        numOfWaitingUpdates: getPendingMovePatchesCount() ?? 0,
+        timeFromEndDrag: 0,
+        itemIndexBefore: from.index,
+        itemIndexAfter: over.index,
+        errorType: 'External logic',
+        itemId: from.key,
+        dragAndDropID: moveId,
+        wasFromHandle: isFromHandle,
+      }),
+    );
+  }
+
+  onMoveRetry(params: { patches: OptimisticPatch<T>[] }) {
+    const { reportBi, collection } = this;
+    const { patches } = params;
+    const {
+      query: { search },
+    } = collection;
+    const errorPatch = patches[0];
+
+    reportBi(
+      withoutDefaults(cairoTryAgainClicked)({
+        ...errorPatch.collectionSnapshot,
+        isFromSearch: !search.isEmpty,
+        numOfWaitingUpdates: patches.length,
+        actionName: 'drag',
+      }),
+    );
+  }
+}

package/src/components/DragAndDrop/CollectionDragAndDropState.ts

@@ -0,0 +1,204 @@
+import {
+  addEventListener,
+  WixPatternsContainer,
+  CollectionState,
+  FiltersMap,
+} from '@wix/bex-core';
+import { action, makeObservable } from 'mobx';
+import { DragAndDropParentState, DragAndDropState } from './DragAndDropState';
+import { CollectionDragAndDropBI } from './CollectionDragAndDropBI';
+import { createOptimisticActionsOrderByModeReaction } from '../../state/DragAndDrop/createOptimisticActionsOrderByModeReaction';
+import { DragAndDropCancel } from './DragAndDrop';
+
+export type CollectionDragAndDropParentState<
+  T,
+  F extends FiltersMap,
+> = DragAndDropParentState<T, F> & {
+  collection: CollectionState<T, F>;
+  getCollectionSnapshot?: () => {
+    [key: string]: string | number | undefined;
+  };
+};
+
+interface CollectionDragAndDropStateParams<T, F extends FiltersMap> {
+  container: WixPatternsContainer;
+  state: CollectionDragAndDropParentState<T, F>;
+  a11yContainer: {
+    current: HTMLElement | null | undefined;
+  };
+}
+export class CollectionDragAndDropState<T, F extends FiltersMap> {
+  dnd: DragAndDropState<T, F>;
+  state;
+  bi;
+
+  dragAndDropCancel?: DragAndDropCancel<T, F>;
+
+  constructor(params: CollectionDragAndDropStateParams<T, F>) {
+    const { state } = params;
+    const { collection } = state;
+
+    this.state = state;
+
+    this.bi = new CollectionDragAndDropBI({
+      state,
+      collection,
+      getCollectionSnapshot: state.getCollectionSnapshot,
+      getPendingMovePatchesCount: () =>
+        collection._optimisticActions?.pendingMovePatches.length,
+      getBulkSelectCount: () => collection.bulkSelect.selectedCount,
+    });
+
+    this.dnd = new DragAndDropState<T, F>({
+      state: this.state,
+      bi: this.bi,
+      collection: params.state.collection,
+      container: params.container,
+      move: () => this._collectionMove(),
+      announcements: {
+        dragHandleLabel: (id) => {
+          const { translate: t } = params.container;
+          const { itemName } = this.collection;
+
+          const item = this.collection.getKeyedItem(id as string)?.item;
+
+          return t('cairo.dragAndDrop.button-role-label.sr', {
+            itemName: item ? itemName(item) : '',
+          });
+        },
+        itemDescription: (id) => {
+          const { itemName } = this.collection;
+
+          const item = this.collection.getKeyedItem(id as string)?.item;
+
+          return item ? itemName(item) : '';
+        },
+      },
+    });
+
+    this.dnd.onCancel = this._onCancel;
+
+    makeObservable(this, {
+      _collectionMove: action,
+    });
+  }
+
+  get collection() {
+    return this.state.collection;
+  }
+
+  get optimisticActions() {
+    return this.collection._optimisticActions;
+  }
+
+  init() {
+    const { optimisticActions, dnd, bi, collection } = this;
+    const { container } = dnd;
+    const { translate: t } = container;
+
+    const disposers = [
+      dnd.init(),
+      createOptimisticActionsOrderByModeReaction(dnd, collection),
+      addEventListener(container.events, 'navigation', () => {
+        if (optimisticActions?.hasRunningSequence) {
+          const patches = optimisticActions.pendingMovePatches;
+          return {
+            title: t('cairo.dragAndDrop.leaveSite.modal.title'),
+            content: t('cairo.dragAndDrop.leaveSite.modal.description'),
+            onResume: action(() => {
+              bi.onMoveFailure({
+                reason: 'Left page',
+                patches,
+              });
+            }),
+          };
+        }
+        return null;
+      }),
+      ...(optimisticActions
+        ? [
+            addEventListener(
+              optimisticActions.events,
+              'dragAndDropSequenceError',
+              ({ patches }) => {
+                bi.onMoveFailure({
+                  reason: 'Update failed',
+                  patches,
+                });
+              },
+            ),
+            addEventListener(
+              optimisticActions.events,
+              'dragAndDropSequenceRetry',
+              ({ patches }) => {
+                bi.onMoveRetry({ patches });
+              },
+            ),
+          ]
+        : []),
+    ];
+
+    const onWindowClosedDuringSequence = () => {
+      if (optimisticActions?.hasRunningSequence) {
+        bi.onMoveFailure({
+          reason: 'Window closed',
+          patches: optimisticActions.pendingMovePatches,
+        });
+      }
+    };
+
+    window.addEventListener('unload', onWindowClosedDuringSequence);
+
+    return action(() => {
+      disposers.forEach((d) => d());
+      window.removeEventListener('unload', onWindowClosedDuringSequence);
+    });
+  }
+
+  _onCancel = async () => {
+    const { dnd } = this;
+    const dragEndEvent = dnd._createDragEndEvent();
+
+    if (dragEndEvent == null) {
+      return false;
+    }
+
+    const shouldCancel = await this.dragAndDropCancel?.(
+      dnd._createSimpleDragEndEvent(dragEndEvent),
+    );
+
+    if (!shouldCancel) {
+      return false;
+    }
+
+    dnd._maybeShowErrorToast(shouldCancel, dragEndEvent);
+
+    return true;
+  };
+
+  _collectionMove() {
+    const { onSubmit, reorderModeState } = this.dnd;
+    const { optimisticActions } = this;
+    if (optimisticActions == null) {
+      return;
+    }
+
+    const dragEndEvent = this.dnd._createDragEndEvent();
+
+    if (dragEndEvent == null) {
+      return;
+    }
+
+    optimisticActions.move(dragEndEvent, {
+      onTryAgain: async () => {
+        await reorderModeState?.onBulkSubmit();
+      },
+      submit: reorderModeState
+        ? () => reorderModeState?.onSubmit
+        : onSubmit
+        ? (event) => onSubmit(this.dnd._createSimpleDragEndEvent(event))
+        : undefined,
+      collectionSnapshot: this.state.getCollectionSnapshot?.() ?? {},
+    });
+  }
+}