playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_toggle/docs/_playground.overrides.json

@@ -1,4 +1,5 @@
 {
+  "hiddenProps": ["inputOptions", "onChange"],
   "groups": [
     {
       "name": "Content",
@@ -6,7 +7,7 @@
     },
     {
       "name": "State",
-      "props": ["disabled", "checked"]
+      "props": ["checked", "disabled"]
     },
     {
       "name": "Appearance",
@@ -22,7 +23,7 @@
       }
     },
     {
-      "name": "With Error",
+      "name": "Checked",
       "props": {
         "name": "dark_mode",
         "value": "theme",
@@ -37,17 +38,24 @@
         "checked": true,
         "disabled": true
       }
-    },
-    {
-      "name": "Required",
-      "props": {
-        "name": "notifications",
-        "value": "push",
-        "size": "md",
-        "checked": true
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders an unchecked small toggle with name and value for forms.",
+      "type": "info"
+    },
+    "checked": {
+      "presetName": "Checked",
+      "message": "Checked initializes the toggle in the on state.",
+      "type": "info"
+    },
+    "disabled": {
+      "presetName": "Disabled",
+      "message": "Disabled keeps the selected state visible while preventing changes.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_toggle/kit.schema.json

@@ -31,7 +31,7 @@
       ]
     },
     "onChange": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]
@@ -59,7 +59,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_tooltip/docs/_playground.json

@@ -31,7 +31,19 @@
       "name": "Appearance",
       "props": [
         "showTooltip",
-        "forceOpenTooltip"
+        "forceOpenTooltip",
+        "position"
+      ]
+    },
+    {
+      "name": "Sizing",
+      "props": [
+        "width",
+        "minWidth",
+        "maxWidth",
+        "height",
+        "minHeight",
+        "maxHeight"
       ]
     }
   ],
@@ -45,47 +57,54 @@
       "children": "Hover me"
     },
     {
-      "name": "Bottom",
-      "props": {
-        "placement": "bottom",
-        "text": "Tooltip on bottom"
-      },
-      "children": "Hover me"
-    },
-    {
-      "name": "Left",
-      "props": {
-        "placement": "left",
-        "text": "Tooltip on the left"
-      },
-      "children": "Hover me"
-    },
-    {
-      "name": "Right",
+      "name": "With Icon",
       "props": {
+        "icon": "info-circle",
         "placement": "right",
-        "text": "Tooltip on the right"
+        "text": "Tooltip with an icon"
       },
       "children": "Hover me"
     },
     {
-      "name": "Click to open",
+      "name": "Click to Open",
       "props": {
         "placement": "top",
         "useClickToOpen": true,
         "text": "Click toggles this tooltip"
       },
       "children": "Click me"
+    },
+    {
+      "name": "Forced Open",
+      "props": {
+        "forceOpenTooltip": true,
+        "placement": "bottom",
+        "text": "Forced open for demos"
+      },
+      "children": "Always visible"
     }
   ],
   "conditionals": {},
   "hints": {
+    "top": {
+      "presetName": "Top",
+      "message": "Top uses the default hover behavior with the tooltip above the trigger.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds an icon inside the tooltip content.",
+      "type": "info"
+    },
     "click_to_open": {
-      "when": {
-        "useClickToOpen": true
-      },
+      "presetName": "Click to Open",
       "message": "When click to open is on, the tooltip toggles on click instead of hover.",
       "type": "info"
+    },
+    "forced_open": {
+      "presetName": "Forced Open",
+      "message": "Forced Open keeps the tooltip visible, which is useful for demos and visual checks.",
+      "type": "info"
     }
   }
 }

data/app/pb_kits/playbook/pb_tooltip/docs/_playground.overrides.json

@@ -1,5 +1,6 @@
 {
   "children": {
+    "editable": true,
     "default": "Hover me",
     "hideWhenPropSet": []
   },
@@ -9,7 +10,8 @@
       "name": "Behavior",
       "props": ["placement", "useClickToOpen", "interaction", "delay"]
     },
