playbook_ui 16.0.0 → 16.1.0.pre.rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +7 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb +135 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.jsx +147 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +402 -27
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +1 -0
- data/app/pb_kits/playbook/pb_radio/_radio.scss +8 -0
- data/dist/chunks/{_pb_line_graph-ByQFYuFO.js → _pb_line_graph-hxi01lk7.js} +1 -1
- data/dist/chunks/_typeahead-BgLnlhzP.js +1 -0
- data/dist/chunks/{globalProps-D6R2eJnp.js → globalProps-DgYwLYNx.js} +1 -1
- data/dist/chunks/{lib-C8h70OzX.js → lib-NLxTo8OB.js} +2 -2
- data/dist/chunks/vendor.js +3 -3
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +9 -6
- data/dist/chunks/_typeahead-Bl8_gWmz.js +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ec3832a5a9d172af005bea73161b414b33cce3a4b9351680a75be21567f70f1f
|
|
4
|
+
data.tar.gz: 9b88540268a3c696e5e810642e48ceeededa245b3ce5a3e46e23562b85e0a339
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ad0694a212c9b5924b651c30038152649a9f779f11ea81ad5970315aefcb3a14534654c366049d8ba1d725180c907a9611c3b7c4840ec4cd7f971a11599d135f
|
|
7
|
+
data.tar.gz: 7c69619d23491fde3af8952c6e899afffff9c65df6a42d81c938fc6fd37c08e90706bb7eb36f9d9dc6267c83826851424964c5adbc4ac4bd67a04e4294947b02
|
|
@@ -358,6 +358,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
|
358
358
|
const { id, value: inputText } = e.target;
|
|
359
359
|
// The radio button needs a unique ID, this grabs the ID before the hyphen
|
|
360
360
|
const selectedItemID = id.match(/^[^-]*/)[0];
|
|
361
|
+
|
|
362
|
+
// Check if the item is disabled - if so, don't allow selection (safety check in addition to native disabled attribute)
|
|
363
|
+
const clickedItem = filterFormattedDataById(formattedData, selectedItemID);
|
|
364
|
+
if (clickedItem.length > 0 && clickedItem[0].disabled) {
|
|
365
|
+
return;
|
|
366
|
+
}
|
|
367
|
+
|
|
361
368
|
// Reset tree checked state, triggering useEffect
|
|
362
369
|
const treeWithNoSelections = modifyRecursive(formattedData, false);
|
|
363
370
|
// Update tree with single selection
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<% treeData = [
|
|
2
|
+
{
|
|
3
|
+
label: "HQ",
|
|
4
|
+
value: "hQ",
|
|
5
|
+
id: "hq2",
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
label: "Philadelphia",
|
|
9
|
+
value: "philadelphia",
|
|
10
|
+
id: "phl2",
|
|
11
|
+
disabled: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Marketing & Sales PHL",
|
|
15
|
+
value: "marketingAndSalesPhl",
|
|
16
|
+
id: "marketingPHL2",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Installation Office PHL",
|
|
20
|
+
value: "installationOfficePhl",
|
|
21
|
+
id: "installationPHL2",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Warehouse PHL",
|
|
25
|
+
value: "warehousePhl",
|
|
26
|
+
id: "warehousePHL2",
|
|
27
|
+
},
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "New Jersey",
|
|
32
|
+
value: "newJersey",
|
|
33
|
+
id: "nj2",
|
|
34
|
+
children: [
|
|
35
|
+
{
|
|
36
|
+
label: "New Jersey",
|
|
37
|
+
value: "newJersey",
|
|
38
|
+
id: "nj12",
|
|
39
|
+
children: [
|
|
40
|
+
{
|
|
41
|
+
label: "Marketing & Sales NJ",
|
|
42
|
+
value: "marketingAndSalesNj",
|
|
43
|
+
id: "marketingNJ2",
|
|
44
|
+
disabled: true,
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Installation Office NJ",
|
|
48
|
+
value: "installationOfficeNj",
|
|
49
|
+
id: "installationNJ2",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label: "Warehouse NJ",
|
|
53
|
+
value: "warehouseNj",
|
|
54
|
+
id: "warehouseNJ2",
|
|
55
|
+
},
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Princeton",
|
|
60
|
+
value: "princeton",
|
|
61
|
+
id: "princeton2",
|
|
62
|
+
children: [
|
|
63
|
+
{
|
|
64
|
+
label: "Marketing & Sales Princeton",
|
|
65
|
+
value: "marketingAndSalesPrinceton",
|
|
66
|
+
id: "marketingPR2",
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
label: "Installation Office Princeton",
|
|
70
|
+
value: "installationOfficePrinceton",
|
|
71
|
+
id: "installationPR2",
|
|
72
|
+
disabled: true,
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
label: "Warehouse Princeton",
|
|
76
|
+
value: "warehousePrinceton",
|
|
77
|
+
id: "warehousePR2",
|
|
78
|
+
},
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
]
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
label: "Maryland",
|
|
85
|
+
value: "maryland",
|
|
86
|
+
id: "MD2",
|
|
87
|
+
children: [
|
|
88
|
+
{
|
|
89
|
+
label: "Marketing & Sales MD",
|
|
90
|
+
value: "marketingAndSalesMd",
|
|
91
|
+
id: "marketingMD2",
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
label: "Installation Office MD",
|
|
95
|
+
value: "installationOfficeMd",
|
|
96
|
+
id: "installationMD2",
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
label: "Warehouse MD",
|
|
100
|
+
value: "warehouseMd",
|
|
101
|
+
id: "warehouseMD2",
|
|
102
|
+
},
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
label: "Connecticut",
|
|
107
|
+
value: "connecticut",
|
|
108
|
+
id: "CT2",
|
|
109
|
+
children: [
|
|
110
|
+
{
|
|
111
|
+
label: "Marketing & Sales CT",
|
|
112
|
+
value: "marketingAndSalesCt",
|
|
113
|
+
id: "marketingCT2",
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
label: "Installation Office CT",
|
|
117
|
+
value: "installationOfficeCt",
|
|
118
|
+
id: "installationCT2",
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
label: "Warehouse CT",
|
|
122
|
+
value: "warehouseCt",
|
|
123
|
+
id: "warehouseCT2",
|
|
124
|
+
},
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
] %>
|
|
128
|
+
|
|
129
|
+
<%= pb_rails("multi_level_select", props: {
|
|
130
|
+
id: "multi-level-select-single-disabled-rails",
|
|
131
|
+
name: "single_disabled",
|
|
132
|
+
tree_data: treeData,
|
|
133
|
+
input_name: "Power",
|
|
134
|
+
variant: "single"
|
|
135
|
+
}) %>
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "HQ",
|
|
7
|
+
value: "hQ",
|
|
8
|
+
id: "hq2",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Philadelphia",
|
|
12
|
+
value: "philadelphia",
|
|
13
|
+
id: "phl2",
|
|
14
|
+
disabled: true,
|
|
15
|
+
children: [
|
|
16
|
+
{
|
|
17
|
+
label: "Marketing & Sales PHL",
|
|
18
|
+
value: "marketingAndSalesPhl",
|
|
19
|
+
id: "marketingPHL2",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
label: "Installation Office PHL",
|
|
23
|
+
value: "installationOfficePhl",
|
|
24
|
+
id: "installationPHL2",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
label: "Warehouse PHL",
|
|
28
|
+
value: "warehousePhl",
|
|
29
|
+
id: "warehousePHL2",
|
|
30
|
+
},
|
|
31
|
+
]
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: "New Jersey",
|
|
35
|
+
value: "newJersey",
|
|
36
|
+
id: "nj2",
|
|
37
|
+
children: [
|
|
38
|
+
{
|
|
39
|
+
label: "New Jersey",
|
|
40
|
+
value: "newJersey",
|
|
41
|
+
id: "nj12",
|
|
42
|
+
children: [
|
|
43
|
+
{
|
|
44
|
+
label: "Marketing & Sales NJ",
|
|
45
|
+
value: "marketingAndSalesNj",
|
|
46
|
+
id: "marketingNJ2",
|
|
47
|
+
disabled: true,
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
label: "Installation Office NJ",
|
|
51
|
+
value: "installationOfficeNj",
|
|
52
|
+
id: "installationNJ2",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Warehouse NJ",
|
|
56
|
+
value: "warehouseNj",
|
|
57
|
+
id: "warehouseNJ2",
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Princeton",
|
|
63
|
+
value: "princeton",
|
|
64
|
+
id: "princeton2",
|
|
65
|
+
children: [
|
|
66
|
+
{
|
|
67
|
+
label: "Marketing & Sales Princeton",
|
|
68
|
+
value: "marketingAndSalesPrinceton",
|
|
69
|
+
id: "marketingPR2",
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label: "Installation Office Princeton",
|
|
73
|
+
value: "installationOfficePrinceton",
|
|
74
|
+
id: "installationPR2",
|
|
75
|
+
disabled: true,
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
label: "Warehouse Princeton",
|
|
79
|
+
value: "warehousePrinceton",
|
|
80
|
+
id: "warehousePR2",
|
|
81
|
+
},
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
]
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
label: "Maryland",
|
|
88
|
+
value: "maryland",
|
|
89
|
+
id: "MD2",
|
|
90
|
+
children: [
|
|
91
|
+
{
|
|
92
|
+
label: "Marketing & Sales MD",
|
|
93
|
+
value: "marketingAndSalesMd",
|
|
94
|
+
id: "marketingMD2",
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
label: "Installation Office MD",
|
|
98
|
+
value: "installationOfficeMd",
|
|
99
|
+
id: "installationMD2",
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
label: "Warehouse MD",
|
|
103
|
+
value: "warehouseMd",
|
|
104
|
+
id: "warehouseMD2",
|
|
105
|
+
},
|
|
106
|
+
]
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
label: "Connecticut",
|
|
110
|
+
value: "connecticut",
|
|
111
|
+
id: "CT2",
|
|
112
|
+
children: [
|
|
113
|
+
{
|
|
114
|
+
label: "Marketing & Sales CT",
|
|
115
|
+
value: "marketingAndSalesCt",
|
|
116
|
+
id: "marketingCT2",
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
label: "Installation Office CT",
|
|
120
|
+
value: "installationOfficeCt",
|
|
121
|
+
id: "installationCT2",
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
label: "Warehouse CT",
|
|
125
|
+
value: "warehouseCt",
|
|
126
|
+
id: "warehouseCT2",
|
|
127
|
+
},
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
];
|
|
131
|
+
|
|
132
|
+
const MultiLevelSelectSingleDisabled = (props) => {
|
|
133
|
+
return (
|
|
134
|
+
<div>
|
|
135
|
+
<MultiLevelSelect
|
|
136
|
+
id="multiselect-single-disabled"
|
|
137
|
+
inputName="Power"
|
|
138
|
+
onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
|
|
139
|
+
treeData={treeData}
|
|
140
|
+
variant="single"
|
|
141
|
+
{...props}
|
|
142
|
+
/>
|
|
143
|
+
</div>
|
|
144
|
+
)
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
export default MultiLevelSelectSingleDisabled;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Individual items can be disabled by including `disabled: true` within the object on the treeData for the `single` variant. Disabled options are visibly disabled in the dropdown UI and cannot be selected via mouse click or keyboard navigation. When a parent node is disabled, all of its children are automatically disabled as well.
|
|
@@ -15,6 +15,7 @@ examples:
|
|
|
15
15
|
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
16
16
|
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
17
17
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
18
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
18
19
|
|
|
19
20
|
react:
|
|
20
21
|
- multi_level_select_default: Default
|
|
@@ -33,3 +34,4 @@ examples:
|
|
|
33
34
|
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
34
35
|
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
35
36
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
37
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
@@ -14,3 +14,4 @@ export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level
|
|
|
14
14
|
export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
|
|
15
15
|
export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
|
|
16
16
|
export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
|
|
17
|
+
export { default as MultiLevelSelectSingleDisabled } from './_multi_level_select_single_disabled.jsx'
|