@wix/patterns 1.255.0 → 1.256.0

package/src/providers/CairoProvider.tsx

@@ -0,0 +1,43 @@
+import {
+  CairoProvider as CairoProviderBase,
+  CairoProviderProps as CairoProviderBaseProps,
+} from '@wix/bex-core/react';
+import { configure } from '@wix/bex-utils/react-dom';
+import React, { useState } from 'react';
+import { version as cairoVersion } from '../version';
+
+import '@wix/design-system/styles.global.css';
+import '../styles.global.css';
+
+import * as wixDesignSystemVersion from '../wix-design-system-version';
+import { minimalRequiredWdsRuntimeCheck } from '../minimalRequiredWdsRuntimeCheck';
+
+configure();
+
+if (process.env.NODE_ENV !== 'production') {
+  minimalRequiredWdsRuntimeCheck({
+    required: wixDesignSystemVersion.required,
+  });
+}
+
+export interface CairoProviderProps extends CairoProviderBaseProps {}
+
+export function CairoProvider({
+  value: valueProp,
+  children,
+  ...rest
+}: CairoProviderProps) {
+  const [value] = useState(() => ({
+    ...valueProp,
+    environment: {
+      ...valueProp.environment,
+      uiLibVersion: cairoVersion,
+    },
+  }));
+
+  return (
+    <CairoProviderBase {...rest} value={value}>
+      {children}
+    </CairoProviderBase>
+  );
+}

package/src/providers/CollectionPageContext.ts

@@ -0,0 +1,6 @@
+export {
+  CollectionPageContextProvider,
+  CollectionPageContextConsumer,
+  useCollectionPageContext,
+  collectionPageContext,
+} from '@wix/bex-core/react';

package/src/providers/DropdownTranslationProvider.tsx

@@ -0,0 +1,64 @@
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useCallback,
+} from 'react';
+
+export interface DropdownTranslationContextType {
+  translations: DropdownTranslate;
+}
+
+export const DropdownTranslationContext = createContext<
+  DropdownTranslationContextType | undefined
+>(undefined);
+
+export const DropdownTranslationProvider: React.FC<{
+  children: ReactNode;
+  value: DropdownTranslationContextType;
+}> = ({ children, value }) => {
+  return (
+    <DropdownTranslationContext.Provider value={value}>
+      {children}
+    </DropdownTranslationContext.Provider>
+  );
+};
+
+type TranslationsKeys =
+  | 'emptyState'
+  | 'noResultsState'
+  | 'placeholder'
+  | 'clearButtonTooltip';
+
+type TranslationsMap = {
+  [key in TranslationsKeys]: string;
+} & {
+  selectedItems: (params: { total: number }) => string;
+};
+
+export type DropdownTranslate = TranslationsMap;
+
+export const useDropdownTranslationContext = () => {
+  const context = useContext(DropdownTranslationContext);
+
+  if (!context) {
+    throw new Error(
+      'useDropdownTranslationContext must be used within a DropdownTranslationProvider',
+    );
+  }
+
+  const translate = useCallback(
+    (key: keyof DropdownTranslate, options?: { total: number }) => {
+      const valueFuncOrString = context.translations[key];
+
+      if (typeof valueFuncOrString === 'function') {
+        return valueFuncOrString(options!);
+      }
+
+      return valueFuncOrString;
+    },
+    [context],
+  );
+
+  return { translate };
+};

package/src/providers/EntityPageContext.ts

@@ -0,0 +1,19 @@
+import { EntityPageState } from '../state';
+import { createContext, useContext } from 'react';
+import { assertContextValue } from '../createContext';
+import { FieldValues } from 'react-hook-form';
+
+const context = createContext<EntityPageState<any, any> | null>(null);
+
+export const entityPageContext = context;
+export const EntityPageContextProvider = context.Provider;
+export const EntityPageContextConsumer = context.Consumer;
+
+export const useEntityPageContext = <
+  T,
+  V extends FieldValues = FieldValues,
+>() => {
+  const value = useContext(entityPageContext);
+  assertContextValue('EntityPageProvider', value);
+  return value as EntityPageState<T, V>;
+};

