playbook_ui 14.6.0.pre.rc.15 → 14.6.0.pre.rc.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a85d84ea47e1b511c8e5fcc45bddd310d6001373522ae76e35bcde28f7be2bf4
-  data.tar.gz: 97bc4539729392e6a2df0a70fc67a30356ff62a936dcfa52f6f9b1c5761ed9b6
+  metadata.gz: 84ab1606aafdcd4bfc9c89a95163a577c361ff6b75d08f50c82ba589a15c255e
+  data.tar.gz: b503766bdb02868c3d6697694f708cd2295b54fa58b7e034b1dc97f2e193e487
 SHA512:
-  metadata.gz: 75d02da02b56ccc26a746da13527b0ec26893bcc16a03658f800e520ccfc1c8b2231745929733539eb473ec9a9200527f5164eb586f864e6c919805fd1b1d290
-  data.tar.gz: 7530e8b2cec153a53c1ae7174daad5201da4ce903b83ac13b4073f0511acad8c20c0fefaf50511b696ce140ee629dad9d0e939736b9b7c8957a0631a70ddb3e6
+  metadata.gz: c4593e305a3a9f237a3a26ecf83416dcf716f1383c1d1f22ce66c8b6131adb954c1798c207f4ac2dd7f5eb77f7a5c371b95f6610c7299a8548d42db433649cd4
+  data.tar.gz: 69a71de2cbdc8389426872a7dc2fd8eb1ba8ac6082731e96e655acaaba126dc2f0d647ea5e03f2859846364541ceee950cc6ec597f26c6850e85e5ca2ef5258c

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -38,7 +38,14 @@ type DropdownProps = {
     triggerRef?: any;
 };
 
-const Dropdown = (props: DropdownProps) => {
+interface DropdownComponent
+    extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
+    Option: typeof DropdownOption;
+    Trigger: typeof DropdownTrigger;
+    Container: typeof DropdownContainer;
+}
+
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -125,7 +132,7 @@ const Dropdown = (props: DropdownProps) => {
     const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });    
+    });
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -175,6 +182,14 @@ const Dropdown = (props: DropdownProps) => {
         dark
     });
 
+    useImperativeHandle(ref, () => ({
+        clearSelected: () => {
+            setSelected({});
+            setFilterItem("");
+            setIsDropDownClosed(true);
+            onSelect && onSelect(null);
+        },
+    }));
 
     return (
         <div {...ariaProps}
@@ -258,8 +273,9 @@ const Dropdown = (props: DropdownProps) => {
             </DropdownContext.Provider>
         </div>
     )
-};
+}) as DropdownComponent
 
+Dropdown.displayName = "Dropdown";
 Dropdown.Option = DropdownOption;
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Container = DropdownContainer;

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

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react'
+import { Button, Dropdown } from 'playbook-ui'
+
+const options = [
+    {
+        label: "United States",
+        value: "United States",
+    },
+    {
+        label: "Canada",
+        value: "Canada",
+    },
+    {
+        label: "Pakistan",
+        value: "Pakistan",
+    }
+]
+
+const DropdownClearSelection = (props) => {
+    const dropdownRef = useRef(null)
+
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+
+    return (
+        <>
+            <Dropdown
+                defaultValue={options[2]}
+                options={options}
+                ref={dropdownRef}
+                {...props}
+            />
+            <Button
+                marginTop="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+        </>
+    )
+}
+
+export default DropdownClearSelection

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

@@ -0,0 +1 @@
+To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.

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

@@ -22,6 +22,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_clear_selection: Clear Selection
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'

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

@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
-    selected.label === option.label
+    selected?.label === option.label
       ? "selected"
       : "list"
   }`;

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

@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     !autocomplete && "select_only"
   );
 
-  const customDisplayPlaceholder = selected.label ? (
+  const customDisplayPlaceholder = selected?.label ? (
     <b>{selected.label}</b>
   ) : autocomplete ? (
     ""
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
-  const defaultDisplayPlaceholder = selected.label
+  const defaultDisplayPlaceholder = selected?.label
     ? selected.label
     : autocomplete
     ? ""