playbook_ui 18.1.0 → 18.2.0.pre.alpha.PLAY3330requiredtypeaheadvalidationbug20501

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_highlight.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
+
+const USERS = [
+  {
+    label: "Wade Winningham",
+    title: "Nitro Principal Developer",
+    territory: "PHL",
+    value: "wadeWinningham",
+  },
+  {
+    label: "Carlos Lima",
+    title: "Nitro Developer",
+    territory: "PHL",
+    value: "carlosLima",
+  },
+  {
+    label: "Stephen Marshall",
+    title: "Senior Nitro Developer",
+    territory: "PHL",
+    value: "stephenMarshall",
+  },
+  {
+    label: "Jasper Furniss",
+    title: "Lead User Experience Engineer",
+    territory: "PHL",
+    value: "jasperFurniss",
+  },
+]
+
+const escapeRegExp = (value = "") => (
+  value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+)
+
+const highlighted = (text, searchInput) => {
+  if (!searchInput) return text
+
+  const regex = new RegExp(`(${escapeRegExp(searchInput)})`, 'gi')
+
+  return text.split(regex).map((part, index) => (
+    part.toLowerCase() === searchInput.toLowerCase()
+      ? <mark key={`${part}-${index}`}>{part}</mark>
+      : <React.Fragment key={`${part}-${index}`}>{part}</React.Fragment>
+  ))
+}
+
+const loadUsers = (searchInput) => {
+  const normalizedInput = searchInput.toLowerCase()
+
+  return Promise.resolve(USERS.filter(({ label, title }) => (
+    `${label} ${title}`.toLowerCase().includes(normalizedInput)
+  )))
+}
+
+const DropdownWithHighlight = (props) => {
+  const [searchInput, setSearchInput] = useState("")
+
+  const renderUser = ({ label, territory, title }) => (
+    <Flex>
+      <FlexItem>
+        <Avatar
+            marginRight="sm"
+            name={label}
+            size="sm"
+        />
+      </FlexItem>
+      <FlexItem>
+        <Title size={4}>
+          {highlighted(label, searchInput)}
+        </Title>
+        <Body color="light">
+          {highlighted(title, searchInput)}{" • "}
+          {territory}
+        </Body>
+      </FlexItem>
+    </Flex>
+  )
+
+  return (
+    <Dropdown
+        async
+        autocomplete
+        defaultOptions={USERS}
+        label="Users"
+        loadOptions={loadUsers}
+        onInputChange={(input) => setSearchInput(input)}
+        onSelect={() => setSearchInput("")}
+        placeholder="Search users"
+        renderOption={renderUser}
+        {...props}
+    />
+  )
+}
+
+export default DropdownWithHighlight

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_highlight.md

@@ -0,0 +1,3 @@
+Use `onInputChange` to track the current search and `renderOption` to customize each option row. Split each field by the search input, then render matching text inside `<mark>` so users can quickly see why a result matched.
+
+This example uses `loadOptions` to search both the user's name and title.

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

