playbook_ui 14.6.0.pre.rc.14 → 14.6.0.pre.rc.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8bbe467c31332c6411a5f034492cde278e4a8762d175d03e56396306995ae0d5
-  data.tar.gz: 9299949a44578e5259fe125de4937611484cee21072d6cc6c6f749e06b9c989f
+  metadata.gz: 84ab1606aafdcd4bfc9c89a95163a577c361ff6b75d08f50c82ba589a15c255e
+  data.tar.gz: b503766bdb02868c3d6697694f708cd2295b54fa58b7e034b1dc97f2e193e487
 SHA512:
-  metadata.gz: 6ce64547914270ca8541b9d4c0e01a4441918cbd023e0ec6aad8b18ce69871039e4f9da03c71074f4c18cedb187590498539639c1c184839a47df3e16b9669e9
-  data.tar.gz: 16bfc25242bd1fba1f95b5e12f8bb3debc9891acd43c1feaedcc46dd429ddf571ddf3717d8d63e853ac70ce3eed46e8ae662cc4cc1086b529069fdfcdfeed11c
+  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
     ? ""

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx

@@ -13,6 +13,7 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
+    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
+    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results && title) {
+    if (results != null && results >=0 && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results) {
+    } else if (results !=null && results >=0 ) {
       return (
         <>
           {justResults()}

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={1}
+          results={0}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line