playbook_ui 13.12.0.pre.alpha.play10281596 → 13.12.0

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

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
@@ -22,7 +22,6 @@ type CollapsibleProps = {
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -34,7 +33,6 @@ const Collapsible = ({
   children = [],
   collapsed = true,
   data = {},
-  htmlOptions = {},
   icon,
   iconColor = 'default',
   iconSize,
@@ -62,7 +60,6 @@ const Collapsible = ({
   const { children: contentChildren, ...contentProps } = Content.props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_collapsible_kit'),
     globalProps(props),
@@ -73,7 +70,6 @@ const Collapsible = ({
       <div
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
           className={classes}
           id={id}
       >

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -51,7 +51,6 @@ type ContactProps = {
   contactType?: string,
   contactValue: string,
   data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -63,11 +62,9 @@ const Contact = (props: ContactProps) => {
     contactType,
     contactValue,
     data = {},
-    htmlOptions = {},
     id } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_contact_kit'),
     globalProps(props),
@@ -77,7 +74,6 @@ const Contact = (props: ContactProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

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

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -18,7 +18,6 @@ type CurrencyProps = {
   data?: {[key:string]:string},
   decimals?: 'default' | 'matching',
   emphasized?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   size?: 'sm' | 'md' | 'lg',
@@ -43,7 +42,6 @@ const Currency = (props: CurrencyProps) => {
     data = {},
     decimals = 'default',
     emphasized = true,
-    htmlOptions = {},
     id,
     unit,
     className,
@@ -67,7 +65,6 @@ const Currency = (props: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_currency_kit', align, size),
     globalProps(props),
@@ -99,7 +96,6 @@ const Currency = (props: CurrencyProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -12,7 +12,6 @@ type DashboardValueProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   statChange?: {
     change? : 'increase' | 'decrease' | 'neutral',
@@ -31,7 +30,6 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
     aria = {},
     className,
     data = {},
-    htmlOptions = {},
     id,
     statChange = {},
     statLabel,
@@ -40,7 +38,6 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_dashboard_value_kit', align),
     globalProps(props),
@@ -51,7 +48,6 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

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

@@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -15,7 +15,6 @@ type PbDateProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   showDayOfWeek?: boolean;
   showIcon?: boolean;
@@ -30,7 +29,6 @@ const PbDate = (props: PbDateProps) => {
     alignment = "left",
     className,
     data = {},
-    htmlOptions = {},
     id,
     showDayOfWeek = false,
     showIcon = false,
@@ -45,9 +43,8 @@ const PbDate = (props: PbDateProps) => {
   const year = DateTime.toYear(value);
   const currentYear = new Date().getFullYear();
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
 
   const classes = classnames(
     buildCss("pb_date_kit", alignment),
@@ -56,12 +53,10 @@ const PbDate = (props: PbDateProps) => {
   );
 
   return (
-    <div 
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       {unstyled
         ? <>

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
@@ -25,7 +25,6 @@ type DatePickerProps = {
   format?: string,
   hideIcon?: boolean,
   hideLabel?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
@@ -68,7 +67,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     format = 'm/d/Y',
     hideIcon = false,
     hideLabel = false,
-    htmlOptions = {},
     id,
     inLine = false,
     inputAria = {},
@@ -97,7 +95,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
@@ -161,7 +158,6 @@ useEffect(() => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildCss, buildDataProps } from "../utilities/props";
 import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -16,7 +16,6 @@ type DateRangeInlineProps = {
   align?: "left" | "center" | "vertical";
   size?: "sm" | "xs";
   dark?: boolean;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
   icon?: boolean;
   startDate?: Date;
   endDate?: Date;
@@ -41,7 +40,6 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
     size = "sm",
     align = "left",
     data = {},
-    htmlOptions = {},
     startDate,
     endDate,
     className,
@@ -81,7 +79,6 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
@@ -97,7 +94,6 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
   return (
     <div
         {...dataProps}
-        {...htmlProps}
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -15,32 +15,21 @@ type DateRangeStackedProps = {
   data?: string,
   dark?: boolean,
   endDate: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   startDate: Date,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
-  const { 
-    className, 
-    dark = false, 
-    endDate, 
-    htmlOptions={},
-    startDate, 
-    data={},
-  } = props
+  const { className, dark = false, endDate, startDate, data={} } = props
   const css = classnames(
     buildCss('pb_date_range_stacked'),
     globalProps(props),
     className
   )
-   const dataProps = buildDataProps(data)
-   const htmlProps = buildHtmlProps(htmlOptions)
+  const dataProps = buildDataProps(data)
 
   return (
-    <div 
-        {...dataProps}
-        {...htmlProps}
+    <div {...dataProps}
         className={css}
     >
       <Flex vertical="center">

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import classnames from "classnames";
-import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -15,7 +15,6 @@ type DateStackedProps = {
   dark?: boolean;
   data?: string;
   date: Date;
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -35,7 +34,6 @@ const DateStacked = (props: DateStackedProps) => {
     dark = false,
     date,
     data={},
-    htmlOptions={},
     size = "sm",
   } = props;
   const classes = classnames(
@@ -50,15 +48,12 @@ const DateStacked = (props: DateStackedProps) => {
   const currentYear = new Date().getFullYear()
   const inputYear = DateTime.toYear(date);
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <>
       {bold == false ? (
-        <div 
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
+        <div {...dataProps}
+            className={classes}
         >
           <div className="pb_date_stacked_day_month">
             <Caption text={DateTime.toMonth(date).toUpperCase()} />
@@ -71,10 +66,8 @@ const DateStacked = (props: DateStackedProps) => {
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div 
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
+          <div {...dataProps}
+              className={classes}
           >
             <div className="pb_date_stacked_day_month">
               <Title

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Flex from '../pb_flex/_flex'
@@ -14,7 +14,6 @@ type DateTimeProps = {
   className?: string,
   data?: { [key: string]: string; },
   datetime: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,
@@ -28,7 +27,6 @@ const DateTime = (props: DateTimeProps) => {
     aria = {},
     className,
     data = {},
-    htmlOptions = {},
     showDayOfWeek = false,
     datetime,
     id,
@@ -39,7 +37,6 @@ const DateTime = (props: DateTimeProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_date_time', size),
     globalProps(props),
@@ -50,7 +47,6 @@ const DateTime = (props: DateTimeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react'
 
-import { buildCss, buildHtmlProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
 import Flex from '../pb_flex/_flex'
@@ -11,7 +11,6 @@ import TimeStacked from '../pb_time_stacked/_time_stacked'
 import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   date: Date,
   datetime: Date,
@@ -26,18 +25,15 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     date,
     datetime,
     dark,
-    htmlOptions = {},
     timeZone = 'America/New_York',
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <Flex
         inline={false}
         vertical="stretch"
-        {...htmlProps}
         {...props}
     >
       <FlexItem>

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
@@ -14,31 +14,20 @@ type DateYearStackedProps = {
   dark?: boolean,
   data?: string,
   date: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {
-  const { 
-    align = 'left', 
-    className, 
-    dark = false, 
-    date, 
-    data={},
-    htmlOptions = {}, 
-  } = props
+  const { align = 'left', className, dark = false, date, data={} } = props
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
     className
   )
-   const dataProps = buildDataProps(data)
-   const htmlProps = buildHtmlProps(htmlOptions)
+  const dataProps = buildDataProps(data)
 
   return (
-    <div 
-        {...dataProps}
-        {...htmlProps}
+    <div {...dataProps}
         className={css}
     >
       <Title

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 type DetailProps = {
@@ -11,7 +11,6 @@ type DetailProps = {
   color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
@@ -25,7 +24,6 @@ const Detail = (props: DetailProps) => {
     className,
     color = 'light',
     data = {},
-    htmlOptions = {},
     id = '',
     tag = 'div',
     text= ''
@@ -33,7 +31,6 @@ const Detail = (props: DetailProps) => {
 
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
   const isBold = bold ? "bold" : null
   const classes = classnames(
     buildCss('pb_detail_kit', color),
@@ -47,7 +44,6 @@ const Detail = (props: DetailProps) => {
     <Tag
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -5,7 +5,7 @@ import React, { useState } from "react";
 import classnames from "classnames";
 import Modal from "react-modal";
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
@@ -26,7 +26,6 @@ type DialogProps = {
   closeable: boolean;
   confirmButton?: string;
   data?: object;
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   fullHeight?: boolean;
   loading?: boolean;
@@ -52,7 +51,6 @@ const Dialog = (props: DialogProps) => {
     confirmButton,
     className,
     data = {},
-    htmlOptions = {},
     id,
     size = "md",
     children,
@@ -71,8 +69,7 @@ const Dialog = (props: DialogProps) => {
     trigger,
   } = props;
   const ariaProps = buildAriaProps(aria);
-   const dataProps = buildDataProps(data)
-   const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data);
   const dialogClassNames = {
     base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
     afterOpen: "pb_dialog_after_open",
@@ -167,12 +164,7 @@ const Dialog = (props: DialogProps) => {
 
   return (
     <DialogContext.Provider value={api}>
-      <div 
-        {...ariaProps} 
-        {...dataProps}
-        {...htmlProps} 
-        className={classes}
-      >
+      <div {...ariaProps} {...dataProps} className={classes}>
         <Modal
           ariaHideApp={false}
           className={dialogClassNames}

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildHtmlProps } from '../../utilities/props'
+import { buildCss } from '../../utilities/props'
 import { GlobalProps, globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
@@ -13,7 +13,6 @@ type DialogFooterProps = {
   children: React.ReactChild[] | React.ReactChild | string,
   className?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   padding?: string,
   paddingBottom?: string,
@@ -27,19 +26,15 @@ const DialogFooter = (props: DialogFooterProps) => {
   const {
     children,
     className,
-    htmlOptions = {},
     spacing = "between",
     separator = false,
   } = props
 
   const footerCSS = buildCss("dialog_footer")
   const footerSpacing = globalProps(props)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div 
-      {...htmlProps}
-    >
+    <>
       {separator &&
         <SectionSeparator />
       }
@@ -51,7 +46,7 @@ const DialogFooter = (props: DialogFooterProps) => {
       >
         {children}
       </Flex>
-    </div>
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
 import { globalProps, GlobalProps } from '../../utilities/globalProps'
 
 import { CloseIcon } from '../_close_icon'
@@ -14,7 +14,6 @@ type DialogHeaderProps = {
   className?: string,
   closeable?: boolean,
   data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   padding?: string,
   separator?: boolean,
@@ -29,7 +28,6 @@ const DialogHeader = (props: DialogHeaderProps) => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     spacing = "between",
     closeable = true,
     separator = true,
@@ -37,7 +35,6 @@ const DialogHeader = (props: DialogHeaderProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const api = useContext(DialogContext)
   const headerCSS = buildCss("dialog_header")
   const headerSpacing = globalProps(props)
@@ -49,7 +46,6 @@ const DialogHeader = (props: DialogHeaderProps) => {
       <Flex
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
           className={classnames(headerCSS, headerSpacing, className)}
           spacing={spacing}
       >