playbook_ui 15.3.0.pre.alpha.PLAY2322popoverconditionalrender11766 → 15.3.0.pre.alpha.PLAY2532flexboxdefaultresponsive12209

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

@@ -171,4 +171,108 @@ test('typeahead with defaultValue with focus behavior', async () => {
     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")
+})
+
+test('multi-value pills have tabIndex for keyboard navigation', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'pill-tabindex-test' }}
+        defaultValue={[options[0], options[1]]}
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('pill-tabindex-test')
+  const pills = kit.querySelectorAll('.pb_form_pill_kit')
+  
+  expect(pills.length).toBe(2)
+  
+  pills.forEach(pill => {
+    expect(pill).toHaveAttribute('tabIndex', '0')
+  })
+})
+
+test('multi-value pills show focus indicator when focused', async () => {
+  render(
+    <Typeahead
+        data={{ testid: 'pill-focus-indicator-test' }}
+        defaultValue={[options[0], options[1], options[2]]}
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('pill-focus-indicator-test')
+  const pills = kit.querySelectorAll('.pb_form_pill_kit')
+  
+  expect(pills.length).toBe(3)
+  
+  const firstPill = pills[0]
+  firstPill.focus()
+  
+  expect(document.activeElement).toBe(firstPill)
+})
+
+test('multi-value badges have tabIndex and focus class when focused', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'badge-focus-test' }}
+        defaultValue={[options[0], options[1]]}
+        isMulti
+        multiKit="badge"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('badge-focus-test')
+  const badges = kit.querySelectorAll('.pb_badge_kit_primary')
+  
+  expect(badges.length).toBe(2)
+
+  badges.forEach(badge => {
+    expect(badge).toHaveAttribute('tabIndex', '0')
+  })
+})
+

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -144,6 +144,18 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   // Create a ref to access React Select instance
   const selectRef = useRef<any>(null)
 
