playbook_ui 13.32.0 → 13.33.0.pre.alpha.PLAY14143305

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

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

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

@@ -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() {
+  static get selector(): string {
     return '.resize_auto textarea'
   }
 
-  onInput() {
+  onInput(): void {
     this.style.height = 'auto'
     this.style.height = (this.scrollHeight) + 'px'
   }
 
-  connect() {
+  connect(): void {
     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) => {
+const Time = (props: TimeProps): React.ReactElement => {
   const {
     align,
     className,
@@ -47,8 +47,8 @@ const Time = (props: TimeProps) => {
 
   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: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: calc($space_xs/2);
+      margin-right: calc($space_xs/2);
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: calc($space_xs/2);
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: calc($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) => {
+const TimeRangeInline = (props: TimeRangeInlineProps): React.ReactElement => {
   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 '../../'
+import { TimeRangeInline } from 'playbook-ui'
 
 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) => {
+}: ItemProps): React.ReactElement => {
   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: $space_xs/2;
+$icon_margin: calc($space_xs/2);
 $icon_height: 28px;
-$height_from_top: $icon_height/2 - $connector_width/2;
+$height_from_top: calc($icon_height/2) - calc($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) => {
+}: TimelineProps): React.ReactElement => {
   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 '../../'
+import { Caption, Timestamp, Title } from 'playbook-ui'
 
 const TimestampUnstyled = (props) => {
   return (

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

@@ -1,4 +1,3 @@
-/* @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) => {
+const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
   const {
     align = "left",
     aria = {},
@@ -37,19 +37,19 @@ const TitleDetail = (props: TitleDetailProps) => {
 
   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: $width / 2;
+  $height: calc($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: $width / 2 - 4px;
+        width: calc($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: $width / 2 + 2px;
+          left: calc($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) => {
+}: Props): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,5 @@
-// @flow
-
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from '../..'
+import { Caption, Title, Toggle } from 'playbook-ui'
 
 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]: any } = buildDataProps(data)
-  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  const dataProps: { [key: string]: string } = buildDataProps(data)
+  const ariaProps: { [key: string]: string } = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   
   const css = classnames(

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,5 @@
-// @flow
-
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from '../..'
+import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
 
 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 "..";
+import { Button, Tooltip } from "playbook-ui";
 
 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) => {
+}: TreemapChartProps): React.ReactElement => {
   
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -98,7 +98,6 @@ const TreemapChart = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 

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

@@ -1,3 +1,5 @@
+/* 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/_typeahead.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
-import Typeahead from './_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Orange', value: '#FFA500' },

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -42,8 +42,8 @@ type TypeaheadProps = {
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  getOptionLabel?: string | (() => string),
+  getOptionValue?: string | (() => string),
   name?: string,
 }
 
@@ -77,7 +77,7 @@ const Typeahead = ({
   id,
   loadOptions = noop,
   ...props
-}: TypeaheadProps) => {
+}: TypeaheadProps): React.ReactElement => {
   const selectProps = {
     cacheOptions: true,
     components: {

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
-const ClearContainer = (props: any) => {
+const ClearContainer = (props: any): React.ReactElement => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [true])
+  }, [])
 
   return (
     <components.ClearIndicator
-      className="clear_indicator"
-      {...props}
+        className="clear_indicator"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -1,24 +1,27 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import Flex from '../../pb_flex/_flex'
-import TextInput from '../../pb_text_input/_text_input'
+import { Flex, TextInput } from 'playbook-ui'
 
 type Props = {
-  selectProps: any,
+  selectProps: {
+    dark?: boolean,
+    label: string,
+    error?: string,
+  },
 }
 
-const TypeaheadControl = (props: Props) => (
+const TypeaheadControl = (props: Props): React.ReactElement => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-      dark={props.selectProps.dark}
-      error={props.selectProps.error}
-      label={props.selectProps.label}
+        dark={props.selectProps.dark}
+        error={props.selectProps.error}
+        label={props.selectProps.label}
     >
       <Flex>
         <components.Control
-          className="text_input"
-          {...props}
+            className="text_input"
+            {...props}
         />
       </Flex>
     </TextInput>

data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const IndicatorsContainer = (props: any) => (
+type IndicatorsContainerProps = {
+  children: React.ReactNode,
+}
+
+
+const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
   <components.IndicatorsContainer
-    className="text_input_indicators"
-    {...props}
+      className="text_input_indicators"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const MenuList = (props: any) => {
+type MenuListProps = {
+  children: React.ReactNode,
+  footer: React.ReactNode,
+}
+
+const MenuList = (props: MenuListProps): React.ReactElement => {
   return (
   <components.MenuList {...props}>
     {props.children}

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -1,18 +1,16 @@
 import React from 'react'
 import { components } from 'react-select'
+import { Badge, FormPill } from 'playbook-ui'
 
-import Badge from '../../pb_badge/_badge'
-import FormPill from '../../pb_form_pill/_form_pill'
 import { SelectValueType } from '../_typeahead'
 
 type Props = {
   data: SelectValueType,
-  multiValueTemplate: any,
   removeProps: any,
   selectProps: any,
 }
 
-const MultiValue = (props: Props) => {
+const MultiValue = (props: Props): React.ReactElement => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
   const { multiKit } = props.selectProps
@@ -27,36 +25,36 @@ const MultiValue = (props: Props) => {
 
   return (
     <components.MultiValueContainer
-      className="text_input_multivalue_container"
-      {...props}
+        className="text_input_multivalue_container"
+        {...props}
     >
       {multiKit === 'badge' &&
         <Badge
-          closeProps={removeProps}
-          removeIcon
-          text={label}
-          variant="primary"
+            closeProps={removeProps}
+            removeIcon
+            text={label}
+            variant="primary"
         />
       }
 
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
-          avatarUrl={imageUrl}
-          closeProps={removeProps}
-          marginRight="xs"
-          name={label}
-          size={multiKit === 'smallPill' ? 'small' : ''}
-          text=''
+            avatarUrl={imageUrl}
+            closeProps={removeProps}
+            marginRight="xs"
+            name={label}
+            size={multiKit === 'smallPill' ? 'small' : ''}
+            text=''
         />
       }
 
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
-          closeProps={removeProps}
-          marginRight="xs"
-          name=''
-          size={multiKit === 'smallPill' ? 'small' : ''}
-          text={label}
+            closeProps={removeProps}
+            marginRight="xs"
+            name=''
+            size={multiKit === 'smallPill' ? 'small' : ''}
+            text={label}
         />
       }
     </components.MultiValueContainer>

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
-const Option = (props: any) => {
+const Option = (props: any): React.ReactElement => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +14,11 @@ const Option = (props: any) => {
       <>
         {!valueComponent && imageUrl &&
           <User
-            align="left"
-            avatarUrl={imageUrl}
-            dark={props.selectProps.dark}
-            name={props.label}
-            orientation="horizontal"
+              align="left"
+              avatarUrl={imageUrl}
+              dark={props.selectProps.dark}
+              name={props.label}
+              orientation="horizontal"
           />
         }
 

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx

@@ -1,22 +1,21 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
+import { Flex, Icon } from 'playbook-ui'
 
-const Placeholder = (props: any) => (
+const Placeholder = (props: any): React.ReactElement => (
   <>
     <Flex
-      align="center"
-      className="placeholder"
+        align="center"
+        className="placeholder"
     >
       <components.IndicatorsContainer
-        {...props}
+          {...props}
       />
       {props.selectProps.plusIcon &&
         <Icon
-          className="typeahead-plus-icon"
-          icon="plus"
+            className="typeahead-plus-icon"
+            icon="plus"
         />
       }
     </Flex>