@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 3.08 kB
Source Map (JSON)
{"version":3,"file":"ComboboxPopoverTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","getRefProp","useComboboxTargetProps","Popover"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../core';\nimport { useComboboxContext } from '../Combobox/Combobox.context';\nimport { useComboboxTargetProps } from '../Combobox/use-combobox-target-props/use-combobox-target-props';\nimport { Popover } from '../Popover';\n\nexport interface ComboboxPopoverTargetProps {\n children: React.ReactNode;\n\n /** Key of the prop that is used to access element ref @default 'ref' */\n refProp?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<ComboboxPopoverTargetProps>;\n\nexport type ComboboxPopoverTargetFactory = Factory<{\n props: ComboboxPopoverTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxPopoverTarget = factory<ComboboxPopoverTargetFactory>((props) => {\n const { children, refProp, ref, ...others } = useProps(\n 'ComboboxPopoverTarget',\n defaultProps,\n props\n );\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'ComboboxPopover.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 ctx = useComboboxContext();\n const targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));\n\n const targetProps = useComboboxTargetProps({\n targetType: 'button',\n withAriaAttributes: true,\n withKeyboardNavigation: true,\n withExpandedAttribute: true,\n onKeyDown: (child.props as any).onKeyDown,\n onClick: (event) => {\n ctx.store.toggleDropdown();\n (child.props as any).onClick?.(event);\n },\n autoComplete: 'off',\n });\n\n const clonedElement = cloneElement(child, {\n ...targetProps,\n ...others,\n [refProp!]: targetRef,\n } as any);\n\n return <Popover.Target refProp={refProp}>{clonedElement}</Popover.Target>;\n});\n\nComboboxPopoverTarget.displayName = '@mantine/core/ComboboxPopoverTarget';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,eAAe,EACnB,SAAS,MACX;AAQA,MAAa,wBAAwBA,gBAAAA,SAAuC,UAAU;CACpF,MAAM,EAAE,UAAU,SAAS,KAAK,GAAG,WAAWC,kBAAAA,SAC5C,yBACA,cACA,KACF;CAEA,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,0KACF;CAGF,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAA,eAAA,aAAA,CAAyB,KAAK,IAAI,MAAM,WAAWC,qBAAAA,WAAW,KAAK,CAAC;CAe1E,MAAM,iBAAA,GAAA,MAAA,aAAA,CAA6B,OAAO;EACxC,GAdkBC,kCAAAA,uBAAuB;GACzC,YAAY;GACZ,oBAAoB;GACpB,wBAAwB;GACxB,uBAAuB;GACvB,WAAY,MAAM,MAAc;GAChC,UAAU,UAAU;IAClB,IAAI,MAAM,eAAe;IACzB,MAAO,MAAc,UAAU,KAAK;GACtC;GACA,cAAc;EAChB,CAGe;EACb,GAAG;GACF,UAAW;CACd,CAAQ;CAER,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,QAAT;EAAyB;YAAU;CAA8B,CAAA;AAC1E,CAAC;AAED,sBAAsB,cAAc"}