devextreme/cjs/__internal/ui/toolbar/toolbar.utils.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/ui/toolbar/toolbar.utils.js)
 * Version: 25.1.4
 * Build date: Tue Aug 05 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.toggleItemFocusableElementTabIndex = toggleItemFocusableElementTabIndex;
var _renderer = _interopRequireDefault(require("../../../core/renderer"));

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
const BUTTON_GROUP_CLASS = "dx-buttongroup";
const TOOLBAR_ITEMS = ["dxAutocomplete", "dxButton", "dxCheckBox", "dxDateBox", "dxMenu", "dxSelectBox", "dxTabs", "dxTextBox", "dxButtonGroup", "dxDropDownButton"];
const getItemInstance = $element => {
    const itemData = null === $element || void 0 === $element ? void 0 : $element.data();
    const dxComponents = null === itemData || void 0 === itemData ? void 0 : itemData.dxComponents;
    const widgetName = null === dxComponents || void 0 === dxComponents ? void 0 : dxComponents[0];
    return widgetName && itemData[widgetName]
};

function toggleItemFocusableElementTabIndex(context, item) {
    var _itemData$options;
    if (!context) {
        return
    }
    const $item = context._findItemElementByItem(item);
    if (!$item.length) {
        return
    }
    const itemData = context._getItemData($item);
    const isItemNotFocusable = !!(null !== (_itemData$options = itemData.options) && void 0 !== _itemData$options && _itemData$options.disabled || itemData.disabled || context.option("disabled"));
    const {
        widget: widget
    } = itemData;
    if (widget && TOOLBAR_ITEMS.includes(widget)) {
        const $widget = $item.find(widget.toLowerCase().replace("dx", ".dx-"));
        if ($widget.length) {
            var _itemInstance$_focusT, _itemData$options2;
            const itemInstance = getItemInstance($widget);
            if (!itemInstance) {
                return
            }
            let $focusTarget = null === (_itemInstance$_focusT = itemInstance._focusTarget) || void 0 === _itemInstance$_focusT ? void 0 : _itemInstance$_focusT.call(itemInstance);
            if ("dxDropDownButton" === widget) {
                var _$focusTarget;
                $focusTarget = null === (_$focusTarget = $focusTarget) || void 0 === _$focusTarget ? void 0 : _$focusTarget.find(`.${BUTTON_GROUP_CLASS}`)
            } else {
                $focusTarget = $focusTarget ?? (0, _renderer.default)(itemInstance.element())
            }
            const tabIndex = null === (_itemData$options2 = itemData.options) || void 0 === _itemData$options2 ? void 0 : _itemData$options2.tabIndex;
            if (isItemNotFocusable) {
                $focusTarget.attr("tabIndex", -1)
            } else {
                $focusTarget.attr("tabIndex", tabIndex ?? 0)
            }
        }
    }
}