superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.13

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 (84) hide show
  1. package/app/styles/_modals.scss +3 -3
  2. package/app/styles/_table-list.scss +100 -11
  3. package/app/styles/grids/_grid-layout.scss +3 -0
  4. package/app-typescript/components/Dropdown.tsx +78 -37
  5. package/app-typescript/components/DurationInput.tsx +7 -1
  6. package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
  7. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
  8. package/app-typescript/components/Lists/TableList.tsx +138 -25
  9. package/app-typescript/components/SearchBar.tsx +11 -3
  10. package/app-typescript/components/TimePicker.tsx +2 -13
  11. package/dist/examples.bundle.js +361 -123
  12. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  13. package/dist/react/Dropdowns.tsx +227 -47
  14. package/dist/react/TableList.tsx +15 -119
  15. package/dist/superdesk-ui.bundle.css +84 -16
  16. package/dist/superdesk-ui.bundle.js +153 -56
  17. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  18. package/examples/pages/react/Dropdowns.tsx +227 -47
  19. package/examples/pages/react/TableList.tsx +15 -119
  20. package/package.json +1 -1
  21. package/react/components/Dropdown.d.ts +2 -1
  22. package/react/components/Dropdown.js +39 -20
  23. package/react/components/DurationInput.js +9 -1
  24. package/react/components/Layouts/CoreLayout.d.ts +1 -0
  25. package/react/components/Layouts/CoreLayout.js +1 -1
  26. package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
  27. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  28. package/react/components/Lists/TableList.d.ts +22 -6
  29. package/react/components/Lists/TableList.js +78 -19
  30. package/react/components/SearchBar.d.ts +1 -1
  31. package/react/components/SearchBar.js +15 -7
  32. package/react/components/TimePicker.d.ts +1 -5
  33. package/react/components/TimePicker.js +3 -7
  34. package/.vscode/settings.json +0 -5
  35. package/app-typescript/dist/components/Alert.d.ts +0 -16
  36. package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
  37. package/app-typescript/dist/components/Avatar.d.ts +0 -33
  38. package/app-typescript/dist/components/Badge.d.ts +0 -13
  39. package/app-typescript/dist/components/Button.d.ts +0 -23
  40. package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
  41. package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
  42. package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
  43. package/app-typescript/dist/components/Checkbox.d.ts +0 -19
  44. package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
  45. package/app-typescript/dist/components/DatePicker.d.ts +0 -37
  46. package/app-typescript/dist/components/Divider.d.ts +0 -9
  47. package/app-typescript/dist/components/DonutChart.d.ts +0 -12
  48. package/app-typescript/dist/components/Dropdown.d.ts +0 -28
  49. package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
  50. package/app-typescript/dist/components/EmptyState.d.ts +0 -11
  51. package/app-typescript/dist/components/FormLabel.d.ts +0 -9
  52. package/app-typescript/dist/components/Genie.d.ts +0 -13
  53. package/app-typescript/dist/components/GridItem.d.ts +0 -69
  54. package/app-typescript/dist/components/GridList.d.ts +0 -14
  55. package/app-typescript/dist/components/HeadingText.d.ts +0 -10
  56. package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
  57. package/app-typescript/dist/components/Icon.d.ts +0 -12
  58. package/app-typescript/dist/components/IconButton.d.ts +0 -12
  59. package/app-typescript/dist/components/IconLabel.d.ts +0 -11
  60. package/app-typescript/dist/components/Input.d.ts +0 -24
  61. package/app-typescript/dist/components/Label.d.ts +0 -15
  62. package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
  63. package/app-typescript/dist/components/Loader.d.ts +0 -8
  64. package/app-typescript/dist/components/NavButton.d.ts +0 -15
  65. package/app-typescript/dist/components/Popover.d.ts +0 -13
  66. package/app-typescript/dist/components/PropsList.d.ts +0 -15
  67. package/app-typescript/dist/components/Radio.d.ts +0 -19
  68. package/app-typescript/dist/components/RadioButton.d.ts +0 -20
  69. package/app-typescript/dist/components/Select.d.ts +0 -29
  70. package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
  71. package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
  72. package/app-typescript/dist/components/StrechBar.d.ts +0 -4
  73. package/app-typescript/dist/components/SubNav.d.ts +0 -10
  74. package/app-typescript/dist/components/Switch.d.ts +0 -12
  75. package/app-typescript/dist/components/TabCustom.d.ts +0 -25
  76. package/app-typescript/dist/components/TabList.d.ts +0 -22
  77. package/app-typescript/dist/components/Tag.d.ts +0 -9
  78. package/app-typescript/dist/components/TagInput.d.ts +0 -7
  79. package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
  80. package/app-typescript/dist/components/TimePicker.d.ts +0 -11
  81. package/app-typescript/dist/components/Tooltip.d.ts +0 -11
  82. package/app-typescript/dist/components/_Positioner.d.ts +0 -27
  83. package/app-typescript/dist/index.d.ts +0 -56
  84. package/yarn-error.log +0 -111
