playbook_ui 13.15.0.pre.alpha.play1141iconkitusinglibrary1956 → 13.15.0.pre.alpha.play10841940

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +33 -40
  3. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  4. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +30 -44
  5. data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -4
  6. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +2 -3
  7. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +4 -7
  8. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  9. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +9 -10
  10. data/app/pb_kits/playbook/pb_icon/_icon.tsx +5 -21
  11. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +2 -3
  12. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +2 -3
  13. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  14. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  15. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  16. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  17. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  18. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  19. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  20. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  21. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  22. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  23. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  24. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  25. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  26. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  27. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  28. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  29. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  30. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  31. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  32. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  33. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  34. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  35. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +50 -51
  36. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +19 -20
  37. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -4
  38. data/app/pb_kits/playbook/pb_popover/_popover.tsx +4 -6
  39. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  40. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  41. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +17 -19
  42. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  43. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +21 -23
  44. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +10 -18
  45. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +23 -46
  46. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  47. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  48. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +15 -17
  49. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +7 -9
  50. data/app/pb_kits/playbook/pb_select/_select.scss +4 -13
  51. data/app/pb_kits/playbook/pb_select/_select.tsx +4 -7
  52. data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -2
  53. data/app/pb_kits/playbook/pb_select/docs/index.js +0 -1
  54. data/app/pb_kits/playbook/pb_select/select.rb +1 -6
  55. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +24 -25
  56. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +26 -27
  57. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +1 -2
  58. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  59. data/dist/playbook-rails.js +4 -4
  60. data/lib/playbook/version.rb +1 -1
  61. metadata +2 -4
  62. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +0 -24
  63. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +0 -38
@@ -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>
@@ -13,26 +13,25 @@ import Flex from '../pb_flex/_flex'
13
13
  import Icon from '../pb_icon/_icon'
14
14
  import PbReactPopover from '../pb_popover/_popover'
15
15
  import TextInput from '../pb_text_input/_text_input'
16
- import { GenericObject } from "../types"
17
16
 
18
17
  type PassphraseProps = {
19
18
  aria?: { [key: string]: string },
20
19
  confirmation?: boolean,
21
20
  className?: string,
22
- data?: GenericObject,
21
+ data?: object,
23
22
  dark?: boolean,
24
23
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
25
24
  id?: string,
26
- inputProps?: GenericObject,
25
+ inputProps?: {},
27
26
  label?: string,
28
- onChange: (inputValue: string) => void,
27
+ onChange: (inputValue: String) => void,
29
28
  showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
30
29
  tips?: Array<string>,
31
30
  uncontrolled?: boolean,
32
31
  value: string,
33
32
  }
34
33
 
