superdesk-ui-framework 3.0.59 → 3.0.61

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 (11) hide show
  1. package/app-typescript/components/Layouts/Panel.tsx +16 -7
  2. package/app-typescript/components/RadioButtonGroup.tsx +3 -1
  3. package/app-typescript/components/TreeSelect/TreeSelect.tsx +4 -2
  4. package/dist/examples.bundle.js +24 -15
  5. package/dist/superdesk-ui.bundle.js +23 -14
  6. package/package.json +1 -1
  7. package/react/components/Layouts/Panel.d.ts +3 -1
  8. package/react/components/Layouts/Panel.js +13 -6
  9. package/react/components/RadioButtonGroup.js +6 -4
  10. package/react/components/TreeSelect/TreeSelect.d.ts +2 -1
  11. package/react/components/TreeSelect/TreeSelect.js +4 -4
package/app-typescript/components/Layouts/Panel.tsx CHANGED
@@ -11,7 +11,7 @@ interface IPropsPanel {
11
11
  side?: 'left' | 'right';
12
12
  theme?: 'light' | 'dark';
13
13
  className?: string;
14
- size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'full' | 'auto';
14
+ size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'full' | 'auto' | {custom: React.CSSProperties['width']};
15
15
  background?: 'transparent' | 'light' | 'grey'; // defaults to light (white)
16
16
  open?: boolean;
17
17
  }
@@ -24,14 +24,23 @@ export default class Panel extends React.PureComponent<IPropsPanel> {
24
24
  this.props.background !== 'light' && this.props.background !== undefined,
25
25
  }, this.props.className);
26
26
 
27
- let classes2 = classNames('side-panel__container', {
28
- [`side-panel__container--${this.props.side}`]: this.props.side,
29
- [`side-panel__container--${this.props.size}`]: this.props.size,
30
- [`panel-open`]: this.props.open,
31
- });
27
+ const classes2Obj: {[className: string]: boolean} = {
28
+ [`side-panel__container--${this.props.side}`]: this.props.side !== null,
29
+ [`panel-open`]: this.props.open === true,
30
+ };
31
+
32
+ const style: React.CSSProperties = {};
33
+
34
+ if (typeof this.props.size === 'string') {
35
+ classes2Obj[`side-panel__container--${this.props.size}`] = true;
36
+ } else if (this.props.size != null) {
37
+ style.width = this.props.size.custom;
38
+ }
39
+
40
+ let classes2 = classNames('side-panel__container', classes2Obj);
32
41
 
33
42
  return (
34
- <div className={classes2} data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
43
+ <div className={classes2} style={style} data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
35
44
  <div className={classes}>
36
45
  {this.props.children}
37
46
  </div>
package/app-typescript/components/RadioButtonGroup.tsx CHANGED
@@ -49,7 +49,9 @@ export class RadioButtonGroup extends React.Component<IProps> {
49
49
  [`sd-check-button__group--padded`]: this.props.group?.padded === true,
50
50
  });
51
51
 
52
- const selectedOption = this.props.value == null ? undefined : this.props.options.find(({value}) => value === this.props.value);
52
+ const selectedOption = this.props.value == null
53
+ ? undefined
54
+ : this.props.options.find(({value}) => value === this.props.value);
53
55
 
