@mantine/core/cjs/components/Tabs/TabsTab/TabsTab.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"TabsTab.cjs","names":["factory","useProps","useMantineTheme","useDirection","useTabsContext","UnstyledButton","getThemeColor","createScopedKeydownHandler","classes"],"sources":["../../../../src/components/Tabs/TabsTab/TabsTab.tsx"],"sourcesContent":["import {\n  CompoundStylesApiProps,\n  createScopedKeydownHandler,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useDirection,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsTabStylesNames = 'tab' | 'tabSection' | 'tabLabel';\n\nexport interface TabsTabProps\n  extends\n    Omit<UnstyledButtonProps, 'classNames' | 'styles' | 'vars'>,\n    CompoundStylesApiProps<TabsTabFactory>,\n    ElementProps<'button'> {\n  /** Value of associated panel */\n  value: string;\n\n  /** Tab label */\n  children?: React.ReactNode;\n\n  /** Content displayed on the right side of the label */\n  rightSection?: React.ReactNode;\n\n  /** Content displayed on the left side of the label */\n  leftSection?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` */\n  color?: MantineColor;\n}\n\nexport type TabsTabFactory = Factory<{\n  props: TabsTabProps;\n  ref: HTMLButtonElement;\n  stylesNames: TabsTabStylesNames;\n  compound: true;\n}>;\n\nexport const TabsTab = factory<TabsTabFactory>((_props) => {\n  const props = useProps('TabsTab', null, _props);\n  const {\n    className,\n    children,\n    rightSection,\n    leftSection,\n    value,\n    onClick,\n    onKeyDown,\n    disabled,\n    color,\n    style,\n    classNames,\n    styles,\n    vars,\n    mod,\n    tabIndex,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const { dir } = useDirection();\n  const ctx = useTabsContext();\n  const active = value === ctx.value;\n  const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n    onClick?.(event);\n  };\n\n  const stylesApiProps = { classNames, styles, props };\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('tab', { className, style, variant: ctx.variant, ...stylesApiProps })}\n      disabled={disabled}\n      unstyled={ctx.unstyled}\n      variant={ctx.variant}\n      mod={[\n        {\n          active,\n          disabled,\n          orientation: ctx.orientation,\n          inverted: ctx.inverted,\n          placement: ctx.orientation === 'vertical' && ctx.placement,\n        },\n        mod,\n      ]}\n      role=\"tab\"\n      id={ctx.getTabId(value)}\n      aria-selected={active}\n      tabIndex={tabIndex !== undefined ? tabIndex : active || ctx.value === null ? 0 : -1}\n      aria-controls={ctx.getPanelId(value)}\n      onClick={activateTab}\n      __vars={{ '--tabs-color': color ? getThemeColor(color, theme) : undefined }}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[role=\"tab\"]',\n        parentSelector: '[role=\"tablist\"]',\n        activateOnFocus: ctx.activateTabWithKeyboard,\n        loop: ctx.loop,\n        orientation: ctx.orientation || 'horizontal',\n        dir,\n        onKeyDown,\n      })}\n      {...others}\n    >\n      {leftSection && (\n        <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"left\">\n          {leftSection}\n        </span>\n      )}\n      {children && <span {...ctx.getStyles('tabLabel', stylesApiProps)}>{children}</span>}\n      {rightSection && (\n        <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"right\">\n          {rightSection}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nTabsTab.classes = classes;\nTabsTab.displayName = '@mantine/core/TabsTab';\n"],"mappings":";;;;;;;;;;;;;AA8CA,MAAa,UAAUA,gBAAAA,SAAyB,WAAW;CACzD,MAAM,QAAQC,kBAAAA,SAAS,WAAW,MAAM,OAAO;CAC/C,MAAM,EACJ,WACA,UACA,cACA,aACA,OACA,SACA,WACA,UACA,OACA,OACA,YACA,QACA,MACA,KACA,UACA,GAAG,WACD;CAEJ,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,EAAE,QAAQC,0BAAAA,cAAc;CAC9B,MAAM,MAAMC,qBAAAA,gBAAgB;CAC5B,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,eAAe,UAA2D;AAC9E,MAAI,SAAS,IAAI,uBAAwB,UAAU,IAAI,QAAQ,OAAO,QAAS,MAAM;AACrF,YAAU,MAAM;;CAGlB,MAAM,iBAAiB;EAAE;EAAY;EAAQ;EAAO;AAEpD,QACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI,IAAI,UAAU,OAAO;GAAE;GAAW;GAAO,SAAS,IAAI;GAAS,GAAG;GAAgB,CAAC;EAC7E;EACV,UAAU,IAAI;EACd,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA;GACA,aAAa,IAAI;GACjB,UAAU,IAAI;GACd,WAAW,IAAI,gBAAgB,cAAc,IAAI;GAClD,EACD,IACD;EACD,MAAK;EACL,IAAI,IAAI,SAAS,MAAM;EACvB,iBAAe;EACf,UAAU,aAAa,KAAA,IAAY,WAAW,UAAU,IAAI,UAAU,OAAO,IAAI;EACjF,iBAAe,IAAI,WAAW,MAAM;EACpC,SAAS;EACT,QAAQ,EAAE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA,GAAW;EAC3E,WAAWC,sCAAAA,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB,IAAI;GACrB,MAAM,IAAI;GACV,aAAa,IAAI,eAAe;GAChC;GACA;GACD,CAAC;EACF,GAAI;YA/BN;GAiCG,eACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,eAAe;IAAE,iBAAc;cAClE;IACI,CAAA;GAER,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,eAAe;IAAG;IAAgB,CAAA;GAClF,gBACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,eAAe;IAAE,iBAAc;cAClE;IACI,CAAA;GAEM;;EAEnB;AAEF,QAAQ,UAAUC,oBAAAA;AAClB,QAAQ,cAAc"}