playbook_ui 13.16.0.pre.alpha.PBNTR184betaflaginmenuyml2085 → 13.16.0.pre.alpha.PLAY11641991

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +12 -14
  3. data/app/pb_kits/playbook/index.js +1 -2
  4. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  6. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  7. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  8. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
  9. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  10. data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
  11. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -2
  13. data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
  14. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  15. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  18. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +22 -30
  19. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  20. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  21. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  22. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  24. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  25. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -15
  26. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +2 -4
  27. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  28. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  29. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +42 -46
  30. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  31. data/app/pb_kits/playbook/pb_nav/_item.tsx +47 -56
  32. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  33. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  34. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  35. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -4
  36. data/app/pb_kits/playbook/playbook-doc.js +0 -2
  37. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  38. data/dist/menu.yml +3 -105
  39. data/dist/playbook-rails.js +6 -14
  40. data/lib/playbook/version.rb +1 -1
  41. metadata +2 -29
  42. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +0 -30
  43. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +0 -62
  44. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +0 -5
  45. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +0 -30
  46. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +0 -61
  47. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -128
  48. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +0 -28
  49. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +0 -5
  50. data/app/pb_kits/playbook/pb_advanced_table/README.md +0 -288
  51. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +0 -95
  52. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +0 -51
  53. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +0 -5
  54. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +0 -63
  55. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +0 -8
  56. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -8
  57. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -98
  58. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -245
  59. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -56
  60. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +0 -49
  61. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +0 -13
  62. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +0 -57
  63. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
  64. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
  65. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -6
  66. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
  67. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +0 -71
  68. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +0 -12
@@ -19,7 +19,7 @@ type LightboxType = {
19
19
  id?: string,
20
20
  photos: [],
21
21
  initialPhoto?: number,
22
- onChange?: (index: number)=> void,
22
+ onChange?: (index: number)=> {},
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 = () => undefined,
43
+ onChange = ()=>{},
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
- navRight={navRight}
111
- onClickRight={onClickRight}
112
110
  onClose={onClose}
111
+ onClickRight={onClickRight}
113
112
  text={description}
113
+ navRight={navRight}
114
114
  title={title}
115
115
  />
116
116
  {children}
117
117
  <Carousel
118
+ setIndex={setActivePhoto}
118
119
  currentIndex={activePhoto}
119
120
  onChange={handleOnSlide}
120
121
  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?: Record<string, unknown>;
12
+ data?: object;
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?: Record<string, unknown>,
10
+ data?: object,
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?: () => void,
18
- zoomOutClick?: () => void,
19
- flyToClick?: () => void,
17
+ zoomInClick?: () => {},
18
+ zoomOutClick?: () => {},
19
+ flyToClick?: () => {},
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?: () => void,
10
- zoomOutClick?: () => void,
11
- flyToClick?: () => void,
9
+ zoomInClick?: () => {},
10
+ zoomOutClick?: () => {},
11
+ flyToClick?: () => {},
12
12
  children?: React.ReactNode | React.ReactNode[]
13
13
  }
14
14
 
