superdesk-ui-framework 5.1.4 → 5.1.5

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 (8) hide show
  1. package/app-typescript/components/TreeMenu.tsx +86 -84
  2. package/app-typescript/components/TreeSelect/TreeSelect.tsx +141 -118
  3. package/dist/examples.bundle.js +23 -6
  4. package/dist/superdesk-ui.bundle.js +22 -5
  5. package/package.json +1 -1
  6. package/react/components/TreeMenu.js +2 -2
  7. package/react/components/TreeSelect/TreeSelect.d.ts +1 -0
  8. package/react/components/TreeSelect/TreeSelect.js +20 -3
package/app-typescript/components/TreeMenu.tsx CHANGED
@@ -374,102 +374,104 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
374
374
  <div ref={this.treeMenuRef}>
375
375
  <div ref={this.openDropdownRef}>{this.props.children(this.toggle)}</div>
376
376
 
377
- <WithPortal active={this.state.openDropdown} data-test-id="tree-menu-popover">
378
- <div
379
- ref={this.dropdownRef}
380
- className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
381
- style={{
382
- zIndex: this.zIndex,
383
- }}
384
- >
385
- <div className="autocomplete__header">
386
- <div
387
- className="autocomplete__icon"
388
- onClick={() => {
389
- this.backButton();
390
- }}
391
- >
392
- <Icon name="search" className="search"></Icon>
393
- </div>
394
-
395
- <div className="autocomplete__filter">
396
- <input
397
- className="autocomplete__input"
398
- type="text"
399
- placeholder={this.props.searchPlaceholder}
400
- ref={this.inputRef}
401
- value={this.state.searchFieldValue}
402
- onChange={(event) => {
403
- this.setState({searchFieldValue: event.target.value});
404
- this.popperInstance?.update();
405
- }}
406
- />
407
- </div>
408
- </div>
409
-
410
- {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
411
- <div className="autocomplete__category-header">
377
+ {this.state.openDropdown && (
378
+ <WithPortal active={this.state.openDropdown} data-test-id="tree-menu-popover">
379
+ <div
380
+ ref={this.dropdownRef}
381
+ className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
382
+ style={{
383
+ zIndex: this.zIndex,
384
+ }}
385
+ >
386
+ <div className="autocomplete__header">
412
387
  <div
413
388
  className="autocomplete__icon"
414
389
  onClick={() => {
415
390
  this.backButton();
416
391
  }}
417
392
  >
418
- <Icon name="arrow-left" className="arrow-left"></Icon>
393
+ <Icon name="search" className="search"></Icon>
419
394
  </div>
420
395
 
421
396
  <div className="autocomplete__filter">
422
- <button className="autocomplete__category-title">
423
- {this.props.optionTemplate
424
- ? this.props.optionTemplate(this.state.buttonValue.value)
425
- : this.props.getLabel(this.state.buttonValue.value)}
426
- </button>
397
+ <input
398
+ className="autocomplete__input"
399
+ type="text"
400
+ placeholder={this.props.searchPlaceholder}
401
+ ref={this.inputRef}
402
+ value={this.state.searchFieldValue}
403
+ onChange={(event) => {
404
+ this.setState({searchFieldValue: event.target.value});
405
+ this.popperInstance?.update();
406
+ }}
407
+ />
427
408
  </div>
428
409
  </div>
429
- )}
430
-
431
- {this.state.searchFieldValue === '' ? (
432
- this.props.getOptions ? (
433
- <ul
434
- ref={this.ref}
435
- className="suggestion-list suggestion-list--multi-select"
436
- role="tree"
437
- >
438
- {this.state.options.map((option, i: React.Key | undefined) => (
439
- <TreeSelectItem
440
- key={i}
441
- option={option}
442
- handleTree={this.handleTree}
443
- onClick={() => {
444
- onSelect(option);
445
- }}
446
- disabledItem={disabledItem(option)}
447
- getBorderColor={this.props.getBorderColor}
448
- getBackgroundColor={this.props.getBackgroundColor}
449
- getId={this.props.getId}
450
- optionTemplate={this.props.optionTemplate}
451
- getLabel={this.props.getLabel}
452
- onKeyDown={() =>
453
- this.setState({
454
- buttonTarget: [
455
- ...this.state.buttonTarget,
456
- this.props.getId(option.value),
457
- ],
458
- })
459
- }
460
- />
461
- ))}
410
+
411
+ {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
412
+ <div className="autocomplete__category-header">
413
+ <div
414
+ className="autocomplete__icon"
415
+ onClick={() => {
416
+ this.backButton();
417
+ }}
418
+ >
419
+ <Icon name="arrow-left" className="arrow-left"></Icon>
420
+ </div>
421
+
422
+ <div className="autocomplete__filter">
423
+ <button className="autocomplete__category-title">
424
+ {this.props.optionTemplate
425
+ ? this.props.optionTemplate(this.state.buttonValue.value)
426
+ : this.props.getLabel(this.state.buttonValue.value)}
427
+ </button>
428
+ </div>
429
+ </div>
430
+ )}
431
+
432
+ {this.state.searchFieldValue === '' ? (
433
+ this.props.getOptions ? (
434
+ <ul
435
+ ref={this.ref}
436
+ className="suggestion-list suggestion-list--multi-select"
437
+ role="tree"
438
+ >
439
+ {this.state.options.map((option, i: React.Key | undefined) => (
440
+ <TreeSelectItem
441
+ key={i}
442
+ option={option}
443
+ handleTree={this.handleTree}
444
+ onClick={() => {
445
+ onSelect(option);
446
+ }}
447
+ disabledItem={disabledItem(option)}
448
+ getBorderColor={this.props.getBorderColor}
449
+ getBackgroundColor={this.props.getBackgroundColor}
450
+ getId={this.props.getId}
451
+ optionTemplate={this.props.optionTemplate}
452
+ getLabel={this.props.getLabel}
453
+ onKeyDown={() =>
454
+ this.setState({
455
+ buttonTarget: [
456
+ ...this.state.buttonTarget,
457
+ this.props.getId(option.value),
458
+ ],
459
+ })
460
+ }
461
+ />
462
+ ))}
463
+ </ul>
464
+ ) : null
465
+ ) : (
466
+ <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
467
+ {this.filteredItem(
468
+ this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
469
+ )}
462
470
  </ul>
463
- ) : null
464
- ) : (
465
- <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
466
- {this.filteredItem(
467
- this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
468
- )}
469
- </ul>
470
- )}
471
- </div>
472
- </WithPortal>
471
+ )}
472
+ </div>
473
+ </WithPortal>
474
+ )}
473
475
  </div>
