superdesk-ui-framework 3.0.72 → 3.0.74

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.
@@ -143,6 +143,7 @@ tags-input,
143
143
  display: flex;
144
144
  flex-direction: row;
145
145
  align-items: center;
146
+ gap: var(--space--2);
146
147
 
147
148
  span {
148
149
  flex-grow: 1;
@@ -467,6 +468,7 @@ tags-input,
467
468
  .tags-input__helper-box {
468
469
  display: flex;
469
470
  align-items: center;
471
+ gap: var(--space--2);
470
472
  }
471
473
  }
472
474
 
@@ -661,6 +663,7 @@ tags-input,
661
663
  display: flex;
662
664
  width: 100%;
663
665
  align-items: center;
666
+ gap: var(--space--2);
664
667
  }
665
668
 
666
669
  .tags-input__remove-button {
@@ -89,13 +89,28 @@
89
89
  padding-inline: var(--space--1-5);
90
90
  }
91
91
  }
92
+ .sd-input {
93
+ height: 100%;
94
+ border-inline-end: 1px solid var(--color-border-line--medium);
95
+ z-index: 1;
96
+ position: relative;
97
+ background-color: var(--sd-colour-bg__searchbar);
98
+ border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
99
+ transition: box-shadow 0.2s ease-out;
100
+ .sd-input__input {
101
+ background-color: transparent;
102
+ border: none;
103
+ }
104
+ }
92
105
  &.sd-searchbar--focused,
93
106
  &:focus-within {
94
- .dropdown {
107
+ .dropdown,
108
+ .sd-input {
95
109
  border-inline-end-color: var(--sd-colour-interactive--alpha-50);
96
110
  box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10);
97
111
  }
98
112
  }
113
+
99
114
  }
100
115
 
