superdesk-ui-framework 3.0.1-beta.9 → 3.0.2

package/app/styles/variables/_colors.scss

@@ -2,30 +2,30 @@
 // -------------------------------------------------------------------------
 
 // Refernce Colours
-$ref-color-primary:         hsla(198, 50%, 50%, 1);
-$ref-color-success:         hsla(120, 40%, 50%, 1);
-$ref-color-alert:           hsla(358, 79%, 50%, 1);
-$ref-color-warning:         hsla(35, 100%, 50%, 1);
-$ref-color-highlight:       hsla(291, 64%, 50%, 1);
-$ref-color-neutral:         hsla(0,    0%, 50%, 1);
+// $ref-color-primary:         hsla(198, 50%, 50%, 1);
+// $ref-color-success:         hsla(120, 40%, 50%, 1);
+// $ref-color-alert:           hsla(358, 79%, 50%, 1);
+// $ref-color-warning:         hsla(35, 100%, 50%, 1);
+// $ref-color-highlight:       hsla(291, 64%, 50%, 1);
+// $ref-color-neutral:         hsla(0,    0%, 50%, 1);
 
 // Refernce Colours -- DARK BGs & Lines
-$ref-color-cool-grey--00:   hsl(214, 13%, 12%);
-$ref-color-cool-grey--01:   hsl(214, 13%, 16%);
-$ref-color-cool-grey--02:   hsl(214, 13%, 20%);
-$ref-color-cool-grey--03:   hsl(214, 13%, 25%);
-$ref-color-cool-grey--04:   hsl(214, 13%, 30%);
+// $ref-color-cool-grey--00:   hsl(214, 13%, 12%);
+// $ref-color-cool-grey--01:   hsl(214, 13%, 16%);
+// $ref-color-cool-grey--02:   hsl(214, 13%, 20%);
+// $ref-color-cool-grey--03:   hsl(214, 13%, 25%);
+// $ref-color-cool-grey--04:   hsl(214, 13%, 30%);
 
 // Refernce Colours -- LIGHT BGs & Lines
-$ref-color-light-grey--00:  hsl(214, 13%, 100%);
-$ref-color-light-grey--01:  hsl(214, 13%, 96%);
-$ref-color-light-grey--02:  hsl(214, 13%, 92%);
-$ref-color-light-grey--03:  hsl(214, 13%, 85%);
-$ref-color-light-grey--04:  hsl(214, 13%, 80%);
-$ref-color-light-grey--05:  hsl(214, 13%, 75%);
-$ref-color-light-grey--06:  hsl(214, 13%, 70%);
-$ref-color-light-grey--07:  hsl(214, 13%, 65%);
-$ref-color-light-grey--08:  hsl(214, 13%, 60%);
+// $ref-color-light-grey--00:  hsl(214, 13%, 100%);
+// $ref-color-light-grey--01:  hsl(214, 13%, 96%);
+// $ref-color-light-grey--02:  hsl(214, 13%, 92%);
+// $ref-color-light-grey--03:  hsl(214, 13%, 85%);
+// $ref-color-light-grey--04:  hsl(214, 13%, 80%);
+// $ref-color-light-grey--05:  hsl(214, 13%, 75%);
+// $ref-color-light-grey--06:  hsl(214, 13%, 70%);
+// $ref-color-light-grey--07:  hsl(214, 13%, 65%);
+// $ref-color-light-grey--08:  hsl(214, 13%, 60%);
 
 ///// ==============
 
@@ -81,29 +81,29 @@ $yellow:                hsla(45, 100%, 53%, 1);
 $orange:                hsla(35, 100%, 43%, 1);
 $purple:                hsla(291, 64%, 42%, 1);
 