@@ -1,7 +1,11 @@
 {
   "template": "<Dropdown{{props}} />",
-  "propTargets": {},
+  "propTargets": {
+    "searchbar": "Container.props",
+    "options": "Options.data"
+  },
   "defaults": {
+    "async": false,
     "autocomplete": false,
     "blankSelection": "",
     "clearable": true,
@@ -84,6 +88,20 @@
     "placeholder": "Select a country"
   },
   "groups": [
+    {
+      "name": "async search",
+      "props": [
+        "async",
+        "loadOptions",
+        "defaultOptions",
+        "cacheOptions",
+        "loading",
+        "onInputChange",
+        "renderOption",
+        "value",
+        "searchbar"
+      ]
+    },
     {
       "name": "Content",
       "props": [
@@ -137,6 +155,26 @@
     }
   ],
   "presets": [
+    {
+      "name": "Async search",
+      "structureMode": "async",
+      "props": {}
+    },
+    {
+      "name": "Rich results and selection",
+      "structureMode": "rich",
+      "props": {}
+    },
+    {
+      "name": "Controlled selection",
+      "structureMode": "controlled",
+      "props": {}
+    },
+    {
+      "name": "External search",
+      "structureMode": "external",
+      "props": {}
+    },
     {
       "name": "Default trigger",
       "props": {
@@ -280,6 +318,21 @@
     }
   ],
   "conditionals": {
+    "loadOptions": {
+      "requires": "async"
+    },
+    "defaultOptions": {
+      "requires": "async"
+    },
+    "cacheOptions": {
+      "requires": "async"
+    },
+    "loading": {
+      "requires": "async"
+    },
+    "searchbar": {
+      "structureMode": "async"
+    },
     "requiredIndicator": {
       "requires": "label"
     },
@@ -308,6 +361,23 @@
     }
   },
   "hints": {
+    "async_search_info": {
+      "when": {
+        "async": true
+      },
+      "message": "Async examples search the public DummyJSON sample-user API. Try Emily or Michael, or an unmatched term for the empty state. defaultOptions preloads results; cacheOptions reuses successful searches. Use the Async search structure with autocomplete off and searchbar on to search inside the menu.",
+      "type": "info"
+    },
+    "external_search_info": {
+      "presetName": "External search",
+      "message": "The wrapper owns a 250ms debounce, a three-character minimum, request cancellation, options, and loading. onInputChange reports input/clear; onSelect receives the complete option. Inspect the generated code for the integration.",
+      "type": "info"
+    },
+    "rich_results_info": {
+      "presetName": "Rich results and selection",
+      "message": "renderOption customizes results; the existing Trigger customDisplay renders selected company details. The selected option shown below retains custom company data.",
+      "type": "info"
+    },
     "quickpick_scope": {
       "when": {
         "variant": "quickpick"
@@ -324,7 +394,8 @@
     },
     "autocomplete_info": {
       "when": {
-        "autocomplete": true
+        "autocomplete": true,
+        "async": false
       },
       "message": "Autocomplete filters the provided options list in place. It works especially well with longer option sets.",
       "type": "info"
@@ -362,14 +433,114 @@
         "template": "<Dropdown options={options}{{props}} />",
         "children": ""
       },
+      "async": {
+        "label": "Async search",
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>",
+        "children": "",
+        "props": {
+          "async": true,
+          "autocomplete": true,
+          "options": [],
+          "label": "User",
+          "placeholder": "Try Emily or Michael",
+          "loadOptions": "loadUsers",
+          "defaultOptions": true,
+          "cacheOptions": true
+        },
+        "wrapper": "const loadUsers = (term) => fetch(`https://dummyjson.com/users/search?${new URLSearchParams({ q: term, limit: '10', select: 'firstName,lastName,company' })}`, { credentials: 'omit' })\n  .then((response) => {\n    if (!response.ok) throw new Error('Search failed')\n    return response.json()\n  })\n  .then(({ users }) => users.map((user) => ({\n    ...user,\n    label: `${user.firstName} ${user.lastName}`,\n    value: user.id,\n  })));\n\n{{component}}"
+      },
+      "rich": {
+        "label": "Rich async results",
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger customDisplay={selected && <Detail text={companyDetail(selected)} />} />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>",
+        "children": "",
+        "props": {
+          "async": true,
+          "autocomplete": true,
+          "options": [],
+          "label": "User",
+          "placeholder": "Try Emily or Michael",
+          "loadOptions": "loadUsers",
+          "renderOption": "renderUser",
+          "onSelect": "setSelected",
+          "value": {
+            "__playgroundCode": "selected"
+          }
+        },
+        "externalImports": [
+          "import React, { useState } from 'react'"
+        ],
+        "wrapper": "const loadUsers = (term) => fetch(`https://dummyjson.com/users/search?${new URLSearchParams({ q: term, limit: '10', select: 'firstName,lastName,company' })}`, { credentials: 'omit' })\n  .then((response) => {\n    if (!response.ok) throw new Error('Search failed')\n    return response.json()\n  })\n  .then(({ users }) => users.map((user) => ({\n    ...user,\n    label: `${user.firstName} ${user.lastName}`,\n    value: user.id,\n  })))\n\nconst companyDetail = (user) => [user.company?.title, user.company?.department].filter(Boolean).join(' · ')\n\nconst renderUser = (user) => (\n  <div>\n    <Body text={user.label} />\n    <Detail text={companyDetail(user)} />\n  </div>\n)\n\nconst RichDropdownPlayground = () => {\n  const [selected, setSelected] = useState(null)\n  return (\n    <>\n      {{component}}\n      <Detail text={selected ? JSON.stringify(selected) : \"Select a user to inspect the complete option object.\"} />\n    </>\n  )\n};\n\n<RichDropdownPlayground />"
+      },
+      "controlled": {
+        "label": "Controlled selection",
+        "template": "<Dropdown options={options}{{props}} />",
+        "children": "",
+        "props": {
+          "multiSelect": true,
+          "label": "Countries",
+          "value": {
+            "__playgroundCode": "selected"
+          },
+          "onSelect": "setSelected"
+        },
+        "externalImports": [
+          "import React, { useState } from 'react'"
+        ],
+        "wrapper": "const ControlledDropdownPlayground = () => {\n  const [selected, setSelected] = useState([])\n  return (\n    <>\n      {{component}}\n      <Flex gap=\"xs\" marginTop=\"sm\">\n        <Button text=\"Select all enabled\" onClick={() => setSelected(options.filter((option) => !option.disabled))} />\n        <Button text=\"Clear\" variant=\"secondary\" onClick={() => setSelected([])} />\n      </Flex>\n    </>\n  )\n};\n\n<ControlledDropdownPlayground />"
+      },
+      "external": {
+        "label": "External async search",
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>",
+        "children": "",
+        "props": {
+          "async": true,
+          "autocomplete": true,
+          "options": [],
+          "label": "User",
+          "placeholder": "Type at least 3 characters",
+          "loading": {
+            "__playgroundCode": "loading"
+          },
+          "value": {
+            "__playgroundCode": "selected"
+          },
+          "onInputChange": "(text, { reason }) => setQuery(reason === 'input' ? text : '')",
+          "onSelect": "(option) => { setSelected(option); setQuery('') }"
+        },
+        "externalImports": [
+          "import React, { useEffect, useState } from 'react'"
+        ],
+        "wrapper": "const ExternalDropdownPlayground = () => {\n  const [query, setQuery] = useState('')\n  const [options, setOptions] = useState([])\n  const [loading, setLoading] = useState(false)\n  const [selected, setSelected] = useState(null)\n\n  useEffect(() => {\n    const controller = new AbortController()\n    setOptions([])\n    setLoading(false)\n    if (query.length < 3) return () => controller.abort()\n    setLoading(true)\n    const timer = setTimeout(() => {\n      const params = new URLSearchParams({ q: query, limit: '10', select: 'firstName,lastName' })\n      fetch(`https://dummyjson.com/users/search?${params}`, { signal: controller.signal, credentials: 'omit' })\n        .then((response) => {\n          if (!response.ok) throw new Error('Search failed')\n          return response.json()\n        })\n        .then(({ users }) => {\n          if (!controller.signal.aborted) setOptions(users.map((user) => ({\n            ...user,\n            label: `${user.firstName} ${user.lastName}`,\n            value: user.id,\n          })))\n        })\n        .catch(() => { if (!controller.signal.aborted) setOptions([]) })\n        .finally(() => { if (!controller.signal.aborted) setLoading(false) })\n    }, 250)\n    return () => { clearTimeout(timer); controller.abort() }\n  }, [query])\n\n  return ({{component}})\n};\n\n<ExternalDropdownPlayground />"
+      },
       "subcomponents": {
         "label": "With Subcomponents",
-        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>",
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}}>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>",
         "children": ""
       }
     }
   },
