@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.2 kB
Source Map (JSON)
{"version":3,"file":"MenuRadioItem.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuRadioItem/MenuRadioItem.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n MantineColor,\n useProps,\n} from '../../../core';\nimport { RadioIcon } from '../../Radio/RadioIcon';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuRadioGroupContext } from '../MenuRadioGroup/MenuRadioGroup.context';\nimport { MenuSelectableItem } from '../MenuSelectableItem/MenuSelectableItem';\nimport classes from '../Menu.module.css';\n\nexport type MenuRadioItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';\n\nexport interface MenuRadioItemProps\n extends\n BoxProps,\n CompoundStylesApiProps<MenuRadioItemFactory>,\n ElementProps<'button', 'color' | 'onChange' | 'value'> {\n 'data-disabled'?: boolean;\n\n /** Item label */\n children?: React.ReactNode;\n\n /** Key of `theme.colors` or any valid CSS color */\n color?: MantineColor;\n\n /** If set, closes the menu when this item is clicked. By default, radio items do not close the menu. */\n closeMenuOnClick?: boolean;\n\n /** Section displayed at the end of the label */\n rightSection?: React.ReactNode;\n\n /** Sets disabled attribute, applies disabled styles */\n disabled?: boolean;\n\n /** Value of the radio item. Used by the parent `Menu.RadioGroup` to determine which item is selected. */\n value: string;\n\n /** Overrides selected state determined by the parent `Menu.RadioGroup`. */\n checked?: boolean;\n\n /** Called with the item value when item is selected. Overrides `onChange` of the parent `Menu.RadioGroup`. */\n onChange?: (value: string) => void;\n\n /** Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`. */\n checkIcon?: React.ReactNode;\n}\n\nexport type MenuRadioItemFactory = Factory<{\n props: MenuRadioItemProps;\n ref: HTMLButtonElement;\n stylesNames: MenuRadioItemStylesNames;\n compound: true;\n}>;\n\nexport const MenuRadioItem = factory<MenuRadioItemFactory>((_props) => {\n const props = useProps('MenuRadioItem', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n color,\n closeMenuOnClick,\n rightSection,\n children,\n disabled,\n 'data-disabled': dataDisabled,\n value,\n checked,\n onChange,\n checkIcon,\n ref,\n ...others\n } = props;\n\n const ctx = useMenuContext();\n const groupCtx = use(MenuRadioGroupContext);\n\n const _checked = checked ?? (groupCtx ? groupCtx.value === value : false);\n const resolvedCheckIcon = checkIcon ?? ctx.checkIcon ?? <RadioIcon size={5} />;\n\n return (\n <MenuSelectableItem\n role=\"menuitemradio\"\n checked={_checked}\n indicator={resolvedCheckIcon}\n onSelect={() => {\n if (!_checked) {\n if (onChange) {\n onChange(value);\n } else if (groupCtx) {\n groupCtx.onChange(value);\n }\n }\n }}\n color={color}\n closeMenuOnClick={closeMenuOnClick}\n rightSection={rightSection}\n disabled={disabled}\n dataDisabled={dataDisabled}\n className={className}\n style={style}\n styles={styles}\n classNames={classNames}\n buttonRef={ref}\n others={others}\n >\n {children}\n </MenuSelectableItem>\n );\n});\n\nMenuRadioItem.classes = classes;\nMenuRadioItem.displayName = '@mantine/core/MenuRadioItem';\n"],"mappings":";;;;;;;;;;;AA4DA,MAAa,gBAAgB,SAA+B,WAAW;CAErE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,kBACA,cACA,UACA,UACA,iBAAiB,cACjB,OACA,SACA,UACA,WACA,KACA,GAAG,WAlBS,SAAS,iBAAiB,MAAM,MAmBtC;CAER,MAAM,MAAM,eAAe;CAC3B,MAAM,WAAW,IAAI,qBAAqB;CAE1C,MAAM,WAAW,YAAY,WAAW,SAAS,UAAU,QAAQ;CAGnE,OACE,oBAAC,oBAAD;EACE,MAAK;EACL,SAAS;EACT,WANsB,aAAa,IAAI,aAAa,oBAAC,WAAD,EAAW,MAAM,EAAI,CAAA;EAOzE,gBAAgB;GACd,IAAI,CAAC;QACC,UACF,SAAS,KAAK;SACT,IAAI,UACT,SAAS,SAAS,KAAK;GAAA;EAG7B;EACO;EACW;EACJ;EACJ;EACI;EACH;EACJ;EACC;EACI;EACZ,WAAW;EACH;EAEP;CACiB,CAAA;AAExB,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}