superdesk-ui-framework 3.0.0-rc12 → 3.0.0

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "qcode"
+    ]
+}

package/app/fonts/sd_icons.svg

@@ -193,4 +193,5 @@
 <glyph unicode="&#xe6b7;" glyph-name="audio-cancel" d="M67.882 891.8l195.052-195.052 0.128 0.102 477.43-477.66c0.037 0.039 0.074 0.077 0.111 0.116l75.807-75.805-0.114-0.115 139.712-139.712-67.882-67.882-145.282 145.284c-48.898-33.743-104.339-58.713-164.049-72.639l-2.796-0.643v110.54c31.797 9.462 61.834 23.030 89.496 40.088l-153.496 153.496v-247.918l-320 256h-192v320h183.918l-183.918 183.918zM576 949c215.178-48.832 375.624-240.934 375.624-470.602 0-95.32-27.637-184.169-75.354-258.991l-78.258 78.258c29.502 53.629 46.29 115.232 46.29 180.733 0 168.403-110.971 311.035-263.662 358.648l-4.64 1.414zM576 694.648c79.418-39.708 134.152-121.272 134.152-216.252 0-27.892-4.72-54.628-13.4-79.473l-120.752 120.751zM512 896v-312.326l-173.516 173.514z" />
 <glyph unicode="&#xe6b8;" glyph-name="list-alt-cancel" d="M67.882 891.8l60.116-60.116 0.002 0.228 128-128-0.002-0.228 63.684-63.684h0.23l64.088-64.088-0.002-0.228 63.684-63.684h0.23l64-64h-0.23l64-64h0.23l64-64h-0.23l64-64h0.23l192.088-192.088-0.004-0.226 60.012-60.012-67.882-67.882-64.208 64.208h-631.918c-34.353 0-63.413 30.677-63.991 63.019l-0.009 0.981-0.002 631.92-127.998 127.998zM832 896c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-632.324l-184.324 184.324h56.324v64h-120.324l-63.998 64h184.322v64h-248.322l-64 64h312.322v64h-376.322l-192 192zM567.918 256l-64 64h-119.918v-64zM320 320h-64v-64h64zM439.918 384l-55.92 55.92 0.002-55.92zM320 448h-64v-64h64zM255.998 567.92l0.002-55.92h55.918z" />
 <glyph unicode="&#xe6b9;" glyph-name="post-cancel" d="M67.882 891.8l59.8-59.8 0.228 0.002 128.090-128.092v-0.228l63.68-63.68h0.228l64-64h-0.228l64-64h0.228l64-64h-0.228l64-64h0.23l128-128h-0.23l252.328-252.328-67.882-67.882-320.21 320.21-311.916-0.002-192-192v695.918l-64 64zM896 832c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-448c0-34.353-28.717-63.413-62.961-63.991l-1.039-0.009-56.326 0.002-256.002 256 184.328-0.002v64l-248.328 0.002-64 64 312.328-0.002v64l-376.328 0.002-128 128zM439.916 384.002l-64 64-119.916-0.002v-64zM311.916 512.002l-55.916 55.916v-55.918z" />
+<glyph unicode="&#xe6ba;" glyph-name="text-block" d="M896 543.95v-191.9c0-53.012-43.038-96.050-96.050-96.050h-575.9c-53.012 0-96.050 43.038-96.050 96.050v191.9c0 53.012 43.039 96.050 96.050 96.050h575.9c53.012 0 96.050-43.038 96.050-96.050zM256 384h512v128h-512zM128 768h768v128h-768zM128 0h768v128h-768z" />
 </font></defs></svg>

package/app/styles/_icon-font.scss

@@ -292,6 +292,7 @@ $sd-icon-font: (
     audio-cancel: "\e6b7",
     list-alt-cancel: "\e6b8",
     post-cancel: "\e6b9",
+    text-block: "\e6ba",
 );
 
 @each $name, $value in $sd-icon-font {

package/app/styles/_master-desk.scss

@@ -99,14 +99,14 @@ $board-header-border-color: var(--color-kanban-border);
     line-height: 1.4;
     text-transform: uppercase;
     font-weight: 400;
-    color: $gray--400;
+    color: var(--sd-colour-bg--10);
     max-width: 10rem;
     &--l {
         max-width: 14rem;
     }
     strong {
         font-weight: 500;
-        color: $gray--700;
+        color: var(--sd-colour-bg--07);
         font-size: 1.3rem;
     }
 }

package/app/styles/_modals.scss

