superdesk-ui-framework 4.0.25 → 4.0.27
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/styles/form-elements/_forms-general.scss +4 -1
- package/app-typescript/components/Select.tsx +2 -0
- package/app-typescript/components/TreeMenu.tsx +16 -0
- package/dist/examples.bundle.js +27 -2
- package/dist/superdesk-ui.bundle.css +3 -1
- package/dist/superdesk-ui.bundle.js +26 -1
- package/package.json +1 -1
- package/react/components/Select.d.ts +1 -0
- package/react/components/Select.js +1 -1
- package/react/components/TreeMenu.js +25 -0
|
@@ -63,7 +63,6 @@
|
|
|
63
63
|
|
|
64
64
|
// For more complex inline form combinations an additional element that goes inside .form__row--flex container is provided.
|
|
65
65
|
.form__row-item {
|
|
66
|
-
flex-basis: 0;
|
|
67
66
|
flex-grow: 1;
|
|
68
67
|
margin: 0 0.6rem;
|
|
69
68
|
|
|
@@ -80,6 +79,10 @@
|
|
|
80
79
|
}
|
|
81
80
|
}
|
|
82
81
|
|
|
82
|
+
.form__row-item:not(.sd-flex-no-grow) {
|
|
83
|
+
flex-basis: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
83
86
|
.form__row-item--no-grow {
|
|
84
87
|
flex-basis: auto;
|
|
85
88
|
flex-grow: 0;
|
|
@@ -6,6 +6,7 @@ import {IInputWrapper} from './Form/InputWrapper';
|
|
|
6
6
|
interface ISelect extends IInputWrapper {
|
|
7
7
|
value?: string;
|
|
8
8
|
onChange(newValue: string): void;
|
|
9
|
+
'data-test-id'?: string;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
class Select extends React.Component<ISelect> {
|
|
@@ -53,6 +54,7 @@ class Select extends React.Component<ISelect> {
|
|
|
53
54
|
tabIndex={this.props.tabindex}
|
|
54
55
|
onChange={this.handleChange}
|
|
55
56
|
disabled={this.props.disabled || this.props.readonly}
|
|
57
|
+
data-test-id={this.props['data-test-id']}
|
|
56
58
|
>
|
|
57
59
|
{this.props.children}
|
|
58
60
|
</select>
|
|
@@ -199,6 +199,22 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
|
|
|
199
199
|
if (this.openDropdownRef.current && this.dropdownRef.current) {
|
|
200
200
|
this.popperInstance = createPopper(this.openDropdownRef.current, this.dropdownRef.current, {
|
|
201
201
|
placement: 'bottom-start',
|
|
202
|
+
modifiers: [
|
|
203
|
+
{
|
|
204
|
+
name: 'flip',
|
|
205
|
+
enabled: true,
|
|
206
|
+
},
|
|
207
|
+
],
|
|
208
|
+
onFirstUpdate: (state) => {
|
|
209
|
+
this.popperInstance?.setOptions({
|
|
210
|
+
placement: state.placement,
|
|
211
|
+
modifiers: this.popperInstance.state.options.modifiers.map((modifier) => (
|
|
212
|
+
modifier.name === 'flip'
|
|
213
|
+
? {...modifier, enabled: false}
|
|
214
|
+
: modifier
|
|
215
|
+
)),
|
|
216
|
+
});
|
|
217
|
+
},
|
|
202
218
|
});
|
|
203
219
|
}
|
|
204
220
|
|
package/dist/examples.bundle.js
CHANGED
|
@@ -79710,6 +79710,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
79710
79710
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
79711
79711
|
};
|
|
79712
79712
|
})();
|
|
79713
|
+
var __assign = (this && this.__assign) || function () {
|
|
79714
|
+
__assign = Object.assign || function(t) {
|
|
79715
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
79716
|
+
s = arguments[i];
|
|
79717
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
79718
|
+
t[p] = s[p];
|
|
79719
|
+
}
|
|
79720
|
+
return t;
|
|
79721
|
+
};
|
|
79722
|
+
return __assign.apply(this, arguments);
|
|
79723
|
+
};
|
|
79713
79724
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
79714
79725
|
if (k2 === undefined) k2 = k;
|
|
79715
79726
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -79873,6 +79884,20 @@ var TreeMenu = /** @class */ (function (_super) {
|
|
|
79873
79884
|
if (this.openDropdownRef.current && this.dropdownRef.current) {
|
|
79874
79885
|
this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
|
|
79875
79886
|
placement: 'bottom-start',
|
|
79887
|
+
modifiers: [
|
|
79888
|
+
{
|
|
79889
|
+
name: 'flip',
|
|
79890
|
+
enabled: true,
|
|
79891
|
+
},
|
|
79892
|
+
],
|
|
79893
|
+
onFirstUpdate: function (state) {
|
|
79894
|
+
var _a;
|
|
79895
|
+
(_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
|
|
79896
|
+
placement: state.placement,
|
|
79897
|
+
modifiers: _this.popperInstance.state.options.modifiers.map(function (modifier) { return (modifier.name === 'flip'
|
|
79898
|
+
? __assign(__assign({}, modifier), { enabled: false }) : modifier); }),
|
|
79899
|
+
});
|
|
79900
|
+
},
|
|
79876
79901
|
});
|
|
79877
79902
|
}
|
|
79878
79903
|
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
|
|
@@ -81436,7 +81461,7 @@ var Select = /** @class */ (function (_super) {
|
|
|
81436
81461
|
}
|
|
81437
81462
|
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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
|
81438
81463
|
React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
|
|
81439
|
-
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
|
|
81464
|
+
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
|
|
81440
81465
|
};
|
|
81441
81466
|
return Select;
|
|
81442
81467
|
}(React.Component));
|
|
@@ -188068,7 +188093,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
188068
188093
|
/* 938 */
|
|
188069
188094
|
/***/ (function(module, exports) {
|
|
188070
188095
|
|
|
188071
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
188096
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.27","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","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","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"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":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
|
|
188072
188097
|
|
|
188073
188098
|
/***/ }),
|
|
188074
188099
|
/* 939 */
|
|
@@ -39285,7 +39285,6 @@ textarea.sd-media-carousel__media-title {
|
|
|
39285
39285
|
margin-inline-start: 1.2rem; }
|
|
39286
39286
|
|
|
39287
39287
|
.form__row--flex .form__row-item {
|
|
39288
|
-
flex-basis: 0;
|
|
39289
39288
|
flex-grow: 1;
|
|
39290
39289
|
margin: 0 0.6rem; }
|
|
39291
39290
|
.form__row--flex .form__row-item:first-child {
|
|
@@ -39295,6 +39294,9 @@ textarea.sd-media-carousel__media-title {
|
|
|
39295
39294
|
.form__row--flex .form__row-item:only-child {
|
|
39296
39295
|
margin: 0; }
|
|
39297
39296
|
|
|
39297
|
+
.form__row--flex .form__row-item:not(.sd-flex-no-grow) {
|
|
39298
|
+
flex-basis: 0; }
|
|
39299
|
+
|
|
39298
39300
|
.form__row--flex .form__row-item--no-grow {
|
|
39299
39301
|
flex-basis: auto;
|
|
39300
39302
|
flex-grow: 0; }
|
|
@@ -78831,6 +78831,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
78831
78831
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
78832
78832
|
};
|
|
78833
78833
|
})();
|
|
78834
|
+
var __assign = (this && this.__assign) || function () {
|
|
78835
|
+
__assign = Object.assign || function(t) {
|
|
78836
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
78837
|
+
s = arguments[i];
|
|
78838
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
78839
|
+
t[p] = s[p];
|
|
78840
|
+
}
|
|
78841
|
+
return t;
|
|
78842
|
+
};
|
|
78843
|
+
return __assign.apply(this, arguments);
|
|
78844
|
+
};
|
|
78834
78845
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
78835
78846
|
if (k2 === undefined) k2 = k;
|
|
78836
78847
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -78994,6 +79005,20 @@ var TreeMenu = /** @class */ (function (_super) {
|
|
|
78994
79005
|
if (this.openDropdownRef.current && this.dropdownRef.current) {
|
|
78995
79006
|
this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
|
|
78996
79007
|
placement: 'bottom-start',
|
|
79008
|
+
modifiers: [
|
|
79009
|
+
{
|
|
79010
|
+
name: 'flip',
|
|
79011
|
+
enabled: true,
|
|
79012
|
+
},
|
|
79013
|
+
],
|
|
79014
|
+
onFirstUpdate: function (state) {
|
|
79015
|
+
var _a;
|
|
79016
|
+
(_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
|
|
79017
|
+
placement: state.placement,
|
|
79018
|
+
modifiers: _this.popperInstance.state.options.modifiers.map(function (modifier) { return (modifier.name === 'flip'
|
|
79019
|
+
? __assign(__assign({}, modifier), { enabled: false }) : modifier); }),
|
|
79020
|
+
});
|
|
79021
|
+
},
|
|
78997
79022
|
});
|
|
78998
79023
|
}
|
|
78999
79024
|
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
|
|
@@ -80557,7 +80582,7 @@ var Select = /** @class */ (function (_super) {
|
|
|
80557
80582
|
}
|
|
80558
80583
|
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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
|
80559
80584
|
React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
|
|
80560
|
-
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
|
|
80585
|
+
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
|
|
80561
80586
|
};
|
|
80562
80587
|
return Select;
|
|
80563
80588
|
}(React.Component));
|
package/package.json
CHANGED
|
@@ -63,7 +63,7 @@ var Select = /** @class */ (function (_super) {
|
|
|
63
63
|
}
|
|
64
64
|
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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
|
65
65
|
React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
|
|
66
|
-
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
|
|
66
|
+
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
|
|
67
67
|
};
|
|
68
68
|
return Select;
|
|
69
69
|
}(React.Component));
|
|
@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
14
14
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
15
|
};
|
|
16
16
|
})();
|
|
17
|
+
var __assign = (this && this.__assign) || function () {
|
|
18
|
+
__assign = Object.assign || function(t) {
|
|
19
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
20
|
+
s = arguments[i];
|
|
21
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
22
|
+
t[p] = s[p];
|
|
23
|
+
}
|
|
24
|
+
return t;
|
|
25
|
+
};
|
|
26
|
+
return __assign.apply(this, arguments);
|
|
27
|
+
};
|
|
17
28
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
29
|
if (k2 === undefined) k2 = k;
|
|
19
30
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -177,6 +188,20 @@ var TreeMenu = /** @class */ (function (_super) {
|
|
|
177
188
|
if (this.openDropdownRef.current && this.dropdownRef.current) {
|
|
178
189
|
this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
|
|
179
190
|
placement: 'bottom-start',
|
|
191
|
+
modifiers: [
|
|
192
|
+
{
|
|
193
|
+
name: 'flip',
|
|
194
|
+
enabled: true,
|
|
195
|
+
},
|
|
196
|
+
],
|
|
197
|
+
onFirstUpdate: function (state) {
|
|
198
|
+
var _a;
|
|
199
|
+
(_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
|
|
200
|
+
placement: state.placement,
|
|
201
|
+
modifiers: _this.popperInstance.state.options.modifiers.map(function (modifier) { return (modifier.name === 'flip'
|
|
202
|
+
? __assign(__assign({}, modifier), { enabled: false }) : modifier); }),
|
|
203
|
+
});
|
|
204
|
+
},
|
|
180
205
|
});
|
|
181
206
|
}
|
|
182
207
|
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
|