superdesk-ui-framework 3.1.8 → 3.1.12

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, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton, SubNav, NavButton } 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, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -33,6 +33,9 @@ interface IState {
     valueS2: any;
     thisTheme: string;
     isExpanded: boolean;
+    openCollapsibleOne: boolean;
+    openCollapsibleTwo: boolean;
+    openCollapsibleThree: boolean;
 }
 
 let options2 = [
@@ -75,6 +78,9 @@ export class TestGround extends React.Component<IProps, IState> {
             valueS2: undefined,
             thisTheme: 'light-ui',
             isExpanded: false,
+            openCollapsibleOne: false,
+            openCollapsibleTwo: false,
+            openCollapsibleThree: false,
         }
     }
 
@@ -153,6 +159,212 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <hr />
 
+                        <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleOne ? 'new-collapse-box--open' : ''}`}>
+                            {/* Header */}
+                            <div className='new-collapse-box__header'>
+                                <div className='new-collapse-box__header-inner'>
+                                    <div role="listitem" className="sd-list-item sd-list-item--no-hover">
+                                        <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                                        <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
+                                            <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
+                                        </div>
+                                        <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                            <div className="sd-list-item__row">
+                                                <span className="sd-list-item__slugline">Planning Slug</span>
+                                                <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                    <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
+                                                </span>
+                                            </div>
+                                            <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
+                                                <Label text='draft' style='translucent'/>
+                                                <span className="sd-margin-s--auto">
+                                                <AvatarGroup
+                                                    size="x-small"
+                                                    items={avatars}
+                                                />
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleOne: !prevState.openCollapsibleOne}))}>
+                                    <span className='label label--translucent new-collapse-box__divider-label'>
+                                        {this.state.openCollapsibleOne ? 'Show less' : 'Show more'}
+                                    </span>
+                                </button>
+                            </div>
+
+                            {/* Content */}
+                            <div className='new-collapse-box__content'>
+                                <div className='new-collapse-box__content-inner p-2 pt-0-5'>
+                                    <div>
+                                        <FormLabel text='Name'/>
+                                        <Text size='small' weight='medium'>Australian Open 2024</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='Current Date'/>
+                                        <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='Current Repeat Summary'/>
+                                        <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='No. of events'/>
+                                        <Text size='small' weight='medium'>1</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+
+                                    {/* NESTED BOX */}
+                                    <div className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleTwo ? 'new-collapse-box--open' : ''}`}>
+                                        {/* Header */}
+                                        <div className='new-collapse-box__header'>
+                                            <div className='new-collapse-box__header-inner'>
+                                                <div role="listitem" className="sd-list-item sd-list-item--no-hover">
+                                                    <div className="sd-list-item__column sd-list-item__column--no-border pe-1">
+                                                    <Avatar
+                                                        displayName="Jeffrey Lebowski"
+                                                        imageUrl={null}
+                                                        initials='JL'
+                                                        size="medium"
+                                                        icon={{name: 'photo', color: 'var(--sd-colour-highlight)'}}
+                                                    />
+
+                                                    </div>
+                                                    <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                                        <div className="sd-list-item__row">
+                                                            <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                                <span className="sd-list-item__compound-text">
+                                                                    <span className="sd-list-item__text-strong">Photo</span>
+                                                                    <span className="sd-list-item__text-light">//</span>
+                                                                    <span className="sd-list-item__text">Archive</span>
+                                                                </span>
+                                                                
+                                                            </span>
+                                                            <time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                        </div>
+                                                        <div className="sd-list-item__row sd-list-item__row--overflow-visible mb-1-5">
+                                                            <span className="sd-list-item__compound-text">
+                                                                <span className="sd-list-item__text-label">Desk:</span>
+                                                                <span>Sports</span>
+                                                            </span>
+                                                            <span className="sd-list-item__compound-text">
+                                                                <span className="sd-list-item__text-label">Assignee:</span>
+                                                                <span>Jeffrey Lebowski</span>
+                                                            </span>
+                                                            <span className='sd-margin-s--auto'>
+                                                                <Label text='in progress' style='translucent' type='success'/>
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleTwo: !prevState.openCollapsibleTwo}))}>
+                                                <span className='label label--translucent new-collapse-box__divider-label'>
+                                                    {this.state.openCollapsibleTwo ? 'Show less' : 'Show more'}
+                                                </span>
+                                            </button>
+                                        </div>
+
+                                        {/* Content */}
+                                        <div className='new-collapse-box__content'>
+                                            <div className='new-collapse-box__content-inner p-2 pt-0-5'>
+                                                <div>
+                                                    <FormLabel text='Name'/>
+                                                    <Text size='small' weight='medium'>Australian Open 2024</Text>
+                                                </div>
+                                                <ContentDivider type="dashed" margin='x-small' />
+                                                <div>
+                                                    <FormLabel text='Current Date'/>
+                                                    <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                                                </div>
+                                                <ContentDivider type="dashed" margin='x-small' />
+                                                <div>
+                                                    <FormLabel text='Current Repeat Summary'/>
+                                                    <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                                                </div>
+                                                <ContentDivider type="dashed" margin='x-small' />
+                                                <div>
+                                                    <FormLabel text='No. of events'/>
+                                                    <Text size='small' weight='medium'>1</Text>
+                                                </div>
+                                                {/* <ContentDivider type="dashed" margin='x-small' /> */}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Second Collapsible */}
+
+                        <div style={{maxWidth: '600px'}} className={`mt-2 sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleThree ? 'new-collapse-box--open' : ''}`}>
+                            {/* Header */}
+                            <div className='new-collapse-box__header'>
+                                <div className='new-collapse-box__header-inner'>
+                                    <div role="listitem" className="sd-list-item sd-list-item--no-hover">
+                                        <div className="sd-list-item__border sd-list-item__border--active"></div>
+                                        <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
+                                            <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
+                                        </div>
+                                        <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                            <div className="sd-list-item__row">
+                                                <span className="sd-list-item__slugline">Planning Item Slug</span>
+                                                <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                    <span className="sd-list-item__text-strong">Aenean eu leo quam. Pellentesque ornare sem lacinia quam</span>
+                                                </span>
+                                            </div>
+                                            <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
+                                                <Label text='in progress' type='success' style='translucent'/>
+                                                <span className="sd-margin-s--auto">
+                                                <AvatarGroup
+                                                    size="x-small"
+                                                    items={avatars}
+                                                />
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleThree: !prevState.openCollapsibleThree}))}>
+                                    <span className='label label--translucent new-collapse-box__divider-label'>
+                                        {this.state.openCollapsibleThree ? 'Show less' : 'Show more'}
+                                    </span>
+                                </button>
+                            </div>
+
+                            {/* Content */}
+                            <div className='new-collapse-box__content'>
+                                <div className='new-collapse-box__content-inner p-2 pt-0-5'>
+                                    <div>
+                                        <FormLabel text='Name'/>
+                                        <Text size='small' weight='medium'>Australian Open 2024</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='Current Date'/>
+                                        <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='Current Repeat Summary'/>
+                                        <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='No. of events'/>
+                                        <Text size='small' weight='medium'>1</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                </div>
+                            </div>
+                        </div>
+
+                        <hr />
+
                         <SubNav color='darker'>
                             <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
                                 <button 
