playbook_ui 13.16.0 → 13.17.0.pre.alpha.nodealphaupgrade2157

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/_reset.scss +2 -2
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +62 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +127 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/README.md +288 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +95 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +51 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +5 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +63 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +8 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +98 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +246 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +345 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +52 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +49 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +18 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +59 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +18 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +60 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +3 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +52 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +5 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +63 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +3 -0
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +57 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +3 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +61 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +3 -0
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +55 -0
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md +1 -0
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +12 -0
  44. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +9 -0
  45. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +72 -0
  46. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  47. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +2 -2
  48. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +1 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  51. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  52. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  53. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  54. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  55. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  56. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  57. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  58. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  59. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  60. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  61. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  62. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  63. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  64. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  65. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  66. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  67. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  68. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  69. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  70. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  71. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  72. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +5 -7
  73. data/app/pb_kits/playbook/pb_popover/_popover.tsx +12 -14
  74. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb +30 -0
  75. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +57 -0
  76. data/app/pb_kits/playbook/pb_popover/docs/example.yml +2 -1
  77. data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
  78. data/app/pb_kits/playbook/pb_popover/popover.test.js +29 -31
  79. data/app/pb_kits/playbook/pb_table/_table.tsx +32 -29
  80. data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb +48 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_striped.jsx +58 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_striped.md +1 -0
  83. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  84. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  86. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +19 -0
  87. data/app/pb_kits/playbook/pb_table/table.rb +7 -1
  88. data/app/pb_kits/playbook/pb_table/table.test.js +5 -0
  89. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  90. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  91. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  92. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  93. data/dist/menu.yml +105 -3
  94. data/dist/playbook-rails.js +14 -6
  95. data/dist/reset.css +1 -2
  96. data/lib/playbook/version.rb +2 -2
  97. metadata +55 -7
