playbook_ui 14.5.0.pre.alpha.play1586datearea4115 → 14.5.0.pre.alpha.psych4support3941
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -20
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +2 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +227 -211
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
- data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
- data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
- data/dist/chunks/{_typeahead-C9g4qCcE.js → _typeahead-BYw0HEgO.js} +1 -1
- data/dist/chunks/_weekday_stacked-DumiyWjh.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +4 -29
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
- data/app/pb_kits/playbook/pb_timeline/_date_area.tsx +0 -38
- data/app/pb_kits/playbook/pb_timeline/_detail_area.tsx +0 -29
- data/app/pb_kits/playbook/pb_timeline/_node_area.tsx +0 -42
- data/app/pb_kits/playbook/pb_timeline/date_area.html.erb +0 -12
- data/app/pb_kits/playbook/pb_timeline/date_area.rb +0 -13
- data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb +0 -3
- data/app/pb_kits/playbook/pb_timeline/detail_area.rb +0 -11
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -72
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -4
- data/app/pb_kits/playbook/pb_timeline/node_area.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timeline/node_area.rb +0 -16
- data/dist/chunks/_weekday_stacked-C2sJArua.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 68369e36929721ec45f47ea96b446fb8724945893b925fd1763963d14f79179e
|
4
|
+
data.tar.gz: cfe0ca500c66348ff8376677f689382862a58c42b55f857f9fcb01f4f91c347d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 72b405313fb0b71c456795c7531e6bcd000858195acfd693fb929fb8e1ec14badce9e096f80d1beeafe1c67eeb3b1ddedf3ed1f0b2048ed4cc4b59ec8229a122
|
7
|
+
data.tar.gz: ff4bc17405a8c2ecd4a7d74c6f8f75e6e0fe194f3232ba67552e42d6c3c202976a008d0d6f58de059aff99f351c90b2b4ba9865d44c86f1451a8f44f541ea5df
|
@@ -13,20 +13,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
13
13
|
get target() {
|
14
14
|
return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
|
15
15
|
}
|
16
|
-
|
17
|
-
static expandedRows = new Set()
|
18
|
-
static isCollapsing = false
|
19
16
|
|
20
17
|
connect() {
|
21
18
|
this.element.addEventListener('click', () => {
|
22
|
-
if (!PbAdvancedTable.isCollapsing) {
|
23
|
-
const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
|
24
|
-
if (!isExpanded) {
|
25
|
-
PbAdvancedTable.expandedRows.add(this.element.id)
|
26
|
-
} else {
|
27
|
-
PbAdvancedTable.expandedRows.delete(this.element.id)
|
28
|
-
}
|
29
|
-
}
|
30
19
|
this.toggleElement(this.target)
|
31
20
|
})
|
32
21
|
}
|
@@ -86,53 +75,4 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
86
75
|
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
|
87
76
|
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
|
88
77
|
}
|
89
|
-
|
90
|
-
static handleToggleAllHeaders(element) {
|
91
|
-
const table = element.closest('.pb_table')
|
92
|
-
const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
|
93
|
-
|
94
|
-
const expandedRows = Array.from(firstLevelButtons).filter(button =>
|
95
|
-
button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
|
96
|
-
)
|
97
|
-
|
98
|
-
if (expandedRows.length === firstLevelButtons.length) {
|
99
|
-
expandedRows.forEach(button => {
|
100
|
-
button.click()
|
101
|
-
})
|
102
|
-
this.expandedRows.clear()
|
103
|
-
} else {
|
104
|
-
firstLevelButtons.forEach(button => {
|
105
|
-
if (!this.expandedRows.has(button.id)) {
|
106
|
-
button.click()
|
107
|
-
}
|
108
|
-
})
|
109
|
-
}
|
110
|
-
}
|
111
|
-
static handleToggleAllSubRows(element, rowDepth) {
|
112
|
-
const parentElement = element.closest(".toggle-content")
|
113
|
-
const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
|
114
|
-
|
115
|
-
const expandedSubRows = Array.from(subrowButtons).filter(button =>
|
116
|
-
button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
|
117
|
-
)
|
118
|
-
|
119
|
-
if (expandedSubRows.length === subrowButtons.length) {
|
120
|
-
expandedSubRows.forEach(button => {
|
121
|
-
button.click()
|
122
|
-
})
|
123
|
-
} else {
|
124
|
-
subrowButtons.forEach(button => {
|
125
|
-
if (!this.expandedRows.has(button.id)) {
|
126
|
-
button.click()
|
127
|
-
}
|
128
|
-
})
|
129
|
-
}
|
130
|
-
}
|
131
|
-
}
|
132
|
-
|
133
|
-
window.expandAllRows = (element) => {
|
134
|
-
PbAdvancedTable.handleToggleAllHeaders(element)
|
135
78
|
}
|
136
|
-
window.expandAllSubRows = (element, rowDepth) => {
|
137
|
-
PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
|
138
|
-
}
|
@@ -13,4 +13,12 @@
|
|
13
13
|
<% end %>
|
14
14
|
<% end %>
|
15
15
|
<% end %>
|
16
|
-
<% end %>
|
16
|
+
<% end %>
|
17
|
+
|
18
|
+
<script type="text/javascript">
|
19
|
+
var expandAllRows = (element) => {
|
20
|
+
element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
|
21
|
+
button.dispatchEvent(new Event('click'));
|
22
|
+
});
|
23
|
+
};
|
24
|
+
</script>
|
@@ -23,4 +23,12 @@
|
|
23
23
|
<% end %>
|
24
24
|
<% end %>
|
25
25
|
<% end %>
|
26
|
-
<% end %>
|
26
|
+
<% end %>
|
27
|
+
|
28
|
+
<script type="text/javascript">
|
29
|
+
var expandAllSubRows = (element, rowDepth) => {
|
30
|
+
element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
|
31
|
+
button.dispatchEvent(new Event('click'));
|
32
|
+
});
|
33
|
+
};
|
34
|
+
</script>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useState, useRef, useEffect
|
1
|
+
import React, { useState, useRef, useEffect } from "react";
|
2
2
|
import classnames from "classnames";
|
3
3
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
4
4
|
import { globalProps } from "../utilities/globalProps";
|
@@ -38,14 +38,7 @@ type DropdownProps = {
|
|
38
38
|
triggerRef?: any;
|
39
39
|
};
|
40
40
|
|
41
|
-
|
42
|
-
extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
|
43
|
-
Option: typeof DropdownOption;
|
44
|
-
Trigger: typeof DropdownTrigger;
|
45
|
-
Container: typeof DropdownContainer;
|
46
|
-
}
|
47
|
-
|
48
|
-
const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
41
|
+
const Dropdown = (props: DropdownProps) => {
|
49
42
|
const {
|
50
43
|
aria = {},
|
51
44
|
autocomplete = false,
|
@@ -132,7 +125,7 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
|
132
125
|
const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
|
133
126
|
const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
|
134
127
|
return String(label).toLowerCase().includes(filterItem.toLowerCase());
|
135
|
-
});
|
128
|
+
});
|
136
129
|
|
137
130
|
// For keyboard accessibility: Set focus within dropdown to selected item if it exists
|
138
131
|
useEffect(() => {
|
@@ -182,14 +175,6 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
|
182
175
|
dark
|
183
176
|
});
|
184
177
|
|
185
|
-
useImperativeHandle(ref, () => ({
|
186
|
-
clearSelected: () => {
|
187
|
-
setSelected({});
|
188
|
-
setFilterItem("");
|
189
|
-
setIsDropDownClosed(true);
|
190
|
-
onSelect && onSelect(null);
|
191
|
-
},
|
192
|
-
}));
|
193
178
|
|
194
179
|
return (
|
195
180
|
<div {...ariaProps}
|
@@ -273,9 +258,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
|
273
258
|
</DropdownContext.Provider>
|
274
259
|
</div>
|
275
260
|
)
|
276
|
-
}
|
261
|
+
};
|
277
262
|
|
278
|
-
Dropdown.displayName = "Dropdown";
|
279
263
|
Dropdown.Option = DropdownOption;
|
280
264
|
Dropdown.Trigger = DropdownTrigger;
|
281
265
|
Dropdown.Container = DropdownContainer;
|
@@ -22,7 +22,6 @@ examples:
|
|
22
22
|
- dropdown_error: Dropdown with Error
|
23
23
|
- dropdown_default_value: Default Value
|
24
24
|
- dropdown_blank_selection: Blank Selection
|
25
|
-
- dropdown_clear_selection: Clear Selection
|
26
25
|
# - dropdown_with_autocomplete: Autocomplete
|
27
26
|
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
28
27
|
# - dropdown_with_external_control: useDropdown Hook
|
@@ -12,4 +12,3 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
12
12
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
13
13
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
14
14
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
15
|
-
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
73
73
|
!autocomplete && "select_only"
|
74
74
|
);
|
75
75
|
|
76
|
-
const customDisplayPlaceholder = selected
|
76
|
+
const customDisplayPlaceholder = selected.label ? (
|
77
77
|
<b>{selected.label}</b>
|
78
78
|
) : autocomplete ? (
|
79
79
|
""
|
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
83
83
|
"Select..."
|
84
84
|
);
|
85
85
|
|
86
|
-
const defaultDisplayPlaceholder = selected
|
86
|
+
const defaultDisplayPlaceholder = selected.label
|
87
87
|
? selected.label
|
88
88
|
: autocomplete
|
89
89
|
? ""
|
@@ -13,7 +13,6 @@ type ResultsCountProps = {
|
|
13
13
|
const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
|
14
14
|
|
15
15
|
const resultTitle = () => {
|
16
|
-
if (results == null) return null
|
17
16
|
return (
|
18
17
|
<TitleCount
|
19
18
|
align="center"
|
@@ -25,7 +24,6 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
|
|
25
24
|
}
|
26
25
|
|
27
26
|
const justResults = () => {
|
28
|
-
if (results == null) return null
|
29
27
|
return (
|
30
28
|
<Caption
|
31
29
|
className="filter-results"
|
@@ -37,13 +35,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
|
|
37
35
|
}
|
38
36
|
|
39
37
|
const displayResultsCount = () => {
|
40
|
-
if (results
|
38
|
+
if (results && title) {
|
41
39
|
return (
|
42
40
|
<>
|
43
41
|
{resultTitle()}
|
44
42
|
</>
|
45
43
|
)
|
46
|
-
} else if (results
|
44
|
+
} else if (results) {
|
47
45
|
return (
|
48
46
|
<>
|
49
47
|
{justResults()}
|
@@ -47,13 +47,9 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
47
47
|
|
48
48
|
const iconClass = icon ? "_icon" : ""
|
49
49
|
const closeIconSize = size === "small" ? "xs" : "sm"
|
50
|
-
|
51
|
-
const filteredProps: FormPillProps = {...props}
|
52
|
-
delete filteredProps.truncate
|
53
|
-
|
54
50
|
const css = classnames(
|
55
51
|
`pb_form_pill_kit_${color}${iconClass}`,
|
56
|
-
globalProps(
|
52
|
+
globalProps(props),
|
57
53
|
className,
|
58
54
|
size === 'small' ? 'small' : null,
|
59
55
|
textTransform,
|
@@ -81,7 +77,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
81
77
|
className="pb_form_pill_text"
|
82
78
|
size={4}
|
83
79
|
text={name}
|
84
|
-
truncate={props.truncate}
|
85
80
|
/>
|
86
81
|
</>
|
87
82
|
)}
|
@@ -97,7 +92,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
97
92
|
className="pb_form_pill_text"
|
98
93
|
size={4}
|
99
94
|
text={name}
|
100
|
-
truncate={props.truncate}
|
101
95
|
/>
|
102
96
|
<Icon
|
103
97
|
className="pb_form_pill_icon"
|
@@ -117,7 +111,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
117
111
|
className="pb_form_pill_tag"
|
118
112
|
size={4}
|
119
113
|
text={text}
|
120
|
-
truncate={props.truncate}
|
121
114
|
/>
|
122
115
|
</>
|
123
116
|
)}
|
@@ -126,7 +119,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
126
119
|
className="pb_form_pill_tag"
|
127
120
|
size={4}
|
128
121
|
text={text}
|
129
|
-
truncate={props.truncate}
|
130
122
|
/>
|
131
123
|
)}
|
132
124
|
<div
|
@@ -3,7 +3,6 @@ examples:
|
|
3
3
|
rails:
|
4
4
|
- form_pill_user: Form Pill User
|
5
5
|
- form_pill_size: Form Pill Size
|
6
|
-
- form_pill_truncated_text: Truncated Text
|
7
6
|
- form_pill_tag: Form Pill Tag
|
8
7
|
- form_pill_example: Example
|
9
8
|
- form_pill_icon: Form Pill Icon
|
@@ -12,7 +11,6 @@ examples:
|
|
12
11
|
react:
|
13
12
|
- form_pill_user: Form Pill User
|
14
13
|
- form_pill_size: Form Pill Size
|
15
|
-
- form_pill_truncated_text: Truncated Text
|
16
14
|
- form_pill_tag: Form Pill Tag
|
17
15
|
- form_pill_example: Example
|
18
16
|
- form_pill_icon: Form Pill Icon
|
@@ -4,4 +4,3 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
|
|
4
4
|
export { default as FormPillExample } from './_form_pill_example.jsx'
|
5
5
|
export { default as FormPillIcon } from './_form_pill_icon.jsx'
|
6
6
|
export { default as FormPillColors } from './_form_pill_colors.jsx'
|
7
|
-
export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
|