playbook_ui 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619 → 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -8,7 +8,6 @@ import {
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 import { DraggableContext } from "../context";
-import { noop } from '../../utilities/object'
 
 type DraggableItemProps = {
   aria?: { [key: string]: string };
@@ -18,13 +17,6 @@ type DraggableItemProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  onDrag?: () => void,
-  onDragEnd?: () => void,
-  onDragEnter?: () => void,
-  onDragLeave?: () => void,
-  onDragOver?: () => void,
-  onDragStart?: () => void,
-  onDrop?: () => void,
   dragId?: string;
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
@@ -39,14 +31,7 @@ const DraggableItem = (props: DraggableItemProps) => {
     htmlOptions = {},
     id,
     dragId,
-    tag="div",
-    onDrag = noop,
-    onDragEnd = noop,
-    onDragEnter = noop,
-    onDragLeave = noop,
-    onDragOver = noop,
-    onDragStart = noop,
-    onDrop = noop,
+    tag="div"
   } = props;
 
   const {
@@ -76,7 +61,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   );
 
   // Enhanced drag start handler that preserves dimensions
-  const handleDragStartWithCustom = (e: React.DragEvent) => {
+  const onDragStart = (e: React.DragEvent) => {
     if (dropZone !== 'ghost' && itemRef.current) {
       // Create a clone for the drag image
       const clone = itemRef.current.cloneNode(true) as HTMLElement;
@@ -111,9 +96,6 @@ const DraggableItem = (props: DraggableItemProps) => {
 
     // Call the original handler
     handleDragStart(dragId, container);
-
-    // Custom event handler
-    onDragStart()
   };
 
   return (
@@ -125,19 +107,9 @@ const DraggableItem = (props: DraggableItemProps) => {
         draggable
         id={id}
         key={dragId}
-        onDrag={onDrag}
-        onDragEnd={() => {
-          handleDragEnd()
-          onDragEnd()
-        }}
-        onDragEnter={() => {
-          handleDragEnter(dragId, container)
-          onDragEnter()
-        }}
-        onDragLeave={onDragLeave}
-        onDragOver={onDragOver}
-        onDragStart={handleDragStartWithCustom}
-        onDrop={onDrop}
+        onDragEnd={() => handleDragEnd()}
+        onDragEnter={() => handleDragEnter(dragId, container)}
+        onDragStart={onDragStart}
         ref={itemRef}
     >
       {children}

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -41,11 +41,6 @@
         outline: unset;
         transition: box-shadow 0.15s ease-in-out;
       }
-      &:focus-within {
-        box-shadow: 0px 0px 0 1px $primary !important;
-        outline: unset;
-        transition: box-shadow 0.15s ease-in-out;
-      }
 
       &[class*="_select_only"] {
         box-shadow: inset 0 -11px 20px rgba($primary, 0.05);

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -36,6 +36,7 @@ type DropdownProps = {
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
+    triggerRef?: any;
     variant?: "default" | "subtle";
 };
 
@@ -64,6 +65,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         onSelect,
         options,
         separators = true,
+        triggerRef,
         variant = "default",
     } = props;
 
@@ -89,7 +91,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
 
     const dropdownRef = useRef(null);
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
@@ -97,7 +99,15 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         separateChildComponents(children);
 
     useEffect(() => {
-     // Handle clicks outside the dropdown
+        // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
+        //Only needed for when useDropdown hook used with external trigger
+        if (triggerRef?.current) {
+            const parentElement = triggerRef.current.parentNode;
+            if (parentElement) {
+                parentElement.style.position = 'relative';
+            }
+        }
+        // Handle clicks outside the dropdown
         const handleClick = handleClickOutside({
             inputWrapperRef,
             dropdownContainerRef,
@@ -157,7 +167,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     };
 
     const handleWrapperClick = () => {
-        autocomplete && inputRef?.current?.focus();
+        autocomplete && inputRef.current.focus();
         toggleDropdown();
     };
 
@@ -192,7 +202,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             {...htmlProps}
             className={classes}
             id={id}
-            style={{position: "relative"}}
+            style={triggerRef ? { position: "absolute" } : { position: "relative" }}
         >
             <DropdownContext.Provider
                 value={{
@@ -215,7 +225,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     setIsDropDownClosed,
                     setIsInputFocused,
                     setSelected,
-                    toggleDropdown
+                    toggleDropdown,
+                    triggerRef
                 }}
             >
                 {label &&

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,4 +1,4 @@
-<%
+<% 
   options = [
     { label: 'United States', value: 'United States', id: 'us' },
     { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,7 +6,4 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
-  options: options
-}) %>
+<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>

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

@@ -1,39 +1,86 @@
 import React from 'react'
 
 import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import User from '../../pb_user/_user'
 
 const DropdownWithAutocomplete = (props) => {
 
   const options = [
     {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
     },
     {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      areaCode: "+44",
-      icon: "🇬🇧", 
-      id: "gb"
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Away"
     },
     {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
+      label: "Carlos Lima",
+      value: "Carlos Lima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
     }
-  ]
+  ];
+
 
   return (
   <div>
     <Dropdown autocomplete
         options={options}
         {...props}
-    /> 
+    >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <>
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
   </div>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_with_subcomponents.jsx → _dropdown_with_autocomplete_and_custom_display.jsx}

@@ -1,13 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-import Dropdown from '../_dropdown'
+import Dropdown from '../../pb_dropdown/_dropdown'
 import Badge from '../../pb_badge/_badge'
-import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
 
 
-const DropdownWithAutocompleteWithSubcomponents = (props) => {
+const DropdownWithAutocompleteAndCustomDisplay = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
   const options = [
     {
       label: "Jasper Furniss",
@@ -43,21 +45,34 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     }
   ];
 
+  const CustomDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+        )
+      }
+    </>
+    )
+  };
 
   return (
   <div>
     <Dropdown autocomplete
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >
+        <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <User
                     align="left"
@@ -70,7 +85,6 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
               </FlexItem>
               <FlexItem>
                 <Badge
-                    dark
                     rounded
                     text={option.status}
                     variant={`${
@@ -82,7 +96,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
                     }`}
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
     </Dropdown>
@@ -90,4 +104,4 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
   )
 }
 
-export default  DropdownWithAutocompleteWithSubcomponents
+export default  DropdownWithAutocompleteAndCustomDisplay

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

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

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

@@ -0,0 +1,79 @@
+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

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

@@ -1,15 +1,12 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
-  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
-  - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
@@ -18,20 +15,20 @@ examples:
 
   react:
   - dropdown_default: Default
-  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
-  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
-  - dropdown_with_external_control: useDropdown Hook
+  # - dropdown_with_autocomplete: Autocomplete
+  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
+  # - dropdown_with_external_control: useDropdown Hook
+  # - dropdown_with_hook: useDropdown Hook with Any Trigger
 

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

@@ -3,10 +3,11 @@ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_di
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
 export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
-export { default as DropdownWithAutocompleteWithSubcomponents } from './_dropdown_with_autocomplete_with_subcomponents.jsx'
+export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
 export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
 export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
+export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
@@ -14,4 +15,3 @@ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.j
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
-export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'

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

@@ -14,8 +14,8 @@
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props:{autocomplete: object.autocomplete}) %>
-            <%= pb_rails("dropdown/dropdown_container", props: {searchbar: object.searchbar}) do %>
+            <%= pb_rails("dropdown/dropdown_trigger") %>
+            <%= pb_rails("dropdown/dropdown_container") do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -18,10 +18,6 @@ module Playbook
                      default: "default"
       prop :separators, type: Playbook::Props::Boolean,
                         default: true
-      prop :autocomplete, type: Playbook::Props::Boolean,
-                          default: false
-      prop :searchbar, type: Playbook::Props::Boolean,
-                       default: false
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "../utilities/test-utils"
 
-import { Dropdown, Icon, IconCircle } from 'playbook-ui'
+import { Dropdown, Icon } from 'playbook-ui'
 
 
 const testId = 'dropdown'
@@ -219,48 +219,4 @@ test('show error message', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveTextContent(errorMessage)
-})
-
-test("autocomplete prop to render input", () => {
-  render (
-    <Dropdown
-        autocomplete
-        data={{ testid: testId }}
-        options={options}
-    />   
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = kit.querySelector('.dropdown_input')
-  expect(input).toBeInTheDocument()
-})
-
-test("searchbar prop to render TextInput in container", () => {  
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    >
-      <Dropdown.Trigger>
-          <IconCircle
-              cursor="pointer"
-              icon="flag"
-              variant="royal"
-          />
-      </Dropdown.Trigger>
-      <Dropdown.Container maxWidth="xs"
-          searchbar
-      >
-      {options.map((option) => (
-      <Dropdown.Option key={option.id} 
-          option={option}
-      /> 
-    ))}
-    </Dropdown.Container>
-    </Dropdown>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const searchbar = kit.querySelector('.pb_text_input_kit')
-  expect(searchbar).toBeInTheDocument()
 })

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

@@ -1,14 +1,4 @@
 <%= pb_content_tag do %>
-    <% if object.searchbar %>
-        <%= pb_rails("text_input", props: {padding_top:"xs", padding_x:"xs"}) do %>
-            <input 
-            type="text"
-            placeholder="Search…"
-            data-dropdown-search
-            autocomplete="off"
-            />
-        <% end %>
-    <% end %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
             <% if content.present? %>
                 <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -3,9 +3,6 @@
 module Playbook
   module PbDropdown
     class DropdownContainer < Playbook::KitBase
-      prop :searchbar, type: Playbook::Props::Boolean,
-                       default: false
-
       def classname
         generate_classname("pb_dropdown_container", "close", separator: " ")
       end

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

@@ -8,7 +8,7 @@
         align: "center",
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
-        cursor: object.autocomplete ? "text" : "pointer",
+        cursor: "pointer",
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
@@ -24,17 +24,7 @@
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
-                    <% if object.autocomplete %>
-                        <input
-                            data-dropdown-autocomplete
-                            class="dropdown_input"
-                            type="text"
-                            placeholder="<%= object.placeholder || 'Select…' %>"
-                            autocomplete="off"
-                        />
-                    <% else %>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
-                    <% end %>
+                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                 <% end %>
             <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -9,8 +9,6 @@ module Playbook
                 default: ""
       prop :placeholder, type: Playbook::Props::String
       prop :custom_display
-      prop :autocomplete, type: Playbook::Props::Boolean,
-                          default: false
 
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
@@ -25,7 +23,7 @@ module Playbook
       end
 
       def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete))
+        generate_classname("dropdown_trigger_wrapper", "select_only")
       end
     end
   end