@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 3.5 kB
Source Map (JSON)
{"version":3,"file":"ComboboxEventsTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","getRefProp"],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop is used to access element ref */\n refProp?: string;\n\n /** If set, the component responds to the keyboard events @default true */\n withKeyboardNavigation?: boolean;\n\n /** If set, the target has `aria-` attributes @default true */\n withAriaAttributes?: boolean;\n\n /** If set, the target has `aria-expanded` attribute @default false */\n withExpandedAttribute?: boolean;\n\n /** Determines which events should be handled by the target element.\n * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n * @default input\n * */\n targetType?: 'button' | 'input';\n\n /** Input autocomplete attribute */\n autoComplete?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n targetType: 'input',\n withKeyboardNavigation: true,\n withAriaAttributes: true,\n withExpandedAttribute: false,\n autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n props: ComboboxEventsTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n const {\n children,\n refProp,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n ref,\n ...others\n } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Combobox.EventsTarget 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 targetProps = useComboboxTargetProps({\n targetType,\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute,\n onKeyDown: (child.props as any).onKeyDown,\n autoComplete,\n });\n\n return cloneElement(child, {\n ...targetProps,\n ...others,\n [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,uBAAuBA,gBAAAA,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,wBAAwB,cAAc,MAAM;CAEzD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,0KACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;AAUhC,SAAA,GAAA,MAAA,cAAoB,OAAO;EACzB,GAVkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC;GACD,CAAC;EAIA,GAAG;GACF,WAAA,GAAA,eAAA,cAAuB,KAAK,IAAI,MAAM,WAAWC,qBAAAA,WAAW,MAAM,CAAC;EACrE,CAAC;EACF;AAEF,qBAAqB,cAAc"}