playbook_ui 13.12.0.pre.alpha.play10281596 → 13.12.0

data/app/pb_kits/playbook/pb_label_value/_label_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 DateTime from '../pb_kit/dateTime';
 
@@ -17,7 +17,6 @@ type LabelValueProps = {
   dark?: boolean;
   data?: object;
   date?: Date;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id?: string;
   label: string;
   value?: string;
@@ -43,7 +42,6 @@ const LabelValue = (props: LabelValueProps) => {
     data = {},
     date,
     description,
-    htmlOptions = {},
     icon,
     id,
     label,
@@ -53,8 +51,7 @@ const LabelValue = (props: LabelValueProps) => {
   } = props;
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data);
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -66,7 +63,6 @@ const LabelValue = (props: LabelValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
         title={title}

data/app/pb_kits/playbook/pb_layout/_layout.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'
 
@@ -12,7 +12,6 @@ type LayoutPropTypes = {
   dark?: boolean,
   data?: object,
   full?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   position?: "left" | "right",
   responsive?: boolean,
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
@@ -107,7 +106,6 @@ const Layout = (props: LayoutPropTypes) => {
     dark = false,
     data = {},
     full = false,
-    htmlOptions = {},
     position = 'left',
     responsive = false,
     size = 'md',
@@ -118,8 +116,6 @@ const Layout = (props: LayoutPropTypes) => {
   const responsiveClass = responsive ? '_responsive' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-
   const layoutCss =
     layout == 'collection'
       ? `pb_layout_kit_${layout}`
@@ -163,7 +159,6 @@ const Layout = (props: LayoutPropTypes) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classnames(
         layoutCss,
         layoutCollapseCss,

data/app/pb_kits/playbook/pb_legend/_legend.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'
@@ -13,7 +13,6 @@ type LegendProps = {
   color?: string,
   dark?: boolean,
   data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   prefixText?: string,
   text: string,
@@ -26,7 +25,6 @@ const Legend = (props: LegendProps) => {
     color = 'data_1',
     dark = false,
     data = {},
-    htmlOptions = {},
     id,
     prefixText,
     text,
@@ -34,7 +32,6 @@ const Legend = (props: LegendProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   const customColor = color.charAt(0) === '#' && color
 
@@ -53,7 +50,6 @@ const Legend = (props: LegendProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={bodyCss}
         id={id}
     >

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -6,7 +6,6 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import { LightboxContext } from "../_lightbox_context";
@@ -24,7 +23,6 @@ type LightboxHeaderProps = {
   className?: string;
   closeable?: boolean;
   data?: { [key: string]: string | number };
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
   icon?: string;
   id?: string;
   onClickRight?: () => void;
@@ -40,7 +38,6 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     onClickRight,
     spacing = "between",
     text,
@@ -51,8 +48,7 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   } = props;
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data);
   const api: any = useContext(LightboxContext);
   const headerCSS = buildCss("lightbox_header");
   const headerSpacing = globalProps(props, { paddingY: "sm" });
@@ -116,7 +112,6 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
       <Flex
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classnames(headerCSS, headerSpacing, className)}
         spacing={spacing}
       >

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useMemo, useRef, useState, useEffect } from 'react'
 import { useKbdControls } from './hooks/useKbdControls'
 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 LightboxHeader from './Header/_lightbox_header'
 import { LightboxContext } from './_lightbox_context'
@@ -15,7 +15,6 @@ type LightboxType = {
   currentPhotoIndex?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   photos: [],
   initialPhoto?: number,
@@ -36,7 +35,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     currentPhotoIndex,
     data = {},
     description,
-    htmlOptions = {},
     id = '',
     initialPhoto = 0,
     photos,
@@ -62,7 +60,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_lightbox_kit'),
     globalProps(props),
@@ -99,7 +96,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
         <div
             {...ariaProps}
             {...dataProps}
-            {...htmlProps}
             className={classes}
             id={id}
             ref={lightboxRef}

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -22,7 +22,6 @@ type LineGraphProps = {
     data: number[];
   }[];
   gradient?: boolean;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id: string;
   pointStart: number;
   subTitle?: string;
@@ -48,7 +47,6 @@ const LineGraph = ({
   dark = false,
   gradient = false,
   type = "line",
-  htmlOptions = {},
   id,
   legend = false,
   toggleLegendClick = true,
@@ -68,11 +66,8 @@ const LineGraph = ({
   colors = [],
   ...props
 }: LineGraphProps) => {
-  
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
   const setupTheme = () => {
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
@@ -143,7 +138,6 @@ const LineGraph = ({
         id: id,
         ...ariaProps,
         ...dataProps,
-        ...htmlProps
       }}
       highcharts={Highcharts}
       options={options}

data/app/pb_kits/playbook/pb_list/_list.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";
 
 type ListProps = {
@@ -10,7 +10,6 @@ type ListProps = {
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
   data?: object;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id?: string;
   layout?: "" | "left" | "right";
   ordered?: boolean;
@@ -30,7 +29,6 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
-    htmlOptions = {},
     id,
     layout = "",
     ordered = false,
@@ -55,8 +53,7 @@ const List = (props: ListProps) => {
     }
   );
   const ariaProps = buildAriaProps(aria);
-   const dataProps = buildDataProps(data)
-   const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data);
   const classes = classnames(
     buildCss("pb_list_kit", layoutClass[layout], size, {
       dark: dark,
@@ -74,7 +71,6 @@ const List = (props: ListProps) => {
         <ol
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
           className={className}
           id={id}
           role={role}
@@ -86,7 +82,6 @@ const List = (props: ListProps) => {
         <ul
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
           className={className}
           id={id}
           role={role}

data/app/pb_kits/playbook/pb_list/_list_item.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'
 
 type ListItemProps = {
@@ -8,7 +8,6 @@ type ListItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   tabIndex?: number,
 }
@@ -19,14 +18,12 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     id,
     tabIndex,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_item_kit'),
     globalProps(props),
@@ -38,7 +35,6 @@ const ListItem = (props: ListItemProps) => {
       <li
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
           className={classes}
           id={id}
           tabIndex={tabIndex}

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.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'
@@ -12,7 +12,6 @@ type LoadingInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -22,13 +21,11 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
-    htmlOptions = {},
     id,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss(`pb_loading_inline_kit_${align}`),
     globalProps(props),
@@ -39,7 +36,6 @@ const LoadingInline = (props: LoadingInlineProps) => {
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_map/_map.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'
 
 import MapControls from './_map_controls';
@@ -10,7 +10,6 @@ type MapProps = {
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   zoomBtns?: boolean,
   flyTo?: boolean, 
@@ -25,7 +24,6 @@ const Map = (props: MapProps) => {
   children,
   className,
   data = {},
-  htmlOptions = {},
   id,
   zoomBtns = false,
   flyTo = false,
@@ -36,15 +34,12 @@ const Map = (props: MapProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-
   const classes = classnames(buildCss('pb_map'), globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -3,7 +3,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 Avatar from '../pb_avatar/_avatar'
@@ -21,7 +21,6 @@ type MessageProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   message: string,
@@ -40,7 +39,6 @@ const Message = (props: MessageProps) => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     id,
     label,
     message,
@@ -51,7 +49,6 @@ const Message = (props: MessageProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const shouldDisplayAvatar = avatarUrl || avatarName
   const baseClassName = shouldDisplayAvatar
     ? 'pb_message_kit_avatar'
@@ -67,7 +64,6 @@ const Message = (props: MessageProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_message/_message_mention.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'
 
 type MessageMentionProps = {
@@ -8,7 +8,6 @@ type MessageMentionProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   variant: 'user' | 'self',
 }
@@ -19,13 +18,11 @@ const MessageMention = (props: MessageMentionProps) => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     id,
     variant = 'user',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_message_mention', variant),
     globalProps(props),
@@ -36,7 +33,6 @@ const MessageMention = (props: MessageMentionProps) => {
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react"
 import classnames from "classnames"
 import { globalProps, GlobalProps } from "../utilities/globalProps"
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
 import Checkbox from "../pb_checkbox/_checkbox"
 import Radio from "../pb_radio/_radio"
 import Body from "../pb_body/_body"
@@ -24,7 +24,6 @@ type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
-  htmlOptions?: {[key: string]: string | number | boolean | Function}
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
@@ -41,7 +40,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     aria = {},
     className,
     data = {},
-    htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
@@ -55,7 +53,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_multi_level_select"),
     globalProps(props),
@@ -421,7 +418,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -3,7 +3,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 Avatar from '../pb_avatar/_avatar'
@@ -13,7 +13,6 @@ type MultipleUsersProps = {
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
@@ -27,7 +26,6 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
-    htmlOptions = {},
     id,
     maxDisplayedUsers = 4,
     reverse = false,
@@ -43,7 +41,6 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
   const avatarSizeClass = size === 'xxs' ? 'xxs' : 'xs'
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_multiple_users_kit', reverseClass),
     globalProps(props),
@@ -59,7 +56,6 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

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

@@ -10,9 +10,3 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
-
-  swift:
-  - multiple_users_default_swift: Default
-  - multiple_users_reverse_swift: Reverse
-  - multiple_users_size_swift: Small
-  - multiple_users_props_swift: ""

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.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 Avatar from '../pb_avatar/_avatar'
 import Badge from '../pb_badge/_badge'
@@ -12,7 +12,6 @@ type MultipleUsersStackedProps = {
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   users: Array<{ [key: string]: string }>,
 }
@@ -23,7 +22,6 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     className,
     dark = false,
     data = {},
-    htmlOptions = {},
     id,
     users,
   } = props
@@ -35,7 +33,6 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss(
     'pb_multiple_users_stacked_kit',
     { single: onlyOne }), globalProps(props), className)
@@ -88,7 +85,6 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
       id={id}
     >

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

@@ -6,9 +6,3 @@ examples:
 
   react:
   - multiple_users_stacked_default: Default
-
-  swift: 
-  - multiple_users_stacked_default_swift: Default
-  - multiple_users_stacked_small_swift: Small
-  - multiple_users_stacked_xsmall_swift: xSmall
-  - multiple_users_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_nav/_item.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, GlobalProps } from "../utilities/globalProps";
 
 import Icon from "../pb_icon/_icon";
@@ -21,7 +21,6 @@ type NavItemProps = {
   data?: object;
   dark?: boolean;
   fontSize?: "normal" | "small";
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   iconLeft?: string;
   iconRight?: string | string[];
   onIconRightClick?: () => void;
@@ -68,7 +67,6 @@ const NavItem = (props: NavItemProps) => {
     data = {},
     dark = false,
     fontSize = "normal",
-    htmlOptions = {},
     iconLeft,
     iconRight,
     onIconRightClick,
@@ -160,8 +158,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   const fontWeightClass = fontWeightMapping[fontWeight];
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data);
 
   const tagClasses = classnames(
     collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
@@ -219,7 +216,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
               <Tag
                 {...ariaProps}
                 {...dataProps}
-                {...htmlProps}
                 className={classes}
                 id={id}
                 href={link}
@@ -260,7 +256,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
         <Tag
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
           className={classes}
           id={id}
           href={link}