playbook_ui 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713 → 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,9 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.sticky_header,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    class: object.sticky_header) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 

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

@@ -13,15 +13,15 @@
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
-      box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
+      height: 45px;
       @media (hover: hover) {
         &:hover,
         &:active,
         &:focus {
           background-color: $focus_input_light;
-        }
-        input {
-          background-color: $focus_input_light;
+          input {
+            background-color: $focus_input_light;
+          }
         }
       }
 
@@ -30,7 +30,7 @@
         border: unset;
         border-radius: $border_rad_heavier;
         padding: 0;
-
+        background-color: $white;
         &:focus-visible {
           outline: none;
         }
@@ -42,9 +42,13 @@
       }
     }
 
+    .dropdown_trigger_wrapper_select_only {
+      box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
+    }
+
     .dropdown_trigger_wrapper_focus {
       box-shadow: 0px 0px 0 1px $primary;
-      transition: box-shadow .10s ease-in-out;
+      transition: box-shadow 0.1s ease-in-out;
     }
 
     .pb_dropdown_container {
@@ -60,7 +64,8 @@
       transition: opacity 0.25s ease-in-out;
 
       .pb_dropdown_option {
-        :hover {
+        cursor: pointer;
+        &:hover {
           background-color: $border_light;
         }
       }
@@ -82,8 +87,8 @@
         [class^="pb_title_kit"] {
           color: $white !important;
         }
-        :hover {
-          background-color: unset;
+        &:hover {
+          background-color: $primary !important;
         }
       }
     }

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, ReactElement } from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
@@ -22,6 +22,7 @@ type DropdownProps = {
   autocomplete?: boolean;
   className?: string;
   data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   children?: React.ReactChild[] | React.ReactChild | ReactElement[];
   options: GenericObject;
@@ -35,6 +36,7 @@ const Dropdown = (props: DropdownProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     options,
     onSelect,
@@ -42,6 +44,7 @@ const Dropdown = (props: DropdownProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown"),
     globalProps(props),
@@ -51,7 +54,7 @@ const Dropdown = (props: DropdownProps) => {
   const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown();
 
   const [filterItem, setFilterItem] = useState("");
-  const [selected, setSelected] = useState({});
+  const [selected, setSelected] = useState<GenericObject>({});
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
   const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -71,6 +74,7 @@ const Dropdown = (props: DropdownProps) => {
     const handleClickOutside = (e: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsDropDownClosed(true);
+        setFocusedOptionIndex(-1)
         setIsInputFocused(false);
       }
     };
@@ -85,6 +89,24 @@ const Dropdown = (props: DropdownProps) => {
     setHasContainerSubcomponent(!!container);
   }, []);
 
+
+  const filteredOptions = options?.filter((option: GenericObject) =>
+    option.label.toLowerCase().includes(filterItem.toLowerCase())
+  );
+
+  useEffect(() => {
+    if (!isDropDownClosed) { 
+        let newIndex = 0; 
+        if (selected && selected?.label) {
+            const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
+            if (selectedIndex >= 0) {
+                newIndex = selectedIndex;
+            }
+        }
+        setFocusedOptionIndex(newIndex);
+    }
+}, [isDropDownClosed]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFilterItem(e.target.value);
     setIsDropDownClosed(false);
@@ -108,10 +130,6 @@ const Dropdown = (props: DropdownProps) => {
     setFocusedOptionIndex(-1);
   };
 
-  const filteredOptions = options?.filter((option: GenericObject) =>
-    option.label.toLowerCase().includes(filterItem.toLowerCase())
-  );
-
   const componentsToRender = prepareSubcomponents({
     children,
     hasTriggerSubcomponent,
@@ -124,6 +142,7 @@ const Dropdown = (props: DropdownProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
+        {...htmlProps}
         className={classes} 
         id={id}
     >
@@ -150,6 +169,15 @@ const Dropdown = (props: DropdownProps) => {
           }}
       >
         <div className="dropdown_wrapper" 
+            onBlur={() => {
+                // Debounce to delay the execution to prevent jumpiness in Focus state
+                setTimeout(() => {
+                    if (!dropdownRef.current.contains(document.activeElement)) {
+                        setIsInputFocused(false);
+                    }
+                }, 0);
+            }}
+            onFocus={() => setIsInputFocused(true)}
             ref={dropdownRef}
         >
           {children ? (

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

@@ -14,11 +14,11 @@ const [selectedOption, setSelectedOption] = useState();
       id: "United-states"
     },
     {
-      label: "Ukraine",
-      value: "Ukraine",
-      areaCode: "+380",
-      icon: "🇺🇦",
-      id: "ukraine"
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
     },
     {
       label: "Pakistan",

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

@@ -0,0 +1,87 @@
+import React, { useState } from 'react'
+import { Dropdown, User, Badge, FlexItem } from '../..'
+
+const DropdownWithAutocomplete = (props) => {
+// eslint-disable-next-line no-unused-vars
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Senior UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Desinger",
+      id: "ramon-ruiz",
+      status: "Away"
+    },
+    {
+      label: "Jason Cypret",
+      value: "Jason Cypret",
+      territory: "PHL",
+      title: "VP of User Experience",
+      id: "jason-cypret",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "UX Design Mentor",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+
+  return (
+  <div>
+    <Dropdown autocomplete
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        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>
+  )
+}
+
+export default  DropdownWithAutocomplete

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

@@ -0,0 +1 @@
+The `autocomplete` prop can be used to add autocomplete or typeahead functionality to the Dropdown's default Trigger. This prop is set to 'false' by default. 

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

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
+
+const DropdownWithAutocompleteAndCustomDisplay = (props) => {
+// eslint-disable-next-line no-unused-vars
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Senior UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Desinger",
+      id: "ramon-ruiz",
+      status: "Away"
+    },
+    {
+      label: "Jason Cypret",
+      value: "Jason Cypret",
+      territory: "PHL",
+      title: "VP of User Experience",
+      id: "jason-cypret",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "UX Design Mentor",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+  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}
+          >
+            <>
+              <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>
+  )
+}
+
+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_custom_display.jsx

@@ -39,7 +39,7 @@ const DropdownWithCustomDisplay = (props) => {
     }
   ];
 
-  const customDisplay = () => {
+  const CustomDisplay = () => {
     return (
       <>
       {
@@ -62,7 +62,9 @@ const DropdownWithCustomDisplay = (props) => {
         options={options}
         {...props}
     >
-      <Dropdown.Trigger customDisplay={customDisplay()}/>
+      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
+          placeholder="Select a User"
+      />
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}

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

@@ -0,0 +1,3 @@
+The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+
+The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 

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

@@ -14,11 +14,11 @@ const DropdownWithCustomOptions = (props) => {
       id: "United-states"
     },
     {
-      label: "Ukraine",
-      value: "Ukraine",
-      areaCode: "+380",
-      icon: "🇺🇦",
-      id: "ukraine"
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
     },
     {
       label: "Pakistan",

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

@@ -0,0 +1 @@
+The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed in the `Dropdown.Option`, the kit will render each option as text by default. 

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { Dropdown } from '../..'
+
+const DropdownWithCustomPadding = (props) => {
+// eslint-disable-next-line no-unused-vars
+const [selectedOption, setSelectedOption] = useState();
+
+  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>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id} 
+            option={option}
+            padding="sm"
+        /> 
+      ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownWithCustomPadding

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

@@ -0,0 +1 @@
+By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.

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

@@ -14,11 +14,11 @@ const [selectedOption, setSelectedOption] = useState();
       id: "United-states"
     },
     {
-      label: "Ukraine",
-      value: "Ukraine",
-      areaCode: "+380",
-      icon: "🇺🇦",
-      id: "ukraine"
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
     },
     {
       label: "Pakistan",

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

@@ -0,0 +1 @@
+The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit. 

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

@@ -6,4 +6,7 @@ examples:
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
+  - dropdown_with_autocomplete: Autocomplete
+  - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
+  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
 

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

@@ -2,3 +2,6 @@ export { default as DropdownDefault } from './_dropdown_default.jsx'
 export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
 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 DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
+export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -12,10 +12,15 @@ const {
   handleOptionClick,
   setIsDropDownClosed,
   handleBackspace,
-  selected
+  selected,
 }= useContext(DropdownContext)
 
   return (e: React.KeyboardEvent) => {
+
+    if (e.key !== "Tab" && autocomplete && selected && selected.label) {
+      handleBackspace();
+    }
+
     switch (e.key) {
     case "Backspace":
     case "Delete":
@@ -43,13 +48,13 @@ const {
         e.preventDefault();
         handleOptionClick(filteredOptions[focusedOptionIndex]);
         setFocusedOptionIndex(-1)
+      } else if (focusedOptionIndex === -1) {
+        setIsDropDownClosed(false)
       }
       break;
-    default:
-        if (selected && selected.label) {
-          e.preventDefault();
-          handleBackspace();
-        }
+      case "Tab":
+        setIsDropDownClosed(true);
+        setFocusedOptionIndex(-1)
         break;
   }
 }

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -4,6 +4,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 
@@ -19,6 +20,7 @@ type DropdownContainerProps = {
   className?: string;
   children?: React.ReactChild[] | React.ReactChild;
   data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
 };
@@ -29,6 +31,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     className,
     children,
     data = {},
+    htmlOptions = {},
     id,
     searchbar = false,
   } = props;
@@ -44,6 +47,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown_container"),
     `${isDropDownClosed ? "close" : "open"}`,
@@ -54,6 +58,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
+        {...htmlProps}
         className={classes} 
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}