101
116
  .sd-searchbar__input, input[type="text"].sd-searchbar__input, input[type="search"].sd-searchbar__input {
@@ -4,7 +4,7 @@ import { Skeleton } from './Skeleton';
4
4
  export class ListItemLoader extends React.Component<{}> {
5
5
  render() {
6
6
  return (
7
- <div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover">
7
+ <div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover" data-test-id="list-item-placeholder">
8
8
  <div className="sd-list-item__border"></div>
9
9
  <div className="sd-list-item__column">
10
10
  <Skeleton shape="circle" size="2rem" />
@@ -28,6 +28,7 @@ export interface IPropsArrayItem {
28
28
  hexColor?: string;
29
29
  locked?: boolean;
30
30
  positionLocked?: boolean;
31
+ selected?: boolean;
31
32
  onClick?(): void;
32
33
  onDoubleClick?(): void;
33
34
  }
@@ -154,6 +155,7 @@ class TableList extends React.PureComponent<IProps, IState> {
154
155
  center={item.center}
155
156
  end={item.end}
156
157
  action={item.action}
158
+ selected={item.selected}
157
159
  onClick={
158
160
  item.onClick
159
161
  ? item.onClick
@@ -204,6 +206,7 @@ class TableList extends React.PureComponent<IProps, IState> {
204
206
  center={item.center}
205
207
  end={item.end}
206
208
  action={item.action}
209
+ selected={item.selected}
207
210
  onClick={
208
211
  item.onClick
209
212
  ? item.onClick
@@ -264,6 +267,7 @@ export interface IPropsItem {
264
267
  showDragHandle?: 'always' | 'onHover' | 'none';
265
268
  locked?: boolean;
266
269
  positionLocked?: boolean;
270
+ selected?: boolean;
267
271
  onClick?(): void;
268
272
  onDoubleClick?(): void;
269
273
  onSelect?(): void;
@@ -287,6 +291,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
287
291
 
288
292
  render() {
289
293
  let classes = classNames('table-list__item', {
294
+ 'table-list__item--selected': this.props.selected,
290
295
  'table-list__item--clickable': this.props.onClick,
291
296
  'table-list__item--draggable': this.props.dragAndDrop,
292
297
  'table-list__item--locked': this.props.locked,
@@ -5,7 +5,7 @@ export interface ICallbacks {
5
5
 
6
6
  export function setupSingleAndDoubleClick(): (event: React.MouseEvent, cb: ICallbacks) => void {
7
7
  let timer: number | undefined;
8
- let delay: number;
8
+ let delay: number = 250;
9
9
 
10
10
  return (event, cb: ICallbacks) => {
11
11
  clearTimeout(timer);
@@ -40989,7 +40989,7 @@ var TableList = /** @class */ (function (_super) {
40989
40989
  ? _this.props.itemsDropdown(index)
40990
40990
  : []; } })
40991
40991
  : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
40992
- React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
40992
+ React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
40993
40993
  ? item.onClick
40994
40994
  : undefined, onDoubleClick: item.onDoubleClick
40995
40995
  ? item.onDoubleClick
@@ -41003,7 +41003,7 @@ var TableList = /** @class */ (function (_super) {
41003
41003
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41004
41004
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
41005
41005
  : React.createElement("div", { role: 'list', className: classes },
41006
- 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
41006
+ 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, selected: item.selected, onClick: item.onClick
41007
41007
  ? item.onClick
41008
41008
  : undefined, onDoubleClick: item.onDoubleClick
41009
41009
  ? item.onDoubleClick
@@ -41039,6 +41039,7 @@ var TableListItem = /** @class */ (function (_super) {
41039
41039
  TableListItem.prototype.render = function () {
41040
41040
  var _this = this;
41041
41041
  var classes = (0, classnames_1.default)('table-list__item', {
41042
+ 'table-list__item--selected': this.props.selected,
41042
41043
  'table-list__item--clickable': this.props.onClick,
41043
41044
  'table-list__item--draggable': this.props.dragAndDrop,
41044
41045
  'table-list__item--locked': this.props.locked,
@@ -61094,7 +61095,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
61094
61095
  exports.setupSingleAndDoubleClick = void 0;
61095
61096
  function setupSingleAndDoubleClick() {
61096
61097
  var timer;
61097
- var delay;
61098
+ var delay = 250;
61098
61099
  return function (event, cb) {
61099
61100
  clearTimeout(timer);
61100
61101
  if (event.nativeEvent.detail === 1) {
@@ -105879,7 +105880,7 @@ var ListItemLoader = /** @class */ (function (_super) {
105879
105880
  return _super !== null && _super.apply(this, arguments) || this;
105880
105881
  }
105881
105882
  ListItemLoader.prototype.render = function () {
105882
- return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
105883
+ return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
105883
105884
  React.createElement("div", { className: "sd-list-item__border" }),
105884
105885
  React.createElement("div", { className: "sd-list-item__column" },
105885
105886
  React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
@@ -139810,6 +139811,17 @@ var React = __importStar(__webpack_require__(0));
139810
139811
  var Components = __importStar(__webpack_require__(43));
139811
139812
  var index_1 = __webpack_require__(3);
139812
139813
  var FormLabel_1 = __webpack_require__(51);
139814
+ var options2 = [
139815
+ {
139816
+ value: { name: 'A long category Category1' },
139817
+ },
139818
+ {
139819
+ value: { name: 'Category2' },
139820
+ },
139821
+ {
139822
+ value: { name: 'Category3' },
139823
+ },
139824
+ ];
139813
139825
  var TestGround = /** @class */ (function (_super) {
139814
139826
  __extends(TestGround, _super);
139815
139827
  function TestGround(props) {
@@ -139830,6 +139842,7 @@ var TestGround = /** @class */ (function (_super) {
139830
139842
  date: new Date('2022-01-08'),
139831
139843
  time: '16:50',
139832
139844
  modalPlanningTemplates: false,
139845
+ treeSelectValue: [],
139833
139846
  };
139834
139847
  return _this;
139835
139848
  }
@@ -139872,7 +139885,11 @@ var TestGround = /** @class */ (function (_super) {
139872
139885
  { label: 'Action 1', onSelect: function () { return 1; } },
139873
139886
  { label: 'Action 2', onSelect: function () { return 1; } },
139874
139887
  { label: 'Action 3', onSelect: function () { return 1; } },
139875
- ] }, "Toogle button")),
139888
+ ] }, "With dropdown")),
139889
+ React.createElement("hr", null),
139890
+ React.createElement(index_1.SearchBar, { placeholder: 'Search', boxed: true },
139891
+ React.createElement(index_1.TreeSelect, { kind: 'synchronous', value: this.state.treeSelectValue, getOptions: function () { return options2; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, onChange: function () { return false; }, placeholder: 'Select a desk', width: 'medium', inlineLabel: true, labelHidden: true }, "With TreeSelect")),
139892
+ React.createElement("hr", null),
139876
139893
  React.createElement("hr", null),
139877
139894
  React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Pagination"),
139878
139895
  React.createElement("div", { className: 'sd-pagination' },
@@ -144250,7 +144267,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
144250
144267
  /* 693 */
144251
144268
  /***/ (function(module, exports) {
144252
144269
 
144253
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.72","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","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@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.58.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","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","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","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","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-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","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"}}
144270
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.74","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","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@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.58.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","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","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","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","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-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","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"}}
144254
144271
 
144255
144272
  /***/ }),
144256
144273
  /* 694 */
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
3
+ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
4
4
  import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
5
5
 
6
6
  interface IProps {
@@ -23,8 +23,21 @@ interface IState {
23
23
  date: any;
24
24
  time: string;
25
25
  modalPlanningTemplates: boolean;
26
+ treeSelectValue: any;
26
27
  }
27
28
 
29
+ let options2 = [
30
+ {
31
+ value: {name: 'A long category Category1'},
32
+ },
33
+ {
34
+ value: {name: 'Category2'},
35
+ },
36
+ {
37
+ value: {name: 'Category3'},
38
+ },
39
+ ]
40
+
28
41
  export class TestGround extends React.Component<IProps, IState> {
29
42
  constructor(props: IProps) {
30
43
  super(props);
@@ -44,6 +57,7 @@ export class TestGround extends React.Component<IProps, IState> {
44
57
  date: new Date('2022-01-08'),
45
58
  time: '16:50',
46
59
  modalPlanningTemplates: false,
60
+ treeSelectValue: [],
47
61
  }
48
62
  }
49
63
 
@@ -98,6 +112,7 @@ export class TestGround extends React.Component<IProps, IState> {
98
112
  </BoxedList>
99
113
 
100
114
  </Modal>
115
+
101
116
  <h3 className="docs-page__h3 ">Planning Templates</h3>
102
117
  <SearchBar placeholder='Search' boxed={true}>
103
118
  <Dropdown
@@ -107,10 +122,28 @@ export class TestGround extends React.Component<IProps, IState> {
107
122
  { label: 'Action 3', onSelect: () => 1 },
108
123
  ]}
109
124
  >
110
- Toogle button
125
+ With dropdown
111
126
  </Dropdown>
112
127
  </SearchBar>
128
+ <hr />
129
+ <SearchBar placeholder='Search' boxed={true}>
130
+ <TreeSelect
131
+ kind={'synchronous'}
132
+ value={this.state.treeSelectValue}
133
+ getOptions={() => options2}
134
+ getLabel={(item) => item.name}
135
+ getId={(item) => item.name}
136
+ onChange={() => false}
137
+ placeholder='Select a desk'
138
+ width='medium'
139
+ inlineLabel
140
+ labelHidden
141
+ >
142
+ With TreeSelect
143
+ </TreeSelect>
144
+ </SearchBar>
113
145
 
146
+ <hr />
114
147
  <hr />
115
148
 
116
149
  <h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
@@ -35676,7 +35676,8 @@ tags-input,
35676
35676
  .tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box {
35677
35677
  display: flex;
35678
35678
  flex-direction: row;
35679
- align-items: center; }
35679
+ align-items: center;
35680
+ gap: var(--space--2); }
35680
35681
  tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span,
35681
35682
  .tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span {
35682
35683
  flex-grow: 1; }
@@ -35911,7 +35912,8 @@ tags-input,
35911
35912
  background-color: rgba(0, 0, 0, 0.1); }
35912
35913
  .tags-input .tags-input__helper-box {
35913
35914
  display: flex;
35914
- align-items: center; }
35915
+ align-items: center;
35916
+ gap: var(--space--2); }
35915
35917
 
35916
35918
  .autocomplete {
35917
35919
  position: absolute;
@@ -36058,7 +36060,8 @@ tags-input,
36058
36060
  .tags-input__single-item .tags-input__helper-box {
36059
36061
  display: flex;
36060
36062
  width: 100%;
36061
- align-items: center; }
36063
+ align-items: center;
36064
+ gap: var(--space--2); }
36062
36065
  .tags-input__single-item .tags-input__remove-button {
36063
36066
  display: flex;
36064
36067
  align-items: center;
@@ -43435,7 +43438,20 @@ a.text-link {
43435
43438
  .sd-searchbar--boxed .dropdown .dropdown__toggle {
43436
43439
  height: 100%;
43437
43440
  padding-inline: var(--space--1-5); }
43438
- .sd-searchbar--boxed.sd-searchbar--focused .dropdown, .sd-searchbar--boxed:focus-within .dropdown {
43441
+ .sd-searchbar--boxed .sd-input {
43442
+ height: 100%;
43443
+ border-inline-end: 1px solid var(--color-border-line--medium);
43444
+ z-index: 1;
43445
+ position: relative;
43446
+ background-color: var(--sd-colour-bg__searchbar);
43447
+ border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
43448
+ transition: box-shadow 0.2s ease-out; }
43449
+ .sd-searchbar--boxed .sd-input .sd-input__input {
43450
+ background-color: transparent;
43451
+ border: none; }
43452
+ .sd-searchbar--boxed.sd-searchbar--focused .dropdown,
43453
+ .sd-searchbar--boxed.sd-searchbar--focused .sd-input, .sd-searchbar--boxed:focus-within .dropdown,
43454
+ .sd-searchbar--boxed:focus-within .sd-input {
43439
43455
  border-inline-end-color: var(--sd-colour-interactive--alpha-50);
43440
43456
  box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10); }
43441
43457
 
@@ -40633,7 +40633,7 @@ var TableList = /** @class */ (function (_super) {
40633
40633
  ? _this.props.itemsDropdown(index)
40634
40634
  : []; } })
40635
40635
  : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
40636
- React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
40636
+ React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
40637
40637
  ? item.onClick
40638
40638
  : undefined, onDoubleClick: item.onDoubleClick
40639
40639
  ? item.onDoubleClick
@@ -40647,7 +40647,7 @@ var TableList = /** @class */ (function (_super) {
40647
40647
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40648
40648
  React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
40649
40649
  : React.createElement("div", { role: 'list', className: classes },
40650
- 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
40650
+ 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, selected: item.selected, onClick: item.onClick
40651
40651
  ? item.onClick
40652
40652
  : undefined, onDoubleClick: item.onDoubleClick
40653
40653
  ? item.onDoubleClick
@@ -40683,6 +40683,7 @@ var TableListItem = /** @class */ (function (_super) {
40683
40683
  TableListItem.prototype.render = function () {
40684
40684
  var _this = this;
40685
40685
  var classes = (0, classnames_1.default)('table-list__item', {
40686
+ 'table-list__item--selected': this.props.selected,
40686
40687
  'table-list__item--clickable': this.props.onClick,
40687
40688
  'table-list__item--draggable': this.props.dragAndDrop,
40688
40689
  'table-list__item--locked': this.props.locked,
@@ -60738,7 +60739,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
60738
60739
  exports.setupSingleAndDoubleClick = void 0;
60739
60740
  function setupSingleAndDoubleClick() {
60740
60741
  var timer;
60741
- var delay;
60742
+ var delay = 250;
60742
60743
  return function (event, cb) {
60743
60744
  clearTimeout(timer);
60744
60745
  if (event.nativeEvent.detail === 1) {
@@ -105140,7 +105141,7 @@ var ListItemLoader = /** @class */ (function (_super) {
105140
105141
  return _super !== null && _super.apply(this, arguments) || this;
105141
105142
  }
105142
105143
  ListItemLoader.prototype.render = function () {
105143
- return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
105144
+ return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
105144
105145
  React.createElement("div", { className: "sd-list-item__border" }),
105145
105146
  React.createElement("div", { className: "sd-list-item__column" },
105146
105147
  React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
3
+ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
4
4
  import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
5
5
 
6
6
  interface IProps {
@@ -23,8 +23,21 @@ interface IState {
23
23
  date: any;
24
24
  time: string;
25
25
  modalPlanningTemplates: boolean;
26
+ treeSelectValue: any;
26
27
  }
27
28
 
29
+ let options2 = [
30
+ {
31
+ value: {name: 'A long category Category1'},
32
+ },
33
+ {
34
+ value: {name: 'Category2'},
35
+ },
36
+ {
37
+ value: {name: 'Category3'},
38
+ },
39
+ ]
40
+
28
41
  export class TestGround extends React.Component<IProps, IState> {
29
42
  constructor(props: IProps) {
30
43
  super(props);
@@ -44,6 +57,7 @@ export class TestGround extends React.Component<IProps, IState> {
44
57
  date: new Date('2022-01-08'),
45
58
  time: '16:50',
46
59
  modalPlanningTemplates: false,
60
+ treeSelectValue: [],
47
61
  }
48
62
  }
49
63
 
@@ -98,6 +112,7 @@ export class TestGround extends React.Component<IProps, IState> {
98
112
  </BoxedList>
99
113
 
100
114
  </Modal>
115
+
101
116
  <h3 className="docs-page__h3 ">Planning Templates</h3>
102
117
  <SearchBar placeholder='Search' boxed={true}>
103
118
  <Dropdown
@@ -107,10 +122,28 @@ export class TestGround extends React.Component<IProps, IState> {
107
122
  { label: 'Action 3', onSelect: () => 1 },
108
123
  ]}
109
124
  >
110
- Toogle button
125
+ With dropdown
111
126
  </Dropdown>
112
127
  </SearchBar>
128
+ <hr />
129
+ <SearchBar placeholder='Search' boxed={true}>
130
+ <TreeSelect
131
+ kind={'synchronous'}
132
+ value={this.state.treeSelectValue}
133
+ getOptions={() => options2}
134
+ getLabel={(item) => item.name}
135
+ getId={(item) => item.name}
136
+ onChange={() => false}
137
+ placeholder='Select a desk'
138
+ width='medium'
139
+ inlineLabel
140
+ labelHidden
141
+ >
142
+ With TreeSelect
143
+ </TreeSelect>
144
+ </SearchBar>
113
145
 
146
+ <hr />
114
147
  <hr />
115
148
 
116
149
  <h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.72",
3
+ "version": "3.0.74",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -47,7 +47,7 @@ var ListItemLoader = /** @class */ (function (_super) {
47
47
  return _super !== null && _super.apply(this, arguments) || this;
48
48
  }
49
49
  ListItemLoader.prototype.render = function () {
50
- return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
50
+ return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
51
51
  React.createElement("div", { className: "sd-list-item__border" }),
52
52
  React.createElement("div", { className: "sd-list-item__column" },
53
53
  React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
@@ -21,6 +21,7 @@ export interface IPropsArrayItem {
21
21
  hexColor?: string;
22
22
  locked?: boolean;
23
23
  positionLocked?: boolean;
24
+ selected?: boolean;
24
25
  onClick?(): void;
25
26
  onDoubleClick?(): void;
26
27
  }
@@ -46,6 +47,7 @@ export interface IPropsItem {
46
47
  showDragHandle?: 'always' | 'onHover' | 'none';
47
48
  locked?: boolean;
48
49
  positionLocked?: boolean;
50
+ selected?: boolean;
49
51
  onClick?(): void;
50
52
  onDoubleClick?(): void;
51
53
  onSelect?(): void;
@@ -126,7 +126,7 @@ var TableList = /** @class */ (function (_super) {
126
126
  ? _this.props.itemsDropdown(index)
127
127
  : []; } })
128
128
  : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
129
- React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
129
+ React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
130
130
  ? item.onClick
131
131
  : undefined, onDoubleClick: item.onDoubleClick
132
132
  ? item.onDoubleClick
@@ -140,7 +140,7 @@ var TableList = /** @class */ (function (_super) {
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
  : React.createElement("div", { role: 'list', className: classes },
143
- 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
143
+ 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, selected: item.selected, onClick: item.onClick
144
144
  ? item.onClick
145
145
  : undefined, onDoubleClick: item.onDoubleClick
146
146
  ? item.onDoubleClick
@@ -176,6 +176,7 @@ var TableListItem = /** @class */ (function (_super) {
176
176
  TableListItem.prototype.render = function () {
177
177
  var _this = this;
178
178
  var classes = (0, classnames_1.default)('table-list__item', {
179
+ 'table-list__item--selected': this.props.selected,
179
180
  'table-list__item--clickable': this.props.onClick,
180
181
  'table-list__item--draggable': this.props.dragAndDrop,
181
182
  'table-list__item--locked': this.props.locked,
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.setupSingleAndDoubleClick = void 0;
4
4
  function setupSingleAndDoubleClick() {
5
5
  var timer;
6
- var delay;
6
+ var delay = 250;
7
7
  return function (event, cb) {
8
8
  clearTimeout(timer);
9
9
  if (event.nativeEvent.detail === 1) {