@@ -72,6 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
72
72
  active={this.state.mainMenuOpen}
73
73
  ariaControls='main-menu'
74
74
  menuId='main-menu'
75
+ editorFullWidth={true}
75
76
  slideInMenu={(
76
77
  <Layout.MainMenu
77
78
  headerTitle='Main Menu'
@@ -67,27 +67,112 @@ export default class DropdownDoc extends React.Component {
67
67
  <p className='docs-page__paragraph'>Add prop value <code>append = true</code> to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden.</p>
68
68
  <Markup.ReactMarkup>
69
69
  <Markup.ReactMarkupPreview>
70
- <Dropdown
71
- append={true}
72
- items={[
73
- {
74
- type: 'group', label: 'actions', items: [
75
- 'divider',
76
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
77
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
78
- { label: 'Delete', icon: 'trash', onSelect: () => 1 },
79
- 'divider',
80
- ]
81
- },
82
- {
83
- type: 'group', label: 'actions 2', items: [
84
- { label: 'Download', icon: 'download', onSelect: () => 1 },
85
- { label: 'Print', icon: 'print', onSelect: () => 1 },
86
- ]
87
- }
88
- ]}>
89
- Drop append to body
90
- </Dropdown>
70
+ <Dropdown
71
+ header={[
72
+ {
73
+ type: 'group',
74
+ label: 'Create new',
75
+ items: [
76
+ {
77
+ type: 'submenu',
78
+ label: 'Rundown',
79
+ icon: 'plus-sign',
80
+ items: [
81
+ {
82
+ type: 'submenu',
83
+ label: 'Show 1',
84
+ icon: 'plus-sign',
85
+ items: [
86
+
87
+ ],
88
+ },
89
+ {
90
+ type: 'submenu',
91
+ label: 'Show 2',
92
+ icon: 'plus-sign',
93
+ items: [
94
+
95
+ ],
96
+ },
97
+ ],
98
+ },
99
+ ],
100
+ },
101
+ ]}
102
+ items={[
103
+ {
104
+ type: 'group',
105
+ label: 'Create new',
106
+ items: [
107
+ {
108
+ type: 'submenu',
109
+ label: 'Rundown',
110
+ icon: 'plus-sign',
111
+ items: [
112
+ {
113
+ type: 'submenu',
114
+ label: 'Show 1',
115
+ icon: 'plus-sign',
116
+ items: [
117
+
118
+ ],
119
+ },
120
+ {
121
+ type: 'submenu',
122
+ label: 'Show 2',
123
+ icon: 'plus-sign',
124
+ items: [
125
+
126
+ ],
127
+ },
128
+ ],
129
+ },
130
+ ],
131
+ },
132
+ ]}
133
+ footer={[
134
+ {
135
+ type: 'group',
136
+ items: [
137
+ {
138
+ icon: 'rundown',
139
+ label: 'Create new Show',
140
+ onSelect: () => false,
141
+ },
142
+ ],
143
+ },
144
+ {
145
+ type: 'group',
146
+ label: 'Create new',
147
+ items: [
148
+ {
149
+ type: 'submenu',
150
+ label: 'Rundown',
151
+ icon: 'plus-sign',
152
+ items: [
153
+ {
154
+ type: 'submenu',
155
+ label: 'Show 1',
156
+ icon: 'plus-sign',
157
+ items: [
158
+
159
+ ],
160
+ },
161
+ {
162
+ type: 'submenu',
163
+ label: 'Show 2',
164
+ icon: 'plus-sign',
165
+ items: [
166
+
167
+ ],
168
+ },
169
+ ],
170
+ },
171
+ ],
172
+ },
173
+ ]}
174
+ >
175
+ </Dropdown>
91
176
  </Markup.ReactMarkupPreview>
92
177
  <Markup.ReactMarkupCode>{`
93
178
  <Dropdown
@@ -207,8 +292,8 @@ export default class DropdownDoc extends React.Component {
207
292
  <SubNav zIndex={1} color='darker'>
208
293
  <h3 className="subnav__page-title">Subnav title</h3>
209
294
  <Dropdown
210
- align='right'
211
- items={[
295
+ //align='right'
296
+ header={[
212
297
  {
213
298
  type: 'group', label: 'actions', items: [
214
299
  'divider',
@@ -225,7 +310,39 @@ export default class DropdownDoc extends React.Component {
225
310
  { label: 'Action 3', onSelect: () => 1 },
226
311
  { label: 'Action 4', onSelect: () => 1 },
227
312
  ]
228
- }]}>
313
+ }
314
+ ]}
315
+ items={[
316
+ // {
317
+ // type: 'group', label: 'actions', items: [
318
+ // 'divider',
319
+ // { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
320
+ // { label: 'Copy', icon: 'copy', onSelect: () => 1 },
321
+ // { label: 'Delete', icon: 'trash', onSelect: () => 1 },
322
+ // 'divider',
323
+ // ]
324
+ // },
325
+ // {
326
+ // type: 'submenu', label: 'Second level actions', icon: 'star', items: [
327
+ // { label: 'Action 1', onSelect: () => 1 },
328
+ // { label: 'Action 2', onSelect: () => 1 },
329
+ // { label: 'Action 3', onSelect: () => 1 },
330
+ // { label: 'Action 4', onSelect: () => 1 },
331
+ // ]
332
+ // }
333
+ ]}
334
+ footer={[
335
+
336
+ {
337
+ type: 'submenu', label: 'Second level actions', icon: 'star', items: [
338
+ { label: 'Action 1', onSelect: () => 1 },
339
+ { label: 'Action 2', onSelect: () => 1 },
340
+ { label: 'Action 3', onSelect: () => 1 },
341
+ { label: 'Action 4', onSelect: () => 1 },
342
+ ]
343
+ }
344
+ ]}
345
+ >
229
346
  <button className='sd-navbtn'>
230
347
  <i className="icon-dots-vertical"></i>
231
348
  </button>
@@ -270,42 +387,105 @@ export default class DropdownDoc extends React.Component {
270
387
  <SubNav zIndex={1} color='darker'>
271
388
  <h3 className="subnav__page-title">Subnav title</h3>
272
389
  <Dropdown
273
- align='right'
390
+ append={true}
274
391
  header={[
275
392
  {
276
- type: 'group', label: 'header actions', items: [
277
- { label: 'Header action one', icon: 'download', onSelect: () => 1 },
278
- { label: 'Header action two', icon: 'trash', onSelect: () => 1 },
279
- ]
393
+ type: 'group',
394
+ label: 'Create new',
395
+ items: [
396
+ {
397
+ type: 'submenu',
398
+ label: 'Rundown',
399
+ icon: 'plus-sign',
400
+ items: [
401
+ {
402
+ type: 'submenu',
403
+ label: 'Show 1',
404
+ icon: 'plus-sign',
405
+ items: [
406
+
407
+ ],
408
+ },
409
+ {
410
+ type: 'submenu',
411
+ label: 'Show 2',
412
+ icon: 'plus-sign',
413
+ items: [
414
+
415
+ ],
416
+ },
417
+ ],
418
+ },
419
+ ],
280
420
  },
281
421
  ]}
282
422
  items={[
283
423
  {
284
424
  type: 'group', label: 'body actions', items: [
285
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
286
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
287
- { label: 'Action 2', icon: 'envelope', onSelect: () => 1 },
288
- { label: 'Action 3', icon: 'heart', onSelect: () => 1 },
289
- { label: 'Action 4', icon: 'print', onSelect: () => 1 },
290
- { label: 'Action 5', icon: 'plus-sign', onSelect: () => 1 },
291
- { label: 'Action 6', icon: 'minus-sign', onSelect: () => 1 },
292
- { label: 'Action 7', icon: 'refresh', onSelect: () => 1 },
293
- { label: 'Action 8', icon: 'pick', onSelect: () => 1 },
294
- { label: 'Action 9', icon: 'bell', onSelect: () => 1 },
295
- { label: 'Action 10', icon: 'kill', onSelect: () => 1 },
296
- { label: 'Action 11', icon: 'settings', onSelect: () => 1 },
297
- { label: 'Action 12', icon: 'cut', onSelect: () => 1 },
425
+ {
426
+ type: 'group',
427
+ label: 'Create new',
428
+ items: [
429
+ {
430
+ type: 'submenu',
431
+ label: 'Rundown',
432
+ icon: 'plus-sign',
433
+ items: [
434
+ {
435
+ type: 'submenu',
436
+ label: 'Show 1',
437
+ icon: 'plus-sign',
438
+ items: [
439
+
440
+ ],
441
+ },
442
+ {
443
+ type: 'submenu',
444
+ label: 'Show 2',
445
+ icon: 'plus-sign',
446
+ items: [
447
+
448
+ ],
449
+ },
450
+ ],
451
+ },
452
+ ],
453
+ },
298
454
  ]
299
455
  },
300
456
  ]}
301
457
  footer={[
302
458
  {
303
- type: 'group', label: 'footer actions', items: [
304
- { label: 'Create gallery', icon: 'slideshow', onSelect: () => 1 },
305
- { label: 'Create package', icon: 'composite', onSelect: () => 1 },
306
- ]
459
+ type: 'group',
460
+ label: 'Create new',
461
+ items: [
462
+ {
463
+ type: 'submenu',
464
+ label: 'Rundown',
465
+ icon: 'plus-sign',
466
+ items: [
467
+ {
468
+ type: 'submenu',
469
+ label: 'Show 1',
470
+ icon: 'plus-sign',
471
+ items: [
472
+
473
+ ],
474
+ },
475
+ {
476
+ type: 'submenu',
477
+ label: 'Show 2',
478
+ icon: 'plus-sign',
479
+ items: [
480
+
481
+ ],
482
+ },
483
+ ],
484
+ },
485
+ ],
307
486
  },
308
- ]}>
487
+ ]}
488
+ >
309
489
  <button className='sd-navbtn'>
310
490
  <i className="icon-dots-vertical"></i>
311
491
  </button>
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown } from '../../../app-typescript';
3
+ import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown, Tooltip } from '../../../app-typescript';
4
4
  import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
5
5
 
6
6
  interface IState {
@@ -23,10 +23,14 @@ export default class TableListDoc extends React.Component<IProps, IState> {
23
23
  </>,
24
24
  center: <span>Item 1</span>,
25
25
  end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
26
- action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
27
- onClick: () => {
28
- return false;
29
- }
26
+ action: <Dropdown append={true} items={[
27
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
28
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
29
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
30
+ ]}><IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={(e) => e.stopPropagation()} /></Dropdown>,
31
+ onClick: () => console.log('single'),
32
+ onDoubleClick: () => console.log('double'),
33
+ hexColor: '#ccff00'
30
34
  },
31
35
  {
32
36
  start: <>
@@ -75,111 +79,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
75
79
  `}
76
80
  </Markup.ReactMarkupCodePreview>
77
81
 
78
- <p className="docs-page__paragraph">Basic:</p>
79
-
80
- <Markup.ReactMarkup>
81
- <Markup.ReactMarkupPreview>
82
-
83
- <TableList>
84
- <TableListItem
85
- start={
86
- <>
87
- <Label style='translucent' text='aacc' />
88
- <Label style='translucent' type='primary' text='prlg' />
89
- </>
90
- }
91
- center={
92
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
93
- }
94
- end={
95
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
96
- }
97
- action={
98
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
99
- } />
100
- <TableListItem
101
- start={
102
- <>
103
- <Label style='hollow' text='aacc' />
104
- <Label style='filled' type='primary' text='prlg' />
105
- </>
106
- }
107
- center={
108
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
109
- }
110
- end={
111
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
112
- } />
113
- <TableListItem
114
- start={
115
- <>
116
- <Label style='translucent' text='aacc' />
117
- <Label style='translucent' type='primary' text='prlg' />
118
- </>
119
- }
120
- center={
121
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
122
- }
123
- end={
124
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
125
- }
126
- action={
127
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
128
- } />
129
- </TableList>
130
-
131
- </Markup.ReactMarkupPreview>
132
- <Markup.ReactMarkupCode>{`
133
- <TableList>
134
- <TableListItem
135
- start={
136
- <>
137
- <Label style='translucent' text='aacc' />
138
- <Label style='translucent' type='primary' text='prlg' />
139
- </>
140
- }
141
- center={
142
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
143
- }
144
- end={
145
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
146
- }
147
- action={
148
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
149
- } />
150
- <TableListItem
151
- start={
152
- <>
153
- <Label style='hollow' text='aacc' />
154
- <Label style='filled' type='primary' text='prlg' />
155
- </>
156
- }
157
- center={
158
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
159
- }
160
- end={
161
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
162
- } />
163
- <TableListItem
164
- start={
165
- <>
166
- <Label style='translucent' text='aacc' />
167
- <Label style='translucent' type='primary' text='prlg' />
168
- </>
169
- }
170
- center={
171
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
172
- }
173
- end={
174
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
175
- }
176
- action={
177
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
178
- } />
179
- </TableList>
180
- `}
181
- </Markup.ReactMarkupCode>
182
- </Markup.ReactMarkup>
183
82
  <p className="docs-page__paragraph">With drag and drop functionality:</p>
184
83
  <Markup.ReactMarkup>
185
84
  <Markup.ReactMarkupPreview>
@@ -187,13 +86,13 @@ export default class TableListDoc extends React.Component<IProps, IState> {
187
86
  <TableList
188
87
  dragAndDrop
189
88
  addItem
89
+ onAddItem={(index, item) => console.log(index, item)}
190
90
  array={this.state.array}
191
91
  itemsDropdown={[
192
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
92
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1},
193
93
  { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
194
94
  { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
195
95
  ]}
196
- onClick={() => false}
197
96
  onDrag={(start, end) => console.log(start, end)}
198
97
  />
199
98
 
@@ -223,24 +122,21 @@ export default class TableListDoc extends React.Component<IProps, IState> {
223
122
  <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
224
123
  <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
225
124
  <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
125
+ <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='' />
226
126
  <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
227
127
  <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
128
+ <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
228
129
  </PropsList>
229
130
  <p className="docs-page__paragraph">array:</p>
230
- <PropsList>
231
- <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
232
- <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
233
- <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
234
- <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
235
- </PropsList>
236
- <p className="docs-page__paragraph">TableListItem</p>
237
131
  <PropsList>
238
132
  <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
239
133
  <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
240
134
  <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
241
135
  <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
242
136
  <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
137
+ <Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
243
138
  </PropsList>
139
+
244
140
 
245
141
  </section>
246
142
  )