superdesk-ui-framework 3.0.36 → 3.0.39

package/react/components/TreeSelect.js

@@ -60,6 +60,7 @@ var Form_1 = require("./Form");
 var core_1 = require("@popperjs/core");
 var lodash_1 = require("lodash");
 var Label_1 = require("./Label");
+var SelectPreview_1 = require("./SelectPreview");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -91,7 +92,7 @@ var TreeSelect = /** @class */ (function (_super) {
                     _this.backButton();
                     _this.backButtonValue();
                     var buttonTarget = _this.state.buttonTarget;
-                    var className = buttonTarget.pop();
+                    var className = "".concat(buttonTarget.pop(), "-focus");
                     if (className != null) {
                         var element = document.getElementsByClassName(className)[0];
                         element.focus();
@@ -424,12 +425,16 @@ var TreeSelect = /** @class */ (function (_super) {
                         } },
                         React.createElement("button", { className: "suggestion-item--btn" },
                             _this.props.getBorderColor
-                                && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
-                            React.createElement("span", { style: _this.props.getBackgroundColor
-                                    ? { backgroundColor: _this.props.getBackgroundColor(option.value),
-                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
-                                    : undefined, className: 'suggestion-item--bgcolor'
-                                    + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
+                                && React.createElement("div", { className: "item-border", style: {
+                                        backgroundColor: _this.props.getBorderColor(option.value),
+                                    } }),
+                            React.createElement("span", { className: 'suggestion-item--bgcolor'
+                                    + (selectedItem ? ' suggestion-item--disabled' : ''), style: _this.props.getBackgroundColor
+                                    ? {
+                                        backgroundColor: _this.props.getBackgroundColor(option.value),
+                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
+                                    }
+                                    : undefined }, _this.props.optionTemplate
                                 ? _this.props.optionTemplate(option.value)
                                 : _this.props.getLabel(option.value)),
                             option.children
@@ -481,7 +486,7 @@ var TreeSelect = /** @class */ (function (_super) {
             return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
         });
         if (!selectedButton) {
-            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");
+            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");
         }
         else {
             return React.createElement("button", { className: 'autocomplete__button'
@@ -506,28 +511,46 @@ var TreeSelect = /** @class */ (function (_super) {
     };
     TreeSelect.prototype.render = function () {
         var _this = this;
-        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 },
-            React.createElement("div", { className: "tags-input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select', " sd-input__input") },
+        if (this.props.preview) {
+            return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
+                    ? {
+                        mode: 'multi-select',
+                        getBackgroundColor: this.props.getBackgroundColor,
+                    }
+                    : {
+                        mode: 'single-select',
+                        getBorderColor: this.props.getBorderColor,
+                    }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
+        }
+        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 },
+            React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select') },
                 this.props.allowMultiple
                     ? React.createElement("div", { className: "tags-input__tags" },
                         this.props.readOnly
-                            || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button", onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } },
+                            || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function () {
+                                    if (!_this.props.disabled) {
+                                        _this.setState({ openDropdown: !_this.state.openDropdown });
+                                    }
+                                } },
                                 React.createElement("i", { className: "icon-plus-large" })),
                         React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
                             var Wrapper = function (_a) {
                                 var backgroundColor = _a.backgroundColor, children = _a.children;
                                 return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
-                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); }, style: _this.props.valueTemplate
+                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return (!_this.props.readOnly && !_this.props.disabled)
+                                        && _this.removeClick(i); }, style: _this.props.valueTemplate
                                         ? { backgroundColor: backgroundColor }
                                         : _this.props.getBackgroundColor
                                             && { backgroundColor: _this.props.getBackgroundColor(item) } },
-                                    React.createElement("span", { style: { color: backgroundColor
+                                    React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor
                                                 ? (0, Label_1.getTextColor)(backgroundColor)
                                                 : _this.props.getBackgroundColor
-                                                    && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)) }, className: "tags-input__helper-box" },
+                                                    && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)),
+                                        } },
                                         children,
-                                        !_this.props.readOnly && React.createElement("span", { className: "tags-input__remove-button" },
-                                            React.createElement(Icon_1.Icon, { name: "close-small" })))));
+                                        !_this.props.readOnly
+                                            && React.createElement("span", { className: "tags-input__remove-button" },
+                                                React.createElement(Icon_1.Icon, { name: "close-small" })))));
                             };
                             return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
                                 ? _this.props.valueTemplate(item, Wrapper)
@@ -535,7 +558,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                     React.createElement("span", null, _this.props.getLabel(item)))));
                         })),
                         this.state.value.length > 0
-                            ? this.props.readOnly
+                            ? (this.props.readOnly || this.props.disabled)
                                 || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
                                     React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
                             : null)
@@ -550,7 +573,7 @@ var TreeSelect = /** @class */ (function (_super) {
                             var Wrapper = function (_a) {
                                 var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
                                 return (React.createElement("span", { className: 'tags-input__single-item'
-                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return _this.props.readOnly || _this.removeClick(i); } },
+                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
                                     _this.props.getBorderColor
                                         && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
                                                 ? { backgroundColor: borderColor }
@@ -567,7 +590,8 @@ var TreeSelect = /** @class */ (function (_super) {
                                     React.createElement("span", null, _this.props.getLabel(item))));
                         })),
                 this.state.openDropdown
-                    && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef, style: { zIndex: this.props.zIndex } },
+                    && React.createElement("div", { className: "autocomplete autocomplete--multi-select"
+                            + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: { zIndex: this.props.zIndex }, ref: this.dropdownRef },
                         React.createElement("div", { className: 'autocomplete__header' },
                             React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                     _this.backButtonValue();
@@ -575,7 +599,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                 } },
                                 React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
                             React.createElement("div", { className: 'autocomplete__filter' },
-                                React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
+                                React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
                                         var _a, _b;
                                         if (_this.props.kind === 'synchronous') {
                                             _this.setState({ searchFieldValue: event.target.value });
@@ -611,8 +635,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                 React.createElement(Loader_1.Loader, { overlay: true }))
                             : this.state.searchFieldValue === ''
                                 ? this.props.getOptions
-                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options
-                                        .map(function (option, i) {
+                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options.map(function (option, i) {
                                         var selectedItem = _this.state.value.some(function (obj) {
                                             return _this.props.getId(obj) === _this.props.getId(option.value);
                                         });
@@ -621,7 +644,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            React.createElement("button", { className: "suggestion-item--btn z".concat(_this.props.getId(option.value), "z"), onKeyDown: function (event) {
+                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value), "-focus"), onKeyDown: function (event) {
                                                     if (event.key === 'Enter' && option.children) {
                                                         _this.setState({
                                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
@@ -634,13 +657,13 @@ var TreeSelect = /** @class */ (function (_super) {
                                                     && React.createElement("div", { className: "item-border", style: {
                                                             backgroundColor: _this.props.getBorderColor(option.value),
                                                         } }),
-                                                React.createElement("span", { style: (_this.props.getBackgroundColor && option.value)
+                                                React.createElement("span", { className: 'suggestion-item--bgcolor'
+                                                        + (selectedItem ? ' suggestion-item--disabled' : ''), style: (_this.props.getBackgroundColor && option.value)
                                                         ? {
                                                             backgroundColor: _this.props.getBackgroundColor(option.value),
                                                             color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
                                                         }
-                                                        : undefined, className: 'suggestion-item--bgcolor'
-                                                        + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
+                                                        : undefined }, _this.props.optionTemplate
                                                     ? _this.props.optionTemplate(option.value)
                                                     : _this.props.getLabel(option.value)),
                                                 option.children

package/react/index.d.ts

@@ -89,5 +89,6 @@ export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
 export { Spacer, SpacerBlock } from './components/Spacer';
+export { DragHandle } from './components/DragHandle';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = void 0;
-exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = void 0;
+exports.DragHandle = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -217,3 +217,5 @@ Object.defineProperty(exports, "WithPopover", { enumerable: true, get: function
 var Spacer_1 = require("./components/Spacer");
 Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return Spacer_1.Spacer; } });
 Object.defineProperty(exports, "SpacerBlock", { enumerable: true, get: function () { return Spacer_1.SpacerBlock; } });
+var DragHandle_1 = require("./components/DragHandle");
+Object.defineProperty(exports, "DragHandle", { enumerable: true, get: function () { return DragHandle_1.DragHandle; } });

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "files": ["./app-typescript/index.ts"],
+    "files": ["./app-typescript/index.ts", "./globals.d.ts"],
     "compilerOptions": {
         "outDir": "./react",
         "module": "commonjs",