{"version":3,"sources":["../../../src/Legacy/TabList/TabList.hooks.ts"],"names":["debounce","useCallback","useEffect","useRef","useState","useTabListIndicatorStyle","activeTab","tabIndicatorStyle","setTabIndicatorStyle","getActiveTabOffset","debouncedSetTabIndicatorStyle","useTabs","props","value","setValue","tabRefObject","activeTabRef","setActiveTabRef","_a","_b","activeIndex","tab","handleKeyDown","event","tabKeyList","focusNextTab","nextKey","move","step","len","tabValue","index","ref"],"mappings":"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","sourcesContent":["import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { LegacyTabIndicatorStyle } from \"./TabList.types\";\n\nconst useTabListIndicatorStyle = (activeTab: HTMLElement | null) => {\n  const [tabIndicatorStyle, setTabIndicatorStyle] = useState<LegacyTabIndicatorStyle>();\n\n  const getActiveTabOffset = useCallback(() => {\n    if (!activeTab) return undefined;\n\n    return {\n      width: activeTab.offsetWidth,\n      left: activeTab.offsetLeft,\n      height: activeTab.offsetHeight,\n    };\n  }, [activeTab]);\n\n  useEffect(() => {\n    setTabIndicatorStyle(getActiveTabOffset);\n  }, [getActiveTabOffset]);\n\n  useEffect(() => {\n    const debouncedSetTabIndicatorStyle = debounce(() => {\n      setTabIndicatorStyle(getActiveTabOffset);\n    }, 100);\n\n    window.addEventListener(\"resize\", debouncedSetTabIndicatorStyle);\n\n    return () => {\n      window.removeEventListener(\"resize\", debouncedSetTabIndicatorStyle);\n      debouncedSetTabIndicatorStyle.cancel();\n    };\n  }, [getActiveTabOffset]);\n\n  return tabIndicatorStyle;\n};\n\nexport const useTabs = <T extends string>(props: { defaultValue: T }) => {\n  const [value, setValue] = useState<T>(props?.defaultValue);\n  const tabRefObject = useRef<{ value: T; ref: HTMLElement }[]>([]);\n  const [activeTabRef, setActiveTabRef] = useState<HTMLElement | null>(null);\n  const tabIndicatorStyle = useTabListIndicatorStyle(activeTabRef);\n\n  useEffect(() => {\n    const activeIndex = tabRefObject.current.findIndex((tab) => tab.value === value);\n    setActiveTabRef(tabRefObject.current[activeIndex]?.ref ?? null);\n  }, [value]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const activeIndex = tabRefObject.current.findIndex((tab) => tab.value === value);\n      if (activeIndex === -1) return;\n\n      const activeTab = tabRefObject.current[activeIndex];\n      const isClayTabActive =\n        document.activeElement?.role === \"tab\" &&\n        document.activeElement.id === `clay-tab-${activeTab.value}`;\n\n      if (!isClayTabActive) return;\n\n      const tabKeyList = tabRefObject.current.map((tab) => tab.value);\n\n      const focusNextTab = (nextKey: string) => {\n        document.getElementById(`clay-tab-${nextKey}`)?.focus();\n      };\n\n      const move = (step: number) => {\n        const len = tabKeyList.length;\n        const nextKey = tabKeyList[(((activeIndex + step) % len) + len) % len];\n        setValue(nextKey);\n        focusNextTab(nextKey);\n      };\n\n      switch (event.key) {\n        case \"ArrowLeft\":\n          move(-1);\n          break;\n        case \"ArrowRight\":\n          move(1);\n          break;\n        case \"Home\":\n          focusNextTab(tabKeyList[0]);\n          break;\n        case \"End\":\n          focusNextTab(tabKeyList[tabKeyList.length - 1]);\n          break;\n\n        default:\n          break;\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [value]);\n\n  const getTabProps = (tabValue: T, index: number) => ({\n    key: tabValue,\n    id: tabValue,\n    active: value === tabValue,\n    ref: (ref: HTMLButtonElement) => {\n      tabRefObject.current[index] = { value: tabValue, ref };\n    },\n    onClick: () => {\n      setValue(tabValue);\n    },\n    value,\n  });\n\n  return {\n    value,\n    setValue,\n    getTabProps,\n    tabIndicatorStyle,\n  };\n};\n"]}