superdesk-ui-framework 3.0.82 → 3.1.1

package/app/img/DotsSmall-dark.svg

@@ -0,0 +1,14 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0Z" fill="#2C323A"/>
+<path d="M0 5C0 4.44772 0.447715 4 1 4C1.55228 4 2 4.44772 2 5C2 5.55228 1.55228 6 1 6C0.447715 6 0 5.55228 0 5Z" fill="#2C323A"/>
+<path d="M1 8C0.447715 8 0 8.44771 0 9C0 9.55229 0.447715 10 1 10C1.55228 10 2 9.55229 2 9C2 8.44771 1.55228 8 1 8Z" fill="#2C323A"/>
+<path d="M1 12C0.447715 12 0 12.4477 0 13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13C2 12.4477 1.55228 12 1 12Z" fill="#2C323A"/>
+<path d="M5 0C4.44772 0 4 0.447715 4 1C4 1.55228 4.44772 2 5 2C5.55228 2 6 1.55228 6 1C6 0.447715 5.55228 0 5 0Z" fill="#2C323A"/>
+<path d="M4 5C4 4.44772 4.44772 4 5 4C5.55228 4 6 4.44772 6 5C6 5.55228 5.55228 6 5 6C4.44772 6 4 5.55228 4 5Z" fill="#2C323A"/>
+<path d="M5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8Z" fill="#2C323A"/>
+<path d="M5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12Z" fill="#2C323A"/>
+<path d="M8 1C8 0.447715 8.44771 0 9 0C9.55228 0 10 0.447715 10 1C10 1.55228 9.55228 2 9 2C8.44771 2 8 1.55228 8 1Z" fill="#2C323A"/>
+<path d="M9 4C8.44771 4 8 4.44772 8 5C8 5.55228 8.44771 6 9 6C9.55228 6 10 5.55228 10 5C10 4.44772 9.55228 4 9 4Z" fill="#2C323A"/>
+<path d="M8 9C8 8.44771 8.44771 8 9 8C9.55228 8 10 8.44771 10 9C10 9.55229 9.55228 10 9 10C8.44771 10 8 9.55229 8 9Z" fill="#2C323A"/>
+<path d="M8 13C8 12.4477 8.44771 12 9 12C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14C8.44771 14 8 13.5523 8 13Z" fill="#2C323A"/>
+</svg>

package/app/img/OneDot.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0Z" fill="#2C323A"/>
+</svg>

package/app/styles/_design-tokens.scss

@@ -1,2 +1,3 @@
 @import 'design-tokens/design-tokens-general';
-@import 'design-tokens/new-colors';
+@import 'design-tokens/new-colors';
+@import 'design-tokens/component-tokens';

package/app/styles/_drag-handle.scss

@@ -1,24 +1,48 @@
-.drag-handle {
-    height: 30px;
-    width: 8px;
-    opacity: 0.85;
-}
 
 .drag-handle-wrapper {
-    padding: 6px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--sd-colour-line--medium);
-    border-start-start-radius: 3px;
-    border-end-start-radius: 3px;
+    transition: all 0.2s ease;
+    outline: none;
+    color: var(--color-text);
+    background-color: transparent;
+    .drag-handle-dots {
+        transition: all 0.1s ease;
+        opacity: 0.4;
+    }
     &:hover {
-        background-color: var(--sd-colour-line--strong);
         cursor: grab;
+        .drag-handle-dots {
+            opacity: 0.8;
+        }
     }
     &:active {
-        background-color: var(--sd-colour-interactive);
         cursor: grabbing;
-        opacity: 1;
+        .drag-handle-dots {
+            opacity: 1;
+        }
+    }
+    &.drag-handle-wrapper--boxed {
+        padding: var(--drag-handle-boxed-padding);
+        background-color: var(--drag-handle-boxed-color-bg-normal);
+        border-radius: var(--drag-handle-boxed-radius);
+        &:hover {
+            background-color: var(--drag-handle-boxed-color-bg-hover);
+        }
+        &:active {
+            background-color: var(--drag-handle-boxed-color-bg-active);
+            color: white;
+        }
     }
 }
+
+.drag-handle-dots {
+    mask-image: url(../img/OneDot.svg);
+    mask-repeat: repeat;
+    width: var(--handle-width);
+    height: var(--handle-height);
+    background-color: currentColor;
+    margin-block: auto;
+}
+