@@ -21,27 +21,19 @@ const MapControls = ({
21
21
  children,
22
22
  }: MapControlTypes) => {
23
23
  return (
24
- <Flex className="custom-nav-control"
25
- orientation="column"
26
- >
24
+ <Flex className="custom-nav-control" orientation="column">
27
25
  {zoomBtns ? (
28
26
  <>
29
27
  <div className="custom-nav-control-zoom">
30
- <Button className="map-zoom-in-button"
31
- onClick={zoomInClick}
32
- >
28
+ <Button className="map-zoom-in-button" onClick={zoomInClick}>
33
29
  <Icon icon="plus" />
34
30
  </Button>
35
- <Button className="map-zoom-out-button"
36
- onClick={zoomOutClick}
37
- >
31
+ <Button className="map-zoom-out-button" onClick={zoomOutClick}>
38
32
  <Icon icon="minus" />
39
33
  </Button>
40
34
  </div>
41
35
  {flyTo ? (
42
- <Button className="map-flyto-button"
43
- onClick={flyToClick}
44
- >
36
+ <Button className="map-flyto-button" onClick={flyToClick}>
45
37
  <Icon icon="eye" />
46
38
  </Button>
47
39
  ) : null}
@@ -3,15 +3,13 @@ import Button from "../pb_button/_button";
3
3
  import Icon from "../pb_icon/_icon";
4
4
 
5
5
  type MapCustomButtonTypes = {
6
- onClick?: () => void;
6
+ onClick?: () => {};
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"
13
- onClick={onClick}
14
- >
12
+ <Button className="pb_map-custom-button" onClick={onClick}>
15
13
  <Icon icon={icon} />
16
14
  </Button>
17
15
  );
@@ -20,7 +20,7 @@ type MessageProps = {
20
20
  avatarUrl?: string,
21
21
  children?: React.ReactChild[] | React.ReactChild,
22
22
  className?: string,
23
- data?: Record<string, unknown>,
23
+ data?: object,
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?: Record<string, unknown>,
10
+ data?: object,
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,50 +86,6 @@ 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
-
133
89
  useEffect(() => {
134
90
  const formattedData = addCheckedAndParentProperty(
135
91
  treeData,
@@ -183,7 +139,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
183
139
  }
184
140
  }, [])
185
141
 
186
-
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
+ }
187
152
 
188
153
  // Iterate over tree, find item and set checked or unchecked
189
154
  const modifyValue = (
@@ -241,7 +206,38 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
241
206
  return tree
242
207
  }
243
208
 
244
-
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
+ }
245
241
 
246
242
  // Click event for x on form pill
247
243
  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?: Record<string, unknown>;
21
+ data?: object;
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,49 +205,46 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
205
205
  {collapsible ? (
206
206
  <>
207
207
  <Collapsible
208
- className={collapsibleClasses}
209
- collapsed={collapsed}
210
- icon={iconRight && iconRight}
211
- iconSize="xs"
212
- id={id}
213
- onClick={onClick}
214
- onIconClick={onIconRightClick}
208
+ className={collapsibleClasses}
209
+ icon={iconRight && iconRight}
210
+ iconSize="xs"
211
+ id={id}
212
+ collapsed={collapsed}
213
+ onIconClick={onIconRightClick}
214
+ onClick={onClick}
215
215
  >
216
216
  <Collapsible.Main
217
- className={globalProps({ ...finalItemSpacing })}
218
- dark={dark}
219
- >
217
+ className={globalProps({ ...finalItemSpacing })}
218
+ dark={dark}>
220
219
  <Tag
221
- {...ariaProps}
222
- {...dataProps}
223
- {...htmlProps}
224
- className={classes}
225
- href={link}
226
- id={id}
227
- target={target}
220
+ {...ariaProps}
221
+ {...dataProps}
222
+ {...htmlProps}
223
+ className={classes}
224
+ id={id}
225
+ href={link}
226
+ target={target}
228
227
  >
229
228
  {imageUrl && (
230
229
  <div
231
- className="pb_nav_list_item_icon_section_collapsible"
232
- key={imageUrl}
233
- onClick={(e) => handleIconClick(e)}
230
+ className="pb_nav_list_item_icon_section_collapsible"
231
+ key={imageUrl}
232
+ onClick={(e) => handleIconClick(e)}
234
233
  >
235
- <Image className="pb_nav_img_wrapper"
236
- url={imageUrl}
237
- />
234
+ <Image className="pb_nav_img_wrapper" url={imageUrl} />
238
235
  </div>
239
236
  )}
240
237
 
241
238
  {iconLeft && (
242
239
  <div
243
- className="pb_nav_list_item_icon_section_collapsible"
244
- key={iconLeft}
245
- onClick={(e) => handleIconClick(e)}
240
+ className="pb_nav_list_item_icon_section_collapsible"
241
+ key={iconLeft}
242
+ onClick={(e) => handleIconClick(e)}
246
243
  >
247
244
  <Icon
248
- className="pb_nav_list_item_icon_left_collapsible"
249
- fixedWidth
250
- icon={iconLeft}
245
+ className="pb_nav_list_item_icon_left_collapsible"
246
+ fixedWidth
247
+ icon={iconLeft}
251
248
  />
252
249
  </div>
253
250
  )}
@@ -261,33 +258,27 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
261
258
  </>
262
259
  ) : (
263
260
  <Tag
264
- {...ariaProps}
265
- {...dataProps}
266
- {...htmlProps}
267
- className={classes}
268
- href={link}
269
- id={id}
270
- onClick={onClick}
271
- target={target}
261
+ {...ariaProps}
262
+ {...dataProps}
263
+ {...htmlProps}
264
+ className={classes}
265
+ id={id}
266
+ href={link}
267
+ onClick={onClick}
268
+ target={target}
272
269
  >
273
270
  {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
- />
271
+ <div className="pb_nav_list_item_icon_section" key={imageUrl}>
272
+ <Image className="pb_nav_img_wrapper" url={imageUrl} />
280
273
  </div>
281
274
  )}
282
275
 
283
276
  {iconLeft && (
284
- <div className="pb_nav_list_item_icon_section"
285
- key={iconLeft}
286
- >
277
+ <div className="pb_nav_list_item_icon_section" key={iconLeft}>
287
278
  <Icon
288
- className="pb_nav_list_item_icon_left"
289
- fixedWidth
290
- icon={iconLeft}
279
+ className="pb_nav_list_item_icon_left"
280
+ fixedWidth
281
+ icon={iconLeft}
291
282
  />
292
283
  </div>
293
284
  )}
@@ -296,13 +287,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
296
287
 
297
288
  {iconRight && (
298
289
  <div
299
- className="pb_nav_list_item_icon_section"
300
- key={iconRight as string}
290
+ className="pb_nav_list_item_icon_section"
291
+ key={iconRight as string}
301
292
  >
302
293
  <Icon
303
- className="pb_nav_list_item_icon_right"
304
- fixedWidth
305
- icon={iconRight as string}
294
+ className="pb_nav_list_item_icon_right"
295
+ fixedWidth
296
+ icon={iconRight as string}
306
297
  />
307
298
  </div>
308
299
  )}