playbook_ui 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
   <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
 <% end %>

data/app/pb_kits/playbook/pb_detail/detail.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -235,11 +235,11 @@
           height: $space_xl * 2;
         }
         .dialog_footer {
-          position: fixed;
+          position:fixed;
           bottom: 0;
           background-color: $white;
-          max-width: 100%;
         }
+
         &[class*="_sm"] {
           width: $medium;
           .dialog_footer {
@@ -319,7 +319,6 @@
         position:fixed;
         bottom: 0;
         background-color: $white;
-        max-width: 100%;
       }
       &[class*="_sm"] {
         width: $medium;
@@ -373,4 +372,3 @@
     cursor: pointer;
   }
 }
-

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

@@ -1,5 +1,10 @@
 <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
-    <%= pb_content_tag(:dialog) do %>
+    <%= content_tag(:dialog,
+        aria: object.aria,
+        data: object.data,
+        id: object.id,
+        class: object.classname,
+        **combined_html_options) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

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

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
-  <%= content.presence || object.text %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
+        <%= content.presence || object.text %>
 <% end %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria,
+    **combined_html_options) 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,5 +1,9 @@
-<%= pb_content_tag(:div,
-    class: object.sticky_header) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.sticky_header,
+    aria: object.aria,
+    **combined_html_options) 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

@@ -5,51 +5,46 @@
 @import "../tokens/shadows";
 @import "../tokens/positioning";
 @import "../pb_body/body_mixins";
