@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
109 lines • 5.54 kB
JavaScript
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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useLayoutEffect, useRef } from 'react';
import classnames from 'classnames';
import { defaultsDeep } from 'lodash';
import useOrientationBasedKeyboardNavigation from '../../hooks/useOrientationBasedKeyboardNavigation';
import { getKeyboardFocusableElements } from '../../utils/navigation';
import ButtonGroup from '../ButtonGroup';
import { useTabsContext } from '../TabsProvider/TabsProvider.utils';
import { DEFAULTS, STYLE } from './TabList.constants';
import './TabList.style.scss';
import { useCheckAriaLabel } from '../../utils/a11y';
/**
* The TabList component.
* @deprecated Use the equivalent from momentum.design (NPM: `@momentum-design/components/dist/react`)
*/
var TabList = function (props) {
var _children = props.children, _a = props.orientation, orientation = _a === void 0 ? DEFAULTS.ORIENTATION : _a, onTabSelection = props.onTabSelection, _b = props.hasBackground, hasBackground = _b === void 0 ? DEFAULTS.HAS_BACKGROUND : _b, otherProps = __rest(props, ["children", "orientation", "onTabSelection", "hasBackground"]);
var children = Array.isArray(_children)
? _children
: [_children];
useCheckAriaLabel('TabList', props);
var buttonGroupProps = defaultsDeep({}, otherProps, {
round: true,
spaced: true,
});
var containerRef = useRef(null);
var tabsContext = useTabsContext();
var _c = useOrientationBasedKeyboardNavigation({
listSize: children.filter(function (element) { return !element.props.disabled; }).length,
orientation: orientation,
noLoop: false,
}), keyboardProps = _c.keyboardProps, focusWithinProps = _c.focusWithinProps, getFocusContext = _c.getContext;
var _d = getFocusContext(), getCurrentFocus = _d.getCurrentFocus, isFocusedWithin = _d.isFocusedWithin, setCurrentFocus = _d.setCurrentFocus;
var currentFocus = getCurrentFocus();
// Reset the tabIndex when focusing out
useLayoutEffect(function () {
if (!isFocusedWithin) {
var activeIndex = getKeyboardFocusableElements(containerRef.current, {
includeTabbableOnly: false,
}).findIndex(function (el) { return el.dataset.active === 'true'; });
setCurrentFocus(Math.max(activeIndex, 0));
}
}, [isFocusedWithin, setCurrentFocus]);
// Get the DOM to focus on the current focused element stored in state
useLayoutEffect(function () {
var _a;
if (isFocusedWithin) {
(_a = getKeyboardFocusableElements(containerRef.current, { includeTabbableOnly: false })[currentFocus]) === null || _a === void 0 ? void 0 : _a.focus();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentFocus]);
var seenDisabledTabs = 0;
var cloneWithCommonProps = function (element, index) {
var elementKey = element.key;
var isFocused = !element.props.disabled && currentFocus === index - seenDisabledTabs;
if (element.props.disabled) {
seenDisabledTabs++;
}
var handleOnPress = function (e) {
var _a, _b;
setCurrentFocus(index);
if (element.props.onPress) {
(_b = (_a = element.props).onPress) === null || _b === void 0 ? void 0 : _b.call(_a, e);
}
else if (elementKey) {
onTabSelection === null || onTabSelection === void 0 ? void 0 : onTabSelection(elementKey);
}
};
var commonProps = {
role: 'tab',
tabIndex: isFocused ? 0 : -1,
onPress: handleOnPress,
};
// If <TabList /> is used outside of a <TabsProvider />, just include keyboard navigation stuff
if (tabsContext === null) {
return React.cloneElement(element, __assign({}, commonProps));
}
if (elementKey === null) {
console.warn('MRV2: Tabs in TabList must have a key', element);
return element;
}
var isActiveTab = tabsContext.selectedTab === elementKey;
return React.cloneElement(element, __assign(__assign({}, commonProps), { active: isActiveTab, 'aria-selected': isActiveTab, 'aria-controls': isActiveTab ? tabsContext.activePanelId : undefined, id: tabsContext.getTabId(elementKey) }));
};
return (React.createElement(ButtonGroup, __assign({ ref: containerRef }, buttonGroupProps, keyboardProps, focusWithinProps, { "data-has-background": hasBackground, role: "tablist", className: classnames(STYLE.wrapper, props.className), orientation: orientation }), children.map(cloneWithCommonProps)));
};
export default TabList;
//# sourceMappingURL=TabList.js.map