package/app/styles/app.scss

@@ -35,6 +35,7 @@
 @import 'spinner';
 @import 'table-list';
 @import 'hamburger';
+@import 'drag-handle';
 
 // Interface elements
 @import 'interface-elements/side-panel';

package/app/styles/design-tokens/_component-tokens.scss

@@ -0,0 +1,11 @@
+:root,
+[data-theme="dark-ui"],
+[data-theme="accessible-light-ui"],
+[data-theme="contrast-light-ui"] {
+    // Drag Handle
+    --drag-handle-boxed-color-bg-normal: var(--sd-colour-line--medium);
+    --drag-handle-boxed-color-bg-hover: var(--sd-colour-line--strong);
+    --drag-handle-boxed-color-bg-active: var(--sd-colour-interactive);
+    --drag-handle-boxed-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
+    --drag-handle-boxed-padding: var(--space--1);
+}

package/app-typescript/components/DragHandle.tsx

@@ -1,12 +1,34 @@
 import * as React from 'react';
-import '../../app/styles/_drag-handle.scss';
-import dragHandleImg from '../../app/img/dots.svg';
+import classNames from 'classnames';
+import { DragHandleDots } from './DragHandleDots';
 
-export class DragHandle extends React.PureComponent {
+interface IProps {
+    blank?: boolean;
+    dotRows?: '4' | '5' | '6' | '7' | '8' | '10';
+    dotsInRow?: '2' | '3' | '4' | '5';
+    dotColor?: 'light' | 'dark'; // The default is the theme text color, this is an explicit override.
+    className?: string;
+}
+
+const dotSize = 4; // Size of the single dot image (OneDot.svg) that gets repeated and forms the dotted pattern.
+
+export class DragHandle extends React.PureComponent<IProps> {
     render() {
+        const classes = classNames('drag-handle-wrapper', {
+            [`drag-handle-wrapper--boxed`]: !this.props.blank,
+            'drag-handle-wrapper--blank': this.props.blank,
+        }, this.props.className);
+
+        const calcSize = (numberOfDots: string) => {
+            return Number(numberOfDots) * dotSize - (dotSize / 2);
+        };
+
         return (
-            <div className="drag-handle-wrapper">
-                <img src={dragHandleImg} className="drag-handle" draggable={false} />
+            <div className={classes}>
+                <DragHandleDots
+                    style={{width: calcSize(this.props.dotsInRow ?? '2'), height: calcSize(this.props.dotRows ?? '4')}}
+                    color={this.props.dotColor}
+                />
             </div>
         );
     }

package/app-typescript/components/DragHandleDots.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    color?: 'light' | 'dark';
+    style?: any;
+}
+
+export class DragHandleDots extends React.PureComponent<IProps> {
+    render() {
+        const classes = classNames('drag-handle-dots', {
+            [`drag-handle-dots--${this.props.color}`]: this.props.color,
+        });
+
+        return (
+            <div style={this.props.style} className={classes}></div>
+        );
+    }
+}

package/app-typescript/components/Menu.tsx

@@ -150,7 +150,6 @@ export class Menu extends React.Component<IProps, {}> {
                     }}
                 >
                     <TieredMenu
-                        className='sd-overflow--y-auto max-h-full'
                         popup
                         model={this.toPrimeReactInterface(this.props.items)}
                         ref={(el) => this.menu = el}

package/app-typescript/components/TreeMenu.tsx

@@ -3,8 +3,8 @@ import { Icon } from "./Icon";
 import { createPopper, Instance } from '@popperjs/core';
 import {getPrefixedItemId, TreeSelectItem} from './TreeSelect/TreeSelectItem';
 import {keyboardNavigation} from './TreeSelect/KeyboardNavigation';
-import {createPortal} from 'react-dom';
 import {WithPortal} from './WithPortal';
