@wix/patterns 1.255.0 → 1.256.0

package/src/components/WixLogo.tsx

@@ -0,0 +1,24 @@
+import React, { memo, SVGAttributes } from 'react';
+
+export interface WixLogoProps extends SVGAttributes<SVGElement> {
+  height?: string | number;
+}
+
+export const WixLogo = memo(function WixLogo({
+  height = 24,
+  ...rest
+}: WixLogoProps) {
+  return (
+    <svg height={height} viewBox="0 0 61 24" {...rest}>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g transform="translate(-1683.000000, -1304.000000)" fill="#000000">
+          <g transform="translate(112.000000, 949.000000)">
+            <g transform="translate(1571.000000, 355.000000)">
+              <path d="M0,0.0273292282 C0,0.0273292282 2.41786898,-0.277699005 4.03035161,1.15034867 C5.0246874,2.03106399 5.31452389,3.4350531 5.31452389,3.4350531 L5.31452389,3.4350531 L8.60703217,16.2522535 L11.3446618,5.76186001 C11.6114139,4.64657368 12.0919098,3.26836161 12.8519825,2.33609222 C13.821524,1.1486302 15.7905312,1.0738768 16.000855,1.0738768 C16.2103238,1.0738768 18.179331,1.1486302 19.1480175,2.33609222 C19.9089452,3.26836161 20.3894411,4.64657368 20.6561932,5.76186001 L20.6561932,5.76186001 L23.3938228,16.2522535 L26.6854761,3.4350531 C26.6854761,3.4350531 26.9761676,2.03106399 27.9705034,1.15034867 C29.582986,-0.277699005 32,0.0273292282 32,0.0273292282 L32,0.0273292282 L25.6962702,23.9802083 C25.6962702,23.9802083 23.6169713,24.1314335 22.5764668,23.5978489 C21.209362,22.8984321 20.5595811,22.3579736 19.7319654,19.0988973 C18.994122,16.1929664 16.9293577,7.6590497 16.7404083,7.0507117 C16.647216,6.74997964 16.5360693,6.0333781 16.000855,6.0333781 C15.4759004,6.0333781 15.3553489,6.75083887 15.2595917,7.0507117 C15.0672224,7.65819046 13.005878,16.1929664 12.2688896,19.0988973 C11.4412739,22.3579736 10.790638,22.8984321 9.42438816,23.5978489 C8.38302875,24.1314335 6.30372983,23.9802083 6.30372983,23.9802083 L6.30372983,23.9802083 Z M37.9984057,4 L37.9984057,4.86521142 L38,4.86435563 L38,19.3239127 C37.9888402,22.2909632 37.7018733,22.9499274 36.4535672,23.6328539 C35.4834595,24.1643042 34,23.962336 34,23.962336 L34,23.962336 L34,7.76722125 C34,6.95421349 34.2518932,6.42105155 35.1813472,5.94266066 C35.7361499,5.65682425 36.2534874,5.43774005 36.7915504,5.11424854 C37.5260064,4.67394065 37.899163,4.15107503 37.9809763,4.02723843 L37.9984057,4 Z M40,0.106754283 C40,0.106754283 43.2565301,-0.4696547 44.8691229,1.05628515 C45.9010173,2.03326407 47.0549904,3.78993907 47.0549904,3.78993907 L47.0549904,3.78993907 L49.8941435,8.04610183 C50.0318944,8.2674017 50.211713,8.50842987 50.4995876,8.50842987 C50.7874622,8.50842987 50.9681056,8.2674017 51.1058565,8.04610183 L51.1058565,8.04610183 L53.9450096,3.78993907 C53.9450096,3.78993907 55.0989827,2.03326407 56.1308771,1.05628515 C57.7434699,-0.4696547 61,0.106754283 61,0.106754283 L61,0.106754283 L53.2834754,12.0415081 L60.9793786,23.9393787 C60.9793786,23.9393787 57.6469618,24.3854095 56.0335441,22.8577541 C55.0016497,21.8816329 53.9450096,20.2930772 53.9450096,20.2930772 L53.9450096,20.2930772 L51.1058565,16.0377722 C50.9681056,15.8156146 50.7874622,15.5754442 50.4995876,15.5754442 C50.211713,15.5754442 50.0318944,15.8156146 49.8941435,16.0377722 L49.8941435,16.0377722 L47.0549904,20.2930772 C47.0549904,20.2930772 46.0560902,21.8816329 45.0241958,22.8577541 C43.411603,24.3854095 40.0197965,23.9393787 40.0197965,23.9393787 L40.0197965,23.9393787 L47.7156998,12.0415081 Z M37.9895884,0.000831696656 L38,0.00107031391 C38,1.59175218 37.8509366,2.53585594 36.8903946,3.26969716 C36.5834994,3.50406094 36.0518135,3.86225524 35.4292547,4.09661902 C34.5755281,4.41990808 34,5 34,5 C34,2.10369577 34.4232762,1.05487627 35.5599841,0.434061564 C36.4336389,-0.0429767806 38,0.00107031391 38,0.00107031391 Z" />
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+});

package/src/components/WixPatternsModalsContainer.tsx

@@ -0,0 +1,91 @@
+import { SidePanelModal } from './SidePanelModal';
+import React, {
+  CSSProperties,
+  RefObject,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { addResizeObserver } from '@wix/bex-core';
+import { SidePanelsState } from '../state/SidePanelsState';
+
+export interface WixPatternsModalsContainerProps {
+  rootRef?: RefObject<HTMLElement | null | undefined>;
+  anchorRef?: RefObject<HTMLElement | null | undefined>;
+  zIndex?: CSSProperties['zIndex'];
+  state: SidePanelsState;
+}
+
+export function WixPatternsModalsContainer(
+  props: WixPatternsModalsContainerProps,
+) {
+  const { state, rootRef, anchorRef, zIndex = 1 } = props;
+
+  const { appendModalsToBody, lodash } = useWixPatternsContainer();
+
+  const [render, setRender] = useState<{
+    top?: number;
+    left?: number;
+    anchor?: HTMLElement | null;
+  }>({});
+
+  useEffect(() => {
+    const { container, top } = appendModalsToBody
+      ? {
+          container: document.body,
+          top: 0,
+        }
+      : {
+          container: rootRef?.current ?? document.body,
+          top: null,
+        };
+
+    const setTop = lodash.throttle(() => {
+      const id = window.requestAnimationFrame(() => {
+        setRender({
+          top: top ?? container.getBoundingClientRect().top,
+          left: container.getBoundingClientRect().right,
+          anchor: anchorRef?.current ?? container,
+        });
+      });
+
+      disposers.push(() => window.cancelAnimationFrame(id));
+    }, 300);
+
+    const disposers = [addResizeObserver(container, setTop)];
+
+    setTop();
+
+    return () => {
+      setTop.cancel();
+      disposers.forEach((d) => d?.());
+    };
+  }, []);
+
+  // creates a new stacking context
+  const modalsContainerStyle = useMemo(
+    () => ({
+      position: 'relative' as const,
+      zIndex,
+    }),
+    [zIndex],
+  );
+
+  let child = (
+    <div style={modalsContainerStyle} data-hook="cairo-modals-container">
+      {render.top != null && (
+        <SidePanelModal state={state} top={render.top} left={render.left} />
+      )}
+    </div>
+  );
+
+  if (render.anchor == null) {
+    return null;
+  }
+
+  child = createPortal(child, render.anchor);
+
+  return child;
+}

package/src/components/WixPatternsTestProvider.tsx

@@ -0,0 +1,36 @@
+import {
+  WixPatternsContainerOverridesProvider,
+  useWixPatternsContainerOverrides,
+} from '@wix/bex-core/react';
+import React, { ReactNode, useState } from 'react';
+import { WixPatternsContainerParams, QueryCache } from '@wix/bex-core';
+
+export interface WixPatternsTestProviderProps {
+  children: ReactNode;
+  overrides?: Partial<WixPatternsContainerParams>;
+}
+
+export const WixPatternsTestProvider = (
+  props: WixPatternsTestProviderProps,
+) => {
+  const { overrides, children } = props;
+
+  const existingWixPatternsContainerOverrides =
+    useWixPatternsContainerOverrides();
+
+  const [wixPatternsContainerOverrides] = useState(
+    (): Partial<WixPatternsContainerParams> => ({
+      queryCache: new QueryCache(),
+      ...existingWixPatternsContainerOverrides,
+      ...overrides,
+    }),
+  );
+
+  return (
+    <WixPatternsContainerOverridesProvider
+      value={wixPatternsContainerOverrides}
+    >
+      {children}
+    </WixPatternsContainerOverridesProvider>
+  );
+};

package/src/components/assertComponentType.ts

@@ -0,0 +1,77 @@
+import type { ReactElement } from 'react';
+import type { CustomColumns, CustomColumnsProps } from './CustomColumns';
+import type { MultiLevelSorting } from './MultiLevelSorting';
+import type {
+  CollectionViewsDropdown,
+  CollectionViewsDropdownProps,
+} from './CollectionViewsDropdown';
+import type { FiltersMap } from '@wix/bex-core';
+import {
+  PrimaryActionButtonProps,
+  ReorderModeToolbar,
+  ReorderModeToolbarBaseProps,
+  ToolbarSecondaryActionsProps,
+} from './CollectionToolbar';
+import { CollectionSearch, CollectionSearchProps } from './CollectionSearch';
+import { TabsFilterProps } from './TabsFilter';
+import { TableTopNotificationProps } from './TableTopNotification';
+import {
+  CollectionToolbarFilters,
+  CollectionToolbarFiltersProps,
+} from './CollectionToolbarFilters';
+import { ToolbarTitleProps } from './ToolbarTitle';
+
+export type CustomColumnsElement = ReactElement<
+  CustomColumnsProps,
+  typeof CustomColumns
+>;
+
+export type MultiLevelSortingElement = ReactElement<
+  {},
+  typeof MultiLevelSorting
+>;
+
+export type CollectionViewsDropdownElement<F extends FiltersMap> = ReactElement<
+  CollectionViewsDropdownProps<F>,
+  typeof CollectionViewsDropdown
+>;
+
+export type ReorderModeToolbarElement = ReactElement<
+  ReorderModeToolbarBaseProps,
+  typeof ReorderModeToolbar
+>;
+
+export type CollectionSearchElement = ReactElement<
+  CollectionSearchProps,
+  typeof CollectionSearch
+>;
+
+export type TabsFilterElement<V> = ReactElement<TabsFilterProps<V>>;
+
+export type TopNotificationElement = ReactElement<TableTopNotificationProps>;
+
+export type PrimaryActionButtonElement = ReactElement<PrimaryActionButtonProps>;
+
+export type ToolbarSecondaryActionsElement =
+  ReactElement<ToolbarSecondaryActionsProps>;
+
+export type CollectionToolbarFiltersElement = ReactElement<
+  CollectionToolbarFiltersProps,
+  typeof CollectionToolbarFilters
+>;
+
+export type ToolbarTitleElement = ReactElement<ToolbarTitleProps>;
+
+export function assertComponentType(
+  element: ReactElement | null | undefined | boolean,
+  displayName: string,
+  propName: string,
+) {
+  if (
+    element === true ||
+    (element &&
+      (element.type as { displayName?: string }).displayName !== displayName)
+  ) {
+    throw new Error(`Prop "${propName}" must be a <${displayName} /> element`);
+  }
+}

package/src/components/collectionStateProps.ts

@@ -0,0 +1,8 @@
+import { CollectionState, FiltersMap } from '@wix/bex-core';
+
+export interface CollectionStateProps<
+  T = unknown,
+  F extends FiltersMap = FiltersMap,
+> {
+  state: CollectionState<T, F>;
+}

package/src/components/common.st.css

@@ -0,0 +1,9 @@
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.fullHeight {
+  height: 100%;
+  min-height: 0;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "common614383107";
+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":"common614383107__root","column":"common614383107__column","fullHeight":"common614383107__fullHeight"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/createChildSlot.ts

@@ -0,0 +1,29 @@
+import {
+  Children,
+  ComponentType,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+} from 'react';
+
+export function createChildSlot<P>(name?: string) {
+  const Slot: ComponentType<P> & {
+    isElementOf: (el: ReactElement) => el is ReactElement<P>;
+    findElement: (
+      children?: ReactNode | ReactNode[],
+    ) => ReactElement<P> | undefined;
+  } = () => null;
+  Slot.displayName = name;
+
+  Slot.isElementOf = (el): el is ReactElement<P> => el.type === Slot;
+
+  Slot.findElement = (children) =>
+    children != null
+      ? Children.toArray(children).find(
+          (child): child is ReactElement<P> =>
+            isValidElement(child) && Slot.isElementOf(child),
+        )
+      : undefined;
+
+  return Slot;
+}

package/src/components/deleteSecondaryAction/deleteSecondaryAction.tsx

@@ -0,0 +1,48 @@
+import { Delete } from '@wix/wix-ui-icons-common';
+import React from 'react';
+import {
+  CollectionOptimisticActions,
+  DeleteManyParams,
+  FiltersMap,
+} from '@wix/bex-core';
+import { ActionCellAPI } from '../../state';
+
+export interface DeleteSecondaryActionProps<T, F extends FiltersMap, R>
+  extends DeleteManyParams<T, R> {
+  /**
+   * Actions for performing optimistic updates on the collection.
+   * These updates are applied immediately for better user experience
+   * while waiting for the server response.
+   * @external
+   */
+  optimisticActions: CollectionOptimisticActions<T, F>;
+  /**
+   * API for interacting with the action cell.
+   * This API provides methods for manipulating and accessing the action cell's state.
+   * @external
+   */
+  actionCellAPI: ActionCellAPI<T, F>;
+}
+
+export function deleteSecondaryAction<T, F extends FiltersMap, R>(
+  props: DeleteSecondaryActionProps<T, F, R>,
+) {
+  const {
+    optimisticActions,
+    actionCellAPI: { openConfirmDeleteModal, collection, keyedItem },
+    ...deleteManyParams
+  } = props;
+  const { translate: t } = collection;
+  return {
+    dataHook: 'collection-delete-action',
+    text: t('cairo.delete.button'),
+    icon: <Delete />,
+    onClick: () => {
+      openConfirmDeleteModal({
+        primaryButtonOnClick: () => {
+          optimisticActions.deleteOne(keyedItem.item, deleteManyParams);
+        },
+      });
+    },
+  };
+}

package/src/components/deleteSecondaryAction/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export * from './CollectionPage';
+export * from './CollectionTable';
+export * from './Table';
+export * from './CollectionPagination';
+export * from './PaginationTable';
+export * from './CollectionContext';
+export * from './CollectionListItem';
+export * from './CollectionListRow';
+export * from './CollectionListHeader';
+export * from './CollectionToolbar';
+export * from './WixPatternsTestProvider';
+export * from './Picker';
+export * from './PickerContent';

package/src/components/isValidElement.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+/**
+ * This function performs a soft validation to check if the provided element is a React element.
+ * It returns a typed component but does not verify if the element type matches the expected T component.
+ *
+ * @param el - The element to be checked.
+ * @returns - Returns a boolean indicating whether the element is a valid React element of type P and T.
+ */
+export function isValidElement<
+  P,
+  T extends string | React.JSXElementConstructor<any>,
+>(el: any): el is React.ReactElement<P, T> {
+  return React.isValidElement<P>(el);
+}

package/src/components/uniDriverFactory.ts

@@ -0,0 +1,3 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+
+export type UniDriverFactory<T> = (base: UniDriver, body: UniDriver) => T;

package/src/components/unidriver.ts

@@ -0,0 +1,5 @@
+export * from './CollectionToolbar/CollectionToolbar.uni.driver';
+export * from './CollectionTable/CollectionTable.uni.driver';
+export * from './Table/Table.uni.driver';
+export * from './CollectionListItem/CollectionListItem.uni.driver';
+export * from './uniDriverFactory';

package/src/components/useCollectionReachBottom.tsx

@@ -0,0 +1,73 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+import { CollectionReachBottom } from '../state/CollectionReachBottom';
+import { ScrollableWindow } from '../reach-bottom-listener';
+import { CollectionState, FiltersMap } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { addEventListener } from '@wix/bex-core/util';
+
+export interface UseCollectionReachBottomParams<
+  T,
+  F extends FiltersMap = FiltersMap,
+> {
+  collection: CollectionState<T, F>;
+  containerRef?: RefObject<ScrollableWindow | null | undefined>;
+  scrollMoreAlways?: boolean;
+}
+
+export function useCollectionReachBottom<T, F extends FiltersMap = FiltersMap>({
+  collection,
+  containerRef,
+  scrollMoreAlways,
+}: UseCollectionReachBottomParams<T, F>) {
+  const targetRef = useRef<HTMLElement>(null);
+
+  const { lodash } = useWixPatternsContainer();
+
+  const {
+    result: { keyedItems },
+  } = collection;
+
+  const [collectionReachBottom] = useState(
+    () =>
+      new CollectionReachBottom({
+        collection,
+        lodash,
+      }),
+  );
+
+  useEffect(() => {
+    if (containerRef?.current == null) {
+      return;
+    }
+
+    collectionReachBottom.reachBottom.container = containerRef?.current;
+    collectionReachBottom.reachBottom.target = targetRef?.current;
+
+    const disposers = [
+      addEventListener(collection.emitter, 'triggerReachBottomListener', () => {
+        collectionReachBottom.triggerListenerIfReached();
+      }),
+    ];
+
+    collectionReachBottom.subscribe();
+
+    return () => {
+      collectionReachBottom.reachBottom.target = null;
+      disposers.forEach((d) => d());
+      collectionReachBottom.unsubscribe();
+    };
+  }, []);
+
+  // Check if should load more items (scrollable container is not filled yet) after new data has been rendered
+  useEffect(() => {
+    // In jsdom element dimensions are always 0, so calculations inside `CollectionReachBottom` are not relevant.
+    if (process.env.NODE_ENV === 'test') {
+      return;
+    }
+    if (scrollMoreAlways || containerRef?.current?.scrollHeight) {
+      collectionReachBottom.triggerListenerIfReached();
+    }
+  }, [keyedItems.length]);
+
+  return { containerRef, targetRef };
+}

package/src/components/usePageButtonBiParams.ts

@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+import { collectionPageContext, entityPageContext } from '../providers';
+import { ToolbarCollectionContext } from './ToolbarCollectionContext';
+
+export const usePageButtonBiParams = (): {
+  pageType: 'Entity' | 'Collection' | undefined;
+  location:
+    | 'Entity Page Header'
+    | 'Collection Page Header'
+    | 'Patterns toolbar'
+    | undefined;
+} => {
+  const entityContext = useContext(entityPageContext);
+  const collectionContext = useContext(collectionPageContext);
+  const toolbarContext = useContext(ToolbarCollectionContext);
+
+  if (toolbarContext) {
+    return { pageType: 'Collection', location: 'Patterns toolbar' };
+  }
+  if (entityContext) {
+    return { pageType: 'Entity', location: 'Entity Page Header' };
+  }
+
+  if (collectionContext) {
+    return { pageType: 'Collection', location: 'Collection Page Header' };
+  }
+
+  return { pageType: undefined, location: undefined };
+};

package/src/components/useWidgetPageStatus.tsx

@@ -0,0 +1,17 @@
+import { useContext, useMemo } from 'react';
+import { CardContainerProps } from './CardContainer';
+import { entityPageContext } from '../providers';
+
+export function useWidgetPageStatus(
+  widgetStatus: CardContainerProps['status'],
+) {
+  const pageState = useContext(entityPageContext);
+  const pageStatus = pageState?.initTask.status.status;
+
+  const status = useMemo(
+    () => (!pageState || pageStatus === 'success' ? widgetStatus : pageStatus),
+    [pageStatus, widgetStatus],
+  );
+
+  return { status };
+}

package/src/container/index.ts

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

package/src/container/useCairoTranslations.ts

@@ -0,0 +1,7 @@
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export const useCairoTranslations = () => {
+  const { i18n, useTranslation } = useWixPatternsContainer();
+
+  return useTranslation(i18n.options.defaultNS, { i18n });
+};

package/src/createContext.ts

@@ -0,0 +1,33 @@
+import {
+  createContext as createReactContext,
+  useContext as useReactContext,
+} from 'react';
+
+export function assertContextValue(
+  contextName: string,
+  value: unknown,
+): asserts value {
+  if (process.env.NODE_ENV !== 'production' && !value) {
+    throw new Error(`${contextName}: value was not provided`);
+  }
+}
+
+export function createContext<T>(contextName: string) {
+  const Context = createReactContext<T | null>(null);
+
+  const Provider = Context.Provider;
+  const Consumer = Context.Consumer;
+
+  const useContext = () => {
+    const value = useReactContext(Context);
+    assertContextValue(contextName, value);
+    return value;
+  };
+
+  return {
+    Context,
+    Provider,
+    Consumer,
+    useContext,
+  };
+}