-@import "../pb_textarea/textarea_mixin";
-
-@import "./scss_partials/dropdown_animation";
 
 .pb_dropdown {
   .dropdown_wrapper {
-    [class*="dropdown_trigger_wrapper"] {
+    position: relative;
+    .dropdown_trigger_wrapper {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
-      height: 45px;
+      box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
       @media (hover: hover) {
         &:hover,
         &:active,
         &:focus {
           background-color: $focus_input_light;
-          input {
-            background-color: $focus_input_light;
-          }
+        }
+        input {
+          background-color: $focus_input_light;
         }
       }
 
       .dropdown_input {
         @include pb_body;
         border: unset;
+        border-radius: $border_rad_heavier;
         padding: 0;
-        background-color: $white;
+
         &:focus-visible {
           outline: none;
         }
       }
       &:focus {
-        box-shadow: 0px 0px 0 1px $primary !important;
+        box-shadow: 0px 0px 0 1px $primary;
         outline: unset;
         transition: box-shadow 0.15s ease-in-out;
       }
+    }
 
-      &[class*="_select_only"] {
-        box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-      }
-
-      &[class*="_focus"] {
-        box-shadow: 0px 0px 0 1px $primary !important;
-        transition: box-shadow 0.1s ease-in-out;
-      }
+    .dropdown_trigger_wrapper_focus {
+      box-shadow: 0px 0px 0 1px $primary;
+      transition: box-shadow .10s ease-in-out;
     }
 
     .pb_dropdown_container {
@@ -59,106 +54,45 @@
       border-radius: $border_rad_heavier;
       border: 1px solid $border_light;
       margin-top: $space_xs;
+      position: absolute;
       z-index: $z_1;
       width: 100%;
+      transition: opacity 0.25s ease-in-out;
 
-      [class*="pb_dropdown_option"] {
-        cursor: pointer;
-        &:hover {
-          background-color: $border_light;
-        }
-
-        &[class*="_focused"] {
+      .pb_dropdown_option {
+        :hover {
           background-color: $border_light;
         }
+      }
 
-        &[class*="_list"] {
-          border-bottom: 1px solid $border_light;
-        }
-        &[class*="selected"] {
-          background-color: $primary;
-          [class^="pb_body"],
-          [class^="pb_title_kit"] {
-            color: $white !important;
-          }
-          &:hover {
-            background-color: $primary !important;
-          }
-        }
+      .dropdown_option_focused {
+        background-color: $border_light;
       }
 
-      .dropdown_option_wrapper {
+      .dropdown_option {
         width: 100%;
       }
-    }
-    .close {
-      display: none;
-      animation-name: fadeOut;
-      animation-duration: 150ms;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-    }
-
-    .open {
-      display: block;
-      animation-name: fadeIn;
-      animation-duration: 150ms;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-    }
-  }
 
-  &.dark {
-    .dropdown_wrapper {
-      [class*="dropdown_trigger_wrapper"] {
-        @include pb_body_light_dark;
-        background-color: rgba($white, 0.1) !important;
-        background: none;
-        border-color: rgba($white, 0.15);
-        @media (hover: hover) {
-          &:hover,
-          &:active,
-          &:focus {
-            background-color: rgba($white, 0.05) !important;
-          }
-        }
-        [class^="pb_body"] {
-          color: $white;
-        }
-        &[class*="_select_only"] {
-          box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+      .dropdown_option_list {
+        border-bottom: 1px solid $border_light;
+      }
+      .dropdown_option_selected {
+        background-color: $primary;
+        [class^="pb_body"],
+        [class^="pb_title_kit"] {
+          color: $white !important;
         }
-        .dropdown_input {
+        :hover {
           background-color: unset;
-          color: $white;
         }
       }
     }
-    .pb_dropdown_container {
-      background-color: $bg_dark !important;
-      border-color: rgba($white, 0.15);
-      color: $white;
-      [class^="pb_body"],
-      [class^="pb_title_kit"] {
-        color: $white !important;
-      }
-
-      [class*="pb_dropdown_option"] {
-        &:hover {
-          background-color: $hover_dark;
-        }
-
-        &[class*="_focused"] {
-          background-color: $hover_dark;
-        }
+    .close {
+      display: none;
+    }
 
-        &[class*="_list"] {
-          border-color: rgba($white, 0.15);
-        }
-        &[class*="selected"] {
-          background-color: $primary;
-        }
-      }
+    .open {
+      display: block;
     }
   }
 }

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

@@ -1,38 +1,31 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, ReactElement } from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import { GenericObject } from "../types";
 
 import Body from "../pb_body/_body";
-import Caption from "../pb_caption/_caption";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
-import DropdownContext from "./context";
 import DropdownOption from "./subcomponents/DropdownOption";
 import DropdownTrigger from "./subcomponents/DropdownTrigger";
+import DropdownContext from "./context";
 import useDropdown from "./hooks/useDropdown";
 
 import {
   separateChildComponents,
   prepareSubcomponents,
-  handleClickOutside,
-} from "./utilities";
+} from "./utilities/subComponentHelper";
+import { GenericObject } from "../types";
 
 type DropdownProps = {
   aria?: { [key: string]: string };
   autocomplete?: boolean;
-  children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
   className?: string;
-  dark?: boolean;
   data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  isClosed?: boolean;
-  label?: string;
-  onSelect?: (arg: GenericObject) => null;
+  children?: React.ReactChild[] | React.ReactChild | ReactElement[];
   options: GenericObject;
-  triggerRef?: any;
+  onSelect?: (arg: GenericObject) => null;
 };
 
 const Dropdown = (props: DropdownProps) => {
@@ -41,66 +34,49 @@ const Dropdown = (props: DropdownProps) => {
     autocomplete = false,
     children,
     className,
-    dark = false,
     data = {},
-    htmlOptions = {},
     id,
-    isClosed = true,
-    label,
-    onSelect,
     options,
-    triggerRef
+    onSelect,
   } = props;
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown"),
     globalProps(props),
     className
   );
 
-  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
+  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown();
 
   const [filterItem, setFilterItem] = useState("");
-  const [selected, setSelected] = useState<GenericObject>({});
+  const [selected, setSelected] = useState({});
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
   const [hasContainerSubcomponent, setHasContainerSubcomponent] =
     useState(true);
+
   //state for keyboard events
   const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
 
   const dropdownRef = useRef(null);
   const inputRef = useRef(null);
-  const inputWrapperRef = useRef(null);
-  const dropdownContainerRef = useRef(null);
 
   const { trigger, container, otherChildren } =
     separateChildComponents(children);
 
+  // useEffect to handle clicks outside the dropdown
   useEffect(() => {
-    // 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';
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsDropDownClosed(true);
+        setIsInputFocused(false);
       }
-  }
-  // Handle clicks outside the dropdown
-  const handleClick = handleClickOutside({
-    inputWrapperRef,
-    dropdownContainerRef,
-    setIsDropDownClosed,
-    setFocusedOptionIndex,
-    setIsInputFocused,
-  });
-  
-    window.addEventListener("click", handleClick);
+    };
+    window.addEventListener("click", handleClickOutside);
     return () => {
-      window.removeEventListener("click", handleClick);
+      window.removeEventListener("click", handleClickOutside);
     };
   }, []);
 
@@ -109,30 +85,6 @@ const Dropdown = (props: DropdownProps) => {
     setHasContainerSubcomponent(!!container);
   }, []);
 
-// dropdown to toggle with external control
-  useEffect(()=> {
-    setIsDropDownClosed(isClosed)
-   },[isClosed])
-
-  const filteredOptions = options?.filter((option: GenericObject) =>
-    option.label.toLowerCase().includes(filterItem.toLowerCase())
-  );
-
-// For keyboard accessibility: Set focus within dropdown to selected item if it exists
-  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);
@@ -142,7 +94,7 @@ const Dropdown = (props: DropdownProps) => {
     setSelected(selectedItem);
     setFilterItem("");
     setIsDropDownClosed(true);
-    onSelect && onSelect(selectedItem);
+    onSelect(selectedItem);
   };
 
   const handleWrapperClick = () => {
@@ -152,10 +104,14 @@ const Dropdown = (props: DropdownProps) => {
 
   const handleBackspace = () => {
     setSelected({});
-    onSelect && onSelect(null);
+    onSelect(null);
     setFocusedOptionIndex(-1);
   };
 
+  const filteredOptions = options?.filter((option: GenericObject) =>
+    option.label.toLowerCase().includes(filterItem.toLowerCase())
+  );
+
   const componentsToRender = prepareSubcomponents({
     children,
     hasTriggerSubcomponent,
@@ -163,22 +119,17 @@ const Dropdown = (props: DropdownProps) => {
     trigger,
     container,
     otherChildren,
-    dark
   });
 
-
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
-        style={triggerRef ? { position: "absolute"} : { position: "relative"}}
     >
       <DropdownContext.Provider
           value={{
               autocomplete,
-              dropdownContainerRef,
               filteredOptions,
               filterItem,
               focusedOptionIndex,
@@ -187,7 +138,6 @@ const Dropdown = (props: DropdownProps) => {
               handleOptionClick,
               handleWrapperClick,
               inputRef,
-              inputWrapperRef,
               isDropDownClosed,
               isInputFocused,
               options,
@@ -197,26 +147,9 @@ const Dropdown = (props: DropdownProps) => {
               setIsInputFocused,
               setSelected,
               toggleDropdown,
-              triggerRef
           }}
       >
-        {label &&
-        <Caption
-            dark={dark}
-            marginBottom="xs"
-            text={label}
-        />
-        }
         <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 ? (
@@ -243,7 +176,7 @@ const Dropdown = (props: DropdownProps) => {
         </div>
       </DropdownContext.Provider>
     </div>
-  )
+  );
 };
 
 Dropdown.Option = DropdownOption;

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

@@ -1,20 +1,31 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown } from '../../'
 
 const DropdownDefault = (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",
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
     }
   ];  
 
@@ -22,9 +33,16 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
-    />
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id} 
+            option={option}
+        /> 
+      ))}
+    </Dropdown>
   </div>
   )
 }

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