+  "editableFunctionProps": [
+    "loadOptions",
+    "renderOption",
+    "onInputChange",
+    "onSelect"
+  ],
   "customProps": {
+    "loadOptions": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ],
+      "description": "Promise or callback loader. Receives the search term; return options with id, label, and value plus any custom data."
+    },
+    "searchbar": {
+      "type": "boolean",
+      "default": false,
+      "platforms": [
+        "react"
+      ],
+      "description": "Show a search input inside Dropdown.Container. Turn autocomplete off to try this mode."
+    },
     "options": {
       "type": "array",
       "platforms": [

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

@@ -7,14 +7,110 @@
         "template": "<Dropdown options={options}{{props}} />",
         "children": ""
       },
+      "async": {
+        "label": "Async search",
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>",
+        "children": "",
+        "props": {
+          "async": true,
+          "autocomplete": true,
+          "options": [],
+          "label": "User",
+          "placeholder": "Try Emily or Michael",
+          "loadOptions": "loadUsers",
+          "defaultOptions": true,
+          "cacheOptions": true
+        },
+        "wrapper": "const loadUsers = (term) => fetch(`https://dummyjson.com/users/search?${new URLSearchParams({ q: term, limit: '10', select: 'firstName,lastName,company' })}`, { credentials: 'omit' })\n  .then((response) => {\n    if (!response.ok) throw new Error('Search failed')\n    return response.json()\n  })\n  .then(({ users }) => users.map((user) => ({\n    ...user,\n    label: `${user.firstName} ${user.lastName}`,\n    value: user.id,\n  })));\n\n{{component}}"
+      },
+      "rich": {
+        "label": "Rich async results",
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger customDisplay={selected && <Detail text={companyDetail(selected)} />} />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>",
+        "children": "",
+        "props": {
+          "async": true,
+          "autocomplete": true,
+          "options": [],
+          "label": "User",
+          "placeholder": "Try Emily or Michael",
+          "loadOptions": "loadUsers",
+          "renderOption": "renderUser",
+          "onSelect": "setSelected",
+          "value": {
+            "__playgroundCode": "selected"
+          }
+        },
+        "externalImports": [
+          "import React, { useState } from 'react'"
+        ],
+        "wrapper": "const loadUsers = (term) => fetch(`https://dummyjson.com/users/search?${new URLSearchParams({ q: term, limit: '10', select: 'firstName,lastName,company' })}`, { credentials: 'omit' })\n  .then((response) => {\n    if (!response.ok) throw new Error('Search failed')\n    return response.json()\n  })\n  .then(({ users }) => users.map((user) => ({\n    ...user,\n    label: `${user.firstName} ${user.lastName}`,\n    value: user.id,\n  })))\n\nconst companyDetail = (user) => [user.company?.title, user.company?.department].filter(Boolean).join(' \u00b7 ')\n\nconst renderUser = (user) => (\n  <div>\n    <Body text={user.label} />\n    <Detail text={companyDetail(user)} />\n  </div>\n)\n\nconst RichDropdownPlayground = () => {\n  const [selected, setSelected] = useState(null)\n  return (\n    <>\n      {{component}}\n      <Detail text={selected ? JSON.stringify(selected) : \"Select a user to inspect the complete option object.\"} />\n    </>\n  )\n};\n\n<RichDropdownPlayground />"
+      },
+      "controlled": {
+        "label": "Controlled selection",
+        "template": "<Dropdown options={options}{{props}} />",
+        "children": "",
+        "props": {
+          "multiSelect": true,
+          "label": "Countries",
+          "value": {
+            "__playgroundCode": "selected"
+          },
+          "onSelect": "setSelected"
+        },
+        "externalImports": [
+          "import React, { useState } from 'react'"
+        ],
+        "wrapper": "const ControlledDropdownPlayground = () => {\n  const [selected, setSelected] = useState([])\n  return (\n    <>\n      {{component}}\n      <Flex gap=\"xs\" marginTop=\"sm\">\n        <Button text=\"Select all enabled\" onClick={() => setSelected(options.filter((option) => !option.disabled))} />\n        <Button text=\"Clear\" variant=\"secondary\" onClick={() => setSelected([])} />\n      </Flex>\n    </>\n  )\n};\n\n<ControlledDropdownPlayground />"
+      },
+      "external": {
+        "label": "External async search",
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>",
+        "children": "",
+        "props": {
+          "async": true,
+          "autocomplete": true,
+          "options": [],
+          "label": "User",
+          "placeholder": "Type at least 3 characters",
+          "loading": {
+            "__playgroundCode": "loading"
+          },
+          "value": {
+            "__playgroundCode": "selected"
+          },
+          "onInputChange": "(text, { reason }) => setQuery(reason === 'input' ? text : '')",
+          "onSelect": "(option) => { setSelected(option); setQuery('') }"
+        },
+        "externalImports": [
+          "import React, { useEffect, useState } from 'react'"
+        ],
+        "wrapper": "const ExternalDropdownPlayground = () => {\n  const [query, setQuery] = useState('')\n  const [options, setOptions] = useState([])\n  const [loading, setLoading] = useState(false)\n  const [selected, setSelected] = useState(null)\n\n  useEffect(() => {\n    const controller = new AbortController()\n    setOptions([])\n    setLoading(false)\n    if (query.length < 3) return () => controller.abort()\n    setLoading(true)\n    const timer = setTimeout(() => {\n      const params = new URLSearchParams({ q: query, limit: '10', select: 'firstName,lastName' })\n      fetch(`https://dummyjson.com/users/search?${params}`, { signal: controller.signal, credentials: 'omit' })\n        .then((response) => {\n          if (!response.ok) throw new Error('Search failed')\n          return response.json()\n        })\n        .then(({ users }) => {\n          if (!controller.signal.aborted) setOptions(users.map((user) => ({\n            ...user,\n            label: `${user.firstName} ${user.lastName}`,\n            value: user.id,\n          })))\n        })\n        .catch(() => { if (!controller.signal.aborted) setOptions([]) })\n        .finally(() => { if (!controller.signal.aborted) setLoading(false) })\n    }, 250)\n    return () => { clearTimeout(timer); controller.abort() }\n  }, [query])\n\n  return ({{component}})\n};\n\n<ExternalDropdownPlayground />"
+      },
       "subcomponents": {
         "label": "With Subcomponents",
-        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>",
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}}>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>",
         "children": ""
       }
     }
   },
