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.
@@ -93,7 +93,7 @@ $sd-big-icon-font: (
93
93
  add-to-list: "\e61e",
94
94
  text: "\e61f",
95
95
  desk: "\e620",
96
- chevron-inset-inline-start: "\e621",
96
+ chevron-left: "\e621",
97
97
  chevron-right: "\e622",
98
98
  dashboard-alt: "\e623",
99
99
  master: "\e624",
@@ -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 ref={buttonRef}
276
- className=' dropdown__toggle dropdown-toggle'
277
- aria-haspopup="menu"
278
- tabIndex={0}
279
- aria-expanded={open}
280
- onClick={toggleDisplay}>
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" />
@@ -15426,35 +15426,35 @@ doc-react-playground {
15426
15426
  .big-icon--desk:before {
15427
15427
  content: ""; }
15428
15428
 
15429
- .big-icon--chevron-inset-inline-start {
15429
+ .big-icon--chevron-left {
15430
15430
  content: ""; }
15431
- .big-icon--chevron-inset-inline-start.color--default {
15431
+ .big-icon--chevron-left.color--default {
15432
15432
  color: #2c323a; }
15433
- .big-icon--chevron-inset-inline-start.color--primary {
15433
+ .big-icon--chevron-left.color--primary {
15434
15434
  color: var(--sd-colour-primary) !important; }
15435
- .big-icon--chevron-inset-inline-start.color--success {
15435
+ .big-icon--chevron-left.color--success {
15436
15436
  color: var(--sd-colour-success) !important; }
15437
- .big-icon--chevron-inset-inline-start.color--warning {
15437
+ .big-icon--chevron-left.color--warning {
15438
15438
  color: var(--sd-colour-warning) !important; }
15439
- .big-icon--chevron-inset-inline-start.color--alert {
15439
+ .big-icon--chevron-left.color--alert {
15440
15440
  color: var(--sd-colour-alert) !important; }
15441
- .big-icon--chevron-inset-inline-start.color--highlight {
15441
+ .big-icon--chevron-left.color--highlight {
15442
15442
  color: var(--sd-colour-highlight) !important; }
15443
- .big-icon--chevron-inset-inline-start.color--light {
15443
+ .big-icon--chevron-left.color--light {
15444
15444
  color: var(--color-text-lighter) !important; }
15445
- .big-icon--chevron-inset-inline-start.color--white {
15445
+ .big-icon--chevron-left.color--white {
15446
15446
  color: #e2e5e9 !important; }
15447
- .big-icon--chevron-inset-inline-start.scale--2x {
15447
+ .big-icon--chevron-left.scale--2x {
15448
15448
  --big-icon-size: 52px
15449
15449
  ; }
15450
- .big-icon--chevron-inset-inline-start.scale--3x {
15450
+ .big-icon--chevron-left.scale--3x {
15451
15451
  --big-icon-size: 78px
15452
15452
  ; }
15453
- .big-icon--chevron-inset-inline-start.scale--4x {
15453
+ .big-icon--chevron-left.scale--4x {
15454
15454
  --big-icon-size: 104px
15455
15455
  ; }
15456
15456
 
15457
- .big-icon--chevron-inset-inline-start:before {
15457
+ .big-icon--chevron-left:before {
15458
15458
  content: ""; }
15459
15459
 
15460
15460
  .big-icon--chevron-right {
@@ -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-inset-inline-start, 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"};
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
- ] }, "Toogle button")),
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.71","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"}}
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
- Toogle button
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-inset-inline-start {
33499
+ .big-icon--chevron-left {
33500
33500
  content: ""; }
33501
- .big-icon--chevron-inset-inline-start.color--default {
33501
+ .big-icon--chevron-left.color--default {
33502
33502
  color: var(--color-icon-default); }
33503
- .big-icon--chevron-inset-inline-start.color--primary {
33503
+ .big-icon--chevron-left.color--primary {
33504
33504
  color: var(--sd-colour-primary) !important; }
33505
- .big-icon--chevron-inset-inline-start.color--success {
33505
+ .big-icon--chevron-left.color--success {
33506
33506
  color: var(--sd-colour-success) !important; }
33507
- .big-icon--chevron-inset-inline-start.color--warning {
33507
+ .big-icon--chevron-left.color--warning {
33508
33508
  color: var(--sd-colour-warning) !important; }
33509
- .big-icon--chevron-inset-inline-start.color--alert {
33509
+ .big-icon--chevron-left.color--alert {
33510
33510
  color: var(--sd-colour-alert) !important; }
33511
- .big-icon--chevron-inset-inline-start.color--highlight {
33511
+ .big-icon--chevron-left.color--highlight {
33512
33512
  color: var(--sd-colour-highlight) !important; }
33513
- .big-icon--chevron-inset-inline-start.color--light {
33513
+ .big-icon--chevron-left.color--light {
33514
33514
  color: var(--color-text-lighter) !important; }
33515
- .big-icon--chevron-inset-inline-start.color--white {
33515
+ .big-icon--chevron-left.color--white {
33516
33516
  color: #e2e5e9 !important; }
33517
- .big-icon--chevron-inset-inline-start.scale--2x {
33517
+ .big-icon--chevron-left.scale--2x {
33518
33518
  --big-icon-size: 52px
33519
33519
  ; }
33520
- .big-icon--chevron-inset-inline-start.scale--3x {
33520
+ .big-icon--chevron-left.scale--3x {
33521
33521
  --big-icon-size: 78px
33522
33522
  ; }
33523
- .big-icon--chevron-inset-inline-start.scale--4x {
33523
+ .big-icon--chevron-left.scale--4x {
33524
33524
  --big-icon-size: 104px
33525
33525
  ; }
33526
33526
 
33527
- .big-icon--chevron-inset-inline-start:before {
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.sd-searchbar--focused .dropdown, .sd-searchbar--boxed:focus-within .dropdown {
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
- Toogle button
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.71",
3
+ "version": "3.0.73",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -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" })),