superdesk-ui-framework 3.0.31 → 3.0.35

package/app/styles/components/_theme-selector.scss

@@ -96,7 +96,7 @@
                 box-shadow: var(--sd-shadow--z1);
                 border-color: var(--sd-colour-line--strong);
             }
-            
+
         }
     }
     input:checked {
@@ -145,6 +145,10 @@
 }
 
 [data-theme="dark-ui"] {
+    input[type="time"]::-webkit-calendar-picker-indicator {
+        filter: invert(1);
+    }
+
     figure[data-theme="dark-ui"] {
         --color-text:                      hsla(0, 0%, 96%, 1);
         --color-text-light:                hsla(214, 13%, 96%, 0.75);
@@ -173,7 +177,7 @@
         --sd-colour--shadow-line:          hsla(214, 13%, 70%, 0);
         --sd-colour-line--medium:          hsla(214, 13%, 20%, 0.2);
 
-        
+
     }
     figure[data-theme="contrast-light-ui"] {
         --color-text:                      hsla(0, 0%, 0%, 1);
@@ -186,4 +190,4 @@
         --sd-colour--shadow-line:          hsla(214, 13%, 60%, 0);
         --sd-colour-line--medium:          hsla(214, 13%, 20%, 0.4);
     }
-}
+}

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

@@ -653,11 +653,16 @@
         grid-row: 2/3;
         grid-column: 2/4;
     }
+
     .sd-input__input-container {
         grid-row: 2/3;
         grid-column: 2/4;
     }
 
+    .sd-input__input-container:has(input[type="time"]) {
+        min-width: 110px;
+    }
+
     textarea {
         &.sd-input__input {
             height: auto;

package/app/styles/primereact/_pr-datepicker.scss

@@ -29,7 +29,6 @@
             transition: all 0.2s ease-out, color 0.1s ease-out;
             &:hover {
                 background-color: hsla(214, 13%, 55%, 0.2);
-                
             }
             &:active {
                 background-color: hsla(214, 13%, 55%, 0.3);
@@ -154,7 +153,7 @@
 .p-calendar {
     @include pr-input-item-base;
     .p-inputtext {
-        color: inherit;
+        color: var(--color-text);
         height: $height-input--default;
         background-color: transparent;
         border: none;
@@ -178,7 +177,7 @@
         margin: 0 4px 0 0;
         [class^="icon-"],
         [class*=" icon-"] {
-            color: inherit;
+            color: var(--color-text);
             margin-top: -2px;
             opacity: 0.75;
         }
@@ -193,4 +192,4 @@
 }
 .p-datepicker-calendar {
     margin-bottom: 8px;
-}
+}

package/app-typescript/components/Modal.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { Dialog as PrimeDialog } from '@superdesk/primereact/dialog';
 import classNames from 'classnames';
+import {noop} from 'lodash';
 
 interface IProps {
     id?: string;
     className?: string;
     theme?: string;
     visible?: boolean;
+    zIndex?: number;
+    closeOnEscape?: boolean;
     contentBg?: 'default' | 'medium' | 'dark';
     contentPadding?: 'none' | 'small' | 'medium' | 'large';
     size?: 'small' | 'medium' | 'large' | 'x-large';
@@ -15,10 +18,8 @@ interface IProps {
     maximizable?: boolean;
     headerTemplate?: JSX.Element | string;
     footerTemplate?: JSX.Element | string;
-    closeOnEscape?: boolean;
-    zIndex?: number;
     onShow?(): void;
-    onHide(): void;
+    onHide?(): void;
 }
 
 export class Modal extends React.Component<IProps, {}> {
@@ -43,9 +44,10 @@ export class Modal extends React.Component<IProps, {}> {
                     maximizable={this.props.maximizable}
                     contentClassName={classes}
                     onShow={this.props.onShow}
-                    onHide={this.props.onHide}
+                    onHide={this.props.onHide ?? noop}
                     zIndex={this.props.zIndex ? this.props.zIndex : 1000}
                     position={this.props.position}
+                    closable={this.props.onHide != null ? true : false}
                 >
                     {this.props.children}
                 </PrimeDialog>

package/app-typescript/components/TimePicker.tsx

@@ -24,29 +24,31 @@ export class TimePicker extends React.PureComponent<IProps> {
     render() {
         return (
             <InputWrapper
-            label={this.props.label}
-            error={this.props.error}
-            required={this.props.required}
-            disabled={this.props.disabled}
-            invalid={this.props.invalid}
-            info={this.props.info}
-            inlineLabel={this.props.inlineLabel}
-            labelHidden={this.props.labelHidden}
-            fullWidth={this.props.fullWidth}
-            htmlId={this.htmlId}
-            tabindex={this.props.tabindex}>
-                <input
-                id={this.htmlId}
-                aria-labelledby={this.htmlId + 'label'}
-                type="time"
-                step={this.props.allowSeconds ? 1 : undefined}
-                className="sd-input__input"
-                value={this.props.value}
+                label={this.props.label}
+                error={this.props.error}
                 required={this.props.required}
                 disabled={this.props.disabled}
-                onChange={(event) => {
-                    this.props.onChange(event.target.value);
-                }}/>
+                invalid={this.props.invalid}
+                info={this.props.info}
+                inlineLabel={this.props.inlineLabel}
+                labelHidden={this.props.labelHidden}
+                fullWidth={this.props.fullWidth}
+                htmlId={this.htmlId}
+                tabindex={this.props.tabindex}
+            >
+                <input
+                    id={this.htmlId}
+                    aria-labelledby={this.htmlId + 'label'}
+                    type="time"
+                    step={this.props.allowSeconds ? 1 : undefined}
+                    className="sd-input__input"
+                    value={this.props.value}
+                    required={this.props.required}
+                    disabled={this.props.disabled}
+                    onChange={(event) => {
+                        this.props.onChange(event.target.value);
+                    }}
+                />
             </InputWrapper>
         );
     }