474
476
  );
475
477
  }
package/app-typescript/components/TreeSelect/TreeSelect.tsx CHANGED
@@ -147,6 +147,26 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
147
147
  this.changesFromOutside = false;
148
148
  }
149
149
 
150
+ shouldComponentUpdate(nextProps: Readonly<IProps<T>>, nextState: Readonly<IState<T>>): boolean {
151
+ if (!isEqual(this.state, nextState)) {
152
+ return true;
153
+ }
154
+
155
+ const propKeys = Object.keys(nextProps) as Array<keyof IProps<T>>;
156
+
157
+ for (const key of propKeys) {
158
+ if (typeof this.props[key] === 'function') {
159
+ continue;
160
+ }
161
+
162
+ if (!isEqual(this.props[key], nextProps[key])) {
163
+ return true;
164
+ }
165
+ }
166
+
167
+ return false;
168
+ }
169
+
150
170
  inputFocus = () => {
151
171
  this.inputRef.current?.focus();
152
172
  };
@@ -897,131 +917,134 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
897
917
  )}
898
918
  </div>
899
919
 
900
- <WithPortal active={this.state.openDropdown} data-test-id="tree-select-popover">
901
- <div
902
- className={
903
- 'autocomplete autocomplete--multi-select' +
904
- (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
905
- }
906
- style={{
907
- zIndex: this.zIndex,
908
- width: this.treeSelectRef.current?.offsetWidth,
909
- minWidth: '300px',
910
- }}
911
- ref={this.dropdownRef}
912
- >
913
- <div className="autocomplete__header">
914
- <div className="autocomplete__icon">
915
- <Icon name="search" className="search"></Icon>
916
- </div>
917
-
918
- <div className="autocomplete__filter">
919
- <input
920
- className="autocomplete__input"
921
- type="text"
922
- placeholder={this.props.searchPlaceholder}
923
- ref={this.inputRef}
924
- value={this.state.searchFieldValue}
925
- onChange={(event) => {
926
- if (this.props.kind === 'synchronous') {
927
- this.setState({searchFieldValue: event.target.value});
928
- this.popperInstance?.update();
929
- } else if (this.props.kind === 'asynchronous') {
930
- if (this.ICancelFn) {
931
- this.ICancelFn();
932
- }
933
-
934
- this.setState({
935
- searchFieldValue: event.target.value,
936
- options: [],
937
- loading: true,
938
- });
939
- this.popperInstance?.update();
940
- this.debounceFn();
941
- } else {
942
- return;
943
- }
944
- }}
945
- data-test-id="filter-input"
946
- />
947
- </div>
948
- </div>
949
-
950
- {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
951
- <div className="autocomplete__category-header">
952
- <div
953
- className="autocomplete__icon"
954
- onClick={() => {
955
- this.backButton();
956
- }}
957
- >
958
- <Icon name="arrow-left" className="arrow-left"></Icon>
920
+ {this.state.openDropdown && (
921
+ <WithPortal active={this.state.openDropdown} data-test-id="tree-select-popover">
922
+ <div
923
+ className={
924
+ 'autocomplete autocomplete--multi-select' +
925
+ (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
926
+ }
927
+ style={{
928
+ zIndex: this.zIndex,
929
+ width: this.treeSelectRef.current?.offsetWidth,
930
+ minWidth: '300px',
931
+ }}
932
+ ref={this.dropdownRef}
933
+ >
934
+ <div className="autocomplete__header">
935
+ <div className="autocomplete__icon">
936
+ <Icon name="search" className="search"></Icon>
959
937
  </div>
960
938
 
961
939
  <div className="autocomplete__filter">
962
- <button className="autocomplete__category-title">
963
- {this.props.optionTemplate
964
- ? this.props.optionTemplate(this.state.buttonValue.value)
965
- : this.props.getLabel(this.state.buttonValue.value)}
966
- </button>
940
+ <input
941
+ className="autocomplete__input"
942
+ type="text"
943
+ placeholder={this.props.searchPlaceholder}
944
+ ref={this.inputRef}
945
+ value={this.state.searchFieldValue}
946
+ onChange={(event) => {
947
+ if (this.props.kind === 'synchronous') {
948
+ this.setState({searchFieldValue: event.target.value});
949
+ this.popperInstance?.update();
950
+ } else if (this.props.kind === 'asynchronous') {
951
+ if (this.ICancelFn) {
952
+ this.ICancelFn();
953
+ }
967
954
 
968
- {this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)}
955
+ this.setState({
956
+ searchFieldValue: event.target.value,
957
+ options: [],
958
+ loading: true,
959
+ });
960
+ this.popperInstance?.update();
961
+ this.debounceFn();
962
+ } else {
963
+ return;
964
+ }
965
+ }}
966
+ data-test-id="filter-input"
967
+ />
969
968
  </div>
970
969
  </div>
971
- )}
972
-
973
- {this.state.loading ? (
974
- <ul className="suggestion-list--loader">
975
- <Loader overlay={true}></Loader>
976
- </ul>
977
- ) : this.state.searchFieldValue === '' ? (
978
- this.props.getOptions ? (
979
- <ul
980
- className="suggestion-list suggestion-list--multi-select"
981
- ref={this.ref}
982
- data-test-id="options"
983
- role="tree"
984
- aria-multiselectable={this.props.allowMultiple}
985
- >
986
- {this.state.options.map((option, i: React.Key | undefined) => {
987
- let selectedItem = this.state.value.some(
988
- (obj) => this.props.getId(obj) === this.props.getId(option.value),
989
- );
990
-
991
- return (
992
- <TreeSelectItem
993
- key={i}
994
- option={option}
995
- handleTree={this.handleTree}
996
- selectedItem={selectedItem}
997
- allowMultiple={this.props.allowMultiple}
998
- getBorderColor={this.props.getBorderColor}
999
- getBackgroundColor={this.props.getBackgroundColor}
1000
- getId={this.props.getId}
1001
- getLabel={this.props.getLabel}
1002
- optionTemplate={this.props.optionTemplate}
1003
- onKeyDown={() =>
1004
- this.setState({
1005
- buttonTarget: [
1006
- ...this.state.buttonTarget,
1007
- this.props.getId(option.value),
1008
- ],
1009
- })
1010
- }
1011
- />
1012
- );
1013
- })}
970
+
971
+ {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
972
+ <div className="autocomplete__category-header">
973
+ <div
974
+ className="autocomplete__icon"
975
+ onClick={() => {
976
+ this.backButton();
977
+ }}
978
+ >
979
+ <Icon name="arrow-left" className="arrow-left"></Icon>
980
+ </div>
981
+
982
+ <div className="autocomplete__filter">
983
+ <button className="autocomplete__category-title">
984
+ {this.props.optionTemplate
985
+ ? this.props.optionTemplate(this.state.buttonValue.value)
986
+ : this.props.getLabel(this.state.buttonValue.value)}
987
+ </button>
988
+
989
+ {this.props.selectBranchWithChildren &&
990
+ this.branchButton(this.state.buttonValue)}
991
+ </div>
992
+ </div>
993
+ )}
994
+
995
+ {this.state.loading ? (
996
+ <ul className="suggestion-list--loader">
997
+ <Loader overlay={true}></Loader>
1014
998
  </ul>
1015
- ) : null
1016
- ) : (
1017
- <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
1018
- {this.filteredItem(
1019
- this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
1020
- )}
1021
- </ul>
1022
- )}
1023
- </div>
1024
- </WithPortal>
999
+ ) : this.state.searchFieldValue === '' ? (
1000
+ this.props.getOptions ? (
1001
+ <ul
1002
+ className="suggestion-list suggestion-list--multi-select"
1003
+ ref={this.ref}
1004
+ data-test-id="options"
1005
+ role="tree"
1006
+ aria-multiselectable={this.props.allowMultiple}
1007
+ >
1008
+ {this.state.options.map((option, i: React.Key | undefined) => {
1009
+ let selectedItem = this.state.value.some(
1010
+ (obj) => this.props.getId(obj) === this.props.getId(option.value),
1011
+ );
1012
+
1013
+ return (
1014
+ <TreeSelectItem
1015
+ key={i}
1016
+ option={option}
1017
+ handleTree={this.handleTree}
1018
+ selectedItem={selectedItem}
1019
+ allowMultiple={this.props.allowMultiple}
1020
+ getBorderColor={this.props.getBorderColor}
1021
+ getBackgroundColor={this.props.getBackgroundColor}
1022
+ getId={this.props.getId}
1023
+ getLabel={this.props.getLabel}
1024
+ optionTemplate={this.props.optionTemplate}
1025
+ onKeyDown={() =>
1026
+ this.setState({
1027
+ buttonTarget: [
1028
+ ...this.state.buttonTarget,
1029
+ this.props.getId(option.value),
1030
+ ],
1031
+ })
1032
+ }
1033
+ />
1034
+ );
1035
+ })}
1036
+ </ul>
1037
+ ) : null
1038
+ ) : (
1039
+ <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
1040
+ {this.filteredItem(
1041
+ this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
1042
+ )}
1043
+ </ul>
1044
+ )}
1045
+ </div>
1046
+ </WithPortal>
1047
+ )}
1025
1048
  </InputWrapper>
