superdesk-ui-framework 3.0.36 → 3.0.39

package/.eslintignore

@@ -1,3 +1,4 @@
 *.generated.js
 missing-translations-strings.js
 language-mapping-list.js
+globals.d.ts

package/app/styles/_drag-handle.scss

@@ -0,0 +1,24 @@
+.drag-handle {
+    height: 30px;
+    width: 8px;
+    opacity: 0.85;
+}
+
+.drag-handle-wrapper {
+    padding: 6px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--sd-colour-line--medium);
+    border-start-start-radius: 3px;
+    border-end-start-radius: 3px;
+    &:hover {
+        background-color: var(--sd-colour-line--strong);
+        cursor: grab;
+    }
+    &:active {
+        background-color: var(--sd-colour-interactive);
+        cursor: grabbing;
+        opacity: 1;
+    }
+}

package/app/styles/_sd-tag-input.scss

@@ -134,9 +134,6 @@ tags-input,
                 }
             }
         }
-        .tags-input__tag-item--multi-select {
-            margin: 0 !important;
-        }
         .tags-input__tag-item--readonly {
             cursor: default !important;
         }
@@ -222,10 +219,11 @@ tags-input,
         i {
             color: inherit;
         }
-        &:hover {
+
+        &:not(.tags-input__add-button--disabled):hover {
             opacity: 1;
         }
-        &:focus {
+        &:not(.tags-input__add-button--disabled):focus {
             opacity: 1;
         }
         &[disabled], [disabled]:hover, [disabled]:active {

package/app/styles/_tag-labels.scss

@@ -43,8 +43,6 @@ $tag-label-lineheight: 100% !default;
     text-align: center;
     font-weight: 400;
     transition: background-color .2s ease-out, opacity .1s ease-out;
-    margin: 0.2rem 0;
-    margin-right: 0.3rem;
     height: $sd-base-increment * 3;
     color: var(--color-text);
 }

package/app/styles/app.scss

@@ -87,6 +87,7 @@
 @import 'form-elements/autocomplete';
 @import 'form-elements/select-grid';
 @import 'form-elements/input-wrap';
+@import 'form-elements/input-preview';
 
 // Menus
 @import 'menus/sd-sidebar-menu';

package/app/styles/form-elements/_checkbox.scss

@@ -416,6 +416,9 @@ $checkButtonBorderRadius: $border-radius__base--small;
     &.sd-check-button__group--compact {
         gap: $sd-base-increment * 0.5;
     }
+    &.sd-check-button__group--no-wrap {
+        flex-wrap: nowrap;
+    }
 }
 
 .sd-check-new__wrapper {

package/app/styles/form-elements/_input-preview.scss

@@ -0,0 +1,70 @@
+.tags-preview {
+    display: flex;
+    align-items: flex-start;
+    word-wrap: break-word;
+    min-height: $form-input-height;
+    padding: 0.4rem 0.4rem 0.3rem 0.4rem;
+    overflow: hidden;
+    background-color: transparent;
+    .tags-preview__tag-list {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: $sd-base-increment / 2;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+    .tags-preview__tag-item {
+        @include tag-label;
+        color: currentColor;
+        background: $tag-label-BG-default;
+
+        &--single-select {
+            border-radius: 2px;
+            padding-inline-start: 0.714em;
+            padding-inline-end: 0.857em;
+        }
+
+        &--border {
+            border-left: solid;
+            border-left-width: 5px;
+        }
+    }
+    .tags-input__helper-box {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.sd-input__duration-input-preview {
+    display: flex;
+    gap: 2px;
+    grid-row: 2/3;
+    grid-column: 2/4;
+    &:focus-within {
+        box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+        border-color: var(--sd-colour-interactive);
+        background-color: var(--sd-colour-interactive--alpha-20);
+    }
+    .duration-input-preview {
+        display: inline-block;
+        text-align: end;
+        color: var(--color-text);
+        width: 2.5ch;
+        height: 3.2rem;
+        font-size: 1.4rem;
+        line-height: 3.2rem;
+    }
+    .sd-input__suffix {
+        height: 3.2rem;
+        line-height: 3.2rem;
+        font-size: 1.4rem;
+        color: var(--color-text-light);
+        display: inline-block;
+        pointer-events: none;
+        margin-inline-end: 2px;
+        text-align: center;
+    }
+}

package/app/styles/form-elements/_inputs.scss

@@ -514,6 +514,7 @@
 
 /////////////////  -------------------- NEW INPUTS ---------------------  /////////////////
 
+
 .sd-input__input {
     @include Line-input-base;
     &--invalid {
@@ -634,9 +635,6 @@
     }
 }
 
-
-//----
-
 .sd-input {
     padding-top: 0;
     margin: 0;
@@ -1069,15 +1067,13 @@
             }
         }
     }
-
+    &--disabled * {
+        cursor: not-allowed !important;
+    }
 }
 
-/////////////////  -------------------- Duration & Time-Date input ---------------------  /////////////////
-
-
-
-
 
+/////////////////  -------------------- Duration & Time-Date input ---------------------  /////////////////
 
 
 .sd-input__duration-input,
@@ -1101,11 +1097,11 @@
         appearance: none;
         border: 0;
         background-color: transparent;
-        height: 3.2rem;
         display: inline-block;
-        color: var(--color-text);
         text-align: end;
+        color: var(--color-text);
         width: 2.5ch;
+        height: 3.2rem;
         font-size: 1.4rem;
         padding: 0 !important;
         line-height: 3.2rem;
@@ -1169,7 +1165,7 @@
 }
 
 @keyframes blinker {
-50% {
-    opacity: 0;
-}
+    50% {
+        opacity: 0;
+    }
 }

package/app/styles/primereact/_pr-tag-input.scss

@@ -41,7 +41,7 @@
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
-    gap: $sd-base-increment / 8;
+    gap: $sd-base-increment / 2;
     width: 100%;
     transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
     border-radius: 2px 2px 0 0;

package/app-typescript/components/DatePicker.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import addDays from 'date-fns/addDays';
 import format from 'date-fns/format';
-import {Calendar, LocaleSettings, CalendarProps} from '@superdesk/primereact/calendar';
-import {throttle} from 'lodash';
-// import classNames from 'classnames';
+import moment from 'moment';
+import { Calendar, LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
+import { throttle } from 'lodash';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
+import { IInputWrapper } from './Form/InputWrapper';
 
 export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 
-interface IDatePickerBase {
+interface IDatePickerBase extends IInputWrapper {
     dateFormat: string; // a combination of YYYY, MM, and DD with a custom separator e.g. 'MM/DD/YYYY'
 
     // shortcuts can be used to jump to a date relative to today
@@ -31,18 +32,6 @@ interface IDatePickerBase {
         }}
      */
     locale?: DatePickerLocaleSettings;
-
-    // label props
-    disabled?: boolean;
-    inlineLabel?: boolean;
-    required?: boolean;
-    fullWidth?: boolean;
-    invalid?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    label?: string;
-    info?: string;
-    error?: string;
 }
 
 interface IDatePicker extends IDatePickerBase {
@@ -65,9 +54,7 @@ interface IState {
     value: CalendarProps['value'];
 
     // valid means it can be parsed
-    // if a value is invalid on blur, it will be set to an empty string and `props.onChange` called with `null`
     valid: boolean;
-    invalid: boolean;
 }
 
 // tries to parse primereact/calendar value format to IDatePicker['value']
@@ -98,7 +85,6 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
         this.state = {
             value: parseToPrimeReactCalendarFormat(this.props.value),
             valid: true,
-            invalid: this.props.invalid ?? false,
         };
 
         this.hidePopupOnScroll = throttle(() => {
@@ -145,71 +131,85 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
             };
         }
 
+        if (this.props.preview) {
+            return (
+                // We have to do type assertion here because we wrap primereact's component using
+                // a narrower interface i.e. primereact supports an array of dates or a single date,
+                // and our wrapped component will only ever use a single date.
+                <div>
+                    <span>{moment(this.state.value as Date).format(this.props.dateFormat)}</span>
+                </div>
+            );
+        }
+
         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}>
-                <Calendar
-                inputId={this.htmlId}
-                ariaLabelledBy={this.htmlId + 'label'}
-                ref={(ref) => {
-                    this.instance = ref as unknown as IPrivatePrimeReactCalendarApi;
-                }}
-                value={this.state.value === null ? undefined : this.state.value}
-                onChange={(event) => {
-                    const result = parseFromPrimeReactCalendarFormat(event.value);
-
-                    if (result !== 'failed-to-parse') {
-                        this.setState({value: event.value, valid: true});
-                        this.props.onChange(result);
-                    } else {
-                        // updating internal state so a user can continue typing and enter a valid value
-                        this.setState({value: event.value, valid: false});
-                    }
-                }}
-                locale={locale}
-                dateFormat={this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd')}
-                showIcon={true}
-                icon="icon-calendar"
-                headerTemplate={() => this.props.headerButtonBar == null ? null : (
-                    <div
-                    className="datepicker-header-toolbar">
-                        {this.props.headerButtonBar.map(({label, days}, i) => (
-                            <button
-                                key={i}
-                                className="btn btn--small"
-                                onClick={() => {
-                                    this.props.onChange(addDays(new Date(), days));
-                                    if (this.instance != null && typeof this.instance.hideOverlay === 'function') {
-                                        this.instance.hideOverlay();
-                                    }
-                                }}>
-                                {label}
-                            </button>
-                        ))}
-                    </div>
-                )}
-                appendTo={document.body} // making it work inside `overflow:hidden`
+                label={this.props.label}
+                error={this.props.error}
+                required={this.props.required}
                 disabled={this.props.disabled}
-                onBlur={(event) => {
-                    // @ts-ignore: Object is possibly 'null'.
-                    if (!event?.target.value) {
+                info={this.props.info}
+                inlineLabel={this.props.inlineLabel}
+                labelHidden={this.props.labelHidden}
+                htmlId={this.htmlId}
+                tabindex={this.props.tabindex}
+            >
+                <Calendar
+                    inputId={this.htmlId}
+                    ariaLabelledBy={this.htmlId + 'label'}
+                    ref={(ref) => {
+                        this.instance = ref as unknown as IPrivatePrimeReactCalendarApi;
+                    }}
+                    value={this.state.value === null ? undefined : this.state.value}
+                    onChange={(event) => {
+                        const result = parseFromPrimeReactCalendarFormat(event.value);
+
+                        if (result !== 'failed-to-parse') {
+                            this.setState({value: event.value, valid: true});
+                            this.props.onChange(result);
+                        } else {
+                            // updating internal state so a user can continue typing and enter a valid value
+                            this.setState({value: event.value, valid: false});
+                        }
+                    }}
+                    locale={locale}
+                    dateFormat={this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd')}
+                    showIcon={true}
+                    icon="icon-calendar"
+                    headerTemplate={() => this.props.headerButtonBar == null ? null : (
+                        <div className="datepicker-header-toolbar">
+                            {this.props.headerButtonBar.map(({label, days}, i) => (
+                                <button
+                                    key={i}
+                                    className="btn btn--small"
+                                    onClick={() => {
+                                        this.props.onChange(addDays(new Date(), days));
+                                        if (
+                                            this.instance != null
+                                            && typeof this.instance.hideOverlay === 'function'
+                                        ) {
+                                            this.instance.hideOverlay();
+                                        }
+                                    }}
+                                >
+                                    {label}
+                                </button>
+                            ))}
+                        </div>
+                    )}
+                    appendTo={document.body} // making it work inside `overflow:hidden`
+                    disabled={this.props.disabled}
+                    onBlur={(event) => {
                         // @ts-ignore: Object is possibly 'null'.
-                        this.setState({valid: true, value: null});
-                    } else {
-                        // restoring internal state to current props value
-                        this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
-                    }
-                }} />
+                        if (!event?.target.value) {
+                            // @ts-ignore: Object is possibly 'null'.
+                            this.setState({valid: true, value: null});
+                        } else {
+                            // restoring internal state to current props value
+                            this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
+                        }
+                    }}
+                />
             </InputWrapper>
         );
     }
@@ -224,27 +224,27 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
     render() {
         return (
             <DatePicker
-            value={new Date(this.props.value)}
-            onChange={(value) => {
-                if (value === null) {
-                    this.props.onChange('');
-                } else {
-                    this.props.onChange(format(value, 'yyyy-MM-dd'));
-                }
-            }}
-            disabled={this.props.disabled}
-            headerButtonBar={this.props.headerButtonBar}
-            dateFormat={this.props.dateFormat}
-            locale={this.props.locale}
-            inlineLabel={this.props.inlineLabel}
-            required={this.props.required}
-            fullWidth={this.props.fullWidth}
-            invalid={this.props.invalid}
-            labelHidden={this.props.labelHidden}
-            tabindex={this.props.tabindex}
-            label={this.props.label}
-            info={this.props.info}
-            error={this.props.error}
+                value={new Date(this.props.value)}
+                onChange={(value) => {
+                    if (value === null) {
+                        this.props.onChange('');
+                    } else {
+                        this.props.onChange(format(value, 'yyyy-MM-dd'));
+                    }
+                }}
+                disabled={this.props.disabled}
+                preview={this.props.preview}
+                headerButtonBar={this.props.headerButtonBar}
+                dateFormat={this.props.dateFormat}
+                locale={this.props.locale}
+                inlineLabel={this.props.inlineLabel}
+                required={this.props.required}
+                fullWidth={this.props.fullWidth}
+                labelHidden={this.props.labelHidden}
+                tabindex={this.props.tabindex}
+                label={this.props.label}
+                info={this.props.info}
+                error={this.props.error}
             />
         );
     }

package/app-typescript/components/DragHandle.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import '../../app/styles/_drag-handle.scss';
+import dragHandleImg from '../../app/img/dots.svg';
+
+export class DragHandle extends React.PureComponent {
+    render() {
+        return (
+            <div className="drag-handle-wrapper">
+                <img src={dragHandleImg} className="drag-handle" />
+            </div>
+        );
+    }
+}