playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2127dropdowncloseonselectionpropreact8006

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

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

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

@@ -15,7 +15,7 @@
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
-      height: 45px;
+      min-height: 45px;
       @media (hover: hover) {
         &:hover,
         &:active,
@@ -41,6 +41,11 @@
         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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, useMemo } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -25,6 +25,8 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    closeOnSelection?: boolean;
+    formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
     defaultValue?: GenericObject;
@@ -33,10 +35,10 @@ type DropdownProps = {
     id?: string;
     isClosed?: boolean;
     label?: string;
+    multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
-    triggerRef?: any;
     variant?: "default" | "subtle";
 };
 
@@ -54,6 +56,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        closeOnSelection = true,
         dark = false,
         data = {},
         defaultValue = {},
@@ -62,10 +65,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         id,
         isClosed = true,
         label,
+        multiSelect = false,
+        formPillProps,
         onSelect,
         options,
         separators = true,
-        triggerRef,
         variant = "default",
     } = props;
 
@@ -82,7 +86,20 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const [selected, setSelected] = useState<GenericObject>(defaultValue);
+    const initialSelected = useMemo(() => {
+      if (multiSelect) {
+        if (Array.isArray(defaultValue)) return defaultValue;
+        return defaultValue && Object.keys(defaultValue).length
+          ? [defaultValue]
+          : [];
+      }
+      return defaultValue || {};
+    }, [multiSelect, defaultValue]);
+
+    const [selected, setSelected] = useState<GenericObject | GenericObject[]>(
+      initialSelected
+    );
+
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -91,23 +108,21 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
 
     const dropdownRef = useRef(null);
-    const inputRef = useRef(null);
+    const inputRef = useRef<HTMLInputElement>(null);
     const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
+    const selectedArray = Array.isArray(selected)
+    ? selected
+    : selected && Object.keys(selected).length
+    ? [selected]
+    : [];
+
     const { trigger, container, otherChildren } =
         separateChildComponents(children);
 
     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
