playbook_ui 13.15.0.pre.alpha.PLAY11311893 → 13.15.0.pre.alpha.play1141iconkitusinglibrary1956

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -9,7 +9,7 @@ import NavItem from '../../pb_nav/_item'
 
 import { ToolbarTypes } from './EditorTypes'
 
-const ToolbarDropdown = ({editor}: any) => {
+const ToolbarDropdown = ({editor}: any): React.ReactElement => {
   const [showPopover, setShowPopover] = useState(false)
 
 const toolbarDropdownItems = [
@@ -81,11 +81,21 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
   if (isActive) {
     activeCount ++
     activeItems.push(
-      <Flex align="center" key={icon} gap="xs">
-        <Icon icon={icon} size="lg" />
+      <Flex align="center"
+          gap="xs"
+          key={icon}
+      >
+        <Icon icon={icon}
+            size="lg"
+        />
         <div>{text}</div>
-        <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
-          <Icon fixedWidth icon="angle-down" margin-left="xs" />
+        <Flex className={showPopover ? "fa-flip-vertical" : ""}
+            display="inline_flex"
+        >
+          <Icon fixedWidth
+              icon="angle-down"
+              margin-left="xs"
+          />
         </Flex>
       </Flex>
     );
@@ -93,7 +103,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
 }
 
 const popoverReference = (
-  <Button className="editor-dropdown-button" onClick={handleTogglePopover} variant="secondary">
+  <Button className="editor-dropdown-button"
+      onClick={handleTogglePopover}
+      variant="secondary"
+  >
     {
        activeCount === 2 ? (
         activeItems[1]
@@ -101,11 +114,21 @@ const popoverReference = (
         activeCount === 1 ? (
         activeItems[0] || null
         ) : (
-          <Flex align="center" key="paragraph" gap="xs">
-            <Icon icon="paragraph" size="lg" />
+          <Flex align="center"
+              gap="xs"
+              key="paragraph"
+          >
+            <Icon icon="paragraph"
+                size="lg"
+            />
             <div>Paragraph</div>
-            <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
-              <Icon fixedWidth icon="angle-down" margin-left="xs" />
+            <Flex className={showPopover ? "fa-flip-vertical" : ""}
+                display="inline_flex"
+            >
+              <Icon fixedWidth
+                  icon="angle-down"
+                  margin-left="xs"
+              />
             </Flex>
           </Flex>
         )
@@ -124,21 +147,21 @@ const popoverReference = (
           show={showPopover}
       >
         <Nav 
-          paddingTop="xs"
-          paddingBottom="xs" 
-          variant="subtle"
+            paddingBottom="xs"
+            paddingTop="xs" 
+            variant="subtle"
         >
-          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
+          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}: ToolbarTypes, index: number) => (
             <NavItem
-              cursor="pointer"
-              className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
-              iconLeft={icon}
-              key={`${text}_${index}`}
-              margin='none'
-              onClick={()=> {onclick(); setShowPopover(false)}}
-              text={text}
-              paddingTop='xxs'
-              paddingBottom='xxs'
+                className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
+                cursor="pointer"
+                iconLeft={icon}
+                key={`${text}_${index}`}
+                margin='none'
+                onClick={()=> {onclick(); setShowPopover(false)}}
+                paddingBottom='xxs'
+                paddingTop='xxs'
+                text={text}
             />
           ))}
         </Nav>

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx

@@ -3,7 +3,7 @@ import FlexItem from "../../pb_flex/_flex_item";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
 
-const ToolbarHistoryItems = ({editor}:any) => {
+const ToolbarHistoryItems = ({editor}: any): React.ReactElement => {
 
 const toolbarHistoryItems = [
     {
@@ -26,14 +26,14 @@ const toolbarHistoryItems = [
     <>
     <FlexItem displayFlex>
           {toolbarHistoryItems.map(
-            ({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
+            ({ onclick, classname, disable, icon, text }: ToolbarTypes, index: number) => (
               <EditorButton
-                classname={classname}
-                onclick={onclick}
-                disable={disable}
-                icon={icon}
-                key={index}
-                text={text}
+                  classname={classname}
+                  disable={disable}
+                  icon={icon}
+                  key={index}
+                  onclick={onclick}
+                  text={text}
               />
             )
           )}

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx

@@ -2,7 +2,7 @@ import React, {useCallback} from "react";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
 
-const ToolbarNodes = ({editor}:any) => {
+const ToolbarNodes = ({editor}: any): React.ReactElement => {
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 const setLink = useCallback(() => {
@@ -42,13 +42,13 @@ const toolbarNodesItems = [
 
 return (
     <>
-        {toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
+        {toolbarNodesItems.map(({ onclick, icon, text, isActive }: ToolbarTypes, index: number) => (
             <EditorButton
-            classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
-            onclick={onclick}
-            icon={icon}
-            key={index}
-            text={text}
+                classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
+                icon={icon}
+                key={index}
+                onclick={onclick}
+                text={text}
             />
         ))}
    </>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -17,27 +17,27 @@ import { TrixEditor } from "react-trix"
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
-  attributeIsActive?: Function,
+  attributeIsActive?: ([any]: string) => boolean,
   element?: HTMLElement,
-  getSelectedDocument?: Function,
+  getSelectedDocument?: () => any,
   getSelectedRange?: () => Array<number>,
-  insertHTML?: Function,
-  loadHTML?: Function,
-  setSelectedRange?: (range: Array<number>) => void,  
+  insertHTML?: ([any]: string) => void,
+  loadHTML?: ([any]: string) => void,
+  setSelectedRange?: (range: Array<number>) => void,
 }
 
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
-  toolbarBottom?: Boolean,
+  toolbarBottom?: boolean,
   children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inline?: boolean, 
+  inline?: boolean,
   extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
@@ -49,7 +49,7 @@ type RichTextEditorProps = {
   maxWidth?: string
 } & GlobalProps
 
-const RichTextEditor = (props: RichTextEditorProps) => {
+const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const {
     aria = {},
     advancedEditor,
@@ -81,7 +81,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
     element = editor?.element
 
-
   // DOM manipulation must wait for editor to be ready
   if (editor) {
     const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -117,6 +116,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     focus
       ? (document.addEventListener('trix-focus', useFocus),
         document.addEventListener('trix-blur', useFocus),
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         useFocus())
       : null
 
@@ -164,10 +164,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={css}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={css}
     >
       {
         advancedEditor ? (
@@ -175,9 +175,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
               className={classnames("pb_rich_text_editor_advanced_container", { 
               ["toolbar-active"]: advancedEditorToolbar,
               })}
-            >
+          >
             {advancedEditorToolbar && (
-              <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+              <EditorToolbar editor={advancedEditor}
+                  extensions={extensions}
+              />
             )}
           { children }
           </div>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -20,7 +20,7 @@ type SectionSeparatorProps = {
   variant?: "card" | "background",
 }
 
-const SectionSeparator = (props: SectionSeparatorProps) => {
+const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {
     aria = {},
     children,
@@ -42,17 +42,19 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   return (
 
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       {
         children && children ||
         text && (
           <span>
-            <Caption text={text} dark={dark} />
+            <Caption dark={dark}
+                text={text}
+            />
           </span>
         )
       }

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx

@@ -33,7 +33,7 @@ type SelectableCardIconProps = {
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
 }
 
-const SelectableCardIcon = (props: SelectableCardIconProps) => {
+const SelectableCardIcon = (props: SelectableCardIconProps): React.ReactElement => {
   const {
     aria = {},
     checkmark = false,
@@ -70,36 +70,37 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       <SelectableCard
-        checked={checked}
-        customIcon={customIcon}
-        dark={dark}
-        disabled={disabled}
-        icon={checkmark}
-        inputId={inputId}
-        multi={multi}
-        name={name}
-        onChange={onChange}
-        value={value}
+          checked={checked}
+          customIcon={customIcon}
+          dark={dark}
+          disabled={disabled}
+          icon={checkmark}
+          inputId={inputId}
+          multi={multi}
+          name={name}
+          onChange={onChange}
+          value={value}
       >
         {
           <>
             <SelectableIcon
-              customIcon={customIcon}
-              icon={icon}
-              inputId={''}
-              inputs="disabled"
-              name={''}
-              text={titleText} />
+                customIcon={customIcon}
+                icon={icon}
+                inputId={''}
+                inputs="disabled"
+                name={''}
+                text={titleText}
+            />
             <Body
-              color="light"
-              dark={dark}
-              text={bodyText}
+                color="light"
+                dark={dark}
+                text={bodyText}
             />
           </>
         }

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -6,10 +6,11 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps 
+  buildHtmlProps
 } from '../utilities/props'
 import Icon from '../pb_icon/_icon'
 import Title from '../pb_title/_title'
+import { GenericObject } from '../types'
 
 type SelectableIconProps = {
   aria?: {[key: string]: string},
@@ -17,7 +18,7 @@ type SelectableIconProps = {
   className?: string,
   customIcon?: {[key: string] :SVGElement},
   disabled?: boolean,
-  data?: Object,
+  data?: GenericObject,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon: string,
   inputId: string,
@@ -44,7 +45,7 @@ const SelectableIcon = ({
   text,
   value,
   ...props
-}: SelectableIconProps) => {
+}: SelectableIconProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -64,22 +65,22 @@ const SelectableIcon = ({
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       {inputs === 'disabled' && (
         <>
           <Icon
-            customIcon={customIcon}
-            icon={icon}
-            size="2x"
+              customIcon={customIcon}
+              icon={icon}
+              size="2x"
           />
           <Title
-            size={4}
-            tag="h4"
-            text={text}
+              size={4}
+              tag="h4"
+              text={text}
           />
         </>
       )}
@@ -87,24 +88,24 @@ const SelectableIcon = ({
       {inputs === 'enabled' && (
         <>
           <input
-            {...props}
-            checked={checked}
-            disabled={disabled}
-            id={inputIdPresent}
-            name={name}
-            type={inputType}
-            value={value}
+              {...props}
+              checked={checked}
+              disabled={disabled}
+              id={inputIdPresent}
+              name={name}
+              type={inputType}
+              value={value}
           />
           <label htmlFor={inputIdPresent}>
             <Icon
-              customIcon={customIcon}
-              icon={icon}
-              size="2x"
+                customIcon={customIcon}
+                icon={icon}
+                size="2x"
             />
             <Title
-              size={4}
-              tag="h4"
-              text={text}
+                size={4}
+                tag="h4"
+                text={text}
             />
           </label>
         </>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx

@@ -7,12 +7,13 @@ import { SelectableListItemProps } from './_item.js'
 
 import List from  '../pb_list/_list'
 import SelectableListItem from './_item'
+import { GenericObject } from '../types'
 
 type SelectableListProps = {
   aria?: {[key: string]: string },
   children?: React.ReactElement[],
   className?: string,
-  data?: object,
+  data?: GenericObject,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',

data/app/pb_kits/playbook/pb_source/_source.tsx

@@ -32,7 +32,7 @@ const Source = ({
   source,
   type = 'inbound',
   user = {},
-}: SourceProps) => {
+}: SourceProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const ariaProps = buildAriaProps(aria)
@@ -72,11 +72,11 @@ const Source = ({
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={css}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={css}
+        id={id}
     >
 
       <div className="pb__source_layout">
@@ -84,13 +84,13 @@ const Source = ({
           <>
             {showIcon() &&
               <IconCircle
-                icon={typeIconNames[type]}
-                size="sm"
+                  icon={typeIconNames[type]}
+                  size="sm"
               />
             }
             {!showIcon() &&
               <Avatar
-                {...avatar()}
+                  {...avatar()}
               />
             }
           </>
@@ -98,20 +98,20 @@ const Source = ({
 
         <div className="pb__source_content">
           <Title
-            size={4}
-            tag="h4"
-            text={source}
+              size={4}
+              tag="h4"
+              text={source}
           />
 
           <div className="pb__source_value">
             <Body
-              color="light"
-              text={typeText()}
+                color="light"
+                text={typeText()}
             />
 
             {user.userId &&
               <Caption
-                text={user.userId}
+                  text={user.userId}
               />
             }
           </div>