playbook_ui 11.19.0.pre.typeahead1 → 11.20.0

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 (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_body/_body.scss +10 -1
  3. data/app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb +9 -0
  4. data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx +20 -0
  5. data/app/pb_kits/playbook/pb_body/docs/_body_styled.md +1 -0
  6. data/app/pb_kits/playbook/pb_body/docs/example.yml +2 -0
  7. data/app/pb_kits/playbook/pb_body/docs/index.js +1 -0
  8. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +7 -7
  9. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +8 -8
  10. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +69 -3
  11. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_dialog/dialog.rb +1 -1
  13. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +12 -0
  14. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +15 -7
  15. data/app/pb_kits/playbook/pb_file_upload/docs/_description.md +2 -3
  16. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +40 -0
  17. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -2
  18. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +12 -0
  20. data/app/pb_kits/playbook/pb_list/_list.tsx +97 -0
  21. data/app/pb_kits/playbook/pb_list/{_list_item.jsx → _list_item.tsx} +4 -6
  22. data/app/pb_kits/playbook/pb_popover/_popover.tsx +239 -0
  23. data/app/pb_kits/playbook/pb_popover/{index.js → index.ts} +10 -6
  24. data/app/pb_kits/playbook/pb_popover/popover.test.js +222 -0
  25. data/app/pb_kits/playbook/pb_radio/_radio.tsx +4 -4
  26. data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
  27. data/app/pb_kits/playbook/pb_selectable_card/{_selectable_card.jsx → _selectable_card.tsx} +47 -42
  28. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx +1 -2
  29. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx +1 -1
  30. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js +185 -0
  31. data/app/pb_kits/playbook/pb_selectable_icon/{_selectable_icon.jsx → _selectable_icon.tsx} +29 -32
  32. data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx +1 -5
  33. data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx +1 -4
  34. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.test.js +148 -0
  35. data/lib/playbook/version.rb +2 -2
  36. metadata +17 -10
  37. data/app/pb_kits/playbook/pb_list/_list.jsx +0 -98
  38. data/app/pb_kits/playbook/pb_popover/_popover.jsx +0 -227
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1239957037bcd6ef4b8211bd071fce1cc7b57bb2751f00fcbbe305665f024b24
4
- data.tar.gz: 6b6a529a7c84b1dbfd2911947ff891abe8eb04935cccd2623265dfa0da73cae4
3
+ metadata.gz: 44219343f1cdaffaa416fa4dd981884638d123658f40c607e52c920714e5a798
4
+ data.tar.gz: 899dd9d3fa76fd138d2657cf64ce6470c681ede3c0bb34b37481a9a6dac17b2c
5
5
  SHA512:
6
- metadata.gz: 747395a9c410e99207bdbb7d0bede2028503ec675e8754bcff0e1cf92579d3fd7e66134ad5c99417c751451968ab4f1ab9093b2036bf40985480b7a8707dfc51
7
- data.tar.gz: ae572fac37a574c478dea054368416465644b6163a3593068f7559bf3f35516c9851e3db67f84d43cd2f8d69d330bf38dd8231f15381e6199c01df198ea9b5de
6
+ metadata.gz: 16c710bf1423492bbadabea26f9ef6819622547cbbbba4ffb9add95404e270eff04639b9575b73e6a19001a94dbafa535a84aeb11e49548067626afc7b6e1bd3
7
+ data.tar.gz: a707281c6a517f9bd0df3e50aac97b5d83b6f92a12858a85b090c647543b1c11ac9f0675d2de44a3e6652314a39e6bd16d5a96907f758741df112c54bdb55fcf
@@ -1,4 +1,5 @@
1
1
  @import "./body_mixins";
2
+ @import "../tokens/titles";
2
3
 
3
4
  [class^=pb_body_kit]{
4
5
  @include pb_body($text_lt_default);
@@ -12,13 +13,21 @@
12
13
  }
13
14
  }
14
15
  }
15
-
16
16
  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
17
17
  &[class*=_#{$dark_color_name}][class*=dark]{
18
18
  @include pb_body($dark_color_value);
19
19
  }
20
20
  }
21
+ b, strong {
22
+ @include pb_title_4
23
+ }
21
24
 
