playbook_ui 13.15.0 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023

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

@@ -20,17 +20,19 @@ const MoreExtensionsDropdown = ({extensions}: any) => {
 
 const popoverReference = (
     <button
-      className="toolbar_button"
-      onClick={handleTogglePopover}
-      role="button"
-      type="button"
+        className="toolbar_button"
+        onClick={handleTogglePopover}
+        role="button"
+        type="button"
     >
     <Flex 
-      align="center"
-      className="toolbar_button_icon"
-      justify="center"
+        align="center"
+        className="toolbar_button_icon"
+        justify="center"
     >
-      <Icon icon="ellipsis" size="lg" />
+      <Icon icon="ellipsis"
+          size="lg"
+      />
     </Flex>
   </button>
 
@@ -46,21 +48,21 @@ const popoverReference = (
           show={showPopover}
       >
         <Nav 
-          paddingTop={extensions.length > 1 ? "xs" : "none"}
-          paddingBottom={extensions.length > 1 ? "xs" : "none"} 
-          variant="subtle"
+            paddingBottom={extensions.length > 1 ? "xs" : "none"}
+            paddingTop={extensions.length > 1 ? "xs" : "none"} 
+            variant="subtle"
         >
-          {extensions && extensions.map(({ icon, text, onclick, isActive}:any, index:number) => ( 
+          {extensions && extensions.map(({ icon, text, onclick, isActive}: any, 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/Toolbar.tsx

@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor, extensions }:any) => {
+const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -34,19 +34,27 @@ const EditorToolbar = ({ editor, extensions }:any) => {
   ]
 
   return (
-    <Background backgroundColor="white" className="toolbar">
-      <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
-        <FlexItem className="toolbar_block" displayFlex>
+    <Background backgroundColor="white"
+        className="toolbar"
+    >
+      <Flex flex="0"
+          justify="between"
+          paddingX="sm"
+          paddingY="xxs"
+      >
+        <FlexItem className="toolbar_block"
+            displayFlex
+        >
           <ToolbarDropdown editor={editor}/>
           <SectionSeparator orientation="vertical" />
             {toolbaritems && toolbaritems.map(
-              ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
+              ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
                 <EditorButton
-                  classname={classname}
-                  icon={icon}
-                  key={index}
-                  text={text}
-                  onclick={onclick}
+                    classname={classname}
+                    icon={icon}
+                    key={index}
+                    onclick={onclick}
+                    text={text}
                 />
               )
             )}

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_select/_select.scss

@@ -102,20 +102,29 @@
     pointer-events: none;
   }
   &.inline {
+    @mixin active_arrow_style {
+      svg {
+        color: $primary !important;
+        font-size: 16px;
+      }
+    }
     &:not(:hover) {
       svg {
         display: none;
       }
     }
+    &.show_arrow:not(:hover) {
+      svg {
+        display: block;
+      }
+      @include active_arrow_style();
+    }
     &:hover {
+      @include active_arrow_style();
       select {
         color: $primary !important;
         background: rgba(0,130,255,0.1);
       }
-      svg {
-        color: $primary !important;
-        font-size: 16px;
-      }
     }
     select {
       box-shadow: none;

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -36,6 +36,7 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
+  showArrow?: boolean,
   value?: string,
 } & GlobalProps
 
@@ -63,9 +64,10 @@ const Select = ({
   inline = false,
   multiple = false,
   name,
-  onChange = () => {},
+  onChange = () => undefined,
   options = [],
   required = false,
+  showArrow = false,
   value,
   ...props
 }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
@@ -77,15 +79,16 @@ const Select = ({
   const inlineClass = inline ? 'inline' : null
   const compactClass = compact ? 'compact' : null
   const classes = classnames(
-    buildCss('pb_select'),
+    buildCss("pb_select"),
     globalProps({
       ...props,
-      marginBottom: props.marginBottom || props.margin || 'sm',
+      marginBottom: props.marginBottom || props.margin || "sm",
     }),
     className,
     inlineClass,
+    { show_arrow: showArrow },
     compactClass
-  )
+  );
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  inline: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ],
+  show_arrow: true
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectInlineShowArrow = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          inline
+          label="Favorite Food"
+          name="food"
+          options={options}
+          showArrow
+          {...props}
+      />
+      <Body
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectInlineShowArrow

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

@@ -10,6 +10,7 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
+  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
@@ -26,6 +27,7 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
+  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
 

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -7,5 +7,6 @@ export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
+export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'

data/app/pb_kits/playbook/pb_select/select.rb

@@ -19,10 +19,11 @@ module Playbook
       prop :name
       prop :onchange
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
+      prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classnames
-        classname + inline_class + compact_class
+        classname + inline_class + compact_class + show_arrow_class
       end
 
       def all_attributes
@@ -49,6 +50,10 @@ module Playbook
         compact ? "compact" : ""
       end
 
+      def show_arrow_class
+        show_arrow ? "show_arrow" : ""
+      end
+
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end

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}
             />
           </>
         }