playbook_ui 13.32.0.pre.alpha.PLAY14143272 → 13.32.0.pre.alpha.PLAY14143288

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1604c4acad3552c83fee45b4132254b46891f219aad02f635708b2857d182528
-  data.tar.gz: 2132b384be205291d751b39474026ad7451f34fa2b871dd232c01902e294b121
+  metadata.gz: 5618b32ebc83c42d8613bd4fa8b0a2744a51305118db04bfcf7ac130ea914db8
+  data.tar.gz: 54892a5dec259caa818c197140f0438179e1a9e3904438fe0f82aa5d317092b1
 SHA512:
-  metadata.gz: 68c47886fc6650571526da2824fec4b23990ab7f42f805eddab67b1069f6900710c745e7af4446d94f7f5b10fe3c0903dc0dff65032bc1a87cfa083ea504f10e
-  data.tar.gz: 6c44a1561c8a69c55a47ff2f4e3357ef6222d0611eb40f6c68caa177821706b222a240dab64bffb82ae105690eb84d0781e5baf9611f49087de434c7a203a890
+  metadata.gz: a44280282310fbba58f3998a32eaa1a0f1979bdba5d28bafcc8de6c3e195295fe5acb1c71beef38666f8918af70f86286818a03250898d4d7d1bc158ef261ec9
+  data.tar.gz: 7afa46a34ac936970e8f0113cf2808b2ac56fac7e75c80ab3393c7ee844dbd304879070954e918f69a6281e23ff66f7f8be06fd10e97b3a446d833895813062c

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

@@ -26,6 +26,7 @@ type DropdownProps = {
     className?: string;
     dark?: boolean;
     data?: { [key: string]: string };
+    defaultValue?: GenericObject;
     error?: string;
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string;
@@ -44,6 +45,7 @@ const Dropdown = (props: DropdownProps) => {
         className,
         dark = false,
         data = {},
+        defaultValue = {},
         error,
         htmlOptions = {},
         id,
@@ -66,7 +68,7 @@ const Dropdown = (props: DropdownProps) => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const [selected, setSelected] = useState<GenericObject>({});
+    const [selected, setSelected] = useState<GenericObject>(defaultValue);
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =

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

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, default_value: options.last}) %>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownDefaultValue = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+  return (
+  <>
+    <Dropdown
+        defaultValue={options[2]}
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownDefaultValue

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

@@ -8,6 +8,7 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
+  - dropdown_default_value: Default Value
 
   react:
   - dropdown_default: Default
@@ -18,6 +19,7 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
+  - dropdown_default_value: Default Value
   # - 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

@@ -9,4 +9,5 @@ export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
-export { default as DropdownError } from './_dropdown_error.jsx'
+export { default as DropdownError } from './_dropdown_error.jsx'
+export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -8,8 +8,8 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="" />
-        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="" style="display: none" <%= object.required ? "required" : ""%> />
+        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="<%= input_default_value %>" />
+        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="<%= input_default_value %>" style="display: none" <%= object.required ? "required" : ""%> />
 
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -10,6 +10,7 @@ module Playbook
       prop :error, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
+      prop :default_value
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
@@ -24,6 +25,10 @@ module Playbook
       def error_class
         error.present? ? " error" : ""
       end
+
+      def input_default_value
+        default_value.present? ? default_value.transform_keys(&:to_s) : ""
+      end
     end
   end
 end

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

@@ -21,6 +21,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
+    this.setDefaultValue();
     this.bindEventListeners();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
@@ -179,4 +180,28 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
   }
+
+  setDefaultValue() {
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+
+    if (hiddenInput.value) {
+      const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+      const defaultValue = JSON.parse(hiddenInput.value.replaceAll("=>", ":"));
+      const options = this.element.querySelectorAll(OPTION_SELECTOR);
+
+      options.forEach((option) => {
+        if (defaultValue.id === JSON.parse(option.dataset.dropdownOptionLabel).id) {
+          option.classList.add("pb_dropdown_option_selected");
+        }
+      });
+
+      const triggerElement = this.element.querySelector("#dropdown_trigger_display");
+      if (triggerElement) {
+        triggerElement.textContent = defaultValue.label;
+      }
+
+      hiddenInput.value = defaultValue.id;
+      inputFormValidation.value = defaultValue.id;
+    }
+  }
 }