playbook_ui 13.34.1.pre.alpha.PLAY14633399 → 13.34.1.pre.alpha.PLAY14703378

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,19 +1,19 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector(): string {
+  static get selector() {
     return '.table-responsive-collapse'
   }
 
-  connect(): void {
+  connect() {
     const tables = document.querySelectorAll('.table-responsive-collapse');
 
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      const headers: string[] = [];
+      let headers: string[] = [];
       [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        const colSpan = header.colSpan
+        let colSpan = header.colSpan
         for (let i = 0; i < colSpan; i++) {
           headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -17,7 +17,7 @@ type TableBodyPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
+const TableBody = (props: TableBodyPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx

@@ -18,7 +18,7 @@ type TableCellPropTypes = {
   text?: string
 };
 
-const TableCell = (props: TableCellPropTypes): React.ReactElement => {
+const TableCell = (props: TableCellPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -17,7 +17,7 @@ type TableHeadPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
+const TableHead = (props: TableHeadPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -18,7 +18,7 @@ type TableHeaderPropTypes = {
   text?: string;
 };
 
-const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
+const TableHeader = (props: TableHeaderPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -19,7 +19,7 @@ type TableRowPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableRow = (props: TableRowPropTypes): React.ReactElement => {
+const TableRow = (props: TableRowPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
-
 import React from "react";
 import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
 

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -101,7 +101,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
       input,
       .text_input {

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -107,7 +107,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-     />)
+    />)
   )
 
   const addOnInput = (

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
-  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
+  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',
@@ -92,9 +92,9 @@ const TextInputDefault = (props) => {
           {...props}
       />
 
-      {firstName !== '' && (
-        <React.Fragment>{`First name is: ${firstName}`}</React.Fragment>
-      )}
+      <If condition={firstName !== ''}>
+        {`First name is: ${firstName}`}
+      </If>
     </div>
   )
 }

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

@@ -60,7 +60,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: calc($space_xs / 2);
+      margin-top: $space_xs / 2;
     }
     textarea {
       border-color: $error;

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

@@ -52,15 +52,14 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = () => {},
   placeholder,
   required,
   rows = 4,
   value,
   ...props
-}: TextareaProps) => {
-  const ref = useRef<HTMLTextAreaElement>(null)
+}: TextareaProps, ref: any) => {
+  ref = useRef<HTMLTextAreaElement>(null)
   useEffect(() => {
     if (ref.current && resize === 'auto') {
       PbTextarea.addMatch(ref.current)
@@ -72,75 +71,58 @@ const Textarea = ({
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
   const noCount = typeof characterCount !== 'undefined'
-  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
-  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const checkIfZero = (characterCount: string | number) => {
-    return characterCount == 0 ? characterCount.toString() : characterCount
-  }
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
 
+  const checkIfZero = (characterCount: string | number) => {
+    return characterCount == 0 ? characterCount.toString() : characterCount
+  }
+
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
     >
       <Caption text={label} />
       {children || (
         <textarea
-            className="pb_textarea_kit"
-            disabled={disabled}
-            name={name}
-            onChange={onChange}
-            placeholder={placeholder}
-            ref={ref}
-            required={required}
-            rows={rows}
-            value={value}
-            {...props}
+          className="pb_textarea_kit"
+          disabled={disabled}
+          name={name}
+          onChange={onChange}
+          placeholder={placeholder}
+          ref={ref}
+          required={required}
+          rows={rows}
+          value={value}
+          {...props}
         />
       )}
 
       {error ? (
         <>
           {characterCount ? (
-            <Flex 
-                spacing="between" 
-                vertical="center"
-            >
+            <Flex spacing="between" vertical="center">
               <FlexItem>
-                <Body 
-                    margin="none"
-                    status="negative"
-                    text={error} 
-                />
+                <Body margin="none" status="negative" text={error} />
               </FlexItem>
               <FlexItem>
-                <Caption 
-                    margin="none"
-                    size="xs"
-                    text={characterCounter()}
-                />
+                <Caption margin="none" size="xs" text={characterCounter()} />
               </FlexItem>
             </Flex>
           ) : (
-            <Body 
-                status="negative"
-                text={error}
-            />
+            <Body status="negative" text={error} />
           )}
         </>
       ) : (
          noCount && (
-          <Caption 
-              margin="none"
-              size="xs"
-              text={characterCounter()}
-          />
+          <Caption margin="none" size="xs" text={characterCounter()} />
         )
       )}
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import { Textarea } from 'playbook-ui'
+import { Textarea } from '../..'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')

data/app/pb_kits/playbook/pb_textarea/{index.ts → index.tsx}

@@ -3,16 +3,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 export default class PbTextarea extends PbEnhancedElement {
   style: {[key: string]: string}
   scrollHeight: string
-  static get selector(): string {
+  static get selector() {
     return '.resize_auto textarea'
   }
 
-  onInput(): void {
+  onInput() {
     this.style.height = 'auto'
     this.style.height = (this.scrollHeight) + 'px'
   }
 
-  connect(): void {
+  connect() {
     this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
     this.element.addEventListener('input', this.onInput, false)
   }

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

@@ -24,7 +24,7 @@ type TimeProps = {
   unstyled?: boolean;
 } & GlobalProps
 
-const Time = (props: TimeProps): React.ReactElement => {
+const Time = (props: TimeProps) => {
   const {
     align,
     className,
@@ -47,8 +47,8 @@ const Time = (props: TimeProps): React.ReactElement => {
 
   return (
     <div 
-        {...htmlProps}
-        className={classes} 
+      {...htmlProps}
+      className={classes} 
     >
       {showIcon && (
         unstyled

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

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: calc($space_xs/2);
-      margin-right: calc($space_xs/2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: calc($space_xs/2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: calc($space_xs/2);
+      margin-right: $space_xs/2;
     }
   }
 }

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

@@ -36,7 +36,7 @@ const dateTimeIso = (dateValue: Date) => {
   return DateTime.toIso(dateValue)
 }
 
-const TimeRangeInline = (props: TimeRangeInlineProps): React.ReactElement => {
+const TimeRangeInline = (props: TimeRangeInlineProps) => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { TimeRangeInline } from 'playbook-ui'
+import { TimeRangeInline } from '../../'
 
 const TimeRangeInlineDefault = (props) => (
   <div>

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

@@ -26,7 +26,7 @@ const TimelineItem = ({
   iconColor = 'default',
   lineStyle = 'solid',
   ...props
-}: ItemProps): React.ReactElement => {
+}: ItemProps) => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
   const htmlProps = buildHtmlProps(htmlOptions)

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

@@ -4,9 +4,9 @@
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: calc($space_xs/2);
+$icon_margin: $space_xs/2;
 $icon_height: 28px;
-$height_from_top: calc($icon_height/2) - calc($connector_width/2);
+$height_from_top: $icon_height/2 - $connector_width/2;
 
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;

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

@@ -27,7 +27,7 @@ const Timeline = ({
   orientation = 'horizontal',
   showDate = false,
   ...props
-}: TimelineProps): React.ReactElement => {
+}: TimelineProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption, Timestamp, Title } from 'playbook-ui'
+import { Caption, Timestamp, Title } from '../../'
 
 const TimestampUnstyled = (props) => {
   return (

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

@@ -1,3 +1,4 @@
+/* @flow */
 
 import React from 'react'
 import classnames from 'classnames'

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

@@ -18,7 +18,7 @@ type TitleDetailProps = {
   title: string,
 } & GlobalProps
 
-const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
+const TitleDetail = (props: TitleDetailProps) => {
   const {
     align = "left",
     aria = {},
@@ -37,19 +37,19 @@ const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(pbCss, globalProps(props), className)}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classnames(pbCss, globalProps(props), className)}
+      id={id}
     >
       <Title
-          size={4}
-          text={title}
+        size={4}
+        text={title}
       />
       <Body
-          color="light"
-          text={detail}
+        color="light"
+        text={detail}
       />
     </div>
   )

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

@@ -8,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: calc($width / 2);
+  $height: $width / 2;
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: calc($width / 2) - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -50,7 +50,7 @@ $transition: .2s ease-in-out;
 
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
-        opacity: 0.5;
+        opacity: 0.5; 
         border: 3px solid $border_light;
         background-color: $border_light;
 
@@ -68,14 +68,14 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: calc($width / 2) + 2px;
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }
 
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
-        opacity: 0.5;
+        opacity: 0.5; 
         border: 3px solid $text_lt_light;
         background-color: $text_lt_light;
 

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

@@ -42,7 +42,7 @@ const Toggle = ({
   size = 'sm',
   value,
   ...props
-}: Props): React.ReactElement => {
+}: Props) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React, { useState } from 'react'
-import { Toggle } from 'playbook-ui'
+import { Toggle } from '../..'
 
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import { Caption, Title, Toggle } from '../..'
 
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import { Toggle } from '../..'
 
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import { Toggle } from '../..'
 
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import { Caption, Title, Toggle } from '../..'
 
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

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

@@ -50,8 +50,8 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     ...rest
   } = props
 
-  const dataProps: { [key: string]: string } = buildDataProps(data)
-  const ariaProps: { [key: string]: string } = buildAriaProps(aria)
+  const dataProps: { [key: string]: any } = buildDataProps(data)
+  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   
   const css = classnames(

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Tooltip, Flex, FlexItem } from 'playbook-ui';
+import { Tooltip, Flex, FlexItem } from '../..';
 
 const TooltipDefaultReact = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+import { Button, Tooltip, Flex, FlexItem } from '../..';
 
 const TooltipDelay = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Tooltip, Button, Flex } from 'playbook-ui'
+import { Tooltip, Button, Flex } from '../..'
 
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
+import { Tooltip, Button, Flex, FlexItem } from '../..';
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
+import { Tooltip, Flex, CircleIconButton } from '../..'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
+import {  Button, Body, Flex, FlexItem, Tooltip } from '../..'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { cleanup, render, screen, fireEvent, waitFor } from "../utilities/test-utils";
-import { Button, Tooltip } from "playbook-ui";
+import { Button, Tooltip } from "..";
 
 function TooltipTest() {
   const text = "this is a text",

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

@@ -52,7 +52,7 @@ const TreemapChart = ({
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
   type = "treemap",
   ...props
-}: TreemapChartProps): React.ReactElement => {
+}: TreemapChartProps) => {
   
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -98,6 +98,7 @@ const TreemapChart = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
+    
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 

data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-console */
-
 import React from 'react';
 import { render, screen } from '../utilities/test-utils';
 import TreemapChart from './_treemap_chart';

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import { Typeahead } from '../..'
 
 /**
  *