playbook_ui 12.26.1.pre.alpha.play716popoverkitcloseonclickissue833 → 12.26.1.pre.alpha.railsmultilevelimprovements835

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx

@@ -0,0 +1,87 @@
+import React from "react"
+import MultiLevelSelect from "../_multi_level_select"
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const MultiLevelSelectDefault = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-default'
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items with Complete Data", selectedNodes)
+        }
+          returnCompleteData
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultiLevelSelectDefault

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb

@@ -0,0 +1,72 @@
+<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
+
+  <% treeData = [{
+  label: "Power Home Remodeling",
+  value: "Power Home Remodeling",
+  id: "powerhome1",
+  expanded: true,
+  children: [
+    {
+      label: "People",
+      value: "People",
+      id: "people1",
+      children: [
+        {
+          label: "Talent Acquisition",
+          value: "Talent Acquisition",
+          id: "talent1",
+        },
+        {
+          label: "Business Affairs",
+          value: "Business Affairs",
+          id: "business1",
+          children: [
+            {
+              label: "Initiatives",
+              value: "Initiatives",
+              id: "initiative1",
+            },
+            {
+              label: "Learning & Development",
+              value: "Learning & Development",
+              id: "development1",
+            },
+          ],
+        },
+        {
+          label: "People Experience",
+          value: "People Experience",
+          id: "experience1",
+        },
+      ],
+    },
+    {
+      label: "Contact Center",
+      value: "Contact Center",
+      id: "contact1",
+      children: [
+        {
+          label: "Appointment Management",
+          value: "Appointment Management",
+          id: "appointment1",
+        },
+        {
+          label: "Customer Service",
+          value: "Customer Service",
+          id: "customer1",
+        },
+        {
+          label: "Energy",
+          value: "Energy",
+          id: "energy1",
+        },
+      ],
+    },
+  ],
+}] %>
+
+  <%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
+  <%= form.actions do |action| %>
+    <%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
+  <% end %>   
+<% end %>

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

@@ -2,8 +2,11 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_return_complete_data: Return Complete Data
+  - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_return_complete_data: Return Complete Data
   

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

@@ -1,2 +1,3 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -1,3 +1,7 @@
-<div id="pb_data_wrapper_<%= object.id %>" data-tree="">
-<%= react_component("MultiLevelSelect", object.multi_level_select_options ) %>
-</div>
+<%= content_tag(:div,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname) do %>
+  <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
+<% end %>

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -3,10 +3,14 @@
 module Playbook
   module PbMultiLevelSelect
     class MultiLevelSelect < Playbook::KitBase
+      prop :id
+      prop :name
       prop :tree_data, type: Playbook::Props::Array,
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
+      prop :return_complete_data, type: Playbook::Props::Boolean,
+                                  default: false
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -15,8 +19,10 @@ module Playbook
       def multi_level_select_options
         {
           id: id,
+          name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
+          returnCompleteData: return_complete_data,
         }
       end
     end

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx

@@ -91,7 +91,8 @@ const PassphraseCommon = (props) => {
       <div>
         <Body 
             marginBottom='md'
-            text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`} />
+            text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`}
+        />
         <Passphrase
             onChange={handleChange}
             value={input}

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx

@@ -5,7 +5,8 @@ const PhoneNumberInputDefault = (props) => (
     <>
         <PhoneNumberInput
             id='default'
-            {...props} />
+            {...props}
+        />
     </>
 )
 

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -171,19 +171,17 @@ const PbReactPopover = (props: PbPopoverProps) => {
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover && !targetIsReference) {
+            if (!targetIsPopover || targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "inside":
-            if (targetIsPopover) {
+            if (targetIsPopover || targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
-              shouldClosePopover(true);
-            }
+            shouldClosePopover(true);
             break;
         }
       },

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -49,16 +49,13 @@ export default class PbPopover extends PbEnhancedElement {
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
-      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':
-        if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
-          this.hideTooltip()
-        }
+        this.hideTooltip()
         break
       case 'outside':
-        if (!isTooltipElement && !isTriggerElement) {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -14,7 +14,7 @@ const PopoverTest = () => {
   const popoverReference = (
     <Button onClick={togglePopover} 
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -36,7 +36,7 @@ const PopoverTestZIndex = () => {
   const popoverReference = (
     <Button onClick={togglePopover} 
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -60,7 +60,7 @@ const PopoverTestHeight = () => {
   const popoverReference = (
     <Button onClick={togglePopover} 
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -88,7 +88,7 @@ const PopoverTestClicktoClose = () => {
   const popoverReference = (
     <Button onClick={togglePopover} 
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -116,7 +116,7 @@ const PopoverTestClicktoClose2 = () => {
   const popoverReference = (
     <Button onClick={togglePopover} 
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -144,7 +144,7 @@ const PopoverTestClicktoClose3 = () => {
   const popoverReference = (
     <Button onClick={togglePopover} 
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js

@@ -8,7 +8,8 @@ const SelectableListCheckbox = () => {
     return (
       <SelectableList 
           data={{ testid: testId }} 
-          variant="checkbox">
+          variant="checkbox"
+      >
         <SelectableList.Item
             label="Mild"
             name="checkbox-name-1"
@@ -28,7 +29,8 @@ const SelectableListRadio = () => {
     return (
         <SelectableList
             data={{ testid: testId }}
-            variant="radio">
+            variant="radio"
+        >
         <SelectableList.Item
             label="Small"
             name="radio"