superdesk-ui-framework 3.0.36 → 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 +180 -131
  20. package/dist/examples.bundle.js +2323 -2189
  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 +1858 -1709
  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 +2 -11
  65. package/react/components/TreeSelect.js +49 -26
package/react/components/TreeSelect.js CHANGED
@@ -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) {
@@ -91,7 +92,7 @@ var TreeSelect = /** @class */ (function (_super) {
91
92
  _this.backButton();
92
93
  _this.backButtonValue();
93
94
  var buttonTarget = _this.state.buttonTarget;
94
- var className = buttonTarget.pop();
95
+ var className = "".concat(buttonTarget.pop(), "-focus");
95
96
  if (className != null) {
96
97
  var element = document.getElementsByClassName(className)[0];
97
98
  element.focus();
@@ -424,12 +425,16 @@ var TreeSelect = /** @class */ (function (_super) {
424
425
  } },
425
426
  React.createElement("button", { className: "suggestion-item--btn" },
426
427
  _this.props.getBorderColor
427
- && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
428
- React.createElement("span", { style: _this.props.getBackgroundColor
429
- ? { backgroundColor: _this.props.getBackgroundColor(option.value),
430
- color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
431
- : undefined, className: 'suggestion-item--bgcolor'
432
- + (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
433
438
  ? _this.props.optionTemplate(option.value)
434
439
  : _this.props.getLabel(option.value)),
435
440
  option.children
@@ -481,7 +486,7 @@ var TreeSelect = /** @class */ (function (_super) {
481
486
  return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
482
487
  });
483
488
  if (!selectedButton) {
484
- 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");
485
490
  }
486
491
  else {
487
492
  return React.createElement("button", { className: 'autocomplete__button'
@@ -506,28 +511,46 @@ var TreeSelect = /** @class */ (function (_super) {
506
511
  };
507
512
  TreeSelect.prototype.render = function () {
508
513
  var _this = this;
509
- 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 },
510
- 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') },
511
527
  this.props.allowMultiple
512
528
  ? React.createElement("div", { className: "tags-input__tags" },
513
529
  this.props.readOnly
514
- || 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
+ } },
515
535
  React.createElement("i", { className: "icon-plus-large" })),
516
536
  React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
517
537
  var Wrapper = function (_a) {
518
538
  var backgroundColor = _a.backgroundColor, children = _a.children;
519
539
  return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
520
- + (_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
521
542
  ? { backgroundColor: backgroundColor }
522
543
  : _this.props.getBackgroundColor
523
544
  && { backgroundColor: _this.props.getBackgroundColor(item) } },
524
- React.createElement("span", { style: { color: backgroundColor
545
+ React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor
525
546
  ? (0, Label_1.getTextColor)(backgroundColor)
526
547
  : _this.props.getBackgroundColor
527
- && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)) }, className: "tags-input__helper-box" },
548
+ && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)),
549
+ } },
528
550
  children,
529
- !_this.props.readOnly && React.createElement("span", { className: "tags-input__remove-button" },
530
- 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" })))));
531
554
  };
532
555
  return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
533
556
  ? _this.props.valueTemplate(item, Wrapper)
@@ -535,7 +558,7 @@ var TreeSelect = /** @class */ (function (_super) {
535
558
  React.createElement("span", null, _this.props.getLabel(item)))));
536
559
  })),
537
560
  this.state.value.length > 0
538
- ? this.props.readOnly
561
+ ? (this.props.readOnly || this.props.disabled)
539
562
  || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
540
563
  React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
541
564
  : null)
@@ -550,7 +573,7 @@ var TreeSelect = /** @class */ (function (_super) {
550
573
  var Wrapper = function (_a) {
551
574
  var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
552
575
  return (React.createElement("span", { className: 'tags-input__single-item'
553
- + (_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); } },
554
577
  _this.props.getBorderColor
555
578
  && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
556
579
  ? { backgroundColor: borderColor }
@@ -567,7 +590,8 @@ var TreeSelect = /** @class */ (function (_super) {
567
590
  React.createElement("span", null, _this.props.getLabel(item))));
568
591
  })),
569
592
  this.state.openDropdown
570
- && 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 },
571
595
  React.createElement("div", { className: 'autocomplete__header' },
572
596
  React.createElement("div", { className: "autocomplete__icon", onClick: function () {
573
597
  _this.backButtonValue();
@@ -575,7 +599,7 @@ var TreeSelect = /** @class */ (function (_super) {
575
599
  } },
576
600
  React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
577
601
  React.createElement("div", { className: 'autocomplete__filter' },
578
- 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) {
579
603
  var _a, _b;
580
604
  if (_this.props.kind === 'synchronous') {
581
605
  _this.setState({ searchFieldValue: event.target.value });
@@ -611,8 +635,7 @@ var TreeSelect = /** @class */ (function (_super) {
611
635
  React.createElement(Loader_1.Loader, { overlay: true }))
612
636
  : this.state.searchFieldValue === ''
613
637
  ? this.props.getOptions
614
- ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options
615
- .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) {
616
639
  var selectedItem = _this.state.value.some(function (obj) {
617
640
  return _this.props.getId(obj) === _this.props.getId(option.value);
618
641
  });
@@ -621,7 +644,7 @@ var TreeSelect = /** @class */ (function (_super) {
621
644
  event.stopPropagation();
622
645
  _this.handleTree(event, option);
623
646
  } },
624
- React.createElement("button", { className: "suggestion-item--btn z".concat(_this.props.getId(option.value), "z"), onKeyDown: function (event) {
647
+ React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value), "-focus"), onKeyDown: function (event) {
625
648
  if (event.key === 'Enter' && option.children) {
626
649
  _this.setState({
627
650
  buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
@@ -634,13 +657,13 @@ var TreeSelect = /** @class */ (function (_super) {
634
657
  && React.createElement("div", { className: "item-border", style: {
635
658
  backgroundColor: _this.props.getBorderColor(option.value),
636
659
  } }),
637
- 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)
638
662
  ? {
639
663
  backgroundColor: _this.props.getBackgroundColor(option.value),
640
664
  color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
641
665
  }
642
- : undefined, className: 'suggestion-item--bgcolor'
643
- + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
666
+ : undefined }, _this.props.optionTemplate
644
667
  ? _this.props.optionTemplate(option.value)
645
668
  : _this.props.getLabel(option.value)),
646
669
  option.children