@@ -217,6 +217,7 @@ $modal-sizes: (
             border-top: 1px solid $modal-line-color;
             text-align: end;
             min-height: $modal-footer-height;
+            display: flex;
         }
     }
     p {

package/app/styles/app.scss

@@ -69,6 +69,7 @@
 @import 'components/theme-selector';
 @import 'components/sd-dropzone';
 @import 'components/sd-notification-panel';
+@import 'components/sd-pagination';
 
 // Dropdowns
 @import 'dropdowns/basic-dropdown';

package/app/styles/components/_sd-pagination.scss

@@ -0,0 +1,41 @@
+.sd-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap--small);
+    &--align-start {
+        justify-content: flex-start;
+    }
+    &--align-end {
+        justify-content: flex-end;
+    }
+}
+.sd-pagination__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $sd-base-increment * 4;
+    min-width: $sd-base-increment * 4;
+    border-radius: var(--b-radius--full);
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    &:hover {
+        border: 1px solid var(--sd-colour-interactive--alpha-30);
+    }
+    &:active {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        border: 1px solid var(--sd-colour-interactive);
+    }
+    &--active {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        color: var(--sd-colour-interactive);
+    }
+    &:disabled,
+    &--disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+    &--more {
+        pointer-events: none;
+    }
+}

package/app/styles/grids/_grid-layout.scss

@@ -961,8 +961,8 @@ $planningEditor-width: 53rem;
     top: 0;
     bottom: 0;
     width: 0;
-    background: $panel-bg--03;
-    color: $sd-text;
+    background: var(--sd-colour-panel-bg--100);
+    color: var(--color-text);
     overflow: hidden;
     transition: all 0.1s ease-out;
     .side-panel {
@@ -971,23 +971,13 @@ $planningEditor-width: 53rem;
         transition-delay: 0;
     }
     &--left {
-        box-shadow: 2px 0px 0px 0px rgba(102, 102, 102, 1), 2px 0px 12px 0px rgba(0, 0, 0, 0.3);
+        box-shadow: 2px 0px 0px 0px hsl(0, 0%, 40%), 2px 0px 12px 0px hsla(0, 0%, 0%, 0.3);
         left:0;
     }
     &--right {
-        box-shadow: -2px 0px 0px 0px rgba(102, 102, 102, 1), -2px 0px 12px 0px rgba(0, 0, 0, 0.3);
+        box-shadow: -2px 0px 0px 0px hsl(0, 0%, 40%), -2px 0px 12px 0px hsla(0, 0%, 0%, 0.3);
         right:0;
     }
-    &--dark-ui {
-        background-color: $sd-background-darkUI;
-        color: $white;
-        &.sd-overlay-panel-2--left {
-            box-shadow: 2px 0px 12px 0px rgba(0, 0, 0, 0.3);
-        }
-        &.sd-overlay-panel-2--right {
-            box-shadow: -2px 0px 12px 0px rgba(0, 0, 0, 0.3);
-        }
-    }
     &--open {
         width:32.8rem;
         overflow: auto;

package/app/styles/menus/_sd-sidebar-menu.scss

@@ -83,7 +83,7 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 }
 
 
-.authoring-active {
+.authoring-active__item {
   .sd-sidebar-menu__btn--active {
     .sd-sidebar-menu__main-icon, .sd-sidebar-menu__helper-icon {
       color: #fff;

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

@@ -45,6 +45,18 @@
             }
 
         }
+        .datepicker-header-toolbar {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 16px;
+            gap: $sd-base-increment;
+
+            button {
+                flex: 1 1;
+            }
+        }
     }
 
     table {

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

@@ -168,6 +168,7 @@
 
 .p-dialog-maximized .p-dialog-content {
     flex-grow: 1;
+    width: 100%;
 }
 
 /* Position */
@@ -348,6 +349,9 @@
     &--l-padding {
         padding: $sd-base-increment * 4;
     }
+}
+
+.p-dialog-content-bg {
     &--default {
         background-color: transparent !important;
     }

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%);
 
 ///// ==============
 
@@ -93,17 +93,17 @@ $grayLighter:           hsl(214, 13%, 96%);
 $white:                 hsl(214, 13%, 100%);
 
 // Greys
-$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%);
+// $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/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/Layouts/CoreLayout.tsx

@@ -23,6 +23,7 @@ interface IProps {
     ariaControls?: string;
     buttonAnimation?: 'spin' | 'squeeze' | 'none';
     editorFullWidth?: boolean;
+    openPanel?: boolean;
 }
 
 export class CoreLayout extends React.PureComponent<IProps> {
@@ -44,7 +45,7 @@ export class CoreLayout extends React.PureComponent<IProps> {
                         {this.props.topMenu}
                     </CoreLayoutTopMenu>
                 )}
