playbook_ui 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11644 → 15.2.0.pre.alpha.PLAY236711331

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -60,10 +60,7 @@ module Playbook
       end
 
       def classname
-        default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class + icon_class
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -75,14 +75,4 @@ test('renders position when provided', () => {
         />
     );
     expect(container.querySelector('.positioned_toast')).toBeInTheDocument();
-});
-
-test('renders max zIndex by default', () => {
-    const { container } = render(<FixedConfirmationToast />);
-    expect(container.querySelector('.z_index_max')).toBeInTheDocument();
-});
-
-test('applies custom zIndex when provided', () => {
-    const { container } = render(<FixedConfirmationToast zIndex={10} />);
-    expect(container.querySelector('.z_index_10')).toBeInTheDocument();
 });

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -1,3 +1,3 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specifc props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -314,18 +314,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (!hasTyped) setHasTyped(true)
-
     setInputValue(evt.target.value)
-
     let phoneNumberData
-
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
       phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
     } else {
       phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
     }
-
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
@@ -374,26 +370,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
       inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
       inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-
-      // Handle formatAsYouType with input event
-      if (formatAsYouType) {
-        inputRef.current.addEventListener("input", (evt: Event) => {
-          const target = evt.target as HTMLInputElement
-          const formattedValue = target.value
-
-          // Update internal state
-          setInputValue(formattedValue)
-          setHasTyped(true)
-
-          // Get phone number data with unformatted number
-          const formattedPhoneNumberData = getCurrentSelectedData(telInputInit, formattedValue)
-          const phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
-
-          setSelectedData(phoneNumberData)
-          onChange(phoneNumberData)
-          isValid(telInputInit.isValidNumber())
-        })
-      }
+    }
+    if (formatAsYouType) {
+      inputRef.current?.addEventListener("input", (evt) => {
+        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
+      });
     }
   }, [])
 
@@ -408,7 +389,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     label,
     name,
     onBlur: validateErrors,
-    onChange: formatAsYouType ? undefined : handleOnChange,
+    onChange: handleOnChange,
     value: inputValue
   }
 

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, simple, sticky }: any): React.ReactElement => {
+const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -33,50 +33,15 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
     },
   ]
 
-  const simpleToolbaritems = [
-    {
-        icon: "bold",
-        text: "Bold",
-        classname:`toolbar_button ${editor.isActive('bold') ? 'is-active' : ''}`,
-        onclick:()=>editor.chain().focus().toggleBold().run(),
-    },
-    {
-        icon: "italic",
-        text: "Italic",
-        classname:`toolbar_button ${editor.isActive('italic') ? 'is-active' : ''}`,
-        onclick:() => editor.chain().focus().toggleItalic().run(),
-    },
-  ]
-
   return (
     <Background backgroundColor="white"
-        className={`toolbar ${sticky ? 'pb_rich_text_editor_tiptap_toolbar_sticky' : ''}`}
-        
+        className="toolbar"
     >
       <Flex flex="0"
           justify="between"
           paddingX="sm"
           paddingY="xxs"
       >
-        {
-          simple ? (
-            <>
-              <Flex className="toolbar_block">
-                {simpleToolbaritems && simpleToolbaritems.map(
-                  ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
-                    <EditorButton
-                        classname={classname}
-                        icon={icon}
-                        key={index}
-                        onclick={onclick}
-                        text={text}
-                    />
-                  )
-                )}
-              </Flex>
-            </>
-          ) : (
-            <>
         <FlexItem className="toolbar_block"
             displayFlex
         >
@@ -104,10 +69,6 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             }
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
-        </>
-          )
-        }
-       
       </Flex>
     </Background>
   );

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

