superdesk-ui-framework 2.4.16 → 2.4.19

package/app/styles/_accessibility.scss

@@ -1,9 +1,10 @@
 .a11y-only {
-    position: absolute;
+    position: absolute !important;
     top: 0;
     z-index: -1;
     pointer-events: none;
     opacity: 0;
-    height: 1px;
+    height: 1px !important;
+    width: 1px !important;
     overflow: hidden;
 }

package/app-typescript/components/Dropdown.tsx

@@ -158,7 +158,6 @@ export const Dropdown = ({
                     if (toggleRef && menuRef) {
                         createPopper(toggleRef, menuRef, {
                             placement: checkAlign() ? 'bottom-end' : 'bottom-start',
-                            strategy: 'fixed',
                         });
                         menuRef.style.display = 'block';
                     }

package/app-typescript/components/Input.tsx

@@ -4,7 +4,7 @@ import nextId from "react-id-generator";
 
 interface IProps {
     value?: string;
-    label?: string;
+    label: string;
     maxLength?: number;
     info?: string;
     error?: string;
@@ -12,6 +12,7 @@ interface IProps {
     disabled?: boolean;
     invalid?: boolean;
     inlineLabel?: boolean;
+    labelHidden?: boolean;
     onChange(newValue: string): void;
 }
 
@@ -50,11 +51,15 @@ export class Input extends React.Component<IProps, IState> {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        const labelClasses = classNames('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
 
         return (
             <div className={classes}>
-                {this.props.label ? <label className='sd-input__label'
-                    htmlFor={this.htmlId} id={this.htmlId + 'label'}>{this.props.label}</label> : null}
+                <label className={labelClasses} htmlFor={this.htmlId} id={this.htmlId + 'label'}>
+                    {this.props.label}
+                </label>
 
                 <input className='sd-input__input'
                     type='text'

package/app-typescript/components/Select.tsx

@@ -4,13 +4,14 @@ import nextId from "react-id-generator";
 
 interface ISelect {
     value?: string;
-    label?: string;
+    label: string;
     info?: string;
     error?: string;
     required?: boolean;
     disabled?: boolean;
     invalid?: boolean;
     inlineLabel?: boolean;
+    labelHidden?: boolean;
     onChange(newValue: string): void;
 }
 
@@ -38,6 +39,13 @@ class Select extends React.Component<ISelect, IState> {
         this.props.onChange(event.target.value);
     }
 
+    componentDidUpdate(prevProps: any) {
+        if (this.props.value !== prevProps.value) {
+            this.setState({ value: this.props.value ?? '' });
+            this.props.onChange(this.props.value ?? '');
+          }
+    }
+
     render() {
         const classes = classNames('sd-input sd-input--is-select', {
             'sd-input--inline-label': this.props.inlineLabel,
@@ -45,11 +53,13 @@ class Select extends React.Component<ISelect, IState> {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        const labelClasses = classNames('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
 
         return (
             <div className={classes}>
-                {this.props.label ?
-                    <label className='sd-input__label' htmlFor={this.htmlId}>{this.props.label}</label> : null}
+                <label className={labelClasses} htmlFor={this.htmlId}>{this.props.label}</label>
 
                 <select className='sd-input__select'
                     id={this.htmlId}

package/app-typescript/components/Tag.tsx

@@ -16,11 +16,11 @@ export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick }: IProps)
         'tag-label--square': shape === 'square',
     });
     return (
-        <div className={classes} key={keyValue}>
+        <span className={classes} key={keyValue}>
             {text}
             {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
                 <i className='icon-close-small'></i>
             </button> : null}
-        </div>
+        </span>
     );
 };