playbook_ui 14.19.0.pre.alpha.PLAY21297675 → 14.19.0.pre.alpha.PLAY21377811

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93df013c8d48a5c077ccdb15133ab4682b05d667db94eba9bdd6e8accba7d472
-  data.tar.gz: '085bc5dffd842ea4fc4fe35f8579b517523ad0e02f6b9692fe33faecbf6b9284'
+  metadata.gz: 5e3cef0436d45ddc7db0c5a43cd08231dca01397143bb6b165b064a62531527c
+  data.tar.gz: 760ebb338693dff4549a55d3ff38d7f8ffca698b23f916449e9960d2bb96b58f
 SHA512:
-  metadata.gz: 463d71189c32e8500ca647672d4202ffbfb23e0d73c068eaf50a0779752a0f91d9151bcfce121cc3050066a1a0897eb13b86b05328630aa6f5e3ee80baa50586
-  data.tar.gz: 00d153cdde95a0761c7515b5fb5de2dff87d10cb7f7e1e16e2f092bee31f1110ed713c6c3599fb57fb11bc347800f6bb1510798990904ad84629580d42a427e4
+  metadata.gz: 88b34b166112f11627a7ff072f529b2c2840e389c59abcf3ff237b94d1ace1bf18217c5b154340d76e4abac08b3ed22c4ac194b9fe4da80f9d55fcf2fffdb0c9
+  data.tar.gz: e77a82b26eea3ea8de2874c6717ee31c75e152581e68ef15021a22bf3e23761c60a2aa488500ac5bab31f2919903d4b4dd5f8606003d912ee015460e0290e000

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,

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,7 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
     defaultValue?: GenericObject;
@@ -33,6 +34,7 @@ type DropdownProps = {
     id?: string;
     isClosed?: boolean;
     label?: string;
+    multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
@@ -61,6 +63,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         id,
         isClosed = true,
         label,
+        multiSelect = false,
+        formPillProps,
         onSelect,
         options,
         separators = true,
@@ -80,7 +84,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] =
@@ -93,6 +110,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | 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);
 
@@ -124,16 +147,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;
@@ -149,12 +179,27 @@ 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("");
+                   setIsDropDownClosed(true);
+               } else {
+                   setSelected(clickedItem);
+                   setFilterItem("");
+                   setIsDropDownClosed(true);
+                   onSelect && onSelect(clickedItem);
+            }
+             };
 
     const handleWrapperClick = () => {
         autocomplete && inputRef?.current?.focus();
@@ -162,9 +207,14 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     };
 
     const handleBackspace = () => {
+      if (multiSelect) {
+        setSelected([]);
+        onSelect && onSelect([]);
+      } else {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
+      }
     };
 
     const componentsToRender = prepareSubcomponents({
@@ -178,12 +228,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 (
@@ -201,6 +256,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     filteredOptions,
                     filterItem,
                     focusedOptionIndex,
+                    formPillProps,
                     handleBackspace,
                     handleChange,
                     handleOptionClick,
@@ -209,6 +265,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
+                    multiSelect,
+                    onSelect,
                     optionsWithBlankSelection,
                     selected,
                     setFocusedOptionIndex,

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_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,
+}) %>

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownMultiSelectWithAutocomplete = (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
+        autocomplete
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownMultiSelectWithAutocomplete

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

@@ -0,0 +1 @@
+`multiSelect` can also be used with the `autocomplete` functionality.

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

@@ -0,0 +1,50 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { options: options, multi_select: true }) do %>
+    <%= pb_rails("dropdown/dropdown_trigger", props:{ multi_select: true }) %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,105 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+
+const DropdownMultiSelectWithCustomOptions = (props) => {
+
+ 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"
+    },
+    {
+      label: "India",
+      value: "India",
+      areaCode: "+91",
+      icon: "🇮🇳",
+      id: "india"
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+      areaCode: "+61",
+      icon: "🇦🇺",
+      id: "australia"
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+      areaCode: "+64",
+      icon: "🇳🇿",
+      id: "new-zealand"
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+      areaCode: "+39",
+      icon: "🇮🇹",
+      id: "italy"
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+      areaCode: "+34",
+      icon: "🇪🇸",
+      id: "spain"
+    }
+  ];  
+
+  return (
+  <div>
+    <Dropdown
+        multiSelect
+        options={options}
+        {...props}
+    >
+    {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <Flex
+                align="center"
+                justify="between"
+            >
+              <FlexItem>
+                <Flex>
+                  <Icon icon={option.icon} 
+                      paddingRight="xs"
+                  />
+                  <Body text={option.label} />
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Body color="light" 
+                    text={option.areaCode} 
+                />
+              </FlexItem>
+            </Flex>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownMultiSelectWithCustomOptions