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

Yamada UI tabs component

{"version":3,"sources":["../src/tab-list.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { useTabDescendantsContext, useTabsContext } from \"./tabs-context\"\n\nexport interface TabListProps extends HTMLUIProps {}\n\nexport const TabList = forwardRef<TabListProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { focusedIndex, orientation, styles, tabListProps } = useTabsContext()\n    const descendants = useTabDescendantsContext()\n    const isVertical = orientation === \"vertical\"\n\n    const onNext = useCallback(() => {\n      const next = descendants.enabledNextValue(focusedIndex)\n\n      if (next) next.node.focus()\n    }, [descendants, focusedIndex])\n\n    const onPrev = useCallback(() => {\n      const prev = descendants.enabledPrevValue(focusedIndex)\n\n      if (prev) prev.node.focus()\n    }, [descendants, focusedIndex])\n\n    const onFirst = useCallback(() => {\n      const first = descendants.enabledFirstValue()\n\n      if (first) first.node.focus()\n    }, [descendants])\n\n    const onLast = useCallback(() => {\n      const last = descendants.enabledLastValue()\n\n      if (last) last.node.focus()\n    }, [descendants])\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent) => {\n        const actions: { [key: string]: KeyboardEventHandler } = {\n          ArrowDown: () => (isVertical ? onNext() : {}),\n          ArrowLeft: () => (!isVertical ? onPrev() : {}),\n          ArrowRight: () => (!isVertical ? onNext() : {}),\n          ArrowUp: () => (isVertical ? onPrev() : {}),\n          End: onLast,\n          Home: onFirst,\n        }\n\n        const action = actions[ev.key]\n\n        if (!action) return\n\n        ev.preventDefault()\n        action(ev)\n      },\n      [onFirst, onLast, isVertical, onPrev, onNext],\n    )\n\n    const css: CSSUIObject = { display: \"flex\", ...styles.tabList }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-tabs__list\", className)}\n        aria-orientation={orientation}\n        role=\"tablist\"\n        __css={css}\n        {...tabListProps}\n        {...rest}\n        onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n      />\n    )\n  },\n)\n\nTabList.displayName = \"TabList\"\nTabList.__ui__ = \"TabList\"\n"],"mappings":";;;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,IAAI,kBAAkB;AAC/B,SAAS,mBAAmB;AA2DtB;AAtDC,IAAM,UAAU;AAAA,EACrB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,cAAc,aAAa,QAAQ,aAAa,IAAI,eAAe;AAC3E,UAAM,cAAc,yBAAyB;AAC7C,UAAM,aAAa,gBAAgB;AAEnC,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,MAAK,KAAK,MAAM;AAAA,IAC5B,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,MAAK,KAAK,MAAM;AAAA,IAC5B,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,UAAM,UAAU,YAAY,MAAM;AAChC,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,OAAM,KAAK,MAAM;AAAA,IAC9B,GAAG,CAAC,WAAW,CAAC;AAEhB,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,MAAK,KAAK,MAAM;AAAA,IAC5B,GAAG,CAAC,WAAW,CAAC;AAEhB,UAAM,YAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAmD;AAAA,UACvD,WAAW,MAAO,aAAa,OAAO,IAAI,CAAC;AAAA,UAC3C,WAAW,MAAO,CAAC,aAAa,OAAO,IAAI,CAAC;AAAA,UAC5C,YAAY,MAAO,CAAC,aAAa,OAAO,IAAI,CAAC;AAAA,UAC7C,SAAS,MAAO,aAAa,OAAO,IAAI,CAAC;AAAA,UACzC,KAAK;AAAA,UACL,MAAM;AAAA,QACR;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAClB,eAAO,EAAE;AAAA,MACX;AAAA,MACA,CAAC,SAAS,QAAQ,YAAY,QAAQ,MAAM;AAAA,IAC9C;AAEA,UAAM,MAAmB,EAAE,SAAS,QAAQ,GAAG,OAAO,QAAQ;AAE9D,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,oBAAkB;AAAA,QAClB,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,WAAW,WAAW,KAAK,WAAW,SAAS;AAAA;AAAA,IACjD;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AACtB,QAAQ,SAAS;","names":[]}