superdesk-ui-framework 3.0.82 → 3.1.1

package/examples/css/docs-page.css

@@ -19,6 +19,8 @@
     --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"] {
@@ -703,7 +705,7 @@ pre.prettyprint {
 }
 
 .docs-page__container {
-    max-width: 832px;
+    max-width: 1200px;
     margin: 30px auto 0;
 }
 .docs-page__container--large {
@@ -720,11 +722,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 {
@@ -957,6 +964,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 -------------- */

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton} from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -145,10 +145,6 @@ export class TestGround extends React.Component<IProps, IState> {
                             <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
                         </ButtonGroup>
 
-                        <hr />
-                        <SvgIconIllustration illustration='headlines' />
-                        <hr />
-
                         <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
                             
                             <IllustrationButton text='Headlines' onClick={()=> false}>
@@ -171,41 +167,6 @@ export class TestGround extends React.Component<IProps, IState> {
                                 <SvgIconIllustration illustration='translate' />
                             </IllustrationButton>
 
-                            {/* <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='headlines' />
-                                <span className='illustration-button__text-label'>
-                                    Headlines
-                                </span>
-                            </button>
-
-                            <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='keywords' />
-                                <span className='illustration-button__text-label'>
-                                    Keywords
-                                </span>
-                            </button>
-
-                            <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='optimise' />
-                                <span className='illustration-button__text-label'>
-                                    Optimise
-                                </span>
-                            </button>
-
-                            <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='summary' />
-                                <span className='illustration-button__text-label'>
-                                    Summary
-                                </span>
-                            </button>
-
-                            <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='translate' />
-                                <span className='illustration-button__text-label'>
-                                    Translate
-                                </span>
-                            </button> */}
-
                         </div>
 
                         <hr />

package/examples/pages/react/DragHandleDocs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {DragHandle} from '../../../app-typescript';
+import {DragHandle, Prop, PropsList } from '../../../app-typescript';
 import * as Markup from '../../js/react';
 
 export default class DragHandleDocs extends React.Component {
@@ -13,13 +13,79 @@ export default class DragHandleDocs extends React.Component {
                 </Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Default</p>
                         <div className="docs-page__content-row">
                             <DragHandle />
                         </div>
+                        <p className="mt-2 docs-page__paragraph">// Some size examples</p>
+                        <p className="docs-page__paragraph--small">
+                            The number of dotted rows and dots in each row can be adjusted independently,
+                            offering a wide range of size options.
+                        </p>
+                        <div className="docs-page__content-row">
+                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                                <DragHandle dotsInRow='2' dotRows='5' />
+                                <DragHandle dotsInRow='2' dotRows='8' />
+                                <DragHandle dotsInRow='3' dotRows='6' />
+                                <DragHandle dotsInRow='3' dotRows='8' />
+                                <DragHandle dotsInRow='3' dotRows='10' />
+                                <DragHandle dotsInRow='5' dotRows='4' />
+                            </div>
+
+                        </div>
+                        <p className="docs-page__paragraph">// Blank</p>
+                        <p className="docs-page__paragraph--small">
+                            This option will remove all default styles from the components container, like padding and background color.
+                            To be used within list items, draggable labels, and similar contexts.
+                        </p>
+                        <div className="docs-page__content-row">
+                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                                <DragHandle blank={true} />
+                                <DragHandle dotsInRow='2' dotRows='10' blank={true} />
+                                <DragHandle dotsInRow='4' dotRows='10' blank={true} />
+                                <DragHandle dotsInRow='5' dotRows='4' blank={true} />
+                                <DragHandle dotsInRow='3' dotRows='4' blank={true} />
+                                
+                            </div>
+                        </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{'<DragHandle />'}
+                    <Markup.ReactMarkupCode>{`
+                    // Default
+                    <DragHandle />
+
+                    // Some size examples
+                    // The number of dotted rows and dots in each row can be adjusted independently,
+                    offering a wide range of size options.   
+                    
+                    <DragHandle dotsInRow='2' dotsInCol='5' />
+                    <DragHandle dotsInRow='2' dotsInCol='8' />
+                    <DragHandle dotsInRow='3' dotsInCol='6' />
+                    <DragHandle dotsInRow='3' dotsInCol='8' />
+                    <DragHandle dotsInRow='3' dotsInCol='10' />
+                    <DragHandle dotsInRow='5' dotRows='4' />
+
+                    // Blank
+                    // This option will remove all default styles from the components container, like padding and background color.
+                    To be used within list items, draggable labels, and similar contexts.
+
+                    <DragHandle blank={true} />
+                    <DragHandle dotsInRow='2' dotRows='10' blank={true} />
+                    <DragHandle dotsInRow='4' dotRows='10' blank={true} />
+                    <DragHandle dotsInRow='5' dotRows='4' blank={true} />
+                    <DragHandle dotsInRow='3' dotRows='4' blank={true} />
+
+                    `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='blank' isRequired={false} type='boolean' default='false' description='Set to true to remove all the default styling from the wrapper, leaving only the dots exposed. This should be applied if the drag handle is used in list items, draggable labels, or similar contexts.'/>
+                    <Prop name='dotRows' isRequired={false} type='4 | 5 | 6 | 7 | 8 | 10' default='4' description='Set the number of dotted rows and, as a result, the height of the drag handle.'/>
+                    <Prop name='dotsInRow' isRequired={false} type='2 | 3 | 4 | 5' default='2' description='Set the number of dots in the row. This will also affect the overall wdth of the component.'/>
+                    <Prop name='dotColor' isRequired={false} type='light | dark' default='currentColor' description='The dots are using the theme text color by default, so this option should be used in rare cases where there is a need to explicitly change this.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add custom classes to modify or override the default styles of the component.'/>
+                </PropsList>
             </section>
         );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.82",
+  "version": "3.1.1",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/DragHandle.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import '../../app/styles/_drag-handle.scss';
-export declare class DragHandle extends React.PureComponent {
+interface IProps {
+    blank?: boolean;
+    dotRows?: '4' | '5' | '6' | '7' | '8' | '10';
+    dotsInRow?: '2' | '3' | '4' | '5';
+    dotColor?: 'light' | 'dark';
+    className?: string;
+}
+export declare class DragHandle extends React.PureComponent<IProps> {
     render(): JSX.Element;
 }
+export {};

package/react/components/DragHandle.js

@@ -43,16 +43,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DragHandle = void 0;
 var React = __importStar(require("react"));
-require("../../app/styles/_drag-handle.scss");
-var dots_svg_1 = __importDefault(require("../../app/img/dots.svg"));
+var classnames_1 = __importDefault(require("classnames"));
+var DragHandleDots_1 = require("./DragHandleDots");
+var dotSize = 4; // Size of the single dot image (OneDot.svg) that gets repeated and forms the dotted pattern.
 var DragHandle = /** @class */ (function (_super) {
     __extends(DragHandle, _super);
     function DragHandle() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DragHandle.prototype.render = function () {
-        return (React.createElement("div", { className: "drag-handle-wrapper" },
-            React.createElement("img", { src: dots_svg_1.default, className: "drag-handle", draggable: false })));
+        var _a;
+        var _b, _c;
+        var classes = (0, classnames_1.default)('drag-handle-wrapper', (_a = {},
+            _a["drag-handle-wrapper--boxed"] = !this.props.blank,
+            _a['drag-handle-wrapper--blank'] = this.props.blank,
+            _a), this.props.className);
+        var calcSize = function (numberOfDots) {
+            return Number(numberOfDots) * dotSize - (dotSize / 2);
+        };
+        return (React.createElement("div", { className: classes },
+            React.createElement(DragHandleDots_1.DragHandleDots, { style: { width: calcSize((_b = this.props.dotsInRow) !== null && _b !== void 0 ? _b : '2'), height: calcSize((_c = this.props.dotRows) !== null && _c !== void 0 ? _c : '4') }, color: this.props.dotColor })));
     };
     return DragHandle;
 }(React.PureComponent));

package/react/components/DragHandleDots.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    color?: 'light' | 'dark';
+    style?: any;
+}
+export declare class DragHandleDots extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/DragHandleDots.js

@@ -0,0 +1,61 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragHandleDots = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var DragHandleDots = /** @class */ (function (_super) {
+    __extends(DragHandleDots, _super);
+    function DragHandleDots() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DragHandleDots.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('drag-handle-dots', (_a = {},
+            _a["drag-handle-dots--".concat(this.props.color)] = this.props.color,
+            _a));
+        return (React.createElement("div", { style: this.props.style, className: classes }));
+    };
+    return DragHandleDots;
+}(React.PureComponent));
+exports.DragHandleDots = DragHandleDots;

package/react/components/Menu.js

@@ -119,7 +119,7 @@ var Menu = /** @class */ (function (_super) {
                         }
                     }
                 } },
-                React.createElement(tieredmenu_1.TieredMenu, { className: 'sd-overflow--y-auto max-h-full', popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
+                React.createElement(tieredmenu_1.TieredMenu, { popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
                         _this.focusedBefore = document.activeElement;
                         var firstMenuItem = document.querySelectorAll('.p-tieredmenu [role="menuitem"]')[0];
                         if (firstMenuItem instanceof HTMLElement) {

package/react/components/TreeMenu.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+interface IState<T> {
+    options: Array<ITreeMenuNode<T>>;
+    openDropdown: boolean;
+    activeTree: Array<Array<ITreeMenuNode<T>>>;
+    buttonTree: Array<ITreeMenuNode<T>>;
+    buttonValue: ITreeMenuNode<T> | null;
+    filterArr: Array<ITreeMenuNode<T>>;
+    searchFieldValue: string;
+    firstBranchOptions: Array<ITreeMenuNode<T>>;
+    buttonTarget: Array<string>;
+}
+interface IProps<T> {
+    zIndex?: number;
+    searchPlaceholder?: string;
+    singleLevelSearch?: boolean;
+    'data-test-id'?: string;
+    getOptions?(): Array<ITreeMenuNode<T>>;
+    getLabel(item: T): string;
+    getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
+    optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    children: (toggle: (event: React.SyntheticEvent) => void) => JSX.Element;
+}
+interface IParent<T> {
+    value: T;
+    children: Array<ITreeMenuNode<T>>;
+}
+interface IChildren<T> {
+    value: T;
+    disabled?: boolean;
+    onSelect(): void;
+}
+export type ITreeMenuNode<T> = IParent<T> | IChildren<T>;
+export declare class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
+    private dropdownRef;
+    private ref;
+    private openDropdownRef;
+    private treeMenuRef;
+    private inputRef;
+    private popperInstance;
+    constructor(props: IProps<T>);
+    inputFocus: () => void;
+    listNavigation: () => void;
+    onMouseDown: (event: MouseEvent) => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+    onPressEsc: (event: KeyboardEvent) => void;
+    componentDidMount: () => void;
+    componentWillUnmount(): void;
+    componentDidUpdate(_prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
+    toggleMenu(): void;
+    toggle(event: React.SyntheticEvent): void;
+    handleMultiLevel(item: ITreeMenuNode<T>): void;
+    handleButton(item: ITreeMenuNode<T>): void;
+    handleTree(_event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeMenuNode<T>): void;
+    backButton(): void;
+    recursion(arr: Array<ITreeMenuNode<T>>): void;
+    filteredItem(arr: Array<ITreeMenuNode<T>>): JSX.Element | JSX.Element[];
+    render(): JSX.Element;
+}
+export {};