playbook_ui 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551 → 13.12.0.pre.alpha.PLAY1081exporttypes1608

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -3,6 +3,8 @@ import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
 import highchartsMore from "highcharts/highcharts-more";
 
+import Highcharts from "highcharts";
+
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -10,35 +12,35 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 type CircleChartProps = {
-  align?: "left" | "right" | "center",
-  aria: { [key: string]: string },
-  chartData?: [],
-  children?: Node,
-  className?: string,
-  colors?: string[],
-  dark?: Boolean,
-  data?: Object,
-  dataLabelHtml?: string,
-  dataLabels?: boolean,
-  height?: string,
-  id?: string,
-  innerSize?: "sm" | "md" | "lg" | "none",
-  legend?: boolean,
-  maxPointSize?: number,
-  minPointSize?: number,
-  rounded?: boolean,
-  startAngle?: number,
-  style?: string,
-  title?: string,
-  tooltipHtml: string,
-  useHtml?: boolean,
-  zMin?: number,
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-  borderColor?: string,
-  borderWidth?: number,
+  align?: "left" | "right" | "center";
+  aria: { [key: string]: string };
+  chartData?: [];
+  children?: Node;
+  className?: string;
+  colors?: string[];
+  dark?: Boolean;
+  data?: Object;
+  dataLabelHtml?: string;
+  dataLabels?: boolean;
+  height?: string;
+  id?: string;
+  innerSize?: "sm" | "md" | "lg" | "none";
+  legend?: boolean;
+  maxPointSize?: number;
+  minPointSize?: number;
+  rounded?: boolean;
+  startAngle?: number;
+  style?: string;
+  title?: string;
+  tooltipHtml: string;
+  useHtml?: boolean;
+  zMin?: number;
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  borderColor?: string;
+  borderWidth?: number;
 };
 
 // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
@@ -88,11 +90,29 @@ const CircleChart = ({
 }: CircleChartProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  highchartsMore(Highcharts);
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  Highcharts.setOptions({
+    tooltip: {
+      headerFormat: null,
+      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
+      useHTML: useHtml,
+    },
+  });
+
   const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
-  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
+  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
+    innerSizes[size];
+
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -149,50 +169,26 @@ const CircleChart = ({
       credits: false,
     };
     setOptions({ ...staticOptions });
-
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme)
-          : window.Highcharts.setOptions(highchartsTheme)
-        
-        highchartsMore(window.Highcharts);
-
-        window.Highcharts.setOptions({
-          tooltip: {
-            headerFormat: null,
-            pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
-            useHTML: useHtml,
-          },
-        });
-
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
+
   return (
     <>
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
-          {
-            isHighchartsLoaded &&
-            <HighchartsReact
-              containerProps={{
-                className: classnames("pb_circle_chart", globalProps(props)),
-                id: id,
-                ...ariaProps,
-                ...dataProps,
-              }}
-              highcharts={window.Highcharts}
-              options={options}
-            />
-          }
+          <HighchartsReact
+            containerProps={{
+              className: classnames("pb_circle_chart", globalProps(props)),
+              id: id,
+              ...ariaProps,
+              ...dataProps,
+            }}
+            highcharts={Highcharts}
+            options={options}
+          />
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
-        isHighchartsLoaded &&
         <HighchartsReact
           containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
@@ -200,7 +196,7 @@ const CircleChart = ({
             ...ariaProps,
             ...dataProps,
           }}
-          highcharts={window.Highcharts}
+          highcharts={Highcharts}
           options={options}
         />
       )}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+declare type CircleIconButtonProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    disabled?: boolean;
+    icon: string;
+    id?: string;
+    link?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    newWindow?: boolean;
+    type?: 'button' | 'submit' | 'reset' | undefined;
+    variant?: 'primary' | 'secondary' | 'link';
+};
+declare const CircleIconButton: (props: CircleIconButtonProps) => React.ReactElement;
+export default CircleIconButton;

data/app/pb_kits/playbook/pb_collapsible/_collapsible.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconSizes } from "../pb_icon/_icon";
+declare type CollapsibleProps = {
+    children?: JSX.Element | [] | any;
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    collapsed?: boolean;
+    data?: object;
+    icon?: string | string[];
+    iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success';
+    iconSize?: IconSizes;
+    onIconClick?: () => void;
+    onClick?: () => void;
+    id?: string;
+};
+declare const Collapsible: {
+    ({ aria, className, children, collapsed, data, icon, iconColor, iconSize, onIconClick, onClick, id, ...props }: CollapsibleProps): JSX.Element;
+    Main: ({ children, className, cursor, ...props }: {
+        children: React.ReactNode | React.ReactNode[];
+        className?: string;
+        cursor?: string;
+        dark?: boolean;
+        onClick?: () => void;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    Content: ({ children, className, ...props }: import("./child_kits/CollapsibleContent").CollapsibleContentProps) => JSX.Element;
+};
+export default Collapsible;

data/app/pb_kits/playbook/pb_collapsible/_helper_functions.d.ts

@@ -0,0 +1,2 @@
+export declare const showElement: (elem: any) => void;
+export declare const hideElement: (elem: any) => void;

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type CollapsibleContentProps = {
+    children?: React.ReactNode[] | React.ReactNode | string;
+    className?: string;
+};
+declare const CollapsibleContent: ({ children, className, ...props }: CollapsibleContentProps) => JSX.Element;
+export default CollapsibleContent;

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type CollapsibleMainProps = {
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+    cursor?: string;
+    dark?: boolean;
+    onClick?: () => void;
+};
+declare const CollapsibleMain: ({ children, className, cursor, ...props }: CollapsibleMainProps) => React.ReactElement;
+export default CollapsibleMain;

data/app/pb_kits/playbook/pb_collapsible/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CollapsibleContext: import("react").Context<{}>;
+export default CollapsibleContext;

data/app/pb_kits/playbook/pb_collapsible/useCollapsible.d.ts

@@ -0,0 +1,2 @@
+declare const useCollapsible: (initial?: boolean) => any[];
+export default useCollapsible;

data/app/pb_kits/playbook/pb_contact/_contact.d.ts

@@ -0,0 +1,13 @@
+declare type ContactProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string | string[];
+    contactDetail?: string;
+    contactType?: string;
+    contactValue: string;
+    data?: object;
+    id?: string;
+};
+declare const Contact: (props: ContactProps) => JSX.Element;
+export default Contact;

data/app/pb_kits/playbook/pb_currency/_currency.d.ts

@@ -0,0 +1,24 @@
+declare type CurrencyProps = {
+    abbreviate?: boolean;
+    align?: 'center' | 'left' | 'right';
+    amount: string;
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    decimals?: 'default' | 'matching';
+    emphasized?: boolean;
+    id?: string;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    symbol?: string;
+    variant?: 'default' | 'light' | 'bold';
+    unit?: string;
+    unstyled?: boolean;
+};
+declare const Currency: (props: CurrencyProps) => JSX.Element;
+export default Currency;

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.d.ts

@@ -0,0 +1,2 @@
+declare const mapColors: (array: string[]) => string[];
+export default mapColors;

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProps } from './themeTypes';
+declare const highchartsDarkTheme: ThemeProps;
+export { highchartsDarkTheme };

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProps } from './themeTypes';
+declare const highchartsTheme: ThemeProps;
+export { highchartsTheme };

data/app/pb_kits/playbook/pb_dashboard/themeTypes.d.ts

@@ -0,0 +1,40 @@
+export declare type ThemeProps = {
+    lang?: {
+        [key: string]: string;
+    };
+    credits?: {
+        [key: string]: boolean;
+    };
+    colors?: string[];
+    chart?: {
+        [key: string]: any;
+    };
+    title?: {
+        [key: string]: string | {};
+    };
+    subtitle?: {
+        [key: string]: string | {};
+    };
+    xAxis?: {
+        [key: string]: any;
+    };
+    yAxis?: {
+        [key: string]: any;
+    };
+    legend?: {
+        [key: string]: string | {};
+    };
+    labels?: {
+        [key: string]: {};
+    };
+    tooltip?: {
+        [key: string]: any;
+    };
+    pane?: {
+        [key: string]: {};
+    };
+    plotOptions?: {
+        [key: string]: any;
+    };
+    colorKey?: string;
+};

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+declare type DashboardValueProps = {
+    align?: 'left' | 'center' | 'right';
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    statChange?: {
+        change?: 'increase' | 'decrease' | 'neutral';
+        value?: string | number;
+    };
+    statLabel?: string;
+    statValue?: {
+        unit?: string;
+        value?: string | number;
+    };
+};
+declare const DashboardValue: (props: DashboardValueProps) => React.ReactElement;
+export default DashboardValue;