-    { "name": "Appearance", "props": ["showTooltip", "forceOpenTooltip"] }
+    { "name": "Appearance", "props": ["showTooltip", "forceOpenTooltip", "position"] },
+    { "name": "Sizing", "props": ["width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"] }
   ],
   "presets": [
     {
@@ -18,36 +20,54 @@
       "children": "Hover me"
     },
     {
-      "name": "Bottom",
-      "props": { "placement": "bottom", "text": "Tooltip on bottom" },
-      "children": "Hover me"
-    },
-    {
-      "name": "Left",
-      "props": { "placement": "left", "text": "Tooltip on the left" },
-      "children": "Hover me"
-    },
-    {
-      "name": "Right",
-      "props": { "placement": "right", "text": "Tooltip on the right" },
+      "name": "With Icon",
+      "props": {
+        "icon": "info-circle",
+        "placement": "right",
+        "text": "Tooltip with an icon"
+      },
       "children": "Hover me"
     },
     {
-      "name": "Click to open",
+      "name": "Click to Open",
       "props": {
         "placement": "top",
         "useClickToOpen": true,
         "text": "Click toggles this tooltip"
       },
       "children": "Click me"
+    },
+    {
+      "name": "Forced Open",
+      "props": {
+        "forceOpenTooltip": true,
+        "placement": "bottom",
+        "text": "Forced open for demos"
+      },
+      "children": "Always visible"
     }
   ],
   "conditionals": {},
   "hints": {
+    "top": {
+      "presetName": "Top",
+      "message": "Top uses the default hover behavior with the tooltip above the trigger.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds an icon inside the tooltip content.",
+      "type": "info"
+    },
     "click_to_open": {
-      "when": { "useClickToOpen": true },
+      "presetName": "Click to Open",
       "message": "When click to open is on, the tooltip toggles on click instead of hover.",
       "type": "info"
+    },
+    "forced_open": {
+      "presetName": "Forced Open",
+      "message": "Forced Open keeps the tooltip visible, which is useful for demos and visual checks.",
+      "type": "info"
     }
   }
 }

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

@@ -1,5 +1,5 @@
-import React, {useState, useEffect, forwardRef, useRef} from "react"
-import Select from "react-select"
+import React, {useState, useEffect, useLayoutEffect, useMemo, useCallback, forwardRef, useRef, useContext} from "react"
+import Select, {components as selectComponents, mergeStyles} from "react-select"
 import AsyncSelect from "react-select/async"
 import CreateableSelect from "react-select/creatable"
 import AsyncCreateableSelect from "react-select/async-creatable"