-$black:                 #000;
-$grayDarker:            #222;
-$grayDark:              #333333;
-$grayMedium:            #444;
-$gray:                  #666;
-$grayNeutral:           #7b7b7b;
-$grayText:              #747474;
-$grayLight:             #999;
-$grayLighter:           #F5F5F5;
-$white:                 #fff;
+$black:                 hsl(214, 13%, 0%);
+$grayDarker:            hsl(214, 13%, 13%);
+$grayDark:              hsl(214, 13%, 20%);
+$grayMedium:            hsl(214, 13%, 27%);
+$gray:                  hsl(214, 13%, 40%);
+$grayNeutral:           hsl(214, 13%, 48%);
+$grayText:              hsl(214, 13%, 45%);
+$grayLight:             hsl(214, 13%, 60%);
+$grayLighter:           hsl(214, 13%, 96%);
+$white:                 hsl(214, 13%, 100%);
 
 // Greys
-$gray--900:             #333;
-$gray--800:             #444;
-$gray--700:             #555;
-$gray--600:             #666;
-$gray--500:             #747474;
-$gray--400:             #888;
-$gray--300:             #999;
-$gray--200:             #ccc;
-$gray--100:             #dedede;
-$gray--75:              #ededed;
-$grey--50:              #F5F5F5;
+// $gray--900:             hsl(214, 13%, 20%);
+// $gray--800:             hsl(214, 13%, 27%);
+// $gray--700:             hsl(214, 13%, 33%);
+// $gray--600:             hsl(214, 13%, 40%);
+// $gray--500:             hsl(214, 13%, 45%);
+// $gray--400:             hsl(214, 13%, 53%);
+// $gray--300:             hsl(214, 13%, 60%);
+// $gray--200:             hsl(214, 13%, 80%);
+// $gray--100:             hsl(214, 13%, 87%);
+// $gray--75:              hsl(214, 13%, 93%);
+// $grey--50:              hsl(214, 13%, 96%);
 
 // Extended colors
 $fernGreen:             hsla(91, 47%, 34%, 1);
@@ -116,12 +116,12 @@ $darkViolet:            hsla(280, 100%, 34%, 1);
 $navy:                  hsla(240, 100%, 25%, 1);
 
 // Panel backgrounds
-$panel-bg--00:          #fff;
-$panel-bg--01:          #f8f8f8;
-$panel-bg--02:          #f5f5f5;
-$panel-bg--03:          #ededed;
-$panel-bg--04:          #dedede;
-$panel-bg--05:          #a1a1a1;
+// $panel-bg--00:          #fff;
+// $panel-bg--01:          #f8f8f8;
+// $panel-bg--02:          #f5f5f5;
+// $panel-bg--03:          #ededed;
+// $panel-bg--04:          #dedede;
+// $panel-bg--05:          #a1a1a1;
 
 // Text specific colors
 //Subnav colours

package/app/template/search-handler.html

@@ -1,6 +1,6 @@
-<div class="flat-searchbar" ng-class="{extended: extended}">
+<div class="flat-searchbar extended">
     <div class="search-handler" ng-class="{'search-handler--left-border': borderleft}">
-        <label for="search-input" class="trigger-icon" ng-click="extended = !extended"><i class="icon-search"></i></label>
+        <label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
         <input id="search-input" type="text" placeholder="{{ :: label || 'Search' }}" ng-model="model" ng-model-options="{debounce: debounce}">
         <button class="search-close" ng-if="model.length" ng-click="clearInput()" ng-class="{visible: model.length}"><i class="icon-remove-sign"></i></button>
 

package/app-typescript/components/ContentDivider.tsx

@@ -6,6 +6,7 @@ interface IProps {
     orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
     align?: 'center' | 'left' | 'right'; // defaults to 'center'
     border?: boolean;
+    margin?: 'x-small' | 'small' |'medium' | 'large' | 'none';
     children?: React.ReactNode;
 }
 