-                <CoreLayoutMain editorFullWidth={this.props.editorFullWidth}>
+                <CoreLayoutMain editorFullWidth={this.props.editorFullWidth} openPanel={this.props.openPanel}>
                         {this.props.children}
                 </CoreLayoutMain>
                 {this.props.footer && (

package/app-typescript/components/Layouts/CoreLayoutMain.tsx

@@ -5,6 +5,7 @@ interface IProps {
     children?: React.ReactNode;
     id?: string;
     editorFullWidth?: boolean;
+    openPanel?: boolean;
 }
 
 export class CoreLayoutMain extends React.PureComponent<IProps> {
@@ -14,7 +15,9 @@ export class CoreLayoutMain extends React.PureComponent<IProps> {
         },
     );
         return (
-            <section id={this.props.id} className={classes}>
+            <section
+            id={this.props.id}
+            className={classes + (this.props.openPanel ? ' sd-content-wrapper--editor-full' : '')}>
                 {this.props.children}
             </section>
         );

package/app-typescript/components/Lists/ContentList.tsx

@@ -20,9 +20,10 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
     private prevent = false;
 
     onSingleClick = () => {
+        let selection = window.getSelection();
         this.timer = setTimeout(() => {
-            if (!this.prevent) {
-                if (this.props.onClick) {
+            if (!this.prevent && this.props.onClick && selection) {
+                if (selection.toString().length < 1) {
                     this.props.onClick();
                 }
             }

package/app-typescript/components/Lists/TableList.tsx

@@ -252,10 +252,15 @@ class TableListItem extends React.PureComponent<IPropsItem> {
     private prevent = false;
 
     onSingleClick = () => {
+        let selection = window.getSelection();
         this.timer = setTimeout(() => {
-            if (!this.prevent) {
-                if (this.props.onClick) {
+            if (!this.prevent && this.props.onClick && selection) {
+                if (this.props.dragAndDrop) {
                     this.props.onClick();
+                } else {
+                    if (selection.toString().length < 1) {
+                        this.props.onClick();
+                    }
                 }
             }
         }, this.delay);
@@ -308,9 +313,11 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                                 {this.props.end && this.props.end}
                             </div>
                         </div>
-                        {this.props.action && <div className='table-list__slide-in-actions' onClick={this.onActionMenuClick}>
-                            {this.props.action}
-                        </div>}
+                        {this.props.action &&
+                            <div className='table-list__slide-in-actions'
+                                onClick={this.onActionMenuClick}>
+                                {this.props.action}
+                            </div>}
                     </div>
                     <div className='table-list__add-bar-container'>
                         <Tooltip text='Add item' flow='top' appendToBody={true}>
@@ -349,9 +356,11 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                             {this.props.end && this.props.end}
                         </div>
                     </div>
-                    {this.props.action && <div className='table-list__slide-in-actions' onClick={this.onActionMenuClick}>
-                        {this.props.action}
-                    </div>}
+                    {this.props.action &&
+                        <div className='table-list__slide-in-actions'
+                            onClick={this.onActionMenuClick}>
+                            {this.props.action}
+                        </div>}
                 </div>
         );
     }

package/app-typescript/components/Modal.tsx

@@ -10,7 +10,9 @@ interface IProps {
     contentBg?: 'default' | 'medium' | 'dark';
     contentPadding?: 'none' | 'small' | 'medium' | 'large';
     size?: 'small' | 'medium' | 'large' | 'x-large';
+    position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     maximized?: boolean;
+    maximizable?: boolean;
     headerTemplate?: JSX.Element | string;
     footerTemplate?: JSX.Element | string;
     closeOnEscape?: boolean;
@@ -23,8 +25,8 @@ export class Modal extends React.Component<IProps, {}> {
     render() {
         let classes = classNames({
             [`p-dialog-content--${this.props.size}`]: this.props.size,
-            'p-dialog-content--default': this.props.contentBg === undefined,
-            [`p-dialog-content--${this.props.contentBg}`]: this.props.contentBg,
+            'p-dialog-content-bg--default': this.props.contentBg === undefined,
+            [`p-dialog-content-bg--${this.props.contentBg}`]: this.props.contentBg,
             'p-dialog-content--s-padding': this.props.contentPadding === undefined,
             [`p-dialog-content--${this.props.contentPadding}`]: this.props.contentPadding,
         }, this.props.className);
@@ -38,10 +40,12 @@ export class Modal extends React.Component<IProps, {}> {
                     footer={this.props.footerTemplate}
                     closeOnEscape={this.props.closeOnEscape}
                     maximized={this.props.maximized}
+                    maximizable={this.props.maximizable}
                     contentClassName={classes}
                     onShow={this.props.onShow}
                     onHide={this.props.onHide}
                     zIndex={this.props.zIndex}
+                    position={this.props.position && this.props.position}
                 >
                     {this.props.children}
                 </PrimeDialog>

package/app-typescript/components/Navigation/SideBarMenu.tsx

@@ -4,6 +4,8 @@ import { Icon } from '../Icon';
 interface IProps {
     items: Array<IItem | 'divider'>;
     side?: 'none' | 'left' | 'right';
+    hover?: boolean;
+    onCLick?(): void;
 }
 
 interface IItem {
@@ -11,11 +13,14 @@ interface IItem {
     size: 'small' | 'big'; // defaults to 'small'
     tooltip?: string;
     active?: boolean;
+    hover?: boolean;
+    onCLick?(): void;
 }
 
 interface IState {
     index: number;
     closeIndex: number;
+    hover: boolean;
 }
 
 export class SideBarMenu extends React.PureComponent<IProps, IState> {
@@ -24,8 +29,10 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
         this.state = {
             index: -1,
             closeIndex: -1,
+            hover: this.props.hover ? this.props.hover : false,
         };
         this.handleClick = this.handleClick.bind(this);
+        this.handleArrows = this.handleArrows.bind(this);
     }
 
     handleClick(indexNumber: number) {
@@ -39,10 +46,16 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
         }
     }
 
+    handleArrows() {
+        this.setState({
+            hover: !this.state.hover,
+        });
+    }
+
     render() {
         return (
             <div className='sd-sidebar-menu sd-content-wrapper__left-tabs'>
-                <ul className='authoring-active'>
+                <ul className={'authoring-active'}>
                     {this.props.items.map((item, index) => {
                         if (item === 'divider') {
                             return (
@@ -50,9 +63,22 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
                             );
                         } else {
                             return (
-                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
-                                    <a className={'sd-sidebar-menu__btn' + (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '') + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : ''))}
-                                        onClick={() => this.handleClick(index)}>
+                                <li key={index}
+                                data-sd-tooltip={item['tooltip']}
+                                data-flow='right'
+                                className={item.hover ? 'authoring-active__item' : ''}>
+                                    <a className={'sd-sidebar-menu__btn'
+                                    + (this.state.hover ? ' sd-sidebar-menu__btn--closed ' : '')
+                                    + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : ''))}
+                                        onClick={() => {
+                                            this.handleClick(index);
+                                            if (item.hover) {
+                                                this.handleArrows();
+                                                if (item.onCLick) {
+                                                    item.onCLick();
+                                                }
+                                            }
+                                        }}>
                                         <span className='sd-sidebar-menu__main-icon '>
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>

package/app-typescript/dist/components/Alert.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface IProps {
+    type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    style?: 'filled' | 'hollow';
+    size?: 'normal' | 'small';
+    restoreIcon?: 'info' | 'help';
+}
+interface IState {
+    open: boolean;
+}
+export declare class Alert extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
+    onToggle(): void;
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Autocomplete.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+interface IProps {
+    items: Array<any>;
+    keyValue?: string;
+    minLength?: number;
+    value?: string | object;
+    label?: string;
+    placeholder?: string;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    isSearchField?: boolean;
+    listItemTemplate?(value: any): any;
+    search?(searhString: string, callback: (result: Array<any>) => void): {
+        cancel: () => void;
+    };
+    onChange(newValue: string): void;
+    onSelect?(suggestion: string): void;
+}
+interface IState {
+    selectedItem: any;
+    filteredItems: any;
+    invalid: boolean;
+    focused: boolean;
+}
+export declare class Autocomplete extends React.Component<IProps, IState> {
+    latestCall?: {
+        cancel: () => void;
+    };
+    constructor(props: IProps);
+    htmlId: string;
+    search(term: string): void;
+    searchItem(event: any): void;
+    handleChange(event: {
+        originalEvent: Event;
+        value: any;
+    }): void;
+    handleSelect(event: {
+        originalEvent: Event;
+        value: any;
+    }): void;
+    handleInputClear(): void;
+    render(): JSX.Element;
+}
+export {};