superdesk-ui-framework 3.0.1-beta.15 → 3.0.1-beta.17

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 (17) hide show
  1. package/app/styles/_master-desk.scss +3 -2
  2. package/app/styles/_table-list.scss +4 -0
  3. package/app/styles/components/_sd-photo-preview.scss +2 -2
  4. package/app/styles/layout/_editor.scss +6 -0
  5. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
  6. package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
  7. package/app-typescript/components/Lists/ContentList.tsx +7 -3
  8. package/app-typescript/components/Lists/TableList.tsx +29 -16
  9. package/dist/examples.bundle.js +18 -16
  10. package/dist/superdesk-ui.bundle.css +19 -7
  11. package/dist/superdesk-ui.bundle.js +17 -15
  12. package/package.json +1 -1
  13. package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
  14. package/react/components/Layouts/AuthoringMain.js +1 -1
  15. package/react/components/Lists/ContentList.js +2 -2
  16. package/react/components/Lists/TableList.d.ts +4 -0
  17. package/react/components/Lists/TableList.js +13 -11
package/app/styles/_master-desk.scss CHANGED
@@ -171,14 +171,15 @@ $board-header-border-color: var(--color-kanban-border);
171
171
  opacity: 0.4;
172
172
  }
173
173
  }
174
- .sd-inset-search__input {
174
+ .sd-inset-search__input,
175
+ input.sd-inset-search__input {
175
176
  flex-grow: 1;
176
177
  flex-shrink: 1;
177
178
  font-size: 1.4rem;
178
179
  padding: 0;
179
180
  color: inherit;
180
181
  align-self: auto;
181
- background-color: transparent;
182
+ background-color: transparent !important;
182
183
  border: 0;
183
184
  box-shadow: none !important;
184
185
  padding: 0 1rem 0 3rem;
package/app/styles/_table-list.scss CHANGED
@@ -84,6 +84,10 @@ $table-list-palette: $sd-basic-palette;
84
84
  }
85
85
  }
86
86
  }
87
+ &--locked {
88
+ border-color: hsla(350, 70%, 60%, 0.75);
89
+ border-left-color: hsla(350, 70%, 60%, 0.75) !important;
90
+ }
87
91
  &.table-list__item--selected.table-list__item--clickable {
88
92
  &:hover {
89
93
  box-shadow: var(--sd-shadow__item--selected-thin);
package/app/styles/components/_sd-photo-preview.scss CHANGED
@@ -338,11 +338,11 @@ $photo-nav-transition: all 0.2s ease-out;
338
338
  }
339
339
 
340
340
  .sd-photo-preview__slide-in-button {
341
- position: absolute;
341
+ position: absolute !important;
342
342
  top: 2.4rem;
343
343
  right: 0;
344
344
  z-index: 2;
345
- background-color: rgba(255,255,255,0.1);
345
+ background-color: hsla(0, 0%, 100%, 0.1);
346
346
  height:4.8rem;
347
347
  width:4.8rem;
348
348
  color: $white;
package/app/styles/layout/_editor.scss CHANGED
@@ -365,12 +365,18 @@
365
365
  overflow-y: auto;
366
366
  width: auto;
367
367
  min-width: 45vw;
368
+ max-width: 45vw;
368
369
  &.sd-editor__container--large {
369
370
  min-width: 52vw;
370
371
  }
371
372
  }
372
373
  }
373
374
 
375
+ .sd-content-wrapper--editor-full .open-editor .sd-editor__container {
376
+ min-width: auto;
377
+ max-width: none;
378
+ }
379
+
374
380
  .sd-editor__input--title {
375
381
  -webkit-appearance: none;
376
382
  -moz-appearance: none;
package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx CHANGED
@@ -16,7 +16,7 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
16
16
  super(props);
17
17
 
18
18
  this.state = {
19
- collapsed: false,
19
+ collapsed: this.props.collapsed ? this.props.collapsed : false,
20
20
  };
21
21
  }
22
22
 
