superdesk-ui-framework 3.0.57 → 3.0.59

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 (14) hide show
  1. package/app-typescript/components/Form/InputWrapper.tsx +2 -1
  2. package/app-typescript/components/RadioButtonGroup.tsx +9 -1
  3. package/app-typescript/components/TreeSelect/TreeSelect.tsx +12 -7
  4. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +1 -0
  5. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +2 -1
  6. package/dist/examples.bundle.js +20 -17
  7. package/dist/superdesk-ui.bundle.js +19 -16
  8. package/package.json +1 -1
  9. package/react/components/Form/InputWrapper.d.ts +1 -0
  10. package/react/components/Form/InputWrapper.js +1 -1
  11. package/react/components/RadioButtonGroup.js +6 -2
  12. package/react/components/TreeSelect/TreeSelect.js +9 -10
  13. package/react/components/TreeSelect/TreeSelectItem.js +1 -1
  14. package/react/components/TreeSelect/TreeSelectPill.js +2 -2
package/app-typescript/components/Form/InputWrapper.tsx CHANGED
@@ -27,6 +27,7 @@ interface IPropsBase extends IInputWrapper {
27
27
  value?: string | number;
28
28
  htmlId?: string;
29
29
  size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
30
+ 'data-test-id'?: string;
30
31
  }
31
32
 
32
33
  interface IState {
@@ -61,7 +62,7 @@ export class InputWrapper extends React.Component<IPropsBase, IState> {
61
62
  });
62
63
 
63
64
  return (
64
- <div className={classes}>
65
+ <div className={classes} data-test-id={this.props['data-test-id']}>
65
66
  <label
66
67
  className={labelClasses}
67
68
  htmlFor={this.props.htmlId}
package/app-typescript/components/RadioButtonGroup.tsx CHANGED
@@ -48,6 +48,9 @@ export class RadioButtonGroup extends React.Component<IProps> {
48
48
  [`sd-check-button__group--grid`]: this.props.group?.grid,
49
49
  [`sd-check-button__group--padded`]: this.props.group?.padded === true,
50
50
  });
51
+
52
+ const selectedOption = this.props.value == null ? undefined : this.props.options.find(({value}) => value === this.props.value);
53
+
51
54
  return (
52
55
  <React.Fragment>
53
56
  {!this.props.group?.groupLabel ?
@@ -56,6 +59,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
56
59
  className={classes}
57
60
  aria-labelledby={this.props.group?.groupLabelledBy}
58
61
  data-test-id={this.props['data-test-id']}
62
+ data-test-value={selectedOption == null ? undefined : selectedOption.label}
59
63
  >{
60
64
  this.props.options.map((item: any, index: number) => (
61
65
  <span className="sd-check-button sd-check-button--native"
@@ -86,7 +90,11 @@ export class RadioButtonGroup extends React.Component<IProps> {
86
90
  }</div>
87
91
  : null }
88
92
  {this.props.group?.groupLabel ?
89
- <div className='sd-check-button__group-wrapper' data-test-id={this.props['data-test-id']}>
93
+ <div
94
+ className='sd-check-button__group-wrapper'
95
+ data-test-id={this.props['data-test-id']}
96
+ data-test-value={selectedOption == null ? undefined : selectedOption.label}
97
+ >
90
98
 
91
99
  <FormLabel forId={this.htmlId + 'group'} text={this.props.group.groupLabel} />
92
100
  <div role="radiogroup" id={this.htmlId + 'group'} className={classes}>{
package/app-typescript/components/TreeSelect/TreeSelect.tsx CHANGED
@@ -505,7 +505,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
505
505
  this.handleValue(event, item);
506
506
  }}
507
507
  >
508
- <button className="suggestion-item--btn">
508
+ <button className="suggestion-item--btn" data-test-id="option">
509
509
  {this.props.optionTemplate
510
510
  ? this.props.optionTemplate(item.value)
511
511
  : (
@@ -627,10 +627,12 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
627
627
  labelHidden={this.props.labelHidden}
628
628
  htmlId={this.htmlId}
629
629
  tabindex={this.props.tabindex}
630
+ data-test-id={this.props['data-test-id']}
630
631
  >
631
632
  <div
632
633
  className={`tags-input sd-input__input tags-input--${this.props.allowMultiple ? 'multi-select' : 'single-select'}`}
633
634
  ref={this.treeSelectRef}
635
+ data-test-id={this.props.allowMultiple ? undefined : 'open-popover'}
634
636
  >
635
637
  {this.props.allowMultiple
636
638
  ? <div className="tags-input__tags">
@@ -645,6 +647,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
645
647
  this.setState({openDropdown: !this.state.openDropdown});
646
648
  }
647
649
  }}
650
+ data-test-id="open-popover"
648
651
  >
649
652
  <i className="icon-plus-large"></i>
650
653
  </button>
@@ -705,7 +708,6 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
705
708
  onClick={() => {
706
709
  this.setState({openDropdown: !this.state.openDropdown});
707
710
  }}
708
- data-test-id={this.state.openDropdown ? undefined : this.props['data-test-id']}
709
711
  />
710
712
  }
711
713
 
@@ -749,14 +751,17 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
749
751
  <span
750
752
  className={backgroundColor && `tags-input__tag-item`}
751
753
  style={{backgroundColor, margin: 0}}
754
+ data-test-id="item"
752
755
  >
753
756
  {children}
754
757
  </span>
755
758
 
756
- {this.props.readOnly
757
- || <span className="tags-input__remove-button">
758
- <Icon name='remove-sign'></Icon>
759
- </span>
759
+ {
760
+ (this.props.readOnly !== true && this.props.required !== true) && (
761
+ <span className="tags-input__remove-button" data-test-id="clear-value">
762
+ <Icon name='remove-sign'></Icon>
763
+ </span>
764
+ )
760
765
  }
761
766
  </span>
762
767
  </span>
@@ -779,7 +784,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
779
784
 
780
785
  {createPortal(
781
786
  this.state.openDropdown
782
- && <div id='TREESELECT_DROPDOWN' data-test-id={this.props['data-test-id']}>
787
+ && <div data-test-id="tree-select-popover">
783
788
  <div
784
789
  className={
785
790
  "autocomplete autocomplete--multi-select"
package/app-typescript/components/TreeSelect/TreeSelectItem.tsx CHANGED
@@ -48,6 +48,7 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
48
48
  }
49
49
  }}
50
50
  disabled={this.props.disabledItem}
51
+ data-test-id="option"
51
52
  >
52
53
  {(this.props.getBorderColor && !this.props.allowMultiple)
53
54
  && <div
package/app-typescript/components/TreeSelect/TreeSelectPill.tsx CHANGED
@@ -29,6 +29,7 @@ export class TreeSelectPill<T> extends React.Component<IProps<T>> {
29
29
  : this.props.getBackgroundColor
30
30
  && {backgroundColor: this.props.getBackgroundColor(this.props.item)}
31
31
  }
32
+ data-test-id="item"
32
33
  >
33
34
  <span
34
35
  className="tags-input__helper-box"
@@ -42,7 +43,7 @@ export class TreeSelectPill<T> extends React.Component<IProps<T>> {
42
43
  {this.props.children}
43
44
 
44
45
  {!this.props.readOnly
45
- && <span className="tags-input__remove-button">
46
+ && <span className="tags-input__remove-button" data-test-id="remove">
46
47
  <Icon name="close-small"></Icon>
47
48
  </span>
48
49
  }
package/dist/examples.bundle.js CHANGED
@@ -41994,7 +41994,7 @@ var InputWrapper = /** @class */ (function (_super) {
41994
41994
  'a11y-only': this.props.labelHidden,
41995
41995
  'sd-input__label--boxed': this.props.boxedLable,
41996
41996
  });
41997
- return (React.createElement("div", { className: classes },
41997
+ return (React.createElement("div", { className: classes, "data-test-id": this.props['data-test-id'] },
41998
41998
  React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
41999
41999
  React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
42000
42000
  this.props.maxLength
@@ -64874,7 +64874,7 @@ var TreeSelect = /** @class */ (function (_super) {
64874
64874
  return (React.createElement("li", { key: i, className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
64875
64875
  _this.handleValue(event, item);
64876
64876
  } },
64877
- React.createElement("button", { className: "suggestion-item--btn" }, _this.props.optionTemplate
64877
+ React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate
64878
64878
  ? _this.props.optionTemplate(item.value)
64879
64879
  : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
64880
64880
  });
@@ -64944,8 +64944,8 @@ var TreeSelect = /** @class */ (function (_super) {
64944
64944
  getBorderColor: this.props.getBorderColor,
64945
64945
  }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
64946
64946
  }
64947
- return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
64948
- React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef }, this.props.allowMultiple
64947
+ return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, "data-test-id": this.props['data-test-id'] },
64948
+ React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
64949
64949
  ? React.createElement("div", { className: "tags-input__tags" },
64950
64950
  this.props.readOnly
64951
64951
  || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
@@ -64953,7 +64953,7 @@ var TreeSelect = /** @class */ (function (_super) {
64953
64953
  if (!_this.props.disabled) {
64954
64954
  _this.setState({ openDropdown: !_this.state.openDropdown });
64955
64955
  }
64956
- } },
64956
+ }, "data-test-id": "open-popover" },
64957
64957
  React.createElement("i", { className: "icon-plus-large" })),
64958
64958
  React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
64959
64959
  var Wrapper = function (_a) {
@@ -64977,7 +64977,7 @@ var TreeSelect = /** @class */ (function (_super) {
64977
64977
  this.props.readOnly
64978
64978
  || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
64979
64979
  _this.setState({ openDropdown: !_this.state.openDropdown });
64980
- }, "data-test-id": this.state.openDropdown ? undefined : this.props['data-test-id'] }),
64980
+ } }),
64981
64981
  this.state.value.length < 1
64982
64982
  && React.createElement("span", { className: 'tags-input__single-item'
64983
64983
  + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
@@ -64992,10 +64992,9 @@ var TreeSelect = /** @class */ (function (_super) {
64992
64992
  ? { backgroundColor: borderColor }
64993
64993
  : { backgroundColor: _this.props.getBorderColor(item) } }),
64994
64994
  React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) } },
64995
- React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
64996
- _this.props.readOnly
64997
- || React.createElement("span", { className: "tags-input__remove-button" },
64998
- React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
64995
+ React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 }, "data-test-id": "item" }, children),
64996
+ (_this.props.readOnly !== true && _this.props.required !== true) && (React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "clear-value" },
64997
+ React.createElement(Icon_1.Icon, { name: 'remove-sign' }))))));
64999
64998
  };
65000
64999
  return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
65001
65000
  ? _this.props.valueTemplate(item, Wrapper)
@@ -65003,7 +65002,7 @@ var TreeSelect = /** @class */ (function (_super) {
65003
65002
  React.createElement("span", null, _this.props.getLabel(item)))));
65004
65003
  }))),
65005
65004
  (0, react_dom_1.createPortal)(this.state.openDropdown
65006
- && React.createElement("div", { id: 'TREESELECT_DROPDOWN', "data-test-id": this.props['data-test-id'] },
65005
+ && React.createElement("div", { "data-test-id": "tree-select-popover" },
65007
65006
  React.createElement("div", { className: "autocomplete autocomplete--multi-select"
65008
65007
  + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
65009
65008
  zIndex: this.props.zIndex,
@@ -65147,7 +65146,7 @@ var TreeSelectItem = /** @class */ (function (_super) {
65147
65146
  if (event.key === 'Enter' && _this.props.option.children) {
65148
65147
  (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a);
65149
65148
  }
65150
- }, disabled: this.props.disabledItem },
65149
+ }, disabled: this.props.disabledItem, "data-test-id": "option" },
65151
65150
  (this.props.getBorderColor && !this.props.allowMultiple)
65152
65151
  && React.createElement("div", { className: "item-border", style: {
65153
65152
  backgroundColor: this.props.getBorderColor(this.props.option.value),
@@ -78582,9 +78581,13 @@ var RadioButtonGroup = /** @class */ (function (_super) {
78582
78581
  _a["sd-check-button__group--grid"] = (_g = this.props.group) === null || _g === void 0 ? void 0 : _g.grid,
78583
78582
  _a["sd-check-button__group--padded"] = ((_h = this.props.group) === null || _h === void 0 ? void 0 : _h.padded) === true,
78584
78583
  _a));
78584
+ var selectedOption = this.props.value == null ? undefined : this.props.options.find(function (_a) {
78585
+ var value = _a.value;
78586
+ return value === _this.props.value;
78587
+ });
78585
78588
  return (React.createElement(React.Fragment, null,
78586
78589
  !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
78587
- React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'] }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
78590
+ React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
78588
78591
  React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: _this.props.tabindex, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
78589
78592
  React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined, "data-test-id": "item" },
78590
78593
  item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
@@ -78592,7 +78595,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
78592
78595
  React.createElement("span", { className: "sd-check-button__text-label-inner" }, item.label) : null))); }))
78593
78596
  : null,
78594
78597
  ((_l = this.props.group) === null || _l === void 0 ? void 0 : _l.groupLabel) ?
78595
- React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'] },
78598
+ React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label },
78596
78599
  React.createElement(FormLabel_1.FormLabel, { forId: this.htmlId + 'group', text: this.props.group.groupLabel }),
