playbook_ui 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0

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/_description.md

@@ -1 +1 @@
-NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/global_props/max_width) to override this default, as necessary.
+NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/visual_guidelines/max_width) to override this default, as necessary.

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_section_separator/docs/_description.md

@@ -1,3 +1,3 @@
 Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
 
-To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/global_props/width) for more information on the global width prop.
+To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/visual_guidelines/width) for more information on the global width prop.

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -216,33 +216,4 @@ $pb_selectable_paddings: (
       background: $error;
     }
   }
-}
-
-.pb_selectable_card_kit_disabled,
-.pb_selectable_card_kit_checked_disabled {
-  >label {
-    cursor: not-allowed;
-
-    @media (hover:hover) {
-      &:hover {
-        box-shadow: none !important;
-      }
-    }
-  }
-}
-
-.pb_selectable_card_kit_disabled>label {
-  border-color: $border_light !important;
-
-  .dark & {
-    border-color: $border_dark !important;
-  }
-}
-
-.pb_selectable_card_kit_checked_disabled>label {
-  border-color: $primary !important;
-
-  .dark & {
-    border-color: $primary_action_dark !important;
-  }
 }

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -1 +1 @@
-The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default.
+The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md

@@ -1 +1 @@
-The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default.
+The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md

@@ -1,3 +1,3 @@
 Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
 
-`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/global_props/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.
+`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md

@@ -1,3 +1,3 @@
-Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">token colors</a>.
+Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">token colors</a>.
 
 Note: Only use category colors for categories. Do not mix it with product or status colors.

data/app/pb_kits/playbook/pb_table/docs/_table_sm.md

@@ -1,3 +1,3 @@
 Use table size `"sm"` when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.
 
-Table can leverage the max-width property. Learn more on our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">Max Width Global Props page.</a>
+Table can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

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

@@ -31,7 +31,6 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
-    - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
@@ -72,7 +71,6 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
-    - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows

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

@@ -29,7 +29,6 @@ export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.
 export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
 export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
 export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
-export { default as TableWithDynamicCollapsible } from './_table_with_dynamic_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -99,8 +99,8 @@ module Playbook
           # Convert camelCase (ex. notAllowed) to kebab-case (ex. not-allowed)
           cursor.to_s.gsub(/([a-z\d])([A-Z])/, '\1-\2').downcase
         else
-          # Default to 'text'
-          "text"
+          # Default to 'pointer'
+          "pointer"
         end
       end
 

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,79 +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')
-  })
-})
-
-test('typeahead with grouped options and defaultValue focus behavior', async () => {
-  const groupedOptions = [
-    {
-      label: "Warm Colors",
-      options: [
-        { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Purple", value: "#800080" }
-      ]
-    }
-  ]
-
-  render(
-    <Typeahead
-        data={{ testid: 'grouped-options-focus-test' }}
-        defaultValue={[{ label: "Pink", value: "#FFC0CB" }]}
-        options={groupedOptions}
-    />
-  )
-
-  const kit = screen.getByTestId('grouped-options-focus-test')
-  const inputDiv = kit.querySelector(".typeahead-kit-select__single-value")
-  expect(inputDiv).toHaveTextContent("Pink")
 })