superdesk-ui-framework 3.1.12 → 3.1.13

package/react/components/ToggleBox/CustomHeaderToggleBox.js

@@ -44,12 +44,14 @@ 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;
@@ -65,13 +67,14 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
         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' },
+        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 },
+                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", { className: 'new-collapse-box__content-inner p-2 pt-0-5' }, this.props.children))));
+                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));

package/react/components/ToggleBox/SimpleToggleBox.js

@@ -56,7 +56,7 @@ var SimpleToggleBox = /** @class */ (function (_super) {
         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 });
@@ -86,23 +86,25 @@ var SimpleToggleBox = /** @class */ (function (_super) {
     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 SimpleToggleBox;
 }(React.PureComponent));

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

@@ -4,8 +4,9 @@ export interface IPropsSimple {
     title: string;
     badge?: JSX.Element;
     children: React.ReactNode;
-    hideUsingCSS?: boolean;
+    circledChevron?: boolean;
     initiallyOpen?: boolean;
+    largeTitle?: boolean;
     className?: string;
     margin?: 'none' | 'small' | 'normal' | 'large';
     onOpen?(): void;

package/react/components/TreeMenu.js

@@ -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,9 +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: function () {
+                            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, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onKeyDown: function () { return _this.setState({
+                                }, 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';

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");