superdesk-ui-framework 3.0.35 → 3.0.38

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.
Files changed (65) hide show
  1. package/app/styles/_sd-tag-input.scss +3 -5
  2. package/app/styles/_tag-labels.scss +0 -2
  3. package/app/styles/app.scss +1 -0
  4. package/app/styles/form-elements/_checkbox.scss +3 -0
  5. package/app/styles/form-elements/_input-preview.scss +70 -0
  6. package/app/styles/form-elements/_inputs.scss +10 -14
  7. package/app/styles/primereact/_pr-tag-input.scss +1 -1
  8. package/app-typescript/components/DatePicker.tsx +101 -101
  9. package/app-typescript/components/DurationInput.tsx +76 -76
  10. package/app-typescript/components/Form/InputNew.tsx +1 -1
  11. package/app-typescript/components/Form/InputWrapper.tsx +34 -18
  12. package/app-typescript/components/Input.tsx +38 -62
  13. package/app-typescript/components/MultiSelect.tsx +49 -47
  14. package/app-typescript/components/Select.tsx +13 -22
  15. package/app-typescript/components/SelectPreview.tsx +100 -0
  16. package/app-typescript/components/SelectWithTemplate.tsx +2 -12
  17. package/app-typescript/components/TagInput.tsx +25 -24
  18. package/app-typescript/components/TimePicker.tsx +13 -16
  19. package/app-typescript/components/TreeSelect.tsx +218 -158
  20. package/dist/examples.bundle.js +2400 -2258
  21. package/dist/react/Autocomplete.tsx +32 -31
  22. package/dist/react/DatePicker.tsx +56 -73
  23. package/dist/react/DurationInput.tsx +36 -47
  24. package/dist/react/Inputs.tsx +86 -248
  25. package/dist/react/MultiSelect.tsx +30 -23
  26. package/dist/react/Selects.tsx +12 -44
  27. package/dist/react/TagInputDocs.tsx +15 -21
  28. package/dist/react/TimePicker.tsx +25 -32
  29. package/dist/react/TreeSelect.tsx +97 -90
  30. package/dist/superdesk-ui.bundle.css +85 -18
  31. package/dist/superdesk-ui.bundle.js +1973 -1816
  32. package/dist/vendor.bundle.js +14 -14
  33. package/examples/pages/react/Autocomplete.tsx +32 -31
  34. package/examples/pages/react/DatePicker.tsx +56 -73
  35. package/examples/pages/react/DurationInput.tsx +36 -47
  36. package/examples/pages/react/Inputs.tsx +86 -248
  37. package/examples/pages/react/MultiSelect.tsx +30 -23
  38. package/examples/pages/react/Selects.tsx +12 -44
  39. package/examples/pages/react/TagInputDocs.tsx +15 -21
  40. package/examples/pages/react/TimePicker.tsx +25 -32
  41. package/examples/pages/react/TreeSelect.tsx +97 -90
  42. package/package.json +1 -1
  43. package/react/components/DatePicker.d.ts +2 -12
  44. package/react/components/DatePicker.js +14 -8
  45. package/react/components/DurationInput.d.ts +2 -11
  46. package/react/components/DurationInput.js +14 -4
  47. package/react/components/Form/InputNew.d.ts +1 -1
  48. package/react/components/Form/InputWrapper.d.ts +11 -5
  49. package/react/components/Form/InputWrapper.js +6 -9
  50. package/react/components/Input.d.ts +3 -19
  51. package/react/components/Input.js +8 -21
  52. package/react/components/MultiSelect.d.ts +4 -13
  53. package/react/components/MultiSelect.js +6 -2
  54. package/react/components/Select.d.ts +3 -15
  55. package/react/components/Select.js +7 -8
  56. package/react/components/SelectPreview.d.ts +17 -0
  57. package/react/components/SelectPreview.js +109 -0
  58. package/react/components/SelectWithTemplate.d.ts +2 -11
  59. package/react/components/SelectWithTemplate.js +0 -1
  60. package/react/components/TagInput.d.ts +3 -12
  61. package/react/components/TagInput.js +6 -2
  62. package/react/components/TimePicker.d.ts +2 -11
  63. package/react/components/TimePicker.js +6 -2
  64. package/react/components/TreeSelect.d.ts +5 -11
  65. package/react/components/TreeSelect.js +78 -47
