playbook_ui 14.22.0.pre.rc.0 → 14.22.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3237dbe64cf5d35651426b51605fc0a29d2774ace25902df2d835d3ba397cf45
-  data.tar.gz: 17dffcc35b1c8dc359a5f2e8496122e888f0981a8694642cf4b6f9b80db47095
+  metadata.gz: 5cb194ab2e45362e4433d559233b18a29cd5b355b1c87e734ec46055cb152e19
+  data.tar.gz: 9cc6498f631a1524c0f74750c81c70e32d75637cd19b1b7c70d1dc855f00b41a
 SHA512:
-  metadata.gz: 5a17f0e817d78b24d5ba66cc346f107818a57cc657134501c1062adaee813936d1a22f86dbd6ba7fc57aeb72a6bd41a3d44b11a42e4df5e3aa996c4a557e594b
-  data.tar.gz: fd82408a056f7a0fdcfeff8c9d909f07eee2a76ad9a0ecb4de81ac333eee51a5d29262f7a331737390b29c497c85dcb303b96119eeeda81e6c406910d77b66a7
+  metadata.gz: aeeb4ebd0997a5dd807f100a6bb1433274738d06994cca6d6f0b4819805677371cf979a573cf275eb40467bac57fccf4a76b2e65c7733877db657f8c841b6bdc
+  data.tar.gz: 1bd60c9e7bfcce21dd1fbacf43e9e03c5404dad0da6a688379564c50c79532241a91c56f7a47a43512a75a8b728feb23e850690f717308993909923fc47df032

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

@@ -25,7 +25,6 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    closeOnSelection?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -56,7 +55,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        closeOnSelection = true,
         dark = false,
         data = {},
         defaultValue = {},
@@ -154,7 +152,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         if (!multiSelect) return optionsWithBlankSelection;
         return optionsWithBlankSelection.filter((option: GenericObject) => !selectedArray.some((sel) => sel.label === option.label));
     }, [optionsWithBlankSelection, selectedArray, multiSelect]);
-
+    
     const filteredOptions = useMemo(() => {
           return availableOptions.filter((opt: GenericObject) =>
             String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
@@ -194,18 +192,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        return next;
                    });
                    setFilterItem("");
-                   // Only close dropdown if closeOnSelection is true
-                   if (closeOnSelection) {
-                       setIsDropDownClosed(true);
-                   }
+                   setIsDropDownClosed(true);
                } else {
                    setSelected(clickedItem);
                    setFilterItem("");
+                   setIsDropDownClosed(true);
                    onSelect && onSelect(clickedItem);
-                   // Only close dropdown if closeOnSelection is true
-                   if (closeOnSelection) {
-                       setIsDropDownClosed(true);
-                   }
             }
              };
 
@@ -260,7 +252,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             <DropdownContext.Provider
                 value={{
                     autocomplete,
-                    closeOnSelection,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,

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

@@ -44,6 +44,4 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
-  - dropdown_close_on_select: Close On Selection
-
 

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

@@ -19,5 +19,4 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
-export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'

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

@@ -25,7 +25,7 @@ type DropdownOptionProps = {
   key?: string | number;
   option?: GenericObject;
   padding?: string;
-} & GlobalProps;
+}  & GlobalProps;
 
 const DropdownOption = (props: DropdownOptionProps) => {
   const {
@@ -56,17 +56,16 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   // When multiSelect, then if an option is selected, remove from dropdown
   const isSelected = Array.isArray(selected)
-    ? selected.some((item) => item.label === option?.label)
-    : (selected as GenericObject)?.label === option?.label;
+   ? selected.some((item) => item.label === option?.label)
+   : (selected as GenericObject)?.label === option?.label;
 
+  
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
-
   const isFocused =
     focusedOptionIndex >= 0 &&
     filteredOptions[focusedOptionIndex].label === option?.label;
-
   const focusedClass = isFocused && "focused";
 
   const selectedClass = isSelected ? "selected" : "list";
@@ -92,10 +91,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
         className={classes}
         id={id}
         key={key}
-        onClick={(e) => {
-            e.stopPropagation();
-            handleOptionClick(option);
-        }}
+        onClick= {() => handleOptionClick(option)}
     >
       <ListItem
           cursor="pointer"
@@ -104,12 +100,12 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option?.label}
           padding="none"
       >
-        {children ?
+          {children ? 
           <div className="dropdown_option_wrapper">{children}</div> :
-          <Body dark={dark}
-              text={option?.label}
-          />
-        }
+              <Body dark={dark} 
+                  text={option?.label} 
+              />
+          }
       </ListItem>
     </div>
   );

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

@@ -44,7 +44,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
-    closeOnSelection,
     filterItem,
     handleBackspace,
     handleChange,
@@ -55,7 +54,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     isInputFocused,
     multiSelect,
     selected,
-    setIsDropDownClosed,
     setIsInputFocused,
     toggleDropdown,
   } = useContext(DropdownContext);
@@ -105,26 +103,11 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     ? placeholder
     : "Select...";
 
-  // Click handler that respects closeOnSelection
-  const handleInputClick = (e: React.MouseEvent) => {
-    e.stopPropagation(); // keep the wrapper's handler from firing
-    if (isDropDownClosed) {
-      // Always open if closed
-      setIsDropDownClosed(false);
-    } else if (!closeOnSelection) {
-      // Keep open if closeOnSelection is false
-      return;
-    } else {
-      // Default behavior - toggle
-      toggleDropdown();
-    }
-  };
-
   return (
-    <div {...ariaProps}
-        {...dataProps}
+    <div {...ariaProps} 
+        {...dataProps} 
         {...htmlProps}
-        className={classes}
+        className={classes} 
         id={id}
     >
       {
@@ -162,7 +145,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     {customDisplay ? (
                       <Flex align="center">
                         {customDisplay}
-                        <Body dark={dark}
+                        <Body dark={dark} 
                             paddingLeft={`${joinedLabels ? "xs" : "none"}`}
                         >
                           {customDisplayPlaceholder}
@@ -181,7 +164,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                           <input
                               className="dropdown_input"
                               onChange={handleChange}
-                              onClick={handleInputClick}
+                              onClick={(e) => {
+                                e.stopPropagation();// keep the wrapper’s handler from firing
+                                toggleDropdown();
+                              }}
                               onFocus={() => setIsInputFocused(true)}
                               onKeyDown={(e) => {
                                  handleKeyDown(e);
@@ -200,8 +186,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         )}
                         </>
                       ) : (
-                        <Body dark={dark}
-                            text={defaultDisplayPlaceholder}
+                        <Body dark={dark} 
+                            text={defaultDisplayPlaceholder} 
                         />
                       )
                     )}
@@ -209,7 +195,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={handleInputClick}
+                          onClick={(e) => {
+                            e.stopPropagation();// keep the wrapper’s handler from firing
+                            toggleDropdown();
+                          }}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -234,7 +223,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  >
+                  > 
                   {
                     selectedArray.length > 0 && (
                       <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>