@redsift/popovers 7.5.1 → 7.6.1

package/CONTRIBUTING.md

@@ -40,7 +40,7 @@ The Design System is following a monorepo architecture, providing multiple packa
 
 - `@redsift/popovers`
 
-  This package provides popover components. Popover components are based on [floating-ui](https://floating-ui.com/) and [@floating-ui/react](https://floating-ui.com/docs/react).
+  This package provides popover components. Popover components are based on [floating-ui](https://floating-ui.com/) and [@floating-ui/react](https://floating-ui.com/docs/react). Toasts are based on [react-toastify](https://fkhadra.github.io/react-toastify).
 
 - `@redsift/table`
 

package/index.d.ts

@@ -1,5 +1,6 @@
 import React$1, { Ref, ReactElement, Dispatch, SetStateAction, ReactNode, ComponentProps } from 'react';
 import * as _floating_ui_react from '@floating-ui/react';
+import { ClearWaitingQueueParams } from 'react-toastify';
 
 /** Component Type. */
 type Comp<P, T = HTMLElement> = {
@@ -670,6 +671,127 @@ declare const usePopoverContext: () => {
     handleOpen: (collapsed: boolean) => void;
 };
 
+/**
+ * Component variant.
+ */
+declare const ToastVariant: {
+    readonly success: "success";
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly info: "info";
+    readonly loading: "loading";
+};
+type ToastVariant = ValueOf<typeof ToastVariant>;
+declare const ToastPlacement: {
+    readonly 'top-right': "top-right";
+    readonly 'top-center': "top-center";
+    readonly 'top-left': "top-left";
+    readonly 'bottom-right': "bottom-right";
+    readonly 'bottom-center': "bottom-center";
+    readonly 'bottom-left': "bottom-left";
+};
+type ToastPlacement = ValueOf<typeof ToastPlacement>;
+/**
+ * Component props.
+ */
+interface ToastProps extends Omit<ComponentProps<'div'>, 'id' | 'style'>, SpacingProps, SizingProps {
+    /** Whether the component has a close button or not. */
+    closeButton?: boolean | ReactNode;
+    /** Title. */
+    title?: string;
+    /** Variant */
+    variant?: ToastVariant;
+}
+type StyledToastProps = Omit<ToastProps, 'variant' | 'id'> & {
+    $hasTitle: boolean;
+    $variant: ToastProps['variant'];
+};
+
+/**
+ * The Toast component.
+ */
+declare const Toast: Comp<ToastProps & {
+    closeToast?: () => void;
+}, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface ToastContainerProps {
+    /** Delay in ms to close the toast. If set to false, the notification needs to be closed manually. */
+    autoClose?: number | false;
+    /** Dismiss toast on click. */
+    closeOnClick?: boolean;
+    /** Allow Toasts to be draggable. */
+    draggable?: boolean;
+    /** Whether the progress bar is displayed or not on all Toasts. */
+    hideProgressBar?: boolean;
+    /** Used to limit the number of toast displayed on screen at the same time. */
+    limit?: number;
+    /** Pause the timer when the window loses focus. */
+    pauseOnFocusLoss?: boolean;
+    /** Keep the timer running or not on hover. */
+    pauseOnHover?: boolean;
+    /** Default placement for all Toasts. */
+    placement?: ToastPlacement;
+    /** Supports right to left content. */
+    rtl?: boolean;
+}
+type StyledToastContainerProps = ToastContainerProps & {};
+interface ToastOptions {
+    /** Delay in ms to close the toast. If set to false, the notification needs to be closed manually. */
+    autoClose?: number | false;
+    /** Dismiss toast on click. */
+    closeOnClick?: boolean;
+    /** Content. */
+    content?: ReactNode;
+    /** Let you delay the toast appearance. Pass a value in ms. */
+    delay?: number;
+    /** Allow toast to be draggable. */
+    draggable?: boolean;
+    /** Whether the component has a close button or not. */
+    closeButton?: boolean | ReactNode;
+    /** Whether or not the progress bar is displayed. */
+    hideProgressBar?: boolean;
+    /** Pause the timer when the window loses focus. */
+    pauseOnFocusLoss?: boolean;
+    /** Keep the timer running or not on hover. */
+    pauseOnHover?: boolean;
+    /** Placement of the Toast. */
+    placement?: ToastPlacement;
+    /** Title. */
+    title?: string;
+    /** Variant */
+    variant?: ToastVariant;
+}
+type Id = number | string;
+type useToastReturnType = {
+    notify: (options: ToastOptions, props?: Omit<ToastProps, 'ref' | 'closeButton'>) => Id;
+    clearWaitingQueue: (params?: ClearWaitingQueueParams | undefined) => void;
+    dismiss: (id?: Id | undefined) => void;
+    done: (id: Id) => void;
+    error: (options: Omit<ToastOptions, 'variant'>, props?: Omit<ToastProps, 'ref'>) => Id;
+    isActive: (id: Id) => boolean;
+    info: (options: Omit<ToastOptions, 'variant'>, props?: Omit<ToastProps, 'ref'>) => Id;
+    loading: (options: Omit<ToastOptions, 'variant'>, props?: Omit<ToastProps, 'ref'>) => Id;
+    promise: (promise: Promise<unknown> | (() => Promise<unknown>), { pending, success, error, }: {
+        pending: Pick<ToastOptions, 'content' | 'title' | 'variant'>;
+        success: Pick<ToastOptions, 'content' | 'title' | 'variant'>;
+        error: Pick<ToastOptions, 'content' | 'title' | 'variant'>;
+    }, options?: Omit<ToastOptions, 'content' | 'title' | 'variant'>, props?: Omit<ToastProps, 'ref'>) => void;
+    success: (options: Omit<ToastOptions, 'variant'>, props?: Omit<ToastProps, 'ref'>) => Id;
+    update: (id: number | string, { content, placement, title, variant, ...options }: ToastOptions, props?: Omit<ToastProps, 'ref'>) => void;
+    warning: (options: Omit<ToastOptions, 'variant'>, props?: Omit<ToastProps, 'ref'>) => Id;
+};
+type useToastProps = () => useToastReturnType;
+
+/**
+ * The ToastContainer component.
+ */
+declare const ToastContainer: Comp<ToastContainerProps, HTMLDivElement>;
+
+declare const useToast: useToastProps;
+
 declare function useTooltip({ defaultOpen, delay, placement, isOpen: propsIsOpen, onOpen, tooltipId: propsTooltipId, }: Omit<TooltipProps, 'children'>): {
     arrowRef: React$1.MutableRefObject<null>;
     tooltipId: string;
@@ -841,4 +963,4 @@ declare const useTooltipContext: () => {
     handleOpen: (collapsed: boolean) => void;
 };
 
-export { BaseDialog, BaseDialogContent, BasePopover, BaseTooltip, Dialog, DialogContent, DialogContentActions, DialogContentActionsProps, DialogContentBody, DialogContentBodyProps, DialogContentHeader, DialogContentHeaderProps, DialogContentProps, DialogContext, DialogProps, DialogSize, DialogState, DialogTrigger, DialogTriggerProps, Popover, PopoverContent, PopoverContentProps, PopoverContext, PopoverPlacement, PopoverProps, PopoverState, PopoverTrigger, PopoverTriggerProps, StyledDialogContentActionsProps, StyledDialogContentBodyProps, StyledDialogContentHeaderProps, StyledDialogContentProps, StyledDialogProps, StyledPopoverContentProps, StyledPopoverProps, StyledTooltipContentProps, StyledTooltipProps, Tooltip, TooltipContent, TooltipContentProps, TooltipContext, TooltipPlacement, TooltipProps, TooltipState, TooltipTrigger, TooltipTriggerProps, useDialog, useDialogContext, usePopover, usePopoverContext, useTooltip, useTooltipContext };
+export { BaseDialog, BaseDialogContent, BasePopover, BaseTooltip, Dialog, DialogContent, DialogContentActions, DialogContentActionsProps, DialogContentBody, DialogContentBodyProps, DialogContentHeader, DialogContentHeaderProps, DialogContentProps, DialogContext, DialogProps, DialogSize, DialogState, DialogTrigger, DialogTriggerProps, Popover, PopoverContent, PopoverContentProps, PopoverContext, PopoverPlacement, PopoverProps, PopoverState, PopoverTrigger, PopoverTriggerProps, StyledDialogContentActionsProps, StyledDialogContentBodyProps, StyledDialogContentHeaderProps, StyledDialogContentProps, StyledDialogProps, StyledPopoverContentProps, StyledPopoverProps, StyledToastContainerProps, StyledToastProps, StyledTooltipContentProps, StyledTooltipProps, Toast, ToastContainer, ToastContainerProps, ToastOptions, ToastPlacement, ToastProps, ToastVariant, Tooltip, TooltipContent, TooltipContentProps, TooltipContext, TooltipPlacement, TooltipProps, TooltipState, TooltipTrigger, TooltipTriggerProps, useDialog, useDialogContext, usePopover, usePopoverContext, useToast, useToastProps, useToastReturnType, useTooltip, useTooltipContext };