playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21323 → 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21358

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

@@ -0,0 +1,145 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Philadelphia",
+    value: "Philadelphia",
+    id: "phl",
+    children: [
+      {
+        label: "HQ",
+        value: "HQ",
+        id: "hq",
+      },
+      {
+        label: "Marketing & Sales PHL",
+        value: "Marketing & Sales PHL",
+        id: "marketing1",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "Installation Office PHL",
+        id: "installation1",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "Warehouse PHL",
+        id: "warehouse1",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "New Jersey",
+    id: "nj",
+    children: [
+      {
+        label: "New Jersey",
+        value: "New Jersey",
+        id: "nj1",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "Marketing & Sales NJ",
+            id: "marketing2",
+          },
+          {
+            label: "Installation Office NJ",
+            value: "Installation Office NJ",
+            id: "installation2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "Warehouse NJ",
+            id: "warehouse2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "Princeton",
+        id: "princeton",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "Marketing & Sales Princeton",
+            id: "marketing3",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "Installation Office Princeton",
+            id: "installation3",
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "Warehouse Princeton",
+            id: "warehouse3",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "Maryland",
+    id: "MD",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "Marketing & Sales MD",
+        id: "marketing4",
+      },
+      {
+        label: "Installation Office MD",
+        value: "Installation Office MD",
+        id: "installation4",
+      },
+      {
+        label: "Warehouse MD",
+        value: "Warehouse MD",
+        id: "warehouse4",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "Connecticut",
+    id: "CT",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "Marketing & Sales CT",
+        id: "marketing5",
+      },
+      {
+        label: "Installation Office CT",
+        value: "Installation Office CT",
+        id: "installation5",
+      },
+      {
+        label: "Warehouse CT",
+        value: "Warehouse CT",
+        id: "warehouse5",
+      },
+    ]
+  },
+];
+
+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