superdesk-ui-framework 4.0.26 → 4.0.28

package/app-typescript/components/Button.tsx

@@ -22,6 +22,7 @@ interface IPropsButton {
     icon?: string;
     disabled?: boolean;
     iconOnly?: boolean;
+    noMargin?: boolean;
     'data-test-id'?: string;
 }
 
@@ -51,6 +52,7 @@ export class Button extends React.PureComponent<IPropsButton> {
                 aria-label={this.props.iconOnly ? this.props.text : ''}
                 data-test-id={this.props['data-test-id']}
                 title={this.props.tooltip}
+                style={this.props.noMargin ? {margin: 0} : undefined}
             >
                 {this.props.isLoading ? <Spinner size="mini" /> : null}
                 {this.props.icon && !this.props.isLoading ? <Icon ariaHidden name={this.props.icon} /> : null}

package/app-typescript/components/FormLabel.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 interface IProps {
     text: string;
     style?: 'normal' | 'light'; // defaults to normal
+    noMinHeight?: boolean;
 }
 
 export class FormLabel extends React.PureComponent<IProps> {
@@ -14,7 +15,12 @@ export class FormLabel extends React.PureComponent<IProps> {
         });
 
         return (
-            <label className={classes}>{this.props.text}</label>
+            <label
+                className={classes}
+                style={this.props.noMinHeight === true ? {minHeight: 'auto'} : undefined}
+            >
+                {this.props.text}
+            </label>
         );
     }
 }

package/app-typescript/components/Label.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import {getTextColor} from '../helpers';
+
 interface IProps {
     text: string;
     link?: string;
@@ -77,16 +79,3 @@ export class Label extends React.PureComponent<IProps> {
         }
     }
 }
-
-export function getTextColor(backgroundColor: string): 'black' | 'white' | undefined {
-    if (backgroundColor) {
-        const r = parseInt(backgroundColor.substr(1, 2), 16);
-        const g = parseInt(backgroundColor.substr(3, 2), 16);
-        const b = parseInt(backgroundColor.substr(5, 2), 16);
-        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
-
-        return (yiq >= 128) ? 'black' : 'white';
-    } else {
-        return;
-    }
-}

package/app-typescript/components/RadioButtonGroup.tsx

@@ -4,7 +4,9 @@ import nextId from "react-id-generator";
 import {FormLabel} from './Form/FormLabel';
 
 interface IProps {
-    value?: string;
+    value: string;
+    onChange(nextValue: string): void;
+    disabled?: boolean;
     group?: {
         orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
         grid?: boolean;
@@ -22,7 +24,6 @@ interface IProps {
     }>;
     required?: boolean;
     tabindex?: number;
-    onChange(nextValue: string): void;
     'data-test-id'?: string;
 }
 
@@ -35,7 +36,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
     }
 
     handleChange(item: any) {
-        if (!item.disabled) {
+        if (this.props.disabled !== true && item.disabled !== true) {
             this.props.onChange(item.value);
         }
     }
@@ -73,7 +74,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
                                     tabIndex={this.props.tabindex}
                                     name={this.htmlId}
                                     onChange={() => this.handleChange(item)}
-                                    disabled={item.disabled}
+                                    disabled={this.props.disabled || item.disabled}
                                     required={this.props.required}
                                     checked={item.value === this.props.value} />
                                 <label
@@ -110,7 +111,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
                                         tabIndex={0}
                                         name={this.htmlId}
                                         onChange={() => this.handleChange(item)}
-                                        disabled={item.disabled}
+                                        disabled={this.props.disabled || item.disabled}
                                         required={this.props.required}
                                         checked={item.value === this.props.value} />
                                     <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}

package/app-typescript/components/Select.tsx