@@ -60,6 +60,7 @@ var Form_1 = require("./Form");
60
60
  var core_1 = require("@popperjs/core");
61
61
  var lodash_1 = require("lodash");
62
62
  var Label_1 = require("./Label");
63
+ var SelectPreview_1 = require("./SelectPreview");
63
64
  var TreeSelect = /** @class */ (function (_super) {
64
65
  __extends(TreeSelect, _super);
65
66
  function TreeSelect(props) {
@@ -77,30 +78,32 @@ var TreeSelect = /** @class */ (function (_super) {
77
78
  var _a;
78
79
  (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
79
80
  };
80
- _this.componentDidMount = function () {
81
- _this.recursion(_this.state.options);
82
- document.addEventListener("mousedown", function (event) {
83
- var _a, _b;
84
- if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
85
- && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
86
- _this.setState({ openDropdown: false });
87
- }
88
- });
89
- document.addEventListener("keydown", function (e) {
90
- if (_this.state.openDropdown && _this.ref.current) {
91
- keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
92
- if (e.key === 'Backspace') {
93
- _this.backButton();
94
- _this.backButtonValue();
95
- var buttonTarget = _this.state.buttonTarget;
96
- var className = buttonTarget.pop();
97
- if (className != null) {
98
- var element = document.getElementsByClassName(className)[0];
99
- element.focus();
100
- }
81
+ _this.onMouseDown = function (event) {
82
+ var _a, _b;
83
+ if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
84
+ && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
85
+ _this.setState({ openDropdown: false });
86
+ }
87
+ };
88
+ _this.onKeyDown = function (e) {
89
+ if (_this.state.openDropdown && _this.ref.current) {
90
+ keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
91
+ if (e.key === 'Backspace') {
92
+ _this.backButton();
93
+ _this.backButtonValue();
94
+ var buttonTarget = _this.state.buttonTarget;
95
+ var className = "".concat(buttonTarget.pop(), "-focus");
96
+ if (className != null) {
97
+ var element = document.getElementsByClassName(className)[0];
98
+ element.focus();
101
99
  }
102
100
  }
103
- });
101
+ }
102
+ };
103
+ _this.componentDidMount = function () {
104
+ _this.recursion(_this.state.options);
105
+ document.addEventListener("mousedown", _this.onMouseDown);
106
+ document.addEventListener("keydown", _this.onKeyDown);
104
107
  };
105
108
  _this.backButtonValue = function () {
106
109
  var item = _this.state.buttonTree.pop();
@@ -135,6 +138,8 @@ var TreeSelect = /** @class */ (function (_super) {
135
138
  _this.branchButton = _this.branchButton.bind(_this);
136
139
  _this.handleDebounce = _this.handleDebounce.bind(_this);
137
140
  _this.toggleMenu = _this.toggleMenu.bind(_this);
141
+ _this.onMouseDown = _this.onMouseDown.bind(_this);
142
+ _this.onKeyDown = _this.onKeyDown.bind(_this);
138
143
  _this.dropdownRef = React.createRef();
139
144
  _this.ref = React.createRef();
140
145
  _this.inputRef = React.createRef();
@@ -143,6 +148,10 @@ var TreeSelect = /** @class */ (function (_super) {
143
148
  _this.popperInstance = null;
144
149
  return _this;
145
150
  }
151
+ TreeSelect.prototype.componentWillUnmount = function () {
152
+ document.removeEventListener("mousedown", this.onMouseDown);
153
+ document.removeEventListener("keydown", this.onKeyDown);
154
+ };
146
155
  TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
147
156
  var _a;
148
157
  if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
@@ -416,12 +425,16 @@ var TreeSelect = /** @class */ (function (_super) {
416
425
  } },
417
426
  React.createElement("button", { className: "suggestion-item--btn" },
418
427
  _this.props.getBorderColor
419
- && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
420
- React.createElement("span", { style: _this.props.getBackgroundColor
421
- ? { backgroundColor: _this.props.getBackgroundColor(option.value),
422
- color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
423
- : undefined, className: 'suggestion-item--bgcolor'
424
- + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
428
+ && React.createElement("div", { className: "item-border", style: {
429
+ backgroundColor: _this.props.getBorderColor(option.value),
430
+ } }),
431
+ React.createElement("span", { className: 'suggestion-item--bgcolor'
432
+ + (selectedItem ? ' suggestion-item--disabled' : ''), style: _this.props.getBackgroundColor
433
+ ? {
434
+ backgroundColor: _this.props.getBackgroundColor(option.value),
435
+ color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
436
+ }
437
+ : undefined }, _this.props.optionTemplate
425
438
  ? _this.props.optionTemplate(option.value)
426
439
  : _this.props.getLabel(option.value)),
427
440
  option.children
@@ -473,7 +486,7 @@ var TreeSelect = /** @class */ (function (_super) {
473
486
  return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
474
487
  });
475
488
  if (!selectedButton) {
476
- return React.createElement("button", { ref: this.categoryButtonRef, className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : ''), onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, onClick: function (event) { return _this.handleBranchValue(event, buttonValue); } }, "Choose entire category");
489
+ return React.createElement("button", { className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : ''), ref: this.categoryButtonRef, onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, onClick: function (event) { return _this.handleBranchValue(event, buttonValue); } }, "Choose entire category");
477
490
  }
478
491
  else {
479
492
  return React.createElement("button", { className: 'autocomplete__button'
@@ -498,28 +511,46 @@ var TreeSelect = /** @class */ (function (_super) {
498
511
  };
499
512
  TreeSelect.prototype.render = function () {
500
513
  var _this = this;
501
- return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
502
- React.createElement("div", { className: "tags-input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select', " sd-input__input") },
514
+ if (this.props.preview) {
515
+ return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
516
+ ? {
517
+ mode: 'multi-select',
518
+ getBackgroundColor: this.props.getBackgroundColor,
519
+ }
520
+ : {
521
+ mode: 'single-select',
522
+ getBorderColor: this.props.getBorderColor,
523
+ }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
524
+ }
525
+ return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
526
+ React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select') },
503
527
  this.props.allowMultiple
504
528
  ? React.createElement("div", { className: "tags-input__tags" },
505
529
  this.props.readOnly
506
- || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button", onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } },
530
+ || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function () {
531
+ if (!_this.props.disabled) {
532
+ _this.setState({ openDropdown: !_this.state.openDropdown });
533
+ }
534
+ } },
507
535
  React.createElement("i", { className: "icon-plus-large" })),
508
536
  React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
509
537
  var Wrapper = function (_a) {
510
538
  var backgroundColor = _a.backgroundColor, children = _a.children;
511
539
  return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
512
- + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); }, style: _this.props.valueTemplate
540
+ + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return (!_this.props.readOnly && !_this.props.disabled)
541
+ && _this.removeClick(i); }, style: _this.props.valueTemplate
513
542
  ? { backgroundColor: backgroundColor }
514
543
  : _this.props.getBackgroundColor
515
544
  && { backgroundColor: _this.props.getBackgroundColor(item) } },
516
- React.createElement("span", { style: { color: backgroundColor
545
+ React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor
517
546
  ? (0, Label_1.getTextColor)(backgroundColor)
518
547
  : _this.props.getBackgroundColor
519
- && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)) }, className: "tags-input__helper-box" },
548
+ && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)),
549
+ } },
520
550
  children,
521
- !_this.props.readOnly && React.createElement("span", { className: "tags-input__remove-button" },
522
- React.createElement(Icon_1.Icon, { name: "close-small" })))));
551
+ !_this.props.readOnly
552
+ && React.createElement("span", { className: "tags-input__remove-button" },
553
+ React.createElement(Icon_1.Icon, { name: "close-small" })))));
523
554
  };
524
555
  return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
525
556
  ? _this.props.valueTemplate(item, Wrapper)
@@ -527,7 +558,7 @@ var TreeSelect = /** @class */ (function (_super) {
527
558
  React.createElement("span", null, _this.props.getLabel(item)))));
528
559
  })),
529
560
  this.state.value.length > 0
530
- ? this.props.readOnly
561
+ ? (this.props.readOnly || this.props.disabled)
531
562
  || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
532
563
  React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
533
564
  : null)
@@ -542,7 +573,7 @@ var TreeSelect = /** @class */ (function (_super) {
542
573
  var Wrapper = function (_a) {
543
574
  var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
544
575
  return (React.createElement("span", { className: 'tags-input__single-item'
545
- + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return _this.props.readOnly || _this.removeClick(i); } },
576
+ + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
546
577
  _this.props.getBorderColor
547
578
  && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
548
579
  ? { backgroundColor: borderColor }
@@ -559,7 +590,8 @@ var TreeSelect = /** @class */ (function (_super) {
559
590
  React.createElement("span", null, _this.props.getLabel(item))));
560
591
  })),
561
592
  this.state.openDropdown
562
- && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef, style: { zIndex: this.props.zIndex } },
593
+ && React.createElement("div", { className: "autocomplete autocomplete--multi-select"
594
+ + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: { zIndex: this.props.zIndex }, ref: this.dropdownRef },
563
595
  React.createElement("div", { className: 'autocomplete__header' },
564
596
  React.createElement("div", { className: "autocomplete__icon", onClick: function () {
565
597
  _this.backButtonValue();
@@ -567,7 +599,7 @@ var TreeSelect = /** @class */ (function (_super) {
567
599
  } },
568
600
  React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
569
601
  React.createElement("div", { className: 'autocomplete__filter' },
570
- React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
602
+ React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
571
603
  var _a, _b;
572
604
  if (_this.props.kind === 'synchronous') {
573
605
  _this.setState({ searchFieldValue: event.target.value });
@@ -603,8 +635,7 @@ var TreeSelect = /** @class */ (function (_super) {
603
635
  React.createElement(Loader_1.Loader, { overlay: true }))
604
636
  : this.state.searchFieldValue === ''
605
637
  ? this.props.getOptions
606
- ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options
607
- .map(function (option, i) {
638
+ ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options.map(function (option, i) {
608
639
  var selectedItem = _this.state.value.some(function (obj) {
609
640
  return _this.props.getId(obj) === _this.props.getId(option.value);
610
641
  });
@@ -613,7 +644,7 @@ var TreeSelect = /** @class */ (function (_super) {
613
644
  event.stopPropagation();
614
645
  _this.handleTree(event, option);
615
646
  } },
616
- React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
647
+ React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value), "-focus"), onKeyDown: function (event) {
617
648
  if (event.key === 'Enter' && option.children) {
618
649
  _this.setState({
619
650
  buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
@@ -626,13 +657,13 @@ var TreeSelect = /** @class */ (function (_super) {
626
657
  && React.createElement("div", { className: "item-border", style: {
627
658
  backgroundColor: _this.props.getBorderColor(option.value),
628
659
  } }),
629
- React.createElement("span", { style: (_this.props.getBackgroundColor && option.value)
660
+ React.createElement("span", { className: 'suggestion-item--bgcolor'
661
+ + (selectedItem ? ' suggestion-item--disabled' : ''), style: (_this.props.getBackgroundColor && option.value)
630
662
  ? {
631
663
  backgroundColor: _this.props.getBackgroundColor(option.value),
632
664
  color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
633
665
  }
634
- : undefined, className: 'suggestion-item--bgcolor'
635
- + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
666
+ : undefined }, _this.props.optionTemplate
636
667
  ? _this.props.optionTemplate(option.value)
637
668
  : _this.props.getLabel(option.value)),
638
669
  option.children