@mantine/core/cjs/components/Menu/MenuCheckboxItem/MenuCheckboxItem.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"MenuCheckboxItem.cjs","names":["factory","useProps","useMenuContext","MenuCheckboxGroupContext","MenuSelectableItem","CheckIcon","classes"],"sources":["../../../../src/components/Menu/MenuCheckboxItem/MenuCheckboxItem.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineColor,\n  useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox/CheckIcon';\nimport { MenuCheckboxGroupContext } from '../MenuCheckboxGroup/MenuCheckboxGroup.context';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSelectableItem } from '../MenuSelectableItem/MenuSelectableItem';\nimport classes from '../Menu.module.css';\n\nexport type MenuCheckboxItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';\n\nexport interface MenuCheckboxItemProps\n  extends\n    BoxProps,\n    CompoundStylesApiProps<MenuCheckboxItemFactory>,\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, checkbox 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 checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle. */\n  value?: string;\n\n  /** Controlled checked state. Overrides selection derived from the parent `Menu.CheckboxGroup`. */\n  checked?: boolean;\n\n  /** Uncontrolled default checked state. Ignored when the item is used inside `Menu.CheckboxGroup`. */\n  defaultChecked?: boolean;\n\n  /** Called when checked state changes. Overrides `onChange` of the parent `Menu.CheckboxGroup`. */\n  onChange?: (checked: boolean) => void;\n\n  /** Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`. */\n  checkIcon?: React.ReactNode;\n}\n\nexport type MenuCheckboxItemFactory = Factory<{\n  props: MenuCheckboxItemProps;\n  ref: HTMLButtonElement;\n  stylesNames: MenuCheckboxItemStylesNames;\n  compound: true;\n}>;\n\nexport const MenuCheckboxItem = factory<MenuCheckboxItemFactory>((_props) => {\n  const props = useProps('MenuCheckboxItem', 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    defaultChecked,\n    onChange,\n    checkIcon,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = useMenuContext();\n  const groupCtx = use(MenuCheckboxGroupContext);\n\n  const groupChecked =\n    groupCtx && value !== undefined ? groupCtx.values.includes(value) : undefined;\n\n  const [_checked, setChecked] = useUncontrolled({\n    value: checked ?? groupChecked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n    onChange,\n  });\n\n  const resolvedCheckIcon = checkIcon ?? ctx.checkIcon ?? <CheckIcon size={10} />;\n\n  return (\n    <MenuSelectableItem\n      role=\"menuitemcheckbox\"\n      checked={_checked}\n      indicator={resolvedCheckIcon}\n      onSelect={() => {\n        if (onChange) {\n          setChecked(!_checked);\n        } else if (groupCtx && value !== undefined) {\n          groupCtx.onChange(value);\n        } else {\n          setChecked(!_checked);\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\nMenuCheckboxItem.classes = classes;\nMenuCheckboxItem.displayName = '@mantine/core/MenuCheckboxItem';\n"],"mappings":";;;;;;;;;;;;AAgEA,MAAa,mBAAmBA,gBAAAA,SAAkC,WAAW;CAE3E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,kBACA,cACA,UACA,UACA,iBAAiB,cACjB,OACA,SACA,gBACA,UACA,WACA,KACA,GAAG,WAnBSC,kBAAAA,SAAS,oBAAoB,MAAM,MAoBzC;CAER,MAAM,MAAMC,qBAAAA,eAAe;CAC3B,MAAM,YAAA,GAAA,MAAA,IAAA,CAAeC,kCAAAA,wBAAwB;CAE7C,MAAM,eACJ,YAAY,UAAU,KAAA,IAAY,SAAS,OAAO,SAAS,KAAK,IAAI,KAAA;CAEtE,MAAM,CAAC,UAAU,eAAA,GAAA,eAAA,gBAAA,CAA8B;EAC7C,OAAO,WAAW;EAClB,cAAc;EACd,YAAY;EACZ;CACF,CAAC;CAID,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD;EACE,MAAK;EACL,SAAS;EACT,WANsB,aAAa,IAAI,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD,EAAW,MAAM,GAAK,CAAA;EAO1E,gBAAgB;GACd,IAAI,UACF,WAAW,CAAC,QAAQ;QACf,IAAI,YAAY,UAAU,KAAA,GAC/B,SAAS,SAAS,KAAK;QAEvB,WAAW,CAAC,QAAQ;EAExB;EACO;EACW;EACJ;EACJ;EACI;EACH;EACJ;EACC;EACI;EACZ,WAAW;EACH;EAEP;CACiB,CAAA;AAExB,CAAC;AAED,iBAAiB,UAAUC,oBAAAA;AAC3B,iBAAiB,cAAc"}