package/src/providers/FilterToolbarState.ts

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import { ToolbarCollectionContext } from '../components/ToolbarCollectionContext';
+import type { Filter } from '@wix/bex-core';
+
+export interface FilterToolbarState {
+  getPendingFilter<A>(filter: A): A | Filter<any>;
+}
+
+const fallbackState: FilterToolbarState = {
+  getPendingFilter: (filter) => filter,
+};
+
+export function useFilterToolbarState(): FilterToolbarState {
+  const value = useContext(ToolbarCollectionContext);
+
+  if (value == null) {
+    return fallbackState;
+  }
+
+  return value;
+}

package/src/providers/FilterTranslationProvider.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { DropdownTranslationContext } from './DropdownTranslationProvider';
+import { useSelector } from '../useSelector';
+
+export const FilterTranslationProvider: React.FC<{
+  children: ReactNode;
+}> = ({ children }) => {
+  const { translate: t, initTask } = useWixPatternsContainer();
+  useSelector(() => initTask.status);
+
+  const placeholder = (() => {
+    const translationKey = 'cairo.selectPlaceholder';
+    if (t(translationKey) !== translationKey) {
+      return t(translationKey);
+    }
+    return '';
+  })();
+
+  return (
+    <DropdownTranslationContext.Provider
+      value={{
+        translations: {
+          selectedItems: ({ total }) =>
+            t('cairo.dropdownSearch.filters.selected', { total }),
+          emptyState: t('cairo.dropdownSearch.filters.emptyState'),
+          noResultsState: t('cairo.dropdownSearch.filters.noResults'),
+          placeholder,
+          clearButtonTooltip: t('cairo.dropdownSearch.select.filers.clear'),
+        },
+      }}
+    >
+      {children}
+    </DropdownTranslationContext.Provider>
+  );
+};

package/src/providers/FormPageContext.ts

@@ -0,0 +1,5 @@
+export {
+  FormPageContextProvider,
+  FormPageContextConsumer,
+  useFormPageContext,
+} from '@wix/bex-core/react';

package/src/providers/PageContext.ts

@@ -0,0 +1,5 @@
+export {
+  PageContextProvider,
+  PageContextConsumer,
+  usePageContext,
+} from '@wix/bex-core/react';

package/src/providers/ScrollableContentContext.ts

@@ -0,0 +1,20 @@
+import { createContext, RefObject, useContext } from 'react';
+import { usePageScrollContext } from '@wix/design-system';
+
+interface ScrollableContentContextValue {
+  scrollableContentRef: RefObject<HTMLElement | null | undefined>;
+}
+
+export const ScrollableContentContext =
+  createContext<ScrollableContentContextValue | null>(null);
+
+export function useScrollableContentContext() {
+  const value = useContext(ScrollableContentContext);
+  const pageScrollContext = usePageScrollContext();
+
+  if (value != null) {
+    return value;
+  }
+
+  return pageScrollContext;
+}

package/src/providers/SettingsPageContext.ts

@@ -0,0 +1,19 @@
+import { SettingsPageState } from '../state';
+import { createContext, useContext } from 'react';
+import { assertContextValue } from '../createContext';
+import { FieldValues } from 'react-hook-form';
+
+const context = createContext<SettingsPageState<any, any> | null>(null);
+
+export const settingsPageContext = context;
+export const SettingsPageContextProvider = context.Provider;
+export const SettingsPageContextConsumer = context.Consumer;
+
+export const useSettingsPageContext = <
+  T,
+  V extends FieldValues = FieldValues,
+>() => {
+  const value = useContext(settingsPageContext);
+  assertContextValue('SettingsPageProvider', value);
+  return value as SettingsPageState<T, V>;
+};

