playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1580 → 13.12.0.pre.alpha.play10281596

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md

@@ -0,0 +1,13 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Adds a title | `nil` |  |
+| **placeholder** | `String` | Adds placeholder text | `""` |  |
+| **error** | `(Bool, String)` | Changes the style of the Text Input | `nil` |  |
+| **style** | `Style` | Changes the style of the Text Input | `.default` | `.default` `.rightIcon` `.leftIcon` `.inline` `.disabled` |
+| **onChange** | `Bool` | Adds an event handler | `nil` |  |
+| **keyboardType** | `UIKeyboardType` | Speficies the keyboard type (ios only) | `.default` |  |
+| **text** | `String` | Sets the Text Input's text value |  |  |
+| **selected** | `Bool` | Changes the style of the Text Input |  | `true` `false` |
+| **isHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
+| **isIconHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |

data/app/pb_kits/playbook/pb_text_input/docs/example.yml

@@ -16,3 +16,10 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+
+  swift:
+    - text_input_default_swift: Default
+    - text_input_error_swift: With Error
+    - text_input_disabled_swift: Disabled
+    - text_input_add_on_swift: Add On
+    - text_input_props_swift: ""

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import PbTextarea from '.'
 import type { InputCallback } from '../types'
 
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -22,6 +22,7 @@ type TextareaProps = {
   data?: {[key: string]: string},
   disabled?: boolean,
   error?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inline?: boolean,
   object?: string,
@@ -44,6 +45,7 @@ const Textarea = ({
   children,
   data = {},
   disabled,
+  htmlOptions = {},
   inline = false,
   resize = 'none',
   error,
@@ -71,7 +73,7 @@ const Textarea = ({
   const noCount = typeof characterCount !== 'undefined'
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
-
+  const htmlProps = buildHtmlProps(htmlOptions)
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
@@ -84,6 +86,7 @@ const Textarea = ({
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
     >
       <Caption text={label} />

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 
-import { buildCss } from "../utilities/props";
+import { buildCss, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -16,6 +16,7 @@ type TimeProps = {
   date: Date;
   dark?: boolean;
   id?: string;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   showIcon?: boolean;
   size?: "md" | "sm";
   showTimezone?: boolean;
@@ -28,6 +29,7 @@ const Time = (props: TimeProps) => {
     align,
     className,
     date,
+    htmlOptions = {},
     showIcon,
     size,
     timeZone,
@@ -41,8 +43,13 @@ const Time = (props: TimeProps) => {
     className
   );
 
+  const htmlProps = buildHtmlProps(htmlOptions);
+
   return (
-    <div className={classes}>
+    <div 
+      {...htmlProps}
+      className={classes} 
+    >
       {showIcon && (
         unstyled
           ? (

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import DateTime from '../pb_kit/dateTime';
 
 import Body from '../pb_body/_body'
@@ -12,6 +12,7 @@ import Icon from '../pb_icon/_icon'
 type TimeRangeInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   data?: { [key: string]: string },
   alignment?: "left" | "center" | "vertical",
@@ -41,6 +42,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
     className,
     data = {},
     alignment = 'left',
+    htmlOptions = {},
     size = 'sm',
     dark = false,
     icon = false,
@@ -52,6 +54,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
 
   const dataProps: { [key: string]: string } = buildDataProps(data)
   const ariaProps: { [key: string]: string } = buildAriaProps(aria)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const separator = (
     <Body color="light">
@@ -87,6 +90,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
         id={id}
     >

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
@@ -14,6 +14,7 @@ type TimeStackedProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   date?: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   time?: number | Date,
   timeZone?: string,
@@ -28,6 +29,7 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
     dark,
     data = {},
     date,
+    htmlOptions = {},
     time,
     timeZone,
   } = props
@@ -37,12 +39,14 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
     globalProps(props),
     className
   )
-  const dataProps = buildDataProps(data)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <div
         className={classes}
         {...dataProps}
+        {...htmlProps}
     >
       <Body
           className={classnames('pb_time_stacked', 'time-spacing')}

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss } from '../utilities/props'
+import { buildCss, buildHtmlProps } from '../utilities/props'
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
@@ -10,6 +10,7 @@ type ItemProps = {
   className?: string,
   children?: React.ReactNode[] | React.ReactNode,
   date?: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
@@ -19,6 +20,7 @@ const TimelineItem = ({
   className,
   children,
   date,
+  htmlOptions = {},
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
@@ -26,8 +28,13 @@ const TimelineItem = ({
 }: ItemProps) => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   return (
-    <div className={classnames(timelineItemCss, className)}>
+    <div 
+      {...htmlProps}
+      className={classnames(timelineItemCss, className)}
+    >
       <div className="pb_timeline_item_left_block">
         {date &&
           <DateStacked

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import TimelineItem from './_item'
 
@@ -10,6 +10,7 @@ type TimelineProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   orientation?: string,
   showDate?: boolean,
@@ -20,18 +21,21 @@ const Timeline = ({
   className,
   children,
   data = {},
+  htmlOptions = {},
   id,
   orientation = 'horizontal',
   showDate = false,
 }: TimelineProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
   const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
   return (
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classnames(timelineCss, className)}
       id={id}
     >

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
@@ -16,6 +16,7 @@ type TimestampProps = {
   text: string,
   timestamp: Date | string,
   timezone: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   showDate?: boolean,
   showUser?: boolean,
@@ -32,6 +33,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     text,
     timezone,
     timestamp,
@@ -45,6 +47,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_timestamp_kit', align, {
       dark: dark,
@@ -101,6 +104,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
     >
       <div className="pb_timestamp_kit">

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
 type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
@@ -13,6 +13,7 @@ type TitleProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
@@ -29,6 +30,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     className,
     color,
     data = {},
+    htmlOptions = {},
     id,
     size = 3,
     bold = true,
@@ -40,6 +42,7 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const getBold = bold ? '' : 'thin'
   const isTruncated = truncate ? `truncate-${truncate}` : null
   const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
@@ -68,6 +71,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     <Tag
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_title_count/_title_count.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -16,6 +16,7 @@ type TitleCountProps = {
   count?: number,
   dark?: boolean,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   title?: string,
   size?: "lg" | "sm",
@@ -28,12 +29,14 @@ const TitleCount = (props: TitleCountProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     count,
     id,
     title,
     size = 'sm' } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const css = classnames(
     buildCss('pb_title_count_kit', align, size),
@@ -47,6 +50,7 @@ const TitleCount = (props: TitleCountProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -13,20 +13,33 @@ type TitleDetailProps = {
   className?: string,
   data?: { [key: string]: string },
   detail: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   title: string,
 } & GlobalProps
 
 const TitleDetail = (props: TitleDetailProps) => {
-  const { align = 'left', aria = {}, className, data = {}, detail, id, title } = props
+  const {
+    align = "left",
+    aria = {},
+    className,
+    data = {},
+    detail,
+    htmlOptions = {},
+    id,
+    title,
+  } = props
+  
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const pbCss = buildCss('pb_title_detail_kit', align)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const pbCss = buildCss("pb_title_detail_kit", align)
 
   return (
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classnames(pbCss, globalProps(props), className)}
       id={id}
     >

data/app/pb_kits/playbook/pb_toggle/_toggle.tsx

@@ -6,6 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps,
 } from '../utilities/props'
 
 import { GlobalProps, globalProps } from '../utilities/globalProps'
@@ -16,6 +17,7 @@ type Props = {
   children?: React.ReactNode | React.ReactNode[],
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   name?: string,
   onChange?: InputCallback<HTMLInputElement>,
@@ -30,6 +32,7 @@ const Toggle = ({
   className,
   data = {},
   id,
+  htmlOptions = {},
   name,
   onChange = () => { },
   size = 'sm',
@@ -38,6 +41,7 @@ const Toggle = ({
 }: Props) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     buildCss('pb_toggle_kit',
       size,
@@ -51,6 +55,7 @@ const Toggle = ({
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classnames(css, globalProps(props), className)}
       id={id}
     >

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md

@@ -0,0 +1,11 @@
+![toggle-default](https://github.com/powerhome/playbook/assets/92755007/bd99bd01-d577-4455-b1f9-a88b637e8a60)
+
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBToggle(checked: true)
+  PBToggle(checked: false)
+}
+
+```

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md

@@ -0,0 +1,10 @@
+![toggle-name](https://github.com/powerhome/playbook/assets/92755007/e45a575c-ab14-4181-a5e8-eb8d1f57ab4d)
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBToggle(label: "car", checked: false)
+  PBToggle(label: "bike", checked: false)
+}
+
+```

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **isHovering** | `Bool` | Changes the style of the Toggle | `false` | `true` `false` |
+| **label** | `String` | Adds a label to the Toggle | `nil` |  |
+| **checked** | `Bool` | Changes the style of the Toggle |  | `true` `false` |

data/app/pb_kits/playbook/pb_toggle/docs/example.yml

@@ -13,3 +13,7 @@ examples:
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
 
+  swift:
+    - toggle_default_swift: Default State
+    - toggle_name_swift: Name and Value
+    - toggle_props_swift: ""

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -14,7 +14,7 @@ import {
 
 import classnames from "classnames"
 import { GlobalProps, globalProps } from "../utilities/globalProps"
-import { buildAriaProps, buildDataProps } from "../utilities/props"
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
 
 type TooltipProps = {
@@ -23,6 +23,7 @@ type TooltipProps = {
   children: JSX.Element,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
@@ -38,6 +39,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     children,
     data = {},
     delay = 0,
+    htmlOptions = {},
     icon = null,
     interaction = false,
     placement: preferredPlacement = "top",
@@ -50,6 +52,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
 
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  const htmlProps = buildHtmlProps(htmlOptions)
   
   const css = classnames(
     globalProps({...rest}),
@@ -127,6 +130,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
           style={{ display: "inline-flex" }}
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
       >
         {children}
       </div>

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -1,11 +1,11 @@
-/* eslint-disable */
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -13,24 +13,25 @@ import treemap from 'highcharts/modules/treemap'
 
 type TreemapChartProps = {
   chartData: {
-    name: string,
-    parent?: string | number,
-    value: number,
-    color?: string,
-    id?: string | number,
-  }[],
-  className?: string,
-  colors: string[],
-  dark?: boolean,
-  drillable: boolean,
-  grouped: boolean,
-  height?: string,
-  id: number | string,
-  title?: string,
-  tooltipHtml: string,
-  type?: string,
-  aria?: { [key: string]: string },
-  data?: { [key: string]: string },
+    name: string;
+    parent?: string | number;
+    value: number;
+    color?: string;
+    id?: string | number;
+  }[];
+  className?: string;
+  colors: string[];
+  dark?: boolean;
+  drillable: boolean;
+  grouped: boolean;
+  height?: string;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
+  id: number | string;
+  title?: string;
+  tooltipHtml: string;
+  type?: string;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
 };
 
 const TreemapChart = ({
@@ -42,14 +43,25 @@ const TreemapChart = ({
   drillable = false,
   grouped = false,
   height,
+  htmlOptions = {},
   id,
   title = "",
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
   type = "treemap",
   ...props
 }: TreemapChartProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };  
+  treemap(Highcharts)
+  setupTheme();  
 
   const staticOptions = {
     title: {
@@ -75,40 +87,28 @@ const TreemapChart = ({
         colors:
           colors !== undefined && colors.length > 0
             ? mapColors(colors)
-            : highchartsTheme(window.Highcharts).colors,
+            : highchartsTheme.colors,
       },
     },
   };
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
+    
     setOptions({ ...staticOptions });
-
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
-          : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
-        
-        treemap(window.Highcharts)
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), "pb_treemap_chart"),
         id: id,
         ...ariaProps,
         ...dataProps,
+        ...htmlProps
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );