superdesk-ui-framework 3.0.79 → 3.0.81
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/_helpers.scss +11 -5
- package/app-typescript/components/Menu.tsx +5 -8
- package/dist/examples.bundle.js +3 -5
- package/dist/superdesk-ui.bundle.css +3 -0
- package/dist/superdesk-ui.bundle.js +2 -4
- package/package.json +1 -1
- package/react/components/Menu.d.ts +2 -2
- package/react/components/Menu.js +2 -4
package/app/styles/_helpers.scss
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
display: block !important;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
// Browser ignores this element from the flow.
|
|
51
|
+
// Browser ignores this element from the flow.
|
|
52
52
|
// Use it to wrap other elements without breaking the layout (e.g. flex or grid)
|
|
53
53
|
.sd-display--contents {
|
|
54
54
|
display: contents !important;
|
|
@@ -429,13 +429,13 @@ $value in $sd-shadowProperties {
|
|
|
429
429
|
cursor: pointer;
|
|
430
430
|
}
|
|
431
431
|
|
|
432
|
-
// HEADINGS
|
|
432
|
+
// HEADINGS
|
|
433
433
|
.sd-heading-3 {
|
|
434
434
|
font-size: 1.6rem;
|
|
435
435
|
margin-block-end: 1.6rem;
|
|
436
436
|
}
|
|
437
437
|
|
|
438
|
-
// Deafult text syles based on type of data
|
|
438
|
+
// Deafult text syles based on type of data
|
|
439
439
|
p strong {
|
|
440
440
|
font-weight: 500;
|
|
441
441
|
}
|
|
@@ -512,7 +512,7 @@ h6 {
|
|
|
512
512
|
letter-spacing: 0.025em;
|
|
513
513
|
}
|
|
514
514
|
|
|
515
|
-
// Font weights
|
|
515
|
+
// Font weights
|
|
516
516
|
|
|
517
517
|
.sd-text__light,
|
|
518
518
|
.sd-text--light {
|
|
@@ -690,7 +690,7 @@ h6 {
|
|
|
690
690
|
-webkit-line-clamp: unset;
|
|
691
691
|
}
|
|
692
692
|
|
|
693
|
-
// Superdesk specific text helpers
|
|
693
|
+
// Superdesk specific text helpers
|
|
694
694
|
.sd-text__slugline {
|
|
695
695
|
color: $sd-slugline;
|
|
696
696
|
font-weight: 500;
|
|
@@ -1641,3 +1641,9 @@ h6 {
|
|
|
1641
1641
|
.sd-gap--auto {
|
|
1642
1642
|
gap: var(--gap--auto);
|
|
1643
1643
|
}
|
|
1644
|
+
|
|
1645
|
+
// MAX-HEIGHT:
|
|
1646
|
+
|
|
1647
|
+
.max-h-full {
|
|
1648
|
+
max-height: '100%',
|
|
1649
|
+
}
|
|
@@ -42,14 +42,14 @@ interface ISeparator {
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
interface IMenuLeaf {
|
|
45
|
-
label: string;
|
|
45
|
+
label: string | JSX.Element;
|
|
46
46
|
icon?: IIconName;
|
|
47
47
|
onClick(): void;
|
|
48
48
|
disabled?: boolean;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
interface IMenuBranch {
|
|
52
|
-
label: string;
|
|
52
|
+
label: string | JSX.Element;
|
|
53
53
|
icon?: IIconName;
|
|
54
54
|
children: Array<IMenuItem>;
|
|
55
55
|
}
|
|
@@ -95,13 +95,13 @@ export class Menu extends React.Component<IProps, {}> {
|
|
|
95
95
|
return {separator: true};
|
|
96
96
|
} else if (isMenuBranch(item)) {
|
|
97
97
|
return {
|
|
98
|
-
label: item.label,
|
|
98
|
+
label: item.label as string,
|
|
99
99
|
icon: item.icon,
|
|
100
100
|
items: this.toPrimeReactInterface(item.children),
|
|
101
101
|
};
|
|
102
102
|
} else if (isMenuLeaf(item)) {
|
|
103
103
|
return {
|
|
104
|
-
label: item.label,
|
|
104
|
+
label: item.label as string,
|
|
105
105
|
icon: item.icon,
|
|
106
106
|
command: (event) => {
|
|
107
107
|
/**
|
|
@@ -137,10 +137,6 @@ export class Menu extends React.Component<IProps, {}> {
|
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
<div
|
|
140
|
-
className='sd-overflow--y-scroll'
|
|
141
|
-
style={{
|
|
142
|
-
maxHeight: '100%',
|
|
143
|
-
}}
|
|
144
140
|
onKeyDown={(event) => {
|
|
145
141
|
if (event.key === 'Escape') {
|
|
146
142
|
event.stopPropagation();
|
|
@@ -154,6 +150,7 @@ export class Menu extends React.Component<IProps, {}> {
|
|
|
154
150
|
}}
|
|
155
151
|
>
|
|
156
152
|
<TieredMenu
|
|
153
|
+
className='sd-overflow--y-auto max-h-full'
|
|
157
154
|
popup
|
|
158
155
|
model={this.toPrimeReactInterface(this.props.items)}
|
|
159
156
|
ref={(el) => this.menu = el}
|
package/dist/examples.bundle.js
CHANGED
|
@@ -100597,9 +100597,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
100597
100597
|
var _a;
|
|
100598
100598
|
return (React.createElement(React.Fragment, null,
|
|
100599
100599
|
this.props.children(this.toggle),
|
|
100600
|
-
React.createElement("div", {
|
|
100601
|
-
maxHeight: '100%',
|
|
100602
|
-
}, onKeyDown: function (event) {
|
|
100600
|
+
React.createElement("div", { onKeyDown: function (event) {
|
|
100603
100601
|
if (event.key === 'Escape') {
|
|
100604
100602
|
event.stopPropagation();
|
|
100605
100603
|
_this.close(event);
|
|
@@ -100608,7 +100606,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
100608
100606
|
}
|
|
100609
100607
|
}
|
|
100610
100608
|
} },
|
|
100611
|
-
React.createElement(tieredmenu_1.TieredMenu, { popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
|
|
100609
|
+
React.createElement(tieredmenu_1.TieredMenu, { className: 'sd-overflow--y-auto max-h-full', popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
|
|
100612
100610
|
_this.focusedBefore = document.activeElement;
|
|
100613
100611
|
var firstMenuItem = document.querySelectorAll('.p-tieredmenu [role="menuitem"]')[0];
|
|
100614
100612
|
if (firstMenuItem instanceof HTMLElement) {
|
|
@@ -144870,7 +144868,7 @@ exports.IllustrationButtonDoc = IllustrationButtonDoc;
|
|
|
144870
144868
|
/* 696 */
|
|
144871
144869
|
/***/ (function(module, exports) {
|
|
144872
144870
|
|
|
144873
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
|
144871
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.81","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/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-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/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-scrollspy":"^3.4.3"}}
|
|
144874
144872
|
|
|
144875
144873
|
/***/ }),
|
|
144876
144874
|
/* 697 */
|
|
@@ -18207,6 +18207,9 @@ h6 {
|
|
|
18207
18207
|
.sd-gap--auto {
|
|
18208
18208
|
gap: var(--gap--auto); }
|
|
18209
18209
|
|
|
18210
|
+
.max-h-full {
|
|
18211
|
+
max-height: "100%"; }
|
|
18212
|
+
|
|
18210
18213
|
:root {
|
|
18211
18214
|
--new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14); }
|
|
18212
18215
|
|
|
@@ -99858,9 +99858,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
99858
99858
|
var _a;
|
|
99859
99859
|
return (React.createElement(React.Fragment, null,
|
|
99860
99860
|
this.props.children(this.toggle),
|
|
99861
|
-
React.createElement("div", {
|
|
99862
|
-
maxHeight: '100%',
|
|
99863
|
-
}, onKeyDown: function (event) {
|
|
99861
|
+
React.createElement("div", { onKeyDown: function (event) {
|
|
99864
99862
|
if (event.key === 'Escape') {
|
|
99865
99863
|
event.stopPropagation();
|
|
99866
99864
|
_this.close(event);
|
|
@@ -99869,7 +99867,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
99869
99867
|
}
|
|
99870
99868
|
}
|
|
99871
99869
|
} },
|
|
99872
|
-
React.createElement(tieredmenu_1.TieredMenu, { popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
|
|
99870
|
+
React.createElement(tieredmenu_1.TieredMenu, { className: 'sd-overflow--y-auto max-h-full', popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
|
|
99873
99871
|
_this.focusedBefore = document.activeElement;
|
|
99874
99872
|
var firstMenuItem = document.querySelectorAll('.p-tieredmenu [role="menuitem"]')[0];
|
|
99875
99873
|
if (firstMenuItem instanceof HTMLElement) {
|
package/package.json
CHANGED
|
@@ -33,13 +33,13 @@ interface ISeparator {
|
|
|
33
33
|
separator: true;
|
|
34
34
|
}
|
|
35
35
|
interface IMenuLeaf {
|
|
36
|
-
label: string;
|
|
36
|
+
label: string | JSX.Element;
|
|
37
37
|
icon?: IIconName;
|
|
38
38
|
onClick(): void;
|
|
39
39
|
disabled?: boolean;
|
|
40
40
|
}
|
|
41
41
|
interface IMenuBranch {
|
|
42
|
-
label: string;
|
|
42
|
+
label: string | JSX.Element;
|
|
43
43
|
icon?: IIconName;
|
|
44
44
|
children: Array<IMenuItem>;
|
|
45
45
|
}
|
package/react/components/Menu.js
CHANGED
|
@@ -110,9 +110,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
110
110
|
var _a;
|
|
111
111
|
return (React.createElement(React.Fragment, null,
|
|
112
112
|
this.props.children(this.toggle),
|
|
113
|
-
React.createElement("div", {
|
|
114
|
-
maxHeight: '100%',
|
|
115
|
-
}, onKeyDown: function (event) {
|
|
113
|
+
React.createElement("div", { onKeyDown: function (event) {
|
|
116
114
|
if (event.key === 'Escape') {
|
|
117
115
|
event.stopPropagation();
|
|
118
116
|
_this.close(event);
|
|
@@ -121,7 +119,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
121
119
|
}
|
|
122
120
|
}
|
|
123
121
|
} },
|
|
124
|
-
React.createElement(tieredmenu_1.TieredMenu, { popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
|
|
122
|
+
React.createElement(tieredmenu_1.TieredMenu, { className: 'sd-overflow--y-auto max-h-full', popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
|
|
125
123
|
_this.focusedBefore = document.activeElement;
|
|
126
124
|
var firstMenuItem = document.querySelectorAll('.p-tieredmenu [role="menuitem"]')[0];
|
|
127
125
|
if (firstMenuItem instanceof HTMLElement) {
|