1026
1049
  );
1027
1050
  }
package/dist/examples.bundle.js CHANGED
@@ -62345,6 +62345,22 @@ var TreeSelect = /** @class */ (function (_super) {
62345
62345
  _this.changesFromOutside = false;
62346
62346
  return _this;
62347
62347
  }
62348
+ TreeSelect.prototype.shouldComponentUpdate = function (nextProps, nextState) {
62349
+ if (!(0, lodash_1.isEqual)(this.state, nextState)) {
62350
+ return true;
62351
+ }
62352
+ var propKeys = Object.keys(nextProps);
62353
+ for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {
62354
+ var key = propKeys_1[_i];
62355
+ if (typeof this.props[key] === 'function') {
62356
+ continue;
62357
+ }
62358
+ if (!(0, lodash_1.isEqual)(this.props[key], nextProps[key])) {
62359
+ return true;
62360
+ }
62361
+ }
62362
+ return false;
62363
+ };
62348
62364
  TreeSelect.prototype.componentWillUnmount = function () {
62349
62365
  document.removeEventListener('mousedown', this.onMouseDown);
62350
62366
  document.removeEventListener('keydown', this.onKeyDown);
@@ -62796,7 +62812,7 @@ var TreeSelect = /** @class */ (function (_super) {
62796
62812
  };
62797
62813
  return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
62798
62814
  })))),
