RubyGems - playbook_ui - Versions diffs - 13.31.0.pre.alpha.PLAY10863204 → 13.31.0.pre.alpha.play1262iconstyles3171 - Mend

playbook_ui 13.31.0.pre.alpha.PLAY10863204 → 13.31.0.pre.alpha.play1262iconstyles3171

Files changed (77) hide show

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

@@ -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/index.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.tsx CHANGED Viewed

@@ -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_timeline/_item.tsx CHANGED Viewed

@@ -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.tsx CHANGED Viewed

@@ -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_title_detail/_title_detail.tsx CHANGED Viewed

@@ -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.tsx CHANGED Viewed

@@ -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_tooltip/_tooltip.tsx CHANGED Viewed

@@ -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_treemap_chart/_treemap_chart.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/_typeahead.tsx CHANGED Viewed

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

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

@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
-const ClearContainer = (props: any): React.ReactElement => {
+const ClearContainer = (props: any) => {
   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 CHANGED Viewed

@@ -5,24 +5,20 @@ import Flex from '../../pb_flex/_flex'
 import TextInput from '../../pb_text_input/_text_input'
 type Props = {
-  selectProps: {
-    dark?: boolean,
-    label: string,
-    error?: string,
-  },
+  selectProps: any,
 }
-const TypeaheadControl = (props: Props): React.ReactElement => (
+const TypeaheadControl = (props: Props) => (
   <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 CHANGED Viewed

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

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

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

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

@@ -7,11 +7,12 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
+  multiValueTemplate: any,
   removeProps: any,
   selectProps: any,
 }
-const MultiValue = (props: Props): React.ReactElement => {
+const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
   const { multiKit } = props.selectProps
@@ -26,36 +27,36 @@ const MultiValue = (props: Props): React.ReactElement => {
   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 CHANGED Viewed

@@ -3,7 +3,7 @@ import { components } from 'react-select'
 import User from '../../pb_user/_user'
-const Option = (props: any): React.ReactElement => {
+const Option = (props: any) => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +14,11 @@ const Option = (props: any): React.ReactElement => {
       <>
         {!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 CHANGED Viewed

@@ -4,19 +4,19 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
-const Placeholder = (props: any): React.ReactElement => (
+const Placeholder = (props: any) => (
   <>
     <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>

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
 import React from 'react'
 import { components } from 'react-select'
-const ValueContainer = (props: any): React.ReactElement => (
+const ValueContainer = (props: any) => (
   <components.ValueContainer
-      className="text_input_value_container"
-      {...props}
+    className="text_input_value_container"
+    {...props}
   />
 )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx CHANGED Viewed

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 import {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx CHANGED Viewed

@@ -47,6 +47,8 @@ const promiseOptions = (inputValue) =>
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -57,8 +59,6 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
   return (
     <>