package/src/providers/TableContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+import { TableState } from '../state';
+import { FiltersMap } from '@wix/bex-core';
+import { assertContextValue } from '../createContext';
+
+export const TableContext = createContext<TableState<any, any> | null>(null);
+
+export const TableProvider = TableContext.Provider;
+export const TableConsumer = TableContext.Consumer;
+
+export const useTableContext = <T, F extends FiltersMap>() => {
+  const value = useContext(TableContext);
+  assertContextValue('TableProvider', value);
+  return value as TableState<T, F>;
+};

package/src/providers/WidgetsFormContext.ts

@@ -0,0 +1,5 @@
+export {
+  WidgetsFormContextProvider,
+  WidgetsFormContextConsumer,
+  useWidgetsFormContext,
+} from '@wix/bex-core/react';

package/src/providers/WixPatternsBaseProvider.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode, useState } from 'react';
+import { CairoProvider } from './CairoProvider';
+import { experimentsFallbackApi, WixPatternsEssentials } from '@wix/bex-core';
+import { Trans } from '@wix/bex-utils/@wix/wix-i18n-config';
+import { WixPatternsMinimalEssentials } from './WixPatternsMinimalEssentials';
+
+export interface WixPatternsBaseProviderProps {
+  /**
+   * Minimal essentials that are required for wix-patterns to work (i.e i18n,bi,experiments)
+   */
+  value: WixPatternsMinimalEssentials;
+  children?: ReactNode;
+  localCache?: boolean;
+}
+
+export function WixPatternsBaseProvider({
+  value: valueProp,
+  children,
+  ...rest
+}: WixPatternsBaseProviderProps) {
+  const [value] = useState((): WixPatternsEssentials => {
+    const experiments = experimentsFallbackApi();
+
+    return {
+      useExperiments: () => ({
+        ready: true,
+        experiments,
+      }),
+      experiments,
+      Trans,
+      ...valueProp,
+      user: {
+        permissions: [],
+        ...valueProp.user,
+      },
+    };
+  });
+
+  return (
+    <CairoProvider {...rest} value={value}>
+      {children}
+    </CairoProvider>
+  );
+}

package/src/providers/WixPatternsMinimalEssentials.ts

@@ -0,0 +1,11 @@
+import { WixPatternsEssentials } from '@wix/bex-core';
+
+export type WixPatternsMinimalEssentials = Omit<
+  WixPatternsEssentials,
+  'useExperiments' | 'experiments' | 'Trans' | 'user'
+> & {
+  useExperiments?: WixPatternsEssentials['useExperiments'];
+  experiments?: WixPatternsEssentials['experiments'];
+  Trans?: WixPatternsEssentials['Trans'];
+  user?: WixPatternsEssentials['user'];
+};

package/src/providers/WixPatternsRouterProvider.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState } from 'react';
+import { WixPatternsRouterState } from '../state/WixPatternsRouterState';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export const WixPatternsRouterContext =
+  createContext<WixPatternsRouterState | null>(null);
+
+export interface WixPatternsRouterProviderProps {
+  children: React.ReactNode;
+}
+
+export const WixPatternsRouterProvider = ({
+  children,
+}: WixPatternsRouterProviderProps) => {
+  const container = useWixPatternsContainer();
+
+  const [routerState] = useState(
+    () => new WixPatternsRouterState({ container, navigate: () => {} }),
+  );
+
+  return (
+    <WixPatternsRouterContext.Provider value={routerState}>
+      {children}
+    </WixPatternsRouterContext.Provider>
+  );
+};
+
+export const useWixPatternsRouter = () => useContext(WixPatternsRouterContext);

package/src/providers/index.ts

