@redsift/charts 7.6.0 → 7.7.0-alpha.0

package/index.d.ts

@@ -1,12 +1,200 @@
 import { PieArcDatum as PieArcDatum$1 } from 'd3-shape';
+import { Ref, ReactElement, ComponentProps } from 'react';
 import { ScaleOrdinal, ScaleLinear } from 'd3';
-import { ValueOf as ValueOf$1, Comp } from '@redsift/design-system';
-import { ComponentProps } from 'react';
+import { ValueOf as ValueOf$1, Comp as Comp$1 } from '@redsift/design-system';
 import * as styled_components from 'styled-components';
 
+/** 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>;
+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 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;
+}
+
 type ChartDimensions = {
     width: number;
     height: number;
@@ -126,7 +314,7 @@ interface HorizontalBarChartBarProps extends ComponentProps<'g'> {
     role?: HorizontalBarChartProps['barRole'];
     showTooltip: boolean;
     tooltipLabelOnly: boolean;
-    tooltipPercent: string | null;
+    tooltipPercent: number | null;
     width: number;
 }
 type StyledHorizontalBarChartBarProps = Omit<HorizontalBarChartBarProps, 'chartId' | 'color' | 'data' | 'gap' | 'height' | 'index' | 'isEmpty' | 'showTooltip' | 'tooltipPercent' | 'tooltipLabelOnly' | 'width'> & {
@@ -139,13 +327,19 @@ interface HorizontalBarChartAxisBottomProps extends ComponentProps<'g'> {
 }
 type StyledHorizontalBarChartAxisBottomProps = Omit<HorizontalBarChartAxisBottomProps, 'areXLabelsRotated' | 'chartHeight' | 'd3scale'> & {};
 
-declare const HorizontalBarChart: Comp<HorizontalBarChartProps, HTMLDivElement>;
+declare const HorizontalBarChart: Comp$1<HorizontalBarChartProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface FlexboxProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, FlexLayoutProps {
+}
 
 /**
  * Component style.
  */
 declare const StyledHorizontalBarChart: styled_components.StyledComponent<"div", any, Omit<HorizontalBarChartProps, "data">, never>;
-declare const StyledHorizontalBarChartTitle: styled_components.StyledComponent<"div", any, Omit<HorizontalBarChartProps, "data">, never>;
+declare const StyledHorizontalBarChartTitle: styled_components.StyledComponent<Comp<FlexboxProps, HTMLDivElement>, any, Omit<HorizontalBarChartProps, "data">, never>;
 declare const StyledHorizontalBarChartCaption: styled_components.StyledComponent<"p", any, Omit<HorizontalBarChartProps, "data">, never>;
 declare const StyledHorizontalBarChartEmptyText: styled_components.StyledComponent<"div", any, {
     $maxWidth: number;
@@ -257,7 +451,7 @@ interface PieChartArcProps extends ComponentProps<'g'> {
     role?: PieChartProps['sliceRole'];
     spaced?: boolean;
     showTooltip: boolean;
-    tooltipPercent: string | null;
+    tooltipPercent: number | null;
     tooltipLabelOnly: boolean;
     isEmpty: boolean;
 }
@@ -266,13 +460,13 @@ type StyledPieChartArcProps = Omit<PieChartArcProps, 'chartId' | 'color' | 'data
     $clickable: boolean;
 };
 
-declare const PieChart: Comp<PieChartProps, HTMLDivElement>;
+declare const PieChart: Comp$1<PieChartProps, HTMLDivElement>;
 
 /**
  * Component style.
  */
 declare const StyledPieChart: styled_components.StyledComponent<"div", any, Omit<PieChartProps, "data">, never>;
-declare const StyledPieChartTitle: styled_components.StyledComponent<"div", any, Omit<PieChartProps, "data">, never>;
+declare const StyledPieChartTitle: styled_components.StyledComponent<Comp<FlexboxProps, HTMLDivElement>, any, Omit<PieChartProps, "data">, never>;
 declare const StyledPieChartCaption: styled_components.StyledComponent<"p", any, Omit<PieChartProps, "data">, never>;
 declare const StyledPieChartCenterText: styled_components.StyledComponent<"div", any, {
     $maxWidth: number;