@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
70 lines • 6.27 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { ItemRove } from '../../components/itemRove/itemRove';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { useTabs } from '../../hooks/useTabs/useTabs';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { ROLES } from '../../types/role/role';
import { ButtonType } from '../button/types/type';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
// styles
import { LabelHiddenContainer, OneTabStyled, PrimaryTabItemRoveStyled, TabStyled, TabsContainerStyled, TabsContentStyled, TabsLeftArrowContainerStyled, TabsRightArrowContainerStyled, TabsStyled, TabsTabListStyled, TextWrapperStyled, } from './tabs.styled';
import { TabsStateTypes } from './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 = 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 } = useTabs({
numTabsInView: numTabsInView,
tabsLength: tabsLength,
selectedTab: props.selectedTab,
});
const disabledIconLeft = position === 0;
const disabledIconRight = position >= tabsLength - numTabsInView;
const buildIconLeft = () => tabsLength > numTabsInView && (_jsx(TabsLeftArrowContainerStyled, { "aria-label": props.leftControlAriaLabel, "data-testid": `${dataTestId}-icon-left`, disabled: disabledIconLeft, styles: props.styles, tabIndex: 0, type: ButtonType.BUTTON, onClick: () => {
if (!disabledIconLeft) {
handleClickIcon(false);
}
}, children: _jsx(ElementOrIcon, { customIconStyles: !disabledIconLeft ? props.styles.leftIcon : props.styles.leftIcon?.disabled, ...props.leftIcon }) }));
const buildIconRight = () => tabsLength > numTabsInView && (_jsx(TabsRightArrowContainerStyled, { "aria-label": props.rightControlAriaLabel, "data-testid": `${dataTestId}-icon-right`, disabled: disabledIconRight, styles: props.styles, tabIndex: 0, type: ButtonType.BUTTON, onClick: () => {
if (!disabledIconRight) {
handleClickIcon(true);
}
}, children: _jsx(ElementOrIcon, { customIconStyles: !disabledIconRight ? props.styles.rightIcon : props.styles.rightIcon?.disabled, ...props.rightIcon }) }));
const buildTabContent = () => {
const commonTokens = {
id: TAB_PANEL_ID,
role: ROLES.TABPANEL,
styles: props.styles,
tabIndex: allowFocusTabPanel ? 0 : -1,
};
return unMountContent
? props.selectedTab !== undefined && props.selectedTab !== null && (_jsx(TabsContentStyled, { "aria-labelledby": `${BASE_ID}-tab-${props.selectedTab}`, ...commonTokens, children: props.content?.[props.selectedTab] }))
: props.content?.map((cont, index) => {
return (_jsx(TabsContentStyled, { "$display": props.selectedTab === index ? 'block' : 'none', "aria-labelledby": `${BASE_ID}-tab-${index}`, ...commonTokens, children: cont }, index));
});
};
return (_jsxs(TabsContainerStyled, { ref: ref, "data-testid": dataTestId, styles: props.styles, children: [_jsxs(TabsStyled, { styles: props.styles, children: [buildIconLeft(), _jsx(TabsTabListStyled, { ref: listEl, id: TAB_LIST_ID, role: ROLES.TABLIST, styles: props.styles, children: _jsx(_Fragment, { children: props.tabs?.map((tab, index) => {
const isSelected = props.selectedTab === index;
const stateTab = isSelected ? TabsStateTypes.SELECTED : TabsStateTypes.UNSELECTED;
const positionVisibleInView = index >= position && index < position + numTabsInView;
return (_jsx(TabStyled, { autoWidth: autoWidth, "data-testid": `${dataTestId}-tab-${index}`, empty: props.hideLabelForSingleTab, numTabsInViewMobile: numTabsInView, state: stateTab, styles: props.styles, tabsLength: tabsLength, children: tabsLength > 1 ? (_jsx(ItemRove, { ariaDisabled: (props.device === DeviceBreakpointsType.MOBILE && !positionVisibleInView) ||
tab.disabled, ariaSelected: isSelected, asElement: PrimaryTabItemRoveStyled, checkIsFirstTime: true, disabled: (props.device === DeviceBreakpointsType.MOBILE && !positionVisibleInView) ||
tab.disabled, focus: focus === index, id: `${BASE_ID}-tab-${index}`, index: index, preventScrollOnFocus: true, role: ROLES.TAB, onSelectItem: () => {
props.onSelectTab?.(index);
handleClickTab(index);
}, children: _jsx(TextWrapperStyled, { as: Text, component: TextComponentType.SPAN, customTypography: props.styles[stateTab]?.label, ...tab, children: tab.content }) })) : (_jsx(OneTabStyled, { id: `${BASE_ID}-tab-${index}`, role: ROLES.TAB, children: props.hideLabelForSingleTab ? (_jsx(LabelHiddenContainer, { as: Text, id: `${BASE_ID}-tab-${index}`, role: ROLES.TAB, ...tab, children: tab.content })) : (_jsx(TextWrapperStyled, { as: Text, customTypography: props.styles[stateTab]?.label, ...tab, children: tab.content })) })) }, index));
}) }) }), buildIconRight()] }), buildTabContent()] }));
};
export const TabsStandAlone = React.forwardRef(TabsStandAloneComponent);
//# sourceMappingURL=tabsStandAlone.js.map