playbook_ui_docs 14.6.0.pre.rc.15 → 14.6.0.pre.rc.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e67e3e35b0752941adf2f14df93ac5be59c0e3b931ce1f31a8aa13aaee3b1a22
-  data.tar.gz: bf99569b971c5af3bc034d148f352b546c1cfc148301714a7419fb6674b5e8e8
+  metadata.gz: f97018ed99de08972544f7fedca98fd0e1c16927df7c0a7e539cbba1cf43d78a
+  data.tar.gz: 0f70fe993f929f52a57c5c0c244bbfa6bb5104b01d0eee411d52716e2084708b
 SHA512:
-  metadata.gz: 5297a38f418e00a44983dc4e0afb6dae5eb4cbfa3f4fa59f975d93715c91556d2836cc5a554c20dfe5b78cdd8be2c368e79cf8c3f37749ae57a448093cc3045d
-  data.tar.gz: cf483ab802cb73f9612251023daf3a8daeb71997c56b50948ea1f2e6817548d5a86bf3c4377ed2755099c9e5b49d98d4789e08f8b730b9927f726c3bc9ff4aa2
+  metadata.gz: 921848b90ad81a96948954fed77f466897cf56416e6c092255868b1ed22abad57c9b0db6aead70ba94335352d45d8abc1e574f14ffb8268e8bd0fdfdebdb033e
+  data.tar.gz: e54d46ac7a27c21b3a044d0b9c6fdc8aa1a17ee0fbc71ea28437a2d06afe497ba134b25c761407be00fce280f23f25e3be544a1d6ac265da997c3813f4ee2fc2

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'