54
56
  return (
55
57
  <React.Fragment>
package/app-typescript/components/TreeSelect/TreeSelect.tsx CHANGED
@@ -35,7 +35,8 @@ interface IPropsBase<T> extends IInputWrapper {
35
35
  value?: Array<T>;
36
36
  selectBranchWithChildren?: boolean;
37
37
  readOnly?: boolean;
38
- width?: string;
38
+ popoverWidth?: 'medium' | 'match-input';
39
+ inputWidth?: '100%';
39
40
  allowMultiple?: boolean;
40
41
  loading?: boolean;
41
42
  singleLevelSearch?: boolean;
@@ -627,6 +628,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
627
628
  labelHidden={this.props.labelHidden}
628
629
  htmlId={this.htmlId}
629
630
  tabindex={this.props.tabindex}
631
+ fullWidth={this.props.inputWidth === '100%' ?? false}
630
632
  data-test-id={this.props['data-test-id']}
631
633
  >
632
634
  <div
@@ -788,7 +790,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
788
790
  <div
789
791
  className={
790
792
  "autocomplete autocomplete--multi-select"
791
- + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
793
+ + (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : '')
792
794
  }
793
795
  style={{
794
796
  zIndex: this.props.zIndex,
package/dist/examples.bundle.js CHANGED
@@ -60119,12 +60119,19 @@ var Panel = /** @class */ (function (_super) {
60119
60119
  _a["side-panel--".concat(this.props.side)] = this.props.side,
60120
60120
  _a["side-panel--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
60121
60121
  _a), this.props.className);
60122
- var classes2 = (0, classnames_1.default)('side-panel__container', (_b = {},
60123
- _b["side-panel__container--".concat(this.props.side)] = this.props.side,
60124
- _b["side-panel__container--".concat(this.props.size)] = this.props.size,
60125
- _b["panel-open"] = this.props.open,
60126
- _b));
60127
- return (React.createElement("div", { className: classes2, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
60122
+ var classes2Obj = (_b = {},
60123
+ _b["side-panel__container--".concat(this.props.side)] = this.props.side !== null,
60124
+ _b["panel-open"] = this.props.open === true,
60125
+ _b);
60126
+ var style = {};
60127
+ if (typeof this.props.size === 'string') {
60128
+ classes2Obj["side-panel__container--".concat(this.props.size)] = true;
60129
+ }
60130
+ else if (this.props.size != null) {
60131
+ style.width = this.props.size.custom;
60132
+ }
60133
+ var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
60134
+ return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
60128
60135
  React.createElement("div", { className: classes }, this.props.children)));
60129
60136
  };
60130
60137
  return Panel;
@@ -64932,7 +64939,7 @@ var TreeSelect = /** @class */ (function (_super) {
64932
64939
  };
64933
64940
  TreeSelect.prototype.render = function () {
64934
64941
  var _this = this;
64935
- var _a;
64942
+ var _a, _b;
64936
64943
  if (this.props.preview) {
64937
64944
  return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
64938
64945
  ? {
@@ -64944,7 +64951,7 @@ var TreeSelect = /** @class */ (function (_super) {
64944
64951
  getBorderColor: this.props.getBorderColor,
64945
64952
  }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
64946
64953
  }
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'] },
64954
+ 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, fullWidth: (_a = this.props.inputWidth === '100%') !== null && _a !== void 0 ? _a : false, "data-test-id": this.props['data-test-id'] },
64948
64955
  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
64956
  ? React.createElement("div", { className: "tags-input__tags" },
64950
64957
  this.props.readOnly
@@ -65004,9 +65011,9 @@ var TreeSelect = /** @class */ (function (_super) {
65004
65011
  (0, react_dom_1.createPortal)(this.state.openDropdown
65005
65012
  && React.createElement("div", { "data-test-id": "tree-select-popover" },
65006
65013
  React.createElement("div", { className: "autocomplete autocomplete--multi-select"
65007
- + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
65014
+ + (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
65008
65015
  zIndex: this.props.zIndex,
65009
- width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
65016
+ width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
65010
65017
  }, ref: this.dropdownRef },
65011
65018
  React.createElement("div", { className: 'autocomplete__header' },
65012
65019
  React.createElement("div", { className: "autocomplete__icon", onClick: function () {
@@ -78581,10 +78588,12 @@ var RadioButtonGroup = /** @class */ (function (_super) {
78581
78588
  _a["sd-check-button__group--grid"] = (_g = this.props.group) === null || _g === void 0 ? void 0 : _g.grid,
78582
78589
  _a["sd-check-button__group--padded"] = ((_h = this.props.group) === null || _h === void 0 ? void 0 : _h.padded) === true,
78583
78590
  _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
- });
78591
+ var selectedOption = this.props.value == null
78592
+ ? undefined
78593
+ : this.props.options.find(function (_a) {
78594
+ var value = _a.value;
78595
+ return value === _this.props.value;
78596
+ });
78588
78597
  return (React.createElement(React.Fragment, null,
78589
78598
  !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
78590
78599
  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 },
@@ -144095,7 +144104,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
144095
144104
  /* 692 */
144096
144105
  /***/ (function(module, exports) {
144097
144106
 
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"}}
144107
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.61","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"}}
144099
144108
 
144100
144109
  /***/ }),
144101
144110
  /* 693 */
package/dist/superdesk-ui.bundle.js CHANGED
@@ -59763,12 +59763,19 @@ var Panel = /** @class */ (function (_super) {
59763
59763
  _a["side-panel--".concat(this.props.side)] = this.props.side,
59764
59764
  _a["side-panel--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
59765
59765
  _a), this.props.className);
59766
- var classes2 = (0, classnames_1.default)('side-panel__container', (_b = {},
59767
- _b["side-panel__container--".concat(this.props.side)] = this.props.side,
59768
- _b["side-panel__container--".concat(this.props.size)] = this.props.size,
59769
- _b["panel-open"] = this.props.open,
59770
- _b));
59771
- return (React.createElement("div", { className: classes2, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
59766
+ var classes2Obj = (_b = {},
59767
+ _b["side-panel__container--".concat(this.props.side)] = this.props.side !== null,
59768
+ _b["panel-open"] = this.props.open === true,
59769
+ _b);
59770
+ var style = {};
59771
+ if (typeof this.props.size === 'string') {
59772
+ classes2Obj["side-panel__container--".concat(this.props.size)] = true;
59773
+ }
59774
+ else if (this.props.size != null) {
59775
+ style.width = this.props.size.custom;
59776
+ }
59777
+ var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
59778
+ return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
59772
59779
  React.createElement("div", { className: classes }, this.props.children)));
59773
59780
  };
59774
59781
  return Panel;
@@ -64549,7 +64556,7 @@ var TreeSelect = /** @class */ (function (_super) {
64549
64556
  };
64550
64557
  TreeSelect.prototype.render = function () {
64551
64558
  var _this = this;
64552
- var _a;
64559
+ var _a, _b;
64553
64560
  if (this.props.preview) {
64554
64561
  return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
64555
64562
  ? {
@@ -64561,7 +64568,7 @@ var TreeSelect = /** @class */ (function (_super) {
64561
64568
  getBorderColor: this.props.getBorderColor,
64562
64569
  }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
64563
64570
  }
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'] },
64571
+ 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, fullWidth: (_a = this.props.inputWidth === '100%') !== null && _a !== void 0 ? _a : false, "data-test-id": this.props['data-test-id'] },
64565
64572
  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
64573
  ? React.createElement("div", { className: "tags-input__tags" },
64567
64574
  this.props.readOnly
@@ -64621,9 +64628,9 @@ var TreeSelect = /** @class */ (function (_super) {
64621
64628
  (0, react_dom_1.createPortal)(this.state.openDropdown
64622
64629
  && React.createElement("div", { "data-test-id": "tree-select-popover" },
64623
64630
  React.createElement("div", { className: "autocomplete autocomplete--multi-select"
64624
- + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
64631
+ + (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
64625
64632
  zIndex: this.props.zIndex,
64626
- width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
64633
+ width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
64627
64634
  }, ref: this.dropdownRef },
64628
64635
  React.createElement("div", { className: 'autocomplete__header' },
64629
64636
  React.createElement("div", { className: "autocomplete__icon", onClick: function () {
@@ -77842,10 +77849,12 @@ var RadioButtonGroup = /** @class */ (function (_super) {
77842
77849
  _a["sd-check-button__group--grid"] = (_g = this.props.group) === null || _g === void 0 ? void 0 : _g.grid,
77843
77850
  _a["sd-check-button__group--padded"] = ((_h = this.props.group) === null || _h === void 0 ? void 0 : _h.padded) === true,
77844
77851
  _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
- });
77852
+ var selectedOption = this.props.value == null
77853
+ ? undefined
77854
+ : this.props.options.find(function (_a) {
77855
+ var value = _a.value;
77856
+ return value === _this.props.value;
77857
+ });
77849
77858
  return (React.createElement(React.Fragment, null,
77850
77859
  !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
77851
77860
  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 },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.59",
3
+ "version": "3.0.61",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Layouts/Panel.d.ts CHANGED
@@ -4,7 +4,9 @@ interface IPropsPanel {
4
4
  side?: 'left' | 'right';
5
5
  theme?: 'light' | 'dark';
6
6
  className?: string;
7
- size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'full' | 'auto';
7
+ size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'full' | 'auto' | {
8
+ custom: React.CSSProperties['width'];
9
+ };
8
10
  background?: 'transparent' | 'light' | 'grey';
9
11
  open?: boolean;
10
12
  }
package/react/components/Layouts/Panel.js CHANGED
@@ -58,12 +58,19 @@ var Panel = /** @class */ (function (_super) {
58
58
  _a["side-panel--".concat(this.props.side)] = this.props.side,
59
59
  _a["side-panel--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
60
60
  _a), this.props.className);
61
- var classes2 = (0, classnames_1.default)('side-panel__container', (_b = {},
62
- _b["side-panel__container--".concat(this.props.side)] = this.props.side,
63
- _b["side-panel__container--".concat(this.props.size)] = this.props.size,
64
- _b["panel-open"] = this.props.open,
65
- _b));
66
- return (React.createElement("div", { className: classes2, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
61
+ var classes2Obj = (_b = {},
62
+ _b["side-panel__container--".concat(this.props.side)] = this.props.side !== null,
63
+ _b["panel-open"] = this.props.open === true,
64
+ _b);
65
+ var style = {};
66
+ if (typeof this.props.size === 'string') {
67
+ classes2Obj["side-panel__container--".concat(this.props.size)] = true;
68
+ }
69
+ else if (this.props.size != null) {
70
+ style.width = this.props.size.custom;
71
+ }
72
+ var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
73
+ return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
67
74
  React.createElement("div", { className: classes }, this.props.children)));
68
75
  };
69
76
  return Panel;
package/react/components/RadioButtonGroup.js CHANGED
@@ -70,10 +70,12 @@ 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
+ var selectedOption = this.props.value == null
74
+ ? undefined
75
+ : this.props.options.find(function (_a) {
76
+ var value = _a.value;
77
+ return value === _this.props.value;
78
+ });
77
79
  return (React.createElement(React.Fragment, null,
78
80
  !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
79
81
  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 },
package/react/components/TreeSelect/TreeSelect.d.ts CHANGED
@@ -18,7 +18,8 @@ interface IPropsBase<T> extends IInputWrapper {
18
18
  value?: Array<T>;
19
19
  selectBranchWithChildren?: boolean;
20
20
  readOnly?: boolean;
21
- width?: string;
21
+ popoverWidth?: 'medium' | 'match-input';
22
+ inputWidth?: '100%';
22
23
  allowMultiple?: boolean;
23
24
  loading?: boolean;
24
25
  singleLevelSearch?: boolean;
package/react/components/TreeSelect/TreeSelect.js CHANGED
@@ -488,7 +488,7 @@ var TreeSelect = /** @class */ (function (_super) {
488
488
  };
489
489
  TreeSelect.prototype.render = function () {
490
490
  var _this = this;
491
- var _a;
491
+ var _a, _b;
492
492
  if (this.props.preview) {
493
493
  return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
494
494
  ? {
@@ -500,7 +500,7 @@ 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, "data-test-id": this.props['data-test-id'] },
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, fullWidth: (_a = this.props.inputWidth === '100%') !== null && _a !== void 0 ? _a : false, "data-test-id": this.props['data-test-id'] },
504
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
@@ -560,9 +560,9 @@ var TreeSelect = /** @class */ (function (_super) {
560
560
  (0, react_dom_1.createPortal)(this.state.openDropdown
561
561
  && React.createElement("div", { "data-test-id": "tree-select-popover" },
562
562
  React.createElement("div", { className: "autocomplete autocomplete--multi-select"
563
- + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
563
+ + (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
564
564
  zIndex: this.props.zIndex,
565
- width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
565
+ width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
566
566
  }, ref: this.dropdownRef },
567
567
  React.createElement("div", { className: 'autocomplete__header' },
568
568
  React.createElement("div", { className: "autocomplete__icon", onClick: function () {