+  "editableFunctionProps": ["loadOptions", "renderOption", "onInputChange", "onSelect"],
+  "propTargets": { "searchbar": "Container.props", "options": "Options.data" },
   "customProps": {
+  "loadOptions": {
+    "type": "function",
+    "platforms": [
+      "react"
+    ],
+    "description": "Promise or callback loader. Receives the search term; return options with id, label, and value plus any custom data."
+  },
+  "searchbar": {
+    "type": "boolean",
+    "default": false,
+    "platforms": [
+      "react"
+    ],
+    "description": "Show a search input inside Dropdown.Container. Turn autocomplete off to try this mode."
+  },
     "options": {
       "type": "array",
       "platforms": ["react", "rails"],
@@ -66,6 +162,20 @@
     "variant": "default"
   },
   "groups": [
+    {
+      "name": "async search",
+      "props": [
+        "async",
+        "loadOptions",
+        "defaultOptions",
+        "cacheOptions",
+        "loading",
+        "onInputChange",
+        "renderOption",
+        "value",
+        "searchbar"
+      ]
+    },
     {
       "name": "Content",
       "props": [
@@ -116,6 +226,26 @@
     }
   ],
   "presets": [
+    {
+      "name": "Async search",
+      "structureMode": "async",
+      "props": {}
+    },
+    {
+      "name": "Rich results and selection",
+      "structureMode": "rich",
+      "props": {}
+    },
+    {
+      "name": "Controlled selection",
+      "structureMode": "controlled",
+      "props": {}
+    },
+    {
+      "name": "External search",
+      "structureMode": "external",
+      "props": {}
+    },
     {
       "name": "Default trigger",
       "props": {
@@ -244,6 +374,11 @@
     }
   ],
   "conditionals": {
+    "loadOptions": { "requires": "async" },
+    "defaultOptions": { "requires": "async" },
+    "cacheOptions": { "requires": "async" },
+    "loading": { "requires": "async" },
+    "searchbar": { "structureMode": "async" },
     "requiredIndicator": { "requires": "label" },
     "formPillProps": { "requires": "multiSelect" },
     "rangeEndsToday": { "requires": { "variant": "quickpick" } },
@@ -252,6 +387,23 @@
     "customQuickPickDates": { "requires": { "variant": "quickpick" } }
   },
   "hints": {
+    "async_search_info": {
+      "when": {
+        "async": true
+      },
+      "message": "Async examples search the public DummyJSON sample-user API. Try Emily or Michael, or an unmatched term for the empty state. defaultOptions preloads results; cacheOptions reuses successful searches. Use the Async search structure with autocomplete off and searchbar on to search inside the menu.",
+      "type": "info"
+    },
+    "external_search_info": {
+      "presetName": "External search",
+      "message": "The wrapper owns a 250ms debounce, a three-character minimum, request cancellation, options, and loading. onInputChange reports input/clear; onSelect receives the complete option. Inspect the generated code for the integration.",
+      "type": "info"
+    },
+    "rich_results_info": {
+      "presetName": "Rich results and selection",
+      "message": "renderOption customizes results; the existing Trigger customDisplay renders selected company details. The selected option shown below retains custom company data.",
+      "type": "info"
+    },
     "quickpick_scope": {
       "when": { "variant": "quickpick" },
       "message": "Quick pick uses preset date-range options. Use customQuickPickDates to replace or extend them, and pair controlsStartId / controlsEndId with DatePicker when you need synced date inputs.",
@@ -263,7 +415,7 @@
       "type": "info"
     },
     "autocomplete_info": {
-      "when": { "autocomplete": true },
+      "when": { "autocomplete": true, "async": false },
       "message": "Autocomplete filters the provided options list in place. It works especially well with longer option sets.",
       "type": "info"
     },

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

@@ -25,6 +25,7 @@ examples:
   - dropdown_default_value_with_autocomplete: Default Value with Autocomplete
   - dropdown_blank_selection: Blank Selection
   - dropdown_with_placeholder: Placeholder
+  - dropdown_no_options_text: No Options Text
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_clearable: Clearable
   - dropdown_with_constrain_height_rails: Constrain Height
@@ -35,6 +36,7 @@ examples:
   - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
+  - dropdown_quickpick_enable_time: Quick Pick with Date Pickers (Enable Time)
   - dropdown_required_indicator: Required Indicator
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
@@ -42,10 +44,14 @@ examples:
   - dropdown_dynamic_options: Dynamic Options
   - dropdown_dynamic_options_with_autocomplete: Dynamic Options with Autocomplete
   - dropdown_dynamic_options_with_multi_select: Dynamic Options with Multi Select
+  - dropdown_async_search: Async Search
+  - dropdown_async_multi_select_rails: Async Multi Select
+  - dropdown_async_custom_content: Async Search with Custom Content
 
   react:
   - dropdown_default: Default
   - dropdown_with_autocomplete: Autocomplete
+  - dropdown_with_highlight: With Highlight
   - dropdown_multi_select: Multi Select
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display: Multi Select with Form Pill Props
@@ -70,6 +76,7 @@ examples:
   - dropdown_default_value_with_autocomplete: Default Value with Autocomplete
   - dropdown_blank_selection: Blank Selection
   - dropdown_with_placeholder: Placeholder
+  - dropdown_no_options_text: No Options Text
   - dropdown_clear_selection: Clear Selection
   - dropdown_with_clearable: Clearable
   - dropdown_with_constrain_height: Constrain Height
@@ -81,9 +88,16 @@ examples:
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
   - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
+  - dropdown_quickpick_enable_time: Quick Pick with Date Pickers (Enable Time)
   - dropdown_required_indicator: Required Indicator
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
   - dropdown_react_hook: React Hook
   - dropdown_multi_select_react_hook: React Hook Multi Select
+  - dropdown_controlled_selection: Controlled Selection
+  - dropdown_async_loading: Async Search
+  - dropdown_async_multi_select: Async Multi Select
+  - dropdown_async_rich_results: Async Search with Custom Content
+  - dropdown_async_initial_options: Async Initial Results and Caching
+  - dropdown_external_search: External Search
 

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

@@ -40,3 +40,12 @@ export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_cust
 export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";
 export { default as DropdownGroupedOptions } from "./_dropdown_grouped_options.jsx";
 export { default as DropdownDefaultValueWithAutocomplete } from './_dropdown_default_value_with_autocomplete.jsx'
+export { default as DropdownNoOptionsText } from './_dropdown_no_options_text.jsx'
+export { default as DropdownControlledSelection } from './_dropdown_controlled_selection.jsx'
+export { default as DropdownAsyncLoading } from './_dropdown_async_loading.jsx'
+export { default as DropdownAsyncMultiSelect } from './_dropdown_async_multi_select.jsx'
+export { default as DropdownAsyncRichResults } from './_dropdown_async_rich_results.jsx'
+export { default as DropdownAsyncInitialOptions } from './_dropdown_async_initial_options.jsx'
+export { default as DropdownExternalSearch } from './_dropdown_external_search.jsx'
+export { default as DropdownQuickpickEnableTime } from './_dropdown_quickpick_enable_time.jsx'
+export { default as DropdownWithHighlight } from './_dropdown_with_highlight.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -15,6 +15,9 @@
             <% if input_default_value.present? %>
             data-default-value="<%= input_default_value %>"
             <% end %>
+            <% if object.validation_message.present? %>
+            data-message="<%= object.validation_message %>"
+            <% end %>
             data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"
@@ -32,7 +35,7 @@
             <% end %>
         <% else %>
             <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, disabled: object.disabled, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
-            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height, disabled: object.disabled }) do %>
+            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height, disabled: object.disabled, no_options_text: object.no_options_text }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>