superdesk-ui-framework 3.0.72 → 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/_sd-tag-input.scss +3 -0
- package/app/styles/components/_sd-searchbar.scss +16 -1
- package/app-typescript/components/ListItemLoader.tsx +1 -1
- package/dist/examples.bundle.js +19 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +35 -2
- package/dist/superdesk-ui.bundle.css +20 -4
- package/dist/superdesk-ui.bundle.js +1 -1
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +35 -2
- package/package.json +1 -1
- 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 {
|
|
@@ -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.js
CHANGED
|
@@ -105879,7 +105879,7 @@ var ListItemLoader = /** @class */ (function (_super) {
|
|
|
105879
105879
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
105880
105880
|
}
|
|
105881
105881
|
ListItemLoader.prototype.render = function () {
|
|
105882
|
-
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" },
|
|
105883
105883
|
React.createElement("div", { className: "sd-list-item__border" }),
|
|
105884
105884
|
React.createElement("div", { className: "sd-list-item__column" },
|
|
105885
105885
|
React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
|
|
@@ -139810,6 +139810,17 @@ var React = __importStar(__webpack_require__(0));
|
|
|
139810
139810
|
var Components = __importStar(__webpack_require__(43));
|
|
139811
139811
|
var index_1 = __webpack_require__(3);
|
|
139812
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
|
+
];
|
|
139813
139824
|
var TestGround = /** @class */ (function (_super) {
|
|
139814
139825
|
__extends(TestGround, _super);
|
|
139815
139826
|
function TestGround(props) {
|
|
@@ -139830,6 +139841,7 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
139830
139841
|
date: new Date('2022-01-08'),
|
|
139831
139842
|
time: '16:50',
|
|
139832
139843
|
modalPlanningTemplates: false,
|
|
139844
|
+
treeSelectValue: [],
|
|
139833
139845
|
};
|
|
139834
139846
|
return _this;
|
|
139835
139847
|
}
|
|
@@ -139872,7 +139884,11 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
139872
139884
|
{ label: 'Action 1', onSelect: function () { return 1; } },
|
|
139873
139885
|
{ label: 'Action 2', onSelect: function () { return 1; } },
|
|
139874
139886
|
{ label: 'Action 3', onSelect: function () { return 1; } },
|
|
139875
|
-
] }, "
|
|
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),
|
|
139876
139892
|
React.createElement("hr", null),
|
|
139877
139893
|
React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Pagination"),
|
|
139878
139894
|
React.createElement("div", { className: 'sd-pagination' },
|
|
@@ -144250,7 +144266,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
|
144250
144266
|
/* 693 */
|
|
144251
144267
|
/***/ (function(module, exports) {
|
|
144252
144268
|
|
|
144253
|
-
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"}}
|
|
144254
144270
|
|
|
144255
144271
|
/***/ }),
|
|
144256
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>
|
|
@@ -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
|
|
|
@@ -105140,7 +105140,7 @@ var ListItemLoader = /** @class */ (function (_super) {
|
|
|
105140
105140
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
105141
105141
|
}
|
|
105142
105142
|
ListItemLoader.prototype.render = function () {
|
|
105143
|
-
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" },
|
|
105144
105144
|
React.createElement("div", { className: "sd-list-item__border" }),
|
|
105145
105145
|
React.createElement("div", { className: "sd-list-item__column" },
|
|
105146
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
|
@@ -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" })),
|