superdesk-ui-framework 3.0.71 → 3.0.73
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/_big-icon-font.scss +1 -1
- package/app/styles/_sd-tag-input.scss +3 -0
- package/app/styles/components/_sd-searchbar.scss +16 -1
- package/app-typescript/components/Dropdown.tsx +13 -7
- package/app-typescript/components/ListItemLoader.tsx +1 -1
- package/dist/examples.bundle.css +13 -13
- package/dist/examples.bundle.js +35 -7
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +35 -2
- package/dist/superdesk-ui.bundle.css +33 -17
- package/dist/superdesk-ui.bundle.js +16 -4
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +35 -2
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +2 -1
- package/react/components/Dropdown.js +15 -3
- package/react/components/ListItemLoader.js +1 -1
@@ -143,6 +143,7 @@ tags-input,
|
|
143
143
|
display: flex;
|
144
144
|
flex-direction: row;
|
145
145
|
align-items: center;
|
146
|
+
gap: var(--space--2);
|
146
147
|
|
147
148
|
span {
|
148
149
|
flex-grow: 1;
|
@@ -467,6 +468,7 @@ tags-input,
|
|
467
468
|
.tags-input__helper-box {
|
468
469
|
display: flex;
|
469
470
|
align-items: center;
|
471
|
+
gap: var(--space--2);
|
470
472
|
}
|
471
473
|
}
|
472
474
|
|
@@ -661,6 +663,7 @@ tags-input,
|
|
661
663
|
display: flex;
|
662
664
|
width: 100%;
|
663
665
|
align-items: center;
|
666
|
+
gap: var(--space--2);
|
664
667
|
}
|
665
668
|
|
666
669
|
.tags-input__remove-button {
|
@@ -89,13 +89,28 @@
|
|
89
89
|
padding-inline: var(--space--1-5);
|
90
90
|
}
|
91
91
|
}
|
92
|
+
.sd-input {
|
93
|
+
height: 100%;
|
94
|
+
border-inline-end: 1px solid var(--color-border-line--medium);
|
95
|
+
z-index: 1;
|
96
|
+
position: relative;
|
97
|
+
background-color: var(--sd-colour-bg__searchbar);
|
98
|
+
border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
|
99
|
+
transition: box-shadow 0.2s ease-out;
|
100
|
+
.sd-input__input {
|
101
|
+
background-color: transparent;
|
102
|
+
border: none;
|
103
|
+
}
|
104
|
+
}
|
92
105
|
&.sd-searchbar--focused,
|
93
106
|
&:focus-within {
|
94
|
-
.dropdown
|
107
|
+
.dropdown,
|
108
|
+
.sd-input {
|
95
109
|
border-inline-end-color: var(--sd-colour-interactive--alpha-50);
|
96
110
|
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10);
|
97
111
|
}
|
98
112
|
}
|
113
|
+
|
99
114
|
}
|
100
115
|
|
101
116
|
.sd-searchbar__input, input[type="text"].sd-searchbar__input, input[type="search"].sd-searchbar__input {
|
@@ -37,6 +37,7 @@ interface IMenu {
|
|
37
37
|
children: React.ReactNode;
|
38
38
|
zIndex?: number;
|
39
39
|
onChange?(event?: any): void;
|
40
|
+
maxHeight?: number;
|
40
41
|
}
|
41
42
|
|
42
43
|
const DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
|
@@ -50,6 +51,7 @@ export const Dropdown = ({
|
|
50
51
|
align,
|
51
52
|
zIndex,
|
52
53
|
onChange,
|
54
|
+
maxHeight,
|
53
55
|
}: IMenu) => {
|
54
56
|
const [open, setOpen] = React.useState(false);
|
55
57
|
const [change, setChange] = React.useState(false);
|
@@ -59,6 +61,7 @@ export const Dropdown = ({
|
|
59
61
|
const headerElements = header?.map((el, index) => {
|
60
62
|
return each(el, index);
|
61
63
|
});
|
64
|
+
const maxHeightStyle = maxHeight ? {maxHeight} : {};
|
62
65
|
|
63
66
|
const dropdownElements = items.map((el, index) => {
|
64
67
|
return each(el, index);
|
@@ -143,7 +146,7 @@ export const Dropdown = ({
|
|
143
146
|
<ul className='dropdown__menu '
|
144
147
|
id={menuID} role='menu'
|
145
148
|
ref={ref}
|
146
|
-
style={{zIndex: zIndex}}>
|
149
|
+
style={{...{zIndex: zIndex, overflowY: 'auto'}, ...maxHeightStyle}}>
|
147
150
|
{dropdownElements}
|
148
151
|
</ul>
|
149
152
|
);
|
@@ -272,12 +275,15 @@ export const Dropdown = ({
|
|
272
275
|
})()}
|
273
276
|
</div> : null)
|
274
277
|
:
|
275
|
-
<button
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
278
|
+
<button
|
279
|
+
style={{whiteSpace: 'nowrap'}}
|
280
|
+
ref={buttonRef}
|
281
|
+
className=' dropdown__toggle dropdown-toggle'
|
282
|
+
aria-haspopup="menu"
|
283
|
+
tabIndex={0}
|
284
|
+
aria-expanded={open}
|
285
|
+
onClick={toggleDisplay}
|
286
|
+
>
|
281
287
|
{children}
|
282
288
|
<span className="dropdown__caret"></span>
|
283
289
|
</button>}
|
@@ -4,7 +4,7 @@ import { Skeleton } from './Skeleton';
|
|
4
4
|
export class ListItemLoader extends React.Component<{}> {
|
5
5
|
render() {
|
6
6
|
return (
|
7
|
-
<div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover">
|
7
|
+
<div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover" data-test-id="list-item-placeholder">
|
8
8
|
<div className="sd-list-item__border"></div>
|
9
9
|
<div className="sd-list-item__column">
|
10
10
|
<Skeleton shape="circle" size="2rem" />
|
package/dist/examples.bundle.css
CHANGED
@@ -15426,35 +15426,35 @@ doc-react-playground {
|
|
15426
15426
|
.big-icon--desk:before {
|
15427
15427
|
content: ""; }
|
15428
15428
|
|
15429
|
-
.big-icon--chevron-
|
15429
|
+
.big-icon--chevron-left {
|
15430
15430
|
content: ""; }
|
15431
|
-
.big-icon--chevron-
|
15431
|
+
.big-icon--chevron-left.color--default {
|
15432
15432
|
color: #2c323a; }
|
15433
|
-
.big-icon--chevron-
|
15433
|
+
.big-icon--chevron-left.color--primary {
|
15434
15434
|
color: var(--sd-colour-primary) !important; }
|
15435
|
-
.big-icon--chevron-
|
15435
|
+
.big-icon--chevron-left.color--success {
|
15436
15436
|
color: var(--sd-colour-success) !important; }
|
15437
|
-
.big-icon--chevron-
|
15437
|
+
.big-icon--chevron-left.color--warning {
|
15438
15438
|
color: var(--sd-colour-warning) !important; }
|
15439
|
-
.big-icon--chevron-
|
15439
|
+
.big-icon--chevron-left.color--alert {
|
15440
15440
|
color: var(--sd-colour-alert) !important; }
|
15441
|
-
.big-icon--chevron-
|
15441
|
+
.big-icon--chevron-left.color--highlight {
|
15442
15442
|
color: var(--sd-colour-highlight) !important; }
|
15443
|
-
.big-icon--chevron-
|
15443
|
+
.big-icon--chevron-left.color--light {
|
15444
15444
|
color: var(--color-text-lighter) !important; }
|
15445
|
-
.big-icon--chevron-
|
15445
|
+
.big-icon--chevron-left.color--white {
|
15446
15446
|
color: #e2e5e9 !important; }
|
15447
|
-
.big-icon--chevron-
|
15447
|
+
.big-icon--chevron-left.scale--2x {
|
15448
15448
|
--big-icon-size: 52px
|
15449
15449
|
; }
|
15450
|
-
.big-icon--chevron-
|
15450
|
+
.big-icon--chevron-left.scale--3x {
|
15451
15451
|
--big-icon-size: 78px
|
15452
15452
|
; }
|
15453
|
-
.big-icon--chevron-
|
15453
|
+
.big-icon--chevron-left.scale--4x {
|
15454
15454
|
--big-icon-size: 104px
|
15455
15455
|
; }
|
15456
15456
|
|
15457
|
-
.big-icon--chevron-
|
15457
|
+
.big-icon--chevron-left:before {
|
15458
15458
|
content: ""; }
|
15459
15459
|
|
15460
15460
|
.big-icon--chevron-right {
|
package/dist/examples.bundle.js
CHANGED
@@ -59586,6 +59586,17 @@ module.exports = _assertThisInitialized, module.exports.__esModule = true, modul
|
|
59586
59586
|
|
59587
59587
|
"use strict";
|
59588
59588
|
|
59589
|
+
var __assign = (this && this.__assign) || function () {
|
59590
|
+
__assign = Object.assign || function(t) {
|
59591
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
59592
|
+
s = arguments[i];
|
59593
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
59594
|
+
t[p] = s[p];
|
59595
|
+
}
|
59596
|
+
return t;
|
59597
|
+
};
|
59598
|
+
return __assign.apply(this, arguments);
|
59599
|
+
};
|
59589
59600
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
59590
59601
|
if (k2 === undefined) k2 = k;
|
59591
59602
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
@@ -59617,7 +59628,7 @@ var core_1 = __webpack_require__(42);
|
|
59617
59628
|
var react_id_generator_1 = __webpack_require__(9);
|
59618
59629
|
var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
|
59619
59630
|
var Dropdown = function (_a) {
|
59620
|
-
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
|
59631
|
+
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
|
59621
59632
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
59622
59633
|
var _c = React.useState(false), change = _c[0], setChange = _c[1];
|
59623
59634
|
var menuID = (0, react_id_generator_1.useId)()[0];
|
@@ -59626,6 +59637,7 @@ var Dropdown = function (_a) {
|
|
59626
59637
|
var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
|
59627
59638
|
return each(el, index);
|
59628
59639
|
});
|
59640
|
+
var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
|
59629
59641
|
var dropdownElements = items.map(function (el, index) {
|
59630
59642
|
return each(el, index);
|
59631
59643
|
});
|
@@ -59669,7 +59681,7 @@ var Dropdown = function (_a) {
|
|
59669
59681
|
React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
|
59670
59682
|
}
|
59671
59683
|
else {
|
59672
|
-
return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
|
59684
|
+
return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
|
59673
59685
|
}
|
59674
59686
|
}
|
59675
59687
|
function toggleDisplay() {
|
@@ -59772,7 +59784,7 @@ var Dropdown = function (_a) {
|
|
59772
59784
|
return React.cloneElement(children, attrs);
|
59773
59785
|
})()) : null)
|
59774
59786
|
:
|
59775
|
-
React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
|
59787
|
+
React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
|
59776
59788
|
children,
|
59777
59789
|
React.createElement("span", { className: "dropdown__caret" })),
|
59778
59790
|
append ?
|
@@ -105867,7 +105879,7 @@ var ListItemLoader = /** @class */ (function (_super) {
|
|
105867
105879
|
return _super !== null && _super.apply(this, arguments) || this;
|
105868
105880
|
}
|
105869
105881
|
ListItemLoader.prototype.render = function () {
|
105870
|
-
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
|
105882
|
+
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
|
105871
105883
|
React.createElement("div", { className: "sd-list-item__border" }),
|
105872
105884
|
React.createElement("div", { className: "sd-list-item__column" },
|
105873
105885
|
React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
|
@@ -135551,7 +135563,7 @@ exports.default = BigIconFontDoc;
|
|
135551
135563
|
/***/ (function(module, exports) {
|
135552
135564
|
|
135553
135565
|
// removed by extract-text-webpack-plugin
|
135554
|
-
module.exports = {"icon":"dashboard, view, tasks, calendar, marked-star, archive, spike, unspike, personal, global-search, analytics, web, cog, send-to, info, find-replace, comments, history, package, create-package, add-to-package, fetch, fetch-as, macro, related, minimize, settings, multiedit, export, create-list, add-to-list, text, desk, chevron-
|
135566
|
+
module.exports = {"icon":"dashboard, view, tasks, calendar, marked-star, archive, spike, unspike, personal, global-search, analytics, web, cog, send-to, info, find-replace, comments, history, package, create-package, add-to-package, fetch, fetch-as, macro, related, minimize, settings, multiedit, export, create-list, add-to-list, text, desk, chevron-left, chevron-right, dashboard-alt, master, attachment, upload-alt, document-default, document-pdf, document-doc, semantics, picture, manage-package, live, live-alt, meta-search, chat, annotation, suggestion, publisher, tag, rundown, checkmark-circle"};
|
135555
135567
|
|
135556
135568
|
/***/ }),
|
135557
135569
|
/* 645 */
|
@@ -139798,6 +139810,17 @@ var React = __importStar(__webpack_require__(0));
|
|
139798
139810
|
var Components = __importStar(__webpack_require__(43));
|
139799
139811
|
var index_1 = __webpack_require__(3);
|
139800
139812
|
var FormLabel_1 = __webpack_require__(51);
|
139813
|
+
var options2 = [
|
139814
|
+
{
|
139815
|
+
value: { name: 'A long category Category1' },
|
139816
|
+
},
|
139817
|
+
{
|
139818
|
+
value: { name: 'Category2' },
|
139819
|
+
},
|
139820
|
+
{
|
139821
|
+
value: { name: 'Category3' },
|
139822
|
+
},
|
139823
|
+
];
|
139801
139824
|
var TestGround = /** @class */ (function (_super) {
|
139802
139825
|
__extends(TestGround, _super);
|
139803
139826
|
function TestGround(props) {
|
@@ -139818,6 +139841,7 @@ var TestGround = /** @class */ (function (_super) {
|
|
139818
139841
|
date: new Date('2022-01-08'),
|
139819
139842
|
time: '16:50',
|
139820
139843
|
modalPlanningTemplates: false,
|
139844
|
+
treeSelectValue: [],
|
139821
139845
|
};
|
139822
139846
|
return _this;
|
139823
139847
|
}
|
@@ -139860,7 +139884,11 @@ var TestGround = /** @class */ (function (_super) {
|
|
139860
139884
|
{ label: 'Action 1', onSelect: function () { return 1; } },
|
139861
139885
|
{ label: 'Action 2', onSelect: function () { return 1; } },
|
139862
139886
|
{ label: 'Action 3', onSelect: function () { return 1; } },
|
139863
|
-
] }, "
|
139887
|
+
] }, "With dropdown")),
|
139888
|
+
React.createElement("hr", null),
|
139889
|
+
React.createElement(index_1.SearchBar, { placeholder: 'Search', boxed: true },
|
139890
|
+
React.createElement(index_1.TreeSelect, { kind: 'synchronous', value: this.state.treeSelectValue, getOptions: function () { return options2; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, onChange: function () { return false; }, placeholder: 'Select a desk', width: 'medium', inlineLabel: true, labelHidden: true }, "With TreeSelect")),
|
139891
|
+
React.createElement("hr", null),
|
139864
139892
|
React.createElement("hr", null),
|
139865
139893
|
React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Pagination"),
|
139866
139894
|
React.createElement("div", { className: 'sd-pagination' },
|
@@ -144238,7 +144266,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
144238
144266
|
/* 693 */
|
144239
144267
|
/***/ (function(module, exports) {
|
144240
144268
|
|
144241
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
144269
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.73","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-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"}}
|
144242
144270
|
|
144243
144271
|
/***/ }),
|
144244
144272
|
/* 694 */
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Components from './components/Index';
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
|
4
4
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
5
5
|
|
6
6
|
interface IProps {
|
@@ -23,8 +23,21 @@ interface IState {
|
|
23
23
|
date: any;
|
24
24
|
time: string;
|
25
25
|
modalPlanningTemplates: boolean;
|
26
|
+
treeSelectValue: any;
|
26
27
|
}
|
27
28
|
|
29
|
+
let options2 = [
|
30
|
+
{
|
31
|
+
value: {name: 'A long category Category1'},
|
32
|
+
},
|
33
|
+
{
|
34
|
+
value: {name: 'Category2'},
|
35
|
+
},
|
36
|
+
{
|
37
|
+
value: {name: 'Category3'},
|
38
|
+
},
|
39
|
+
]
|
40
|
+
|
28
41
|
export class TestGround extends React.Component<IProps, IState> {
|
29
42
|
constructor(props: IProps) {
|
30
43
|
super(props);
|
@@ -44,6 +57,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
44
57
|
date: new Date('2022-01-08'),
|
45
58
|
time: '16:50',
|
46
59
|
modalPlanningTemplates: false,
|
60
|
+
treeSelectValue: [],
|
47
61
|
}
|
48
62
|
}
|
49
63
|
|
@@ -98,6 +112,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
98
112
|
</BoxedList>
|
99
113
|
|
100
114
|
</Modal>
|
115
|
+
|
101
116
|
<h3 className="docs-page__h3 ">Planning Templates</h3>
|
102
117
|
<SearchBar placeholder='Search' boxed={true}>
|
103
118
|
<Dropdown
|
@@ -107,10 +122,28 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
107
122
|
{ label: 'Action 3', onSelect: () => 1 },
|
108
123
|
]}
|
109
124
|
>
|
110
|
-
|
125
|
+
With dropdown
|
111
126
|
</Dropdown>
|
112
127
|
</SearchBar>
|
128
|
+
<hr />
|
129
|
+
<SearchBar placeholder='Search' boxed={true}>
|
130
|
+
<TreeSelect
|
131
|
+
kind={'synchronous'}
|
132
|
+
value={this.state.treeSelectValue}
|
133
|
+
getOptions={() => options2}
|
134
|
+
getLabel={(item) => item.name}
|
135
|
+
getId={(item) => item.name}
|
136
|
+
onChange={() => false}
|
137
|
+
placeholder='Select a desk'
|
138
|
+
width='medium'
|
139
|
+
inlineLabel
|
140
|
+
labelHidden
|
141
|
+
>
|
142
|
+
With TreeSelect
|
143
|
+
</TreeSelect>
|
144
|
+
</SearchBar>
|
113
145
|
|
146
|
+
<hr />
|
114
147
|
<hr />
|
115
148
|
|
116
149
|
<h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
|
@@ -33496,35 +33496,35 @@ a.label {
|
|
33496
33496
|
.big-icon--desk:before {
|
33497
33497
|
content: ""; }
|
33498
33498
|
|
33499
|
-
.big-icon--chevron-
|
33499
|
+
.big-icon--chevron-left {
|
33500
33500
|
content: ""; }
|
33501
|
-
.big-icon--chevron-
|
33501
|
+
.big-icon--chevron-left.color--default {
|
33502
33502
|
color: var(--color-icon-default); }
|
33503
|
-
.big-icon--chevron-
|
33503
|
+
.big-icon--chevron-left.color--primary {
|
33504
33504
|
color: var(--sd-colour-primary) !important; }
|
33505
|
-
.big-icon--chevron-
|
33505
|
+
.big-icon--chevron-left.color--success {
|
33506
33506
|
color: var(--sd-colour-success) !important; }
|
33507
|
-
.big-icon--chevron-
|
33507
|
+
.big-icon--chevron-left.color--warning {
|
33508
33508
|
color: var(--sd-colour-warning) !important; }
|
33509
|
-
.big-icon--chevron-
|
33509
|
+
.big-icon--chevron-left.color--alert {
|
33510
33510
|
color: var(--sd-colour-alert) !important; }
|
33511
|
-
.big-icon--chevron-
|
33511
|
+
.big-icon--chevron-left.color--highlight {
|
33512
33512
|
color: var(--sd-colour-highlight) !important; }
|
33513
|
-
.big-icon--chevron-
|
33513
|
+
.big-icon--chevron-left.color--light {
|
33514
33514
|
color: var(--color-text-lighter) !important; }
|
33515
|
-
.big-icon--chevron-
|
33515
|
+
.big-icon--chevron-left.color--white {
|
33516
33516
|
color: #e2e5e9 !important; }
|
33517
|
-
.big-icon--chevron-
|
33517
|
+
.big-icon--chevron-left.scale--2x {
|
33518
33518
|
--big-icon-size: 52px
|
33519
33519
|
; }
|
33520
|
-
.big-icon--chevron-
|
33520
|
+
.big-icon--chevron-left.scale--3x {
|
33521
33521
|
--big-icon-size: 78px
|
33522
33522
|
; }
|
33523
|
-
.big-icon--chevron-
|
33523
|
+
.big-icon--chevron-left.scale--4x {
|
33524
33524
|
--big-icon-size: 104px
|
33525
33525
|
; }
|
33526
33526
|
|
33527
|
-
.big-icon--chevron-
|
33527
|
+
.big-icon--chevron-left:before {
|
33528
33528
|
content: ""; }
|
33529
33529
|
|
33530
33530
|
.big-icon--chevron-right {
|
@@ -35676,7 +35676,8 @@ tags-input,
|
|
35676
35676
|
.tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box {
|
35677
35677
|
display: flex;
|
35678
35678
|
flex-direction: row;
|
35679
|
-
align-items: center;
|
35679
|
+
align-items: center;
|
35680
|
+
gap: var(--space--2); }
|
35680
35681
|
tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span,
|
35681
35682
|
.tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span {
|
35682
35683
|
flex-grow: 1; }
|
@@ -35911,7 +35912,8 @@ tags-input,
|
|
35911
35912
|
background-color: rgba(0, 0, 0, 0.1); }
|
35912
35913
|
.tags-input .tags-input__helper-box {
|
35913
35914
|
display: flex;
|
35914
|
-
align-items: center;
|
35915
|
+
align-items: center;
|
35916
|
+
gap: var(--space--2); }
|
35915
35917
|
|
35916
35918
|
.autocomplete {
|
35917
35919
|
position: absolute;
|
@@ -36058,7 +36060,8 @@ tags-input,
|
|
36058
36060
|
.tags-input__single-item .tags-input__helper-box {
|
36059
36061
|
display: flex;
|
36060
36062
|
width: 100%;
|
36061
|
-
align-items: center;
|
36063
|
+
align-items: center;
|
36064
|
+
gap: var(--space--2); }
|
36062
36065
|
.tags-input__single-item .tags-input__remove-button {
|
36063
36066
|
display: flex;
|
36064
36067
|
align-items: center;
|
@@ -43435,7 +43438,20 @@ a.text-link {
|
|
43435
43438
|
.sd-searchbar--boxed .dropdown .dropdown__toggle {
|
43436
43439
|
height: 100%;
|
43437
43440
|
padding-inline: var(--space--1-5); }
|
43438
|
-
.sd-searchbar--boxed
|
43441
|
+
.sd-searchbar--boxed .sd-input {
|
43442
|
+
height: 100%;
|
43443
|
+
border-inline-end: 1px solid var(--color-border-line--medium);
|
43444
|
+
z-index: 1;
|
43445
|
+
position: relative;
|
43446
|
+
background-color: var(--sd-colour-bg__searchbar);
|
43447
|
+
border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
|
43448
|
+
transition: box-shadow 0.2s ease-out; }
|
43449
|
+
.sd-searchbar--boxed .sd-input .sd-input__input {
|
43450
|
+
background-color: transparent;
|
43451
|
+
border: none; }
|
43452
|
+
.sd-searchbar--boxed.sd-searchbar--focused .dropdown,
|
43453
|
+
.sd-searchbar--boxed.sd-searchbar--focused .sd-input, .sd-searchbar--boxed:focus-within .dropdown,
|
43454
|
+
.sd-searchbar--boxed:focus-within .sd-input {
|
43439
43455
|
border-inline-end-color: var(--sd-colour-interactive--alpha-50);
|
43440
43456
|
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10); }
|
43441
43457
|
|
@@ -59230,6 +59230,17 @@ module.exports = _assertThisInitialized, module.exports.__esModule = true, modul
|
|
59230
59230
|
|
59231
59231
|
"use strict";
|
59232
59232
|
|
59233
|
+
var __assign = (this && this.__assign) || function () {
|
59234
|
+
__assign = Object.assign || function(t) {
|
59235
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
59236
|
+
s = arguments[i];
|
59237
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
59238
|
+
t[p] = s[p];
|
59239
|
+
}
|
59240
|
+
return t;
|
59241
|
+
};
|
59242
|
+
return __assign.apply(this, arguments);
|
59243
|
+
};
|
59233
59244
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
59234
59245
|
if (k2 === undefined) k2 = k;
|
59235
59246
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
@@ -59261,7 +59272,7 @@ var core_1 = __webpack_require__(42);
|
|
59261
59272
|
var react_id_generator_1 = __webpack_require__(9);
|
59262
59273
|
var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
|
59263
59274
|
var Dropdown = function (_a) {
|
59264
|
-
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
|
59275
|
+
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
|
59265
59276
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
59266
59277
|
var _c = React.useState(false), change = _c[0], setChange = _c[1];
|
59267
59278
|
var menuID = (0, react_id_generator_1.useId)()[0];
|
@@ -59270,6 +59281,7 @@ var Dropdown = function (_a) {
|
|
59270
59281
|
var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
|
59271
59282
|
return each(el, index);
|
59272
59283
|
});
|
59284
|
+
var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
|
59273
59285
|
var dropdownElements = items.map(function (el, index) {
|
59274
59286
|
return each(el, index);
|
59275
59287
|
});
|
@@ -59313,7 +59325,7 @@ var Dropdown = function (_a) {
|
|
59313
59325
|
React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
|
59314
59326
|
}
|
59315
59327
|
else {
|
59316
|
-
return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
|
59328
|
+
return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
|
59317
59329
|
}
|
59318
59330
|
}
|
59319
59331
|
function toggleDisplay() {
|
@@ -59416,7 +59428,7 @@ var Dropdown = function (_a) {
|
|
59416
59428
|
return React.cloneElement(children, attrs);
|
59417
59429
|
})()) : null)
|
59418
59430
|
:
|
59419
|
-
React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
|
59431
|
+
React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
|
59420
59432
|
children,
|
59421
59433
|
React.createElement("span", { className: "dropdown__caret" })),
|
59422
59434
|
append ?
|
@@ -105128,7 +105140,7 @@ var ListItemLoader = /** @class */ (function (_super) {
|
|
105128
105140
|
return _super !== null && _super.apply(this, arguments) || this;
|
105129
105141
|
}
|
105130
105142
|
ListItemLoader.prototype.render = function () {
|
105131
|
-
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
|
105143
|
+
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
|
105132
105144
|
React.createElement("div", { className: "sd-list-item__border" }),
|
105133
105145
|
React.createElement("div", { className: "sd-list-item__column" },
|
105134
105146
|
React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Components from './components/Index';
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
|
4
4
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
5
5
|
|
6
6
|
interface IProps {
|
@@ -23,8 +23,21 @@ interface IState {
|
|
23
23
|
date: any;
|
24
24
|
time: string;
|
25
25
|
modalPlanningTemplates: boolean;
|
26
|
+
treeSelectValue: any;
|
26
27
|
}
|
27
28
|
|
29
|
+
let options2 = [
|
30
|
+
{
|
31
|
+
value: {name: 'A long category Category1'},
|
32
|
+
},
|
33
|
+
{
|
34
|
+
value: {name: 'Category2'},
|
35
|
+
},
|
36
|
+
{
|
37
|
+
value: {name: 'Category3'},
|
38
|
+
},
|
39
|
+
]
|
40
|
+
|
28
41
|
export class TestGround extends React.Component<IProps, IState> {
|
29
42
|
constructor(props: IProps) {
|
30
43
|
super(props);
|
@@ -44,6 +57,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
44
57
|
date: new Date('2022-01-08'),
|
45
58
|
time: '16:50',
|
46
59
|
modalPlanningTemplates: false,
|
60
|
+
treeSelectValue: [],
|
47
61
|
}
|
48
62
|
}
|
49
63
|
|
@@ -98,6 +112,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
98
112
|
</BoxedList>
|
99
113
|
|
100
114
|
</Modal>
|
115
|
+
|
101
116
|
<h3 className="docs-page__h3 ">Planning Templates</h3>
|
102
117
|
<SearchBar placeholder='Search' boxed={true}>
|
103
118
|
<Dropdown
|
@@ -107,10 +122,28 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
107
122
|
{ label: 'Action 3', onSelect: () => 1 },
|
108
123
|
]}
|
109
124
|
>
|
110
|
-
|
125
|
+
With dropdown
|
111
126
|
</Dropdown>
|
112
127
|
</SearchBar>
|
128
|
+
<hr />
|
129
|
+
<SearchBar placeholder='Search' boxed={true}>
|
130
|
+
<TreeSelect
|
131
|
+
kind={'synchronous'}
|
132
|
+
value={this.state.treeSelectValue}
|
133
|
+
getOptions={() => options2}
|
134
|
+
getLabel={(item) => item.name}
|
135
|
+
getId={(item) => item.name}
|
136
|
+
onChange={() => false}
|
137
|
+
placeholder='Select a desk'
|
138
|
+
width='medium'
|
139
|
+
inlineLabel
|
140
|
+
labelHidden
|
141
|
+
>
|
142
|
+
With TreeSelect
|
143
|
+
</TreeSelect>
|
144
|
+
</SearchBar>
|
113
145
|
|
146
|
+
<hr />
|
114
147
|
<hr />
|
115
148
|
|
116
149
|
<h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
|
package/package.json
CHANGED
@@ -26,6 +26,7 @@ interface IMenu {
|
|
26
26
|
children: React.ReactNode;
|
27
27
|
zIndex?: number;
|
28
28
|
onChange?(event?: any): void;
|
29
|
+
maxHeight?: number;
|
29
30
|
}
|
30
|
-
export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, }: IMenu) => JSX.Element;
|
31
|
+
export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, maxHeight, }: IMenu) => JSX.Element;
|
31
32
|
export {};
|
@@ -1,4 +1,15 @@
|
|
1
1
|
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
14
|
if (k2 === undefined) k2 = k;
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
@@ -30,7 +41,7 @@ var core_1 = require("@popperjs/core");
|
|
30
41
|
var react_id_generator_1 = require("react-id-generator");
|
31
42
|
var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
|
32
43
|
var Dropdown = function (_a) {
|
33
|
-
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
|
44
|
+
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
|
34
45
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
35
46
|
var _c = React.useState(false), change = _c[0], setChange = _c[1];
|
36
47
|
var menuID = (0, react_id_generator_1.useId)()[0];
|
@@ -39,6 +50,7 @@ var Dropdown = function (_a) {
|
|
39
50
|
var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
|
40
51
|
return each(el, index);
|
41
52
|
});
|
53
|
+
var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
|
42
54
|
var dropdownElements = items.map(function (el, index) {
|
43
55
|
return each(el, index);
|
44
56
|
});
|
@@ -82,7 +94,7 @@ var Dropdown = function (_a) {
|
|
82
94
|
React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
|
83
95
|
}
|
84
96
|
else {
|
85
|
-
return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
|
97
|
+
return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
|
86
98
|
}
|
87
99
|
}
|
88
100
|
function toggleDisplay() {
|
@@ -185,7 +197,7 @@ var Dropdown = function (_a) {
|
|
185
197
|
return React.cloneElement(children, attrs);
|
186
198
|
})()) : null)
|
187
199
|
:
|
188
|
-
React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
|
200
|
+
React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
|
189
201
|
children,
|
190
202
|
React.createElement("span", { className: "dropdown__caret" })),
|
191
203
|
append ?
|
@@ -47,7 +47,7 @@ var ListItemLoader = /** @class */ (function (_super) {
|
|
47
47
|
return _super !== null && _super.apply(this, arguments) || this;
|
48
48
|
}
|
49
49
|
ListItemLoader.prototype.render = function () {
|
50
|
-
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
|
50
|
+
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
|
51
51
|
React.createElement("div", { className: "sd-list-item__border" }),
|
52
52
|
React.createElement("div", { className: "sd-list-item__column" },
|
53
53
|
React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
|