78597
78600
  React.createElement("div", { role: "radiogroup", id: this.htmlId + 'group', className: classes }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: -1 },
78598
78601
  React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: 0, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
@@ -106618,7 +106621,7 @@ var TreeSelectPill = /** @class */ (function (_super) {
106618
106621
  && _this.props.onRemove(); }, style: this.props.valueTemplate
106619
106622
  ? { backgroundColor: this.props.backgroundColor }
106620
106623
  : this.props.getBackgroundColor
106621
- && { backgroundColor: this.props.getBackgroundColor(this.props.item) } },
106624
+ && { backgroundColor: this.props.getBackgroundColor(this.props.item) }, "data-test-id": "item" },
106622
106625
  React.createElement("span", { className: "tags-input__helper-box", style: {
106623
106626
  color: this.props.backgroundColor
106624
106627
  ? (0, Label_1.getTextColor)(this.props.backgroundColor)
@@ -106627,7 +106630,7 @@ var TreeSelectPill = /** @class */ (function (_super) {
106627
106630
  } },
106628
106631
  this.props.children,
106629
106632
  !this.props.readOnly
106630
- && React.createElement("span", { className: "tags-input__remove-button" },
106633
+ && React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "remove" },
106631
106634
  React.createElement(Icon_1.Icon, { name: "close-small" })))));
106632
106635
  };
106633
106636
  return TreeSelectPill;
@@ -144092,7 +144095,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
144092
144095
  /* 692 */
144093
144096
  /***/ (function(module, exports) {
144094
144097
 
144095
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.57","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","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"}}
144098
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.59","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","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"}}
144096
144099
 
144097
144100
  /***/ }),
144098
144101
  /* 693 */
package/dist/superdesk-ui.bundle.js CHANGED
@@ -41638,7 +41638,7 @@ var InputWrapper = /** @class */ (function (_super) {
41638
41638
  'a11y-only': this.props.labelHidden,
41639
41639
  'sd-input__label--boxed': this.props.boxedLable,
41640
41640
  });
41641
- return (React.createElement("div", { className: classes },
41641
+ return (React.createElement("div", { className: classes, "data-test-id": this.props['data-test-id'] },
41642
41642
  React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
41643
41643
  React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
41644
41644
  this.props.maxLength
@@ -64491,7 +64491,7 @@ var TreeSelect = /** @class */ (function (_super) {
64491
64491
  return (React.createElement("li", { key: i, className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
64492
64492
  _this.handleValue(event, item);
64493
64493
  } },
64494
- React.createElement("button", { className: "suggestion-item--btn" }, _this.props.optionTemplate
64494
+ React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate
64495
64495
  ? _this.props.optionTemplate(item.value)
64496
64496
  : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
64497
64497
  });
@@ -64561,8 +64561,8 @@ var TreeSelect = /** @class */ (function (_super) {
64561
64561
  getBorderColor: this.props.getBorderColor,
64562
64562
  }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
64563
64563
  }
64564
- return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
64565
- React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef }, this.props.allowMultiple
64564
+ return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, "data-test-id": this.props['data-test-id'] },
64565
+ React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
64566
64566
  ? React.createElement("div", { className: "tags-input__tags" },
64567
64567
  this.props.readOnly
64568
64568
  || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
@@ -64570,7 +64570,7 @@ var TreeSelect = /** @class */ (function (_super) {
64570
64570
  if (!_this.props.disabled) {
64571
64571
  _this.setState({ openDropdown: !_this.state.openDropdown });
64572
64572
  }
64573
- } },
64573
+ }, "data-test-id": "open-popover" },
64574
64574
  React.createElement("i", { className: "icon-plus-large" })),
64575
64575
  React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
64576
64576
  var Wrapper = function (_a) {
@@ -64594,7 +64594,7 @@ var TreeSelect = /** @class */ (function (_super) {
64594
64594
  this.props.readOnly
64595
64595
  || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
64596
64596
  _this.setState({ openDropdown: !_this.state.openDropdown });
64597
- }, "data-test-id": this.state.openDropdown ? undefined : this.props['data-test-id'] }),
64597
+ } }),
64598
64598
  this.state.value.length < 1
