playbook_ui 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 → 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71177d67df222d53293af018a05b5a4aa6e8c2320e2666e4a0fa306f9c7fa6b6
-  data.tar.gz: 4020bc3572296e4c84a58b117cd6b194d2875429baf2bcf606f5a9e2f3772b25
+  metadata.gz: 3421551f1607dca5e7327a0a79592d4159a3b09b51e58ee2ef5931e34d139899
+  data.tar.gz: 903d65b4681ad27ebb04e1395692b8194eaf04b7597f4fbe3a009e57c36f858f
 SHA512:
-  metadata.gz: b628362eb09ed93b1084e3452766c4753edda243367d3217379e4ad4b83738567931f26af432583a7d38e34dcf8085c6ae05bb6415460a8cbf5b438a25ffd603
-  data.tar.gz: 1aed46186c6455ad3e8adb45e63fe1a55358237eec9c2fd72db3b12a4a9cdbc7031099be20d38e2e79a9bedf89b74cb97a96ed4cc67b05649e5d682064bfade0
+  metadata.gz: ef84f9924ce1d67995432f1b8f5c04362f6d1f2fd1cfbc3ab36e20b34cd20fab37ef3bb28463939d6bbf3bad609a766064245b3af506888147b55f234d80fe1d
+  data.tar.gz: 9b0e28d7fe9c85e254222c57034af036e1fdd4868ca3596af0390aa61c5c92eb0d3c486b2c2825eb2d91a6eaf367d149d4d3fb64b49839edb11a8f6dd5bfe6a0

data/app/pb_kits/playbook/index.js

@@ -133,7 +133,6 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
 //Theming
 export {default as mapTheme} from './pb_map/pbMapTheme'
 export {default as useCollapsible} from './pb_collapsible/useCollapsible'
-export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
 
 // CSS Tokens
 export { default as borderRadius } from './tokens/exports/_border_radius.scss'

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

@@ -5,30 +5,11 @@
 @import "../tokens/shadows";
 @import "../tokens/positioning";
 @import "../pb_body/body_mixins";
-@import "../pb_textarea/textarea_mixin";
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
 
 .pb_dropdown {
   .dropdown_wrapper {
-    [class*=dropdown_trigger_wrapper] {
+    position: relative;
+    .dropdown_trigger_wrapper {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
@@ -59,15 +40,15 @@
         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;
-        transition: box-shadow 0.1s ease-in-out;
-      }
+    .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 0.1s ease-in-out;
     }
 
     .pb_dropdown_container {
@@ -77,8 +58,10 @@
       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;
 
       .pb_dropdown_option {
         cursor: pointer;
@@ -111,71 +94,10 @@
     }
     .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) !important;
-        }
-
-        .dropdown_input {
-          background-color: unset;
-          color: $white;
-        }
-      }
-    }
-    .pb_dropdown_container {
-      background-color: $bg_dark !important;
-      border-color: rgba($white, 0.15);
-      color: $white;
-      .dropdown_option_list {
-        border-color: rgba($white, 0.15);
-      }
-      [class^="pb_body"],
-      [class^="pb_title_kit"] {
-        color: $white !important;
-      }
-
-      .pb_dropdown_option {
-        &:hover {
-          background-color: $hover_dark;
-        }
-      }
-      .dropdown_option_focused {
-        background-color: $hover_dark;
-      }
-      .dropdown_option_selected {
-        background-color: $primary;
-      }
     }
   }
 }

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

@@ -4,7 +4,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../uti
 import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
-import Caption from "../pb_caption/_caption";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
 import DropdownOption from "./subcomponents/DropdownOption";
@@ -21,17 +20,13 @@ import { GenericObject } from "../types";
 type DropdownProps = {
   aria?: { [key: string]: string };
   autocomplete?: boolean;
-  children?: React.ReactChild[] | React.ReactChild | 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) => {
@@ -40,15 +35,11 @@ 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);
@@ -60,7 +51,7 @@ const Dropdown = (props: DropdownProps) => {
     className
   );
 
-  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
+  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown();
 
   const [filterItem, setFilterItem] = useState("");
   const [selected, setSelected] = useState<GenericObject>({});
@@ -68,49 +59,25 @@ const Dropdown = (props: DropdownProps) => {
   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';
-      }
-  }
-  // Handle clicks outside the dropdown
     const handleClickOutside = (e: MouseEvent) => {
-      let targetElement = e.target as HTMLElement;
-      let shouldClose = true;
-  
-      while (targetElement && shouldClose) {
-        //Only needed for when useDropdown hook used with external trigger
-        if (targetElement.getAttribute('data-dropdown') === 'pb-dropdown-trigger') {
-          shouldClose = false;
-        }
-        targetElement = targetElement.parentElement as HTMLElement;
-      }
-      if (
-        inputWrapperRef.current && !inputWrapperRef.current.contains(e.target) &&
-        (dropdownContainerRef.current && !dropdownContainerRef.current.contains(e.target)) &&
-        shouldClose
-      ) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsDropDownClosed(true);
-        setFocusedOptionIndex(-1);
+        setFocusedOptionIndex(-1)
         setIsInputFocused(false);
       }
     };
-  
     window.addEventListener("click", handleClickOutside);
     return () => {
       window.removeEventListener("click", handleClickOutside);
@@ -122,16 +89,11 @@ 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; 
@@ -145,7 +107,6 @@ const Dropdown = (props: DropdownProps) => {
     }
 }, [isDropDownClosed]);
 
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFilterItem(e.target.value);
     setIsDropDownClosed(false);
@@ -155,7 +116,7 @@ const Dropdown = (props: DropdownProps) => {
     setSelected(selectedItem);
     setFilterItem("");
     setIsDropDownClosed(true);
-    onSelect && onSelect(selectedItem);
+    onSelect(selectedItem);
   };
 
   const handleWrapperClick = () => {
@@ -165,7 +126,7 @@ const Dropdown = (props: DropdownProps) => {
 
   const handleBackspace = () => {
     setSelected({});
-    onSelect && onSelect(null);
+    onSelect(null);
     setFocusedOptionIndex(-1);
   };
 
@@ -176,22 +137,18 @@ 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,
@@ -200,7 +157,6 @@ const Dropdown = (props: DropdownProps) => {
               handleOptionClick,
               handleWrapperClick,
               inputRef,
-              inputWrapperRef,
               isDropDownClosed,
               isInputFocused,
               options,
@@ -210,16 +166,8 @@ 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
@@ -256,7 +204,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",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
     }
   ];  
 
@@ -22,6 +33,7 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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

@@ -1 +0,0 @@
-`options` for the Dropdown and `option` for the Dropdown.Option are the only required props for this kit. `options` must be an array of objects. Each object can contain any key/value pairs needed but 'label' and 'value' are required.

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

@@ -81,7 +81,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_display.md

@@ -1,5 +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. 
-
-The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the    `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
+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

@@ -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 = [
     {
@@ -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_padding.jsx

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown } from '../..'
 
 const DropdownWithCustomPadding = (props) => {
+// eslint-disable-next-line no-unused-vars
+const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
@@ -31,6 +33,7 @@ const DropdownWithCustomPadding = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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

@@ -3,13 +3,10 @@ examples:
   
   react:
   - dropdown_default: Default
-  - 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_autocomplete: Autocomplete
+  - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   - dropdown_with_custom_padding: Custom Padding for Dropdown Options
-  # - 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

@@ -4,7 +4,4 @@ export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_op
 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'
-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 DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'