playbook_ui 13.15.0.pre.alpha.PLAY10831873 → 13.15.0.pre.alpha.PLAY10851907

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +4 -2
  3. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +5 -3
  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_stat_value/_icon_stat_value.tsx +2 -3
  11. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +2 -3
  12. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +51 -50
  13. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +20 -19
  14. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +4 -3
  15. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -4
  16. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  17. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  18. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +19 -17
  19. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  20. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +23 -21
  21. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +18 -10
  22. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +46 -23
  23. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  24. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  25. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +17 -15
  26. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +9 -7
  27. data/app/pb_kits/playbook/pb_select/_select.tsx +1 -1
  28. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +25 -24
  29. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +27 -26
  30. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +2 -1
  31. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  32. data/dist/playbook-rails.js +2 -2
  33. data/lib/playbook/version.rb +1 -1
  34. metadata +2 -2
data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx CHANGED
@@ -62,6 +62,7 @@ const formatAllCountries = () => {
62
62
  formatAllCountries()
63
63
 
64
64
  const containOnlyNumbers = (value: string) => {
65
+ // eslint-disable-next-line no-useless-escape
65
66
  return /^[()+\-\ .\d]*$/g.test(value)
66
67
  }
67
68
 
@@ -259,9 +260,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
259
260
  if (required) textInputProps.required = true
260
261
 
261
262
  return (
262
- <div
263
- {...wrapperProps}
264
- {...htmlProps}
263
+ <div
264
+ {...wrapperProps}
265
+ {...htmlProps}
265
266
  >
266
267
  <TextInput
267
268
  ref={
data/app/pb_kits/playbook/pb_popover/_popover.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/no-multi-comp */
1
2
  import React, { useEffect, useState } from "react";
2
3
  import ReactDOM from "react-dom";
3
4
  import {
@@ -54,7 +55,7 @@ const popoverModifiers = ({
54
55
  offset,
55
56
  }: {
56
57
  modifiers: Modifier<any> & any;
57
- offset: {};
58
+ offset: boolean;
58
59
  }) => {
59
60
  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
60
61
  };
@@ -143,7 +144,7 @@ const Popover = (props: PbPopoverProps) => {
143
144
  );
144
145
  };
145
146
 
146
- const PbReactPopover = (props: PbPopoverProps) => {
147
+ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
147
148
  const [targetId] = useState(_uniqueId('id-'))
148
149
  const {
149
150
  className,
@@ -226,9 +227,10 @@ const PbReactPopover = (props: PbPopoverProps) => {
226
227
  <PopperReference>
227
228
  {({ ref }) => (
228
229
  <span
229
- id={"reference-" + targetId}
230
230
  className="pb_popover_reference_wrapper"
231
- ref={ref}>
231
+ id={"reference-" + targetId}
232
+ ref={ref}
233
+ >
232
234
  <reference.type {...reference.props} />
233
235
  </span>
234
236
  )}
data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx CHANGED
@@ -20,6 +20,14 @@ 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
+
23
31
  const showSteps = (steps: number, active: number, dark: boolean) => {
24
32
  const items = []
25
33
 
@@ -30,14 +38,6 @@ const showSteps = (steps: number, active: number, dark: boolean) => {
30
38
  return items
31
39
  }
32
40
 
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>
data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx CHANGED
@@ -18,7 +18,7 @@ type ProgressSimpleProps = {
18
18
  width: string,
19
19
  }
20
20
 
21
- const ProgressSimple = (props: ProgressSimpleProps) => {
21
+ const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
22
22
  const {
23
23
  align,
24
24
  className,
@@ -57,9 +57,9 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
57
57
 
58
58
  return (
59
59
  <div
60
- {...dataProps}
61
- {...htmlProps}
62
- className={wrapperClass}
60
+ {...dataProps}
61
+ {...htmlProps}
62
+ className={wrapperClass}
63
63
  >
64
64
  <div
65
65
  className={kitClass}
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx CHANGED
@@ -7,7 +7,7 @@ import Tooltip from "../../pb_tooltip/_tooltip";
7
7
 
8
8
  type EditorButtonProps = {
9
9
  classname?: string,
10
- onclick?: () => {} | void,
10
+ onclick?: () => undefined | void,
11
11
  icon?: string;
12
12
  text?: string;
13
13
  disable?: boolean
@@ -19,29 +19,31 @@ const EditorButton = ({
19
19
  onclick,
20
20
  icon,
21
21
  text,
22
- }: EditorButtonProps) => {
22
+ }: EditorButtonProps): React.ReactElement => {
23
23
  return (
24
- <Tooltip
25
- delay={{
24
+ <Tooltip
25
+ delay={{
26
26
  open: 2000
27
27
  }}
28
- interaction
29
- placement="top"
30
- text={text}
28
+ interaction
29
+ placement="top"
30
+ text={text}
31
31
  >
32
32
  <button
33
- className={classname}
34
- disabled={disable}
35
- onClick={onclick}
36
- role="button"
37
- type="button"
33
+ className={classname}
34
+ disabled={disable}
35
+ onClick={onclick}
36
+ role="button"
37
+ type="button"
38
38
  >
39
- <Flex
40
- align="center"
41
- className="toolbar_button_icon"
42
- justify="center"
39
+ <Flex
40
+ align="center"
41
+ className="toolbar_button_icon"
42
+ justify="center"
43
43
  >
44
- <Icon icon={icon} size="lg" />
44
+ <Icon icon={icon}
45
+ size="lg"
46
+ />
45
47
  </Flex>
46
48
  </button>
47
49
  </Tooltip>
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts CHANGED
@@ -3,7 +3,7 @@ export type ToolbarTypes = {
3
3
  icon?: string,
4
4
  isActive?: string | null,
5
5
  text?: string,
6
- onclick?: () => {}
6
+ onclick?: () => undefined
7
7
  classname?: string
8
8
  disable?: boolean
9
9
  }
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx CHANGED
@@ -20,17 +20,19 @@ const MoreExtensionsDropdown = ({extensions}: any) => {
20
20
 
21
21
  const popoverReference = (
22
22
  <button
23
- className="toolbar_button"
24
- onClick={handleTogglePopover}
25
- role="button"
26
- type="button"
23
+ className="toolbar_button"
24
+ onClick={handleTogglePopover}
25
+ role="button"
26
+ type="button"
27
27
  >
28
28
  <Flex
29
- align="center"
30
- className="toolbar_button_icon"
31
- justify="center"
29
+ align="center"
30
+ className="toolbar_button_icon"
31
+ justify="center"
32
32
  >
33
- <Icon icon="ellipsis" size="lg" />
33
+ <Icon icon="ellipsis"
34
+ size="lg"
35
+ />
34
36
  </Flex>
35
37
  </button>
36
38
 
@@ -46,21 +48,21 @@ const popoverReference = (
46
48
  show={showPopover}
47
49
  >
48
50
  <Nav
49
- paddingTop={extensions.length > 1 ? "xs" : "none"}
50
- paddingBottom={extensions.length > 1 ? "xs" : "none"}
51
- variant="subtle"
51
+ paddingBottom={extensions.length > 1 ? "xs" : "none"}
52
+ paddingTop={extensions.length > 1 ? "xs" : "none"}
53
+ variant="subtle"
52
54
  >
53
- {extensions && extensions.map(({ icon, text, onclick, isActive}:any, index:number) => (
55
+ {extensions && extensions.map(({ icon, text, onclick, isActive}: any, index: number) => (
54
56
  <NavItem
55
- cursor="pointer"
56
- className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
57
- iconLeft={icon}
58
- key={`${text}_${index}`}
59
- margin='none'
60
- onClick={()=> {onclick(); setShowPopover(false)}}
61
- text={text}
62
- paddingTop='xxs'
63
- paddingBottom='xxs'
57
+ className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
58
+ cursor="pointer"
59
+ iconLeft={icon}
60
+ key={`${text}_${index}`}
61
+ margin='none'
62
+ onClick={()=> {onclick(); setShowPopover(false)}}
63
+ paddingBottom='xxs'
64
+ paddingTop='xxs'
65
+ text={text}
64
66
  />
65
67
  ))}
66
68
  </Nav>
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx CHANGED
@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
11
11
  import ToolbarHistoryItems from "./ToolbarHistory";
12
12
  import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
13
13
 
14
- const EditorToolbar = ({ editor, extensions }:any) => {
14
+ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
15
15
  const toolbaritems = [
16
16
  {
17
17
  icon: "bold",
@@ -34,19 +34,27 @@ const EditorToolbar = ({ editor, extensions }:any) => {
34
34
  ]
35
35
 
36
36
  return (
37
- <Background backgroundColor="white" className="toolbar">
38
- <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
39
- <FlexItem className="toolbar_block" displayFlex>
37
+ <Background backgroundColor="white"
38
+ className="toolbar"
39
+ >
40
+ <Flex flex="0"
41
+ justify="between"
42
+ paddingX="sm"
43
+ paddingY="xxs"
44
+ >
45
+ <FlexItem className="toolbar_block"
46
+ displayFlex
47
+ >
40
48
  <ToolbarDropdown editor={editor}/>
41
49
  <SectionSeparator orientation="vertical" />
42
50
  {toolbaritems && toolbaritems.map(
43
- ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
51
+ ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
44
52
  <EditorButton
45
- classname={classname}
46
- icon={icon}
47
- key={index}
48
- text={text}
49
- onclick={onclick}
53
+ classname={classname}
54
+ icon={icon}
55
+ key={index}
56
+ onclick={onclick}
57
+ text={text}
50
58
  />
51
59
  )
52
60
  )}
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx CHANGED
@@ -9,7 +9,7 @@ import NavItem from '../../pb_nav/_item'
9
9
 
10
10
  import { ToolbarTypes } from './EditorTypes'
11
11
 
12
- const ToolbarDropdown = ({editor}: any) => {
12
+ const ToolbarDropdown = ({editor}: any): React.ReactElement => {
13
13
  const [showPopover, setShowPopover] = useState(false)
14
14
 
15
15
  const toolbarDropdownItems = [
@@ -81,11 +81,21 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
81
81
  if (isActive) {
82
82
  activeCount ++
83
83
  activeItems.push(
84
- <Flex align="center" key={icon} gap="xs">
85
- <Icon icon={icon} size="lg" />
84
+ <Flex align="center"
85
+ gap="xs"
86
+ key={icon}
87
+ >
88
+ <Icon icon={icon}
89
+ size="lg"
90
+ />
86
91
  <div>{text}</div>
87
- <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
88
- <Icon fixedWidth icon="angle-down" margin-left="xs" />
92
+ <Flex className={showPopover ? "fa-flip-vertical" : ""}
93
+ display="inline_flex"
94
+ >
95
+ <Icon fixedWidth
96
+ icon="angle-down"
97
+ margin-left="xs"
98
+ />
89
99
  </Flex>
90
100
  </Flex>
91
101
  );
@@ -93,7 +103,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
93
103
  }
94
104
 
95
105
  const popoverReference = (
96
- <Button className="editor-dropdown-button" onClick={handleTogglePopover} variant="secondary">
106
+ <Button className="editor-dropdown-button"
107
+ onClick={handleTogglePopover}
108
+ variant="secondary"
109
+ >
97
110
  {
98
111
  activeCount === 2 ? (
99
112
  activeItems[1]
@@ -101,11 +114,21 @@ const popoverReference = (
101
114
  activeCount === 1 ? (
102
115
  activeItems[0] || null
103
116
  ) : (
104
- <Flex align="center" key="paragraph" gap="xs">
105
- <Icon icon="paragraph" size="lg" />
117
+ <Flex align="center"
118
+ gap="xs"
119
+ key="paragraph"
120
+ >
121
+ <Icon icon="paragraph"
122
+ size="lg"
123
+ />
106
124
  <div>Paragraph</div>
107
- <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
108
- <Icon fixedWidth icon="angle-down" margin-left="xs" />
125
+ <Flex className={showPopover ? "fa-flip-vertical" : ""}
126
+ display="inline_flex"
127
+ >
128
+ <Icon fixedWidth
129
+ icon="angle-down"
130
+ margin-left="xs"
131
+ />
109
132
  </Flex>
110
133
  </Flex>
111
134
  )
@@ -124,21 +147,21 @@ const popoverReference = (
124
147
  show={showPopover}
125
148
  >
126
149
  <Nav
127
- paddingTop="xs"
128
- paddingBottom="xs"
129
- variant="subtle"
150
+ paddingBottom="xs"
151
+ paddingTop="xs"
152
+ variant="subtle"
130
153
  >
131
- {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
154
+ {toolbarDropdownItems.map(({ icon, text, onclick, isActive}: ToolbarTypes, index: number) => (
132
155
  <NavItem
133
- cursor="pointer"
134
- className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
135
- iconLeft={icon}
136
- key={`${text}_${index}`}
137
- margin='none'
138
- onClick={()=> {onclick(); setShowPopover(false)}}
139
- text={text}
140
- paddingTop='xxs'
141
- paddingBottom='xxs'
156
+ className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
157
+ cursor="pointer"
158
+ iconLeft={icon}
159
+ key={`${text}_${index}`}
160
+ margin='none'
161
+ onClick={()=> {onclick(); setShowPopover(false)}}
162
+ paddingBottom='xxs'
163
+ paddingTop='xxs'
164
+ text={text}
142
165
  />
143
166
  ))}
144
167
  </Nav>
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx CHANGED
@@ -3,7 +3,7 @@ import FlexItem from "../../pb_flex/_flex_item";
3
3
  import EditorButton from "./EditorButton";
4
4
  import { ToolbarTypes } from "./EditorTypes";
5
5
 
6
- const ToolbarHistoryItems = ({editor}:any) => {
6
+ const ToolbarHistoryItems = ({editor}: any): React.ReactElement => {
7
7
 
8
8
  const toolbarHistoryItems = [
9
9
  {
@@ -26,14 +26,14 @@ const toolbarHistoryItems = [
26
26
  <>
27
27
  <FlexItem displayFlex>
28
28
  {toolbarHistoryItems.map(
29
- ({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
29
+ ({ onclick, classname, disable, icon, text }: ToolbarTypes, index: number) => (
30
30
  <EditorButton
31
- classname={classname}
32
- onclick={onclick}
33
- disable={disable}
34
- icon={icon}
35
- key={index}
36
- text={text}
31
+ classname={classname}
32
+ disable={disable}
33
+ icon={icon}
34
+ key={index}
35
+ onclick={onclick}
36
+ text={text}
37
37
  />
38
38
  )
39
39
  )}
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx CHANGED
@@ -2,7 +2,7 @@ import React, {useCallback} from "react";
2
2
  import EditorButton from "./EditorButton";
3
3
  import { ToolbarTypes } from "./EditorTypes";
4
4
 
5
- const ToolbarNodes = ({editor}:any) => {
5
+ const ToolbarNodes = ({editor}: any): React.ReactElement => {
6
6
 
7
7
  // eslint-disable-next-line react-hooks/rules-of-hooks
8
8
  const setLink = useCallback(() => {
@@ -42,13 +42,13 @@ const toolbarNodesItems = [
42
42
 
43
43
  return (
44
44
  <>
45
- {toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
45
+ {toolbarNodesItems.map(({ onclick, icon, text, isActive }: ToolbarTypes, index: number) => (
46
46
  <EditorButton
47
- classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
48
- onclick={onclick}
49
- icon={icon}
50
- key={index}
51
- text={text}
47
+ classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
48
+ icon={icon}
49
+ key={index}
50
+ onclick={onclick}
51
+ text={text}
52
52
  />
53
53
  ))}
54
54
  </>
data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx CHANGED
@@ -17,27 +17,27 @@ import { TrixEditor } from "react-trix"
17
17
  import EditorToolbar from './TipTap/Toolbar'
18
18
 
19
19
  type Editor = {
20
- attributeIsActive?: Function,
20
+ attributeIsActive?: ([any]: string) => boolean,
21
21
  element?: HTMLElement,
22
- getSelectedDocument?: Function,
22
+ getSelectedDocument?: () => any,
23
23
  getSelectedRange?: () => Array<number>,
24
- insertHTML?: Function,
25
- loadHTML?: Function,
26
- setSelectedRange?: (range: Array<number>) => void,
24
+ insertHTML?: ([any]: string) => void,
25
+ loadHTML?: ([any]: string) => void,
26
+ setSelectedRange?: (range: Array<number>) => void,
27
27
  }
28
28
 
29
29
  type RichTextEditorProps = {
30
30
  aria?: { [key: string]: string },
31
31
  advancedEditor?: any,
32
32
  advancedEditorToolbar?: boolean,
33
- toolbarBottom?: Boolean,
33
+ toolbarBottom?: boolean,
34
34
  children?: React.ReactNode | React.ReactNode[]
35
35
  className?: string,
36
36
  data?: { [key: string]: string },
37
37
  focus?: boolean,
38
38
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
39
39
  id?: string,
40
- inline?: boolean,
40
+ inline?: boolean,
41
41
  extensions?: { [key: string]: string }[],
42
42
  name?: string,
43
43
  onChange: (html: string, text: string) => void,
@@ -49,7 +49,7 @@ type RichTextEditorProps = {
49
49
  maxWidth?: string
50
50
  } & GlobalProps
51
51
 
52
- const RichTextEditor = (props: RichTextEditorProps) => {
52
+ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
53
53
  const {
54
54
  aria = {},
55
55
  advancedEditor,
@@ -81,7 +81,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
81
81
  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
82
82
  element = editor?.element
83
83
 
84
-
85
84
  // DOM manipulation must wait for editor to be ready
86
85
  if (editor) {
87
86
  const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -117,6 +116,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
117
116
  focus
118
117
  ? (document.addEventListener('trix-focus', useFocus),
119
118
  document.addEventListener('trix-blur', useFocus),
119
+ // eslint-disable-next-line react-hooks/rules-of-hooks
120
120
  useFocus())
121
121
  : null
122
122
 
@@ -164,10 +164,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
164
164
 
165
165
  return (
166
166
  <div
167
- {...ariaProps}
168
- {...dataProps}
169
- {...htmlProps}
170
- className={css}
167
+ {...ariaProps}
168
+ {...dataProps}
169
+ {...htmlProps}
170
+ className={css}
171
171
  >
172
172
  {
173
173
  advancedEditor ? (
@@ -175,9 +175,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
175
175
  className={classnames("pb_rich_text_editor_advanced_container", {
176
176
  ["toolbar-active"]: advancedEditorToolbar,
177
177
  })}
178
- >
178
+ >
179
179
  {advancedEditorToolbar && (
180
- <EditorToolbar extensions={extensions} editor={advancedEditor}/>
180
+ <EditorToolbar editor={advancedEditor}
181
+ extensions={extensions}
182
+ />
181
183
  )}
182
184
  { children }
183
185
  </div>
data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx CHANGED
@@ -20,7 +20,7 @@ type SectionSeparatorProps = {
20
20
  variant?: "card" | "background",
21
21
  }
22
22
 
23
- const SectionSeparator = (props: SectionSeparatorProps) => {
23
+ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
24
24
  const {
25
25
  aria = {},
26
26
  children,
@@ -42,17 +42,19 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
42
42
  return (
43
43
 
44
44
  <div
45
- {...ariaProps}
46
- {...dataProps}
47
- {...htmlProps}
48
- className={classes}
49
- id={id}
45
+ {...ariaProps}
46
+ {...dataProps}
47
+ {...htmlProps}
48
+ className={classes}
49
+ id={id}
50
50
  >
51
51
  {
52
52
  children && children ||
53
53
  text && (
54
54
  <span>
55
- <Caption text={text} dark={dark} />
55
+ <Caption dark={dark}
56
+ text={text}
57
+ />
56
58
  </span>
57
59
  )
58
60
  }
data/app/pb_kits/playbook/pb_select/_select.tsx CHANGED
@@ -63,7 +63,7 @@ const Select = ({
63
63
  inline = false,
64
64
  multiple = false,
65
65
  name,
66
- onChange = () => {},
66
+ onChange = () => undefined,
67
67
  options = [],
68
68
  required = false,
69
69
  value,