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

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import styled from '@emotion/styled';
import { createSubcomponent, useMountLayout, createElemPropsHook, slugify, } from '@workday/canvas-kit-react/common';
import { Box } from '@workday/canvas-kit-react/layout';
import { useTabsModel } from './useTabsModel';
const StyledTabsPanel = styled(Box)();
export const useTabsPanel = createElemPropsHook(useTabsModel)(({ state, events }, _, elemProps = {}) => {
    var _a;
    const [localId, setLocalId] = React.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || '');
    useMountLayout(() => {
        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 (React.createElement(StyledTabsPanel, { as: Element, ...elemProps }, children));
});