superdesk-ui-framework 3.0.60 → 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.
- package/app-typescript/components/RadioButtonGroup.tsx +3 -1
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +4 -2
- package/dist/examples.bundle.js +11 -9
- package/dist/superdesk-ui.bundle.js +10 -8
- package/package.json +1 -1
- package/react/components/RadioButtonGroup.js +6 -4
- package/react/components/TreeSelect/TreeSelect.d.ts +2 -1
- package/react/components/TreeSelect/TreeSelect.js +4 -4
|
@@ -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
|
|
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>
|
|
@@ -35,7 +35,8 @@ interface IPropsBase<T> extends IInputWrapper {
|
|
|
35
35
|
value?: Array<T>;
|
|
36
36
|
selectBranchWithChildren?: boolean;
|
|
37
37
|
readOnly?: boolean;
|
|
38
|
-
|
|
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.
|
|
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
|
@@ -64939,7 +64939,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
64939
64939
|
};
|
|
64940
64940
|
TreeSelect.prototype.render = function () {
|
|
64941
64941
|
var _this = this;
|
|
64942
|
-
var _a;
|
|
64942
|
+
var _a, _b;
|
|
64943
64943
|
if (this.props.preview) {
|
|
64944
64944
|
return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
|
|
64945
64945
|
? {
|
|
@@ -64951,7 +64951,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
64951
64951
|
getBorderColor: this.props.getBorderColor,
|
|
64952
64952
|
}, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
|
|
64953
64953
|
}
|
|
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, "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'] },
|
|
64955
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
|
|
64956
64956
|
? React.createElement("div", { className: "tags-input__tags" },
|
|
64957
64957
|
this.props.readOnly
|
|
@@ -65011,9 +65011,9 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
65011
65011
|
(0, react_dom_1.createPortal)(this.state.openDropdown
|
|
65012
65012
|
&& React.createElement("div", { "data-test-id": "tree-select-popover" },
|
|
65013
65013
|
React.createElement("div", { className: "autocomplete autocomplete--multi-select"
|
|
65014
|
-
+ (this.props.
|
|
65014
|
+
+ (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
|
|
65015
65015
|
zIndex: this.props.zIndex,
|
|
65016
|
-
width: (
|
|
65016
|
+
width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
|
|
65017
65017
|
}, ref: this.dropdownRef },
|
|
65018
65018
|
React.createElement("div", { className: 'autocomplete__header' },
|
|
65019
65019
|
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
|
@@ -78588,10 +78588,12 @@ var RadioButtonGroup = /** @class */ (function (_super) {
|
|
|
78588
78588
|
_a["sd-check-button__group--grid"] = (_g = this.props.group) === null || _g === void 0 ? void 0 : _g.grid,
|
|
78589
78589
|
_a["sd-check-button__group--padded"] = ((_h = this.props.group) === null || _h === void 0 ? void 0 : _h.padded) === true,
|
|
78590
78590
|
_a));
|
|
78591
|
-
var selectedOption = this.props.value == null
|
|
78592
|
-
|
|
78593
|
-
|
|
78594
|
-
|
|
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
|
+
});
|
|
78595
78597
|
return (React.createElement(React.Fragment, null,
|
|
78596
78598
|
!((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
|
|
78597
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 },
|
|
@@ -144102,7 +144104,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
|
144102
144104
|
/* 692 */
|
|
144103
144105
|
/***/ (function(module, exports) {
|
|
144104
144106
|
|
|
144105
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
|
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"}}
|
|
144106
144108
|
|
|
144107
144109
|
/***/ }),
|
|
144108
144110
|
/* 693 */
|
|
@@ -64556,7 +64556,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
64556
64556
|
};
|
|
64557
64557
|
TreeSelect.prototype.render = function () {
|
|
64558
64558
|
var _this = this;
|
|
64559
|
-
var _a;
|
|
64559
|
+
var _a, _b;
|
|
64560
64560
|
if (this.props.preview) {
|
|
64561
64561
|
return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
|
|
64562
64562
|
? {
|
|
@@ -64568,7 +64568,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
64568
64568
|
getBorderColor: this.props.getBorderColor,
|
|
64569
64569
|
}, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
|
|
64570
64570
|
}
|
|
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, "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'] },
|
|
64572
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
|
|
64573
64573
|
? React.createElement("div", { className: "tags-input__tags" },
|
|
64574
64574
|
this.props.readOnly
|
|
@@ -64628,9 +64628,9 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
64628
64628
|
(0, react_dom_1.createPortal)(this.state.openDropdown
|
|
64629
64629
|
&& React.createElement("div", { "data-test-id": "tree-select-popover" },
|
|
64630
64630
|
React.createElement("div", { className: "autocomplete autocomplete--multi-select"
|
|
64631
|
-
+ (this.props.
|
|
64631
|
+
+ (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
|
|
64632
64632
|
zIndex: this.props.zIndex,
|
|
64633
|
-
width: (
|
|
64633
|
+
width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
|
|
64634
64634
|
}, ref: this.dropdownRef },
|
|
64635
64635
|
React.createElement("div", { className: 'autocomplete__header' },
|
|
64636
64636
|
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
|
@@ -77849,10 +77849,12 @@ var RadioButtonGroup = /** @class */ (function (_super) {
|
|
|
77849
77849
|
_a["sd-check-button__group--grid"] = (_g = this.props.group) === null || _g === void 0 ? void 0 : _g.grid,
|
|
77850
77850
|
_a["sd-check-button__group--padded"] = ((_h = this.props.group) === null || _h === void 0 ? void 0 : _h.padded) === true,
|
|
77851
77851
|
_a));
|
|
77852
|
-
var selectedOption = this.props.value == null
|
|
77853
|
-
|
|
77854
|
-
|
|
77855
|
-
|
|
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
|
+
});
|
|
77856
77858
|
return (React.createElement(React.Fragment, null,
|
|
77857
77859
|
!((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
|
|
77858
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
|
@@ -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
|
|
74
|
-
|
|
75
|
-
|
|
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 },
|
|
@@ -18,7 +18,8 @@ interface IPropsBase<T> extends IInputWrapper {
|
|
|
18
18
|
value?: Array<T>;
|
|
19
19
|
selectBranchWithChildren?: boolean;
|
|
20
20
|
readOnly?: boolean;
|
|
21
|
-
|
|
21
|
+
popoverWidth?: 'medium' | 'match-input';
|
|
22
|
+
inputWidth?: '100%';
|
|
22
23
|
allowMultiple?: boolean;
|
|
23
24
|
loading?: boolean;
|
|
24
25
|
singleLevelSearch?: boolean;
|
|
@@ -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.
|
|
563
|
+
+ (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
|
|
564
564
|
zIndex: this.props.zIndex,
|
|
565
|
-
width: (
|
|
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 () {
|