playbook_ui 15.3.0.pre.alpha.PLAY258611978 → 15.3.0.pre.alpha.PLAY260211773

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -3,41 +3,48 @@
                                           text: "Mercury",
                                           unit: "AU",
                                           value: 0.39,
-                                          variant:"royal"
+                                          variant:"blue"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                           text: "Venus",
                                           unit: "AU",
                                           value: 0.723,
-                                          variant:"purple"
+                                          variant:"royal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                           text: "Earth",
                                           unit: "AU",
                                           value: 1.0,
-                                          variant:"teal"
+                                          variant:"purple"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                           text: "Mars",
                                           unit: "AU",
                                           value: 1.524,
-                                          variant:"red"
+                                          variant:"teal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
-                                          text: "Jupiter",
+                                          text: "Jupitar",
                                           unit: "AU",
                                           value: 5.203,
-                                          variant:"yellow"
+                                          variant:"red"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-africa",
                                           text: "Saturn",
                                           unit: "AU",
                                           value: 9.539,
+                                          variant:"yellow"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "globe",
+                                          text: "Uranus",
+                                          unit: "AU",
+                                          value: 19.18,
                                           variant:"green"
  }) %>
  <br>
@@ -46,4 +53,4 @@
                                           unit: "AU",
                                           value: 19.18,
                                           variant:"orange"