64599
64599
  && React.createElement("span", { className: 'tags-input__single-item'
64600
64600
  + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
@@ -64609,10 +64609,9 @@ var TreeSelect = /** @class */ (function (_super) {
64609
64609
  ? { backgroundColor: borderColor }
64610
64610
  : { backgroundColor: _this.props.getBorderColor(item) } }),
64611
64611
  React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) } },
64612
- React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
64613
- _this.props.readOnly
64614
- || React.createElement("span", { className: "tags-input__remove-button" },
64615
- React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
64612
+ React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 }, "data-test-id": "item" }, children),
64613
+ (_this.props.readOnly !== true && _this.props.required !== true) && (React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "clear-value" },
64614
+ React.createElement(Icon_1.Icon, { name: 'remove-sign' }))))));
64616
64615
  };
64617
64616
  return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
64618
64617
  ? _this.props.valueTemplate(item, Wrapper)
@@ -64620,7 +64619,7 @@ var TreeSelect = /** @class */ (function (_super) {
64620
64619
  React.createElement("span", null, _this.props.getLabel(item)))));
64621
64620
  }))),
64622
64621
  (0, react_dom_1.createPortal)(this.state.openDropdown
64623
- && React.createElement("div", { id: 'TREESELECT_DROPDOWN', "data-test-id": this.props['data-test-id'] },
64622
+ && React.createElement("div", { "data-test-id": "tree-select-popover" },
64624
64623
  React.createElement("div", { className: "autocomplete autocomplete--multi-select"
64625
64624
  + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
64626
64625
  zIndex: this.props.zIndex,
@@ -64764,7 +64763,7 @@ var TreeSelectItem = /** @class */ (function (_super) {
64764
64763
  if (event.key === 'Enter' && _this.props.option.children) {
64765
64764
  (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a);
64766
64765
  }
64767
- }, disabled: this.props.disabledItem },
64766
+ }, disabled: this.props.disabledItem, "data-test-id": "option" },
64768
64767
  (this.props.getBorderColor && !this.props.allowMultiple)
64769
64768
  && React.createElement("div", { className: "item-border", style: {
64770
64769
  backgroundColor: this.props.getBorderColor(this.props.option.value),
@@ -77843,9 +77842,13 @@ var RadioButtonGroup = /** @class */ (function (_super) {
77843
77842
  _a["sd-check-button__group--grid"] = (_g = this.props.group) === null || _g === void 0 ? void 0 : _g.grid,
77844
77843
  _a["sd-check-button__group--padded"] = ((_h = this.props.group) === null || _h === void 0 ? void 0 : _h.padded) === true,
77845
77844
  _a));
77845
+ var selectedOption = this.props.value == null ? undefined : this.props.options.find(function (_a) {
77846
+ var value = _a.value;
77847
+ return value === _this.props.value;
77848
+ });
77846
77849
  return (React.createElement(React.Fragment, null,
77847
77850
  !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
77848
- React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'] }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
77851
+ React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
77849
77852
  React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: _this.props.tabindex, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
77850
77853
  React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined, "data-test-id": "item" },
77851
77854
  item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
@@ -77853,7 +77856,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
77853
77856
  React.createElement("span", { className: "sd-check-button__text-label-inner" }, item.label) : null))); }))
77854
77857
  : null,
77855
77858
  ((_l = this.props.group) === null || _l === void 0 ? void 0 : _l.groupLabel) ?
77856
- React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'] },
77859
+ React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label },
77857
77860
  React.createElement(FormLabel_1.FormLabel, { forId: this.htmlId + 'group', text: this.props.group.groupLabel }),
77858
77861
  React.createElement("div", { role: "radiogroup", id: this.htmlId + 'group', className: classes }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: -1 },
77859
77862
  React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: 0, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
