superdesk-ui-framework 3.1.9 → 3.1.13

package/react/components/ToggleBox/CustomHeaderToggleBox.js

@@ -0,0 +1,81 @@
+"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 react_id_generator_1 = __importDefault(require("react-id-generator"));
+var CustomHeaderToggleBox = /** @class */ (function (_super) {
+    __extends(CustomHeaderToggleBox, _super);
+    function CustomHeaderToggleBox(props) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
+        _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,
+        });
+        var isOpen = this.state.isOpen;
+        return (React.createElement("div", { className: classes, "aria-expanded": isOpen, "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, "aria-controls": this.htmlId },
+                    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", { id: this.htmlId, "aria-hidden": !isOpen, 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,13 +50,13 @@ 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;
-        _this.htmlId = (0, react_id_generator_1.default)();
+        _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
         _this.handleKeyDown = function (event) {
             if (event.key === "ArrowRight" && !_this.state.isOpen) {
                 _this.setState({ isOpen: true });
@@ -83,27 +83,29 @@ 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
+                'toggle-box--margin-normal': this.props.margin === undefined,
+                'toggle-box--large-title': this.props.largeTitle,
+                'toggle-box--circle': this.props.circledChevron
             },
             _a["toggle-box--margin-".concat(this.props.margin)] = this.props.margin,
             _a['hidden'] = !this.state.isOpen,
+            _a['open'] = this.state.isOpen,
             _a), this.props.className);
-        var _b = this.props, title = _b.title, hideUsingCSS = _b.hideUsingCSS, children = _b.children, badge = _b.badge;
+        var _b = this.props, title = _b.title, children = _b.children, badge = _b.badge;
         var isOpen = this.state.isOpen;
         return (React.createElement("div", { className: classes },
-            React.createElement("a", { className: "toggle-box__header", onClick: this.toggle, role: "button", tabIndex: 0, onKeyDown: this.handleKeyDown, id: "togglebox-".concat(this.htmlId) },
+            React.createElement("a", { className: "toggle-box__header", onClick: this.toggle, role: "button", tabIndex: 0, onKeyDown: this.handleKeyDown, "aria-expanded": isOpen, "aria-controls": this.htmlId },
                 React.createElement("div", { className: "toggle-box__chevron" },
                     React.createElement("i", { className: "icon-chevron-right-thin" })),
                 React.createElement("div", { className: "toggle-box__label" }, title),
                 React.createElement("div", { className: "toggle-box__line" }),
                 badge ? badge : null),
             React.createElement("div", { className: "toggle-box__content-wraper" },
-                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)))));
+                React.createElement("div", { id: this.htmlId, className: "toggle-box__content", "aria-hidden": !isOpen }, children))));
     };
-    return ToggleBox;
+    return SimpleToggleBox;
 }(React.PureComponent));
-exports.ToggleBox = ToggleBox;
+exports.SimpleToggleBox = SimpleToggleBox;

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface IPropsSimple {
+    variant: 'simple';
+    title: string;
+    badge?: JSX.Element;
+    children: React.ReactNode;
+    circledChevron?: boolean;
+    initiallyOpen?: boolean;
+    largeTitle?: 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;
 }
@@ -248,11 +248,9 @@ var TreeMenu = /** @class */ (function (_super) {
             });
         }
         var item = this.state.buttonTree.pop();
-        if (item != null) {
-            this.setState({
-                buttonValue: item,
-            });
-        }
+        this.setState({
+            buttonValue: item !== null && item !== void 0 ? item : null,
+        });
     };
     TreeMenu.prototype.recursion = function (arr) {
         var _this = this;
@@ -325,7 +323,11 @@ 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", role: 'tree' }, 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, parentCategory: _this.state.buttonValue == null
+                                    ? undefined
+                                    : _this.props.getLabel(_this.state.buttonValue.value), 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/components/TreeSelect/TreeSelect.js

@@ -403,11 +403,9 @@ var TreeSelect = /** @class */ (function (_super) {
             });
         }
         var item = this.state.buttonTree.pop();
-        if (item != null) {
-            this.setState({
-                buttonValue: item,
-            });
-        }
+        this.setState({
+            buttonValue: item !== null && item !== void 0 ? item : null,
+        });
     };
     TreeSelect.prototype.recursion = function (arr) {
         var _this = this;
@@ -576,7 +574,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                         searchFieldValue: '',
                                     });
                                 }
