@yamada-ui/tabs/dist/chunk-RQ4KBU5Z.mjs.map

Yamada UI tabs component

{"version":3,"sources":["../src/tabs.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport type { TabListProps } from \"./tab-list\"\nimport type { TabPanelsProps } from \"./tab-panels\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, findChild, getValidChildren, pickChildren } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\nimport { Tab } from \"./tab\"\nimport { TabList } from \"./tab-list\"\nimport { TabPanel } from \"./tab-panel\"\nimport { TabPanels } from \"./tab-panels\"\nimport {\n  TabDescendantsContextProvider,\n  TabPanelDescendantsContextProvider,\n  TabsProvider,\n  useTabDescendants,\n  useTabPanelDescendants,\n} from \"./tabs-context\"\n\nexport interface TabsOptions {\n  /**\n   * The alignment of the tabs.\n   */\n  align?: \"center\" | \"end\" | \"start\"\n  /**\n   * The index of the selected tab.\n   */\n  defaultIndex?: number\n  /**\n   * If `true`, disable ripple effects when pressing the tab.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, tabs will stretch to width of the tablist.\n   *\n   * @default false\n   */\n  fitted?: boolean\n  /**\n   * The index of the selected tab.\n   */\n  index?: number\n  /**\n   * If `true`, tabs will stretch to width of the tablist.\n   *\n   * @default false\n   *\n   * @deprecated Use `fitted` instead.\n   */\n  isFitted?: boolean\n  /**\n   * If `true`, rendering of the tab panel's will be deferred until it is selected.\n   *\n   * @default true\n   *\n   * @deprecated Use `lazy` instead.\n   */\n  isLazy?: boolean\n  /**\n   * If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.\n   *\n   * If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.\n   *\n   * @default false\n   *\n   * @deprecated Use `manual` instead.\n   */\n  isManual?: boolean\n  /**\n   * If `true`, rendering of the tab panel's will be deferred until it is selected.\n   *\n   * @default true\n   */\n  lazy?: boolean\n  /**\n   * The lazy behavior of tab panels' content when not active. Only works when `isLazy={true}`.\n   *\n   * - `unmount`: The content of inactive tab panels are always unmounted.\n   * - `keepMounted`: The content of inactive tab panels is initially unmounted, but stays mounted when selected.\n   *\n   * @default 'unmount'\n   */\n  lazyBehavior?: LazyMode\n  /**\n   * If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.\n   *\n   * If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.\n   *\n   * @default false\n   */\n  manual?: boolean\n  /**\n   * The orientation of the tab list.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"horizontal\" | \"vertical\"\n  /**\n   * Props for tab list component.\n   */\n  tabListProps?: TabListProps\n  /**\n   * Props for tab panels components.\n   */\n  tabPanelsProps?: TabPanelsProps\n  /**\n   * The callback invoked when the index changes.\n   */\n  onChange?: (index: number) => void\n}\n\nexport interface TabsProps\n  extends Omit<HTMLUIProps, \"onChange\">,\n    ThemeProps<\"Tabs\">,\n    TabsOptions {}\n\n/**\n * `Tabs` is a component for switching between different display areas.\n *\n * @see Docs https://yamada-ui.com/components/disclosure/tabs\n */\nexport const Tabs = forwardRef<TabsProps, \"div\">(\n  ({ align = \"start\", isFitted, fitted = isFitted, ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Tabs\", {\n      align,\n      fitted,\n      ...props,\n    })\n    const {\n      className,\n      children,\n      defaultIndex = 0,\n      disableRipple = false,\n      index,\n      isLazy = true,\n      isManual,\n      lazy = isLazy,\n      lazyBehavior = \"keepMounted\",\n      manual = isManual,\n      orientation = \"horizontal\",\n      tabListProps,\n      tabPanelsProps,\n      onChange,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const [focusedIndex, setFocusedIndex] = useState<number>(defaultIndex)\n    const [selectedIndex, setSelectedIndex] = useControllableState({\n      defaultValue: defaultIndex,\n      value: index,\n      onChange,\n    })\n    const tabDescendants = useTabDescendants()\n    const tabPanelDescendants = useTabPanelDescendants()\n    const validChildren = getValidChildren(children)\n    const customTabList = findChild(validChildren, TabList)\n    const customTabPanels = findChild(validChildren, TabPanels)\n    const cloneTabs = pickChildren(validChildren, Tab)\n    const cloneTabPanels = pickChildren(validChildren, TabPanel)\n\n    const css: CSSUIObject = { w: \"100%\", ...styles.container }\n\n    useEffect(() => {\n      if (index != null) setFocusedIndex(index)\n    }, [index])\n\n    return (\n      <TabDescendantsContextProvider value={tabDescendants}>\n        <TabPanelDescendantsContextProvider value={tabPanelDescendants}>\n          <TabsProvider\n            value={{\n              align,\n              disableRipple,\n              fitted,\n              focusedIndex,\n              lazy,\n              lazyBehavior,\n              manual,\n              orientation,\n              selectedIndex,\n              setFocusedIndex,\n              setSelectedIndex,\n              styles,\n              tabListProps,\n              tabPanelsProps,\n            }}\n          >\n            <ui.div\n              ref={ref}\n              className={cx(\"ui-tabs\", className)}\n              __css={css}\n              {...rest}\n            >\n              {customTabList ?? <TabList>{cloneTabs}</TabList>}\n              {customTabPanels ?? <TabPanels>{cloneTabPanels}</TabPanels>}\n            </ui.div>\n          </TabsProvider>\n        </TabPanelDescendantsContextProvider>\n      </TabDescendantsContextProvider>\n    )\n  },\n)\n\nTabs.displayName = \"Tabs\"\nTabs.__ui__ = \"Tabs\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,IAAI,WAAW,kBAAkB,oBAAoB;AAC9D,SAAS,WAAW,gBAAgB;AAsLxB,SAMoB,KANpB;AAjEL,IAAM,OAAO;AAAA,EAClB,CAAC,EAAE,QAAQ,SAAS,UAAU,SAAS,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,QAAQ;AAAA,MAC3D;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,eAAe;AAAA,MACf,SAAS;AAAA,MACT,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAC9B,UAAM,CAAC,cAAc,eAAe,IAAI,SAAiB,YAAY;AACrE,UAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,MAC7D,cAAc;AAAA,MACd,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AACD,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,sBAAsB,uBAAuB;AACnD,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,gBAAgB,UAAU,eAAe,OAAO;AACtD,UAAM,kBAAkB,UAAU,eAAe,SAAS;AAC1D,UAAM,YAAY,aAAa,eAAe,GAAG;AACjD,UAAM,iBAAiB,aAAa,eAAe,QAAQ;AAE3D,UAAM,MAAmB,EAAE,GAAG,QAAQ,GAAG,OAAO,UAAU;AAE1D,cAAU,MAAM;AACd,UAAI,SAAS,KAAM,iBAAgB,KAAK;AAAA,IAC1C,GAAG,CAAC,KAAK,CAAC;AAEV,WACE,oBAAC,iCAA8B,OAAO,gBACpC,8BAAC,sCAAmC,OAAO,qBACzC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC;AAAA,YACA,WAAW,GAAG,WAAW,SAAS;AAAA,YAClC,OAAO;AAAA,YACN,GAAG;AAAA,YAEH;AAAA,sDAAiB,oBAAC,WAAS,qBAAU;AAAA,cACrC,4CAAmB,oBAAC,aAAW,0BAAe;AAAA;AAAA;AAAA,QACjD;AAAA;AAAA,IACF,GACF,GACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AACnB,KAAK,SAAS;","names":[]}