@@ -105879,7 +105882,7 @@ var TreeSelectPill = /** @class */ (function (_super) {
105879
105882
  && _this.props.onRemove(); }, style: this.props.valueTemplate
105880
105883
  ? { backgroundColor: this.props.backgroundColor }
105881
105884
  : this.props.getBackgroundColor
105882
- && { backgroundColor: this.props.getBackgroundColor(this.props.item) } },
105885
+ && { backgroundColor: this.props.getBackgroundColor(this.props.item) }, "data-test-id": "item" },
105883
105886
  React.createElement("span", { className: "tags-input__helper-box", style: {
105884
105887
  color: this.props.backgroundColor
105885
105888
  ? (0, Label_1.getTextColor)(this.props.backgroundColor)
@@ -105888,7 +105891,7 @@ var TreeSelectPill = /** @class */ (function (_super) {
105888
105891
  } },
105889
105892
  this.props.children,
105890
105893
  !this.props.readOnly
105891
- && React.createElement("span", { className: "tags-input__remove-button" },
105894
+ && React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "remove" },
105892
105895
  React.createElement(Icon_1.Icon, { name: "close-small" })))));
105893
105896
  };
105894
105897
  return TreeSelectPill;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.57",
3
+ "version": "3.0.59",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Form/InputWrapper.d.ts CHANGED
@@ -23,6 +23,7 @@ interface IPropsBase extends IInputWrapper {
23
23
  value?: string | number;
24
24
  htmlId?: string;
25
25
  size?: 'medium' | 'large' | 'x-large';
26
+ 'data-test-id'?: string;
26
27
  }
27
28
  interface IState {
28
29
  value: string | number;
package/react/components/Form/InputWrapper.js CHANGED
@@ -74,7 +74,7 @@ var InputWrapper = /** @class */ (function (_super) {
74
74
  'a11y-only': this.props.labelHidden,
75
75
  'sd-input__label--boxed': this.props.boxedLable,
76
76
  });
77
- return (React.createElement("div", { className: classes },
77
+ return (React.createElement("div", { className: classes, "data-test-id": this.props['data-test-id'] },
78
78
  React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
79
79
  React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
80
80
  this.props.maxLength
package/react/components/RadioButtonGroup.js CHANGED
@@ -70,9 +70,13 @@ var RadioButtonGroup = /** @class */ (function (_super) {
70
70
  _a["sd-check-button__group--grid"] = (_g = this.props.group) === null || _g === void 0 ? void 0 : _g.grid,
71
71
  _a["sd-check-button__group--padded"] = ((_h = this.props.group) === null || _h === void 0 ? void 0 : _h.padded) === true,
72
72
  _a));
73
+ var selectedOption = this.props.value == null ? undefined : this.props.options.find(function (_a) {
74
+ var value = _a.value;
75
+ return value === _this.props.value;
76
+ });
73
77
  return (React.createElement(React.Fragment, null,
74
78
  !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
75
- React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'] }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
79
+ React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
76
80
  React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: _this.props.tabindex, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
77
81
  React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined, "data-test-id": "item" },
78
82
  item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
@@ -80,7 +84,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
80
84
  React.createElement("span", { className: "sd-check-button__text-label-inner" }, item.label) : null))); }))
81
85
  : null,
82
86
  ((_l = this.props.group) === null || _l === void 0 ? void 0 : _l.groupLabel) ?
83
- React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'] },
87
+ React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label },
84
88
  React.createElement(FormLabel_1.FormLabel, { forId: this.htmlId + 'group', text: this.props.group.groupLabel }),
85
89
  React.createElement("div", { role: "radiogroup", id: this.htmlId + 'group', className: classes }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: -1 },
86
90
  React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: 0, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
package/react/components/TreeSelect/TreeSelect.js CHANGED
@@ -430,7 +430,7 @@ var TreeSelect = /** @class */ (function (_super) {
430
430
  return (React.createElement("li", { key: i, className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
431
431
  _this.handleValue(event, item);
432
432
  } },
433
- React.createElement("button", { className: "suggestion-item--btn" }, _this.props.optionTemplate
433
+ React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate
434
434
  ? _this.props.optionTemplate(item.value)
435
435
  : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
436
436
  });
@@ -500,8 +500,8 @@ var TreeSelect = /** @class */ (function (_super) {
500
500
  getBorderColor: this.props.getBorderColor,
501
501
  }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
502
502
  }
503
- return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
504
- React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef }, this.props.allowMultiple
503
+ return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, "data-test-id": this.props['data-test-id'] },
504
+ React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
505
505
  ? React.createElement("div", { className: "tags-input__tags" },
506
506
  this.props.readOnly
507
507
  || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
@@ -509,7 +509,7 @@ var TreeSelect = /** @class */ (function (_super) {
509
509
  if (!_this.props.disabled) {
510
510
  _this.setState({ openDropdown: !_this.state.openDropdown });
511
511
  }
512
- } },
512
+ }, "data-test-id": "open-popover" },
513
513
  React.createElement("i", { className: "icon-plus-large" })),