data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.d.ts

@@ -0,0 +1,43 @@
+declare const pbIndicator: {
+    title: {
+        fontFamily: any;
+        color: any;
+        fontSizes: {
+            big: any;
+            medium: any;
+            small: any;
+            micro: any;
+        };
+    };
+    secondaryTitle: {
+        color: any;
+        fontFamily: any;
+        fontSizes: {
+            big: any;
+            medium: any;
+            small: any;
+            micro: any;
+        };
+    };
+    value: {
+        fontFamily: any;
+        color: any;
+        fontWeight: any;
+        fontSizes: {
+            big: any;
+            medium: any;
+            small: any;
+            micro: any;
+        };
+    };
+    secondaryValue: {
+        fontFamily: any;
+        fontSizes: {
+            big: any;
+            medium: any;
+            small: any;
+            micro: any;
+        };
+    };
+};
+export default pbIndicator;

data/app/pb_kits/playbook/pb_date/_date.d.ts

@@ -0,0 +1,18 @@
+declare type PbDateProps = {
+    alignment?: "left" | "center" | "right";
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    showDayOfWeek?: boolean;
+    showIcon?: boolean;
+    size?: "sm" | "md" | "lg";
+    unstyled?: boolean;
+    value: Date;
+};
+declare const PbDate: (props: PbDateProps) => JSX.Element;
+export default PbDate;

data/app/pb_kits/playbook/pb_date_picker/_date_picker.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type DatePickerProps = {
+    allowInput?: boolean;
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    defaultDate?: string;
+    disableDate?: number[];
+    disableInput?: boolean;
+    disableRange?: number[];
+    disableWeekdays?: number[];
+    enableTime?: boolean;
+    error?: string;
+    format?: string;
+    hideIcon?: boolean;
+    hideLabel?: boolean;
+    id?: string;
+    inLine?: boolean;
+    inputAria?: {
+        [key: string]: string;
+    };
+    inputData?: {
+        [key: string]: string;
+    };
+    inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+    inputValue?: string;
+    label?: string;
+    maxDate: string;
+    minDate: string;
+    name: string;
+    pickerId?: string;
+    placeholder?: string;
+    positionElement?: HTMLElement | null;
+    scrollContainer?: string;
+    selectionType?: "month" | "week" | "quickpick";
+    showTimezone?: boolean;
+    staticPosition: boolean;
+    thisRangesEndToday?: boolean;
+    timeFormat?: string;
+    type?: string;
+    yearRange?: number[];
+} & GlobalProps;
+declare const DatePicker: (props: DatePickerProps) => React.ReactElement;
+export default DatePicker;

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.d.ts

@@ -0,0 +1,23 @@
+import { BaseOptions } from 'flatpickr/dist/types/options';
+declare type DatePickerConfig = {
+    closeOnSelect?: boolean;
+    disableDate?: number[];
+    disableRange?: number[];
+    disableWeekdays?: number[];
+    format?: string;
+    pickerId?: ArrayLike<Node> | Node | string;
+    required: boolean;
+    hideIcon?: boolean;
+    inLine?: boolean;
+    onChange: (dateStr: string, selectedDates: Date[]) => void;
+    selectionType?: "month" | "week" | "quickpick" | "";
+    onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void;
+    showTimezone?: boolean;
+    staticPosition: boolean;
+    thisRangesEndToday?: boolean;
+    timeCaption?: string;
+    timeFormat?: string;
+    yearRange: number[];
+} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement">;
+declare const datePickerHelper: (config: DatePickerConfig, scrollContainer: string | HTMLElement) => any;
+export default datePickerHelper;

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.d.ts