@@ -22,8 +22,18 @@ import {
 import * as kitComponents from "./components"
 
 import {noop, buildDataProps, buildHtmlProps} from "../utilities/props"
+import {
+  PB_FLOATING_OWNER_ATTR,
+  kitRequiresPortaledFloatingUi,
+  resolveFloatingOwnerId,
+  resolvePortaledFloatingZIndex,
+  resolvePortaledKitHost,
+} from "../utilities/floatingPortalHosts"
+import {DialogContext} from "../pb_dialog/_dialog_context"
 import {GenericObject, Noop} from "../types"
 
+type TypeaheadStylesConfig = Parameters<typeof mergeStyles>[0]
+
 /**
  * @typedef {object} Props
  * @prop {boolean} async - whether Typeahead should fetch data from
@@ -82,6 +92,8 @@ type TypeaheadProps = {
   searchContextSelector?: string
   clearOnContextChange?: boolean
   preserveSearchInput?: boolean
+  // Passed through to react-select; merged when menu is portaled to `document.body`.
+  styles?: TypeaheadStylesConfig
 } & GlobalProps
 
 export type SelectValueType = {
@@ -129,6 +141,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(
     validation,
     clearOnContextChange = false,
     preserveSearchInput = false, // Default to false to maintain backward compatibility
+    styles: stylesProp,
     ...props
   }: TypeaheadProps) => {
     // State to manage the input value when preserveSearchInput is true
@@ -197,6 +210,70 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(
     // Create a ref to access React Select instance
     const selectRef = useRef<any>(null)
 
+    const dialogCtx = useContext(DialogContext)
+
+    const kitContainerRef = useRef<HTMLDivElement>(null)
+    const [menuPortalHost, setMenuPortalHost] = useState<HTMLElement | null>(
+      null,
+    )
+    const [floatingOwnerId, setFloatingOwnerId] = useState<string | null>(null)
+    const [menuIsOpen, setMenuIsOpen] = useState(false)
+
+    const resolveMenuPortalConfig = useCallback(() => {
+      const el = kitContainerRef.current
+      setFloatingOwnerId(resolveFloatingOwnerId(el))
+      setMenuPortalHost(
+        resolvePortaledKitHost(
+          el,
+          dialogCtx?.selectMenuPortalTarget ?? null,
+        ),
+      )
+    }, [dialogCtx?.selectMenuPortalTarget])
+
+    useLayoutEffect(() => {
+      if (!menuIsOpen) {
+        setFloatingOwnerId(null)
+        setMenuPortalHost(null)
+        return
+      }
+      resolveMenuPortalConfig()
+    }, [menuIsOpen, resolveMenuPortalConfig])
+
+    const MenuPortalWithOwner = useMemo(
+      () =>
+        function TypeaheadMenuPortal(
+          portalProps: React.ComponentProps<typeof selectComponents.MenuPortal>,
+        ) {
+          return (
+            <selectComponents.MenuPortal
+                {...portalProps}
+                innerProps={{
+                  ...portalProps.innerProps,
+                  ...(floatingOwnerId
+                    ? {[PB_FLOATING_OWNER_ATTR]: floatingOwnerId}
+                    : {}),
+                }}
+            />
+          )
+        },
+      [floatingOwnerId],
+    )
+
+    const mergedSelectStyles = useMemo(() => {
+      if (menuPortalHost !== document.body) return stylesProp
+      const zIndex = Number(resolvePortaledFloatingZIndex(document.body))
+      return mergeStyles(stylesProp ?? {}, {
+        menuPortal: (base: Record<string, unknown>) => ({
+          ...base,
+          zIndex,
+        }),
+        menu: (base: Record<string, unknown>) => ({
+          ...base,
+          zIndex,
+        }),
+      } as TypeaheadStylesConfig)
+    }, [menuPortalHost, stylesProp])
+
     // Helper function to flatten grouped options if custom groups are used
     const flattenOptions = (options: any[]): any[] => {
       if (!options) return []
@@ -209,8 +286,21 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(
       }, [])
     }
 
+    const handleMenuClose = () => {
+      setMenuIsOpen(false)
+      setMenuPortalHost(null)
+      setFloatingOwnerId(null)
+      if (props.onMenuClose) {
+        props.onMenuClose()
+      }
+    }
+
     // Configure focus on selected option using React Select's API
     const handleMenuOpen = () => {
+      if (kitRequiresPortaledFloatingUi(kitContainerRef.current)) {
+        resolveMenuPortalConfig()
+        setMenuIsOpen(true)
+      }
       setTimeout(() => {
         let currentValue = props.value || props.defaultValue
 
@@ -372,6 +462,7 @@ const resolvedLoadOptions =
         Option,
         Placeholder,
         ValueContainer,
+        ...(menuPortalHost ? {MenuPortal: MenuPortalWithOwner} : {}),
         ...components,
       },
       loadOptions: wrappedLoadOptions,
@@ -399,10 +490,24 @@ const resolvedLoadOptions =
       ...(preserveSearchInput ? {inputValue} : {}),
       onInputChange: handleInputChange,
       onBlur: handleBlur,
-      onMenuOpen: handleMenuOpen,
       required,
       requiredIndicator: requiredIndicator,
       ...props,
+      onMenuClose: () => {
+        handleMenuClose()
+        props.onMenuClose?.()
+      },
+      onMenuOpen: () => {
+        handleMenuOpen()
+        props.onMenuOpen?.()
+      },
+      ...(menuPortalHost
+        ? {
+            menuPortalTarget: menuPortalHost,
+            menuPosition: "fixed" as const,
+          }
+        : {}),
+      styles: mergedSelectStyles,
     }
 
     const [contextValue, setContextValue] = useState("")
@@ -579,6 +684,7 @@ const resolvedLoadOptions =
 
     return (
     <div
+        ref={kitContainerRef}
         {...dataProps}
         {...htmlProps}
         aria-busy={asyncLoading ? "true" : "false"}

data/app/pb_kits/playbook/pb_typeahead/docs/_playground.json

@@ -18,7 +18,9 @@
       "props": [
         "label",
         "name",
-        "options"
+        "options",
+        "inputDisplay",
+        "isMulti"
       ]
     },
     {
@@ -32,31 +34,32 @@
       ]
     },
     {
-      "name": "Appearance",
-      "props": [
-        "inputDisplay"
-      ]
-    },
-    {
-      "name": "Async & data",
+      "name": "Async & Data",
       "props": [
         "async",
-        "createable",
         "loadOptions",
         "getOptionLabel",
         "getOptionValue",
         "optionsByContext",
         "searchContextSelector",
-        "clearOnContextChange",
-        "preserveSearchInput"
+        "clearOnContextChange"
       ]
     },
     {
-      "name": "Advanced",
+      "name": "Behavior",
       "props": [
-        "components",
+        "createable",
+        "preserveSearchInput",
         "onChange"
       ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "components",
+        "dark",
+        "marginBottom"
+      ]
     }
   ],
   "presets": [
@@ -64,6 +67,7 @@
       "name": "Basic list",
       "props": {
         "label": "Colors",
+        "name": "color",
         "options": [
           {
             "label": "Orange",
@@ -85,10 +89,12 @@
       }
     },
     {
-      "name": "Pills display",
+      "name": "Count display",
       "props": {
         "label": "Tags",
-        "inputDisplay": "pills",
+        "name": "tags",
+        "inputDisplay": "none",
+        "isMulti": true,
         "options": [
           {
             "label": "Design",
@@ -106,57 +112,75 @@
       }
     },
     {
-      "name": "Plain input",
+      "name": "Required validation",
       "props": {
-        "label": "Team",
-        "inputDisplay": "none",
+        "label": "Assignee",
+        "name": "assignee",
+        "required": true,
+        "requiredIndicator": true,
+        "validation": {
+          "message": "Choose an assignee."
+        },
+        "error": "Selection is required.",
         "options": [
           {
-            "label": "North",
-            "value": "north"
+            "label": "Ada",
+            "value": "ada"
           },
           {
-            "label": "South",
-            "value": "south"
+            "label": "Grace",
+            "value": "grace"
           }
         ]
       }
     },
     {
-      "name": "Disabled",
+      "name": "Async users",
+      "structureMode": "advanced",
       "props": {
-        "label": "Read only",
-        "disabled": true,
-        "options": [
-          {
-            "label": "Only option",
-            "value": "one"
-          }
-        ]
+        "async": true,
+        "label": "Users",
+        "name": "users",
+        "loadOptions": "playgroundTypeahead.loadOptions",
+        "getOptionLabel": "playgroundTypeahead.getOptionLabel",
+        "getOptionValue": "playgroundTypeahead.getOptionValue",
+        "options": []
       }
     },
     {
-      "name": "With error",
+      "name": "Custom menu",
+      "structureMode": "advanced",
       "props": {
-        "label": "Assignee",
-        "error": "Selection is required.",
+        "label": "Colors",
+        "name": "custom_menu",
+        "components": {
+          "__playgroundCode": "{ MenuList }"
+        },
+        "marginBottom": "none",
         "options": [
           {
-            "label": "Ada",
-            "value": "ada"
+            "label": "Orange",
+            "value": "#FFA500"
           },
           {
-            "label": "Grace",
-            "value": "grace"
+            "label": "Red",
+            "value": "#FF0000"
+          },
+          {
+            "label": "Green",
+            "value": "#00FF00"
           }
         ]
       }
     },
     {
-      "name": "Creatable",
+      "name": "Creatable handler",
       "props": {
         "label": "Add labels",
+        "name": "labels",
         "createable": true,
+        "preserveSearchInput": true,
+        "onChange": "(selected) => console.log(selected)",
         "options": [
           {
             "label": "Bug",
@@ -186,6 +210,14 @@
         "async": true
       }
     },
+    "requiredIndicator": {
+      "requires": "label"
+    },
+    "validation": {
+      "requires": {
+        "required": true
+      }
+    },
     "optionsByContext": {
       "requires": "searchContextSelector"
     },
@@ -194,12 +226,60 @@
     }
   },
   "hints": {
-    "async_options": {
-      "when": {
-        "async": true
-      },
-      "message": "Async mode expects loadOptions to return option objects with label and value.",
+    "basic_list": {
+      "presetName": "Basic list",
+      "message": "Basic list uses a local options array with label and value keys.",
       "type": "info"
+    },
+    "count_display": {
+      "presetName": "Count display",
+      "message": "Count display uses multi-select with inputDisplay set to none so selected values render as a count.",
+      "type": "info"
+    },
+    "required_validation": {
+      "presetName": "Required validation",
+      "message": "Required validation pairs required, requiredIndicator, validation, and error copy.",
+      "type": "info"
+    },
+    "async_users": {
+      "presetName": "Async users",
+      "message": "Async users demonstrates loadOptions plus custom option label/value resolvers.",
+      "type": "info"
+    },
+    "custom_menu": {
+      "presetName": "Custom menu",
+      "message": "Custom menu passes a components map to replace Typeahead.MenuList content.",
+      "type": "info"
+    },
+    "creatable_handler": {
+      "presetName": "Creatable handler",
+      "message": "Creatable handler shows custom option creation, preserved search input, and an onChange handler.",
+      "type": "info"
+    }
+  },
+  "customProps": {
+    "isMulti": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    }
+  },
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<Typeahead{{props}} />",
+        "children": ""
+      },
+      "advanced": {
+        "label": "Advanced setup",
+        "template": "<Typeahead{{props}} />",
+        "children": "",
+        "wrapper": "const playgroundTypeaheadOptions = [\n  { name: \"Ada Lovelace\", id: \"ada\" },\n  { name: \"Grace Hopper\", id: \"grace\" },\n  { name: \"Katherine Johnson\", id: \"katherine\" },\n  { name: \"Margaret Hamilton\", id: \"margaret\" },\n]\n\nconst playgroundTypeahead = {\n  loadOptions: (inputValue) => new Promise((resolve) => {\n    const search = inputValue.toLowerCase()\n    window.setTimeout(() => {\n      resolve(playgroundTypeaheadOptions.filter((option) => option.name.toLowerCase().includes(search)))\n    }, 250)\n  }),\n  getOptionLabel: (option) => option.name || option.label,\n  getOptionValue: (option) => String(option.id || option.value),\n}\n\nif (typeof window !== \"undefined\") {\n  window.playgroundTypeahead = playgroundTypeahead\n}\n\nconst MenuList = (props) => (\n  <Typeahead.MenuList\n      {...props}\n      footer={<Button margin=\"sm\" text=\"Custom footer\" />}\n  />\n)\n\nconst TypeaheadPlaygroundExample = () => (\n  {{component}}\n)\n\n<TypeaheadPlaygroundExample />"
+      }
     }
   }
 }