playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21323 → 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21328

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8120f74ec160cee373cdd8848e6e614b47ab8f2c92f2dd87a53c533a735fbe9
-  data.tar.gz: db41eb2d926684394701fbb886da7382e84ece42a1e213faf89ef3f48a31d2dd
+  metadata.gz: f0644f1e685425faa2c4f2955e8631573bcafd8c9ec64b504c15e2a59aeb1e45
+  data.tar.gz: 35d0cb4e4f59b4eb099fedd73819c0fe450e766b0d7d25fe5cf5e53fc043b5dc
 SHA512:
-  metadata.gz: ebc7da2bb3c53cba46fc93a186daaaf1fb7cdcaa6798196d1ec151e27c512dcda54536e0e52cd4c40a8b72ad1dde57738febd0825dd036c9f9a5ce9d619c7a0f
-  data.tar.gz: 023e6ef6b4f7464466f3c05f27a25ace1e26702a7bc02cc48d3218d53ebd60c766d6b6f4063621cafb89e009a44d8059c2d754b86d3b06938af539d31f943006
+  metadata.gz: 73813bea1c749e60cacf7c60f886326ed297bf05842bad59be1af460c981a97104948bc49d45d9df25e079c1506956ea8f87b21ace412b8bd1762363a9e43fe1
+  data.tar.gz: 368f7b2a0e4edba51e0ba7699cf3f54ed859bb0ee810d3814f1e125c71a737b3cc2827499eed7c192b971404589ad2c0c707fa842fd088d16a96bbdf8d4511df

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -31,6 +31,7 @@ type MultiLevelSelectProps = {
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
+  ultimateChildrenOnly?: boolean
   variant?: "multi" | "single"
 } & GlobalProps
 
@@ -47,6 +48,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData,
     onSelect = () => null,
     selectedIds,
+    ultimateChildrenOnly = false,
     variant = "multi"
   } = props
 
@@ -378,7 +380,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     { variant === "single" ? (
                       <Radio
                           checked={item.checked}
-                          class={item.hidden ? "singleHidden" : ""}
+                          class={ultimateChildrenOnly ? item.children ? "singleHidden" : "" : null}
                           id={`${item.id}-${item.label}`}
                           label={item.label}
                           name={inputName}

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

@@ -9,7 +9,6 @@
         value: "People",
         id: "201",
         expanded: true,
-        hidden: true,
         children: [
           {
             label: "Talent Acquisition",
@@ -20,7 +19,6 @@
             label: "Business Affairs",
             value: "Business Affairs",
             id: "203",
-            hidden: true,
             children: [
               {
                 label: "Initiatives",
@@ -45,7 +43,6 @@
         label: "Contact Center",
         value: "Contact Center",
         id: "207",
-        hidden: true,
         children: [
           {
             label: "Appointment Management",

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

@@ -13,7 +13,6 @@ const treeData = [
         value: "People",
         id: "people2",
         expanded: true,
-        hidden: true,
         children: [
           {
             label: "Talent Acquisition",
@@ -24,7 +23,6 @@ const treeData = [
             label: "Business Affairs",
             value: "Business Affairs",
             id: "business2",
-            hidden: true,
             children: [
               {
                 label: "Initiatives",
@@ -49,7 +47,6 @@ const treeData = [
         label: "Contact Center",
         value: "Contact Center",
         id: "contact2",
-        hidden: true,
         children: [
           {
             label: "Appointment Management",

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

@@ -0,0 +1,74 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "300",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "301",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "302",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "303",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "304",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "305",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "306",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "307",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "308",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "309",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "310",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-single-children-only-rails",
+    name: "my_single_children_only_select_array",
+    tree_data: treeData,
+    input_name: "PowerChildren",
+    ultimate_children_only: true,
+    variant: "single"
+}) %>

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

@@ -0,0 +1,88 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome3",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people3",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent3",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business3",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative3",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development3",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience3",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact3",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment3",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer3",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy3",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectSingleChildrenOnly = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-single-children-only"
+          inputName="PowerChildren"
+          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
+          treeData={treeData}
+          ultimateChildrenOnly
+          variant="single"
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectSingleChildrenOnly;

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

@@ -2,6 +2,7 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_single: Single Select
+  - multi_level_select_single_children_only: Single Select Ultimate Children Only
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
@@ -9,5 +10,6 @@ examples:
   react:
   - multi_level_select_default: Default
   - multi_level_select_single: Single Select
+  - multi_level_select_single_children_only: Single Select Ultimate Children Only
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids

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

@@ -1,4 +1,5 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
 export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
+export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

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

@@ -16,6 +16,8 @@ module Playbook
                            default: "pills"
       prop :input_name, type: Playbook::Props::String,
                         default: ""
+      prop :ultimate_children_only, type: Playbook::Props::Boolean,
+                                    default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[multi single],
                      default: "multi"
@@ -33,6 +35,7 @@ module Playbook
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
           input_name: input_name,
+          ultimateChildrenOnly: ultimate_children_only,
           variant: variant,
         }
       end