514
514
  React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
515
515
  var Wrapper = function (_a) {
@@ -533,7 +533,7 @@ var TreeSelect = /** @class */ (function (_super) {
533
533
  this.props.readOnly
534
534
  || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
535
535
  _this.setState({ openDropdown: !_this.state.openDropdown });
536
- }, "data-test-id": this.state.openDropdown ? undefined : this.props['data-test-id'] }),
536
+ } }),
537
537
  this.state.value.length < 1
538
538
  && React.createElement("span", { className: 'tags-input__single-item'
539
539
  + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
@@ -548,10 +548,9 @@ var TreeSelect = /** @class */ (function (_super) {
548
548
  ? { backgroundColor: borderColor }
549
549
  : { backgroundColor: _this.props.getBorderColor(item) } }),
550
550
  React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) } },
551
- React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
552
- _this.props.readOnly
553
- || React.createElement("span", { className: "tags-input__remove-button" },
554
- React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
551
+ React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 }, "data-test-id": "item" }, children),
552
+ (_this.props.readOnly !== true && _this.props.required !== true) && (React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "clear-value" },
553
+ React.createElement(Icon_1.Icon, { name: 'remove-sign' }))))));
555
554
  };
556
555
  return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
557
556
  ? _this.props.valueTemplate(item, Wrapper)
@@ -559,7 +558,7 @@ var TreeSelect = /** @class */ (function (_super) {
559
558
  React.createElement("span", null, _this.props.getLabel(item)))));
560
559
  }))),
561
560
  (0, react_dom_1.createPortal)(this.state.openDropdown
562
- && React.createElement("div", { id: 'TREESELECT_DROPDOWN', "data-test-id": this.props['data-test-id'] },
561
+ && React.createElement("div", { "data-test-id": "tree-select-popover" },
563
562
  React.createElement("div", { className: "autocomplete autocomplete--multi-select"
564
563
  + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
565
564
  zIndex: this.props.zIndex,
package/react/components/TreeSelect/TreeSelectItem.js CHANGED
@@ -70,7 +70,7 @@ var TreeSelectItem = /** @class */ (function (_super) {
70
70
  if (event.key === 'Enter' && _this.props.option.children) {
71
71
  (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a);
72
72
  }
73
- }, disabled: this.props.disabledItem },
73
+ }, disabled: this.props.disabledItem, "data-test-id": "option" },
74
74
  (this.props.getBorderColor && !this.props.allowMultiple)
75
75
  && React.createElement("div", { className: "item-border", style: {
76
76
  backgroundColor: this.props.getBorderColor(this.props.option.value),
package/react/components/TreeSelect/TreeSelectPill.js CHANGED
@@ -54,7 +54,7 @@ var TreeSelectPill = /** @class */ (function (_super) {
54
54
  && _this.props.onRemove(); }, style: this.props.valueTemplate
55
55
  ? { backgroundColor: this.props.backgroundColor }
56
56
  : this.props.getBackgroundColor
57
- && { backgroundColor: this.props.getBackgroundColor(this.props.item) } },
57
+ && { backgroundColor: this.props.getBackgroundColor(this.props.item) }, "data-test-id": "item" },
58
58
  React.createElement("span", { className: "tags-input__helper-box", style: {
59
59
  color: this.props.backgroundColor
60
60
  ? (0, Label_1.getTextColor)(this.props.backgroundColor)
@@ -63,7 +63,7 @@ var TreeSelectPill = /** @class */ (function (_super) {
63
63
  } },
64
64
  this.props.children,
65
65
  !this.props.readOnly
66
- && React.createElement("span", { className: "tags-input__remove-button" },
66
+ && React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "remove" },
67
67
  React.createElement(Icon_1.Icon, { name: "close-small" })))));
68
68
  };
69
69
  return TreeSelectPill;