@yamada-ui/tabs
Version:
Yamada UI tabs component
1 lines • 2 kB
Source Map (JSON)
{"version":3,"sources":["../src/tab-panels.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport { createElement } from \"react\"\nimport { TabPanelProvider, useTabsContext } from \"./tabs-context\"\n\nexport interface TabPanelsProps extends HTMLUIProps {}\n\nexport const TabPanels = forwardRef<TabPanelsProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { selectedIndex, styles, tabPanelsProps } = useTabsContext()\n const validChildren = getValidChildren(children)\n const cloneChildren = validChildren.map((child, index) => {\n const selected = index === selectedIndex\n\n return createElement(\n TabPanelProvider,\n { key: index, value: { index, selected, selectedIndex } },\n child,\n )\n })\n\n const css: CSSUIObject = {\n w: \"100%\",\n ...styles.tabPanels,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-tabs__panels\", className)}\n __css={css}\n {...tabPanelsProps}\n {...rest}\n >\n {cloneChildren}\n </ui.div>\n )\n },\n)\n\nTabPanels.displayName = \"TabPanels\"\nTabPanels.__ui__ = \"TabPanels\"\n"],"mappings":";;;;;;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,IAAI,wBAAwB;AACrC,SAAS,qBAAqB;AAyBxB;AApBC,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,GAAG,KAAK,GAAG,QAAQ;AACzC,UAAM,EAAE,eAAe,QAAQ,eAAe,IAAI,eAAe;AACjE,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,OAAO,UAAU;AACxD,YAAM,WAAW,UAAU;AAE3B,aAAO;AAAA,QACL;AAAA,QACA,EAAE,KAAK,OAAO,OAAO,EAAE,OAAO,UAAU,cAAc,EAAE;AAAA,QACxD;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,MACH,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;","names":[]}