@mantine/core/cjs/components/Radio/RadioCard/RadioCard.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"RadioCard.cjs","names":["createVarsResolver","getRadius","factory","useProps","useStyles","useDirection","RadioGroupContext","UnstyledButton","classes"],"sources":["../../../../src/components/Radio/RadioCard/RadioCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  MantineRadius,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroup';\nimport classes from './RadioCard.module.css';\n\nexport interface RadioCardContextValue {\n  checked: boolean;\n}\n\nexport const RadioCardContext = createContext<RadioCardContextValue | null>(null);\n\nexport type RadioCardStylesNames = 'card';\nexport type RadioCardCssVariables = {\n  card: '--card-radius';\n};\n\nexport interface RadioCardProps\n  extends BoxProps, StylesApiProps<RadioCardFactory>, ElementProps<'button', 'onChange'> {\n  /** Checked state */\n  checked?: boolean;\n\n  /** Adds border to the root element */\n  withBorder?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Value of the radio, used with Radio.Group */\n  value?: string;\n\n  /** Value used to associate all related radio cards, required for accessibility if used outside of `Radio.Group` */\n  name?: string;\n}\n\nexport type RadioCardFactory = Factory<{\n  props: RadioCardProps;\n  ref: HTMLButtonElement;\n  stylesNames: RadioCardStylesNames;\n  vars: RadioCardCssVariables;\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n} satisfies Partial<RadioCardProps>;\n\nconst varsResolver = createVarsResolver<RadioCardFactory>((_, { radius }) => ({\n  card: {\n    '--card-radius': getRadius(radius),\n  },\n}));\n\nexport const RadioCard = factory<RadioCardFactory>((_props) => {\n  const props = useProps('RadioCard', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    checked,\n    mod,\n    withBorder,\n    value,\n    onClick,\n    name,\n    onKeyDown,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioCardFactory>({\n    name: 'RadioCard',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'card',\n  });\n\n  const { dir } = useDirection();\n  const ctx = use(RadioGroupContext);\n  const _checked = typeof checked === 'boolean' ? checked : ctx?.value === value || false;\n  const _name = name || ctx?.name;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (!_name) {\n      return;\n    }\n\n    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.code)) {\n      event.preventDefault();\n\n      const siblings = Array.from(\n        document.querySelectorAll<HTMLButtonElement>(`[role=\"radio\"][name=\"${_name}\"]`)\n      );\n\n      const currentIndex = siblings.findIndex((element) => element === event.target);\n      const nextIndex = currentIndex + 1 >= siblings.length ? 0 : currentIndex + 1;\n      const prevIndex = currentIndex - 1 < 0 ? siblings.length - 1 : currentIndex - 1;\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        siblings[nextIndex].focus();\n        siblings[nextIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        siblings[prevIndex].focus();\n        siblings[prevIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowLeft') {\n        siblings[dir === 'ltr' ? prevIndex : nextIndex].focus();\n        siblings[dir === 'ltr' ? prevIndex : nextIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowRight') {\n        siblings[dir === 'ltr' ? nextIndex : prevIndex].focus();\n        siblings[dir === 'ltr' ? nextIndex : prevIndex].click();\n      }\n    }\n  };\n\n  return (\n    <RadioCardContext value={{ checked: _checked }}>\n      {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus -- UnstyledButton renders a native <button> which is focusable */}\n      <UnstyledButton\n        mod={[{ 'with-border': withBorder, checked: _checked }, mod]}\n        {...getStyles('card')}\n        {...others}\n        role=\"radio\"\n        aria-checked={_checked}\n        name={_name}\n        onClick={(event) => {\n          onClick?.(event);\n          ctx?.onChange(value || '');\n        }}\n        onKeyDown={handleKeyDown}\n      />\n    </RadioCardContext>\n  );\n});\n\nRadioCard.displayName = '@mantine/core/RadioCard';\nRadioCard.classes = classes;\nRadioCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAa,oBAAA,GAAA,MAAA,eAA+D,IAAI;AAgChF,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAeA,6BAAAA,oBAAsC,GAAG,EAAE,cAAc,EAC5E,MAAM,EACJ,iBAAiBC,iBAAAA,UAAU,MAAM,EACnC,EACF,EAAE;AAEF,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,OAAA,GAAA,MAAA,KAAUC,mBAAAA,iBAAiB;CACjC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,UAAU,SAAS;CAClF,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,iBAAiB,UAAkD;EACvE,YAAY,KAAK;EAEjB,IAAI,CAAC,OACH;EAGF,IAAI;GAAC;GAAa;GAAW;GAAa;EAAY,EAAE,SAAS,MAAM,YAAY,IAAI,GAAG;GACxF,MAAM,eAAe;GAErB,MAAM,WAAW,MAAM,KACrB,SAAS,iBAAoC,wBAAwB,MAAM,GAAG,CAChF;GAEA,MAAM,eAAe,SAAS,WAAW,YAAY,YAAY,MAAM,MAAM;GAC7E,MAAM,YAAY,eAAe,KAAK,SAAS,SAAS,IAAI,eAAe;GAC3E,MAAM,YAAY,eAAe,IAAI,IAAI,SAAS,SAAS,IAAI,eAAe;GAE9E,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,WAAW,MAAM;IAC1B,SAAS,WAAW,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW;IACxC,SAAS,WAAW,MAAM;IAC1B,SAAS,WAAW,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,QAAQ,QAAQ,YAAY,WAAW,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,WAAW,MAAM;GACxD;GAEA,IAAI,MAAM,YAAY,SAAS,cAAc;IAC3C,SAAS,QAAQ,QAAQ,YAAY,WAAW,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,WAAW,MAAM;GACxD;EACF;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,OAAO,EAAE,SAAS,SAAS;YAE3C,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;GAAS,GAAG,GAAG;GAC3D,GAAI,UAAU,MAAM;GACpB,GAAI;GACJ,MAAK;GACL,gBAAc;GACd,MAAM;GACN,UAAU,UAAU;IAClB,UAAU,KAAK;IACf,KAAK,SAAS,SAAS,EAAE;GAC3B;GACA,WAAW;EACZ,CAAA;CACe,CAAA;AAEtB,CAAC;AAED,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe"}