62799
- React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
62815
+ this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
62800
62816
  React.createElement("div", { className: 'autocomplete autocomplete--multi-select' +
62801
62817
  (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
62802
62818
  zIndex: this.zIndex,
@@ -62838,7 +62854,8 @@ var TreeSelect = /** @class */ (function (_super) {
62838
62854
  React.createElement("button", { className: "autocomplete__category-title" }, this.props.optionTemplate
62839
62855
  ? this.props.optionTemplate(this.state.buttonValue.value)
62840
62856
  : this.props.getLabel(this.state.buttonValue.value)),
62841
- this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)))),
62857
+ this.props.selectBranchWithChildren &&
62858
+ this.branchButton(this.state.buttonValue)))),
62842
62859
  this.state.loading ? (React.createElement("ul", { className: "suggestion-list--loader" },
62843
62860
  React.createElement(Loader_1.Loader, { overlay: true }))) : this.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: "tree", "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
62844
62861
  var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(option.value); });
@@ -62849,7 +62866,7 @@ var TreeSelect = /** @class */ (function (_super) {
62849
62866
  ], false),
62850
62867
  });
62851
62868
  } }));
62852
- }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
62869
+ }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
62853
62870
  };
62854
62871
  return TreeSelect;
62855
62872
  }(React.Component));