package/app-typescript/components/Layouts/AuthoringMain.tsx CHANGED
@@ -31,8 +31,10 @@ export class AuthoringMain extends React.PureComponent<IProps> {
31
31
  )}
32
32
  <AuthoringMainContent>
33
33
  {this.props.authoringHeader && (
34
- <AuthoringInnerHeader headerPadding={this.props.headerPadding}>
35
- {this.props.authoringHeader}
34
+ <AuthoringInnerHeader
35
+ headerPadding={this.props.headerPadding}
36
+ collapsed={this.props.headerCollapsed}>
37
+ {this.props.authoringHeader}
36
38
  </AuthoringInnerHeader>
37
39
  )}
38
40
  {this.props.authoringBookmarks && (
package/app-typescript/components/Lists/ContentList.tsx CHANGED
@@ -49,7 +49,11 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
49
49
  });
50
50
 
51
51
  return (
52
- <div className={classes} onClick={this.onSingleClick} onDoubleClick={this.onDoubleClick}>
52
+ <div
53
+ role='listitem'
54
+ className={classes}
55
+ onClick={this.onSingleClick}
56
+ onDoubleClick={this.onDoubleClick}>
53
57
  {this.props.locked
54
58
  ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
55
59
  : <div className="sd-list-item__border"></div>}
@@ -100,7 +104,7 @@ class ContentList extends React.PureComponent<IProps> {
100
104
  render() {
101
105
  let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
102
106
  return (
103
- <ul className={classes}>
107
+ <div role='list' className={classes}>
104
108
  {this.props.items.map((item, index) => {
105
109
  return <ContentListItem
106
110
  key={index}
@@ -114,7 +118,7 @@ class ContentList extends React.PureComponent<IProps> {
114
118
  onClick={item.onClick}
115
119
  onDoubleClick={item.onDoubleClick} />;
116
120
  })}
117
- </ul>
121
+ </div>
118
122
  );
119
123
  }
120
124
  }
package/app-typescript/components/Lists/TableList.tsx CHANGED
@@ -25,6 +25,8 @@ export interface IPropsArrayItem {
25
25
  hexColor?: string;
26
26
  onClick?(): void;
27
27
  onDoubleClick?(): void;
28
+ locked?: boolean;
29
+ positionLocked?: boolean;
28
30
  }
29
31
 
30
32
  interface IState {
@@ -113,7 +115,8 @@ class TableList extends React.PureComponent<IProps, IState> {
113
115
  ? <DragDropContext onDragEnd={this.onDragEnd}>
114
116
  <Droppable droppableId="droppable">
115
117
  {(provided, _snapshot) => (
116
- <ul
118
+ <div
119
+ role='list'
117
120
  className={classes}
118
121
  ref={provided.innerRef}
119
122
  {...provided.droppableProps} >
@@ -139,6 +142,8 @@ class TableList extends React.PureComponent<IProps, IState> {
139
142
  ? this.props.itemsDropdown(index)
140
143
  : []}
141
144
  hexColor={item.hexColor}
145
+ locked={item.locked}
146
+ positionLocked={item.positionLocked}
142
147
  onAddItem={() => this.props.onAddItem
143
148
  && this.props.onAddItem(index, item)}
144
149
  showDragHandle={this.props.showDragHandle}
@@ -149,19 +154,19 @@ class TableList extends React.PureComponent<IProps, IState> {
149
154
  ))}
150
155
  {provided.placeholder}
151
156
  {(this.props.addItem && !this.props.readOnly) &&
152
- <li className={`table-list__add-item table-list__item--margin`}>
157
+ <div className={`table-list__add-item table-list__item--margin`}>
153
158
  <Tooltip text='Add item' flow='top' appendToBody={true}>
154
159
  <div className='table-list__add-item--container sd-margin-x--auto'>
155
160
  {this.dropDown()}
156
161
  </div>
157
162
  </Tooltip>
158
- </li>
163
+ </div>
159
164
  }
160
- </ul>
165
+ </div>
161
166
  )}
162
167
  </Droppable>
163
168
  </DragDropContext>
164
- : <ul className={classes}>
169
+ : <div role='list' className={classes}>
165
170
  {this.state.items.map((item: IPropsArrayItem, index: number) => (
166
171
  <TableListItem
167
172
  key={index}
@@ -176,29 +181,31 @@ class TableList extends React.PureComponent<IProps, IState> {
176
181
  addItem={this.props.addItem}
177
182
  itemsDropdown={() => this.props.itemsDropdown ? this.props.itemsDropdown(index) : []}
178
183
  hexColor={item.hexColor}
184
+ locked={item.locked}
185
+ positionLocked={item.positionLocked}
179
186
  onAddItem={() => this.props.onAddItem
180
187
  && this.props.onAddItem(index, item)}
181
188
  />
182
189
  ))}
183
190
  {(this.props.addItem && !this.props.readOnly) &&
184
- <li className={`table-list__add-item table-list__item--margin`}>
191
+ <div className={`table-list__add-item table-list__item--margin`}>
185
192
  <Tooltip text='Add item' flow='top' appendToBody={true}>
186
193
  <div className='table-list__add-item--container sd-margin-x--auto'>
187
194
  {this.dropDown()}
188
195
  </div>
189
196
  </Tooltip>
190
- </li>
197
+ </div>
191
198
  }
192
- </ul>
193
- : (this.props.addItem && !this.props.readOnly) ? <ul className={classes}>
194
- <li className={`table-list__add-item table-list__item--margin`}>
199
+ </div>
200
+ : (this.props.addItem && !this.props.readOnly) ? <div role='list' className={classes}>
201
+ <div className={`table-list__add-item table-list__item--margin`}>
195
202
  <Tooltip text='Add item' flow='top' appendToBody={true}>
196
203
  <div className='table-list__add-item--container sd-margin-x--auto'>
197
204
  {this.dropDown()}
198
205
  </div>
199
206
  </Tooltip>
200
- </li>
201
- </ul>
207
+ </div>
208
+ </div>
202
209
  : null
203
210
  );
204
211
  }
@@ -213,6 +220,8 @@ export interface IPropsItem {
213
220
  dragAndDrop?: boolean;
214
221
  hexColor?: string;
215
222
  showDragHandle?: 'always' | 'onHover' | 'none';
223
+ locked?: boolean;
224
+ positionLocked?: boolean;
216
225
  onClick?(): void;
217
226
  onDoubleClick?(): void;
218
227
  onSelect?(): void;
@@ -251,14 +260,17 @@ class TableListItem extends React.PureComponent<IPropsItem> {
251
260
  let classes = classNames('table-list__item', {
252
261
  'table-list__item--clickable': this.props.onClick,
253
262
  'table-list__item--draggable': this.props.dragAndDrop,
263
+ 'table-list__item--locked': this.props.locked,
264
+ 'table-list__item--position-locked': this.props.positionLocked,
254
265
  'table-list__item--drag-handles-always': !this.props.showDragHandle,
255
266
  'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
256
267
  });
257
268
 
258
269
  return (
259
270
  this.props.addItem ?
260
- <li className='table-list__item-container'>
271
+ <div className='table-list__item-container'>
261
272
  <div
273
+ role='listitem'
262
274
  onClick={() => this.onSingleClick()}
263
275
  onDoubleClick={() => this.onDoubleClick()}
264
276
  className={classes}>
@@ -297,8 +309,9 @@ class TableListItem extends React.PureComponent<IPropsItem> {
297
309
  </div>
298
310
  </Tooltip>
299
311
  </div>
300
- </li>
301
- : <li
312
+ </div>
313
+ : <div
314
+ role='listitem'
302
315
  className={`${classes} table-list__item--margin`}
303
316
  onClick={() => this.onSingleClick()}
304
317
  onDoubleClick={() => this.onDoubleClick()}>
@@ -317,7 +330,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
317
330
  {this.props.action && <div className='table-list__slide-in-actions'>
318
331
  {this.props.action}
319
332
  </div>}
320
- </li>
333
+ </div>
321
334
  );
322
335
  }
323
336
  }
package/dist/examples.bundle.js CHANGED
@@ -41150,30 +41150,30 @@ var TableList = /** @class */ (function (_super) {
41150
41150
  return (this.state.items.length > 0
41151
41151
  ? this.props.dragAndDrop
41152
41152
  ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
41153
- React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
41153
+ React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: 'list', className: classes, ref: provided.innerRef }, provided.droppableProps),
41154
41154
  _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
41155
41155
  React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
41156
41156
  ? item.onDoubleClick
41157
41157
  : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
41158
41158
  ? _this.props.itemsDropdown(index)
41159
- : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
41159
+ : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
41160
41160
  && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
41161
41161
  provided.placeholder,
41162
41162
  (_this.props.addItem && !_this.props.readOnly) &&
41163
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
41163
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
41164
41164
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41165
41165
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
41166
- : React.createElement("ul", { className: classes },
41166
+ : React.createElement("div", { role: 'list', className: classes },
41167
41167
  this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
41168
41168
  ? item.onDoubleClick
41169
- : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
41169
+ : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
41170
41170
  && _this.props.onAddItem(index, item); } })); }),