+import {nameof} from '../helpers';
 
 interface IState<T> {
     options: Array<ITreeMenuNode<T>>;
@@ -48,11 +48,27 @@ interface IChildren<T> {
 export type ITreeMenuNode<T> = IParent<T> | IChildren<T>;
 
 function nodeHasChildren<T>(item: IParent<T> | IChildren<T>): item is IParent<T> {
-    return item['children'] != null;
+    return (item as unknown as any)[nameof<IParent<T>>('children')] != null;
 }
 
 function nodeCanBeSelected<T>(item: IParent<T> | IChildren<T>): item is IChildren<T> {
-    return item['onSelect'] != null;
+    return (item as unknown as any)[nameof<IChildren<T>>('onSelect')] != null;
+}
+
+function onSelect<T>(item: ITreeMenuNode<T>) {
+    if (nodeCanBeSelected(item)) {
+        return item.onSelect;
+    }
+
+    return undefined;
+}
+
+function disabledItem<T>(item: ITreeMenuNode<T>) {
+    if (nodeCanBeSelected(item)) {
+        return item.disabled;
+    }
+
+    return undefined;
 }
 
 export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
@@ -163,7 +179,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         document.addEventListener("keydown", this.onPressEsc);
     }
 
-    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
+    componentDidUpdate(_prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
         }
@@ -208,7 +224,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         }
     }
 