@@ -19,7 +19,7 @@ type LightboxType = {
19
19
  id?: string,
20
20
  photos: [],
21
21
  initialPhoto?: number,
22
- onChange?: (index: number)=> {},
22
+ onChange?: (index: number)=> void,
23
23
  onClickRight?: () => void,
24
24
  onClose?: () => void,
25
25
  icon: string,
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
40
40
  id = '',
41
41
  initialPhoto = 0,
42
42
  photos,
43
- onChange = ()=>{},
43
+ onChange = () => undefined,
44
44
  onClose,
45
45
  onClickRight,
46
46
  icon = 'times',
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
107
107
  <div className="carousel">
108
108
  <Lightbox.Header
109
109
  icon={icon}
110
- onClose={onClose}
110
+ navRight={navRight}
111
111
  onClickRight={onClickRight}
112
+ onClose={onClose}
112
113
  text={description}
113
- navRight={navRight}
114
114
  title={title}
115
115
  />
116
116
  {children}
117
117
  <Carousel
118
- setIndex={setActivePhoto}
119
118
  currentIndex={activePhoto}
120
119
  onChange={handleOnSlide}
121
120
  photos={photosMap}
121
+ setIndex={setActivePhoto}
122
122
  />
123
123
  </div>
124
124
  </div>
@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
12
  type LineGraphProps = {
13
13
  align?: "left" | "right" | "center";
14
14
  axisTitle?: string;
15
- dark?: Boolean;
15
+ dark?: boolean;
16
16
  xAxisCategories: [];
17
17
  yAxisMin: number;
18
18
  yAxisMax: number;
@@ -138,15 +138,15 @@ const LineGraph = ({
138
138
 
139
139
  return (
140
140
  <HighchartsReact
141
- containerProps={{
141
+ containerProps={{
142
142
  className: classnames(globalProps(props), className),
143
143
  id: id,
144
144
  ...ariaProps,
145
145
  ...dataProps,
146
146
  ...htmlProps
147
147
  }}
148
- highcharts={Highcharts}
149
- options={options}
148
+ highcharts={Highcharts}
149
+ options={options}
150
150
  />
151
151
  );
152
152
  };
@@ -9,7 +9,7 @@ type ListProps = {
9
9
  className?: string;
10
10
  children: React.ReactNode[] | React.ReactNode;
11
11
  dark?: boolean;
12
- data?: object;
12
+ data?: Record<string, unknown>;
13
13
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
14
14
  id?: string;
15
15
  layout?: "" | "left" | "right";
@@ -72,25 +72,25 @@ const List = (props: ListProps) => {
72
72
  <div className={classes}>
73
73
  {ordered ? (
74
74
  <ol
75
- {...ariaProps}
76
- {...dataProps}
77
- {...htmlProps}
78
- className={className}
79
- id={id}
80
- role={role}
81
- tabIndex={tabIndex}
75
+ {...ariaProps}
76
+ {...dataProps}
77
+ {...htmlProps}
78
+ className={className}
79
+ id={id}
80
+ role={role}
81
+ tabIndex={tabIndex}
82
82
  >
83
83
  {childrenWithProps}
84
84
  </ol>
85
85
  ) : (
86
86
  <ul
87
- {...ariaProps}
88
- {...dataProps}
89
- {...htmlProps}
90
- className={className}
91
- id={id}
92
- role={role}
93
- tabIndex={tabIndex}
87
+ {...ariaProps}
88
+ {...dataProps}
89
+ {...htmlProps}
90
+ className={className}
91
+ id={id}
92
+ role={role}
93
+ tabIndex={tabIndex}
94
94
  >
95
95
  {childrenWithProps}
96
96
  </ul>
@@ -7,7 +7,7 @@ type ListItemProps = {
7
7
  aria?: { [key: string]: string },
8
8
  children: React.ReactNode[] | React.ReactNode,
9
9
  className?: string,
10
- data?: object,
10
+ data?: Record<string, unknown>,
11
11
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
12
  id?: string,
13
13
  tabIndex?: number,
@@ -37,18 +37,18 @@ const LoadingInline = (props: LoadingInlineProps) => {
37
37
 
38
38
  return (
39
39
  <div
40
- {...ariaProps}
41
- {...dataProps}
42
- {...htmlProps}
43
- className={classes}
44
- id={id}
40
+ {...ariaProps}
41
+ {...dataProps}
42
+ {...htmlProps}
43
+ className={classes}
44
+ id={id}
45
45
  >
46
46
  <Body color="light">
47
47
  <Icon
48
- aria={{ label: 'loading icon' }}
49
- fixedWidth
50
- icon="spinner"
51
- pulse
48
+ aria={{ label: 'loading icon' }}
49
+ fixedWidth
50
+ icon="spinner"
51
+ pulse
52
52
  />
53
53
  {' Loading'}
54
54
  </Body>
@@ -14,9 +14,9 @@ type MapProps = {
14
14
  id?: string,
15
15
  zoomBtns?: boolean,
16
16
  flyTo?: boolean,
17
- zoomInClick?: () => {},
18
- zoomOutClick?: () => {},
19
- flyToClick?: () => {},
17
+ zoomInClick?: () => void,
18
+ zoomOutClick?: () => void,
19
+ flyToClick?: () => void,
20
20
  } & GlobalProps
21
21
 
22
22
  const Map = (props: MapProps) => {
@@ -51,11 +51,11 @@ const Map = (props: MapProps) => {
51
51
  {
52
52
  zoomBtns ? (
53
53
  <Map.Controls
54
- flyTo={flyTo}
55
- flyToClick={flyToClick}
56
- zoomBtns={zoomBtns}
57
- zoomInClick={zoomInClick}
58
- zoomOutClick={zoomOutClick}
54
+ flyTo={flyTo}
55
+ flyToClick={flyToClick}
56
+ zoomBtns={zoomBtns}
57
+ zoomInClick={zoomInClick}
58
+ zoomOutClick={zoomOutClick}
59
59
  />
60
60
  ) : null
61
61
  }
@@ -6,9 +6,9 @@ import Flex from "../pb_flex/_flex";
6
6
  type MapControlTypes = {
7
7
  zoomBtns?: boolean,
8
8
  flyTo?: boolean,
9
- zoomInClick?: () => {},
10
- zoomOutClick?: () => {},
11
- flyToClick?: () => {},
9
+ zoomInClick?: () => void,
10
+ zoomOutClick?: () => void,
11
+ flyToClick?: () => void,
12
12
  children?: React.ReactNode | React.ReactNode[]
13
13
  }
14
14
 
@@ -21,19 +21,27 @@ const MapControls = ({
21
21
  children,
22
22
  }: MapControlTypes) => {
23
23
  return (
24
- <Flex className="custom-nav-control" orientation="column">
24
+ <Flex className="custom-nav-control"
25
+ orientation="column"
26
+ >
25
27
  {zoomBtns ? (
26
28
  <>
27
29
  <div className="custom-nav-control-zoom">
28
- <Button className="map-zoom-in-button" onClick={zoomInClick}>
30
+ <Button className="map-zoom-in-button"
31
+ onClick={zoomInClick}
32
+ >
29
33
  <Icon icon="plus" />
30
34
  </Button>
31
- <Button className="map-zoom-out-button" onClick={zoomOutClick}>
35
+ <Button className="map-zoom-out-button"
36
+ onClick={zoomOutClick}
37
+ >
32
38
  <Icon icon="minus" />
33
39
  </Button>
34
40
  </div>
35
41
  {flyTo ? (
36
- <Button className="map-flyto-button" onClick={flyToClick}>
42
+ <Button className="map-flyto-button"
43
+ onClick={flyToClick}
44
+ >
37
45
  <Icon icon="eye" />
38
46
  </Button>
39
47
  ) : null}
@@ -3,13 +3,15 @@ import Button from "../pb_button/_button";
3
3
  import Icon from "../pb_icon/_icon";
4
4
 
5
5
  type MapCustomButtonTypes = {
6
- onClick?: () => {};
6
+ onClick?: () => void;
7
7
  icon?: string;
8
8
  };
9
9
 
10
10
  const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
11
11
  return (
12
- <Button className="pb_map-custom-button" onClick={onClick}>
12
+ <Button className="pb_map-custom-button"
13
+ onClick={onClick}
14
+ >
13
15
  <Icon icon={icon} />
14
16
  </Button>
15
17
  );
@@ -20,7 +20,7 @@ type MessageProps = {
20
20
  avatarUrl?: string,
21
21
  children?: React.ReactChild[] | React.ReactChild,
22
22
  className?: string,
23
- data?: object,
23
+ data?: Record<string, unknown>,
24
24
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
25
25
  id?: string,
26
26
  label?: string,
@@ -7,7 +7,7 @@ type MessageMentionProps = {
7
7
  aria: { [key: string]: string },
8
8
  children?: React.ReactChild[] | React.ReactChild,
9
9
  className?: string,
10
- data?: object,
10
+ data?: Record<string, unknown>,
11
11
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
12
  id?: string,
13
13
  variant: 'user' | 'self',
@@ -34,11 +34,11 @@ const MessageMention = (props: MessageMentionProps) => {
34
34
 
35
35
  return (
36
36
  <div
37
- {...ariaProps}
38
- {...dataProps}
39
- {...htmlProps}
40
- className={classes}
41
- id={id}
37
+ {...ariaProps}
38
+ {...dataProps}
39
+ {...htmlProps}
40
+ className={classes}
41
+ id={id}
42
42
  >
43
43
  {children}
44
44
  </div>
@@ -86,6 +86,50 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
86
86
  item: []
87
87
  })
88
88
 
89
+ const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
90
+ if (!Array.isArray(tree)) {
91
+ return
92
+ }
93
+ return tree.map((item: { [key: string]: any }) => {
94
+ item.checked = check
95
+ item.children = modifyRecursive(item.children, check)
96
+ return item
97
+ })
98
+ }
99
+
100
+ // Function to map over data and add parent_id + depth property to each item
101
+ const addCheckedAndParentProperty = (
102
+ treeData: { [key: string]: any }[],
103
+ selectedIds: string[],
104
+ parent_id: string = null,
105
+ depth = 0,
106
+ ) => {
107
+ if (!Array.isArray(treeData)) {
108
+ return
109
+ }
110
+ return treeData.map((item: { [key: string]: any } | any) => {
111
+ const newItem = {
112
+ ...item,
113
+ checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
114
+ parent_id,
115
+ depth,
116
+ }
117
+ if (newItem.children && newItem.children.length > 0) {
118
+ const children =
119
+ item.checked && !returnAllSelected
120
+ ? modifyRecursive(item.children, true)
121
+ : item.children
122
+ newItem.children = addCheckedAndParentProperty(
123
+ children,
124
+ selectedIds,
125
+ newItem.id,
126
+ depth + 1
127
+ )
128
+ }
129
+ return newItem
130
+ })
131
+ }
132
+
89
133
  useEffect(() => {
90
134
  const formattedData = addCheckedAndParentProperty(
91
135
  treeData,
@@ -139,16 +183,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
139
183
  }
140
184
  }, [])
141
185
 
142
- const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
143
- if (!Array.isArray(tree)) {
144
- return
145
- }
146
- return tree.map((item: { [key: string]: any }) => {
147
- item.checked = check
148
- item.children = modifyRecursive(item.children, check)
149
- return item
150
- })
151
- }
186
+
152
187
 
153
188
  // Iterate over tree, find item and set checked or unchecked
154
189
  const modifyValue = (
@@ -206,38 +241,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
206
241
  return tree
207
242
  }
208
243
 
209
- // Function to map over data and add parent_id + depth property to each item
210
- const addCheckedAndParentProperty = (
211
- treeData: { [key: string]: any }[],
212
- selectedIds: string[],
213
- parent_id: string = null,
214
- depth = 0,
215
- ) => {
216
- if (!Array.isArray(treeData)) {
217
- return
218
- }
219
- return treeData.map((item: { [key: string]: any } | any) => {
220
- const newItem = {
221
- ...item,
222
- checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
223
- parent_id,
224
- depth,
225
- }
226
- if (newItem.children && newItem.children.length > 0) {
227
- const children =
228
- item.checked && !returnAllSelected
229
- ? modifyRecursive(item.children, true)
230
- : item.children
231
- newItem.children = addCheckedAndParentProperty(
232
- children,
233
- selectedIds,
234
- newItem.id,
235
- depth + 1
236
- )
237
- }
238
- return newItem
239
- })
240
- }
244
+
241
245
 
242
246
  // Click event for x on form pill
243
247
  const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
@@ -44,11 +44,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
44
44
  return users.slice(0, 1).map((userObject, index) => {
45
45
  return (
46
46
  <Avatar
47
- {...userObject}
48
- className="pb_multiple_users_stacked_item"
49
- dark={dark}
50
- key={index}
51
- size="xs"
47
+ {...userObject}
48
+ className="pb_multiple_users_stacked_item"
49
+ dark={dark}
50
+ key={index}
51
+ size="xs"
52
52
  />
53
53
  )
54
54
  })
@@ -59,11 +59,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
59
59
  return users.slice(1, 2).map((userObject, index) => {
60
60
  return (
61
61
  <Avatar
62
- {...userObject}
63
- className="pb_multiple_users_stacked_item second_item"
64
- dark={dark}
65
- key={index}
66
- size="xs"
62
+ {...userObject}
63
+ className="pb_multiple_users_stacked_item second_item"
64
+ dark={dark}
65
+ key={index}
66
+ size="xs"
67
67
  />
68
68
  )
69
69
  })
@@ -74,11 +74,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
74
74
  if (moreThanTwo === true) {
75
75
  return (
76
76
  <Badge
77
- className="pb_multiple_users_stacked_item second_item"
78
- dark={dark}
79
- rounded
80
- text={`+${users.length - displayCount()}`}
81
- variant="primary"
77
+ className="pb_multiple_users_stacked_item second_item"
78
+ dark={dark}
79
+ rounded
80
+ text={`+${users.length - displayCount()}`}
81
+ variant="primary"
82
82
  />
83
83
  )
84
84
  }
@@ -86,11 +86,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
86
86
 
87
87
  return (
88
88
  <div
89
- {...ariaProps}
90
- {...dataProps}
91
- {...htmlProps}
92
- className={classes}
93
- id={id}
89
+ {...ariaProps}
90
+ {...dataProps}
91
+ {...htmlProps}
92
+ className={classes}
93
+ id={id}
94
94
  >
95
95
  {firstUser()}
96
96
  {secondUser()}
@@ -18,7 +18,7 @@ type NavItemProps = {
18
18
  children?: React.ReactNode[] | React.ReactNode;
19
19
  className?: string;
20
20
  collapsible?: boolean;
21
- data?: object;
21
+ data?: Record<string, unknown>;
22
22
  dark?: boolean;
23
23
  fontSize?: "normal" | "small";
24
24
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -76,7 +76,7 @@ const NavItem = (props: NavItemProps) => {
76
76
  id,
77
77
  imageUrl,
78
78
  link,
79
- onClick = () => {},
79
+ onClick,
80
80
  target = "_self",
81
81
  text = "",
82
82
  collapsibleTrail,
@@ -205,46 +205,49 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
205
205
  {collapsible ? (
206
206
  <>
207
207
  <Collapsible
208
- className={collapsibleClasses}
209
- icon={iconRight && iconRight}
210
- iconSize="xs"
211
- id={id}
212
- collapsed={collapsed}
213
- onIconClick={onIconRightClick}
214
- onClick={onClick}
208
+ className={collapsibleClasses}
209
+ collapsed={collapsed}
210
+ icon={iconRight && iconRight}
211
+ iconSize="xs"
212
+ id={id}
213
+ onClick={onClick}
214
+ onIconClick={onIconRightClick}
215
215
  >
216
216
  <Collapsible.Main
217
- className={globalProps({ ...finalItemSpacing })}
218
- dark={dark}>
217
+ className={globalProps({ ...finalItemSpacing })}
218
+ dark={dark}
219
+ >
219
220
  <Tag
220
- {...ariaProps}
221
- {...dataProps}
222
- {...htmlProps}
223
- className={classes}
224
- id={id}
225
- href={link}
226
- target={target}
221
+ {...ariaProps}
222
+ {...dataProps}
223
+ {...htmlProps}
224
+ className={classes}
225
+ href={link}
226
+ id={id}
227
+ target={target}
227
228
  >
228
229
  {imageUrl && (
229
230
  <div
230
- className="pb_nav_list_item_icon_section_collapsible"
231
- key={imageUrl}
232
- onClick={(e) => handleIconClick(e)}
231
+ className="pb_nav_list_item_icon_section_collapsible"
232
+ key={imageUrl}
233
+ onClick={(e) => handleIconClick(e)}
233
234
  >
234
- <Image className="pb_nav_img_wrapper" url={imageUrl} />
235
+ <Image className="pb_nav_img_wrapper"
236
+ url={imageUrl}
237
+ />
235
238
  </div>
236
239
  )}
237
240
 
238
241
  {iconLeft && (
239
242
  <div
240
- className="pb_nav_list_item_icon_section_collapsible"
241
- key={iconLeft}
242
- onClick={(e) => handleIconClick(e)}
243
+ className="pb_nav_list_item_icon_section_collapsible"
244
+ key={iconLeft}
245
+ onClick={(e) => handleIconClick(e)}
243
246
  >
244
247
  <Icon
245
- className="pb_nav_list_item_icon_left_collapsible"
246
- fixedWidth
247
- icon={iconLeft}
248
+ className="pb_nav_list_item_icon_left_collapsible"
249
+ fixedWidth
250
+ icon={iconLeft}
248
251
  />
249
252
  </div>
250
253
  )}
@@ -258,27 +261,33 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
258
261
  </>
259
262
  ) : (
260
263
  <Tag
261
- {...ariaProps}
262
- {...dataProps}
263
- {...htmlProps}
264
- className={classes}
265
- id={id}
266
- href={link}
267
- onClick={onClick}
268
- target={target}
264
+ {...ariaProps}
265
+ {...dataProps}
266
+ {...htmlProps}
267
+ className={classes}
268
+ href={link}
269
+ id={id}
270
+ onClick={onClick}
271
+ target={target}
269
272
  >
270
273
  {imageUrl && (
271
- <div className="pb_nav_list_item_icon_section" key={imageUrl}>
272
- <Image className="pb_nav_img_wrapper" url={imageUrl} />
274
+ <div className="pb_nav_list_item_icon_section"
275
+ key={imageUrl}
276
+ >
277
+ <Image className="pb_nav_img_wrapper"
278
+ url={imageUrl}
279
+ />
273
280
  </div>
274
281
  )}
275
282
 
276
283
  {iconLeft && (
277
- <div className="pb_nav_list_item_icon_section" key={iconLeft}>
284
+ <div className="pb_nav_list_item_icon_section"
285
+ key={iconLeft}
286
+ >
278
287
  <Icon
279
- className="pb_nav_list_item_icon_left"
280
- fixedWidth
281
- icon={iconLeft}
288
+ className="pb_nav_list_item_icon_left"
289
+ fixedWidth
290
+ icon={iconLeft}
282
291
  />
283
292
  </div>
284
293
  )}
@@ -287,13 +296,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
287
296
 
288
297
  {iconRight && (
289
298
  <div
290
- className="pb_nav_list_item_icon_section"
291
- key={iconRight as string}
299
+ className="pb_nav_list_item_icon_section"
300
+ key={iconRight as string}
292
301
  >
293
302
  <Icon
294
- className="pb_nav_list_item_icon_right"
295
- fixedWidth
296
- icon={iconRight as string}
303
+ className="pb_nav_list_item_icon_right"
304
+ fixedWidth
305
+ icon={iconRight as string}
297
306
  />
298
307
  </div>
299
308
  )}