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

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 (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,