@@ -17,7 +17,7 @@ const DropdownWithCustomDisplay = (props) => {
       label: "Ramon Ruiz",
       value: "Ramon Ruiz",
       territory: "PHL",
-      title: "Senior UX Designer",
+      title: "Senior UX Desinger",
       id: "ramon-ruiz",
       status: "Away"
     },
@@ -39,7 +39,7 @@ const DropdownWithCustomDisplay = (props) => {
     }
   ];
 
-  const CustomDisplay = () => {
+  const customDisplay = () => {
     return (
       <>
       {
@@ -62,9 +62,7 @@ const DropdownWithCustomDisplay = (props) => {
         options={options}
         {...props}
     >
-      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
-          placeholder="Select a User"
-      />
+      <Dropdown.Trigger customDisplay={customDisplay()}/>
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}
@@ -81,7 +79,7 @@ const DropdownWithCustomDisplay = (props) => {
                 />
               </FlexItem>
               <FlexItem>
-                <Badge dark
+                <Badge
                     rounded
                     text={option.status}
                     variant={`${

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

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
 
 const DropdownWithCustomOptions = (props) => {
+// eslint-disable-next-line no-unused-vars
+  const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
@@ -12,11 +14,11 @@ const DropdownWithCustomOptions = (props) => {
       id: "United-states"
     },
     {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",
@@ -31,6 +33,7 @@ const DropdownWithCustomOptions = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",