@@ -99718,7 +99735,7 @@ var TreeMenu = /** @class */ (function (_super) {
99718
99735
  var _this = this;
99719
99736
  return (React.createElement("div", { ref: this.treeMenuRef },
99720
99737
  React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
99721
- React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
99738
+ this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
99722
99739
  React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
99723
99740
  zIndex: this.zIndex,
99724
99741
  } },
@@ -99750,7 +99767,7 @@ var TreeMenu = /** @class */ (function (_super) {
99750
99767
  _this.props.getId(option.value),
99751
99768
  ], false),
99752
99769
  });
99753
- } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
99770
+ } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
99754
99771
  };
99755
99772
  return TreeMenu;
99756
99773
  }(React.Component));
@@ -196537,7 +196554,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
196537
196554
  /* 1055 */
196538
196555
  /***/ (function(module, exports) {
196539
196556
 
196540
- module.exports = {"name":"superdesk-ui-framework","version":"5.1.4","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","Konstantin Markov","Helmy Giacoman"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","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/enzyme-adapter-react-16":"^1.0.6","@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","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","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","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","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","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":"^5.8.3","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":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-16","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","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-scrollspy":"^3.4.3","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
196557
+ module.exports = {"name":"superdesk-ui-framework","version":"5.1.5","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","Konstantin Markov","Helmy Giacoman"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","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/enzyme-adapter-react-16":"^1.0.6","@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","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","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","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","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","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":"^5.8.3","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":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-16","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","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-scrollspy":"^3.4.3","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
196541
196558
 
196542
196559
  /***/ }),
196543
196560
  /* 1056 */
package/dist/superdesk-ui.bundle.js CHANGED
@@ -62075,6 +62075,22 @@ var TreeSelect = /** @class */ (function (_super) {
62075
62075
  _this.changesFromOutside = false;
62076
62076
  return _this;
62077
62077
  }
62078
+ TreeSelect.prototype.shouldComponentUpdate = function (nextProps, nextState) {
62079
+ if (!(0, lodash_1.isEqual)(this.state, nextState)) {
62080
+ return true;
62081
+ }
62082
+ var propKeys = Object.keys(nextProps);
62083
+ for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {
62084
+ var key = propKeys_1[_i];
62085
+ if (typeof this.props[key] === 'function') {
62086
+ continue;
62087
+ }
62088
+ if (!(0, lodash_1.isEqual)(this.props[key], nextProps[key])) {
62089
+ return true;
62090
+ }
62091
+ }
62092
+ return false;
62093
+ };
62078
62094
  TreeSelect.prototype.componentWillUnmount = function () {
62079
62095
  document.removeEventListener('mousedown', this.onMouseDown);
62080
62096
  document.removeEventListener('keydown', this.onKeyDown);
@@ -62526,7 +62542,7 @@ var TreeSelect = /** @class */ (function (_super) {
62526
62542
  };
62527
62543
  return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
62528
62544
  })))),