41171
41171
  (this.props.addItem && !this.props.readOnly) &&
41172
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
41172
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
41173
41173
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41174
41174
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
41175
- : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
41176
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
41175
+ : (this.props.addItem && !this.props.readOnly) ? React.createElement("div", { role: 'list', className: classes },
41176
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
41177
41177
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41178
41178
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
41179
41179
  : null);
@@ -41213,12 +41213,14 @@ var TableListItem = /** @class */ (function (_super) {
41213
41213
  var classes = (0, classnames_1.default)('table-list__item', {
41214
41214
  'table-list__item--clickable': this.props.onClick,
41215
41215
  'table-list__item--draggable': this.props.dragAndDrop,
41216
+ 'table-list__item--locked': this.props.locked,
41217
+ 'table-list__item--position-locked': this.props.positionLocked,
41216
41218
  'table-list__item--drag-handles-always': !this.props.showDragHandle,
41217
41219
  'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
41218
41220
  });
41219
41221
  return (this.props.addItem ?
41220
- React.createElement("li", { className: 'table-list__item-container' },
41221
- React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
41222
+ React.createElement("div", { className: 'table-list__item-container' },
41223
+ React.createElement("div", { role: 'listitem', onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
41222
41224
  React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
41223
41225
  React.createElement("div", { className: 'table-list__item-content' },
41224
41226
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
@@ -41230,7 +41232,7 @@ var TableListItem = /** @class */ (function (_super) {
41230
41232
  React.createElement("div", { className: 'table-list__add-bar' },
41231
41233
  React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
41232
41234
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
41233
- : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
41235
+ : React.createElement("div", { role: 'listitem', className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
41234
41236
  React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
41235
41237
  React.createElement("div", { className: 'table-list__item-content' },
41236
41238
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
@@ -59779,7 +59781,7 @@ var ContentListItem = /** @class */ (function (_super) {
59779
59781
  'fetched': this.props.archived,
59780
59782
  'actioning': this.props.loading,
59781
59783
  });
59782
- return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
59784
+ return (React.createElement("div", { role: 'listitem', className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
59783
59785
  this.props.locked
59784
59786
  ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
59785
59787
  : React.createElement("div", { className: "sd-list-item__border" }),
@@ -59802,7 +59804,7 @@ var ContentList = /** @class */ (function (_super) {
59802
59804
  }
59803
59805
  ContentList.prototype.render = function () {
59804
59806
  var classes = (0, classnames_1.default)('sd-list-item-group sd-list-item-group--space-between-items');
59805
- return (React.createElement("ul", { className: classes }, this.props.items.map(function (item, index) {
59807
+ return (React.createElement("div", { role: 'list', className: classes }, this.props.items.map(function (item, index) {
59806
59808
  return React.createElement(ContentListItem, { key: index, itemColum: item.itemColum, locked: item.locked, action: item.action, loading: item.loading, activated: item.activated, selected: item.selected, archived: item.archived, onClick: item.onClick, onDoubleClick: item.onDoubleClick });
59807
59809
  })));
59808
59810
  };
@@ -101369,7 +101371,7 @@ var AuthoringMain = /** @class */ (function (_super) {
101369
101371
  return (React.createElement(_1.AuthoringMainContainer, null,
101370
101372
  this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
101371
101373
  React.createElement(_1.AuthoringMainContent, null,
101372
- this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding }, this.props.authoringHeader)),
101374
+ this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
101373
101375
  this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
101374
101376
  React.createElement(_1.AuthoringInnerBody, null, this.props.children))));
101375
101377
  };
@@ -101606,7 +101608,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
101606
101608
  function AuthoringInnerHeader(props) {
101607
101609
  var _this = _super.call(this, props) || this;
101608
101610
  _this.state = {
101609
- collapsed: false,
101611
+ collapsed: _this.props.collapsed ? _this.props.collapsed : false,
101610
101612
  };
101611
101613
  return _this;
101612
101614
  }
@@ -137766,7 +137768,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
137766
137768
  /* 649 */
137767
137769
  /***/ (function(module, exports) {
137768
137770
 
137769
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.15","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
137771
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.17","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
137770
137772
 
137771
137773
  /***/ }),
137772
137774
  /* 650 */
package/dist/superdesk-ui.bundle.css CHANGED
@@ -34495,24 +34495,28 @@ tags-input,
34495
34495
  font-family: 'sd_icons';
34496
34496
  opacity: 0.4; }
34497
34497
 
34498
- .sd-inset-search__input {
34498
+ .sd-inset-search__input,
34499
+ input.sd-inset-search__input {
34499
34500
  flex-grow: 1;
34500
34501
  flex-shrink: 1;
34501
34502
  font-size: 1.4rem;
34502
34503
  padding: 0;
34503
34504
  color: inherit;
34504
34505
  align-self: auto;
34505
- background-color: transparent;
34506
+ background-color: transparent !important;
34506
34507
  border: 0;
34507
34508
  box-shadow: none !important;
34508
34509
  padding: 0 1rem 0 3rem;
34509
34510
  height: auto;
34510
34511
  color: inherit; }
34511
- .sd-inset-search__input::-ms-clear {
34512
+ .sd-inset-search__input::-ms-clear,
34513
+ input.sd-inset-search__input::-ms-clear {
34512
34514
  display: none; }
34513
- .sd-inset-search__input:focus {
34515
+ .sd-inset-search__input:focus,
34516
+ input.sd-inset-search__input:focus {
34514
34517
  box-shadow: unset !important; }
34515
- .sd-inset-search__input::placeholder {
34518
+ .sd-inset-search__input::placeholder,
34519
+ input.sd-inset-search__input::placeholder {
34516
34520
  opacity: 0.8;
34517
34521
  font-weight: 300; }
34518
34522
 
@@ -35347,6 +35351,9 @@ tags-input,
35347
35351
  .table-list__item--draggable:active::after {
35348
35352
  opacity: 1 !important;
35349
35353
  cursor: grabbing; }
35354
+ .table-list__item--locked {
35355
+ border-color: rgba(224, 82, 105, 0.75);
35356
+ border-left-color: rgba(224, 82, 105, 0.75) !important; }
35350
35357
  .table-list__item.table-list__item--selected.table-list__item--clickable:hover {
35351
35358
  box-shadow: var(--sd-shadow__item--selected-thin); }
35352
35359
  .table-list__item:hover .table-list__slide-in-actions,
@@ -39558,10 +39565,15 @@ a.text-link {
39558
39565
  opacity: 1;
39559
39566
  overflow-y: auto;
39560
39567
  width: auto;
39561
- min-width: 45vw; }
39568
+ min-width: 45vw;
39569
+ max-width: 45vw; }
39562
39570
  .open-editor .sd-editor__container.sd-editor__container--large {
39563
39571
  min-width: 52vw; }
39564
39572
 
39573
+ .sd-content-wrapper--editor-full .open-editor .sd-editor__container {
39574
+ min-width: auto;
39575
+ max-width: none; }
39576
+
39565
39577
  .sd-editor__input--title {
39566
39578
  -webkit-appearance: none;
39567
39579
  -moz-appearance: none;
@@ -41467,7 +41479,7 @@ a.text-link {
41467
41479
  max-height: calc(100vh - 53px - 90px); }
41468
41480
 
41469
41481
  .sd-photo-preview__slide-in-button {
41470
- position: absolute;
41482
+ position: absolute !important;
41471
41483
  top: 2.4rem;
41472
41484
  right: 0;
41473
41485
  z-index: 2;
package/dist/superdesk-ui.bundle.js CHANGED
@@ -40794,30 +40794,30 @@ var TableList = /** @class */ (function (_super) {
40794
40794
  return (this.state.items.length > 0
40795
40795
  ? this.props.dragAndDrop
40796
40796
  ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
40797
- React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
40797
+ React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: 'list', className: classes, ref: provided.innerRef }, provided.droppableProps),
40798
40798
  _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
40799
40799
  React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
40800
40800
  ? item.onDoubleClick
40801
40801
  : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
40802
40802
  ? _this.props.itemsDropdown(index)
40803
- : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
40803
+ : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
40804
40804
  && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
40805
40805
  provided.placeholder,
40806
40806
  (_this.props.addItem && !_this.props.readOnly) &&
40807
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
40807
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
40808
40808
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40809
40809
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
40810
- : React.createElement("ul", { className: classes },
40810
+ : React.createElement("div", { role: 'list', className: classes },
40811
40811
  this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
40812
40812
  ? item.onDoubleClick
40813
- : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
40813
+ : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
40814
40814
  && _this.props.onAddItem(index, item); } })); }),
40815
40815
  (this.props.addItem && !this.props.readOnly) &&
40816
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
40816
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
40817
40817
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40818
40818
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
40819
- : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
40820
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
40819
+ : (this.props.addItem && !this.props.readOnly) ? React.createElement("div", { role: 'list', className: classes },
40820
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
40821
40821
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40822
40822
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
40823
40823
  : null);
@@ -40857,12 +40857,14 @@ var TableListItem = /** @class */ (function (_super) {
40857
40857
  var classes = (0, classnames_1.default)('table-list__item', {
40858
40858
  'table-list__item--clickable': this.props.onClick,
40859
40859
  'table-list__item--draggable': this.props.dragAndDrop,
40860
+ 'table-list__item--locked': this.props.locked,
40861
+ 'table-list__item--position-locked': this.props.positionLocked,
40860
40862
  'table-list__item--drag-handles-always': !this.props.showDragHandle,
40861
40863
  'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
40862
40864
  });
40863
40865
  return (this.props.addItem ?
40864
- React.createElement("li", { className: 'table-list__item-container' },
40865
- React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
40866
+ React.createElement("div", { className: 'table-list__item-container' },
40867
+ React.createElement("div", { role: 'listitem', onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
40866
40868
  React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
40867
40869
  React.createElement("div", { className: 'table-list__item-content' },
40868
40870
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
@@ -40874,7 +40876,7 @@ var TableListItem = /** @class */ (function (_super) {
40874
40876
  React.createElement("div", { className: 'table-list__add-bar' },
40875
40877
  React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
40876
40878
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
40877
- : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
40879
+ : React.createElement("div", { role: 'listitem', className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
40878
40880
  React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
40879
40881
  React.createElement("div", { className: 'table-list__item-content' },
40880
40882
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
@@ -59423,7 +59425,7 @@ var ContentListItem = /** @class */ (function (_super) {
59423
59425
  'fetched': this.props.archived,
59424
59426
  'actioning': this.props.loading,
59425
59427
  });
59426
- return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
59428
+ return (React.createElement("div", { role: 'listitem', className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
59427
59429
  this.props.locked
59428
59430
  ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
59429
59431
  : React.createElement("div", { className: "sd-list-item__border" }),
@@ -59446,7 +59448,7 @@ var ContentList = /** @class */ (function (_super) {
59446
59448
  }
59447
59449
  ContentList.prototype.render = function () {
59448
59450
  var classes = (0, classnames_1.default)('sd-list-item-group sd-list-item-group--space-between-items');
59449
- return (React.createElement("ul", { className: classes }, this.props.items.map(function (item, index) {
59451
+ return (React.createElement("div", { role: 'list', className: classes }, this.props.items.map(function (item, index) {
59450
59452
  return React.createElement(ContentListItem, { key: index, itemColum: item.itemColum, locked: item.locked, action: item.action, loading: item.loading, activated: item.activated, selected: item.selected, archived: item.archived, onClick: item.onClick, onDoubleClick: item.onDoubleClick });
59451
59453
  })));
59452
59454
  };
@@ -100630,7 +100632,7 @@ var AuthoringMain = /** @class */ (function (_super) {
100630
100632
  return (React.createElement(_1.AuthoringMainContainer, null,
100631
100633
  this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
100632
100634
  React.createElement(_1.AuthoringMainContent, null,
100633
- this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding }, this.props.authoringHeader)),
100635
+ this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
100634
100636
  this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
100635
100637
  React.createElement(_1.AuthoringInnerBody, null, this.props.children))));
100636
100638
  };
@@ -100867,7 +100869,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
100867
100869
  function AuthoringInnerHeader(props) {
100868
100870
  var _this = _super.call(this, props) || this;
100869
100871
  _this.state = {
100870
- collapsed: false,
100872
+ collapsed: _this.props.collapsed ? _this.props.collapsed : false,
100871
100873
  };
100872
100874
  return _this;
100873
100875
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.1-beta.15",
3
+ "version": "3.0.1-beta.17",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Layouts/AuthoringInnerHeader.js CHANGED
@@ -46,7 +46,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
46
46
  function AuthoringInnerHeader(props) {
47
47
  var _this = _super.call(this, props) || this;
48
48
  _this.state = {
49
- collapsed: false,
49
+ collapsed: _this.props.collapsed ? _this.props.collapsed : false,
50
50
  };
51
51
  return _this;
52
52
  }
package/react/components/Layouts/AuthoringMain.js CHANGED
@@ -46,7 +46,7 @@ var AuthoringMain = /** @class */ (function (_super) {
46
46
  return (React.createElement(_1.AuthoringMainContainer, null,
47
47
  this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
48
48
  React.createElement(_1.AuthoringMainContent, null,
49
- this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding }, this.props.authoringHeader)),
49
+ this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
50
50
  this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
51
51
  React.createElement(_1.AuthoringInnerBody, null, this.props.children))));
52
52
  };
package/react/components/Lists/ContentList.js CHANGED
@@ -74,7 +74,7 @@ var ContentListItem = /** @class */ (function (_super) {
74
74
  'fetched': this.props.archived,
75
75
  'actioning': this.props.loading,
76
76
  });
77
- return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
77
+ return (React.createElement("div", { role: 'listitem', className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
78
78
  this.props.locked
79
79
  ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
80
80
  : React.createElement("div", { className: "sd-list-item__border" }),
@@ -97,7 +97,7 @@ var ContentList = /** @class */ (function (_super) {
97
97
  }
98
98
  ContentList.prototype.render = function () {
99
99
  var classes = (0, classnames_1.default)('sd-list-item-group sd-list-item-group--space-between-items');
100
- return (React.createElement("ul", { className: classes }, this.props.items.map(function (item, index) {
100
+ return (React.createElement("div", { role: 'list', className: classes }, this.props.items.map(function (item, index) {
101
101
  return React.createElement(ContentListItem, { key: index, itemColum: item.itemColum, locked: item.locked, action: item.action, loading: item.loading, activated: item.activated, selected: item.selected, archived: item.archived, onClick: item.onClick, onDoubleClick: item.onDoubleClick });
102
102
  })));
103
103
  };
package/react/components/Lists/TableList.d.ts CHANGED
@@ -20,6 +20,8 @@ export interface IPropsArrayItem {
20
20
  hexColor?: string;
21
21
  onClick?(): void;
22
22
  onDoubleClick?(): void;
23
+ locked?: boolean;
24
+ positionLocked?: boolean;
23
25
  }
24
26
  interface IState {
25
27
  items: Array<IPropsArrayItem>;
@@ -41,6 +43,8 @@ export interface IPropsItem {
41
43
  dragAndDrop?: boolean;
42
44
  hexColor?: string;
43
45
  showDragHandle?: 'always' | 'onHover' | 'none';
46
+ locked?: boolean;
47
+ positionLocked?: boolean;
44
48
  onClick?(): void;
45
49
  onDoubleClick?(): void;
46
50
  onSelect?(): void;
package/react/components/Lists/TableList.js CHANGED
@@ -113,30 +113,30 @@ var TableList = /** @class */ (function (_super) {
113
113
  return (this.state.items.length > 0
114
114
  ? this.props.dragAndDrop
115
115
  ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
116
- React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
116
+ React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: 'list', className: classes, ref: provided.innerRef }, provided.droppableProps),
117
117
  _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
118
118
  React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
119
119
  ? item.onDoubleClick
120
120
  : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
121
121
  ? _this.props.itemsDropdown(index)
122
- : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
122
+ : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
123
123
  && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
124
124
  provided.placeholder,
125
125
  (_this.props.addItem && !_this.props.readOnly) &&
126
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
126
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
127
127
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
128
128
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
129
- : React.createElement("ul", { className: classes },
129
+ : React.createElement("div", { role: 'list', className: classes },
130
130
  this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
131
131
  ? item.onDoubleClick
132
- : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
132
+ : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
133
133
  && _this.props.onAddItem(index, item); } })); }),
134
134
  (this.props.addItem && !this.props.readOnly) &&
135
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
135
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
136
136
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
137
137
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
138
- : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
139
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
138
+ : (this.props.addItem && !this.props.readOnly) ? React.createElement("div", { role: 'list', className: classes },
139
+ React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
140
140
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
141
141
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
142
142
  : null);
@@ -176,12 +176,14 @@ var TableListItem = /** @class */ (function (_super) {
176
176
  var classes = (0, classnames_1.default)('table-list__item', {
177
177
  'table-list__item--clickable': this.props.onClick,
178
178
  'table-list__item--draggable': this.props.dragAndDrop,
179
+ 'table-list__item--locked': this.props.locked,
180
+ 'table-list__item--position-locked': this.props.positionLocked,
179
181
  'table-list__item--drag-handles-always': !this.props.showDragHandle,
180
182
  'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
181
183
  });
182
184
  return (this.props.addItem ?
183
- React.createElement("li", { className: 'table-list__item-container' },
184
- React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
185
+ React.createElement("div", { className: 'table-list__item-container' },
186
+ React.createElement("div", { role: 'listitem', onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
185
187
  React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
186
188
  React.createElement("div", { className: 'table-list__item-content' },
187
189
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
@@ -193,7 +195,7 @@ var TableListItem = /** @class */ (function (_super) {
193
195
  React.createElement("div", { className: 'table-list__add-bar' },
194
196
  React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
195
197
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
196
- : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
198
+ : React.createElement("div", { role: 'listitem', className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
197
199
  React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
198
200
  React.createElement("div", { className: 'table-list__item-content' },
199
201
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),