35
- const Passphrase = (props: PassphraseProps): React.ReactElement => {
34
+ const Passphrase = (props: PassphraseProps) => {
36
35
  const {
37
36
  aria = {},
38
37
  className,
@@ -43,7 +42,7 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
43
42
  id,
44
43
  inputProps = {},
45
44
  label = confirmation ? "Confirm Passphrase" : "Passphrase",
46
- onChange = () => undefined,
45
+ onChange = () => { },
47
46
  showTipsBelow = "always",
48
47
  tips = [],
49
48
  uncontrolled = false,
@@ -85,60 +84,60 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
85
84
  globalProps(props),
86
85
  className
87
86
  )
88
- const dataProps = buildDataProps(data)
89
- const htmlProps = buildHtmlProps(htmlOptions)
87
+ const dataProps = buildDataProps(data)
88
+ const htmlProps = buildHtmlProps(htmlOptions)
90
89
 
91
90
  const popoverReference = (
92
91
  <CircleIconButton
93
- className={tipClass}
94
- dark={dark}
95
- icon="info-circle"
96
- onClick={toggleShowPopover}
97
- variant="link"
92
+ className={tipClass}
93
+ dark={dark}
94
+ icon="info-circle"
95
+ onClick={toggleShowPopover}
96
+ variant="link"
98
97
  />
99
98
  )
100
99
 
101
100
  return (
102
101
  <div
103
- {...ariaProps}
104
- {...dataProps}
105
- {...htmlProps}
106
- className={classes}
107
- id={id}
102
+ {...ariaProps}
103
+ {...dataProps}
104
+ {...htmlProps}
105
+ className={classes}
106
+ id={id}
108
107
  >
109
108
  <label>
110
109
  <Flex align="baseline">
111
110
  <Caption
112
- className="passphrase-label"
113
- text={label}
111
+ className="passphrase-label"
112
+ text={label}
114
113
  />
115
114
  {tips.length > 0 && !confirmation &&
116
115
  <PbReactPopover
117
- className="passphrase-tips"
118
- closeOnClick="outside"
119
- placement="right"
120
- reference={popoverReference}
121
- shouldClosePopover={handleShouldClosePopover}
122
- show={showPopover}
116
+ className="passphrase-tips"
117
+ closeOnClick="outside"
118
+ placement="right"
119
+ reference={popoverReference}
120
+ shouldClosePopover={handleShouldClosePopover}
121
+ show={showPopover}
123
122
  >
124
123
  <Flex
125
- align="center"
126
- orientation="column"
124
+ align="center"
125
+ orientation="column"
127
126
  >
128
127
  <Caption
129
- marginBottom="xs"
130
- text="Tips for a good passphrase"
128
+ marginBottom="xs"
129
+ text="Tips for a good passphrase"
131
130
  />
132
131
  <div>
133
132
  {tips.map((tip, i) => (
134
133
  <Caption
135
- key={i}
136
- marginBottom="xs"
137
- size="xs"
134
+ key={i}
135
+ marginBottom="xs"
136
+ size="xs"
138
137
  >
139
138
  <Icon
140
- icon="shield-check"
141
- marginRight="xs"
139
+ icon="shield-check"
140
+ marginRight="xs"
142
141
  />
143
142
  {tip}
144
143
  </Caption>
@@ -150,30 +149,30 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
150
149
  </Flex>
151
150
  <div className="passphrase-text-input-wrapper">
152
151
  <TextInput
153
- className="passphrase-text-input"
154
- dark={dark}
155
- marginBottom="xs"
156
- onChange={handleChange}
157
- placeholder="Enter a passphrase..."
158
- type={showPassphrase ? "text" : "password"}
159
- value={displayValue}
160
- {...inputProps}
152
+ className="passphrase-text-input"
153
+ dark={dark}
154
+ marginBottom="xs"
155
+ onChange={handleChange}
156
+ placeholder="Enter a passphrase..."
157
+ type={showPassphrase ? "text" : "password"}
158
+ value={displayValue}
159
+ {...inputProps}
161
160
  />
162
161
  <span
163
- className="show-passphrase-icon"
164
- onClick={toggleShowPassphrase}
162
+ className="show-passphrase-icon"
163
+ onClick={toggleShowPassphrase}
165
164
  >
166
165
  <Body
167
- className={showPassphrase ? "hide-icon" : ""}
168
- color="light"
169
- dark={dark}
166
+ className={showPassphrase ? "hide-icon" : ""}
167
+ color="light"
168
+ dark={dark}
170
169
  >
171
170
  <Icon icon="eye-slash" />
172
171
  </Body>
173
172
  <Body
174
- className={showPassphrase ? "" : "hide-icon"}
175
- color="light"
176
- dark={dark}
173
+ className={showPassphrase ? "" : "hide-icon"}
174
+ color="light"
175
+ dark={dark}
177
176
  >
178
177
  <Icon icon="eye" />
179
178
  </Body>
@@ -7,7 +7,6 @@ import { globalProps } from '../utilities/globalProps'
7
7
  import Caption from '../pb_caption/_caption'
8
8
  import Contact from '../pb_contact/_contact'
9
9
  import Person from '../pb_person/_person'
10
- import { GenericObject } from '../types'
11
10
 
12
11
  type ContactItem = {
13
12
  contactType: string,
@@ -18,7 +17,7 @@ type ContactItem = {
18
17
  type PersonContactProps = {
19
18
  aria?: { [key: string]: string },
20
19
  className?: string | string[],
21
- data?: GenericObject,
20
+ data?: object,
22
21
  firstName: string,
23
22
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
24
23
  id?: string,
@@ -26,7 +25,7 @@ type PersonContactProps = {
26
25
  contacts?: ContactItem[],
27
26
  }
28
27
 
29
- const PersonContact = (props: PersonContactProps): React.ReactElement => {
28
+ const PersonContact = (props: PersonContactProps) => {
30
29
  const {
31
30
  aria = {},
32
31
  className,
@@ -61,35 +60,35 @@ const PersonContact = (props: PersonContactProps): React.ReactElement => {
61
60
 
62
61
  return (
63
62
  <div
64
- {...ariaProps}
65
- {...dataProps}
66
- {...htmlProps}
67
- className={classes}
68
- id={id}
63
+ {...ariaProps}
64
+ {...dataProps}
65
+ {...htmlProps}
66
+ className={classes}
67
+ id={id}
69
68
  >
70
69
  <Person
71
- firstName={firstName}
72
- lastName={lastName}
70
+ firstName={firstName}
71
+ lastName={lastName}
73
72
  />
74
73
  {validContacts().map((contactObject, index) => (
75
74
  <Contact
76
- contactDetail={contactObject.contactDetail}
77
- contactType={contactObject.contactType}
78
- contactValue={contactObject.contactValue}
79
- key={`valid-contact-${index}`}
75
+ contactDetail={contactObject.contactDetail}
76
+ contactType={contactObject.contactType}
77
+ contactValue={contactObject.contactValue}
78
+ key={`valid-contact-${index}`}
80
79
  />
81
80
  ))}
82
81
  {wrongContacts().map((contactObject, index) => (
83
82
  <div key={`wrong-contact-caption-wrapper-${index}`}>
84
83
  <Caption
85
- className="wrong_numbers"
86
- key={`wrong-contact-caption-${index}`}
87
- text="wrong number"
84
+ className="wrong_numbers"
85
+ key={`wrong-contact-caption-${index}`}
86
+ text="wrong number"
88
87
  />
89
88
  <Contact
90
- contactType={contactObject.contactType}
91
- contactValue={contactObject.contactValue}
92
- key={`wrong-contact-${index}`}
89
+ contactType={contactObject.contactType}
90
+ contactValue={contactObject.contactValue}
91
+ key={`wrong-contact-${index}`}
93
92
  />
94
93
  </div>
95
94
  ))}
@@ -62,7 +62,6 @@ const formatAllCountries = () => {
62
62
  formatAllCountries()
63
63
 
64
64
  const containOnlyNumbers = (value: string) => {
65
- // eslint-disable-next-line no-useless-escape
66
65
  return /^[()+\-\ .\d]*$/g.test(value)
67
66
  }
68
67
 
@@ -260,9 +259,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
260
259
  if (required) textInputProps.required = true
261
260
 
262
261
  return (
263
- <div
264
- {...wrapperProps}
265
- {...htmlProps}
262
+ <div
263
+ {...wrapperProps}
264
+ {...htmlProps}
266
265
  >
267
266
  <TextInput
268
267
  ref={
@@ -1,4 +1,3 @@
1
- /* eslint-disable react/no-multi-comp */
2
1
  import React, { useEffect, useState } from "react";
3
2
  import ReactDOM from "react-dom";
4
3
  import {
@@ -55,7 +54,7 @@ const popoverModifiers = ({
55
54
  offset,
56
55
  }: {
57
56
  modifiers: Modifier<any> & any;
58
- offset: boolean;
57
+ offset: {};
59
58
  }) => {
60
59
  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
61
60
  };
@@ -144,7 +143,7 @@ const Popover = (props: PbPopoverProps) => {
144
143
  );
145
144
  };
146
145
 
147
- const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
146
+ const PbReactPopover = (props: PbPopoverProps) => {
148
147
  const [targetId] = useState(_uniqueId('id-'))
149
148
  const {
150
149
  className,
@@ -227,10 +226,9 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
227
226
  <PopperReference>
228
227
  {({ ref }) => (
229
228
  <span
230
- className="pb_popover_reference_wrapper"
231
229
  id={"reference-" + targetId}
232
- ref={ref}
233
- >
230
+ className="pb_popover_reference_wrapper"
231
+ ref={ref}>
234
232
  <reference.type {...reference.props} />
235
233
  </span>
236
234
  )}
@@ -20,14 +20,6 @@ type ProgressPillsProps = {
20
20
  value?: string,
21
21
  }
22
22
 
23
- const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
24
- <div
25
- className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
26
- }`}
27
- key={step}
28
- />
29
- )
30
-
31
23
  const showSteps = (steps: number, active: number, dark: boolean) => {
32
24
  const items = []
33
25
 
@@ -38,6 +30,14 @@ const showSteps = (steps: number, active: number, dark: boolean) => {
38
30
  return items
39
31
  }
40
32
 
33
+ const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
34
+ <div
35
+ className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
36
+ }`}
37
+ key={step}
38
+ />
39
+ )
40
+
41
41
  const ProgressPills = (props: ProgressPillsProps) => {
42
42
  const {
43
43
  active = 0,
@@ -59,24 +59,24 @@ const ProgressPills = (props: ProgressPillsProps) => {
59
59
 
60
60
  return (
61
61
  <div
62
- {...ariaProps}
63
- {...dataProps}
64
- {...htmlProps}
65
- className={classes}
66
- id={id}
62
+ {...ariaProps}
63
+ {...dataProps}
64
+ {...htmlProps}
65
+ className={classes}
66
+ id={id}
67
67
  >
68
68
  {title &&
69
69
  <div className="progress_pills_status">
70
70
  <Title
71
- dark={dark}
72
- size={4}
73
- tag="h4"
74
- text={title}
71
+ dark={dark}
72
+ size={4}
73
+ tag="h4"
74
+ text={title}
75
75
  />
76
76
  <Body
77
- color="light"
78
- dark={dark}
79
- text={value}
77
+ color="light"
78
+ dark={dark}
79
+ text={value}
80
80
  />
81
81
  </div>}
82
82
  <div className="progress_pills">{showSteps(steps, active, dark)}</div>