25
+ a {
26
+ color: $primary;
27
+ &:hover {
28
+ color: $text_lt_default;
29
+ }
30
+ }
22
31
  @each $status_name, $status_value in $pb_body_status {
23
32
  &[class*=#{$status_name}] {
24
33
  @include pb_body($status_value);
@@ -0,0 +1,9 @@
1
+ <%= pb_rails("body") do %>
2
+ <b>This text is using the <%="<b>"%> tag</b>
3
+ <br />
4
+ <br />
5
+ <strong>This text is using the <%="<strong>"%> tag</strong>
6
+ <br />
7
+ <br />
8
+ <a href="#">This text is using the <%="<a>"%> tag</a>
9
+ <% end %>
@@ -0,0 +1,20 @@
1
+ import React from 'react'
2
+ import { Body } from '../..'
3
+
4
+ const BodyStyled = (props) => {
5
+ return (
6
+ <div>
7
+ <Body {...props}>
8
+ <b>{"This text is using the <b> tag"}</b>
9
+ <br />
10
+ <br />
11
+ <strong>{"This text is using the <strong> tag"}</strong>
12
+ <br />
13
+ <br />
14
+ <a href="#">{"This text is using the <a> tag"}</a>
15
+ </Body>
16
+ </div>
17
+ )
18
+ }
19
+
20
+ export default BodyStyled
@@ -0,0 +1 @@
1
+ Playbook styles the `b`, `strong` and `a` tags within the body kit to match Playbook's design system.
@@ -2,6 +2,8 @@ examples:
2
2
  rails:
3
3
  - body_light: Default
4
4
  - body_block: Block
5
+ - body_styled: Styled b/strong/a tags
5
6
  react:
6
7
  - body_light: Default
7
8
  - body_block: Block
9
+ - body_styled: Styled b/strong/a tags
@@ -1,2 +1,3 @@
1
1
  export { default as BodyLight } from './_body_light.jsx'
2
2
  export { default as BodyBlock } from './_body_block.jsx'
3
+ export { default as BodyStyled } from './_body_styled.jsx'
@@ -8,18 +8,18 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
8
8
  type CheckboxProps = {
9
9
  aria?: {[key: string]: string},
10
10
  checked?: boolean,
11
- children: Node,
11
+ children?: React.ReactChild[] | React.ReactChild,
12
12
  className?: string,
13
13
  dark?: boolean,
14
14
  data?: {[key: string]: string},
15
15
  error?: boolean,
16
16
  id?: string,
17
17
  indeterminate?: boolean,
18
- name: string,
19
- onChange: (event: React.FormEvent<HTMLInputElement>) => void,
20
- tabIndex: number,
21
- text: string,
22
- value: string,
18
+ name?: string,
19
+ onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
20
+ tabIndex?: number,
21
+ text?: string,
22
+ value?: string,
23
23
  } & GlobalProps
24
24
 
25
25
  const Checkbox = (props: CheckboxProps): JSX.Element => {
@@ -34,7 +34,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
34
34
  id,
35
35
  indeterminate = false,
36
36
  name = '',
37
- onChange = () => {},
37
+ onChange = () => { void 0 },
38
38
  tabIndex,
39
39
  text = '',
40
40
  value = '',
@@ -23,15 +23,15 @@ const CollapsibleContent = ({
23
23
  const contentSpacing = globalProps(props, { padding })
24
24
 
25
25
  return (
26
- <div className={classnames(contentCSS, className, contentSpacing)}>
27
- <AnimateHeight
28
- duration={300}
29
- height={context.collapsed ? 0 : 'auto'}
30
- id="bottom-section"
31
- >
26
+ <AnimateHeight
27
+ duration={400}
28
+ height={context.collapsed ? 0 : 'auto'}
29
+ id="bottom-section"
30
+ >
31
+ <div className={classnames(contentCSS, className, contentSpacing)}>
32
32
  {children}
33
- </AnimateHeight>
34
- </div>
33
+ </div>
34
+ </AnimateHeight>
35
35
  )
36
36
  }
37
37
 
@@ -9,7 +9,7 @@
9
9
 
10
10
 
11
11
  // Dialog Animations
12
-
12
+ // Dialog Animations for fading in and out from the center
13
13
  @keyframes modalFadeIn {
14
14
  from {
15
15
  transform: translate3d(0, -100%, 0);
@@ -32,6 +32,53 @@
32
32
  }
33
33
  }
34
34
 
35
+ // Dialog Animations for fading in and out from the left side
36
+ @keyframes modalFadeInLeft {
37
+ from {
38
+ transform: translate3d(-100%, 0, 0);
39
+ opacity: 0;
40
+ }
41
+ to {
42
+ transform: translate3d(0, 0, 0);
43
+ opacity: 1;
44
+ }
45
+ }
46
+
47
+ @keyframes modalFadeOutLeft {
48
+ from {
49
+ transform: translate3d(0, 0, 0);
50
+ opacity: 1;
51
+ }
52
+ to {
53
+ transform: translate3d(-50%, 0, 0);
54
+ opacity: 0;
55
+ }
56
+ }
57
+
58
+
59
+ // Dialog Animations for fading in and out from the right side
60
+ @keyframes modalFadeInRight {
61
+ from {
62
+ transform: translate3d(100%, 0, 0);
63
+ opacity: 0;
64
+ }
65
+ to {
66
+ transform: translate3d(0, 0, 0);
67
+ opacity: 1;
68
+ }
69
+ }
70
+
71
+ @keyframes modalFadeOutRight {
72
+ from {
73
+ transform: translate3d(0, 0, 0);
74
+ opacity: 1;
75
+ }
76
+ to {
77
+ transform: translate3d(50%, 0, 0);
78
+ opacity: 0;
79
+ }
80
+ }
81
+
35
82
  @keyframes overlayFade {
36
83
  from {
37
84
  opacity: 0;
@@ -63,7 +110,7 @@
63
110
  $medium: 500px;
64
111
  $large: 800px;
65
112
  $xlarge: 1150px;
66
- $animation-duration: 0.2s;
113
+ $animation-duration: .2s;
67
114
  $z-index: 100;
68
115
  $opacity_visible: 1;
69
116
  $opacity_hidden: 0;
@@ -87,6 +134,24 @@
87
134
  outline: none;
88
135
  animation-timing-function: $easeInOutQuint;
89
136
 
137
+ &[class*="_left"] {
138
+ animation-name: modalFadeInLeft;
139
+ &[class*="_before_close"] {
140
+ animation-name: modalFadeOutLeft;
141
+ animation-duration: $animation-duration;
142
+ opacity: $opacity_hidden;
143
+ }
144
+ }
145
+
146
+ &[class*="_right"] {
147
+ animation-name: modalFadeInRight;
148
+ &[class*="_before_close"] {
149
+ animation-name: modalFadeOutRight;
150
+ animation-duration: $animation-duration;
151
+ opacity: $opacity_hidden;
152
+ }
153
+ }
154
+
90
155
  &[class*="_status_size"] {
91
156
  width: $status_size;
92
157
  }
@@ -98,6 +163,7 @@
98
163
  &[class*="_md"] {
99
164
  width: $medium;
100
165
  }
166
+
101
167
 
102
168
  &[class*="_lg"] {
103
169
  width: $large;
@@ -111,7 +177,7 @@
111
177
  opacity: $opacity_visible;
112
178
  }
113
179
 
114
- &_before_close {
180
+ &[class*="_before_close"] {
115
181
  animation-name: modalFadeOut;
116
182
  animation-duration: $animation-duration;
117
183
  opacity: $opacity_hidden;
@@ -71,7 +71,7 @@ const Dialog = (props: DialogProps) => {
71
71
  const ariaProps = buildAriaProps(aria);
72
72
  const dataProps = buildDataProps(data);
73
73
  const dialogClassNames = {
74
- base: classnames("pb_dialog", buildCss("pb_dialog", size)),
74
+ base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
75
75
  afterOpen: "pb_dialog_after_open",
76
76
  beforeClose: "pb_dialog_before_close",
77
77
  };
@@ -20,7 +20,7 @@ module Playbook
20
20
  default: ""
21
21
 
22
22
  def classname
23
- generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
23
+ generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")
24
24
  end
25
25
 
26
26
  def full_height_style
@@ -25,6 +25,7 @@ function DialogTest({ props }) {
25
25
  onClose={close}
26
26
  onConfirm={() => setIsLoading(!isLoading)}
27
27
  opened={isOpen}
28
+ placement="right"
28
29
  portalClassName="portal"
29
30
  size={size}
30
31
  text={text}
@@ -98,3 +99,14 @@ test("renders the buttons", async () => {
98
99
  cleanup()
99
100
  });
100
101
 
102
+ test("renders the right placement dialog", async () => {
103
+
104
+ const { queryByText } = render(<DialogTest />);
105
+
106
+ fireEvent.click(queryByText('Open Dialog'));
107
+
108
+ await waitFor(() => expect(queryByText("Header Title is the Title Prop")));
109
+
110
+ cleanup()
111
+ });
112
+
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useCallback, useRef } from 'react'
2
- import { useDropzone } from 'react-dropzone'
2
+ import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
3
3
  import classnames from 'classnames'
4
4
 
5
5
  import { buildCss, buildDataProps, noop } from '../utilities/props'
@@ -12,6 +12,7 @@ import Card from '../pb_card/_card'
12
12
  type FileUploadProps = {
13
13
  accept?: string[],
14
14
  className?: string,
15
+ customMessage?: string,
15
16
  data?: {[key: string]: string | number},
16
17
  acceptedFilesDescription?: string,
17
18
  maxSize?: number,
@@ -28,6 +29,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
28
29
  accept = null,
29
30
  acceptedFilesDescription = '',
30
31
  className,
32
+ customMessage,
31
33
  data = {},
32
34
  maxSize,
33
35
  onFilesAccepted = noop,
@@ -38,13 +40,20 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
38
40
  onFilesAccepted(files)
39
41
  }, [onFilesAccepted])
40
42
 
41
- const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
43
+ type DropZoneProps = {
44
+ getRootProps: () => DropzoneRootProps & any;
45
+ getInputProps: () => DropzoneInputProps & any;
46
+ isDragActive: boolean;
47
+ rejectedFiles: File[];
48
+ }
49
+
50
+ const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
42
51
  accept,
43
52
  maxSize,
44
53
  onDrop,
45
54
  })
46
55
 
47
- const prevRejected: any = useRef();
56
+ const prevRejected = useRef<File[] | null>(null);
48
57
 
49
58
  const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
50
59
 
@@ -70,10 +79,9 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
70
79
  const dataProps = buildDataProps(data)
71
80
 
72
81
  const getDescription = () => {
73
- let msg = ""
74
- accept === null ? msg += 'Choose a file or drag it here.' : msg += `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`
75
- if (maxSize) msg += ` ${maxFileSizeText}`
76
- return msg
82
+ return customMessage
83
+ ? customMessage
84
+ : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
77
85
  }
78
86
 
79
87
  return (
@@ -1,8 +1,7 @@
1
- This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
1
+ This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
2
2
 
3
3
  ### Props
4
4
 
5
5
  `accept: [String]` Use this prop to set the list of valid file types
6
+ `customMessage: [String]` Use this prop to set a custom message, replacing the default text
6
7
  `onFilesAccepted: Function` The callback function, providing the list of dropped files
7
-
8
-
@@ -0,0 +1,40 @@
1
+ /* @flow */
2
+
3
+ import React, { useState } from 'react'
4
+ import {
5
+ FileUpload,
6
+ List,
7
+ ListItem,
8
+ } from '../..'
9
+
10
+ const AcceptedFilesList = ({ files }: FileList) => (
11
+ <List>
12
+ {files.map((file) => (
13
+ <ListItem key={file.name}>{file.name}</ListItem>
14
+ ))}
15
+ </List>
16
+ )
17
+
18
+ const FileUploadCustomMessage = (props) => {
19
+ const [filesToUpload, setFilesToUpload] = useState([])
20
+
21
+ const handleOnFilesAccepted = (files) => {
22
+ setFilesToUpload([...filesToUpload, ...files])
23
+ }
24
+
25
+ return (
26
+ <div>
27
+ <AcceptedFilesList
28
+ files={filesToUpload}
29
+ {...props}
30
+ />
31
+ <FileUpload
32
+ customMessage="Playbook is awesome!"
33
+ onFilesAccepted={handleOnFilesAccepted}
34
+ {...props}
35
+ />
36
+ </div>
37
+ )
38
+ }
39
+
40
+ export default FileUploadCustomMessage
@@ -1,10 +1,10 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
-
4
+
5
5
  react:
6
6
  - file_upload_default: Default List of files to upload
7
7
  - file_upload_accept: Accept only certain types of files
8
+ - file_upload_custom_message: Add a custom message
8
9
  - file_upload_custom_description: Add your one accepted files description
9
10
  - file_upload_max_size: Set a file size limit
10
-
@@ -1,4 +1,5 @@
1
1
  export { default as FileUploadDefault } from './_file_upload_default.jsx'
2
2
  export { default as FileUploadAccept } from './_file_upload_accept.jsx'
3
+ export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
3
4
  export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
4
5
  export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
@@ -38,3 +38,15 @@ test('displays max file size text', () => {
38
38
  const kit = screen.getByTestId(testid)
39
39
  expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
40
40
  })
41
+
42
+ test('displays custom message', () => {
43
+ render(
44
+ <FileUpload
45
+ customMessage={'Hello world!'}
46
+ data={{ testid: testid }}
47
+ />
48
+ )
49
+
50
+ const kit = screen.getByTestId(testid)
51
+ expect(kit).toHaveTextContent('Hello world!')
52
+ })
@@ -0,0 +1,97 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
4
+ import { globalProps } from "../utilities/globalProps";
5
+
6
+ type ListProps = {
7
+ aria?: { [key: string]: string };
8
+ borderless?: boolean;
9
+ className?: string;
10
+ children: React.ReactNode[] | React.ReactNode;
11
+ dark?: boolean;
12
+ data?: object;
13
+ id?: string;
14
+ layout: "" | "left" | "right";
15
+ ordered?: boolean;
16
+ role?: string;
17
+ tabIndex?: number;
18
+ text?: string;
19
+ size?: string;
20
+ variant?: string;
21
+ xpadding: boolean;
22
+ };
23
+
24
+ const List = (props: ListProps) => {
25
+ const {
26
+ aria = {},
27
+ borderless = false,
28
+ children,
29
+ className,
30
+ dark = false,
31
+ data = {},
32
+ id,
33
+ layout = "",
34
+ ordered = false,
35
+ role,
36
+ size = "",
37
+ tabIndex,
38
+ xpadding = false,
39
+ variant,
40
+ text,
41
+ } = props;
42
+
43
+ const layoutClass: { [key: string]: string } = {
44
+ left: "layout_left",
45
+ right: "layout_right",
46
+ default: "",
47
+ };
48
+
49
+ const childrenWithProps = React.Children.map(
50
+ children,
51
+ (child: React.ReactElement) => {
52
+ return React.cloneElement(child, { text, variant });
53
+ }
54
+ );
55
+ const ariaProps = buildAriaProps(aria);
56
+ const dataProps = buildDataProps(data);
57
+ const classes = classnames(
58
+ buildCss("pb_list_kit", layoutClass[layout], size, {
59
+ dark: dark,
60
+ borderless: borderless,
61
+ ordered: ordered,
62
+ xpadding: xpadding,
63
+ }),
64
+ globalProps(props),
65
+ className
66
+ );
67
+
68
+ return (
69
+ <div className={classes}>
70
+ {ordered ? (
71
+ <ol
72
+ {...ariaProps}
73
+ {...dataProps}
74
+ className={className}
75
+ id={id}
76
+ role={role}
77
+ tabIndex={tabIndex}
78
+ >
79
+ {childrenWithProps}
80
+ </ol>
81
+ ) : (
82
+ <ul
83
+ {...ariaProps}
84
+ {...dataProps}
85
+ className={className}
86
+ id={id}
87
+ role={role}
88
+ tabIndex={tabIndex}
89
+ >
90
+ {childrenWithProps}
91
+ </ul>
92
+ )}
93
+ </div>
94
+ );
95
+ };
96
+
97
+ export default List;
@@ -1,17 +1,15 @@
1
- /* @flow */
2
-
3
- import React, { type Node } from 'react'
1
+ import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
4
  import { globalProps } from '../utilities/globalProps'
7
5
 
8
6
  type ListItemProps = {
9
- aria?: object,
10
- children: array<Node> | Node,
7
+ aria?: { [key: string]: string },
8
+ children: React.ReactNode[] | React.ReactNode,
11
9
  className?: string,
12
10
  data?: object,
13
11
  id?: string,
14
- tabIndex?: string,
12
+ tabIndex?: number,
15
13
  }
16
14
 
17
15
  const ListItem = (props: ListItemProps) => {