@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
76 lines • 6.98 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const itemRove_1 = require("../../components/itemRove/itemRove");
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const useId_1 = require("../../hooks/useId/useId");
const useTabs_1 = require("../../hooks/useTabs/useTabs");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const role_1 = require("../../types/role/role");
const type_1 = require("../button/types/type");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
// styles
const tabs_styled_1 = require("./tabs.styled");
const state_1 = require("./types/state");
const MAX_TABS_IN_VIEW = 3;
// deprecated - Remove `MIN_TABS_IN_VIEW` when `minTabsInView` prop is removed from `Tabs`
const MIN_TABS_IN_VIEW = 2;
const PRIMARY_TABS_BASE_ID = 'Tabs';
const TabsStandAloneComponent = ({ autoWidth = false, allowFocusTabPanel = true, dataTestId = 'tabs',
// deprecated - Remove when `minTabsInView` prop is removed from `Tabs`
minTabsInView = MIN_TABS_IN_VIEW, maxTabsInView = MAX_TABS_IN_VIEW, unMountContent = true, ...props }, ref) => {
const BASE_ID = (0, useId_1.useId)(PRIMARY_TABS_BASE_ID);
const TAB_LIST_ID = `${BASE_ID}-tab-list`;
const TAB_PANEL_ID = `${BASE_ID}-tab-panel`;
const tabsLength = props.tabs?.length ?? 0;
const numTabsInView = Math.min(tabsLength, maxTabsInView);
const { position, handleClickIcon, focus, handleClickTab, listEl } = (0, useTabs_1.useTabs)({
numTabsInView: numTabsInView,
tabsLength: tabsLength,
selectedTab: props.selectedTab,
});
const disabledIconLeft = position === 0;
const disabledIconRight = position >= tabsLength - numTabsInView;
const buildIconLeft = () => tabsLength > numTabsInView && ((0, jsx_runtime_1.jsx)(tabs_styled_1.TabsLeftArrowContainerStyled, { "aria-label": props.leftControlAriaLabel, "data-testid": `${dataTestId}-icon-left`, disabled: disabledIconLeft, styles: props.styles, tabIndex: 0, type: type_1.ButtonType.BUTTON, onClick: () => {
if (!disabledIconLeft) {
handleClickIcon(false);
}
}, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: !disabledIconLeft ? props.styles.leftIcon : props.styles.leftIcon?.disabled, ...props.leftIcon }) }));
const buildIconRight = () => tabsLength > numTabsInView && ((0, jsx_runtime_1.jsx)(tabs_styled_1.TabsRightArrowContainerStyled, { "aria-label": props.rightControlAriaLabel, "data-testid": `${dataTestId}-icon-right`, disabled: disabledIconRight, styles: props.styles, tabIndex: 0, type: type_1.ButtonType.BUTTON, onClick: () => {
if (!disabledIconRight) {
handleClickIcon(true);
}
}, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: !disabledIconRight ? props.styles.rightIcon : props.styles.rightIcon?.disabled, ...props.rightIcon }) }));
const buildTabContent = () => {
const commonTokens = {
id: TAB_PANEL_ID,
role: role_1.ROLES.TABPANEL,
styles: props.styles,
tabIndex: allowFocusTabPanel ? 0 : -1,
};
return unMountContent
? props.selectedTab !== undefined && props.selectedTab !== null && ((0, jsx_runtime_1.jsx)(tabs_styled_1.TabsContentStyled, { "aria-labelledby": `${BASE_ID}-tab-${props.selectedTab}`, ...commonTokens, children: props.content?.[props.selectedTab] }))
: props.content?.map((cont, index) => {
return ((0, jsx_runtime_1.jsx)(tabs_styled_1.TabsContentStyled, { "$display": props.selectedTab === index ? 'block' : 'none', "aria-labelledby": `${BASE_ID}-tab-${index}`, ...commonTokens, children: cont }, index));
});
};
return ((0, jsx_runtime_1.jsxs)(tabs_styled_1.TabsContainerStyled, { ref: ref, "data-testid": dataTestId, styles: props.styles, children: [(0, jsx_runtime_1.jsxs)(tabs_styled_1.TabsStyled, { styles: props.styles, children: [buildIconLeft(), (0, jsx_runtime_1.jsx)(tabs_styled_1.TabsTabListStyled, { ref: listEl, id: TAB_LIST_ID, role: role_1.ROLES.TABLIST, styles: props.styles, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.tabs?.map((tab, index) => {
const isSelected = props.selectedTab === index;
const stateTab = isSelected ? state_1.TabsStateTypes.SELECTED : state_1.TabsStateTypes.UNSELECTED;
const positionVisibleInView = index >= position && index < position + numTabsInView;
return ((0, jsx_runtime_1.jsx)(tabs_styled_1.TabStyled, { autoWidth: autoWidth, "data-testid": `${dataTestId}-tab-${index}`, empty: props.hideLabelForSingleTab, numTabsInViewMobile: numTabsInView, state: stateTab, styles: props.styles, tabsLength: tabsLength, children: tabsLength > 1 ? ((0, jsx_runtime_1.jsx)(itemRove_1.ItemRove, { ariaDisabled: (props.device === breakpoints_1.DeviceBreakpointsType.MOBILE && !positionVisibleInView) ||
tab.disabled, ariaSelected: isSelected, asElement: tabs_styled_1.PrimaryTabItemRoveStyled, checkIsFirstTime: true, disabled: (props.device === breakpoints_1.DeviceBreakpointsType.MOBILE && !positionVisibleInView) ||
tab.disabled, focus: focus === index, id: `${BASE_ID}-tab-${index}`, index: index, preventScrollOnFocus: true, role: role_1.ROLES.TAB, onSelectItem: () => {
props.onSelectTab?.(index);
handleClickTab(index);
}, children: (0, jsx_runtime_1.jsx)(tabs_styled_1.TextWrapperStyled, { as: text_1.Text, component: component_1.TextComponentType.SPAN, customTypography: props.styles[stateTab]?.label, ...tab, children: tab.content }) })) : ((0, jsx_runtime_1.jsx)(tabs_styled_1.OneTabStyled, { id: `${BASE_ID}-tab-${index}`, role: role_1.ROLES.TAB, children: props.hideLabelForSingleTab ? ((0, jsx_runtime_1.jsx)(tabs_styled_1.LabelHiddenContainer, { as: text_1.Text, id: `${BASE_ID}-tab-${index}`, role: role_1.ROLES.TAB, ...tab, children: tab.content })) : ((0, jsx_runtime_1.jsx)(tabs_styled_1.TextWrapperStyled, { as: text_1.Text, customTypography: props.styles[stateTab]?.label, ...tab, children: tab.content })) })) }, index));
}) }) }), buildIconRight()] }), buildTabContent()] }));
};
exports.TabsStandAlone = react_1.default.forwardRef(TabsStandAloneComponent);
//# sourceMappingURL=tabsStandAlone.js.map