62529
- React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
62545
+ this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
62530
62546
  React.createElement("div", { className: 'autocomplete autocomplete--multi-select' +
62531
62547
  (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
62532
62548
  zIndex: this.zIndex,
@@ -62568,7 +62584,8 @@ var TreeSelect = /** @class */ (function (_super) {
62568
62584
  React.createElement("button", { className: "autocomplete__category-title" }, this.props.optionTemplate
62569
62585
  ? this.props.optionTemplate(this.state.buttonValue.value)
62570
62586
  : this.props.getLabel(this.state.buttonValue.value)),
62571
- this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)))),
62587
+ this.props.selectBranchWithChildren &&
62588
+ this.branchButton(this.state.buttonValue)))),
62572
62589
  this.state.loading ? (React.createElement("ul", { className: "suggestion-list--loader" },
62573
62590
  React.createElement(Loader_1.Loader, { overlay: true }))) : this.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: "tree", "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
62574
62591
  var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(option.value); });
@@ -62579,7 +62596,7 @@ var TreeSelect = /** @class */ (function (_super) {
62579
62596
  ], false),
62580
62597
  });
62581
62598
  } }));
62582
- }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
62599
+ }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
62583
62600
  };
62584
62601
  return TreeSelect;
62585
62602
  }(React.Component));
@@ -99065,7 +99082,7 @@ var TreeMenu = /** @class */ (function (_super) {
99065
99082
  var _this = this;
99066
99083
  return (React.createElement("div", { ref: this.treeMenuRef },
99067
99084
  React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
99068
- React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
99085
+ this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
99069
99086
  React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
99070
99087
  zIndex: this.zIndex,
99071
99088
  } },
@@ -99097,7 +99114,7 @@ var TreeMenu = /** @class */ (function (_super) {
99097
99114
  _this.props.getId(option.value),
99098
99115
  ], false),
99099
99116
  });
