@redsift/popovers 7.8.0 → 8.0.0-alpha.0

package/CONTRIBUTING.md

@@ -48,11 +48,11 @@ The Design System is following a monorepo architecture, providing multiple packa
 
 - `@redsift/charts`
 
-  This package provides charts components. Charts are based on [d3.js](https://d3js.org/) and are mainly static. For filterable charts, see `@redsift/dashboard`.
+  This package provides charts components. Charts are based on [d3.js](https://d3js.org/) for computation, [react](https://react.dev/) for rendering and events and [react-spring](https://www.react-spring.dev/) for animations and transitions.
 
 - `@redsift/dashboard`
 
-  This package provides dashboard-related components. Charts are based on [dc.js](https://dc-js.github.io/dc.js/), [d3fc](https://d3fc.io/) and [crossfilter](https://crossfilter.github.io/crossfilter/) and datagrids are based on `@redsift/table`. It contains every filterable elements to use inside a dashboard. For static charts, see `@redsift/charts`.
+  This package provides dashboard-related components and decorators to make charts and datagrid filterable using [crossfilter](https://crossfilter.github.io/crossfilter/).
 
 - _Deprecated_ `@redsift/design-system-legacy`
 

package/index.d.ts

@@ -1,266 +1,10 @@
-import React$1, { Ref, ReactElement, ComponentProps, Dispatch, SetStateAction, ReactNode } from 'react';
+import React$1, { Dispatch, SetStateAction, ReactNode, ComponentProps } from 'react';
+import * as _redsift_design_system from '@redsift/design-system';
+import { ValueOf, ContainerProps, Comp, HeadingProps, StylingProps, InternalSpacingProps, SpacingProps, SizingProps } from '@redsift/design-system';
 import * as _floating_ui_react from '@floating-ui/react';
+import * as _floating_ui_core from '@floating-ui/core';
 import { ClearWaitingQueueParams } from 'react-toastify';
 
-/** Component Type. */
-type Comp<P, T = HTMLElement> = {
-    (props: P & {
-        ref?: Ref<T>;
-    }): ReactElement | null;
-    /** React component type. */
-    readonly $$typeof: symbol;
-    /** Component default props. */
-    defaultProps?: Partial<P>;
-    /** Component name. */
-    displayName?: string;
-    /** Component base class name. */
-    className?: string;
-};
-/** Get types of the values of a record. */
-type ValueOf<T extends Record<any, any>> = T[keyof T];
-
-declare const AlignSelf: {
-    readonly auto: "auto";
-    readonly normal: "normal";
-    readonly start: "start";
-    readonly end: "end";
-    readonly center: "center";
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly 'self-start': "self-start";
-    readonly 'self-end': "self-end";
-    readonly baseline: "baseline";
-    readonly stretch: "stretch";
-};
-type AlignSelf = ValueOf<typeof AlignSelf>;
-declare const AlignContent: {
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly center: "center";
-    readonly 'space-between': "space-between";
-    readonly 'space-around': "space-around";
-    readonly 'space-evenly': "space-evenly";
-    readonly stretch: "stretch";
-    readonly start: "start";
-    readonly end: "end";
-    readonly baseline: "baseline";
-    readonly 'first baseline': "first baseline";
-    readonly 'last baseline': "last baseline";
-};
-type AlignContent = ValueOf<typeof AlignContent>;
-declare const AlignItems: {
-    readonly stretch: "stretch";
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly center: "center";
-    readonly baseline: "baseline";
-    readonly 'first baseline': "first baseline";
-    readonly 'last baseline': "last baseline";
-    readonly start: "start";
-    readonly end: "end";
-    readonly 'self-start': "self-start";
-    readonly 'self-end': "self-end";
-};
-type AlignItems = ValueOf<typeof AlignItems>;
-declare const FlexDirection: {
-    readonly row: "row";
-    readonly 'row-reverse': "row-reverse";
-    readonly column: "column";
-    readonly 'column-reverse': "column-reverse";
-};
-type FlexDirection = ValueOf<typeof FlexDirection>;
-declare const FlexWrap: {
-    readonly nowrap: "nowrap";
-    readonly wrap: "wrap";
-    readonly 'wrap-reverse': "wrap-reverse";
-};
-type FlexWrap = ValueOf<typeof FlexWrap>;
-declare const JustifyContent: {
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly center: "center";
-    readonly 'space-between': "space-between";
-    readonly 'space-around': "space-around";
-    readonly 'space-evenly': "space-evenly";
-    readonly start: "start";
-    readonly end: "end";
-    readonly left: "left";
-    readonly right: "right";
-    readonly baseline: "baseline";
-    readonly 'first baseline': "first baseline";
-    readonly 'last baseline': "last baseline";
-    readonly stretch: "stretch";
-};
-type JustifyContent = ValueOf<typeof JustifyContent>;
-declare const JustifyItems: {
-    readonly start: "start";
-    readonly end: "end";
-    readonly center: "center";
-    readonly stretch: "stretch";
-};
-type JustifyItems = ValueOf<typeof JustifyItems>;
-interface LayoutProps {
-    /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">MDN</a>. */
-    flex?: string;
-    /** When used in a flex layout, specifies how the element will grow to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">MDN</a>. */
-    flexGrow?: number;
-    /** When used in a flex layout, specifies how the element will shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">MDN</a>. */
-    flexShrink?: number;
-    /** When used in a flex layout, specifies the initial main size of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex_basis">MDN</a>. */
-    flexBasis?: string;
-    /** Overrides the alignItems property of a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">MDN</a>. */
-    alignSelf?: AlignSelf;
-    /** Specifies how the element is justified inside a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self">MDN</a>. */
-    justifySelf?: string;
-    /** The layout order for the element within a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">MDN</a>. */
-    order?: number;
-    /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area">MDN</a>. */
-    gridArea?: string;
-    /** When used in a grid layout, specifies the column the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column">MDN</a>. */
-    gridColumn?: string;
-    /** When used in a grid layout, specifies the row the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row">MDN</a>. */
-    gridRow?: string;
-    /** When used in a grid layout, specifies the starting column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start">MDN</a>. */
-    gridColumnStart?: string;
-    /** When used in a grid layout, specifies the ending column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end">MDN</a>. */
-    gridColumnEnd?: string;
-    /** When used in a grid layout, specifies the starting row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start">MDN</a>. */
-    gridRowStart?: string;
-    /** When used in a grid layout, specifies the ending row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end">MDN</a>. */
-    gridRowEnd?: string;
-}
-interface SpacingProps {
-    /** The margin for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">MDN</a>. */
-    margin?: string;
-    /** The margin for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">MDN</a>. */
-    marginBottom?: string;
-    /** The margin for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">MDN</a>. */
-    marginLeft?: string;
-    /** The margin for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">MDN</a>. */
-    marginRight?: string;
-    /** The margin for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">MDN</a>. */
-    marginTop?: string;
-}
-interface SizingProps {
-    /** The height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">MDN</a>. */
-    height?: string | number;
-    /** The maximum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height">MDN</a>. */
-    maxHeight?: string;
-    /** The maximum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">MDN</a>. */
-    maxWidth?: string;
-    /** The minimum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">MDN</a>. */
-    minHeight?: string;
-    /** The minimum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">MDN</a>. */
-    minWidth?: string;
-    /** The width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">MDN</a>. */
-    width?: string | number;
-}
-interface PositioningProps {
-    /** Specifies how the element is positioned. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN</a>. */
-    position?: string;
-    /** The top position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top">MDN</a>. */
-    top?: string;
-    /** The bottom position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">MDN</a>. */
-    bottom?: string;
-    /** The left position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">MDN</a>. Consider using start instead for RTL support. */
-    left?: string;
-    /** The right position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right">MDN</a>. Consider using start instead for RTL support. */
-    right?: string;
-    /** The stacking order for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">MDN</a>. */
-    zIndex?: string;
-}
-interface FlexLayoutProps {
-    /** The distribution of space around child items along the cross axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">MDN</a>. */
-    alignContent?: AlignContent;
-    /** The alignment of children within their container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">MDN</a>. */
-    alignItems?: AlignItems;
-    /** The direction in which to layout children. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction">MDN</a>. */
-    flexDirection?: FlexDirection;
-    /** Whether to wrap items onto multiple lines. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">MDN</a>. */
-    flexWrap?: FlexWrap;
-    /** The space to display between both rows and columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">MDN</a>. */
-    gap?: string;
-    /** Whether the box is displayed inline or not. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. */
-    inline?: boolean;
-    /** The distribution of space around items along the main axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">MDN</a>. */
-    justifyContent?: JustifyContent;
-}
-interface GridLayoutProps {
-    /** The distribution of space around child items along the cross axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">MDN</a>. */
-    alignContent?: AlignContent;
-    /** The alignment of children within their container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">MDN</a>. */
-    alignItems?: AlignItems;
-    /** The space to display between both rows and columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">MDN</a>. */
-    gap?: string;
-    /** Defines the size of implicitly generated columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns">MDN</a>. */
-    gridAutoColumns?: string;
-    /** Defines the size of implicitly generated rows. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows">MDN</a>. */
-    gridAutoRows?: string;
-    /** Defines named grid areas. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas">MDN</a>. */
-    gridTemplateAreas?: string;
-    /** Defines the sizes of each column in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns">MDN</a>. */
-    gridTemplateColumns?: string;
-    /** Defines the sizes of each row in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows">MDN</a>. */
-    gridTemplateRows?: string;
-    /** Whether the box is displayed inline or not. */
-    inline?: boolean;
-    /** The distribution of space around items along the main axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">MDN</a>. */
-    justifyContent?: JustifyContent;
-    /** Defines the default justifySelf for all items in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items">MDN</a>. */
-    justifyItems?: JustifyItems;
-}
-interface StylingProps extends LayoutProps, SpacingProps, SizingProps, PositioningProps {
-}
-interface InternalSpacingProps {
-    /** The padding for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">MDN</a>. */
-    padding?: string;
-    /** The padding for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom">MDN</a>. */
-    paddingBottom?: string;
-    /** The padding for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left">MDN</a>. */
-    paddingLeft?: string;
-    /** The padding for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right">MDN</a>. */
-    paddingRight?: string;
-    /** The padding for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top">MDN</a>. */
-    paddingTop?: string;
-}
-interface ContainerProps extends Omit<FlexLayoutProps, 'inline'>, Omit<GridLayoutProps, 'inline'>, InternalSpacingProps {
-    /** Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. */
-    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'inherit';
-}
-
-/**
- * Component variant.
- */
-declare const HeadingVariant: {
-    readonly h1: "h1";
-    readonly h2: "h2";
-    readonly h3: "h3";
-    readonly h4: "h4";
-    readonly h5: "h5";
-    readonly body: "body";
-};
-type HeadingVariant = ValueOf<typeof HeadingVariant>;
-declare const HeadingComponent: {
-    readonly h1: "h1";
-    readonly h2: "h2";
-    readonly h3: "h3";
-    readonly h4: "h4";
-    readonly h5: "h5";
-    readonly span: "span";
-};
-type HeadingComponent = ValueOf<typeof HeadingComponent>;
-/**
- * Component props.
- */
-interface HeadingProps extends ComponentProps<'span'>, StylingProps {
-    /** The actual component rendered in the DOM. */
-    as: HeadingComponent;
-    /** Whether the text will truncate with a text overflow ellipsis or wrap. */
-    noWrap?: boolean;
-    /** The component the Heading will look like. */
-    variant?: HeadingVariant;
-}
-
 declare function useDialog({ defaultOpen, hasCloseButton, initialFocus, isOpen: propsIsOpen, onOpen, size, }: Omit<DialogProps, 'children'>): {
     labelId: string | undefined;
     descriptionId: string | undefined;
@@ -447,11 +191,11 @@ declare const Dialog: React$1.FC<DialogProps> & {
     displayName?: string | undefined;
     className?: string | undefined;
 } & {
-    Trigger: Comp<DialogTriggerProps, HTMLButtonElement>;
-    Content: Comp<DialogContentProps, HTMLDivElement> & {
-        Header: Comp<DialogContentHeaderProps, HTMLDivElement>;
-        Body: Comp<DialogContentBodyProps, HTMLDivElement>;
-        Actions: Comp<DialogContentActionsProps, HTMLDivElement>;
+    Trigger: _redsift_design_system.Comp<DialogTriggerProps, HTMLButtonElement>;
+    Content: _redsift_design_system.Comp<DialogContentProps, HTMLDivElement> & {
+        Header: _redsift_design_system.Comp<DialogContentHeaderProps, HTMLDivElement>;
+        Body: _redsift_design_system.Comp<DialogContentBodyProps, HTMLDivElement>;
+        Actions: _redsift_design_system.Comp<DialogContentActionsProps, HTMLDivElement>;
     };
 };
 
@@ -466,9 +210,9 @@ declare const useDialogContext: () => {
     headerRef: React$1.MutableRefObject<null>;
     bodyRef: React$1.MutableRefObject<null>;
     actionsRef: React$1.MutableRefObject<null>;
-    placement: undefined;
-    strategy: undefined;
-    middlewareData: undefined;
+    placement: _floating_ui_core.Placement;
+    strategy: _floating_ui_core.Strategy;
+    middlewareData: _floating_ui_core.MiddlewareData;
     x: number | null;
     y: number | null;
     update: () => void;
@@ -478,9 +222,9 @@ declare const useDialogContext: () => {
     context: {
         x: number | null;
         y: number | null;
-        placement: undefined;
-        strategy: undefined;
-        middlewareData: undefined;
+        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;
@@ -628,15 +372,15 @@ declare const Popover: React$1.FC<PopoverProps> & {
     displayName?: string | undefined;
     className?: string | undefined;
 } & {
-    Trigger: Comp<PopoverTriggerProps, HTMLButtonElement>;
-    Content: Comp<PopoverContentProps, HTMLDivElement>;
+    Trigger: _redsift_design_system.Comp<PopoverTriggerProps, HTMLButtonElement>;
+    Content: _redsift_design_system.Comp<PopoverContentProps, HTMLDivElement>;
 };
 
 declare const usePopoverContext: () => {
     isModal: boolean | undefined;
-    placement: undefined;
-    strategy: undefined;
-    middlewareData: undefined;
+    placement: _floating_ui_core.Placement;
+    strategy: _floating_ui_core.Strategy;
+    middlewareData: _floating_ui_core.MiddlewareData;
     x: number | null;
     y: number | null;
     update: () => void;
@@ -646,9 +390,9 @@ declare const usePopoverContext: () => {
     context: {
         x: number | null;
         y: number | null;
-        placement: undefined;
-        strategy: undefined;
-        middlewareData: undefined;
+        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;
@@ -919,16 +663,16 @@ declare const Tooltip: React$1.FC<TooltipProps> & {
     displayName?: string | undefined;
     className?: string | undefined;
 } & {
-    Trigger: Comp<TooltipTriggerProps, HTMLSpanElement>;
-    Content: Comp<TooltipContentProps, HTMLDivElement>;
+    Trigger: _redsift_design_system.Comp<TooltipTriggerProps, HTMLSpanElement>;
+    Content: _redsift_design_system.Comp<TooltipContentProps, HTMLDivElement>;
 };
 
 declare const useTooltipContext: () => {
     arrowRef: React$1.MutableRefObject<null>;
     tooltipId: string;
-    placement: undefined;
-    strategy: undefined;
-    middlewareData: undefined;
+    placement: _floating_ui_core.Placement;
+    strategy: _floating_ui_core.Strategy;
+    middlewareData: _floating_ui_core.MiddlewareData;
     x: number | null;
     y: number | null;
     update: () => void;
@@ -938,9 +682,9 @@ declare const useTooltipContext: () => {
     context: {
         x: number | null;
         y: number | null;
-        placement: undefined;
-        strategy: undefined;
-        middlewareData: undefined;
+        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;