playbook_ui 13.14.0.pre.alpha.play1106filter1748 → 13.14.0.pre.alpha.play1120lintdatepicker1797

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -12,22 +12,20 @@ import { IconSizes } from "../pb_icon/_icon"
 
 
 type CollapsibleProps = {
-  children?: JSX.Element | [] | any,
+  children?: React.ReactElement | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
-  data?: object,
+  data?: {[key: string]: string},
   icon?: string | string[],
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-
-
 const Collapsible = ({
   aria = {},
   className,
@@ -42,14 +40,14 @@ const Collapsible = ({
   onClick,
   id,
   ...props
-}: CollapsibleProps) => {
+}: CollapsibleProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
+  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
 
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')

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

@@ -1,4 +1,4 @@
-export const showElement = (elem:any) => {
+export const showElement = (elem: HTMLElement) => {
   elem.style.display = 'block';
   const height = elem.scrollHeight + 'px'; // Get its height
   elem.style.height = height; // Update the max-height
@@ -11,7 +11,7 @@ export const showElement = (elem:any) => {
   }, 300);
 };
 
-export const hideElement = (elem:any) => {
+export const hideElement = (elem: HTMLElement) => {
   elem.style.height = elem.scrollHeight + 'px';
 
   window.setTimeout(() => {

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps) => {
+}: CollapsibleContentProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)
@@ -33,9 +33,10 @@ const CollapsibleContent = ({
   }, [context.collapsed]);
 
   return (
-    <div ref={contentRef}
-      data-collapsible-content="true" 
-      className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
+    <div className={classnames(contentCSS, contentSpacing, "toggle-content", className)}
+        data-collapsible-content="true" 
+        ref={contentRef}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -56,7 +56,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     return icon
   }
 
-  const handleIconClick = (e:any) => {
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
     if (onIconClick) {
     e.stopPropagation();
     onIconClick()
@@ -67,21 +67,25 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     <>
       {collapsed ? (
         <div
-          className="icon_wrapper"
-          key={icon ? showIcon(icon)[0] : "chevron-down"}
-          style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
         >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
+          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
         </div>
       ) : (
         <div
-          className="icon_wrapper"
-          key={icon ? showIcon(icon)[1] : "chevron-up"}
-          style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
         >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
+          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
         </div>
       )}
     </>
@@ -118,9 +122,9 @@ const CollapsibleMain = ({
           <FlexItem>
             <ToggleIcon
                 collapsed={collapsed as () => void}
+                icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}
                 iconSize={iconSize as IconSizes}
-                icon={icon as string[] | string}
                 onIconClick={onIconClick}
             />
             </FlexItem>

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -50,12 +50,12 @@ type ContactProps = {
   contactDetail?: string,
   contactType?: string,
   contactValue: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-const Contact = (props: ContactProps) => {
+const Contact = (props: ContactProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -18,7 +18,7 @@ type CurrencyProps = {
   data?: {[key:string]:string},
   decimals?: 'default' | 'matching',
   emphasized?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
   size?: 'sm' | 'md' | 'lg',
@@ -34,7 +34,7 @@ const sizes: {lg: 1, md: 3, sm: 4} = {
   sm: 4,
 }
 
-const Currency = (props: CurrencyProps) => {
+const Currency = (props: CurrencyProps): React.ReactElement => {
   const {
     abbreviate = false,
     align = 'left',

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

@@ -2,7 +2,7 @@ import colors from "../tokens/exports/_colors.scss";
 
 
 // Map Data Color String Props to our SCSS Variables
-const mapColors = (array: string[]) => {
+const mapColors = (array: string[]): string[] => {
     const regex = /(data)\-[1-8]/; //eslint-disable-line
   
     const newArray = array.map((item) => {

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

@@ -3,9 +3,6 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import Highcharts from 'highcharts'
-
-const pbButtonHoverColor = '#004ebb'
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -22,7 +19,7 @@ const highchartsDarkTheme: ThemeProps = {
   chart: {
     borderWidth: 0,
     borderRadius: 0,
-    plotBackgroundColor: null,
+    plotBackgroundColor: undefined,
     plotShadow: false,
     plotBorderWidth: 0,
   },
@@ -64,7 +61,7 @@ const highchartsDarkTheme: ThemeProps = {
     },
   },
   yAxis: {
-    alternateGridColor: null,
+    alternateGridColor: undefined,
     minorTickInterval: null,
     gridLineColor: colors.border_dark,
     minorGridLineColor: colors.border_dark,
@@ -104,11 +101,6 @@ const highchartsDarkTheme: ThemeProps = {
       color: colors.text_dk_lighter,
     },
   },
-  labels: {
-    style: {
-      color: colors.primary,
-    },
-  },
   tooltip: {
     backgroundColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -130,29 +122,15 @@ const highchartsDarkTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: {
+    background: [{
       borderColor: colors.border_dark,
-    },
+    }],
   },
 
   plotOptions: {
     series: {
       borderColor: colors.bg_dark_card,
       borderWidth: 2,
-      type: 'area',
-      nullColor: colors.text_dk_lighter,
-      fillColor: {
-        linearGradient: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 1,
-        },
-        stops: [
-          [0, Highcharts.getOptions().colors[0]],
-          [1, 'white'],
-        ],
-      },
       threshold: null,
     },
     // PIE STYLES
@@ -184,15 +162,6 @@ const highchartsDarkTheme: ThemeProps = {
       marker: {
         lineColor: colors.border_dark,
       },
-      area: {
-        shadow: false,
-        states: {
-          hover: {
-            lineWidth: 1,
-          },
-        },
-        threshold: null,
-      },
     },
 
     //TREEMAP CHART STYLES
@@ -210,7 +179,6 @@ const highchartsDarkTheme: ThemeProps = {
         colors.data_7,
         colors.data_8,
       ],
-      colorByPoint: true,
       dataLabels: {
         enabled: true,
         style: {
@@ -229,27 +197,6 @@ const highchartsDarkTheme: ThemeProps = {
       ],
       traverseUpButton: {
         position: { y: -50 },
-        text: '< Back',
-        theme: {
-          r: 4,
-          states: {
-            hover: {
-              style: {
-                fill: pbButtonHoverColor,
-              },
-            },
-          },
-          style: {
-            fill: colors.royal,
-            color: colors.white,
-            fontSize: `${typography.text_small}`,
-            fontWeight: typography.bold,
-            fontFamily: `${typography.font_family_base}`,
-          },
-          stroke: colors.royal,
-          height: 24,
-          width: 90,
-        },
       },
     },
   },

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

@@ -3,9 +3,6 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import Highcharts from 'highcharts'
-
-const pbButtonHoverColor = '#004ebb'
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -22,7 +19,7 @@ const highchartsTheme: ThemeProps = {
   chart: {
     borderWidth: 0,
     borderRadius: 0,
-    plotBackgroundColor: null,
+    plotBackgroundColor: undefined,
     plotShadow: false,
     plotBorderWidth: 0,
   },
@@ -64,7 +61,7 @@ const highchartsTheme: ThemeProps = {
     },
   },
   yAxis: {
-    alternateGridColor: null,
+    alternateGridColor: undefined,
     minorTickInterval: null,
     gridLineColor: colors.border_light,
     minorGridLineColor: colors.border_light,
@@ -104,11 +101,6 @@ const highchartsTheme: ThemeProps = {
       color: colors.text_lt_lighter,
     },
   },
-  labels: {
-    style: {
-      color: colors.primary,
-    },
-  },
   tooltip: {
     backgroundColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -130,27 +122,13 @@ const highchartsTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: {
+    background: [{
       borderColor: colors.border_light,
-    },
+    }],
   },
 
   plotOptions: {
     series: {
-      type: 'area',
-      nullColor: colors.text_lt_lighter,
-      fillColor: {
-        linearGradient: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 1,
-        },
-        stops: [
-          [0, Highcharts.getOptions().colors[0]],
-          [1, 'white'],
-        ],
-      },
       threshold: null,
     },
     // PIE STYLES
@@ -182,15 +160,6 @@ const highchartsTheme: ThemeProps = {
       marker: {
         lineColor: '#333',
       },
-      area: {
-        shadow: false,
-        states: {
-          hover: {
-            lineWidth: 1,
-          },
-        },
-        threshold: null,
-      },
     },
 
     //TREEMAP CHART STYLES
@@ -208,7 +177,6 @@ const highchartsTheme: ThemeProps = {
         colors.data_7,
         colors.data_8,
       ],
-      colorByPoint: true,
       dataLabels: {
         enabled: true,
         style: {
@@ -227,27 +195,6 @@ const highchartsTheme: ThemeProps = {
       ],
       traverseUpButton: {
         position: { y: -50 },
-        text: '< Back',
-        theme: {
-          r: 4,
-          states: {
-            hover: {
-              style: {
-                fill: pbButtonHoverColor,
-              },
-            },
-          },
-          style: {
-            fill: colors.royal,
-            color: colors.white,
-            fontSize: `${typography.text_small}`,
-            fontWeight: typography.bold,
-            fontFamily: `${typography.font_family_base}`,
-          },
-          stroke: colors.royal,
-          height: 24,
-          width: 90,
-        },
       },
     },
   },

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

@@ -1,16 +1,20 @@
-export 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
-    }
+import { Options, LegendOptions } from "highcharts";
+export interface ThemeProps
+  extends Pick<
+    Options,
+    | "credits"
+    | "chart"
+    | "colors"
+    | "lang"
+    | "title"
+    | "subtitle"
+    | "xAxis"
+    | "yAxis"
+    | "legend"
+    | "tooltip"
+    | "pane"
+    | "plotOptions"
+  > {
+  colorKey?: string;
+  legend?: LegendOptions;
+}

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx

@@ -12,7 +12,7 @@ type DashboardValueProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   statChange?: {
     change? : 'increase' | 'decrease' | 'neutral',

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -15,7 +15,7 @@ type PbDateProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   showDayOfWeek?: boolean;
   showIcon?: boolean;
@@ -24,7 +24,7 @@ type PbDateProps = {
   value: Date;
 };
 
-const PbDate = (props: PbDateProps) => {
+const PbDate = (props: PbDateProps): React.ReactElement => {
   const {
     aria = {},
     alignment = "left",
@@ -57,11 +57,11 @@ const PbDate = (props: PbDateProps) => {
 
   return (
     <div 
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       {unstyled
         ? <>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -26,7 +26,7 @@ type DatePickerProps = {
   format?: string,
   hideIcon?: boolean,
   hideLabel?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inLine?: boolean,
   inputAria?: { [key: string]: string },

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

@@ -32,6 +32,10 @@ type DatePickerConfig = {
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
+  const noop = () => {
+    // intentionally left empty as a no-op placeholder
+  }
+
   const {
     allowInput,
     closeOnSelect = true,
@@ -45,8 +49,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     maxDate,
     minDate,
     mode,
-    onChange = () => {},
-    onClose = () => {},
+    onChange = noop,
+    onClose = noop,
     pickerId,
     plugins,
     position = "auto",
@@ -72,20 +76,11 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       return defaultDate
     }
   }
-  const disabledParser = () => {
-    const disabledArray=[]
-     
-    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
-    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
-    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
-
-    return disabledArray
-  }
 
   const disabledWeekDays = () => {
     return (
       [
-        (date:any) => {
+        (date: any) => {
           const weekdayObj: {
             [day: string]: number
           } = {
@@ -110,6 +105,16 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       ]
     )
   }
+
+  const disabledParser = () => {
+    const disabledArray=[]
+
+    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
+    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
+    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
+
+    return disabledArray
+  }
   const calendarResizer = () => {
     const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
     const parentInput = cal.parentElement
@@ -125,28 +130,46 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     const pluginList = []
-  
+
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
-  
+
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
       pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
     }
-  
+
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
-  
+
     return pluginList
   }
-  
+
   const getDateFormat = () => {
     return enableTime ? `${format} ${timeFormat}` : format
   }
 
+  // Attach / detach to / from scroll events
+  const initialPicker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
+  const scrollEvent = () => {
+    initialPicker._positionCalendar()
+  }
+  function attachToScroll(scrollParent: string | HTMLElement) {
+    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
+  }
+  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
+    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
+  }
+
+  // two way binding
+  const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
+  const yearChangeHook = () => {
+    initialDropdown.value = initialPicker.currentYear
+  }
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -193,17 +216,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
-  // Attach / detach to / from scroll events
-  const scrollEvent = () => {
-    picker._positionCalendar()
-  }
-  function attachToScroll(scrollParent: string | HTMLElement) {
-    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
-  }
-  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
-    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
-  }
-
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 
@@ -242,11 +254,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // two way binding
-  const yearChangeHook = () => {
-    dropdown.value = picker.currentYear
-  }
-
   // Adding dropdown icons to year and month selects
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {