superdesk-ui-framework 4.0.36 → 4.0.38

package/examples/pages/components/Card.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import {Card} from '../../../app-typescript/components/card';
+
+export default class CardDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Card</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <Card paddingBase="1">
+                        card content
+                    </Card>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <Card paddingBase="1">
+                    card content
+                </Card>
+            </section>
+        )
+    }
+}

package/examples/pages/components/Index.tsx

@@ -86,6 +86,7 @@ import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
 import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
 import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
 import LoaderDoc from './Loader';
+import CardDoc from './Card';
 
 
 interface IPages {
@@ -104,6 +105,10 @@ const pages: IPages = {
     basicComponents: {
         name: 'Basic Components',
         items: {
+            'card': {
+                name: 'Card',
+                component: CardDoc,
+            },
             'buttons': {
                 name: 'Buttons',
                 component: ButtonsDoc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.36",
+  "version": "4.0.38",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/DatePicker.js

@@ -140,7 +140,7 @@ var DatePicker = /** @class */ (function (_super) {
         var showClearButton = this.props.required === true
             ? false
             : this.props.hideClearButton !== true;
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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 },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, inputWrapper: this.props.inputWrapper },
             React.createElement(calendar_1.Calendar, { className: 'sd-input__input', footerTemplate: showClearButton ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
                     React.createElement(Button_1.Button, { onClick: function () {
                             _this.props.onChange(null);

package/react/components/DateTimePicker.js

@@ -84,7 +84,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         var convertedTimeValue = this.props.value != null
             ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
             : "";
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, fullWidth: this.props.fullWidth, "data-test-id": this.props["data-test-id"], ref: this.props.ref },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, fullWidth: this.props.fullWidth, inputWrapper: this.props.inputWrapper, "data-test-id": this.props["data-test-id"], ref: this.props.ref },
             React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "end", noWrap: true },
                 React.createElement("div", { style: { flexGrow: 1 } },
                     React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: this.props.value, onChange: function (val) {

package/react/components/DurationInput.js

@@ -316,7 +316,7 @@ var DurationInput = /** @class */ (function (_super) {
                     React.createElement("span", { className: 'duration-input-preview' }, this.state.seconds),
                     React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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 },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: 'sd-input__duration-input' },
                 React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {

package/react/components/Form/InputWrapper.d.ts

@@ -20,8 +20,15 @@ export interface IInputCommon {
 }
 export interface IInputWrapper extends IInputCommon {
     invalid?: boolean;
+    inputWrapper?: {
+        kind: 'custom';
+        component: React.ComponentType<{
+            label: string;
+            input: React.ReactNode;
+        }>;
+    };
 }
-interface IPropsBase extends IInputWrapper {
+interface IProps extends IInputWrapper {
     children: React.ReactNode;
     maxLength?: number;
     value?: string | number;
@@ -32,8 +39,8 @@ interface IPropsBase extends IInputWrapper {
 interface IState {
     value: string | number;
 }
-export declare class InputWrapper extends React.Component<IPropsBase, IState> {
-    constructor(props: IPropsBase);
+export declare class InputWrapper extends React.Component<IProps, IState> {
+    constructor(props: IProps);
     render(): JSX.Element;
 }
 export {};

package/react/components/Form/InputWrapper.js

@@ -57,8 +57,12 @@ var InputWrapper = /** @class */ (function (_super) {
     }
     InputWrapper.prototype.render = function () {
         var _a;
-        var _b, _c;
-        var fullWidth = (_b = this.props.fullWidth) !== null && _b !== void 0 ? _b : true;
+        var _b, _c, _d, _e;
+        if (((_b = this.props.inputWrapper) === null || _b === void 0 ? void 0 : _b.kind) === 'custom') {
+            var Component = this.props.inputWrapper.component;
+            return (React.createElement(Component, { input: this.props.children, label: (_c = this.props.label) !== null && _c !== void 0 ? _c : '' }));
+        }
+        var fullWidth = (_d = this.props.fullWidth) !== null && _d !== void 0 ? _d : true;
         var classes = (0, classnames_1.default)('sd-input', (_a = {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
@@ -80,8 +84,8 @@ var InputWrapper = /** @class */ (function (_super) {
             React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
             React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
             this.props.maxLength
-                && React.createElement("div", { className: 'sd-input__char-count' }, (_c = this.props.value) === null || _c === void 0 ? void 0 :
-                    _c.toString().length,
+                && React.createElement("div", { className: 'sd-input__char-count' }, (_e = this.props.value) === null || _e === void 0 ? void 0 :
+                    _e.toString().length,
                     " / ",
                     this.props.maxLength),
             React.createElement("div", { className: 'sd-input__message-box' },

package/react/components/FormLabel.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     text: string;
     style?: 'normal' | 'light';
     noMinHeight?: boolean;
+    noMinWidth?: boolean;
 }
 export declare class FormLabel extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/FormLabel.js

@@ -53,7 +53,14 @@ var FormLabel = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('form-label form-label--block', {
             'form-label--light': this.props.style === 'light',
         });
-        return (React.createElement("label", { className: classes, style: this.props.noMinHeight === true ? { minHeight: 'auto' } : undefined }, this.props.text));
+        var style = {};
+        if (this.props.noMinWidth) {
+            style.minWidth = 'auto';
+        }
+        if (this.props.noMinHeight) {
+            style.minHeight = 'auto';
+        }
+        return (React.createElement("label", { className: classes, style: style }, this.props.text));
     };
     return FormLabel;
 }(React.PureComponent));

package/react/components/Input.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { IInputCommon } from './Form/InputWrapper';
+import { IInputCommon, IInputWrapper } from './Form/InputWrapper';
 interface IPropsBase extends IInputCommon {
     maxLength?: number;
     placeholder?: string;
     size?: 'medium' | 'large' | 'x-large';
     'data-test-id'?: string;
+    inputWrapper?: IInputWrapper['inputWrapper'];
 }
 interface IPropsText extends IPropsBase {
     type: 'text';

package/react/components/Input.js

@@ -67,7 +67,7 @@ var Input = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
+        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled, "data-test-id": this.props['data-test-id'] })));
     };
     return Input;

package/react/components/MultiSelect.js

@@ -72,7 +72,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.state.value, valueTemplate: this.props.selectedItemTemplate, getLabel: this.props.optionLabel }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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 },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, inputWrapper: this.props.inputWrapper },
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);

package/react/components/Select.js

@@ -61,7 +61,7 @@ var Select = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
                 React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };

package/react/components/SelectWithTemplate.js

@@ -99,7 +99,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         // needs to be passed to prime react component
         // or it will not be displayed at all, even if returned by itemTemplate
         var fakePlaceholderWithNonBreakingSpace = ' ';
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
                     onChange(e.value == null ? null : e.value.original);
                 }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {

package/react/components/TagInput.js

@@ -59,7 +59,7 @@ var TagInput = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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 },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, inputWrapper: this.props.inputWrapper },
             React.createElement(chips_1.Chips, { className: "\n                        tags-input--multi-select sd-input__input\n                        ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
     };
     return TagInput;

package/react/components/TimePicker.js

@@ -58,7 +58,7 @@ var TimePicker = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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 },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, inputWrapper: this.props.inputWrapper },
             React.createElement("input", { value: this.props.value, type: "time", className: "sd-input__input", id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 }, "data-test-id": this.props['data-test-id'] })));

package/react/components/TimePickerV2.js

@@ -149,7 +149,7 @@ var TimePickerV2 = /** @class */ (function (_super) {
     TimePickerV2.prototype.render = function () {
         var _this = this;
         var timeUnitValuesArray = this.updatedTimeUnit();
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: 'sd__input__time-picker-v2', "data-test-id": this.props['data-test-id'] },
                 React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
                     React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[0], onChange: function (_a) {

package/react/components/TreeSelect/TreeSelect.js

@@ -570,7 +570,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 var children = _a.children;
                 return React.createElement(React.Fragment, null, children);
             };
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, fullWidth: this.props.fullWidth, "data-test-id": this.props['data-test-id'] },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, 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, fullWidth: this.props.fullWidth, "data-test-id": this.props['data-test-id'], inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
                     this.props.readOnly