@redsift/popovers 10.3.0-alpha.1 → 10.3.0-alpha.10

package/CONTRIBUTING.md

@@ -58,6 +58,10 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   This package provides dashboard-related components and decorators to make charts and datagrid filterable using [crossfilter](https://crossfilter.github.io/crossfilter/).
 
+- `@redsift/products`
+
+  This package provides ready-to-use implementation of components with a customize style to fit Red Sift's use cases. It is based on all other packages.
+
 - _Deprecated_ `@redsift/design-system-legacy`
 
   This package contains all components prior to the 6.0.0 version. These components are deprecated and contributing to this package is discouraged since it will be removed in the future.
@@ -133,9 +137,6 @@ import { BadgeProps } from './types';
 
 const COMPONENT_NAME = 'Badge';
 const CLASSNAME = 'redsift-badge';
-const DEFAULT_PROPS: Partial<BadgeProps> = {
-  // default values
-};
 
 /**
  * The Badge component.
@@ -158,7 +159,6 @@ export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) =
   );
 });
 Badge.className = CLASSNAME;
-Badge.defaultProps = DEFAULT_PROPS;
 Badge.displayName = COMPONENT_NAME;
 ```
 

package/index.d.ts

@@ -1,13 +1,13 @@
+import * as _redsift_design_system from '@redsift/design-system';
+import { ValueOf, ButtonColor, Theme, ContainerProps, Comp, HeadingProps, IconProps, StylingProps, SpacingProps, SizingProps, InternalSpacingProps, ButtonProps, IconButtonLinkProps, IconButtonProps } from '@redsift/design-system';
+import React$1, { Dispatch, SetStateAction, ReactNode, ComponentProps } from 'react';
 import * as _floating_ui_react from '@floating-ui/react';
 export { FloatingPortal, useMergeRefs } from '@floating-ui/react';
-import React$1, { Dispatch, SetStateAction, ReactNode, ComponentProps } from 'react';
-import * as _redsift_design_system from '@redsift/design-system';
-import { ValueOf, Theme, ContainerProps, Comp, HeadingProps, IconProps, StylingProps, SpacingProps, SizingProps, InternalSpacingProps } from '@redsift/design-system';
 import * as _floating_ui_core from '@floating-ui/core';
 import * as styled_components from 'styled-components';
 import { Theme as Theme$1, ClearWaitingQueueParams } from 'react-toastify';
 
-declare function useDialog({ defaultOpen, hasCloseButton, initialFocus, isOpen: propsIsOpen, onOpen, size, triggerClassName, }: Omit<DialogProps, 'children'>): {
+declare function useDialog({ color, defaultOpen, hasCloseButton, initialFocus, isOpen: propsIsOpen, onOpen, size, triggerClassName, }: Omit<DialogProps, 'children'>): {
     labelId: string | undefined;
     descriptionId: string | undefined;
     setLabelId: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;
@@ -35,10 +35,10 @@ declare function useDialog({ defaultOpen, hasCloseButton, initialFocus, isOpen:
         y: number | null;
         placement: _floating_ui_react.Placement;
         strategy: _floating_ui_react.Strategy;
-        middlewareData: _floating_ui_react.MiddlewareData;
-        update: () => void;
         reference: (node: _floating_ui_react.ReferenceType | null) => void;
         floating: (node: HTMLElement | null) => void;
+        middlewareData: _floating_ui_react.MiddlewareData;
+        update: () => void;
         isPositioned: boolean;
         open: boolean;
         onOpenChange: (open: boolean) => void;
@@ -54,6 +54,7 @@ declare function useDialog({ defaultOpen, hasCloseButton, initialFocus, isOpen:
     getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    color: string | undefined;
     isOpen: boolean | undefined;
     handleOpen: (collapsed: boolean) => void;
 };
@@ -81,6 +82,8 @@ type DialogSize = ValueOf<typeof DialogSize>;
  * Component props.
  */
 interface DialogProps {
+    /** Button color that will be forward to the trigger. */
+    color?: ButtonColor;
     /** Children. Can only be DialogTrigger and DialogContent. */
     children: ReactNode;
     /**
@@ -202,7 +205,7 @@ declare const DialogContent: Comp<DialogContentProps, HTMLDivElement> & {
 /**
  * Component props.
  */
-interface DialogTriggerProps extends Omit<ComponentProps<'button'>, 'onClick'>, StylingProps {
+interface DialogTriggerProps extends ComponentProps<'button'>, StylingProps {
 }
 
 /**
@@ -257,10 +260,10 @@ declare const useDialogContext: () => {
         y: number | null;
         placement: _floating_ui_core.Placement;
         strategy: _floating_ui_core.Strategy;
-        middlewareData: _floating_ui_core.MiddlewareData;
-        update: () => void;
         reference: (node: _floating_ui_react.ReferenceType | null) => void;
         floating: (node: HTMLElement | null) => void;
+        middlewareData: _floating_ui_core.MiddlewareData;
+        update: () => void;
         isPositioned: boolean;
         open: boolean;
         onOpenChange: (open: boolean) => void;
@@ -276,6 +279,7 @@ declare const useDialogContext: () => {
     getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    color: string | undefined;
     isOpen: boolean | undefined;
     handleOpen: (collapsed: boolean) => void;
 } & {
@@ -284,9 +288,11 @@ declare const useDialogContext: () => {
     readonly triggerClassName?: string | undefined;
 };
 
-declare function usePopover({ defaultOpen, isModal, isOpen: propsIsOpen, maxWidth, minWidth, onOpen, placement, role: propsRole, triggerClassName, width, }: Omit<PopoverProps, 'children'>): {
+declare function usePopover({ color, defaultOpen, isModal, isOpen: propsIsOpen, maxWidth, minWidth, offset: propsOffset, onOpen, placement, role: propsRole, triggerClassName, width, setHideInsteadOfClose, hideInsteadOfClose, }: Omit<PopoverProps, 'children'> & HiddenPopoverState): {
     isModal: boolean | undefined;
     triggerClassName: string | undefined;
+    setHideInsteadOfClose: React$1.Dispatch<React$1.SetStateAction<boolean>> | undefined;
+    hideInsteadOfClose: boolean | undefined;
     placement: _floating_ui_react.Placement;
     strategy: _floating_ui_react.Strategy;
     middlewareData: _floating_ui_react.MiddlewareData;
@@ -301,10 +307,10 @@ declare function usePopover({ defaultOpen, isModal, isOpen: propsIsOpen, maxWidt
         y: number | null;
         placement: _floating_ui_react.Placement;
         strategy: _floating_ui_react.Strategy;
-        middlewareData: _floating_ui_react.MiddlewareData;
-        update: () => void;
         reference: (node: _floating_ui_react.ReferenceType | null) => void;
         floating: (node: HTMLElement | null) => void;
+        middlewareData: _floating_ui_react.MiddlewareData;
+        update: () => void;
         isPositioned: boolean;
         open: boolean;
         onOpenChange: (open: boolean) => void;
@@ -320,6 +326,7 @@ declare function usePopover({ defaultOpen, isModal, isOpen: propsIsOpen, maxWidt
     getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    color: string | undefined;
     isOpen: boolean | undefined;
     handleOpen: (collapsed: boolean) => void;
 };
@@ -327,10 +334,16 @@ declare function usePopover({ defaultOpen, isModal, isOpen: propsIsOpen, maxWidt
 /**
  * Context props.
  */
+type HiddenPopoverState = {
+    /** Whether the popover should be hidden or removed from the DOM. */
+    hideInsteadOfClose?: boolean;
+    /** Method to set the hideInsteadOfClose prop. */
+    setHideInsteadOfClose?: Dispatch<SetStateAction<boolean>>;
+};
 type PopoverState = (ReturnType<typeof usePopover> & {
     /** Class name to append to the trigger. */
     readonly triggerClassName?: string;
-}) | null;
+} & HiddenPopoverState) | null;
 /**
  * Component variant.
  */
@@ -359,6 +372,8 @@ interface PopoverProps {
     minWidth?: 'trigger-width' | 'available-width' | number;
     /** Popover content max width. Can be either based on the trigger, the available space or define with a number of pixels. */
     maxWidth?: 'trigger-width' | 'available-width' | number;
+    /** Button color that will be forward to the trigger. */
+    color?: ButtonColor;
     /** Children. Can only be PopoverTrigger and PopoverContent. */
     children: ReactNode;
     /**
@@ -375,6 +390,8 @@ interface PopoverProps {
      * Used for controlled version.
      */
     isOpen?: boolean;
+    /** Space between trigger and content (in pixels). */
+    offset?: number;
     /** Method to handle component change. */
     onOpen?: (open: boolean) => void;
     /** Allows other components to be treated as trigger and content. */
@@ -419,7 +436,7 @@ declare const PopoverContent: Comp<PopoverContentProps, HTMLDivElement>;
 /**
  * Component props.
  */
-interface PopoverTriggerProps extends Omit<ComponentProps<'button'>, 'onClick'>, StylingProps {
+interface PopoverTriggerProps extends ComponentProps<'button'>, StylingProps {
 }
 
 /**
@@ -445,6 +462,8 @@ declare const Popover: React$1.FC<PopoverProps> & {
 declare const usePopoverContext: () => {
     isModal: boolean | undefined;
     triggerClassName: string | undefined;
+    setHideInsteadOfClose: React$1.Dispatch<React$1.SetStateAction<boolean>> | undefined;
+    hideInsteadOfClose: boolean | undefined;
     placement: _floating_ui_core.Placement;
     strategy: _floating_ui_core.Strategy;
     middlewareData: _floating_ui_core.MiddlewareData;
@@ -459,10 +478,10 @@ declare const usePopoverContext: () => {
         y: number | null;
         placement: _floating_ui_core.Placement;
         strategy: _floating_ui_core.Strategy;
-        middlewareData: _floating_ui_core.MiddlewareData;
-        update: () => void;
         reference: (node: _floating_ui_react.ReferenceType | null) => void;
         floating: (node: HTMLElement | null) => void;
+        middlewareData: _floating_ui_core.MiddlewareData;
+        update: () => void;
         isPositioned: boolean;
         open: boolean;
         onOpenChange: (open: boolean) => void;
@@ -478,11 +497,12 @@ declare const usePopoverContext: () => {
     getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    color: string | undefined;
     isOpen: boolean | undefined;
     handleOpen: (collapsed: boolean) => void;
 } & {
     readonly triggerClassName?: string | undefined;
-};
+} & HiddenPopoverState;
 
 /**
  * Component variant.
@@ -610,7 +630,35 @@ declare const ToastContainer: Comp<ToastContainerProps, HTMLDivElement>;
 
 declare const useToast: useToastProps;
 
-declare function useTooltip({ defaultOpen, delay, placement, isOpen: propsIsOpen, onOpen, tooltipId: propsTooltipId, triggerClassName, }: Omit<TooltipProps, 'children'>): {
+/**
+ * Component props.
+ */
+interface TooltipContentProps extends ComponentProps<'div'>, Omit<ContainerProps, keyof InternalSpacingProps> {
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledTooltipContentProps = TooltipContentProps & {
+    $placement: TooltipPlacement;
+    $theme: Theme;
+};
+
+/**
+ * The TooltipContent component.
+ */
+declare const TooltipContent: Comp<TooltipContentProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface TooltipTriggerProps extends ComponentProps<'span'>, StylingProps {
+}
+
+/**
+ * The TooltipTrigger component.
+ */
+declare const TooltipTrigger: Comp<TooltipTriggerProps, HTMLSpanElement>;
+
+declare function useTooltip({ color, defaultOpen, delay, placement, isOpen: propsIsOpen, onOpen, tooltipId: propsTooltipId, triggerClassName, }: Omit<TooltipProps, 'children'>): {
     arrowRef: React$1.MutableRefObject<null>;
     tooltipId: string;
     triggerClassName: string | undefined;
@@ -628,10 +676,10 @@ declare function useTooltip({ defaultOpen, delay, placement, isOpen: propsIsOpen
         y: number | null;
         placement: _floating_ui_react.Placement;
         strategy: _floating_ui_react.Strategy;
-        middlewareData: _floating_ui_react.MiddlewareData;
-        update: () => void;
         reference: (node: _floating_ui_react.ReferenceType | null) => void;
         floating: (node: HTMLElement | null) => void;
+        middlewareData: _floating_ui_react.MiddlewareData;
+        update: () => void;
         isPositioned: boolean;
         open: boolean;
         onOpenChange: (open: boolean) => void;
@@ -647,6 +695,7 @@ declare function useTooltip({ defaultOpen, delay, placement, isOpen: propsIsOpen
     getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    color: string | undefined;
     isOpen: boolean | undefined;
     handleOpen: (collapsed: boolean) => void;
 };
@@ -680,6 +729,8 @@ type TooltipPlacement = ValueOf<typeof TooltipPlacement>;
  * Component props.
  */
 interface TooltipProps {
+    /** Button color that will be forward to the trigger. */
+    color?: ButtonColor;
     /** Children. Can only be TooltipTrigger and TooltilContent. */
     children: ReactNode;
     /**
@@ -709,34 +760,6 @@ type StyledTooltipProps = TooltipProps;
 
 declare const TooltipContext: React$1.Context<TooltipState>;
 
-/**
- * Component props.
- */
-interface TooltipContentProps extends ComponentProps<'div'>, Omit<ContainerProps, keyof InternalSpacingProps> {
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledTooltipContentProps = TooltipContentProps & {
-    $placement: TooltipPlacement;
-    $theme: Theme;
-};
-
-/**
- * The TooltipContent component.
- */
-declare const TooltipContent: Comp<TooltipContentProps, HTMLDivElement>;
-
-/**
- * Component props.
- */
-interface TooltipTriggerProps extends ComponentProps<'span'>, StylingProps {
-}
-
-/**
- * The TooltipTrigger component.
- */
-declare const TooltipTrigger: Comp<TooltipTriggerProps, HTMLSpanElement>;
-
 /**
  * The Tooltip component.
  */
@@ -770,10 +793,10 @@ declare const useTooltipContext: () => {
         y: number | null;
         placement: _floating_ui_core.Placement;
         strategy: _floating_ui_core.Strategy;
-        middlewareData: _floating_ui_core.MiddlewareData;
-        update: () => void;
         reference: (node: _floating_ui_react.ReferenceType | null) => void;
         floating: (node: HTMLElement | null) => void;
+        middlewareData: _floating_ui_core.MiddlewareData;
+        update: () => void;
         isPositioned: boolean;
         open: boolean;
         onOpenChange: (open: boolean) => void;
@@ -789,10 +812,53 @@ declare const useTooltipContext: () => {
     getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    color: string | undefined;
     isOpen: boolean | undefined;
     handleOpen: (collapsed: boolean) => void;
 } & {
     readonly triggerClassName?: string | undefined;
 };
 
-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, StyledPopoverContent, StyledPopoverContentProps, StyledPopoverProps, StyledToastContainerProps, StyledToastProps, StyledTooltipContentProps, StyledTooltipProps, Toast, ToastContainer, ToastContainerProps, ToastOptions, ToastPlacement, ToastProps, ToastVariant, Tooltip, TooltipContent, TooltipContentProps, TooltipContext, TooltipPlacement, TooltipProps, TooltipState, TooltipTrigger, TooltipTriggerProps, sizeToDimension, useDialog, useDialogContext, usePopover, usePopoverContext, useToast, useToastProps, useToastReturnType, useTooltip, useTooltipContext };
+declare const ButtonWithTooltip: Comp<{
+    tooltip: string;
+    tooltipProps?: TooltipProps;
+    tooltipTriggerProps?: Omit<TooltipTriggerProps, 'ref'>;
+    tooltipContentProps?: Omit<TooltipContentProps, 'ref'>;
+} & Omit<ButtonProps, 'ref'>, HTMLButtonElement>;
+
+declare const IconButtonLinkWithTooltip: Comp<{
+    tooltip: string;
+    tooltipProps?: TooltipProps;
+    tooltipTriggerProps?: Omit<TooltipTriggerProps, 'ref'>;
+    tooltipContentProps?: Omit<TooltipContentProps, 'ref'>;
+} & Omit<IconButtonLinkProps, 'ref'>, HTMLAnchorElement>;
+
+declare const IconButtonWithTooltip: Comp<{
+    tooltip: string;
+    tooltipProps?: TooltipProps;
+    tooltipTriggerProps?: Omit<TooltipTriggerProps, 'ref'>;
+    tooltipContentProps?: Omit<TooltipContentProps, 'ref'>;
+} & Omit<IconButtonProps, 'ref'>, HTMLButtonElement>;
+
+declare const WithTooltip: {
+    Button: _redsift_design_system.Comp<{
+        tooltip: string;
+        tooltipProps?: TooltipProps | undefined;
+        tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
+        tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
+    } & Omit<_redsift_design_system.ButtonProps, "ref">, HTMLButtonElement>;
+    IconButton: _redsift_design_system.Comp<{
+        tooltip: string;
+        tooltipProps?: TooltipProps | undefined;
+        tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
+        tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
+    } & Omit<_redsift_design_system.IconButtonProps, "ref">, HTMLButtonElement>;
+    IconButtonLink: _redsift_design_system.Comp<{
+        tooltip: string;
+        tooltipProps?: TooltipProps | undefined;
+        tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
+        tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
+    } & Omit<_redsift_design_system.IconButtonLinkProps, "ref">, HTMLAnchorElement>;
+};
+
+export { BaseDialog, BaseDialogContent, BasePopover, BaseTooltip, ButtonWithTooltip, Dialog, DialogContent, DialogContentActions, DialogContentActionsProps, DialogContentBody, DialogContentBodyProps, DialogContentHeader, DialogContentHeaderProps, DialogContentProps, DialogContext, DialogProps, DialogSize, DialogState, DialogTrigger, DialogTriggerProps, HiddenPopoverState, IconButtonLinkWithTooltip, IconButtonWithTooltip, Popover, PopoverContent, PopoverContentProps, PopoverContext, PopoverPlacement, PopoverProps, PopoverState, PopoverTrigger, PopoverTriggerProps, StyledDialogContentActionsProps, StyledDialogContentBodyProps, StyledDialogContentHeaderProps, StyledDialogContentProps, StyledDialogProps, StyledPopoverContent, StyledPopoverContentProps, StyledPopoverProps, StyledToastContainerProps, StyledToastProps, StyledTooltipContentProps, StyledTooltipProps, Toast, ToastContainer, ToastContainerProps, ToastOptions, ToastPlacement, ToastProps, ToastVariant, Tooltip, TooltipContent, TooltipContentProps, TooltipContext, TooltipPlacement, TooltipProps, TooltipState, TooltipTrigger, TooltipTriggerProps, WithTooltip, sizeToDimension, useDialog, useDialogContext, usePopover, usePopoverContext, useToast, useToastProps, useToastReturnType, useTooltip, useTooltipContext };