+  // Helper function to flatten grouped options if custom groups are used
+  const flattenOptions = (options: any[]): any[] => {
+    if (!options) return []
+    
+    return options.reduce((acc, option) => {
+      if (option.options && Array.isArray(option.options)) {
+        return [...acc, ...option.options]
+      }
+      return [...acc, option]
+    }, [])
+  }
+
   // Configure focus on selected option using React Select's API
   const handleMenuOpen = () => {
     setTimeout(() => {
@@ -159,17 +171,18 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
         const options = props.options
         if (options) {
-          // Find the index of the current value
-          const focusedIndex = options.findIndex((option: any) => {
+          // Flatten grouped options to find the matching option and find matching option
+          const flatOptions = flattenOptions(options)
+          
+          const targetOption = flatOptions.find((option: any) => {
             const optionValue = props.getOptionValue ? props.getOptionValue(option) : option.value
             const currentOptionValue = props.getOptionValue ? props.getOptionValue(currentValue) : currentValue.value
             return optionValue === currentOptionValue
           })
           
-          if (focusedIndex >= 0 && options[focusedIndex]) {
+          if (targetOption) {
             // Use React Select's internal state to set focused option
             if (selectRef.current && selectRef.current.setState) {
-              const targetOption = options[focusedIndex]
               selectRef.current.setState({
                 focusedOption: targetOption,
                 focusedValue: null
@@ -179,11 +192,12 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
               setTimeout(() => {
                 if (selectRef.current && selectRef.current.menuListRef) {
                   const menuElement = selectRef.current.menuListRef
-                  if (menuElement && menuElement.children && menuElement.children[focusedIndex]) {
-                    // Calculate the position of the selected option and scroll the menu container
-                    const optionElement = menuElement.children[focusedIndex] as HTMLElement
-                    const optionTop = optionElement.offsetTop
-                    const optionHeight = optionElement.offsetHeight
+                  // Find the focused option using React Select's class
+                  const focusedElement = menuElement.querySelector('.typeahead-kit-select__option--is-focused')
+                  
+                  if (focusedElement) {
+                    const optionTop = focusedElement.offsetTop
+                    const optionHeight = focusedElement.offsetHeight
                     const menuHeight = menuElement.clientHeight
                     
                     // Set the menu's scrollTop to position the selected option in the middle

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

@@ -12,11 +12,12 @@ type Props = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   removeProps: any,
   selectProps: any,
+  isFocused?: boolean,
 }
 
 
 const MultiValue = (props: Props) => {
-  const { removeProps } = props
+  const { removeProps, isFocused } = props
   const { imageUrl, label } = props.data
   const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
@@ -29,6 +30,28 @@ const MultiValue = (props: Props) => {
 
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
 
+  // Add className for focus state
+  const pillClassName = isFocused ? 'pb_form_pill_or_badge_focused' : ''
+
+  // Handle keyboard events on the pill itself to enable deletion when using tabIndex
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Backspace' || event.key === 'Delete') {
+      event.preventDefault()
+      event.stopPropagation()
+      // Trigger the remove action from react-select
+      if (removeProps && removeProps.onClick) {
+        removeProps.onClick(event as any)
+      }
+    }
+    // if arrow keys used, transfer focus to input so react-select can take over
+    else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      const selectInput = event.currentTarget.closest('.pb_typeahead_kit')?.querySelector('input')
+      if (selectInput instanceof HTMLInputElement) {
+        selectInput.focus()
+      }
+    }
+  }
+
   return (
     <components.MultiValueContainer
         className="text_input_multivalue_container"
@@ -36,8 +59,11 @@ const MultiValue = (props: Props) => {
     >
       {multiKit === 'badge' &&
         <Badge
+            className={pillClassName}
             closeProps={removeProps}
+            htmlOptions={{onKeyDown:handleKeyDown}}
             removeIcon
+            tabIndex={0}
             text={label}
             variant="primary"
         />
@@ -46,12 +72,15 @@ const MultiValue = (props: Props) => {
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
             avatarUrl={imageUrl}
+            className={pillClassName}
             closeProps={removeProps}
             color={pillColor}
             dark={dark}
+            htmlOptions={{onKeyDown:handleKeyDown}}
             marginRight="xs"
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
+            tabIndex={0}
             text=''
             truncate={truncate}
             wrapped={wrapped}
@@ -61,12 +90,15 @@ const MultiValue = (props: Props) => {
 
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
+            className={pillClassName}
             closeProps={removeProps}
             color={pillColor}
             dark={dark}
+            htmlOptions={{onKeyDown:handleKeyDown}}
             marginRight="xs"
             name=''
             size={multiKit === 'smallPill' ? 'small' : ''}
+            tabIndex={0}
             text={label}
             truncate={truncate}
             wrapped={wrapped}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb

@@ -0,0 +1,64 @@
+<%
+  grouped_options = [
+    {
+      label: "Warm Colors",
+      options: [
+        { label: "Red", value: "#FF0000" },
+        { label: "Orange", value: "#FFA500" },
+        { label: "Yellow", value: "#FFFF00" },
+        { label: "Coral", value: "#FF7F50" },
+        { label: "Gold", value: "#FFD700" }
+      ]
+    },
+    {
+      label: "Cool Colors",
+      options: [
+        { label: "Blue", value: "#0000FF" },
+        { label: "Teal", value: "#008080" },
+        { label: "Cyan", value: "#00FFFF" },
+        { label: "Navy", value: "#000080" },
+        { label: "Turquoise", value: "#40E0D0" }
+      ]
+    },
+    {
+      label: "Neutrals",
+      options: [
+        { label: "White", value: "#FFFFFF" },
+        { label: "Black", value: "#000000" },
+        { label: "Gray", value: "#808080" },
+        { label: "Beige", value: "#F5F5DC" },
+        { label: "Silver", value: "#C0C0C0" }
+      ]
+    },
+    {
+      label: "Earth Tones",
+      options: [
+        { label: "Brown", value: "#A52A2A" },
+        { label: "Olive", value: "#808000" },
+        { label: "Forest Green", value: "#228B22" },
+        { label: "Tan", value: "#D2B48C" },
+        { label: "Maroon", value: "#800000" }
+      ]
+    },
+    {
+      label: "Fun Shades",
+      options: [
+        { label: "Pink", value: "#FFC0CB" },
+        { label: "Magenta", value: "#FF00FF" },
+        { label: "Lime", value: "#00FF00" },
+        { label: "Purple", value: "#800080" },
+        { label: "Indigo", value: "#4B0082" }
+      ]
+    }
+  ]
+%>
+<br />
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-custom-options",
+    options: grouped_options,
+    label: "Colors",
+    name: :foo,
+    placeholder: "Select a Color...",
+    is_multi: false
+  })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const groupedOptions = [
+  {
+    label: "Warm Colors",
+    options: [
+      { label: "Red", value: "#FF0000" },
+        { label: "Orange", value: "#FFA500" },
+        { label: "Yellow", value: "#FFFF00" },
+        { label: "Coral", value: "#FF7F50" },
+        { label: "Gold", value: "#FFD700" }
+      ]
+    },
+    {
+      label: "Cool Colors",
+      options: [
+        { label: "Blue", value: "#0000FF" },
+        { label: "Teal", value: "#008080" },
+        { label: "Cyan", value: "#00FFFF" },
+        { label: "Navy", value: "#000080" },
+        { label: "Turquoise", value: "#40E0D0" }
+      ]
+    },
+    {
+      label: "Neutrals",
+      options: [
+        { label: "White", value: "#FFFFFF" },
+        { label: "Black", value: "#000000" },
+        { label: "Gray", value: "#808080" },
+        { label: "Beige", value: "#F5F5DC" },
+        { label: "Silver", value: "#C0C0C0" }
+      ]
+    },
+    {
+      label: "Earth Tones",
+      options: [
+        { label: "Brown", value: "#A52A2A" },
+        { label: "Olive", value: "#808000" },
+        { label: "Forest Green", value: "#228B22" },
+        { label: "Tan", value: "#D2B48C" },
+        { label: "Maroon", value: "#800000" }
+      ]
+    },
+    {
+      label: "Fun Shades",
+      options: [
+        { label: "Pink", value: "#FFC0CB" },
+        { label: "Magenta", value: "#FF00FF" },
+        { label: "Lime", value: "#00FF00" },
+        { label: "Purple", value: "#800080" },
+        { label: "Indigo", value: "#4B0082" }
+      ]
+    }
+  ]
+
+const TypeaheadCustomOptions = (props) => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={groupedOptions}
+        placeholder="Select a Color..."
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadCustomOptions
+

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md

@@ -0,0 +1 @@
+Grouped options can be rendered via structuring the options in the way shown in the code snippet below.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb

@@ -25,11 +25,77 @@
   ]
 %>
 
+<%
+  grouped_options = [
+    {
+      label: "Warm Colors",
+      options: [
+        { label: "Red", value: "#FF0000" },
+        { label: "Orange", value: "#FFA500" },
+        { label: "Yellow", value: "#FFFF00" },
+        { label: "Coral", value: "#FF7F50" },
+        { label: "Gold", value: "#FFD700" }
+      ]
+    },
+    {
+      label: "Cool Colors",
+      options: [
+        { label: "Blue", value: "#0000FF" },
+        { label: "Teal", value: "#008080" },
+        { label: "Cyan", value: "#00FFFF" },
+        { label: "Navy", value: "#000080" },
+        { label: "Turquoise", value: "#40E0D0" }
+      ]
+    },
+    {
+      label: "Neutrals",
+      options: [
+        { label: "White", value: "#FFFFFF" },
+        { label: "Black", value: "#000000" },
+        { label: "Gray", value: "#808080" },
+        { label: "Beige", value: "#F5F5DC" },
+        { label: "Silver", value: "#C0C0C0" }
+      ]
+    },
+    {
+      label: "Earth Tones",
+      options: [
+        { label: "Brown", value: "#A52A2A" },
+        { label: "Olive", value: "#808000" },
+        { label: "Forest Green", value: "#228B22" },
+        { label: "Tan", value: "#D2B48C" },
+        { label: "Maroon", value: "#800000" }
+      ]
+    },
+    {
+      label: "Fun Shades",
+      options: [
+        { label: "Pink", value: "#FFC0CB" },
+        { label: "Magenta", value: "#FF00FF" },
+        { label: "Lime", value: "#00FF00" },
+        { label: "Purple", value: "#800080" },
+        { label: "Indigo", value: "#4B0082" }
+      ]
+    }
+  ]
+%>
+
+
 <%= pb_rails("typeahead", props: {
     default_options: [{ label: 'Gray', value: '#808080' }],
     id: "typeahead-default-value",
     options: options,
-    label: "Colors",
+    label: "Default Value with basic options",
+    name: :foo,
+    is_multi: false
+  })
+%>
+
+<%= pb_rails("typeahead", props: {
+    default_options:[{ label: "Pink", value: "#FFC0CB" }],
+    id: "typeahead-default-value-grouped-options",
+    options: grouped_options,
+    label: "Default Value with grouped options",
     name: :foo,
     is_multi: false
   })

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx

@@ -27,14 +27,76 @@ const options = [
   { label: 'Coral', value: '#FF7F50' }
 ]
 
+const groupedOptions = [
+  {
+    label: "Warm Colors",
+    options: [
+      { label: "Red", value: "#FF0000" },
+        { label: "Orange", value: "#FFA500" },
+        { label: "Yellow", value: "#FFFF00" },
+        { label: "Coral", value: "#FF7F50" },
+        { label: "Gold", value: "#FFD700" }
+      ]
+    },
+    {
+      label: "Cool Colors",
+      options: [
+        { label: "Blue", value: "#0000FF" },
+        { label: "Teal", value: "#008080" },
+        { label: "Cyan", value: "#00FFFF" },
+        { label: "Navy", value: "#000080" },
+        { label: "Turquoise", value: "#40E0D0" }
+      ]
+    },
+    {
+      label: "Neutrals",
+      options: [
+        { label: "White", value: "#FFFFFF" },
+        { label: "Black", value: "#000000" },
+        { label: "Gray", value: "#808080" },
+        { label: "Beige", value: "#F5F5DC" },
+        { label: "Silver", value: "#C0C0C0" }
+      ]
+    },
+    {
+      label: "Earth Tones",
+      options: [
+        { label: "Brown", value: "#A52A2A" },
+        { label: "Olive", value: "#808000" },
+        { label: "Forest Green", value: "#228B22" },
+        { label: "Tan", value: "#D2B48C" },
+        { label: "Maroon", value: "#800000" }
+      ]
+    },
+    {
+      label: "Fun Shades",
+      options: [
+        { label: "Pink", value: "#FFC0CB" },
+        { label: "Magenta", value: "#FF00FF" },
+        { label: "Lime", value: "#00FF00" },
+        { label: "Purple", value: "#800080" },
+        { label: "Indigo", value: "#4B0082" }
+      ]
+    }
+  ]
+
 const TypeaheadDefaultValue = (props) => {
   return (
-    <Typeahead
-        defaultValue={options[10]}
-        label="Colors"
-        options={options}
-        {...props}
-    />
+    <>
+      <Typeahead
+          defaultValue={options[10]}
+          label="Default Value with basic options"
+          options={options}
+          {...props}
+      />
+      <br />
+      <Typeahead
+          defaultValue={{ label: "Pink", value: "#FFC0CB" }}
+          label="Default Value with grouped options"
+          options={groupedOptions}
+          {...props}
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
     - typeahead_default: Default
+    - typeahead_custom_options: With Grouped Options
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
@@ -20,6 +21,7 @@ examples:
 
   react:
     - typeahead_default: Default
+    - typeahead_custom_options: With Grouped Options
     - typeahead_default_value: With Default Value
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight

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

@@ -16,4 +16,5 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
-export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
+export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -213,10 +213,24 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
-  return keys.map((size: Sizes) => {
-    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
-    return `${classPrefix}_${size}_${propValue}`
-  }).join(" ")
+  const screenSizeValues = ["xs", "sm", "md", "lg", "xl"]
+  let classResult = ''
+  
+  // Handle default value separately (generates base class without size prefix)
+  if (prop.default !== undefined) {
+    const defaultValue: string = typeof(prop.default) === 'string' ? camelToSnakeCase(prop.default) : prop.default
+    classResult += `${classPrefix}_${defaultValue} `
+  }
+  
+  // Handle responsive sizes (generates classes with size prefix)
+  keys.forEach((key) => {
+    if (screenSizeValues.includes(key)) {
+      const propValue: string = typeof(prop[key]) === 'string' ? camelToSnakeCase(prop[key]) : prop[key]
+      classResult += `${classPrefix}_${key}_${propValue} `
+    }
+  })
+  
+  return classResult.trim()
 }
 
 //reusable function for top, bottom, right and left props
@@ -436,9 +450,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof zIndexEntry[1] == "number") {
           css += `z_index_${zIndexEntry[1]} `
         } else if (typeof zIndexEntry[1] == "object") {
-          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
-            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
+          const responsiveObj: {[key: string]: string} = {}
+          Object.entries(zIndexEntry[1]).forEach(([key, value]) => {
+            responsiveObj[key] = value.toString()
           })
+          css += getResponsivePropClasses(responsiveObj, 'z_index')
         } else if (zIndexEntry[1] === 'max') {
           css += `z_index_max `
         }
@@ -463,9 +479,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof displayEntry[1] == "string") {
           css += `display_${displayEntry[1]} `
         } else if (typeof displayEntry[1] == "object") {
-          Object.entries(displayEntry[1]).forEach((displayObj) => {
-            css += `display_${displayObj[0]}_${displayObj[1]} `
+          const responsiveObj: {[key: string]: string} = {}
+          Object.entries(displayEntry[1]).forEach(([key, value]) => {
+            responsiveObj[key] = typeof value === 'string' ? value : value.toString()
           })
+          css += getResponsivePropClasses(responsiveObj, 'display')
         } else {
           ' '
         }

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignContent={{ default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_content_space_around`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_content_xs_center`)
+  expect(kit).toHaveClass(`align_content_sm_space_around`)
+  expect(kit).toHaveClass(`align_content_md_center`)
+})