- }) %>
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -9,7 +9,7 @@ const IconStatValueColor = (props) => {
           text="Mercury"
           unit="AU"
           value={0.39}
-          variant="royal"
+          variant="blue"
           {...props}
       />
       <br />
@@ -18,7 +18,7 @@ const IconStatValueColor = (props) => {
           text="Venus"
           unit="AU"
           value={0.723}
-          variant="purple"
+          variant="royal"
           {...props}
       />
       <br />
@@ -27,7 +27,7 @@ const IconStatValueColor = (props) => {
           text="Earth"
           unit="AU"
           value={1.0}
-          variant="teal"
+          variant="purple"
           {...props}
       />
       <br />
@@ -36,16 +36,16 @@ const IconStatValueColor = (props) => {
           text="Mars"
           unit="AU"
           value={1.524}
-          variant="red"
+          variant="teal"
           {...props}
       />
       <br />
       <IconStatValue
           icon="globe-americas"
-          text="Jupiter"
+          text="Jupitar"
           unit="AU"
           value={5.203}
-          variant="yellow"
+          variant="red"
           {...props}
       />
       <br />
@@ -54,6 +54,15 @@ const IconStatValueColor = (props) => {
           text="Saturn"
           unit="AU"
           value={9.539}
+          variant="yellow"
+          {...props}
+      />
+      <br />
+      <IconStatValue
+          icon="globe"
+          text="Uranus"
+          unit="AU"
+          value={19.18}
           variant="green"
           {...props}
       />

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md

@@ -1 +1 @@
-Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>
+Layout 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_nav/docs/_collapsible_nav_item_spacing.md

@@ -1 +1 @@
-The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -1 +1 @@
-All Nav variants' navItems accept our global Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
+All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -2,4 +2,4 @@ The optional `layout` prop accepts the `position` and `size` of the overlay as a
 
 The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value is `full` (100%) by default, but accepts our spacing tokens([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

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

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/global_props/colors" target="_blank">here</a>.
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -24,7 +24,6 @@ import { uniqueId } from '../utilities/object';
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
-  appendTo?: string;
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
@@ -63,25 +62,6 @@ const popoverModifiers = ({
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
 
-const getAppendTarget = (
-  appendTo: string | undefined,
-  targetId: string
-): HTMLElement => {
-  if (!appendTo || appendTo === "body") return document.body;
-
-  if (appendTo === "parent") {
-    const referenceWrapper = document.querySelector(`#reference-${targetId}`);
-    if (referenceWrapper?.parentElement) {
-      return referenceWrapper.parentElement;
-    }
-  }
-
-  const selectorMatch = document.querySelector(appendTo);
-  if (selectorMatch instanceof HTMLElement) return selectorMatch;
-
-  return document.body;
-};
-
 const Popover = (props: PbPopoverProps) => {
   const {
     aria = {},
@@ -109,7 +89,7 @@ const Popover = (props: PbPopoverProps) => {
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps
       ? "p_sm"
-      : filteredGlobalProps
+      : filteredGlobalProps 
   const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
@@ -133,7 +113,7 @@ const Popover = (props: PbPopoverProps) => {
 
   return (
     <Popper
-        modifiers={popoverModifiers({ modifiers, offset: offset || false })}
+        modifiers={popoverModifiers({ modifiers, offset })}
         placement={placement}
         referenceElement={referenceElement}
     >
@@ -174,7 +154,6 @@ const Popover = (props: PbPopoverProps) => {
 const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(uniqueId('id-'))
   const {
-    appendTo,
     className,
     children,
     modifiers = [],
@@ -191,56 +170,42 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     minHeight,
     minWidth,
     width,
-    closeOnClick,
-    shouldClosePopover = noop,
   } = props;
 
-  // Store latest callback in a ref to avoid re-runs
-  const shouldClosePopoverRef = useRef(shouldClosePopover);
-
-  // Update ref on change
   useEffect(() => {
-    shouldClosePopoverRef.current = shouldClosePopover;
-  }, [shouldClosePopover]);
+    const { closeOnClick, shouldClosePopover = noop } = props;
 
-  useEffect(() => {
     if (!closeOnClick) return;
 
-    // Function to handle popover event listener and targetId.
-    // Ensure that whenever the component is conditionally rendered
-    // that the old listener is removed and the new listener is
-    // updated with the targetId.
-    const handleClick = (e: MouseEvent) => {
-      const target = e.target as HTMLElement
-
-      const targetIsPopover =
-        target.closest("#" + targetId) !== null;
-      const targetIsReference =
-        target.closest("#reference-" + targetId) !== null;
+    document.body.addEventListener(
+      "click",
+      (e: MouseEvent) => {
+        const target = e.target as HTMLElement
 
-      const shouldClose = () => {
-        setTimeout(() => shouldClosePopoverRef.current(true), 0);
-      }
+        const targetIsPopover =
+          target.closest("#" + targetId) !== null;
+        const targetIsReference =
+          target.closest("#reference-" + targetId) !== null;
 
-      switch (closeOnClick) {
-        case "outside":
-          if (!targetIsPopover && !targetIsReference) shouldClose();
-          break;
-        case "inside":
-          if (targetIsPopover) shouldClose();
-          break;
-        case "any":
-          if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
-          break;
-      }
-    };
+        const shouldClose = () => {
+          setTimeout(() => shouldClosePopover(true), 0);
+        }
 
-    document.body.addEventListener("click", handleClick, { capture: true });
-
-    return () => {
-      document.body.removeEventListener("click", handleClick, { capture: true });
-    };
-  }, [targetId, closeOnClick]);
+        switch (closeOnClick) {
+          case "outside":
+            if (!targetIsPopover && !targetIsReference) shouldClose();
+            break;
+          case "inside":
+            if (targetIsPopover) shouldClose();
+            break;
+          case "any":
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+            break;
+        }
+      },
+      { capture: true }
+    );
+  }, []);
 
   const popoverComponent = (
     <Popover
@@ -281,10 +246,10 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         {show &&
           (usePortal ? (
             <>
-                {ReactDOM.createPortal(
-                  popoverComponent,
-                  getAppendTarget(appendTo, targetId)
-                )}
+              {ReactDOM.createPortal(
+                popoverComponent,
+                document.querySelector(portal)
+              )}
             </>
           ) : (
             { popoverComponent }

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

@@ -15,4 +15,3 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
-    - popover_append_to: Append To

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

@@ -4,4 +4,3 @@ export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
 export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
-export { default as PopoverAppendTo } from './_popover_append_to.jsx'

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -159,62 +159,6 @@ const PopoverTestClicktoClose3 = () => {
   )
 };
 
-//Test Popover with appendTo="parent"
-const PopoverTestAppendToParent = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-    <div data-testid="parent-container"
-        id="parent-container"
-    >
-      <PbReactPopover
-          appendTo="parent"
-          offset
-          reference={popoverReference}
-          show={mockState}
-      >
-        {"Appended to parent"}
-      </PbReactPopover>
-    </div>
-  )
-};
-
-//Test Popover with appendTo CSS selector
-const PopoverTestAppendToSelector = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-    <div data-testid="custom-container"
-        id="custom-container"
-    >
-      <PbReactPopover
-          appendTo="#custom-container"
-          offset
-          reference={popoverReference}
-          show={mockState}
-      >
-        {"Appended to custom container"}
-      </PbReactPopover>
-    </div>
-  )
-};
-
 
   test("renders Popover", () => {
     render(<PopoverTest data={{ testid: testId}}/>)
@@ -273,28 +217,4 @@ const PopoverTestAppendToSelector = () => {
     fireEvent.click(btn);
 
     expect(kit).not.toBeInTheDocument;
-  });
-
-  test("renders Popover with appendTo parent", () => {
-    render(<PopoverTestAppendToParent data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Appended to parent");
-    expect(kit).toBeInTheDocument();
-    
-    // Check that the popover is rendered inside the parent container
-    const parentContainer = screen.getByTestId("parent-container");
-    expect(parentContainer).toContainElement(kit);
-  });
-
-  test("renders Popover with appendTo CSS selector", () => {
-    render(<PopoverTestAppendToSelector data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Appended to custom container");
-    expect(kit).toBeInTheDocument();
-    
-    // Check that the popover is rendered inside the custom container
-    const customContainer = screen.getByTestId("custom-container");
-    expect(customContainer).toContainElement(kit);
   });

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_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

@@ -171,45 +171,4 @@ 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")
 })

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

@@ -144,18 +144,6 @@ 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(() => {
@@ -171,18 +159,17 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
         const options = props.options
         if (options) {
-          // Flatten grouped options to find the matching option and find matching option
-          const flatOptions = flattenOptions(options)
-          
-          const targetOption = flatOptions.find((option: any) => {
+          // Find the index of the current value
+          const focusedIndex = options.findIndex((option: any) => {
             const optionValue = props.getOptionValue ? props.getOptionValue(option) : option.value
             const currentOptionValue = props.getOptionValue ? props.getOptionValue(currentValue) : currentValue.value
             return optionValue === currentOptionValue
           })
           
-          if (targetOption) {
+          if (focusedIndex >= 0 && options[focusedIndex]) {
             // 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
@@ -192,12 +179,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
               setTimeout(() => {
                 if (selectRef.current && selectRef.current.menuListRef) {
                   const menuElement = selectRef.current.menuListRef
-                  // 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
+                  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
                     const menuHeight = menuElement.clientHeight
                     
                     // Set the menu's scrollTop to position the selected option in the middle