99100
- } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
99117
+ } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
99101
99118
  };
99102
99119
  return TreeMenu;
99103
99120
  }(React.Component));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "5.1.4",
3
+ "version": "5.1.5",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/TreeMenu.js CHANGED
@@ -344,7 +344,7 @@ var TreeMenu = /** @class */ (function (_super) {
344
344
  var _this = this;
345
345
  return (React.createElement("div", { ref: this.treeMenuRef },
346
346
  React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
347
- React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
347
+ this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
348
348
  React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
349
349
  zIndex: this.zIndex,
350
350
  } },
@@ -376,7 +376,7 @@ var TreeMenu = /** @class */ (function (_super) {
376
376
  _this.props.getId(option.value),
377
377
  ], false),
378
378
  });
379
- } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
379
+ } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
380
380
  };
381
381
  return TreeMenu;
382
382
  }(React.Component));
package/react/components/TreeSelect/TreeSelect.d.ts CHANGED
@@ -73,6 +73,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
73
73
  private zIndex;
74
74
  private changesFromOutside;
75
75
  constructor(props: IProps<T>);
76
+ shouldComponentUpdate(nextProps: Readonly<IProps<T>>, nextState: Readonly<IState<T>>): boolean;
76
77
  inputFocus: () => void;
77
78
  listNavigation: () => void;
78
79
  buttonFocus: () => void;
package/react/components/TreeSelect/TreeSelect.js CHANGED
@@ -188,6 +188,22 @@ var TreeSelect = /** @class */ (function (_super) {
188
188
  _this.changesFromOutside = false;
189
189
  return _this;
190
190
  }
191
+ TreeSelect.prototype.shouldComponentUpdate = function (nextProps, nextState) {
192
+ if (!(0, lodash_1.isEqual)(this.state, nextState)) {
193
+ return true;
194
+ }
195
+ var propKeys = Object.keys(nextProps);
196
+ for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {
197
+ var key = propKeys_1[_i];
198
+ if (typeof this.props[key] === 'function') {
199
+ continue;
200
+ }
201
+ if (!(0, lodash_1.isEqual)(this.props[key], nextProps[key])) {
202
+ return true;
203
+ }
204
+ }
205
+ return false;
206
+ };
191
207
  TreeSelect.prototype.componentWillUnmount = function () {
192
208
  document.removeEventListener('mousedown', this.onMouseDown);
193
209
  document.removeEventListener('keydown', this.onKeyDown);
@@ -639,7 +655,7 @@ var TreeSelect = /** @class */ (function (_super) {
639
655
  };
640
656
  return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
641
657
  })))),
642
- React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
658
+ this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
643
659
  React.createElement("div", { className: 'autocomplete autocomplete--multi-select' +
644
660
  (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
645
661
  zIndex: this.zIndex,
@@ -681,7 +697,8 @@ var TreeSelect = /** @class */ (function (_super) {
681
697
  React.createElement("button", { className: "autocomplete__category-title" }, this.props.optionTemplate
682
698
  ? this.props.optionTemplate(this.state.buttonValue.value)
683
699
  : this.props.getLabel(this.state.buttonValue.value)),
684
- this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)))),
700
+ this.props.selectBranchWithChildren &&
701
+ this.branchButton(this.state.buttonValue)))),
685
702
  this.state.loading ? (React.createElement("ul", { className: "suggestion-list--loader" },
686
703
  React.createElement(Loader_1.Loader, { overlay: true }))) : this.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: "tree", "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
687
704
  var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(option.value); });
@@ -692,7 +709,7 @@ var TreeSelect = /** @class */ (function (_super) {
692
709
  ], false),
693
710
  });
694
711
  } }));
695
- }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
712
+ }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
696
713
  };
697
714
  return TreeSelect;
698
715
  }(React.Component));