-                            }, "data-test-id": "open-popover" },
+                            }, "data-test-id": "open-popover", "aria-haspopup": "tree", "aria-expanded": this.state.openDropdown },
                             React.createElement("i", { className: "icon-plus-large" })),
                     React.createElement(ListWrapper, null, this.state.value.map(function (item, i) {
                         var Wrapper = function (_a) {
@@ -632,9 +630,7 @@ var TreeSelect = /** @class */ (function (_super) {
                         width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
                     }, ref: this.dropdownRef },
                     React.createElement("div", { className: 'autocomplete__header' },
-                        React.createElement("div", { className: "autocomplete__icon", onClick: function () {
-                                _this.backButton();
-                            } },
+                        React.createElement("div", { className: "autocomplete__icon" },
                             React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
                         React.createElement("div", { className: 'autocomplete__filter' },
                             React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
@@ -676,11 +672,13 @@ var TreeSelect = /** @class */ (function (_super) {
                             React.createElement(Loader_1.Loader, { overlay: true }))
                         : this.state.searchFieldValue === ''
                             ? this.props.getOptions
-                                ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options" }, this.state.options.map(function (option, i) {
+                                ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: 'tree', "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
                                     var selectedItem = _this.state.value.some(function (obj) {
                                         return _this.props.getId(obj) === _this.props.getId(option.value);
                                     });
-                                    return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, selectedItem: selectedItem, allowMultiple: _this.props.allowMultiple, 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({
+                                    return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, selectedItem: selectedItem, allowMultiple: _this.props.allowMultiple, parentCategory: _this.state.buttonValue == null
+                                            ? undefined
+                                            : _this.props.getLabel(_this.state.buttonValue.value), getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, getLabel: _this.props.getLabel, optionTemplate: _this.props.optionTemplate, onKeyDown: function () { return _this.setState({
                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
                                                 _this.props.getId(option.value),
                                             ], false),

package/react/components/TreeSelect/TreeSelectItem.d.ts

@@ -6,6 +6,7 @@ interface IProps<T> {
     selectedItem?: boolean;
     disabledItem?: boolean;
     allowMultiple?: boolean;
+    parentCategory?: string | undefined;
     handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): any;
     getLabel(item: T): string;
     getId(item: T): string;

package/react/components/TreeSelect/TreeSelectItem.js

@@ -53,7 +53,10 @@ var TreeSelectItem = /** @class */ (function (_super) {
     }
     TreeSelectItem.prototype.render = function () {
         var _this = this;
-        return (React.createElement("li", { className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
+        var ariaLabel = this.props.parentCategory !== undefined
+            ? "".concat(this.props.getLabel(this.props.option.value), ", parent ").concat(this.props.parentCategory)
+            : this.props.getLabel(this.props.option.value);
+        return (React.createElement("li", { className: 'suggestion-item suggestion-item--multi-select', role: 'none', onClick: function (event) {
                 var _a, _b;
                 if (!_this.props.disabledItem) {
                     (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -70,7 +73,7 @@ var TreeSelectItem = /** @class */ (function (_super) {
                     if (event.key === 'Enter' && _this.props.option.children) {
                         (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
-                }, disabled: this.props.disabledItem, "data-test-id": "option" },
+                }, disabled: this.props.disabledItem, "data-test-id": "option", role: 'treeItem', "aria-selected": this.props.selectedItem === true, "aria-disabled": this.props.disabledItem === true },
                 (this.props.getBorderColor && !this.props.allowMultiple)
                     && React.createElement("div", { className: "item-border", style: {
                             backgroundColor: this.props.getBorderColor(this.props.option.value),
@@ -81,11 +84,11 @@ var TreeSelectItem = /** @class */ (function (_super) {
                             backgroundColor: this.props.getBackgroundColor(this.props.option.value),
                             color: (0, Label_1.getTextColor)(this.props.getBackgroundColor(this.props.option.value)),
                         }
-                        : undefined }, this.props.optionTemplate
+                        : undefined, "aria-label": ariaLabel }, this.props.optionTemplate
                     ? this.props.optionTemplate(this.props.option.value)
                     : this.props.getLabel(this.props.option.value)),
                 this.props.option.children
-                    && React.createElement("span", { className: "suggestion-item__icon" },
+                    && React.createElement("span", { className: "suggestion-item__icon", "aria-hidden": "true" },
                         React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
     };
     return TreeSelectItem;

package/react/index.d.ts

@@ -24,6 +24,7 @@ export { DatePicker } from './components/DatePicker';
 export { DatePickerISO } from './components/DatePicker';
 export { DatePickerLocaleSettings } from './components/DatePicker';
 export { TimePicker } from './components/TimePicker';
+export { TimePickerV2 } from './components/TimePickerV2';
 export { FormLabel } from './components/FormLabel';
 export { Switch } from './components/Switch';
 export { SwitchGroup } from './components/SwitchGroup';
@@ -63,7 +64,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

@@ -16,9 +16,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
-exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.IllustrationButton = exports.SvgIconIllustration = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = void 0;
-exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = void 0;
+exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePickerV2 = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
+exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.IllustrationButton = exports.SvgIconIllustration = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = void 0;
+exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = exports.Heading = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -70,6 +70,8 @@ var DatePicker_2 = require("./components/DatePicker");
 Object.defineProperty(exports, "DatePickerISO", { enumerable: true, get: function () { return DatePicker_2.DatePickerISO; } });
 var TimePicker_1 = require("./components/TimePicker");
 Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return TimePicker_1.TimePicker; } });
+var TimePickerV2_1 = require("./components/TimePickerV2");
+Object.defineProperty(exports, "TimePickerV2", { enumerable: true, get: function () { return TimePickerV2_1.TimePickerV2; } });
 var FormLabel_1 = require("./components/FormLabel");
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
 var Switch_1 = require("./components/Switch");
@@ -166,8 +168,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 {};