playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary1993 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2037

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_icon/_icon.scss +48 -6
  3. data/app/pb_kits/playbook/pb_icon/_icon.tsx +89 -30
  4. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +10 -0
  5. data/app/pb_kits/playbook/pb_icon/icon.rb +23 -1
  6. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  7. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  8. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  9. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  10. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  11. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  13. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  14. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  15. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  17. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  18. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  19. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  20. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  21. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  22. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  24. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  25. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  26. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  27. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  28. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  29. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  30. data/dist/playbook-rails.js +14 -6
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +2 -2
data/app/pb_kits/playbook/pb_list/_list_item.tsx CHANGED
@@ -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,
data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx CHANGED
@@ -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>
data/app/pb_kits/playbook/pb_map/_map.tsx CHANGED
@@ -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
  }
data/app/pb_kits/playbook/pb_map/_map_controls.tsx CHANGED
@@ -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}
data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx CHANGED
@@ -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
  );
data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED
@@ -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,
data/app/pb_kits/playbook/pb_message/_message_mention.tsx CHANGED
@@ -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>
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED
@@ -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 }) => {
data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx CHANGED
@@ -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()}
data/app/pb_kits/playbook/pb_nav/_item.tsx CHANGED
@@ -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
  )}
data/app/pb_kits/playbook/pb_nav/_nav.tsx CHANGED
@@ -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>
data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss CHANGED
@@ -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;
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx CHANGED
@@ -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