@@ -0,0 +1,18 @@
+declare type FpTypes = {
+    setDate: (arg0: any, arg1: boolean) => void;
+    config: {
+        [key: string]: string;
+    };
+    clear: (arg0: boolean, arg1: boolean) => void;
+    close: () => void;
+    calendarContainer?: {
+        classList: {
+            add: (arg0: string) => void;
+        };
+        prepend: (arg0: HTMLDivElement) => void;
+        append: (arg0: HTMLDivElement) => void;
+    };
+    loadedPlugins: string[];
+};
+declare const quickPickPlugin: (thisRangesEndToday: boolean) => (fp: FpTypes & any) => any;
+export default quickPickPlugin;

data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.d.ts

@@ -0,0 +1,44 @@
+declare type FpTypes = {
+    amPM?: {
+        style: {
+            display: string;
+        };
+    };
+    selectedDates: string | any[];
+    setDate: (arg0: any, arg1: boolean) => void;
+    input: {
+        id: any;
+    };
+    timeContainer?: {
+        classList: {
+            add: (arg0: string) => void;
+        };
+        prepend: (arg0: HTMLDivElement) => void;
+        append: (arg0: HTMLDivElement) => void;
+    };
+    minuteElement?: {
+        step: string;
+    };
+    _initialDate: {
+        toLocaleDateString: (arg0: string, arg1: {
+            day: string;
+            timeZoneName: string;
+        }) => string | any[];
+    };
+    loadedPlugins: string[];
+};
+export declare const getTimezoneText: (inputDate: {
+    toLocaleDateString: (arg0: string, arg1: {
+        day: string;
+        timeZoneName: string;
+    }) => string | any[];
+}) => string;
+declare function timeSelectPlugin(props: {
+    caption: string;
+    showTimezone: boolean;
+}): (fp: FpTypes & any) => {
+    onValueUpdate(): void;
+    onOpen(): void;
+    onReady(): void;
+};
+export default timeSelectPlugin;

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.d.ts

@@ -0,0 +1,13 @@
+declare type DateRangeInlineProps = {
+    className?: string;
+    id?: string;
+    data?: string;
+    align?: "left" | "center" | "vertical";
+    size?: "sm" | "xs";
+    dark?: boolean;
+    icon?: boolean;
+    startDate?: Date;
+    endDate?: Date;
+};
+declare const DateRangeInline: (props: DateRangeInlineProps) => JSX.Element;
+export default DateRangeInline;

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.d.ts

@@ -0,0 +1,10 @@
+declare type DateRangeStackedProps = {
+    className?: string | string[];
+    data?: string;
+    dark?: boolean;
+    endDate: Date;
+    id?: string;
+    startDate: Date;
+};
+declare const DateRangeStacked: (props: DateRangeStackedProps) => JSX.Element;
+export default DateRangeStacked;

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.d.ts

@@ -0,0 +1,13 @@
+declare type DateStackedProps = {
+    align?: "left" | "center" | "right";
+    bold?: boolean;
+    className?: string | string[];
+    dark?: boolean;
+    data?: string;
+    date: Date;
+    size?: "sm" | "md";
+    id?: string;
+    reverse?: boolean;
+};
+declare const DateStacked: (props: DateStackedProps) => JSX.Element;
+export default DateStacked;

data/app/pb_kits/playbook/pb_date_time/_date_time.d.ts

@@ -0,0 +1,18 @@
+declare type DateTimeProps = {
+    align?: "left" | "center" | "right";
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    datetime: Date;
+    id?: string;
+    size?: "sm" | "md";
+    showDayOfWeek: boolean;
+    showIcon?: boolean;
+    timeZone?: string;
+};
+declare const DateTime: (props: DateTimeProps) => JSX.Element;
+export default DateTime;

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type DateTimeStackedProps = {
+    id?: string;
+    date: Date;
+    datetime: Date;
+    dark: boolean;
+    timeZone?: string;
+};
+declare const DateTimeStacked: (props: DateTimeStackedProps) => React.ReactElement;
+export default DateTimeStacked;

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.d.ts

@@ -0,0 +1,10 @@
+declare type DateYearStackedProps = {
+    align?: "left" | "center" | "right";
+    className?: string | string[];
+    dark?: boolean;
+    data?: string;
+    date: Date;
+    id?: string;
+};
+declare const DateYearStacked: (props: DateYearStackedProps) => JSX.Element;
+export default DateYearStacked;