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.
Files changed (61) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -60
  3. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
  5. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -20
  6. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
  7. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  9. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  10. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +2 -4
  11. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
  13. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  14. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  15. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +227 -211
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -4
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
  19. data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
  20. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
  21. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
  23. data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
  24. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
  25. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
  26. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
  27. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
  28. data/dist/chunks/{_typeahead-C9g4qCcE.js → _typeahead-BYw0HEgO.js} +1 -1
  29. data/dist/chunks/_weekday_stacked-DumiyWjh.js +45 -0
  30. data/dist/chunks/vendor.js +1 -1
  31. data/dist/playbook-doc.js +1 -1
  32. data/dist/playbook-rails-react-bindings.js +1 -1
  33. data/dist/playbook-rails.js +1 -1
  34. data/lib/playbook/version.rb +1 -1
  35. metadata +4 -29
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
  38. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
  39. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
  40. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
  41. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
  42. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
  43. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
  44. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
  45. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
  46. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
  47. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
  48. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
  49. data/app/pb_kits/playbook/pb_timeline/_date_area.tsx +0 -38
  50. data/app/pb_kits/playbook/pb_timeline/_detail_area.tsx +0 -29
  51. data/app/pb_kits/playbook/pb_timeline/_node_area.tsx +0 -42
  52. data/app/pb_kits/playbook/pb_timeline/date_area.html.erb +0 -12
  53. data/app/pb_kits/playbook/pb_timeline/date_area.rb +0 -13
  54. data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb +0 -3
  55. data/app/pb_kits/playbook/pb_timeline/detail_area.rb +0 -11
  56. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
  57. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -72
  58. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -4
  59. data/app/pb_kits/playbook/pb_timeline/node_area.html.erb +0 -14
  60. data/app/pb_kits/playbook/pb_timeline/node_area.rb +0 -16
  61. data/dist/chunks/_weekday_stacked-C2sJArua.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: '02039c67b4d3fb70f8dea1e72a58013b445d9d26d02acaa5f2e4b125971e5709'
4
- data.tar.gz: 684ce328f0f090cc82523b9978a0f0acc347647573709bb8eebd953579f7f780
3
+ metadata.gz: 68369e36929721ec45f47ea96b446fb8724945893b925fd1763963d14f79179e
4
+ data.tar.gz: cfe0ca500c66348ff8376677f689382862a58c42b55f857f9fcb01f4f91c347d
5
5
  SHA512:
6
- metadata.gz: 5e177ffb5dd0b888a415c43fd6f3c4371ab4d6bbfc1e2c7c69a217665b0115abe40dc4f52cc5e0db54a1faf928efcf7b4bae855e6ea176a7646cb950c57a9cfe
7
- data.tar.gz: 867747f3103ca68179d5fbed37decb7e11d428c8d687ba4f4db980facd6c1d73a246f04cb022a6f75c00b18c40bbe1a57d5dfdc3e9efbe436386d8509990fc64
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, forwardRef, useImperativeHandle } from "react";
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
- interface DropdownComponent
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
- }) as DropdownComponent
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'
@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
62
62
  const focusedClass = isFocused && "focused";
63
63
 
64
64
  const selectedClass = `${
65
- selected?.label === option.label
65
+ selected.label === option.label
66
66
  ? "selected"
67
67
  : "list"
68
68
  }`;
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
73
73
  !autocomplete && "select_only"
74
74
  );
75
75
 
76
- const customDisplayPlaceholder = selected?.label ? (
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?.label
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 != null && results >=0 && title) {
38
+ if (results && title) {
41
39
  return (
42
40
  <>
43
41
  {resultTitle()}
44
42
  </>
45
43
  )
46
- } else if (results !=null && results >=0 ) {
44
+ } else if (results) {
47
45
  return (
48
46
  <>
49
47
  {justResults()}
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
78
78
  double
79
79
  minWidth="375px"
80
80
  onSortChange={SortingChangeCallback}
81
- results={0}
81
+ results={1}
82
82
  sortOptions={{
83
83
  popularity: 'Popularity',
84
84
  // eslint-disable-next-line
@@ -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(filteredProps),
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'