@workday/canvas-kit-react/dist/es6/tabs/lib/TabsPanel.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import styled from '@emotion/styled';
import { createSubcomponent, useMountLayout, createElemPropsHook, slugify, } from '@workday/canvas-kit-react/common';
import { ListRenderItemContext } from '@workday/canvas-kit-react/collection';
import { Box } from '@workday/canvas-kit-react/layout';
import { useTabsModel } from './useTabsModel';
const StyledTabsPanel = styled(Box)();
export const useTabsPanel = createElemPropsHook(useTabsModel)(({ state, events }, _, elemProps = {}) => {
    const { item } = React.useContext(ListRenderItemContext);
    const [localId, setLocalId] = React.useState(elemProps['data-id'] || (item === null || item === void 0 ? void 0 : item.id) || '');
    useMountLayout(() => {
        if (item) {
            return;
        }
        const defaultId = state.panelIndexRef.current;
        const itemId = localId || String(defaultId);
        events.registerPanel({ id: itemId, textValue: '' });
        setLocalId(itemId);
        return () => {
            events.unregisterPanel({ id: itemId });
        };
    });
    return {
        role: 'tabpanel',
        'aria-labelledby': slugify(`${state.id}-${localId}`),
        hidden: !!localId && localId !== state.selectedIds[0],
        id: slugify(`tabpanel-${state.id}-${localId}`),
        tabIndex: 0,
    };
});
export const TabsPanel = createSubcomponent('div')({
    displayName: 'Tabs.Panel',
    modelHook: useTabsModel,
    elemPropsHook: useTabsPanel,
})(({ children, ...elemProps }, Element) => {
    return (_jsx(StyledTabsPanel, { as: Element, ...elemProps, children: children }));
});