@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      <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,KAAK;AAgCjF,MAAM,eAAe,EACnB,YAAY,MACb;AAED,MAAM,eAAeA,6BAAAA,oBAAsC,GAAG,EAAE,cAAc,EAC5E,MAAM,EACJ,iBAAiBC,iBAAAA,UAAU,OAAO,EACnC,EACF,EAAE;AAEH,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,OAAO;CACzD,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;EACf,CAAC;CAEF,MAAM,EAAE,QAAQC,0BAAAA,cAAc;CAC9B,MAAM,OAAA,GAAA,MAAA,KAAUC,mBAAAA,kBAAkB;CAClC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,UAAU,SAAS;CAClF,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,iBAAiB,UAAkD;AACvE,cAAY,MAAM;AAElB,MAAI,CAAC,MACH;AAGF,MAAI;GAAC;GAAa;GAAW;GAAa;GAAa,CAAC,SAAS,MAAM,YAAY,KAAK,EAAE;AACxF,SAAM,gBAAgB;GAEtB,MAAM,WAAW,MAAM,KACrB,SAAS,iBAAoC,wBAAwB,MAAM,IAAI,CAChF;GAED,MAAM,eAAe,SAAS,WAAW,YAAY,YAAY,MAAM,OAAO;GAC9E,MAAM,YAAY,eAAe,KAAK,SAAS,SAAS,IAAI,eAAe;GAC3E,MAAM,YAAY,eAAe,IAAI,IAAI,SAAS,SAAS,IAAI,eAAe;AAE9E,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,aAAS,WAAW,OAAO;AAC3B,aAAS,WAAW,OAAO;;AAG7B,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,aAAS,WAAW,OAAO;AAC3B,aAAS,WAAW,OAAO;;AAG7B,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,aAAS,QAAQ,QAAQ,YAAY,WAAW,OAAO;AACvD,aAAS,QAAQ,QAAQ,YAAY,WAAW,OAAO;;AAGzD,OAAI,MAAM,YAAY,SAAS,cAAc;AAC3C,aAAS,QAAQ,QAAQ,YAAY,WAAW,OAAO;AACvD,aAAS,QAAQ,QAAQ,YAAY,WAAW,OAAO;;;;AAK7D,QACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,OAAO,EAAE,SAAS,UAAU;YAC5C,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;IAAU,EAAE,IAAI;GAC5D,GAAI,UAAU,OAAO;GACrB,GAAI;GACJ,MAAK;GACL,gBAAc;GACd,MAAM;GACN,UAAU,UAAU;AAClB,cAAU,MAAM;AAChB,SAAK,SAAS,SAAS,GAAG;;GAE5B,WAAW;GACX,CAAA;EACe,CAAA;EAErB;AAEF,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe"}