playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1581 → 13.12.0.pre.alpha.play10281596

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecf77f0f5c5a5a5d001bc6e2f79be4b3e08224ea889fd6e394c75e49ad9e4657
-  data.tar.gz: 10dc5d42990b1bee0ca830734e98e6b5acf6bc8d49c5e3824067c6e6174492e0
+  metadata.gz: 16d95847674aec1bca3c0668bca775cd9c7e7770129463157e2fb7e73cf0b2fe
+  data.tar.gz: c6c048ad9a32b425d9ce1071693e1ed631a2ca480c938d4e93d79e31322d0f8e
 SHA512:
-  metadata.gz: 186da8ef643dbe0ac06d8a0dbf9618ebc747fc6c083e28bf43a72d13bcabf0144e7e699140f016afc8ffb6b5b8695fc268e6a389acaca1fe3cabefc67627dd8d
-  data.tar.gz: dbd1bb54dc3112d0942f1a5cf31eaf4bb6b677484293b6cd645cc32904dcbad9b194bd6314fecdb8488c6a2df46b66c9c13825dbbfe82b176bf5fe6054ae73b2
+  metadata.gz: f59559d7266ab700fc78b8f0378e1fba50cae3ceef0212f8f45d9ecd798c099eb85d13e3e41ce5392c2370e71ebba8a444e0d9228bdbad3c6280aafcaae0e4d1
+  data.tar.gz: 4397d3e17246775de0d4188e9b31f8ad23ca7e6782e6de44f76d2a384b00a46d71fa124e82d90fa48f4f997bf29d471eb4dcab2ed4ceee7d124149ee5e4f3271

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Image from '../pb_image/_image'
@@ -12,6 +12,7 @@ export type AvatarProps = {
   className?: string,
   data?: {[key: string]: string},
   dark?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -30,6 +31,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     name = null,
     id = '',
     imageAlt = '',
@@ -40,6 +42,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
   } = props
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_avatar_kit', `size_${size}`),
     globalProps(props),