@@ -0,0 +1,12 @@
+export * from './CairoProvider';
+export * from './CollectionPageContext';
+export * from './PageContext';
+export * from './FormPageContext';
+export * from './WidgetsFormContext';
+export * from './TableContext';
+export * from './FilterToolbarState';
+export * from './EntityPageContext';
+export * from './SettingsPageContext';
+export * from './ScrollableContentContext';
+export * from './DropdownTranslationProvider';
+export * from './FilterTranslationProvider';

package/src/reach-bottom-listener/index.ts

@@ -0,0 +1,3 @@
+export * from './reachBottomListener';
+export * from './scrollableWindow';
+export * from './scrollPosition';

package/src/reach-bottom-listener/reachBottomListener.ts

@@ -0,0 +1,151 @@
+import { ScrollableWindow } from './scrollableWindow';
+import { ScrollPosition } from './scrollPosition';
+import { DebouncedFunc } from 'lodash';
+import { EventEmitter } from '@wix/bex-core/events';
+import { PartialLodash } from '@wix/bex-core';
+
+const debounceOptions = { trailing: true };
+const debounceDelay = 400;
+const scrollIdleDelay = 250;
+
+export interface ReachBottomListenerParams {
+  // distance from the bottom to trigger the callback
+  offsetPX?: number;
+  onReachBottom: () => unknown;
+  // throttle scroll event, debounce resize event
+  delay?: number;
+  container: ScrollableWindow;
+  target?: HTMLElement | null;
+  lodash: PartialLodash;
+}
+
+export interface ReachBottomListener extends ReachBottomListenerParams {}
+export class ReachBottomListener {
+  scrollPosition!: ScrollPosition;
+  offsetPX: number;
+  onReachBottom: () => unknown;
+
+  scrollListener: () => Promise<void> | undefined;
+  container: ScrollableWindow;
+  _target?: HTMLElement | null;
+  targetScrollingParent?: HTMLElement | null;
+  triggerListenerIfReached: DebouncedFunc<() => Promise<boolean>>;
+  isScrolling = false;
+
+  events = new EventEmitter();
+
+  debounceSetScrollingIdle: () => unknown;
+
+  constructor(params: ReachBottomListenerParams) {
+    this.container = params.container;
+    this.target = params.target;
+    this.offsetPX = params.offsetPX ?? 0;
+    this.onReachBottom = params.onReachBottom;
+    const delay = Math.max(params.delay || 0, 0);
+
+    const {
+      lodash: { throttle, debounce },
+    } = params;
+    this.scrollListener = delay
+      ? throttle(this.handleScroll, delay)
+      : this.handleScroll;
+
+    this.debounceSetScrollingIdle = debounce(() => {
+      this.isScrolling = false;
+      this.events.emit('idle');
+    }, Math.max(scrollIdleDelay, delay));
+
+    this.triggerListenerIfReached = debounce(
+      async () => {
+        this.scrollPosition = this.currentScrollPosition();
+
+        const { onReachBottom, scrollPosition, bottomX, offsetPX } = this;
+
+        if (
+          onReachBottom != null &&
+          scrollPosition.reachedTo(bottomX, offsetPX)
+        ) {
+          await onReachBottom();
+          return true;
+        }
+
+        return false;
+      },
+      debounceDelay,
+      debounceOptions,
+    );
+  }
+
+  set target(value: HTMLElement | null | undefined) {
+    this._target = value;
+    this.targetScrollingParent = null;
+
+    if (this._target != null) {
+      let offsetParent = this._target.offsetParent;
+      while (
+        offsetParent instanceof HTMLElement &&
+        offsetParent?.offsetParent !== this.container
+      ) {
+        offsetParent = offsetParent.offsetParent;
+      }
+      if (offsetParent instanceof HTMLElement) {
+        this.targetScrollingParent = offsetParent;
+      }
+    }
+  }
+
+  get target() {
+    return this._target;
+  }
+
+  currentScrollPosition() {
+    const { scrollHeight, clientHeight, scrollTop } = this.container;
+    return new ScrollPosition({ clientHeight, scrollHeight, scrollTop });
+  }
+
+  handleScroll = async () => {
+    const { clientHeight, scrollHeight, scrollTop } = this.container;
+    this.isScrolling = true;
+    this.debounceSetScrollingIdle();
+    const newScrollPosition = new ScrollPosition({
+      clientHeight,
+      scrollHeight,
+      scrollTop,
+    });
+
+    const { offsetPX, onReachBottom, scrollPosition, bottomX } = this;
+
+    if (
+      onReachBottom != null &&
+      newScrollPosition.reachingTo(scrollPosition, bottomX, offsetPX)
+    ) {
+      await onReachBottom();
+    }
+    this.scrollPosition = newScrollPosition;
+  };
+
+  get bottomX() {
+    // either the container bottom, or the target element offset from the container
+    const { target, targetScrollingParent, scrollPosition } = this;
+    if (target != null && targetScrollingParent != null) {
+      return target.offsetTop + targetScrollingParent.offsetTop;
+    }
+    return scrollPosition.scrollHeight;
+  }
+
+  resizeListener = () => {
+    this.triggerListenerIfReached();
+  };
+
+  subscribe() {
+    this.scrollPosition = this.currentScrollPosition();
+    this.container.addEventListener('scroll', this.scrollListener);
+    window.addEventListener('resize', this.resizeListener);
+    return this;
+  }
+
+  unsubscribe() {
+    this.container.removeEventListener('scroll', this.scrollListener);
+    window.removeEventListener('resize', this.resizeListener);
+  }
+}

package/src/reach-bottom-listener/scrollPosition.ts

@@ -0,0 +1,39 @@
+export interface ScrollPositionParams {
+  scrollHeight: number;
+  clientHeight: number;
+  scrollTop: number;
+}
+
+export interface ScrollPosition extends ScrollPositionParams {}
+
+export class ScrollPosition {
+  scrollHeight: number;
+  clientHeight: number;
+  scrollTop: number;
+
+  constructor(params: ScrollPositionParams) {
+    this.scrollHeight = params.scrollHeight;
+    this.clientHeight = params.clientHeight;
+    this.scrollTop = params.scrollTop;
+  }
+
+  isScrollDown(other: ScrollPosition) {
+    return this.scrollTop >= other.scrollTop;
+  }
+
+  // private reachedBottom(prev: ScrollPosition, offset: number = 0) {
+  //   const { scrollHeight } = this;
+  //
+  //   return this.reachedTo(prev, scrollHeight, offset);
+  // }
+
+  reachingTo(prev: ScrollPosition, bottomX: number, offsetPX: number = 0) {
+    return this.isScrollDown(prev) && this.reachedTo(bottomX, offsetPX);
+  }
+
+  reachedTo(bottomX: number, offsetPX: number = 0) {
+    const { clientHeight, scrollTop } = this;
+
+    return scrollTop + clientHeight + offsetPX > bottomX;
+  }
+}

package/src/reach-bottom-listener/scrollableWindow.ts

@@ -0,0 +1,35 @@
+export class ScrollableWindow implements EventTarget {
+  get scrollTop() {
+    return window.scrollY;
+  }
+  get clientHeight() {
+    return document.body.clientHeight;
+  }
+  get scrollHeight() {
+    return document.body.scrollHeight;
+  }
+
+  addEventListener(
+    type: string,
+    listener: EventListener | EventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    window.addEventListener(type, listener, options);
+  }
+
+  dispatchEvent(event: Event): boolean {
+    return window.dispatchEvent(event);
+  }
+
+  removeEventListener(
+    type: string,
+    callback: EventListener | EventListenerObject,
+    options?: EventListenerOptions | boolean,
+  ): void {
+    window.removeEventListener(type, callback, options);
+  }
+
+  getBoundingClientRect() {
+    return { top: 0 };
+  }
+}

package/src/services/index.ts

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