-    toggle(event) {
+    toggle(event: React.SyntheticEvent) {
         event.stopPropagation();
 
         this.setState({
@@ -238,7 +254,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         });
     }
 
-    handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeMenuNode<T>) {
+    handleTree(_event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeMenuNode<T>) {
         if (nodeHasChildren(option)) {
             this.handleButton(option);
             this.handleMultiLevel(option);
@@ -305,40 +321,29 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         if (filteredArr.length === 0) {
             return <li className="suggestion-item--nothing-found">Nothing found</li>;
         } else {
-            return filteredArr.map((option, i) => {
-                const onSelect = (item) => {
-                    if (nodeCanBeSelected(item)) {
-                        return item.onSelect;
-                    }
-                };
-
-                const disabledItem = (item) => {
-                    if (nodeCanBeSelected(item)) {
-                        return item.disabled;
-                    }
-                };
-
-                return (
-                    <TreeSelectItem
-                        key={i}
-                        option={option}
-                        handleTree={this.handleTree}
-                        disabledItem={disabledItem(option)}
-                        getBorderColor={this.props.getBorderColor}
-                        getBackgroundColor={this.props.getBackgroundColor}
-                        getId={this.props.getId}
-                        optionTemplate={this.props.optionTemplate}
-                        getLabel={this.props.getLabel}
-                        onClick={() => {
+            return filteredArr.map((option, i) => (
+                <TreeSelectItem
+                    key={i}
+                    option={option}
+                    handleTree={this.handleTree}
+                    disabledItem={disabledItem(option)}
+                    getBorderColor={this.props.getBorderColor}
+                    getBackgroundColor={this.props.getBackgroundColor}
+                    getId={this.props.getId}
+                    optionTemplate={this.props.optionTemplate}
+                    getLabel={this.props.getLabel}
+                    onClick={() => {
+                        if (onSelect != null) {
                             onSelect(option);
 
                             this.setState({
                                 searchFieldValue: '',
                             });
-                        }}
-                    />
-                );
-            });
+                        }
+
+                    }}
+                />
+            ));
         }
     }
 
@@ -410,40 +415,26 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
                                     ref={this.ref}
                                     className="suggestion-list suggestion-list--multi-select"
                                 >
-                                    {this.state.options.map((option, i: React.Key | undefined) => {
-                                        const onSelect = (item) => {
-                                            if (nodeCanBeSelected(item)) {
-                                                return item.onSelect;
-                                            }
-                                        };
-
-                                        const disabledItem = (item) => {
-                                            if (nodeCanBeSelected(item)) {
-                                                return item.disabled;
-                                            }
-                                        };
-
-                                        return (
-                                            <TreeSelectItem
-                                                key={i}
-                                                option={option}
-                                                handleTree={this.handleTree}
-                                                onClick={onSelect(option)}
-                                                disabledItem={disabledItem(option)}
-                                                getBorderColor={this.props.getBorderColor}
-                                                getBackgroundColor={this.props.getBackgroundColor}
-                                                getId={this.props.getId}
-                                                optionTemplate={this.props.optionTemplate}
-                                                getLabel={this.props.getLabel}
-                                                onKeyDown={() => this.setState({
-                                                    buttonTarget: [
-                                                        ...this.state.buttonTarget,
-                                                        this.props.getId(option.value),
-                                                    ],
-                                                })}
-                                            />
-                                        );
-                                    })}
+                                    {this.state.options.map((option, i: React.Key | undefined) => (
+                                        <TreeSelectItem
+                                            key={i}
+                                            option={option}
+                                            handleTree={this.handleTree}
+                                            onClick={onSelect(option)}
+                                            disabledItem={disabledItem(option)}
+                                            getBorderColor={this.props.getBorderColor}
+                                            getBackgroundColor={this.props.getBackgroundColor}
+                                            getId={this.props.getId}
+                                            optionTemplate={this.props.optionTemplate}
+                                            getLabel={this.props.getLabel}
+                                            onKeyDown={() => this.setState({
+                                                buttonTarget: [
+                                                    ...this.state.buttonTarget,
+                                                    this.props.getId(option.value),
+                                                ],
+                                            })}
+                                        />
+                                    ))}
                                 </ul>
                                 : null
                             : <ul

package/app-typescript/helpers.tsx

@@ -1,3 +1,7 @@
 export function assertNever(x: never): never {
     throw new Error('Unexpected object: ' + x);
 }
+
+export function nameof<T>(name: keyof T): string {
+    return name.toString();
+}

package/app-typescript/index.ts

@@ -93,6 +93,7 @@ export { Time } from './components/Text/Time';
 export { Heading } from './components/Text/Heading';
 export { BottomNav } from './components/Navigation/BottomNav';
 export { TreeSelect } from './components/TreeSelect/TreeSelect';
+export { TreeMenu } from './components/TreeMenu';
 export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';
@@ -100,6 +101,7 @@ export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
 export { Spacer, SpacerBlock } from './components/Spacer';
 export { ResizeObserverComponent } from './components/ResizeObserverComponent';
+export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
 
 // declare non-typescript exports to prevent errors

package/dist/OneDot.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0Z" fill="#2C323A"/>
+</svg>

package/dist/examples.bundle.css

@@ -338,6 +338,8 @@ table {
     --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
     --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
     --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
+
+    --docs-page-bg__table-tr-even: hsla(214, 13%, 50%, 0.08);
 }
 
 :root [data-theme="dark-ui"] {
@@ -1022,7 +1024,7 @@ pre.prettyprint {
 }
 
 .docs-page__container {
-    max-width: 832px;
+    max-width: 1200px;
     margin: 30px auto 0;
 }
 .docs-page__container--large {
@@ -1039,11 +1041,16 @@ pre.prettyprint {
     justify-content: center;
 }
 
+
+.docs-page__container .docs-page__code-window {
+    max-width: none !important;
+}
+
 .docs-page__container .docs-page__h2,
 .docs-page__container .docs-page__h3,
-.docs-page__container .docs-page__code-window,
-.docs-page__container .docs-page__paragraph {
-    max-width: none !important;
+.docs-page__container .docs-page__paragraph,
+.docs-page__container .docs-page__paragraph--small {
+    max-width: 85ch;
 }
 
 .docs-page__content-block {
@@ -1276,6 +1283,17 @@ doc-gif-img:hover img {
     border-color: var(--docs-page-border__table) !important;
 }
 
+.docs-page__container table tr td:nth-child(3) {
+    white-space: nowrap;
+}
+
+.docs-page__container table tr:nth-child(even),
+.docs-page__container table thead tr {
+    background-color: var(--docs-page-bg__table-tr-even);
+}
+
+
+
 
 /* -------------- END COLOR SWATCHES -------------- */
 /* -------------- PrismJS overrides -------------- */
@@ -12066,26 +12084,6 @@ doc-react-playground {
 .side-panel__top-tools--dark-blue-grey .icn-mix__icn {
   color: inherit;
   opacity: 1; }
-.drag-handle {
-  height: 30px;
-  width: 8px;
-  opacity: 0.85; }
-
-.drag-handle-wrapper {
-  padding: 6px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--sd-colour-line--medium);
-  border-start-start-radius: 3px;
-  border-end-start-radius: 3px; }
-  .drag-handle-wrapper:hover {
-    background-color: var(--sd-colour-line--strong);
-    cursor: grab; }
-  .drag-handle-wrapper:active {
-    background-color: var(--sd-colour-interactive);
-    cursor: grabbing;
-    opacity: 1; }
 @charset "UTF-8";
 .red--100 {
   background-color: #fde4e2; }