@@ -6,6 +6,7 @@ import {IInputWrapper} from './Form/InputWrapper';
 interface ISelect extends IInputWrapper {
     value?: string;
     onChange(newValue: string): void;
+    'data-test-id'?: string;
 }
 
 class Select extends React.Component<ISelect> {
@@ -53,6 +54,7 @@ class Select extends React.Component<ISelect> {
                         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}
                     </select>

package/app-typescript/components/SelectPreview.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import {getTextColor} from './Label';
+import {getTextColor} from '../helpers';
 
 interface IProps<T> {
     items: Array<T>;

package/app-typescript/components/ShowPopup.tsx

@@ -7,7 +7,7 @@ import maxSize from 'popper-max-size-modifier';
 import {getNextZIndex} from '../zIndex';
 
 interface IPropsPopupPositioner {
-    referenceElement: HTMLElement;
+    getReferenceElement(): HTMLElement;
     placement: Placement;
     onClose(): void;
     closeOnHoverEnd?: boolean;
@@ -34,7 +34,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
         }
 
         if (
-            this.props.referenceElement.contains(event.target as Node) !== true
+            this.props.getReferenceElement().contains(event.target as Node) !== true
             && this.wrapperEl.contains(event.target as Node) !== true
         ) {
             this.props.onClose();
@@ -66,7 +66,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
         window.addEventListener('scroll', this.closeOnScroll, true);
 
         if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
-            this.props.referenceElement.addEventListener('mouseleave', this.closeOnMouseLeave);
+            this.props.getReferenceElement().addEventListener('mouseleave', this.closeOnMouseLeave);
             this.wrapperEl.addEventListener('mouseleave', this.closeOnMouseLeave);
         }
 
@@ -91,7 +91,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
             setTimeout(() => {
                 if (this.wrapperEl != null) {
                     this.popper = createPopper(
-                        this.props.referenceElement,
+                        this.props.getReferenceElement(),
                         this.wrapperEl,
                         {
                             placement: this.props.placement,
@@ -111,7 +111,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
         window.removeEventListener('scroll', this.closeOnScroll, true);
 
         if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
-            this.props.referenceElement.removeEventListener('mouseleave', this.closeOnMouseLeave);
+            this.props.getReferenceElement().removeEventListener('mouseleave', this.closeOnMouseLeave);
             this.wrapperEl.removeEventListener('mouseleave', this.closeOnMouseLeave);
         }
 
@@ -120,19 +120,28 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
 
     render() {
         return (
-            <div
-                ref={(el) => {
-                    this.wrapperEl = el;
-                }}
-                style={{
-                    position: 'absolute',
-                    left: '-100vw',
-                    display: 'flex',
-                    zIndex: this.zIndex,
-                }}
-            >
-                {this.props.children}
-            </div>
+            <>
+                {
+                    ReactDOM.createPortal(
+                        (
+                            <div
+                                ref={(el) => {
+                                    this.wrapperEl = el;
+                                }}
+                                style={{
+                                    position: 'absolute',
+                                    left: '-100vw',
+                                    display: 'flex',
+                                    zIndex: this.zIndex,
+                                }}
+                            >
+                                {this.props.children}
+                            </div>
+                        ),
+                        document.body,
+                    )
+            }
+            </>
         );
     }
 }
@@ -160,7 +169,7 @@ export function showPopup(
     ReactDOM.render(
         (
             <PopupPositioner
-                referenceElement={referenceElement}
+                getReferenceElement={() => referenceElement}
                 placement={placement}
                 onClose={closeFn}
                 closeOnHoverEnd={closeOnHoverEnd || false}

package/app-typescript/components/TreeMenu.tsx

@@ -199,6 +199,22 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
             if (this.openDropdownRef.current && this.dropdownRef.current) {
                 this.popperInstance = createPopper(this.openDropdownRef.current, this.dropdownRef.current, {
                     placement: 'bottom-start',
+                    modifiers: [
+                        {
+                            name: 'flip',
+                            enabled: true,
+                        },
+                    ],
+                    onFirstUpdate: (state) => {
+                        this.popperInstance?.setOptions({
+                            placement: state.placement,
+                            modifiers: this.popperInstance.state.options.modifiers.map((modifier) => (
+                                modifier.name === 'flip'
+                                    ? {...modifier, enabled: false}
+                                    : modifier
+                            )),
+                        });
+                    },
                 });
             }
 

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

@@ -6,7 +6,7 @@ import _debounce from 'lodash/debounce';
 import { InputWrapper } from "../Form";
 import { createPopper, Instance } from '@popperjs/core';
 import {isEqual} from 'lodash';
-import {getTextColor} from '../Label';
+import {getTextColor} from '../../helpers';
 import {IInputWrapper} from '../Form/InputWrapper';
 import {SelectPreview} from '../SelectPreview';
 import {TreeSelectPill} from './TreeSelectPill';
@@ -15,14 +15,7 @@ import {keyboardNavigation} from './KeyboardNavigation';
 import {WithPortal} from '../WithPortal';
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 import {getNextZIndex} from '../../zIndex';
-
-const reorder = (list: Array<any>, startIndex: number, endIndex: number) => {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-
-    return result;
-};
+import {arrayMove} from '@superdesk/common';
 
 interface IState<T> {
     value: Array<T>;
@@ -282,14 +275,9 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
     }
 
     removeClick(i: number) {
-        let newTags = this.state.value;
-        newTags?.splice(i, 1);
-
         this.setState({
-            value: newTags,
+            value: this.state.value.filter((_item, index) => index !== i),
         });
-
-        this.props.onChange(this.state.value);
     }
 
     handleMultiLevel(item: ITreeNode<T>) {
@@ -639,13 +627,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
             return;
         }
 
-        const value = reorder(
-            this.state.value,
-            result.source.index,
-            result.destination.index,
-        );
         this.setState({
-            value: value,
+            value: arrayMove(this.state.value, result.source.index, result.destination.index),
         });
     }
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Icon } from "../Icon";
-import {getTextColor} from '../Label';
+import {getTextColor} from '../../helpers';
 import {ITreeNode} from './TreeSelect';
 
 export function getPrefixedItemId(id: string) {

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

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import * as React from "react";
 import {DragHandle} from '../DragHandle';
 import {Icon} from "../Icon";
-import {getTextColor} from '../Label';
+import {getTextColor} from '../../helpers';
 
 interface IProps<T> {
     item: T;

package/app-typescript/helpers.tsx

@@ -5,3 +5,16 @@ export function assertNever(x: never): never {
 export function nameof<T>(name: keyof T): string {
     return name.toString();
 }
+
+export function getTextColor(backgroundColor: string): 'black' | 'white' | undefined {
+    if (backgroundColor) {
+        const r = parseInt(backgroundColor.substr(1, 2), 16);
+        const g = parseInt(backgroundColor.substr(3, 2), 16);
+        const b = parseInt(backgroundColor.substr(5, 2), 16);
+        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+
+        return (yiq >= 128) ? 'black' : 'white';
+    } else {
+        return;
+    }
+}

package/app-typescript/index.ts

@@ -107,6 +107,7 @@ export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
 export { CalendarWeekDayItem } from './components/Lists/CalendarWeekDayItem';
+export { getTextColor } from './helpers';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;