playbook_ui_docs 14.18.0.pre.alpha.PLAY20397473 → 14.18.0.pre.alpha.dropdownautocomplete7493

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.18.0.pre.alpha.PLAY20397473
+  version: 14.18.0.pre.alpha.dropdownautocomplete7493
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-01 00:00:00.000000000 Z
+date: 2025-05-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -43,6 +43,10 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
@@ -808,10 +812,12 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
@@ -828,10 +834,14 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/example.yml
 - app/pb_kits/playbook/pb_dropdown/docs/index.js
 - app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

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

@@ -1 +0,0 @@
-`autocomplete` prop can also be used in conjunction with the `customDisplay` prop.

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

@@ -1,79 +0,0 @@
-import React, { useRef } from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import useDropdown from '../../pb_dropdown/hooks/useDropdown'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-
-const DropdownWithHook = (props) => {
-const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
-const buttonRef = useRef(null);
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-  return (
-  <div>
-      <CircleIconButton
-          htmlOptions={{ref: buttonRef}}
-          icon={"flag"}
-          onClick={() => setIsDropdownClosed(!isDropDownClosed)}
-          variant="secondary"
-      />
-    <Dropdown
-        isClosed={isDropDownClosed}
-        options={options}
-        triggerRef={buttonRef}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        > 
-        <>
-          <FlexItem>
-              <Flex paddingRight='md'>
-                <Icon icon={option.icon} 
-                    paddingRight="xs"
-                />
-                <Body text={option.label} />
-              </Flex>
-          </FlexItem>
-              <FlexItem>
-                <Body color="light" 
-                    text={option.areaCode} 
-                />
-              </FlexItem>
-            </>
-        </Dropdown.Option>
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithHook