@wix/patterns 1.255.0 → 1.256.0

package/src/components/SlidingModal/SlidingModal.tsx

@@ -0,0 +1,134 @@
+import React, {
+  HTMLAttributes,
+  ReactNode,
+  RefCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { st, classes } from './SlidingModal.st.css.js';
+
+export interface SlidingModalProps {
+  dataHook?: string;
+  width: string | number;
+  isOpen?: boolean;
+  style?: HTMLAttributes<HTMLElement>['style'];
+  className?: HTMLAttributes<HTMLElement>['className'];
+  children?: ReactNode;
+  contentRef?: RefCallback<HTMLDivElement>;
+  onExited?: () => void;
+  onEntered?: () => void;
+  onEntering?: () => void;
+  onExiting?: () => void;
+  transitionStatus?: string;
+  onRequestClose?: () => void;
+  shadowWidth?: number;
+}
+
+export function SlidingModal(props: SlidingModalProps) {
+  const {
+    dataHook,
+    className,
+    style: styleProp,
+    shadowWidth = 20,
+    width,
+    isOpen,
+    children,
+    contentRef,
+    onExited,
+    onEntered,
+    onEntering,
+    onExiting,
+    onRequestClose,
+    transitionStatus,
+  } = props;
+
+  const style = useMemo(
+    () => ({
+      ...styleProp,
+      transform: `translate3d(${
+        isOpen
+          ? 0
+          : typeof width === 'number'
+          ? `${width + shadowWidth}px`
+          : `${width}px`
+      }, 0, 0)`,
+    }),
+    [styleProp, width, isOpen],
+  );
+
+  const isOpenRef = useRef(isOpen);
+  const divRef = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'test' && isOpen) {
+      onEntered?.();
+    } else {
+      if (process.env.NODE_ENV === 'test' && isOpenRef.current) {
+        onExited?.();
+      }
+    }
+
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+
+  useEffect(() => {
+    const rootElement = divRef.current;
+
+    if (!rootElement) {
+      return;
+    }
+
+    const onTransitionEnd = (e: TransitionEvent) => {
+      if (e.propertyName === 'transform') {
+        isOpenRef.current ? onEntered?.() : onExited?.();
+      }
+    };
+
+    const onTransitionStart = (e: TransitionEvent) => {
+      if (e.propertyName === 'transform') {
+        isOpenRef.current ? onEntering?.() : onExiting?.();
+      }
+    };
+
+    rootElement.addEventListener('transitionend', onTransitionEnd);
+    rootElement.addEventListener('transitionstart', onTransitionStart);
+
+    return () => {
+      rootElement.removeEventListener('transitionend', onTransitionEnd);
+      rootElement.removeEventListener('transitionstart', onTransitionStart);
+    };
+  }, []);
+
+  return (
+    <div
+      tabIndex={-1}
+      onKeyDown={(e) => {
+        if (e.nativeEvent.code === 'Escape') {
+          onRequestClose?.();
+        }
+      }}
+      ref={(el) => {
+        if (el) {
+          divRef.current = el;
+        }
+
+        contentRef?.(el);
+      }}
+      data-hook={dataHook}
+      data-transition-status={transitionStatus}
+      className={st(
+        classes.root,
+        {
+          exited: transitionStatus === 'exited',
+        },
+        ...[className, isOpen ? 'cairo-sliding-modal-is-open' : undefined],
+      )}
+      role="presentation"
+      style={style}
+      aria-modal={undefined}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export const SlidingModalUniDriver = (base: UniDriver, _: UniDriver) => {
+  const isOpen = () => base.hasClass('cairo-sliding-modal-is-open');
+
+  return {
+    ...baseUniDriverFactory(base),
+    isOpen,
+  };
+};

package/src/components/SlidingModal/index.ts

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

package/src/components/Splash/Splash.tsx

@@ -0,0 +1,44 @@
+import { TaskState } from '@wix/bex-core';
+import React, { ReactElement, ReactNode } from 'react';
+import { Box, BoxProps, Loader } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+
+export interface SplashProps extends Partial<BoxProps> {
+  state: TaskState<unknown>;
+  children?: ReactNode;
+  renderError: (params: { err: unknown; isOnline: boolean }) => ReactElement;
+  dataHook?: string;
+}
+
+function _Splash(props: SplashProps) {
+  const { state, children, renderError, height = '100vh', ...rest } = props;
+
+  const { status } = state;
+
+  let child: ReactNode;
+
+  if (status.isIdle || status.isLoading) {
+    child = (
+      <Box height="100%" align="center" verticalAlign="middle">
+        <Loader dataHook="initial-loader" size="large" />
+      </Box>
+    );
+  } else {
+    child = children;
+  }
+
+  return (
+    <Box
+      boxSizing="border-box"
+      align="center"
+      width="100%"
+      direction="vertical"
+      {...rest}
+      height={height}
+    >
+      {child}
+    </Box>
+  );
+}
+
+export const Splash = observer(_Splash);

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

@@ -0,0 +1,24 @@
+import { LoaderUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+
+export function SplashUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+  { dataHook: _ }: { dataHook: string },
+) {
+  const getInitialLoaderBase = () => base.$('[data-hook="initial-loader"]');
+  const getInitialLoader = () => LoaderUniDriver(getInitialLoaderBase(), body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    waitInitialLoader: (timeout?: number) =>
+      getInitialLoaderBase().wait(timeout),
+    /** Indicates whether initial loader is in loading status */
+    isInitialLoaderLoading: () => getInitialLoader().isLoading(),
+    /** Indicates whether initial loader exists */
+    initialLoaderExists: () => getInitialLoader().exists(),
+    waitInitialLoaderRemoved: (timeout?: number) =>
+      waitFor(async () => !(await getInitialLoader().exists()), timeout),
+  };
+}

package/src/components/Splash/index.ts

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

package/src/components/SummaryBar/SummaryBar.tsx

@@ -0,0 +1,151 @@
+import {
+  Box,
+  Divider,
+  SkeletonGroup,
+  SkeletonLine,
+  Table,
+  TableToolbar,
+  Text,
+  TextButton,
+} from '@wix/design-system';
+import React, { Fragment } from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+import { useSelector } from '../../useSelector';
+import { Trans } from '../Trans';
+
+export interface SummaryItem {
+  title: string;
+  value: string;
+}
+export type SummaryBarStatus = 'loading' | 'error' | 'success';
+export type SummaryData = SummaryItem[];
+
+export interface SummaryBarProps {
+  /**
+   * Data to display in the summary bar.
+   * @external
+   */
+  data: SummaryData;
+  /**
+   * Summary bar status.
+   * <br><br>
+   * Supported values:<br>
+   * - `"success"`<br>
+   * - `"loading"`<br>
+   * - `"error"`
+   * @external
+   * @default success
+   */
+  status: SummaryBarStatus;
+  /**
+   * Function that is called every time **Reload** is clicked.
+   * @external
+   */
+  onRetry: () => void | Promise<void>;
+}
+
+const SkeletonSummaryBar = () => (
+  <SkeletonGroup dataHook="skeleton-summary-bar">
+    <Box gap="SP4" height="18px" verticalAlign="middle">
+      <SkeletonLine width="112px" />
+      <SkeletonLine width="112px" />
+      <SkeletonLine width="112px" />
+    </Box>
+  </SkeletonGroup>
+);
+
+const ErrorSummaryBar = ({
+  onRetry,
+}: {
+  onRetry: SummaryBarProps['onRetry'];
+}) => {
+  const { translate: t, ...container } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+
+  return (
+    <Box gap="3px" dataHook="error-summary-bar">
+      <Text
+        weight="thin"
+        size="small"
+        skin="standard"
+        secondary
+        dataHook="summary-bar-error-text"
+      >
+        {t('cairo.table.summaryBar.loadError')}
+      </Text>
+      <TextButton
+        size="small"
+        weight="thin"
+        dataHook="summary-bar-retry-button"
+        onClick={onRetry}
+      >
+        {t('cairo.table.summaryBar.loadError.cta')}
+      </TextButton>
+    </Box>
+  );
+};
+
+const SummaryBarContent = ({ data }: { data: SummaryBarProps['data'] }) => {
+  const { translate: t, ...container } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+
+  return (
+    <TableToolbar.ItemGroup dataHook="summary-bar-content">
+      {data.map(({ title, value }, index) => (
+        <Fragment key={index}>
+          <TableToolbar.Item>
+            <Box gap="3px">
+              <Box>
+                <Text
+                  weight="thin"
+                  size="small"
+                  skin="standard"
+                  secondary
+                  dataHook="summary-bar-item"
+                >
+                  <Trans
+                    i18nKey="cairo.table.summaryBar.list.item"
+                    values={{
+                      title,
+                      value,
+                    }}
+                    components={{
+                      value: (
+                        <Text weight="normal" size="small" skin="standard" />
+                      ),
+                    }}
+                  />
+                </Text>
+              </Box>
+            </Box>
+          </TableToolbar.Item>
+          <TableToolbar.Item>
+            {index !== data.length - 1 && (
+              <Box height="18px">
+                <Divider direction="vertical" dataHook="summary-bar-divider" />
+              </Box>
+            )}
+          </TableToolbar.Item>
+        </Fragment>
+      ))}
+    </TableToolbar.ItemGroup>
+  );
+};
+
+const _SummaryBar = (props: SummaryBarProps) => {
+  const { data, status, onRetry } = props;
+  const contentByStatus = {
+    loading: <SkeletonSummaryBar />,
+    error: <ErrorSummaryBar onRetry={onRetry} />,
+    success: <SummaryBarContent data={data} />,
+  };
+
+  return (
+    <Table.SubToolbar dataHook="summary-bar">
+      {contentByStatus[status]}
+    </Table.SubToolbar>
+  );
+};
+
+export const SummaryBar = observer(_SummaryBar);

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

@@ -0,0 +1,52 @@
+import {
+  TextButtonUniDriver,
+  TextUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+
+export const SummaryBarUniDriver = async (base: UniDriver, body: UniDriver) => {
+  const summaryBarBase = await base.get('[data-hook="summary-bar"]');
+
+  const isSuccessState = async () =>
+    (await summaryBarBase.get('[data-hook="summary-bar-content"]')).exists();
+
+  const isLoadingState = async () =>
+    (await summaryBarBase.get('[data-hook="skeleton-summary-bar"]')).exists();
+
+  const isErrorState = async () =>
+    (await summaryBarBase.get('[data-hook="error-summary-bar"]')).exists();
+
+  const getRetryButton = async () =>
+    TextButtonUniDriver(
+      await summaryBarBase.get('[data-hook="summary-bar-retry-button"]'),
+      body,
+    );
+
+  const getErrorText = async () =>
+    TextUniDriver(
+      await summaryBarBase.get('[data-hook="summary-bar-error-text"]'),
+      body,
+    );
+
+  const getItemTextAt = async (index: number) =>
+    (await summaryBarBase.getAll('[data-hook="summary-bar-item"]'))
+      .at(index)
+      .text();
+
+  return {
+    ...summaryBarBase,
+    /** Is SummaryBar in success state */
+    isSuccessState,
+    /** Is SummaryBar in loading state */
+    isLoadingState,
+    /** Is SummaryBar in error state */
+    isErrorState,
+    /**  Gets retry button text */
+    getRetryButton,
+    /**  Gets error text */
+    getErrorText,
+    getItemTextAt,
+  };
+};
+
+export default SummaryBarUniDriver;

package/src/components/SummaryBar/index.ts

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

package/src/components/TabTotal/TabTotalComponentType.ts

@@ -0,0 +1,4 @@
+import type { initTabTotal } from '../../state/initTabTotal';
+
+export type TabTotalComponentType = { initTabTotal?: typeof initTabTotal };
+export type TabTotalReactElementLike = { type: TabTotalComponentType };

package/src/components/TabTotal/TabTotalCounterBadge.tsx

@@ -0,0 +1,33 @@
+import { observer } from 'mobx-react-lite';
+import { CounterBadge, CounterBadgeProps } from '@wix/design-system';
+import React from 'react';
+import {
+  useFilterValueTotalState,
+  UseFilterValueTotalStateParams,
+} from './useFilterValueTotalState';
+import { FiltersMap } from '@wix/bex-core';
+import { initTabTotal } from '../../state/initTabTotal';
+
+export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
+  extends UseFilterValueTotalStateParams<V, T, F>,
+    Partial<CounterBadgeProps> {}
+
+function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
+  props: TabCounterBadgeProps<V, T, F>,
+) {
+  const { value, ...rest } = props;
+  const state = useFilterValueTotalState(props);
+
+  const {
+    totalsCollection: { totalStatus, total, lifecycleState },
+  } = state;
+
+  return totalStatus === 'success' && lifecycleState === 'result' ? (
+    <CounterBadge {...rest}>{total}</CounterBadge>
+  ) : null;
+}
+
+_TabCounterBadge.initTabTotal = initTabTotal;
+export const TabTotalCounterBadge = observer(_TabCounterBadge);
+TabTotalCounterBadge.displayName = 'TabTotalCounterBadge';
+TabTotalCounterBadge.initTabTotal = initTabTotal;

package/src/components/TabTotal/TabTotalDropdownOption.tsx

@@ -0,0 +1,35 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import {
+  useFilterValueTotalState,
+  UseFilterValueTotalStateParams,
+} from './useFilterValueTotalState';
+import { FiltersMap } from '@wix/bex-core';
+import { initTabTotal } from '../../state/initTabTotal';
+
+export interface TabTotalDropdownOptionProps<V, T, F extends FiltersMap>
+  extends UseFilterValueTotalStateParams<V, T, F> {}
+
+function _TabTotalDropdownOption<
+  V,
+  T = unknown,
+  F extends FiltersMap = FiltersMap,
+>(props: TabTotalDropdownOptionProps<V, T, F>) {
+  const state = useFilterValueTotalState(props);
+
+  const {
+    totalsCollection: {
+      result: { total },
+      initTask,
+    },
+  } = state;
+
+  const { isIdle, isLoading } = initTask.status;
+
+  return isIdle || isLoading ? null : <span data-hook="total">({total})</span>;
+}
+
+_TabTotalDropdownOption.initTabTotal = initTabTotal;
+export const TabTotalDropdownOption = observer(_TabTotalDropdownOption);
+TabTotalDropdownOption.displayName = 'TabTotalDropdownOption';
+TabTotalDropdownOption.initTabTotal = initTabTotal;

package/src/components/TabTotal/TabTotalParens.tsx

@@ -0,0 +1,38 @@
+import { observer } from 'mobx-react-lite';
+import { Text } from '@wix/design-system';
+import React from 'react';
+import {
+  useFilterValueTotalState,
+  UseFilterValueTotalStateParams,
+} from './useFilterValueTotalState';
+import { FiltersMap } from '@wix/bex-core';
+import { initTabTotal } from '../../state/initTabTotal';
+
+export interface TabTotalParensProps<V, T, F extends FiltersMap>
+  extends UseFilterValueTotalStateParams<V, T, F> {}
+
+function _TabTotalParens<V, T = unknown, F extends FiltersMap = FiltersMap>(
+  props: TabTotalParensProps<V, T, F>,
+) {
+  const state = useFilterValueTotalState(props);
+
+  const {
+    totalsCollection: {
+      result: { total },
+      initTask,
+    },
+  } = state;
+
+  const { isIdle, isLoading } = initTask.status;
+
+  return isIdle || isLoading ? null : (
+    <Text size="small">
+      (<span data-hook="total">{total}</span>)
+    </Text>
+  );
+}
+
+_TabTotalParens.initTabTotal = initTabTotal;
+export const TabTotalParens = observer(_TabTotalParens);
+TabTotalParens.displayName = 'TabTotalParens';
+TabTotalParens.initTabTotal = initTabTotal;

package/src/components/TabTotal/index.ts

@@ -0,0 +1,3 @@
+export * from './TabTotalParens';
+export * from './TabTotalCounterBadge';
+export * from './TabTotalDropdownOption';

package/src/components/TabTotal/useFilterValueTotalState.ts

@@ -0,0 +1,47 @@
+import { useFilterContext } from '../FilterContext';
+import { useCollectionContext } from '../CollectionContext';
+import { useEffect, useState } from 'react';
+import { FilterValueTotalState } from '../../state';
+import { CollectionOptimisticActions, FiltersMap } from '@wix/bex-core';
+
+export interface UseFilterValueTotalStateParams<V, T, F extends FiltersMap> {
+  /**
+   * The filter value (passed at first argument to `counterBadge(value)`)
+   */
+  readonly value: V | null | undefined;
+  /**
+   * [`OptimisticActions`](./?path=/story/features-actions-updates--collectionoptimisticactions) instance to wire the total to
+   */
+  readonly optimisticActions?: CollectionOptimisticActions<T, F>;
+  /**
+   * When set to `true` the total value will not change after table search
+   */
+  readonly ignoreSearch?: boolean;
+}
+
+export function useFilterValueTotalState<V, T, F extends FiltersMap>({
+  value,
+  ...params
+}: UseFilterValueTotalStateParams<V, T, F>) {
+  const filter = useFilterContext<V[]>();
+  const collection = useCollectionContext();
+
+  const [state] = useState(
+    () =>
+      new FilterValueTotalState({
+        filter,
+        value,
+        collection,
+        ...params,
+      }),
+  );
+
+  useEffect(() => state.init(), []);
+  useEffect(() => {
+    if (value !== state.value) {
+      state.refresh(value);
+    }
+  }, [value]);
+
+  return state;
+}

package/src/components/Table/Table.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { CollectionState, FiltersMap } from '@wix/bex-core';
+import { TableVirtual } from './TableVirtual';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CollectionTableBaseProps } from '../CollectionTable';
+import { TableState } from '../../state';
+import { TableCompat } from './TableCompat';
+import type { TableSectionsProp } from '../TableSections';
+
+export interface TableProps<T, F extends FiltersMap>
+  extends CollectionTableBaseProps<T, F> {
+  rowHeight?: number | ((item: T, index: number) => number);
+  estimatedRowHeight?: number;
+  /**
+   * A state instance created using the [`useTableCollection()`](./?path=/story/base-components-collections-table-usetablecollection--usetablecollection) hook, responsible for managing the data displayed in the table.
+   * @overrideType [TableState](./?path=/story/base-components-collections-table-tablestate--tablestate)
+   * @external
+   */
+  state: CollectionState<T, F> | TableState<T, F>;
+
+  // a flag to opt out from virtualization
+  isVirtual?: boolean;
+
+  /**
+   * Configuration for rendering table sections. When provided, the table will render with section headers
+   * that group related rows together
+   * @external
+   */
+  sections?: TableSectionsProp<T>;
+}
+
+export function Table<T, F extends FiltersMap = FiltersMap>(
+  props: TableProps<T, F>,
+) {
+  const { rowHeight, estimatedRowHeight, isVirtual, ...tableProps } = props;
+  const container = useWixPatternsContainer();
+
+  const { internalExperiments } = container;
+
+  const isVirtualExperiment = internalExperiments?.enabled(
+    'specs.Cairo.TableVirtualizationAsDefault',
+  );
+  return isVirtualExperiment && isVirtual !== false && !props.rowDetails ? (
+    <TableVirtual
+      {...tableProps}
+      rowHeight={rowHeight}
+      estimatedRowHeight={estimatedRowHeight}
+    />
+  ) : (
+    <TableCompat {...tableProps} />
+  );
+}