+     // Handle clicks outside the dropdown
         const handleClick = handleClickOutside({
             inputWrapperRef,
             dropdownContainerRef,
@@ -134,16 +149,23 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
     const optionsWithBlankSelection = blankSelectionOption.concat(options);
-    const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
-        const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
-        return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });
+
+    const availableOptions = useMemo(()=> {
+        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())
+          );
+        }, [availableOptions, filterItem]);
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
         if (!isDropDownClosed) {
             let newIndex = 0;
-            if (selected && selected?.label) {
+            if (selected && !Array.isArray(selected) && selected.label) {
                 const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
                 if (selectedIndex >= 0) {
                     newIndex = selectedIndex;
@@ -159,22 +181,48 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setIsDropDownClosed(false);
     };
 
-    const handleOptionClick = (selectedItem: GenericObject) => {
-        setSelected(selectedItem);
-        setFilterItem("");
-        setIsDropDownClosed(true);
-        onSelect && onSelect(selectedItem);
-    };
+
+      const handleOptionClick = (clickedItem: GenericObject) => {
+                if (multiSelect) {
+                    setSelected((prev) => {
+                       const list = prev as GenericObject[];
+                       const exists = list.find((option) => option.value === clickedItem.value);
+                       const next = exists
+                       ? list.filter((option) => option.value !== clickedItem.value)
+                           : [...list, clickedItem];
+                   onSelect && onSelect(next);
+                       return next;
+                   });
+                   setFilterItem("");
+                   // Only close dropdown if closeOnSelection is true
+                   if (closeOnSelection) {
+                       setIsDropDownClosed(true);
+                   }
+               } else {
+                   setSelected(clickedItem);
+                   setFilterItem("");
+                   onSelect && onSelect(clickedItem);
+                   // Only close dropdown if closeOnSelection is true
+                   if (closeOnSelection) {
+                       setIsDropDownClosed(true);
+                   }
+            }
+             };
 
     const handleWrapperClick = () => {
-        autocomplete && inputRef.current.focus();
+        autocomplete && inputRef?.current?.focus();
         toggleDropdown();
     };
 
     const handleBackspace = () => {
+      if (multiSelect) {
+        setSelected([]);
+        onSelect && onSelect([]);
+      } else {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
+      }
     };
 
     const componentsToRender = prepareSubcomponents({
@@ -188,12 +236,17 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     });
 
     useImperativeHandle(ref, () => ({
-        clearSelected: () => {
-            setSelected({});
-            setFilterItem("");
-            setIsDropDownClosed(true);
-            onSelect && onSelect(null);
-        },
+      clearSelected: () => {
+        if (multiSelect) {
+          setSelected([]);
+          onSelect && onSelect([]);
+        } else {
+          setSelected({});
+          onSelect && onSelect(null);
+        }
+        setFilterItem("");
+        setIsDropDownClosed(true);
+      },
     }));
 
     return (
@@ -202,15 +255,17 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             {...htmlProps}
             className={classes}
             id={id}
-            style={triggerRef ? { position: "absolute" } : { position: "relative" }}
+            style={{position: "relative"}}
         >
             <DropdownContext.Provider
                 value={{
                     autocomplete,
+                    closeOnSelection,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,
                     focusedOptionIndex,
+                    formPillProps,
                     handleBackspace,
                     handleChange,
                     handleOptionClick,
@@ -219,14 +274,15 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
+                    multiSelect,
+                    onSelect,
                     optionsWithBlankSelection,
                     selected,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
                     setIsInputFocused,
                     setSelected,
-                    toggleDropdown,
-                    triggerRef
+                    toggleDropdown
                 }}
             >
                 {label &&

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownCloseOnSelect = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+
+
+  return (
+  <div>
+    <Dropdown
+        closeOnSelection={false}
+        label="Default"
+        options={options}
+        {...props}
+    />
+    <br />
+    <Dropdown
+        closeOnSelection={false}
+        label="Multi Select"
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownCloseOnSelect

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

@@ -0,0 +1 @@
+By default, the dropdown menu will close when a selection is made. You can prevent this behavior by using the `closeOnSelection` prop, which will leave the menu open after a selection is made when set to 'false'.

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

@@ -0,0 +1,31 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<% 
+  options2 = [
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'Mexico', value: 'Mexico', id: 'mx' },
+    { label: 'Brazil', value: 'Brazil', id: 'br' },
+    { label: 'Argentina', value: 'Argentina', id: 'ar' },
+    { label: 'Colombia', value: 'Colombia', id: 'co' },
+    { label: 'Chile', value: 'Chile', id: 'cl' },
+    { label: 'Peru', value: 'Peru', id: 'pe' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) %>
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    const option   = e.detail;
+    const dropdown = e.target;
+    console.log("Selected option:", option);
+})
+</script>

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

@@ -0,0 +1,5 @@
+This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each MUST contain `label`, `value` and `id`. 
+
+The kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
+
+In addition, a data attribute called `data-option-selected` with the selection is also rendered on the parent dropdown div.

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,4 +6,7 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>
+<%= pb_rails("dropdown", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  options: options
+}) %>

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownMultiSelect = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+        label: "United Kingdom",
+        value: "United Kingdom",
+    },  
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    },
+    {
+      label: "India",
+      value: "India",
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+    }
+  ];  
+
+  return (
+  <div>
+    <Dropdown
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownMultiSelect

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

@@ -0,0 +1,3 @@
+`multiSelect` is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown.
+
+`multiSelect` is set to false by default.

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownMultiSelectDisplay = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+        label: "United Kingdom",
+        value: "United Kingdom",
+    },  
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    },
+    {
+      label: "India",
+      value: "India",
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        formPillProps={{size:"small", color:"neutral"}}
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownMultiSelectDisplay

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

@@ -0,0 +1,3 @@
+By default, the `multiSelect` prop will render selected options as the default FormPill. `FormPillProps` however can be used to customize these Pills with any props that exist for the FormPill. 
+
+This prop must be an object that contains valid FormPill props. For a full list of FormPill props, see [here](https://playbook.powerapp.cloud/kits/form_pill/react).

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

@@ -0,0 +1,20 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  options: options,
+  multi_select: true,
+  form_pill_props: { size:"small", color:"neutral" },
+}) %>

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

@@ -0,0 +1 @@
+By default, the `multi_select` prop will render selected options as the default form_pill. `form_pill_props` however can be used to customize these Pills with props that exist for the form_pill. Currently, only the '[color](https://playbook.powerapp.cloud/kits/form_pill/rails#form-pill-colors)' and '[size](https://playbook.powerapp.cloud/kits/form_pill/rails#form-pill-size)' props are supported as shown here.

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

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  options: options,
+  multi_select: true,
+}) %>

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

@@ -0,0 +1,3 @@
+`multi_select` is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown.
+
+`multi_select` is set to false by default.

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

@@ -0,0 +1,20 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  autocomplete: true,
+  options: options,
+  multi_select: true,
+}) %>