@@ -19,6 +20,8 @@ export class ContentDivider extends React.PureComponent<IProps> {
             [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
             [`sd-content-divider--${this.props.orientation}`]:
             this.props.orientation || this.props.orientation !== undefined,
+            'sd-content-divider--margin-medium': this.props.margin === undefined,
+            [`sd-content-divider--margin-${this.props.margin}`]: this.props.margin || this.props.margin !== undefined,
         });
 
         if (this.props.children) {

package/app-typescript/components/DatePicker.tsx

@@ -10,12 +10,11 @@ import { InputWrapper } from './Form';
 export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 
 interface IDatePickerBase {
-    disabled?: boolean;
     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
     // for example [{label: 'tomorrow', days: 1}, {label: 'yesterday', days: -1}]
-    shortcuts?: Array<{days: number, label: string}>;
+    headerButtonBar?: Array<{days: number, label: string}>;
 
     // ability to provide localisation. for example (see https://primefaces.org/primereact/showcase/#/calendar):
     /*
@@ -34,6 +33,7 @@ interface IDatePickerBase {
     locale?: DatePickerLocaleSettings;
 
     // label props
+    disabled?: boolean;
     inlineLabel?: boolean;
     required?: boolean;
     fullWidth?: boolean;
@@ -180,23 +180,22 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 dateFormat={this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd')}
                 showIcon={true}
                 icon="icon-calendar"
-                headerTemplate={() => this.props.shortcuts == null ? null : (
+                headerTemplate={() => this.props.headerButtonBar == null ? null : (
                     <div
-                    style={{width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: 10}}>
-                        {this.props.shortcuts.map(({label, days}, i) => (
+                    className="datepicker-header-toolbar">
+                        {this.props.headerButtonBar.map(({label, days}, i) => (
                             <button
                                 key={i}
-                                className="btn btn--hollow btn--small"
+                                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`
@@ -234,7 +233,7 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
                 }
             }}
             disabled={this.props.disabled}
-            shortcuts={this.props.shortcuts}
+            headerButtonBar={this.props.headerButtonBar}
             dateFormat={this.props.dateFormat}
             locale={this.props.locale}
             inlineLabel={this.props.inlineLabel}

package/app-typescript/components/Dropdown.tsx

@@ -4,35 +4,42 @@ import { createPopper } from '@popperjs/core';
 import { useId } from "react-id-generator";
 
 export interface IMenuItem {
-    label: string;
+    label: string | React.ReactNode;
     icon?: string;
     active?: boolean;
     onSelect(): void;
 }
 
+interface IMenuItemRes extends IMenuItem {
+    onChange?(event?: any): void;
+}
+
 export interface ISubmenu {
     type: 'submenu';
-    label: string;
+    label: string | React.ReactNode;
     icon?: string;
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
 export interface IMenuGroup {
     type: 'group';
-    label?: string;
+    label?: string | React.ReactNode;
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
 interface IMenu {
-    label?: string;
+    label?: string | React.ReactNode;
     align?: 'left' | 'right';
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     append?: boolean;
     children: React.ReactNode;
+    onChange?(event?: any): void;
 }
 
+const DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
+
 export const Dropdown = ({
     items,
     header,
@@ -40,15 +47,13 @@ export const Dropdown = ({
     children,
     append,
     align,
+    onChange,
 }: IMenu) => {
     const [open, setOpen] = React.useState(false);
     const [change, setChange] = React.useState(false);
     const [menuID] = useId();
-    const DROPDOWN_ID = "react-placeholder";
     const ref = React.useRef(null);
-    const refSubMenu = React.useRef(null);
     const buttonRef = React.useRef(null);
-    const refButtonSubMenu = React.useRef(null);
     const headerElements = header?.map((el, index) => {
         return each(el, index);
     });
@@ -60,12 +65,12 @@ export const Dropdown = ({
     const footerElements = footer?.map((el, index) => {
         return each(el, index);
     });
+
     React.useEffect(() => {
-        const existingElement = document.getElementById(DROPDOWN_ID);
+        const existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
         if (!existingElement) {
             const el = document.createElement("div");
-            el.id = DROPDOWN_ID;
-            // style placeholder
+            el.id = DROPDOWN_ID_CONTAINER;
             el.style.position = 'absolute';
             el.style.top = '0';
             el.style.left = '0';
@@ -74,7 +79,6 @@ export const Dropdown = ({
 
             document.body.appendChild(el);
         }
-
     }, [change]);
 
     React.useLayoutEffect(() => {
@@ -82,17 +86,12 @@ export const Dropdown = ({
             addInPlaceholder();
         }
         setChange(true);
-
     }, [open]);
 
-    // structure for append menu
     function createAppendMenu() {
         if (header && footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    role='menu'
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-header'>
                         {headerElements}
                     </ul>
@@ -106,10 +105,7 @@ export const Dropdown = ({
             );
         } else if (header) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    role='menu'
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-header'>
                         {headerElements}
                     </ul>
@@ -120,10 +116,7 @@ export const Dropdown = ({
             );
         } else if (footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    role='menu'
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-body'>
                         {dropdownElements}
                     </ul>
@@ -134,17 +127,13 @@ export const Dropdown = ({
             );
         } else {
             return (
-                <ul className='dropdown__menu '
-                    id={menuID}
-                    role='menu'
-                    ref={ref}>
+                <ul className='dropdown__menu ' id={menuID} role='menu' ref={ref}>
                     {dropdownElements}
                 </ul>
             );
         }
     }
 
-    // toggle menu
     function toggleDisplay() {
         if (!open) {
             let menuRef: any;
@@ -193,14 +182,13 @@ export const Dropdown = ({
     }
 
     function addInPlaceholder() {
-        const placeholder = document.getElementById(DROPDOWN_ID);
+        const placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
         let menu = createAppendMenu();
         if (open) {
             return ReactDOM.render(menu, placeholder);
         } else {
-            const menuDOM = document.getElementById(menuID);
-            if (menuDOM) {
-                menuDOM.style.display = 'none';
+            if (placeholder) {
+                ReactDOM.unmountComponentAtNode(placeholder);
             }
         }
     }
@@ -212,33 +200,13 @@ export const Dropdown = ({
                 submenuItems.push(each(el, key));
             });
             return (
-                <li key={index}>
-                    <div className='dropdown' >
-                        <button
-                            ref={refButtonSubMenu}
-                            className='dropdown__toggle dropdown-toggle'
-                            aria-haspopup="menu"
-                            tabIndex={0}
-                            onMouseOver={() => {
-                                let subMenuRef = refSubMenu.current;
-                                let subToggleRef = refButtonSubMenu.current;
-                                if (subMenuRef && subToggleRef) {
-                                    createPopper(subToggleRef, subMenuRef, {
-                                        placement: 'right-start',
-                                    });
-                                }
-                            }}
-                            onClick={item['onSelect']}>
-                            {item['icon'] ? <i className={'icon-' + item['icon']}></i> : null}
-                            {item['label']}
-                        </button>
-                        <ul ref={refSubMenu}
-                            role='menu'
-                            className='dropdown__menu'>
-                            {submenuItems}
-                        </ul>
-                    </div>
-                </li>
+                <DropdownItemWithSubmenu
+                key={index}
+                index={index}
+                item={item}
+                menuID={menuID}
+                subMenuItems={submenuItems}
+                onChange={onChange} />
             );
         } else if (item['type'] === 'group') {
             let groupItems: any = [];
@@ -258,16 +226,18 @@ export const Dropdown = ({
         } else {
             return (
                 <DropdownItem
-                    key={index}
-                    label={item['label']}
-                    icon={item['icon']}
-                    active={item['active']}
-                    onSelect={item['onSelect']} />);
+                key={index}
+                label={item['label']}
+                icon={item['icon']}
+                active={item['active']}
+                onSelect={item['onSelect']}
+                onChange={onChange} />
+            );
         }
     }
 
     return (
-        <div className={'dropdown ' + (open ? 'open' : '')} >
+        <div className={'dropdown ' + (open ? 'open' : '')}>
             {typeof children === 'object' ?
                 (React.isValidElement(children) ?
                     <div ref={buttonRef} style={{ display: 'content' }}>
@@ -281,11 +251,11 @@ export const Dropdown = ({
                     </div> : null)
                 :
                 <button ref={buttonRef}
-                    className=' dropdown__toggle dropdown-toggle'
-                    aria-haspopup="menu"
-                    tabIndex={0}
-                    aria-expanded={open}
-                    onClick={toggleDisplay}>
+                className=' dropdown__toggle dropdown-toggle'
+                aria-haspopup="menu"
+                tabIndex={0}
+                aria-expanded={open}
+                onClick={toggleDisplay}>
                     {children}
                     <span className="dropdown__caret"></span>
                 </button>}
@@ -294,7 +264,7 @@ export const Dropdown = ({
                 null : (function() {
                     if (header && footer) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-header'>
                                     {headerElements}
                                 </ul>
@@ -308,7 +278,7 @@ export const Dropdown = ({
                         );
                     } else if (header) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-header'>
                                     {headerElements}
                                 </ul>
@@ -319,7 +289,7 @@ export const Dropdown = ({
                         );
                     } else if (footer) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-body'>
                                     {dropdownElements}
                                 </ul>
@@ -330,7 +300,7 @@ export const Dropdown = ({
                         );
                     } else {
                         return (
-                            <ul className='dropdown__menu' role='menu' ref={ref} >
+                            <ul className='dropdown__menu' role='menu' ref={ref}>
                                 {dropdownElements}
                             </ul>
                         );
@@ -341,18 +311,93 @@ export const Dropdown = ({
 };
 
 const DropdownItem = ({
-    label,
-    icon,
-    active,
-    onSelect,
-}: IMenuItem) => {
+label,
+icon,
+active,
+onSelect,
+onChange,
+}: IMenuItemRes) => {
     return (
         <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
-            <button tabIndex={0} role='menuitem' onClick={onSelect}>
+            <button tabIndex={0}
+            role='menuitem'
+            onClick={() => {
+                setTimeout(() => {
+                    onSelect();
+                });
+                if (onChange) {
+                    onChange();
+                }
+            }}>
                 <i className={icon ? ('icon-' + icon) : ''}></i>
                 {label}
             </button>
         </li>
     );
+};
+
+const DropdownItemWithSubmenu = ({
+    index,
+    item,
+    menuID,
+    subMenuItems,
+    onChange,
+}: IMenuItem | any) => {
+    const [open, setOpen] = React.useState<undefined | boolean>(undefined);
+
+    const refButtonSubMenu = React.useRef(null);
+    const refSubMenu = React.useRef(null);
+    const placeholder = document.getElementById(menuID);
 
+    React.useEffect(() => {
+        let subMenuRef: any = refSubMenu.current;
+        let subToggleRef = refButtonSubMenu.current;
+
+        if (open === true) {
+            placeholder?.appendChild(subMenuRef);
+            subMenuRef.style.display = 'block';
+        } else if (open === false) {
+            placeholder?.removeChild(subMenuRef);
+            subMenuRef.style.display = 'none';
+        }
+
+        if (subMenuRef && subToggleRef) {
+            createPopper(subToggleRef, subMenuRef, {
+                placement: 'right-start',
+            });
+        }
+    }, [open]);
+
+    return (
+        <li key={index} ref={refButtonSubMenu}>
+            <div className='dropdown'
+            onMouseLeave={() => setOpen(false)}>
+                <button
+                className='dropdown__toggle dropdown-toggle'
+                aria-haspopup="menu"
+                tabIndex={0}
+                onClick={() => {
+                    if (item.onSelect) {
+                        setTimeout(() => {
+                            item.onSelect();
+                        });
+                    }
+                    if (onChange) {
+                        onChange();
+                    }
+                }}
+                onMouseOver={() => setOpen(true) }>
+                    {item['icon'] ? <i className={'icon-' + item['icon']}></i> : null}
+                    {item['label']}
+                </button>
+                <ul
+                role='menu'
+                ref={refSubMenu}
+                style={{display: 'none'}}
+                className='dropdown__menu'>
+                    {subMenuItems}
+                </ul>
+            </div>
+        </li>
+    );
 };