superdesk-ui-framework 4.0.36 → 4.0.38

package/app-typescript/components/DatePicker.tsx

@@ -164,6 +164,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <Calendar
                     className='sd-input__input'

package/app-typescript/components/DateTimePicker.tsx

@@ -75,6 +75,7 @@ export class DateTimePicker extends React.PureComponent<IProps> {
         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}
       >

package/app-typescript/components/DurationInput.tsx

@@ -312,6 +312,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <div className={'sd-input__duration-input'}>
                     <input

package/app-typescript/components/Form/InputWrapper.tsx

@@ -25,9 +25,14 @@ export interface IInputCommon {
 
 export interface IInputWrapper extends IInputCommon {
     invalid?: boolean;
+
+    inputWrapper?: {
+        kind: 'custom'; // added to allow union types later
+        component: React.ComponentType<{label: string; input: React.ReactNode}>;
+    };
 }
 
-interface IPropsBase extends IInputWrapper {
+interface IProps extends IInputWrapper {
     children: React.ReactNode;
     maxLength?: number;
     value?: string | number;
@@ -40,8 +45,8 @@ interface IState {
     value: string | number;
 }
 
-export class InputWrapper extends React.Component<IPropsBase, IState> {
-    constructor(props: IPropsBase) {
+export class InputWrapper extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -50,6 +55,14 @@ export class InputWrapper extends React.Component<IPropsBase, IState> {
     }
 
     render() {
+        if (this.props.inputWrapper?.kind === 'custom') {
+            const Component = this.props.inputWrapper.component;
+
+            return (
+                <Component input={this.props.children} label={this.props.label ?? ''} />
+            );
+        }
+
         const fullWidth = this.props.fullWidth ?? true;
 
         const classes = classNames('sd-input', {

package/app-typescript/components/FormLabel.tsx

@@ -5,6 +5,7 @@ interface IProps {
     text: string;
     style?: 'normal' | 'light'; // defaults to normal
     noMinHeight?: boolean;
+    noMinWidth?: boolean;
 }
 
 export class FormLabel extends React.PureComponent<IProps> {
@@ -14,10 +15,20 @@ export class FormLabel extends React.PureComponent<IProps> {
 
         });
 
+        const style: React.CSSProperties = {};
+
+        if (this.props.noMinWidth) {
+            style.minWidth = 'auto';
+        }
+
+        if (this.props.noMinHeight) {
+            style.minHeight = 'auto';
+        }
+
         return (
             <label
                 className={classes}
-                style={this.props.noMinHeight === true ? {minHeight: 'auto'} : undefined}
+                style={style}
             >
                 {this.props.text}
             </label>

package/app-typescript/components/Input.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import nextId from "react-id-generator";
-import {IInputCommon, InputWrapper} from './Form/InputWrapper';
+import {IInputCommon, IInputWrapper, InputWrapper} from './Form/InputWrapper';
 
 interface IPropsBase extends IInputCommon {
     maxLength?: number;
     placeholder?: string;
     size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
     'data-test-id'?: string;
+    inputWrapper?: IInputWrapper['inputWrapper'];
 }
 
 interface IPropsText extends IPropsBase {
@@ -73,6 +74,7 @@ export class Input extends React.Component<IProps> {
                 boxedStyle={this.props.boxedStyle}
                 boxedLable={this.props.boxedLable}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <input
                     className='sd-input__input'

package/app-typescript/components/MultiSelect.tsx

@@ -74,6 +74,7 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <PrimeMultiSelect
                     panelClassName={classes}

package/app-typescript/components/Select.tsx

@@ -44,6 +44,7 @@ class Select extends React.Component<ISelect> {
                 fullWidth={this.props.fullWidth}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <span className='sd-input__select-caret-wrapper'>
                     <select

package/app-typescript/components/SelectWithTemplate.tsx

@@ -94,57 +94,60 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
 
         return (
             <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}>
+                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}
+            >
                 <Dropdown
-                inputId={this.htmlId}
-                ariaLabelledBy={this.htmlId + 'label'}
-                value={valueInternal}
-                options={optionsInternal}
-                onChange={(e) => {
-                    onChange(e.value == null ? null : e.value.original);
-                }}
-                placeholder={fakePlaceholderWithNonBreakingSpace}
-                filterPlaceholder={filterPlaceholder}
-                filter
-                filterBy={labelKey}
-                showClear={!required}
-                emptyFilterMessage={emptyFilterMessage}
-                itemTemplate={(option) => <ItemTemplate option={option?.original ?? null} />}
-                valueTemplate={(option) => ValueTemplate != null
-                    ? (
-                        <ValueTemplate option={option?.original ?? null} />
+                    inputId={this.htmlId}
+                    ariaLabelledBy={this.htmlId + 'label'}
+                    value={valueInternal}
+                    options={optionsInternal}
+                    onChange={(e) => {
+                        onChange(e.value == null ? null : e.value.original);
+                    }}
+                    placeholder={fakePlaceholderWithNonBreakingSpace}
+                    filterPlaceholder={filterPlaceholder}
+                    filter
+                    filterBy={labelKey}
+                    showClear={!required}
+                    emptyFilterMessage={emptyFilterMessage}
+                    itemTemplate={(option) => <ItemTemplate option={option?.original ?? null} />}
+                    valueTemplate={(option) => ValueTemplate != null
+                        ? (
+                            <ValueTemplate option={option?.original ?? null} />
 
-                    )
-                    : (
-                        <ItemTemplate option={option?.original ?? null} />
-                    )
-                }
-                disabled={disabled}
-                required={required}
-                autoFocus={autoFocus}
-                appendTo={document.body}
-                loading={loading}
-                onFilterInputChange={(searchString) => {
-                    this.setState({loading: true});
-                    getItems(searchString).then((_options) => {
-                        this.setState({options: _options, loading: false});
-                    });
-                }}
-                zIndex={zIndex}
-                style={width === '100%' ? {display: 'flex', width: '100%'} : {}}
-                ref={(componentRef) => {
-                    this.componentRef = componentRef;
-                }}/>
+                        )
+                        : (
+                            <ItemTemplate option={option?.original ?? null} />
+                        )
+                    }
+                    disabled={disabled}
+                    required={required}
+                    autoFocus={autoFocus}
+                    appendTo={document.body}
+                    loading={loading}
+                    onFilterInputChange={(searchString) => {
+                        this.setState({loading: true});
+                        getItems(searchString).then((_options) => {
+                            this.setState({options: _options, loading: false});
+                        });
+                    }}
+                    zIndex={zIndex}
+                    style={width === '100%' ? {display: 'flex', width: '100%'} : {}}
+                    ref={(componentRef) => {
+                        this.componentRef = componentRef;
+                    }}
+                />
             </InputWrapper>
         );
     }

package/app-typescript/components/TagInput.tsx

@@ -39,6 +39,7 @@ export class TagInput extends React.Component<IProps> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <Chips
                     className={`

package/app-typescript/components/TimePicker.tsx

@@ -34,6 +34,7 @@ export class TimePicker extends React.PureComponent<IProps> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <input
                     value={this.props.value}

package/app-typescript/components/TimePickerV2.tsx

@@ -147,6 +147,7 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                 inlineLabel={this.props.inlineLabel}
                 labelHidden={this.props.labelHidden}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <div className='sd__input__time-picker-v2' data-test-id={this.props['data-test-id']}>
                     <div className='input-wrapper__time-picker-v2'>

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -725,6 +725,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 tabindex={this.props.tabindex}
                 fullWidth={this.props.fullWidth}
                 data-test-id={this.props['data-test-id']}
+                inputWrapper={this.props.inputWrapper}
             >
                 <div
                     className={`

package/app-typescript/components/card.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+interface IProps extends Pick<React.CSSProperties, 'paddingBlock'> {
+    children: React.ReactNode;
+    paddingBase: '0' | '1' | '2' | '3' | '4';
+    paddingBlock?: React.CSSProperties['paddingBlock'];
+    paddingBlockStart?: React.CSSProperties['paddingBlockStart'];
+    paddingBlockEnd?: React.CSSProperties['paddingBlockEnd'];
+    paddingInline?: React.CSSProperties['paddingInline'];
+    paddingInlineStart?: React.CSSProperties['paddingInlineStart'];
+    paddingInlineEnd?: React.CSSProperties['paddingInlineEnd'];
+}
+
+export class Card extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <div
+                style={{
+                    width: '100%',
+                    background: 'var(--sd-item__main-Bg)',
+                    borderRadius: 'var(--b-radius--medium)',
+                    padding: `calc( ${this.props.paddingBase} * var(--base-increment))`,
+                    boxShadow: 'var(--sd-shadow--z2)',
+                    paddingBlock: this.props.paddingBlock,
+                    paddingBlockStart: this.props.paddingBlockStart,
+                    paddingBlockEnd: this.props.paddingBlockEnd,
+                    paddingInline: this.props.paddingInline,
+                    paddingInlineStart: this.props.paddingInlineStart,
+                    paddingInlineEnd: this.props.paddingInlineEnd,
+                }}
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/dist/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/dist/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,