design-react-kit/dist/Tab/TabNav.cjs.map

Componenti React per Bootstrap 5

{"version":3,"sources":["../../src/Tab/TabNav.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { ElementType, FC, useRef } from 'react';\nimport { Nav, NavProps } from 'react-bootstrap';\n\nexport interface TabNavProps extends NavProps {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati\n   * @default ul\n   */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Tab */\n  className?: string;\n  /** Imposta l'orientameno delle tab in verticale\n   * @default false\n   */\n  vertical?: boolean;\n  /** Imposta la tab con sfondo scuro\n   * @default false\n   */\n  dark?: boolean;\n  /** Imposta la tab con design tipo card\n   * @default false\n   */\n  card?: boolean;\n  testId?: string;\n}\n\nexport const TabNav: FC<TabNavProps> = ({\n  className,\n  vertical = false,\n  dark = false,\n  card = false,\n  tag = 'ul',\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const rootRef = useRef<HTMLInputElement>();\n\n  const classes = classNames(\n    className,\n    'nav-tabs',\n    { 'nav-tabs-vertical': vertical },\n    { 'nav-dark': dark },\n    { 'nav-tabs-cards': card }\n  );\n  let currentTabIndex = 0;\n  let activeTabIndex = -1;\n\n  // Ugly workaround to keep Bootstrap Italia behaviour\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>, disabled: boolean = false) => {\n    const queriedElements = rootRef.current?.querySelectorAll('.nav-link');\n    if (queriedElements) {\n      for (let i = 0; i < queriedElements.length; i++) {\n        if (queriedElements[i].ariaSelected === 'true') {\n          activeTabIndex = i;\n        }\n        // Disabled elements ignore current focused tab\n        if (!disabled && document.activeElement === queriedElements[i]) {\n          currentTabIndex = i;\n        }\n        queriedElements[i].ariaSelected = 'false';\n      }\n      switch (event.key) {\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          event.stopPropagation();\n          event.preventDefault();\n          if (currentTabIndex - 1 < 0) {\n            currentTabIndex = queriedElements.length;\n          }\n          currentTabIndex = (currentTabIndex - 1) % queriedElements.length;\n          break;\n        case 'ArrowRight':\n        case 'ArrowDown':\n          event.stopPropagation();\n          event.preventDefault();\n          currentTabIndex = (currentTabIndex + 1) % queriedElements.length;\n          break;\n        case 'Enter':\n          event.stopPropagation();\n          event.preventDefault();\n          (queriedElements[currentTabIndex] as HTMLElement).click();\n          break;\n        case 'Tab':\n          break;\n        default:\n          return;\n      }\n      if (queriedElements[currentTabIndex].ariaDisabled === 'true') {\n        handleKeyDown(event, true);\n      } else {\n        (queriedElements[currentTabIndex] as HTMLElement).focus({ preventScroll: true });\n        setTimeout(() => {\n          queriedElements[activeTabIndex].ariaSelected = 'true';\n        }, 300);\n      }\n    }\n  };\n\n  return (\n    <Nav\n      ref={rootRef}\n      as={Tag}\n      className={classes}\n      data-testid={testId}\n      {...attributes}\n      onKeyDown={handleKeyDown}\n    ></Nav>\n  );\n};\n"],"mappings":"0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,2BACvBC,EAA+C,sBAC/CC,EAA8B,2BAwBjBJ,EAA0B,CAAC,CACtC,UAAAK,EACA,SAAAC,EAAW,GACX,KAAAC,EAAO,GACP,KAAAC,EAAO,GACP,IAAAC,EAAM,KACN,OAAAC,EACA,GAAGC,CACL,IAAM,CACJ,IAAMC,EAAMH,EACNI,KAAU,UAAyB,EAEnCC,KAAU,EAAAC,SACdV,EACA,WACA,CAAE,oBAAqBC,CAAS,EAChC,CAAE,WAAYC,CAAK,EACnB,CAAE,iBAAkBC,CAAK,CAC3B,EACIQ,EAAkB,EAClBC,EAAiB,GAIfC,EAAgB,CAACC,EAAyCC,EAAoB,KAAU,CAC5F,IAAMC,EAAkBR,EAAQ,SAAS,iBAAiB,WAAW,EACrE,GAAIQ,EAAiB,CACnB,QAASC,EAAI,EAAGA,EAAID,EAAgB,OAAQC,IACtCD,EAAgBC,CAAC,EAAE,eAAiB,SACtCL,EAAiBK,GAGf,CAACF,GAAY,SAAS,gBAAkBC,EAAgBC,CAAC,IAC3DN,EAAkBM,GAEpBD,EAAgBC,CAAC,EAAE,aAAe,QAEpC,OAAQH,EAAM,IAAK,CACjB,IAAK,YACL,IAAK,UACHA,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACjBH,EAAkB,EAAI,IACxBA,EAAkBK,EAAgB,QAEpCL,GAAmBA,EAAkB,GAAKK,EAAgB,OAC1D,MACF,IAAK,aACL,IAAK,YACHF,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACrBH,GAAmBA,EAAkB,GAAKK,EAAgB,OAC1D,MACF,IAAK,QACHF,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACpBE,EAAgBL,CAAe,EAAkB,MAAM,EACxD,MACF,IAAK,MACH,MACF,QACE,MACJ,CACIK,EAAgBL,CAAe,EAAE,eAAiB,OACpDE,EAAcC,EAAO,EAAI,GAExBE,EAAgBL,CAAe,EAAkB,MAAM,CAAE,cAAe,EAAK,CAAC,EAC/E,WAAW,IAAM,CACfK,EAAgBJ,CAAc,EAAE,aAAe,MACjD,EAAG,GAAG,EAEV,CACF,EAEA,OACE,EAAAM,QAAA,cAAC,OACC,IAAKV,EACL,GAAID,EACJ,UAAWE,EACX,cAAaJ,EACZ,GAAGC,EACJ,UAAWO,EACZ,CAEL","names":["TabNav_exports","__export","TabNav","__toCommonJS","import_classnames","import_react","import_react_bootstrap","className","vertical","dark","card","tag","testId","attributes","Tag","rootRef","classes","classNames","currentTabIndex","activeTabIndex","handleKeyDown","event","disabled","queriedElements","i","React"]}