@@ -162,7 +374,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <Icon name='chevron-left-thin' />
                                 </button>
                             </Tooltip>
-                            <div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
+                            <div className='text-2xs text-uppercase d-flex ms-2 gap-0-5'>
                                 <span className='font-medium'>News desk</span>
                                 <span className='font-light text-color-subdued'>/</span>
                                 <span className='text-color-muted'>Working stage</span>

package/examples/pages/playgrounds.html

@@ -8,6 +8,7 @@
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
+    <doc-theme-picker></doc-theme-picker>
 </header>
 <main class="docs-page__content">
     <div class="docs-page__hero sd-margin-b--0">

package/package.json

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

package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IPropsCustomHeader } from "../ToggleBox/index";
+interface IState {
+    isOpen: boolean;
+}
+export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
+    constructor(props: IPropsCustomHeader);
+    toggle: () => void;
+    render(): JSX.Element;
+}
+export {};

package/react/components/ToggleBox/CustomHeaderToggleBox.js

@@ -0,0 +1,78 @@
+"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.CustomHeaderToggleBox = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var CustomHeaderToggleBox = /** @class */ (function (_super) {
+    __extends(CustomHeaderToggleBox, _super);
+    function CustomHeaderToggleBox(props) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, props) || this;
+        _this.toggle = function () {
+            _this.setState({ isOpen: !_this.state.isOpen }, function () {
+                var _a, _b;
+                (_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
+            });
+        };
+        _this.state = {
+            isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
+        };
+        return _this;
+    }
+    CustomHeaderToggleBox.prototype.render = function () {
+        var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
+            'new-collapse-box--open': this.state.isOpen,
+        });
+        return (React.createElement("div", { className: classes, "data-test-id": 'toggle-box' },
+            React.createElement("div", { className: 'new-collapse-box__header' },
+                React.createElement("div", { className: 'new-collapse-box__header-inner' }, this.props.header),
+                React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle },
+                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
+            React.createElement("div", { className: 'new-collapse-box__content' },
+                React.createElement("div", { className: 'new-collapse-box__content-inner p-2 pt-0-5' }, this.props.children))));
+    };
+    return CustomHeaderToggleBox;
+}(React.PureComponent));
+exports.CustomHeaderToggleBox = CustomHeaderToggleBox;

