{"version":3,"file":"static/js/36386.03fc1c6b.chunk.js","mappings":"gLAyBO,MAAMA,EAAkBC,IAC7B,MAAMC,GAAoCC,EAAAA,EAAAA,QAAO,MAUjD,OARAC,EAAAA,EAAAA,IAAgB,KAAO,IAADC,EAAAC,EACN,QAAdD,EAAAH,EAAOK,eAAO,IAAAF,GAAgB,QAAhBC,EAAdD,EAAgBG,sBAAc,IAAAF,GAA9BA,EAAAG,KAAAJ,EAAiC,CAC/BK,SAAU,SACVC,OAAQ,SACRC,MAAO,UACP,GACD,CAACX,EAAMY,eAGRC,EAAAA,EAAAA,KAAA,WACMC,EAAAA,EAAAA,GAAa,mBACjBC,MAAOf,EAAMe,MACbC,WAAWC,EAAAA,EAAAA,GAAG,CACZ,iBACA,mBAAmBjB,EAAMkB,OACzBlB,EAAMgB,WAAa,KAClBG,UAEHN,EAAAA,EAAAA,KAAA,OAAKG,UAAU,uBAAsBG,SAClCnB,EAAMoB,MAAMC,KAAI,CAACC,EAAMC,KACtBV,EAAAA,EAAAA,KAAA,OACEW,IAAKF,EAAKG,MAAQzB,EAAMY,YAAcX,EAAS,KAE/Ce,WAAWC,EAAAA,EAAAA,GAAG,CACZ,2BACA,6BAA6BjB,EAAMkB,OACnC,CACE,mCACEI,EAAKG,MAAQzB,EAAMY,eAGzBc,QAASA,IAAM1B,EAAM2B,SAASL,EAAKG,KAAKN,SAEvCG,EAAKM,OAXDL,QAeP,C","sources":["newcomponents/UI/HorizontalMenu/index.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useRef\n} from 'react';\nimport cc from 'classcat';\nimport { createTestId } from 'utils/helpers/create-test-id';\nimport { useUpdateEffect } from 'newhooks/generic/useUpdateEffect';\nimport './index.less';\n\nexport type Props = {\n  selectedKey: string;\n  style?: CSSProperties;\n  onChange: (arg: string) => void;\n  size: 'small' | 'middle' | 'large';\n  items: Array<{\n    key: string;\n    title: ReactNode;\n    content?: ReactNode;\n  }>;\n  className?: string;\n};\n\nexport const HorizontalMenu = (props: Props): ReactElement => {\n  const tabRef: RefObject<HTMLDivElement> = useRef(null);\n\n  useUpdateEffect(() => {\n    tabRef.current?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'center'\n    });\n  }, [props.selectedKey]);\n\n  return (\n    <div\n      {...createTestId('horizontal-menu')}\n      style={props.style}\n      className={cc([\n        'horizontalMenu',\n        `horizontalMenu--${props.size}`,\n        props.className || ''\n      ])}\n    >\n      <div className=\"horizontalMenu__menu\">\n        {props.items.map((item, index) => (\n          <div\n            ref={item.key === props.selectedKey ? tabRef : null}\n            key={index}\n            className={cc([\n              'horizontalMenu__menuItem',\n              `horizontalMenu__menuItem--${props.size}`,\n              {\n                'horizontalMenu__menuItem--active':\n                  item.key === props.selectedKey\n              }\n            ])}\n            onClick={() => props.onChange(item.key)}\n          >\n            {item.title}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["HorizontalMenu","props","tabRef","useRef","useUpdateEffect","_tabRef$current","_tabRef$current$scrol","current","scrollIntoView","call","behavior","inline","block","selectedKey","_jsx","createTestId","style","className","cc","size","children","items","map","item","index","ref","key","onClick","onChange","title"],"sourceRoot":""}