@@ -146,7 +146,6 @@ const popoverReference = (
 
   return (
       <PbReactPopover
-          className='pb_tiptap_toolbar_dropdown_popover'
           closeOnClick='outside'
           padding='none'
           placement="bottom"

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
 
@@ -77,9 +77,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria),
     dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>(),
-    [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
-    containerRef = useRef<HTMLDivElement>(null)
+    [editor, setEditor] = useState<Editor>()
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
@@ -130,42 +128,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     document.addEventListener('trix-blur', inlineFocus)
   }
 
-  //===========focus prop with advanced editor=================
-  const isClickInPopover = (event: Event): boolean => {
-    return !!(event.target as Element).closest('.pb_tiptap_toolbar_dropdown_popover')
-  }
-
-  const isClickInContainer = (event: Event): boolean => {
-    return !!(containerRef.current && containerRef.current.contains(event.target as Node))
-  }
-
-  useEffect(() => {
-    if (!advancedEditor || !focus) return
-
-    const handleFocus = () => setShowToolbarOnFocus(true)
-    
-    const handleClickOutside = (event: Event) => {
-      if (isClickInContainer(event) || isClickInPopover(event)) return
-      setShowToolbarOnFocus(false)
-    }
-
-    const editorElement = advancedEditor?.view?.dom
-    if (editorElement) {
-      editorElement.addEventListener('focus', handleFocus)
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-
-    return () => {
-      if (editorElement) {
-        editorElement.removeEventListener('focus', handleFocus)
-      }
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [advancedEditor, focus])
-
-  //============= end focus prop with advanced editor=================
-
   useEffect(() => {
     if (!editor || !template) return
     editor.loadHTML('')
@@ -186,43 +148,41 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     })
   }, [editor])
 
-  // Generate CSS classes
-  const css = classnames(
-    'pb_rich_text_editor_kit',
-    {
-      simple: simple,
-      'focus-editor-targets': focus,
-      sticky: sticky,
-      inline: inline,
-      'toolbar-bottom': toolbarBottom,
-    },
-    globalProps(props, { maxWidth }),
-    className
+  const richTextEditorClass = 'pb_rich_text_editor_kit',
+    simpleClass = simple ? 'simple' : '',
+    focusClass = focus ? 'focus-editor-targets' : '',
+    stickyClass = sticky ? 'sticky' : '',
+    inlineClass = inline ? 'inline' : '',
+    toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
+
+  let css = classnames(globalProps(props, { maxWidth }), className)
+  css = classnames(
+    richTextEditorClass,
+    simpleClass,
+    focusClass,
+    stickyClass,
+    inlineClass,
+    toolbarBottomClass,
+    css
   )
 
-  // Determine if toolbar should be shown
-  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
-
   return (
     <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={css}
-        ref={focus ? containerRef : undefined}
     >
       {
         advancedEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: shouldShowToolbar,
+              ["toolbar-active"]: advancedEditorToolbar,
               })}
           >
-            {shouldShowToolbar && (
+            {advancedEditorToolbar && (
               <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
-                  simple={simple}
-                  sticky={sticky}
               />
             )}
           { children }

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -9,37 +9,6 @@
 @import "previewer_mixin";
 
 [class^="pb_rich_text_editor_kit"] {
-    &.inline {
-        .toolbar {
-          opacity: 0;
-          transition: all 0.3s ease-in-out 0s;
-        }
-    
-        &:focus-within .toolbar {
-          opacity: 100;
-        }
-    
-        .ProseMirror {
-          border: 1px solid transparent;
-          transition: all 0.3s ease-in-out 0s;
-        }
-    
-        &:focus-within .ProseMirror {
-          border: 1px solid $border_light;
-          border-top: none;
-        }
-    
-        &:hover {
-          .toolbar {
-            opacity: 100;
-          }
-    
-          .ProseMirror {
-            border: 1px solid $border_light;
-            border-top: none;
-          }
-        }
-      }
   .toolbar_button {
     display: flex;
     align-items: center;
@@ -73,11 +42,6 @@
     }
   }
 
-  .pb_rich_text_editor_tiptap_toolbar_sticky {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
   .toolbar {
     border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
     border: 1px solid $border_light;

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

@@ -7,7 +7,7 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
 
@@ -17,17 +17,11 @@ examples:
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
   - rich_text_editor_simple: Simple
-  - rich_text_editor_advanced_simple: Advanced (Simple)
   - rich_text_editor_attributes: Attributes
-  - rich_text_editor_advanced_attributes: Advanced (Attributes)
   - rich_text_editor_focus: Focus
-  - rich_text_editor_advanced_focus: Advanced (Focus)
   - rich_text_editor_sticky: Sticky
-  - rich_text_editor_advanced_sticky: Advanced (Sticky)
   - rich_text_editor_templates: Templates
-  - rich_text_editor_advanced_templates: Advanced (Templates)
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
-  - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -11,9 +11,3 @@ export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_ad
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
 export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
 export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
-export { default as RichTextEditorAdvancedSimple } from './_rich_text_editor_advanced_simple.jsx'
-export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_advanced_focus.jsx'
-export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
-export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
-export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
-export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
+import { render, screen } from '../utilities/test-utils'
 
 import RichTextEditor from './_rich_text_editor'
 
@@ -64,127 +62,3 @@ test('returns "Dark" class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark`)
 })
-
-// TipTap testing
-const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
-  const editor = useEditor({
-    extensions: [StarterKit],
-    content: '<p>Test content</p>',
-  })
-
-  if (!editor) return null
-
-  return (
-    <RichTextEditor
-        advancedEditor={editor}
-        data={{ testid: testId }}
-        toolbarOnFocus={toolbarOnFocus}
-        {...props}
-    >
-      <EditorContent editor={editor} />
-    </RichTextEditor>
-  )
-}
-
-describe('Advanced TipTap Editor works as expected', () => {
-  test('renders advanced editor with toolbar', () => {
-    render(<TestAdvancedEditor />)
-    
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(kitClass)
-    
-    // Check for advanced container
-    const advancedContainer = kit.querySelector('.pb_rich_text_editor_advanced_container')
-    expect(advancedContainer).toBeInTheDocument()
-    
-    // Check for toolbar
-    const toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).toBeInTheDocument()
-  })
-
-  test('renders advanced editor without toolbar when advancedEditorToolbar is false', () => {
-    render(<TestAdvancedEditor advancedEditorToolbar={false} />)
-    
-    const kit = screen.getByTestId(testId)
-    const toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).not.toBeInTheDocument()
-  })
-
-  test('shows/hides toolbar on focus when focus is enabled', async () => {
-    render(<TestAdvancedEditor focus />)
-    
-    const kit = screen.getByTestId(testId)
-    
-    // Initially toolbar should be hidden
-    let toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).not.toBeInTheDocument()
-    
-    const editorElement = kit.querySelector('.ProseMirror')
-    // Focus the editor
-    fireEvent.focus(editorElement)
-    
-    // Toolbar should now be visible
-    await waitFor(() => {
-      toolbar = kit.querySelector('.toolbar')
-      expect(toolbar).toBeInTheDocument()
-    })
-  })
-
-
-  test('supports simple prop with advanced editor', () => {
-    render(<TestAdvancedEditor simple />)
-    
-    const kit = screen.getByTestId(testId)
-    const toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).toBeInTheDocument()
-    const toolbarDropdown = kit.querySelector('.editor_dropdown_button')
-    expect(toolbarDropdown).not.toBeInTheDocument()
-    expect(kit).toHaveClass(`${kitClass} simple`)
-  })
-
-    test('supports sticky prop with advanced editor', () => {
-    render(<TestAdvancedEditor sticky />)
-    
-    const kit = screen.getByTestId(testId)
-    const stickyToolbar = kit.querySelector('.pb_rich_text_editor_tiptap_toolbar_sticky')
-    expect(stickyToolbar).toBeInTheDocument()
-    expect(kit).toHaveClass(`${kitClass} sticky`)
-  })
-
-  test('applies aria-label when provided', () => {
-    const ariaLabel = 'Rich Text Editor'
-    render(<TestAdvancedEditor aria={{ label: ariaLabel }} />)
-    
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveAttribute('aria-label', ariaLabel)
-  })
-
-  test('supports inline prop with advanced editor', () => {
-    render(<TestAdvancedEditor inline />)
-    
-    const kit = screen.getByTestId(testId)
-    const toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).toBeInTheDocument()
-    expect(kit).toHaveClass(`${kitClass} inline`)
-  })
-
-describe('TipTap Editor Functionality', () => {
-  test('can type and update content', async () => {
-    render(<TestAdvancedEditor />)
-    
-    const kit = screen.getByTestId(testId)
-    const editorContent = kit.querySelector('.ProseMirror')
-    
-    // Focus and type in the editor
-    fireEvent.focus(editorContent)
-    fireEvent.input(editorContent, { 
-      target: { textContent: 'New content' }
-    })
-    
-    await waitFor(() => {
-      expect(editorContent).toHaveTextContent('New content')
-    })
-  })
-})
-})
-

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
+import { render, screen } from '../utilities/test-utils'
 import Typeahead from './_typeahead'
 
 const options = [
@@ -137,38 +137,4 @@ test('typeahead with colored pills', () => {
   const kit = screen.getByTestId('pills-color-test')
   const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
   expect(pill).toBeInTheDocument()
-})
-
-test('typeahead with defaultValue with focus behavior', async () => {
-  render(
-    <Typeahead
-        data={{ testid: 'default-value-focus-test' }}
-        defaultValue={[options[1]]}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('default-value-focus-test')
-  const inputDiv = kit.querySelector(".typeahead-kit-select__single-value")
-  expect(inputDiv).toHaveTextContent("Red")
-  
-  // Test that the control can receive focus
-  const control = kit.querySelector('.typeahead-kit-select__control')
-  expect(control).toBeInTheDocument()
-  
-  // Simulate opening the menu by clicking the control
-  fireEvent.mouseDown(control)
-  
-  // Wait for menu to appear
-  await waitFor(() => {
-    const menu = kit.querySelector('.typeahead-kit-select__menu')
-    expect(menu).toBeInTheDocument()
-  })
-  
-  // Check that the correct option has the focused class
-  await waitFor(() => {
-    const focusedOption = kit.querySelector('.typeahead-kit-select__option--is-focused')
-    expect(focusedOption).toBeInTheDocument()
-    expect(focusedOption).toHaveTextContent('Red')
-  })
 })