playbook_ui 16.0.0.pre.alpha.fixiconsvgdataattrspropagation13513 → 16.0.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_icon/icon.rb +1 -6
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -7
- 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/example.yml +0 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +27 -402
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +0 -8
- data/dist/chunks/{_pb_line_graph-hxi01lk7.js → _pb_line_graph-ByQFYuFO.js} +1 -1
- data/dist/chunks/_typeahead-Bl8_gWmz.js +1 -0
- data/dist/chunks/{globalProps-DgYwLYNx.js → globalProps-D6R2eJnp.js} +1 -1
- data/dist/chunks/{lib-NLxTo8OB.js → lib-C8h70OzX.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 +6 -9
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb +0 -135
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.jsx +0 -147
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.md +0 -1
- data/dist/chunks/_typeahead-BgLnlhzP.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: 375e5a9a2040cbf190b9ed83ef91adb015b7347eff80afd264b3423996f9efdb
|
|
4
|
+
data.tar.gz: 26f03e82a99ac0e51a20674952021e5acd7237f12b64184c02c465a4d1b203f6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7dcc49c34e7d3623cd943c7136ca99b1a58cb5bb479bf13377ea013f0e5ae67a0c83b25252aeab89e7ca2d7296b31ea0b719563fe1d8ee6955f02fff52827412
|
|
7
|
+
data.tar.gz: 73943f8daa01fec691f0ebcfb3e2c6d1e6f2ae47dc073ba862fda8aad8d0f0c08f7e92bf54bda7531f0ba12cb9d3bcd87b3322cd9feb092782694ff562b1fdd1
|
|
@@ -109,18 +109,13 @@ module Playbook
|
|
|
109
109
|
|
|
110
110
|
svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
|
|
111
111
|
svg["id"] = object.id
|
|
112
|
+
svg["data"] = object.data
|
|
112
113
|
svg["height"] = "auto"
|
|
113
114
|
svg["width"] = "auto"
|
|
114
115
|
svg["tabindex"] = object.tabindex
|
|
115
116
|
fill_color = object.color || "currentColor"
|
|
116
117
|
doc.at_css("path")["fill"] = fill_color
|
|
117
118
|
|
|
118
|
-
if object.data.present?
|
|
119
|
-
object.data.each do |key, value|
|
|
120
|
-
svg["data-#{key}"] = value
|
|
121
|
-
end
|
|
122
|
-
end
|
|
123
|
-
|
|
124
119
|
if object.aria.present?
|
|
125
120
|
object.aria.each do |key, value|
|
|
126
121
|
k = key.to_s
|
|
@@ -358,13 +358,6 @@ 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
|
-
|
|
368
361
|
// Reset tree checked state, triggering useEffect
|
|
369
362
|
const treeWithNoSelections = modifyRecursive(formattedData, false);
|
|
370
363
|
// 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.
|
|
@@ -15,7 +15,6 @@ 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)
|
|
19
18
|
|
|
20
19
|
react:
|
|
21
20
|
- multi_level_select_default: Default
|
|
@@ -34,4 +33,3 @@ examples:
|
|
|
34
33
|
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
35
34
|
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
36
35
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
37
|
-
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
@@ -14,4 +14,3 @@ 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'
|
|
@@ -1,414 +1,39 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { render, screen
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
3
|
|
|
4
4
|
import { MultiLevelSelect } from 'playbook-ui'
|
|
5
5
|
|
|
6
|
-
const treeData =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
value: 'businessAffairs',
|
|
26
|
-
id: 'business1',
|
|
27
|
-
},
|
|
28
|
-
],
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
label: 'Contact Center',
|
|
32
|
-
value: 'contactCenter',
|
|
33
|
-
id: 'contact1',
|
|
34
|
-
},
|
|
35
|
-
],
|
|
36
|
-
},
|
|
37
|
-
]
|
|
38
|
-
|
|
39
|
-
const treeDataWithDisabledOptions = [
|
|
40
|
-
{
|
|
41
|
-
label: 'Power Home Remodeling',
|
|
42
|
-
value: 'powerHomeRemodeling',
|
|
43
|
-
id: 'powerhome1',
|
|
44
|
-
expanded: true,
|
|
45
|
-
children: [
|
|
46
|
-
{
|
|
47
|
-
label: 'People',
|
|
48
|
-
value: 'people',
|
|
49
|
-
id: 'people1',
|
|
50
|
-
disabled: true,
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
label: 'Contact Center',
|
|
54
|
-
value: 'contactCenter',
|
|
55
|
-
id: 'contact1',
|
|
56
|
-
},
|
|
57
|
-
],
|
|
58
|
-
},
|
|
59
|
-
]
|
|
60
|
-
|
|
61
|
-
const treeDataWithDisabledParent = [
|
|
62
|
-
{
|
|
63
|
-
label: 'Power Home Remodeling',
|
|
64
|
-
value: 'powerHomeRemodeling',
|
|
65
|
-
id: 'powerhome1',
|
|
66
|
-
expanded: true,
|
|
67
|
-
disabled: true,
|
|
68
|
-
children: [
|
|
69
|
-
{
|
|
70
|
-
label: 'People',
|
|
71
|
-
value: 'people',
|
|
72
|
-
id: 'people1',
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
label: 'Contact Center',
|
|
76
|
-
value: 'contactCenter',
|
|
77
|
-
id: 'contact1',
|
|
78
|
-
},
|
|
79
|
-
],
|
|
80
|
-
},
|
|
81
|
-
]
|
|
6
|
+
const treeData = {
|
|
7
|
+
label: 'search me',
|
|
8
|
+
value: 'searchme',
|
|
9
|
+
id:'default1',
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: 'search me too',
|
|
13
|
+
value: 'searchmetoo',
|
|
14
|
+
id:'default2',
|
|
15
|
+
children: [
|
|
16
|
+
{
|
|
17
|
+
label: 'No one can get me',
|
|
18
|
+
value: 'anonymous',
|
|
19
|
+
id:'default3',
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
],
|
|
24
|
+
}
|
|
82
25
|
|
|
83
26
|
const testId = "multiselect-test"
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
test('should render custom class', () => {
|
|
87
|
-
render(
|
|
27
|
+
test('should render custom class', () => {
|
|
28
|
+
render(
|
|
88
29
|
<MultiLevelSelect
|
|
89
30
|
className='custom-class'
|
|
90
|
-
data={{ testid: testId
|
|
91
|
-
treeData={treeData}
|
|
92
|
-
/>
|
|
93
|
-
)
|
|
94
|
-
const kit = screen.getByTestId(testId)
|
|
95
|
-
expect(kit).toHaveClass('custom-class')
|
|
96
|
-
})
|
|
97
|
-
|
|
98
|
-
test('should render with default multi variant', () => {
|
|
99
|
-
render(
|
|
100
|
-
<MultiLevelSelect
|
|
101
|
-
data={{ testid: testId }}
|
|
102
|
-
treeData={treeData}
|
|
103
|
-
/>
|
|
104
|
-
)
|
|
105
|
-
const kit = screen.getByTestId(testId)
|
|
106
|
-
expect(kit).toHaveClass('pb_multi_level_select')
|
|
107
|
-
})
|
|
108
|
-
|
|
109
|
-
test('should render label when provided', () => {
|
|
110
|
-
render(
|
|
111
|
-
<MultiLevelSelect
|
|
112
|
-
data={{ testid: testId }}
|
|
113
|
-
label="Select Location"
|
|
114
|
-
treeData={treeData}
|
|
115
|
-
/>
|
|
116
|
-
)
|
|
117
|
-
const kit = screen.getByTestId(testId)
|
|
118
|
-
expect(kit).toHaveTextContent('Select Location')
|
|
119
|
-
})
|
|
120
|
-
|
|
121
|
-
test('should render error message when provided', () => {
|
|
122
|
-
render(
|
|
123
|
-
<MultiLevelSelect
|
|
124
|
-
data={{ testid: testId }}
|
|
125
|
-
error="Please select an option"
|
|
126
|
-
treeData={treeData}
|
|
127
|
-
/>
|
|
128
|
-
)
|
|
129
|
-
const kit = screen.getByTestId(testId)
|
|
130
|
-
expect(kit).toHaveTextContent('Please select an option')
|
|
131
|
-
expect(kit).toHaveClass('error')
|
|
132
|
-
})
|
|
133
|
-
|
|
134
|
-
test('should disable input when disabled prop is true', () => {
|
|
135
|
-
render(
|
|
136
|
-
<MultiLevelSelect
|
|
137
|
-
data={{ testid: testId }}
|
|
138
|
-
disabled
|
|
31
|
+
data={{ testid: testId}}
|
|
139
32
|
treeData={treeData}
|
|
140
|
-
/>
|
|
141
|
-
|
|
142
|
-
const kit = screen.getByTestId(testId)
|
|
143
|
-
const input = kit.querySelector('#multiselect_input')
|
|
144
|
-
expect(input).toBeDisabled()
|
|
145
|
-
})
|
|
146
|
-
})
|
|
33
|
+
/>
|
|
34
|
+
)
|
|
147
35
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
render(
|
|
151
|
-
<MultiLevelSelect
|
|
152
|
-
data={{ testid: testId }}
|
|
153
|
-
treeData={treeData}
|
|
154
|
-
variant="multi"
|
|
155
|
-
/>
|
|
156
|
-
)
|
|
157
|
-
const kit = screen.getByTestId(testId)
|
|
158
|
-
const input = kit.querySelector('#multiselect_input')
|
|
159
|
-
fireEvent.click(input)
|
|
160
|
-
|
|
161
|
-
const checkboxes = kit.querySelectorAll('input[type="checkbox"]')
|
|
162
|
-
expect(checkboxes.length).toBeGreaterThan(0)
|
|
163
|
-
})
|
|
164
|
-
|
|
165
|
-
test('should call onSelect when checkbox is clicked', () => {
|
|
166
|
-
const mockOnSelect = jest.fn()
|
|
167
|
-
render(
|
|
168
|
-
<MultiLevelSelect
|
|
169
|
-
data={{ testid: testId }}
|
|
170
|
-
onSelect={mockOnSelect}
|
|
171
|
-
treeData={treeData}
|
|
172
|
-
variant="multi"
|
|
173
|
-
/>
|
|
174
|
-
)
|
|
175
|
-
const kit = screen.getByTestId(testId)
|
|
176
|
-
const input = kit.querySelector('#multiselect_input')
|
|
177
|
-
fireEvent.click(input)
|
|
178
|
-
|
|
179
|
-
const checkbox = kit.querySelector('input[type="checkbox"]')
|
|
180
|
-
fireEvent.click(checkbox)
|
|
181
|
-
|
|
182
|
-
expect(mockOnSelect).toHaveBeenCalled()
|
|
183
|
-
})
|
|
184
|
-
|
|
185
|
-
test('should render disabled checkbox inputs for disabled options', () => {
|
|
186
|
-
render(
|
|
187
|
-
<MultiLevelSelect
|
|
188
|
-
data={{ testid: testId }}
|
|
189
|
-
id="multi-disabled-test"
|
|
190
|
-
treeData={treeDataWithDisabledOptions}
|
|
191
|
-
variant="multi"
|
|
192
|
-
/>
|
|
193
|
-
)
|
|
194
|
-
const kit = screen.getByTestId(testId)
|
|
195
|
-
const input = kit.querySelector('#multiselect_input')
|
|
196
|
-
fireEvent.click(input)
|
|
197
|
-
|
|
198
|
-
const disabledCheckbox = kit.querySelector('input[type="checkbox"][disabled]')
|
|
199
|
-
expect(disabledCheckbox).toBeInTheDocument()
|
|
200
|
-
})
|
|
36
|
+
const kit = screen.getByTestId(testId)
|
|
37
|
+
expect(kit).toHaveClass('custom-class')
|
|
201
38
|
})
|
|
202
39
|
|
|
203
|
-
describe('MultiLevelSelect single variant', () => {
|
|
204
|
-
test('should render radio buttons for single variant', () => {
|
|
205
|
-
render(
|
|
206
|
-
<MultiLevelSelect
|
|
207
|
-
data={{ testid: testId }}
|
|
208
|
-
treeData={treeData}
|
|
209
|
-
variant="single"
|
|
210
|
-
/>
|
|
211
|
-
)
|
|
212
|
-
const kit = screen.getByTestId(testId)
|
|
213
|
-
const input = kit.querySelector('#multiselect_input')
|
|
214
|
-
fireEvent.click(input)
|
|
215
|
-
|
|
216
|
-
const radios = kit.querySelectorAll('input[type="radio"]')
|
|
217
|
-
expect(radios.length).toBeGreaterThan(0)
|
|
218
|
-
})
|
|
219
|
-
|
|
220
|
-
test('should render disabled radio inputs for disabled options', () => {
|
|
221
|
-
render(
|
|
222
|
-
<MultiLevelSelect
|
|
223
|
-
data={{ testid: testId }}
|
|
224
|
-
id="single-disabled-test"
|
|
225
|
-
treeData={treeDataWithDisabledOptions}
|
|
226
|
-
variant="single"
|
|
227
|
-
/>
|
|
228
|
-
)
|
|
229
|
-
const kit = screen.getByTestId(testId)
|
|
230
|
-
const input = kit.querySelector('#multiselect_input')
|
|
231
|
-
fireEvent.click(input)
|
|
232
|
-
|
|
233
|
-
const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
|
|
234
|
-
expect(disabledRadio).toBeInTheDocument()
|
|
235
|
-
})
|
|
236
|
-
|
|
237
|
-
test('disabled options cannot be selected', () => {
|
|
238
|
-
const mockOnSelect = jest.fn()
|
|
239
|
-
render(
|
|
240
|
-
<MultiLevelSelect
|
|
241
|
-
data={{ testid: testId }}
|
|
242
|
-
id="single-disabled-click-test"
|
|
243
|
-
onSelect={mockOnSelect}
|
|
244
|
-
treeData={treeDataWithDisabledOptions}
|
|
245
|
-
variant="single"
|
|
246
|
-
/>
|
|
247
|
-
)
|
|
248
|
-
const kit = screen.getByTestId(testId)
|
|
249
|
-
const input = kit.querySelector('#multiselect_input')
|
|
250
|
-
fireEvent.click(input)
|
|
251
|
-
|
|
252
|
-
const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
|
|
253
|
-
fireEvent.click(disabledRadio)
|
|
254
|
-
|
|
255
|
-
expect(mockOnSelect).not.toHaveBeenCalled()
|
|
256
|
-
})
|
|
257
|
-
|
|
258
|
-
test('enabled options can be selected', () => {
|
|
259
|
-
const mockOnSelect = jest.fn()
|
|
260
|
-
render(
|
|
261
|
-
<MultiLevelSelect
|
|
262
|
-
data={{ testid: testId }}
|
|
263
|
-
id="single-enabled-click-test"
|
|
264
|
-
onSelect={mockOnSelect}
|
|
265
|
-
treeData={treeDataWithDisabledOptions}
|
|
266
|
-
variant="single"
|
|
267
|
-
/>
|
|
268
|
-
)
|
|
269
|
-
const kit = screen.getByTestId(testId)
|
|
270
|
-
const input = kit.querySelector('#multiselect_input')
|
|
271
|
-
fireEvent.click(input)
|
|
272
|
-
|
|
273
|
-
const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')
|
|
274
|
-
fireEvent.click(enabledRadio)
|
|
275
|
-
|
|
276
|
-
expect(mockOnSelect).toHaveBeenCalled()
|
|
277
|
-
})
|
|
278
|
-
|
|
279
|
-
test('should close dropdown after selection', () => {
|
|
280
|
-
render(
|
|
281
|
-
<MultiLevelSelect
|
|
282
|
-
data={{ testid: testId }}
|
|
283
|
-
treeData={treeDataWithDisabledOptions}
|
|
284
|
-
variant="single"
|
|
285
|
-
/>
|
|
286
|
-
)
|
|
287
|
-
const kit = screen.getByTestId(testId)
|
|
288
|
-
const input = kit.querySelector('#multiselect_input')
|
|
289
|
-
fireEvent.click(input)
|
|
290
|
-
|
|
291
|
-
const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')
|
|
292
|
-
fireEvent.click(enabledRadio)
|
|
293
|
-
|
|
294
|
-
const dropdownClosed = kit.querySelector('.dropdown_menu.close')
|
|
295
|
-
expect(dropdownClosed).toBeInTheDocument()
|
|
296
|
-
})
|
|
297
|
-
|
|
298
|
-
test('should update input value after selection', () => {
|
|
299
|
-
render(
|
|
300
|
-
<MultiLevelSelect
|
|
301
|
-
data={{ testid: testId }}
|
|
302
|
-
treeData={treeDataWithDisabledOptions}
|
|
303
|
-
variant="single"
|
|
304
|
-
/>
|
|
305
|
-
)
|
|
306
|
-
const kit = screen.getByTestId(testId)
|
|
307
|
-
const input = kit.querySelector('#multiselect_input')
|
|
308
|
-
fireEvent.click(input)
|
|
309
|
-
|
|
310
|
-
const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')
|
|
311
|
-
fireEvent.click(enabledRadio)
|
|
312
|
-
|
|
313
|
-
expect(input.value).toBe('Power Home Remodeling')
|
|
314
|
-
})
|
|
315
|
-
})
|
|
316
|
-
|
|
317
|
-
describe('MultiLevelSelect disabled parent behavior', () => {
|
|
318
|
-
test('children of disabled parent should also be disabled in single variant', () => {
|
|
319
|
-
render(
|
|
320
|
-
<MultiLevelSelect
|
|
321
|
-
data={{ testid: testId }}
|
|
322
|
-
treeData={treeDataWithDisabledParent}
|
|
323
|
-
variant="single"
|
|
324
|
-
/>
|
|
325
|
-
)
|
|
326
|
-
const kit = screen.getByTestId(testId)
|
|
327
|
-
const input = kit.querySelector('#multiselect_input')
|
|
328
|
-
fireEvent.click(input)
|
|
329
|
-
|
|
330
|
-
const radios = kit.querySelectorAll('input[type="radio"]')
|
|
331
|
-
radios.forEach(radio => {
|
|
332
|
-
expect(radio).toBeDisabled()
|
|
333
|
-
})
|
|
334
|
-
})
|
|
335
|
-
|
|
336
|
-
test('children of disabled parent should also be disabled in multi variant', () => {
|
|
337
|
-
render(
|
|
338
|
-
<MultiLevelSelect
|
|
339
|
-
data={{ testid: testId }}
|
|
340
|
-
treeData={treeDataWithDisabledParent}
|
|
341
|
-
variant="multi"
|
|
342
|
-
/>
|
|
343
|
-
)
|
|
344
|
-
const kit = screen.getByTestId(testId)
|
|
345
|
-
const input = kit.querySelector('#multiselect_input')
|
|
346
|
-
fireEvent.click(input)
|
|
347
|
-
|
|
348
|
-
const checkboxes = kit.querySelectorAll('input[type="checkbox"]')
|
|
349
|
-
checkboxes.forEach(checkbox => {
|
|
350
|
-
expect(checkbox).toBeDisabled()
|
|
351
|
-
})
|
|
352
|
-
})
|
|
353
|
-
})
|
|
354
|
-
|
|
355
|
-
describe('MultiLevelSelect onChange callback', () => {
|
|
356
|
-
test('should call onChange when selection changes in multi variant', () => {
|
|
357
|
-
const mockOnChange = jest.fn()
|
|
358
|
-
render(
|
|
359
|
-
<MultiLevelSelect
|
|
360
|
-
data={{ testid: testId }}
|
|
361
|
-
onChange={mockOnChange}
|
|
362
|
-
treeData={treeData}
|
|
363
|
-
variant="multi"
|
|
364
|
-
/>
|
|
365
|
-
)
|
|
366
|
-
const kit = screen.getByTestId(testId)
|
|
367
|
-
const input = kit.querySelector('#multiselect_input')
|
|
368
|
-
fireEvent.click(input)
|
|
369
|
-
|
|
370
|
-
const checkbox = kit.querySelector('input[type="checkbox"]')
|
|
371
|
-
fireEvent.click(checkbox)
|
|
372
|
-
|
|
373
|
-
expect(mockOnChange).toHaveBeenCalled()
|
|
374
|
-
})
|
|
375
|
-
|
|
376
|
-
test('should call onChange when selection changes in single variant', () => {
|
|
377
|
-
const mockOnChange = jest.fn()
|
|
378
|
-
render(
|
|
379
|
-
<MultiLevelSelect
|
|
380
|
-
data={{ testid: testId }}
|
|
381
|
-
onChange={mockOnChange}
|
|
382
|
-
treeData={treeDataWithDisabledOptions}
|
|
383
|
-
variant="single"
|
|
384
|
-
/>
|
|
385
|
-
)
|
|
386
|
-
const kit = screen.getByTestId(testId)
|
|
387
|
-
const input = kit.querySelector('#multiselect_input')
|
|
388
|
-
fireEvent.click(input)
|
|
389
|
-
|
|
390
|
-
const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')
|
|
391
|
-
fireEvent.click(enabledRadio)
|
|
392
|
-
|
|
393
|
-
expect(mockOnChange).toHaveBeenCalled()
|
|
394
|
-
})
|
|
395
|
-
})
|
|
396
|
-
|
|
397
|
-
describe('MultiLevelSelect inputName prop', () => {
|
|
398
|
-
test('should use inputName for radio button name attribute', () => {
|
|
399
|
-
render(
|
|
400
|
-
<MultiLevelSelect
|
|
401
|
-
data={{ testid: testId }}
|
|
402
|
-
inputName="location_select"
|
|
403
|
-
treeData={treeData}
|
|
404
|
-
variant="single"
|
|
405
|
-
/>
|
|
406
|
-
)
|
|
407
|
-
const kit = screen.getByTestId(testId)
|
|
408
|
-
const input = kit.querySelector('#multiselect_input')
|
|
409
|
-
fireEvent.click(input)
|
|
410
|
-
|
|
411
|
-
const radio = kit.querySelector('input[type="radio"]')
|
|
412
|
-
expect(radio).toHaveAttribute('name', 'location_select')
|
|
413
|
-
})
|
|
414
|
-
})
|
|
@@ -13,10 +13,6 @@
|
|
|
13
13
|
display: inline-flex;
|
|
14
14
|
cursor: pointer;
|
|
15
15
|
|
|
16
|
-
&:has(input:disabled) {
|
|
17
|
-
cursor: not-allowed;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
16
|
.pb_radio_button {
|
|
21
17
|
width: 22px;
|
|
22
18
|
min-width: 22px;
|
|
@@ -88,10 +84,6 @@
|
|
|
88
84
|
.pb_radio_kit.dark.error.vertical,
|
|
89
85
|
.pb_radio_kit_vertical.dark,
|
|
90
86
|
.pb_radio_kit_vertical.dark.error {
|
|
91
|
-
&:has(input:disabled) {
|
|
92
|
-
cursor: not-allowed;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
87
|
.pb_radio_button {
|
|
96
88
|
border-color: $border_dark;
|
|
97
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-
|
|
1
|
+
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-D6R2eJnp.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-C8h70OzX.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
|