UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines 3.22 kB
{"version":3,"file":"PopoverTarget.cjs","names":["factory","useProps","getSingleElementChild","usePopoverContext","getRefProp"],"sources":["../../../../src/components/Popover/PopoverTarget/PopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop that should be used to access element ref */\n refProp?: string;\n\n /** Popup accessible type @default 'dialog' */\n popupType?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n popupType: 'dialog',\n} satisfies Partial<PopoverTargetProps>;\n\nexport type PopoverTargetFactory = Factory<{\n props: PopoverTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const PopoverTarget = factory<PopoverTargetFactory>((props) => {\n const { children, refProp, popupType, ref, ...others } = useProps(\n 'PopoverTarget',\n defaultProps,\n props\n );\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Popover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const forwardedProps: any = others;\n const ctx = usePopoverContext();\n const targetRef = useMergedRef(ctx.reference, getRefProp(child), ref);\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-haspopup': popupType,\n 'aria-expanded': ctx.opened,\n 'aria-controls': ctx.opened ? ctx.getDropdownId() : undefined,\n id: ctx.getTargetId(),\n }\n : {};\n\n const childProps = child.props as any;\n return cloneElement(child, {\n ...forwardedProps,\n ...accessibleProps,\n ...ctx.targetProps,\n className: cx(ctx.targetProps.className, forwardedProps.className, childProps.className),\n [refProp]: targetRef,\n ...(!ctx.controlled\n ? {\n onClick: (event: React.MouseEvent<HTMLElement>) => {\n ctx.onToggle();\n childProps.onClick?.(event);\n },\n }\n : null),\n });\n});\n\nPopoverTarget.displayName = '@mantine/core/PopoverTarget';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,eAAe;CACnB,SAAS;CACT,WAAW;CACZ;AAQD,MAAa,gBAAgBA,gBAAAA,SAA+B,UAAU;CACpE,MAAM,EAAE,UAAU,SAAS,WAAW,KAAK,GAAG,WAAWC,kBAAAA,SACvD,iBACA,cACA,MACD;CAED,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,mKACD;CAGH,MAAM,iBAAsB;CAC5B,MAAM,MAAMC,wBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAA,eAAA,cAAyB,IAAI,WAAWC,qBAAAA,WAAW,MAAM,EAAE,IAAI;CAErE,MAAM,kBAAkB,IAAI,YACxB;EACE,iBAAiB;EACjB,iBAAiB,IAAI;EACrB,iBAAiB,IAAI,SAAS,IAAI,eAAe,GAAG,KAAA;EACpD,IAAI,IAAI,aAAa;EACtB,GACD,EAAE;CAEN,MAAM,aAAa,MAAM;AACzB,SAAA,GAAA,MAAA,cAAoB,OAAO;EACzB,GAAG;EACH,GAAG;EACH,GAAG,IAAI;EACP,YAAA,GAAA,KAAA,SAAc,IAAI,YAAY,WAAW,eAAe,WAAW,WAAW,UAAU;GACvF,UAAU;EACX,GAAI,CAAC,IAAI,aACL,EACE,UAAU,UAAyC;AACjD,OAAI,UAAU;AACd,cAAW,UAAU,MAAM;KAE9B,GACD;EACL,CAAC;EACF;AAEF,cAAc,cAAc"}