package/react/components/ToggleBox/SimpleToggleBox.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IPropsSimple } from "../ToggleBox/index";
+interface IState {
+    isOpen: boolean;
+}
+/**
+ * @ngdoc react
+ * @name ToggleBox
+ * @description ToggleBox used to open/close a set of details
+ */
+export declare class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
+    htmlId: string;
+    constructor(props: IPropsSimple);
+    handleKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    toggle: () => void;
+    render(): JSX.Element;
+}
+export {};

package/react/components/{Togglebox.js → ToggleBox/SimpleToggleBox.js}

@@ -41,7 +41,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleBox = void 0;
+exports.SimpleToggleBox = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
@@ -50,9 +50,9 @@ var react_id_generator_1 = __importDefault(require("react-id-generator"));
  * @name ToggleBox
  * @description ToggleBox used to open/close a set of details
  */
-var ToggleBox = /** @class */ (function (_super) {
-    __extends(ToggleBox, _super);
-    function ToggleBox(props) {
+var SimpleToggleBox = /** @class */ (function (_super) {
+    __extends(SimpleToggleBox, _super);
+    function SimpleToggleBox(props) {
         var _this = this;
         var _a;
         _this = _super.call(this, props) || this;
@@ -83,7 +83,7 @@ var ToggleBox = /** @class */ (function (_super) {
         };
         return _this;
     }
-    ToggleBox.prototype.render = function () {
+    SimpleToggleBox.prototype.render = function () {
         var _a;
         var classes = (0, classnames_1.default)('toggle-box', (_a = {
                 'toggle-box--margin-normal': this.props.margin === undefined
@@ -104,6 +104,6 @@ var ToggleBox = /** @class */ (function (_super) {
                 isOpen && !hideUsingCSS && (React.createElement("div", { className: "toggle-box__content", "aria-describedby": "togglebox-".concat(this.htmlId) }, children)),
                 hideUsingCSS && (React.createElement("div", { className: (0, classnames_1.default)('toggle-box__content', { 'toggle-box__content--hidden': !isOpen }), "aria-describedby": "togglebox-".concat(this.htmlId) }, children)))));
     };
-    return ToggleBox;
+    return SimpleToggleBox;
 }(React.PureComponent));
-exports.ToggleBox = ToggleBox;
+exports.SimpleToggleBox = SimpleToggleBox;

package/react/components/ToggleBox/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface IPropsSimple {
+    variant: 'simple';
+    title: string;
+    badge?: JSX.Element;
+    children: React.ReactNode;
+    hideUsingCSS?: boolean;
+    initiallyOpen?: boolean;
+    className?: string;
+    margin?: 'none' | 'small' | 'normal' | 'large';
+    onOpen?(): void;
+    onClose?(): void;
+}
+export interface IPropsCustomHeader {
+    variant: 'custom-header';
+    header: React.ReactNode;
+    children: React.ReactNode;
+    toggleButtonLabel: string;
+    initiallyOpen?: boolean;
+    onToggle?(isOpen: boolean): void;
+}
+type IProps = IPropsSimple | IPropsCustomHeader;
+export declare class ToggleBox extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/ToggleBox/index.js

@@ -0,0 +1,71 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleBox = void 0;
+var React = __importStar(require("react"));
+var SimpleToggleBox_1 = require("./SimpleToggleBox");
+var CustomHeaderToggleBox_1 = require("./CustomHeaderToggleBox");
+var ToggleBox = /** @class */ (function (_super) {
+    __extends(ToggleBox, _super);
+    function ToggleBox() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ToggleBox.prototype.render = function () {
+        if (this.props.variant === "simple") {
+            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({}, this.props)));
+        }
+        else {
+            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({}, this.props)));
+        }
+    };
+    return ToggleBox;
+}(React.PureComponent));
+exports.ToggleBox = ToggleBox;

package/react/components/TreeMenu.js

@@ -63,7 +63,7 @@ function nodeCanBeSelected(item) {
 }
 function onSelect(item) {
     if (nodeCanBeSelected(item)) {
-        return item.onSelect;
+        return item.onSelect();
     }
     return undefined;
 }
@@ -325,7 +325,9 @@ var TreeMenu = /** @class */ (function (_super) {
                                     : this.props.getLabel(this.state.buttonValue.value)))),
                     this.state.searchFieldValue === '' ?
                         this.props.getOptions ?
-                            React.createElement("ul", { ref: this.ref, className: "suggestion-list suggestion-list--multi-select" }, this.state.options.map(function (option, i) { return (React.createElement(TreeSelectItem_1.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: function () { return _this.setState({
+                            React.createElement("ul", { ref: this.ref, className: "suggestion-list suggestion-list--multi-select" }, this.state.options.map(function (option, i) { return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, onClick: function () {
+                                    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: function () { return _this.setState({
                                     buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
                                         _this.props.getId(option.value),
                                     ], false),

package/react/index.d.ts

@@ -63,7 +63,7 @@ export { GridList } from './components/GridList';
 export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper } from './components/GridItem';
 export { toasted } from './components/Toast';
 export { Menu } from './components/Menu';
-export { ToggleBox } from './components/Togglebox';
+export { ToggleBox } from './components/ToggleBox/index';
 export { SelectGrid } from './components/SelectGrid';
 export { IconPicker } from './components/IconPicker';
 export { ThemeSelector } from './components/ThemeSelector';

package/react/index.js

@@ -166,8 +166,8 @@ var Toast_1 = require("./components/Toast");
 Object.defineProperty(exports, "toasted", { enumerable: true, get: function () { return Toast_1.toasted; } });
 var Menu_1 = require("./components/Menu");
 Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
-var Togglebox_1 = require("./components/Togglebox");
-Object.defineProperty(exports, "ToggleBox", { enumerable: true, get: function () { return Togglebox_1.ToggleBox; } });
+var index_1 = require("./components/ToggleBox/index");
+Object.defineProperty(exports, "ToggleBox", { enumerable: true, get: function () { return index_1.ToggleBox; } });
 var SelectGrid_1 = require("./components/SelectGrid");
 Object.defineProperty(exports, "SelectGrid", { enumerable: true, get: function () { return SelectGrid_1.SelectGrid; } });
 var IconPicker_1 = require("./components/IconPicker");

package/react/components/Togglebox.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    title: string;
-    badge?: JSX.Element;
-    children: any;
-    hideUsingCSS?: boolean;
-    initiallyOpen?: boolean;
-    className?: string;
-    margin?: 'none' | 'small' | 'normal' | 'large';
-    onOpen?(): void;
-    onClose?(): void;
-}
-interface IState {
-    isOpen: boolean;
-}
-/**
- * @ngdoc react
- * @name ToggleBox
- * @description ToggleBox used to open/close a set of details
- */
-export declare class ToggleBox extends React.PureComponent<IProps, IState> {
-    htmlId: string;
-    constructor(props: IProps);
-    handleKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
-    toggle: () => void;
-    render(): JSX.Element;
-}
-export {};