@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 6.33 kB
Source Map (JSON)
{"version":3,"file":"MenuSelectableItem.mjs","names":[],"sources":["../../../../src/components/Menu/MenuSelectableItem/MenuSelectableItem.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n createEventHandler,\n createScopedKeydownHandler,\n MantineColor,\n parseThemeColor,\n useDirection,\n useMantineTheme,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\n\nexport interface MenuSelectableItemProps {\n role: 'menuitemcheckbox' | 'menuitemradio';\n checked: boolean;\n indicator: React.ReactNode;\n onSelect: () => void;\n color: MantineColor | undefined;\n closeMenuOnClick: boolean | undefined;\n rightSection: React.ReactNode;\n children: React.ReactNode;\n disabled: boolean | undefined;\n dataDisabled: boolean | undefined;\n className: string | undefined;\n style: any;\n styles: any;\n classNames: any;\n buttonRef: React.Ref<HTMLButtonElement> | undefined;\n others: Record<string, any>;\n}\n\nexport function MenuSelectableItem({\n role,\n checked,\n indicator,\n onSelect,\n color,\n closeMenuOnClick,\n rightSection,\n children,\n disabled,\n dataDisabled,\n className,\n style,\n styles,\n classNames,\n buttonRef,\n others,\n}: MenuSelectableItemProps) {\n const ctx = useMenuContext();\n const subCtx = use(SubMenuContext);\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const itemRef = useRef<HTMLButtonElement>(null);\n\n const handleClick = createEventHandler<any>(others.onClick, () => {\n if (dataDisabled) {\n return;\n }\n onSelect();\n if (closeMenuOnClick) {\n ctx.closeDropdownImmediately();\n }\n });\n\n const handleMouseMove = createEventHandler<any>(others.onMouseMove, () => {\n if (!ctx.hasSearch) {\n return;\n }\n const dropdown = itemRef.current?.closest('[data-menu-dropdown]');\n if (!dropdown) {\n return;\n }\n dropdown.querySelectorAll<HTMLElement>('[data-menu-active]').forEach((node) => {\n if (node !== itemRef.current && node.closest('[data-menu-dropdown]') === dropdown) {\n node.removeAttribute('data-menu-active');\n }\n });\n });\n\n const handleKeydown = createEventHandler<any>(others.onKeyDown, (event) => {\n if (event.key === 'ArrowLeft' && subCtx) {\n subCtx.close();\n subCtx.focusParentItem();\n }\n });\n\n const colors = color ? theme.variantColorResolver({ color, theme, variant: 'light' }) : undefined;\n const parsedThemeColor = color ? parseThemeColor({ color, theme }) : null;\n const renderIndicator = ctx.alignItemsLabels !== 'none' || checked;\n\n return (\n <UnstyledButton\n onMouseDown={(event) => event.preventDefault()}\n {...others}\n unstyled={ctx.unstyled}\n tabIndex={ctx.menuItemTabIndex}\n {...ctx.getStyles('item', { className, style, styles, classNames })}\n ref={useMergedRef(itemRef, buttonRef)}\n role={role}\n aria-checked={checked}\n disabled={disabled}\n data-menu-item\n data-checked={checked || undefined}\n data-disabled={disabled || dataDisabled || undefined}\n data-mantine-stop-propagation\n onClick={handleClick}\n onMouseMove={handleMouseMove}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[data-menu-item]:not([data-disabled])',\n parentSelector: '[data-menu-dropdown]',\n activateOnFocus: false,\n loop: ctx.loop,\n dir,\n orientation: 'vertical',\n onKeyDown: handleKeydown,\n })}\n __vars={{\n '--menu-item-color':\n parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === undefined\n ? `var(--mantine-color-${parsedThemeColor.color}-6)`\n : colors?.color,\n '--menu-item-hover': colors?.hover,\n }}\n >\n {renderIndicator && (\n <div\n {...ctx.getStyles('itemIndicator', { styles, classNames })}\n data-checked={checked || undefined}\n >\n {checked ? indicator : null}\n </div>\n )}\n {children && (\n <div {...ctx.getStyles('itemLabel', { styles, classNames })} data-menu-item-label>\n {children}\n </div>\n )}\n {rightSection && (\n <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"right\">\n {rightSection}\n </div>\n )}\n </UnstyledButton>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AAiCA,SAAgB,mBAAmB,EACjC,MACA,SACA,WACA,UACA,OACA,kBACA,cACA,UACA,UACA,cACA,WACA,OACA,QACA,YACA,WACA,UAC0B;CAC1B,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,UAAU,OAA0B,IAAI;CAE9C,MAAM,cAAc,mBAAwB,OAAO,eAAe;EAChE,IAAI,cACF;EAEF,SAAS;EACT,IAAI,kBACF,IAAI,yBAAyB;CAEjC,CAAC;CAED,MAAM,kBAAkB,mBAAwB,OAAO,mBAAmB;EACxE,IAAI,CAAC,IAAI,WACP;EAEF,MAAM,WAAW,QAAQ,SAAS,QAAQ,sBAAsB;EAChE,IAAI,CAAC,UACH;EAEF,SAAS,iBAA8B,oBAAoB,CAAC,CAAC,SAAS,SAAS;GAC7E,IAAI,SAAS,QAAQ,WAAW,KAAK,QAAQ,sBAAsB,MAAM,UACvE,KAAK,gBAAgB,kBAAkB;EAE3C,CAAC;CACH,CAAC;CAED,MAAM,gBAAgB,mBAAwB,OAAO,YAAY,UAAU;EACzE,IAAI,MAAM,QAAQ,eAAe,QAAQ;GACvC,OAAO,MAAM;GACb,OAAO,gBAAgB;EACzB;CACF,CAAC;CAED,MAAM,SAAS,QAAQ,MAAM,qBAAqB;EAAE;EAAO;EAAO,SAAS;CAAQ,CAAC,IAAI,KAAA;CACxF,MAAM,mBAAmB,QAAQ,gBAAgB;EAAE;EAAO;CAAM,CAAC,IAAI;CACrE,MAAM,kBAAkB,IAAI,qBAAqB,UAAU;CAE3D,OACE,qBAAC,gBAAD;EACE,cAAc,UAAU,MAAM,eAAe;EAC7C,GAAI;EACJ,UAAU,IAAI;EACd,UAAU,IAAI;EACd,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO;GAAQ;EAAW,CAAC;EAClE,KAAK,aAAa,SAAS,SAAS;EAC9B;EACN,gBAAc;EACJ;EACV,kBAAA;EACA,gBAAc,WAAW,KAAA;EACzB,iBAAe,YAAY,gBAAgB,KAAA;EAC3C,iCAAA;EACA,SAAS;EACT,aAAa;EACb,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB;GACjB,MAAM,IAAI;GACV;GACA,aAAa;GACb,WAAW;EACb,CAAC;EACD,QAAQ;GACN,qBACE,kBAAkB,gBAAgB,kBAAkB,UAAU,KAAA,IAC1D,uBAAuB,iBAAiB,MAAM,OAC9C,QAAQ;GACd,qBAAqB,QAAQ;EAC/B;YA/BF;GAiCG,mBACC,oBAAC,OAAD;IACE,GAAI,IAAI,UAAU,iBAAiB;KAAE;KAAQ;IAAW,CAAC;IACzD,gBAAc,WAAW,KAAA;cAExB,UAAU,YAAY;GACpB,CAAA;GAEN,YACC,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa;KAAE;KAAQ;IAAW,CAAC;IAAG,wBAAA;IAC1D;GACE,CAAA;GAEN,gBACC,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;IAAW,CAAC;IAAG,iBAAc;cAC1E;GACE,CAAA;EAEO;;AAEpB"}