playbook_ui 13.16.0.pre.alpha.fonttest1972 → 13.16.0.pre.alpha.nodejsupgrade2036

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_reset.scss +2 -2
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +2 -2
  4. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +1 -1
  5. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  6. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  7. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  8. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  9. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  10. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  12. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  13. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  14. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  15. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  16. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  18. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  19. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  20. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  21. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  22. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  23. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  25. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  26. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  27. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  28. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  29. data/dist/playbook-rails.js +14 -6
  30. data/dist/reset.css +1 -2
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +2 -2
@@ -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
  )}
@@ -12,12 +12,12 @@ type NavProps = {
12
12
  borderless?: boolean,
13
13
  children?: React.ReactNode[] | React.ReactNode,
14
14
  className?: string | string[],
15
- data?: object,
15
+ data?: Record<string, unknown>,
16
16
  dark?: boolean,
17
17
  highlight?: boolean,
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string,
20
- onClick?: React.MouseEventHandler<HTMLElement>,
20
+ onClick?: () => void,
21
21
  orientation?: "vertical" | "horizontal",
22
22
  link?: string,
23
23
  title?: string,
@@ -25,7 +25,7 @@ type NavProps = {
25
25
  itemSpacing?: SpacingObject
26
26
  } & GlobalProps
27
27
 
28
- const Nav = (props: NavProps) => {
28
+ const Nav = (props: NavProps): React.ReactElement => {
29
29
  const {
30
30
  aria = {},
31
31
  borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps) => {
37
37
  htmlOptions = {},
38
38
  id,
39
39
  link = '#',
40
- onClick = () => { },
40
+ onClick,
41
41
  orientation = 'vertical',
42
42
  title = '',
43
43
  variant = 'normal',
@@ -71,23 +71,23 @@ const childrenWithProps = React.Children.map(children, (child) => {
71
71
 
72
72
  return (
73
73
  <nav
74
- {...ariaProps}
75
- {...dataProps}
76
- {...htmlProps}
77
- className={cardCss}
78
- id={id}
74
+ {...ariaProps}
75
+ {...dataProps}
76
+ {...htmlProps}
77
+ className={cardCss}
78
+ id={id}
79
79
  >
80
80
  {title &&
81
81
  <div className="pb_nav_list_title">
82
82
  <a
83
- className="pb_nav_list_item_link_text"
84
- href={link}
85
- onClick={onClick}
83
+ className="pb_nav_list_item_link_text"
84
+ href={link}
85
+ onClick={onClick}
86
86
  >
87
87
  <Caption
88
- dark={dark}
89
- size="md"
90
- text={`${title}`}
88
+ dark={dark}
89
+ size="md"
90
+ text={`${title}`}
91
91
  />
92
92
  </a>
93
93
  </div>
@@ -148,7 +148,7 @@
148
148
  .placeholder {
149
149
  position: absolute;
150
150
  margin-right: 2px;
151
- margin-left: 2px;
151
+ margin-left: 10px;
152
152
  top: 50%;
153
153
  transform: translateY(-50%);
154
154
  box-sizing: border-box;
@@ -73,8 +73,10 @@ const TypeaheadWithHighlight = (props) => {
73
73
  Option: (highlightProps: OptionProps) => (
74
74
  <components.Option {...highlightProps}/>
75
75
  ),
76
- SingleValue: ({ data }: any) => (
77
- <span>{data.name}</span>
76
+ SingleValue: ({ ...props }) => (
77
+ <components.SingleValue {...props}>
78
+ <span>{props.data.name}</span>
79
+ </components.SingleValue>
78
80
  )
79
81
  }
80
82