@@ -58,6 +61,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -6,8 +6,8 @@ import classnames from 'classnames'
 import {
   buildAriaProps,
   buildCss,
-  buildDataProps,
-} from '../utilities/props'
+  buildDataProps, 
+  buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -20,6 +20,7 @@ type AvatarActionButtonProps = {
   className?: string,
   dark?: boolean,
   data?: Object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -38,6 +39,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     imageAlt = '',
     imageUrl,
@@ -50,6 +52,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(buildCss(
     'pb_avatar_action_button_kit',
@@ -68,6 +71,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type BackgroundProps = {
@@ -23,6 +23,7 @@ type BackgroundProps = {
   className?: string,
   customColor?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -74,6 +75,7 @@ const Background = (props: BackgroundProps) => {
     className,
     customColor,
     data = {},
+    htmlOptions = {},
     id,
     imageUrl = '',
     tag = 'div',
@@ -113,6 +115,7 @@ const Background = (props: BackgroundProps) => {
     imageUrl: resImageUrl,
   } = responsiveProps;
 
+
   // Build CSS classes and styles using responsive values.
   const classes = classnames(
     buildCss('pb_background_kit'),
@@ -137,16 +140,17 @@ const Background = (props: BackgroundProps) => {
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-
- 
+  const htmlProps = buildHtmlProps(htmlOptions);
+  
   return (
     <Tag
-      alt={alt}
-      style={backgroundStyle}
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
+      alt={alt}
       className={classes}
       id={id}
+      style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -6,7 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-} from '../utilities/props'
+  buildHtmlProps } from '../utilities/props'
 
 import Icon from '../pb_icon/_icon'
 
@@ -19,6 +19,7 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -32,6 +33,7 @@ const Badge = (props: BadgeProps) => {
     className,
     closeProps = {},
     data = {},
+    htmlOptions = {},
     id,
     removeIcon = false,
     removeOnClick,
@@ -41,6 +43,7 @@ const Badge = (props: BadgeProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
     globalProps(props),
@@ -51,6 +54,7 @@ const Badge = (props: BadgeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 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";
@@ -10,31 +11,33 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import classnames from "classnames";
 
 type BarGraphProps = {
-  align?: "left" | "right" | "center",
-  axisTitle: string,
-  dark?: boolean,
-  xAxisCategories: [],
-  yAxisMin: number,
-  yAxisMax: number,
-  chartData: { name: string, data: number[] }[],
-  className?: string,
-  id: any,
-  pointStart: number | any,
-  subTitle?: string,
-  title: string,
-  type?: string,
-  legend?: boolean,
-  toggleLegendClick?: boolean,
-  height?: string,
-  colors: string[],
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-  aria?: { [key: string]: string },
-  data?: { [key: string]: string },
+  align?: "left" | "right" | "center";
+  axisTitle: string;
+  dark?: boolean;
+  xAxisCategories: [];
+  yAxisMin: number;
+  yAxisMax: number;
+  chartData: { name: string; data: number[] }[];
+  className?: string;
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  id: any;
+  pointStart: number | any;
+  subTitle?: string;
+  title: string;
+  type?: string;
+  legend?: boolean;
+  toggleLegendClick?: boolean;
+  height?: string;
+  colors: string[];
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
 };
 
+
 const BarGraph = ({
   aria = {},
   data = {},
@@ -44,6 +47,7 @@ const BarGraph = ({
   chartData,
   className = "pb_bar_graph",
   colors,
+  htmlOptions = {},
   id,
   pointStart,
   subTitle,
@@ -62,7 +66,14 @@ const BarGraph = ({
   ...props
 }: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
 
   const staticOptions = {
     title: {
@@ -96,7 +107,7 @@ const BarGraph = ({
     colors:
       colors !== undefined && colors.length > 0
         ? mapColors(colors)
-        : highchartsTheme(window.Highcharts).colors,
+        : highchartsTheme.colors,
     plotOptions: {
       series: {
         pointStart: pointStart,
@@ -115,32 +126,21 @@ const BarGraph = ({
   }
 
   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))
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
         containerProps={{
           className: classnames(globalProps(props), className),
           id: id,
           ...ariaProps,
           ...dataProps,
+          ...htmlProps
         }}
-        highcharts={window.Highcharts}
+        highcharts={Highcharts}
         options={options}
     />
   );

data/app/pb_kits/playbook/pb_body/_body.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 { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Highlight from '../pb_highlight/_highlight'
@@ -15,6 +15,7 @@ type BodyProps = {
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
@@ -33,6 +34,7 @@ const Body = (props: BodyProps): React.ReactElement => {
     data = {},
     highlightedText = [],
     highlighting = false,
+    htmlOptions = {},
     id = '',
     status = null,
     tag = 'div',
@@ -43,6 +45,7 @@ const Body = (props: BodyProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
     buildCss('pb_body_kit', color, variant, status, isTruncated),
@@ -56,6 +59,7 @@ const Body = (props: BodyProps): React.ReactElement => {
     <Tag
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx

@@ -8,12 +8,13 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-} from '../utilities/props'
+  buildHtmlProps } from '../utilities/props'
 
 type BreadCrumbItemProps = {
   aria?: {[key: string]: string},
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   component?: "a" | "span",
   [x:string]: any;
@@ -25,12 +26,14 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     component = 'a',
     ...rest
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const Component = component || 'span';
   const css = classnames(
     buildCss('pb_bread_crumb_item_kit'),
@@ -42,6 +45,7 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -8,12 +6,14 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps
 } from '../utilities/props'
 
 type BreadCrumbsProps = {
   aria?: {[key: string]: string},
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   text?: string,
   children?: React.ReactChild[] | React.ReactNode,
@@ -23,11 +23,13 @@ const BreadCrumbs = (props: BreadCrumbsProps) => {
     aria = { label: 'Breadcrumb Navigation' },
     className,
     data = {},
+    htmlOptions = {},
     id,
     children,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     buildCss('pb_bread_crumbs_kit'),
     globalProps(props),
@@ -38,6 +40,7 @@ const BreadCrumbs = (props: BreadCrumbsProps) => {
     <nav
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
@@ -21,6 +21,7 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   highlight?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -73,6 +74,7 @@ const Button = (props: ButtonPropTypes) => {
     count,
     data = {},
     disabled,
+    htmlOptions = {},
     icon = null,
     iconRight = false,
     id,
@@ -91,6 +93,8 @@ const Button = (props: ButtonPropTypes) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const css = classnames(
     buttonClassName(props),
     globalProps(props),
@@ -148,6 +152,7 @@ const Button = (props: ButtonPropTypes) => {
         <a
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={css}
           href={link}
           id={id}
@@ -164,6 +169,7 @@ const Button = (props: ButtonPropTypes) => {
         <button
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={css}
           disabled={disabled}
           form={form}
@@ -199,6 +205,7 @@ const Button = (props: ButtonPropTypes) => {
         <button
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={css}
           disabled={disabled}
           form={form}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.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'
 
@@ -13,6 +13,7 @@ type ButtonToolbarProps = {
   className?: string,
   connected?: boolean,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   orientation?: "horizontal" | "vertical",
@@ -26,6 +27,7 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     orientation = 'horizontal',
     text,
@@ -34,6 +36,7 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss('pb_button_toolbar_kit', orientation, variant),
@@ -45,6 +48,7 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_caption/_caption.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 CaptionProps = {
@@ -9,6 +9,7 @@ type CaptionProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
@@ -24,6 +25,7 @@ const Caption = (props: CaptionProps): React.ReactElement => {
     className,
     color,
     data = {},
+    htmlOptions = {},
     id,
     size = 'md',
     tag = 'div',
@@ -47,6 +49,8 @@ const Caption = (props: CaptionProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const css = classnames(
     buildCss('pb_caption_kit', size, variant, color),
     globalProps(props),
@@ -57,6 +61,7 @@ const Caption = (props: CaptionProps): React.ReactElement => {
     <Tag
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
@@ -16,6 +16,7 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   highlight?: {
     position?: "side" | "top",
     color?: string,
@@ -78,6 +79,7 @@ const Card = (props: CardPropTypes) => {
     className,
     data = {},
     highlight = {},
+    htmlOptions = {},
     selected = false,
     tag = 'div',
   } = props
@@ -90,6 +92,7 @@ const Card = (props: CardPropTypes) => {
   })
   const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const dataProps: {[key: string]: string} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
@@ -113,6 +116,7 @@ const Card = (props: CardPropTypes) => {
     <Tag
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(cardCss, globalProps(props), className)}
     >
       {subComponentTags('Header')}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
@@ -13,6 +13,7 @@ type CheckboxProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   indeterminate?: boolean,
   name?: string,
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
     dark = false,
     data = {},
     error = false,
+    htmlOptions = {},
     id,
     indeterminate = false,
     name = '',
@@ -41,8 +43,10 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
   } = props
 
   const checkRef = useRef(null)
-  const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const classes = classnames(
     buildCss('pb_checkbox_kit', checked ? 'checked' : null, error ? 'error' : null, indeterminate? 'indeterminate' : null),
     globalProps(props),
@@ -76,6 +80,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
     <label
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >