@mantine/core/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n  targetType: 'input' | 'button' | undefined;\n  withAriaAttributes: boolean | undefined;\n  withKeyboardNavigation: boolean | undefined;\n  withExpandedAttribute: boolean | undefined;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n  onClick: React.MouseEventHandler<HTMLInputElement> | undefined;\n  autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n  onKeyDown,\n  onClick,\n  withKeyboardNavigation,\n  withAriaAttributes,\n  withExpandedAttribute,\n  targetType,\n  autoComplete,\n}: UseComboboxTargetPropsInput) {\n  const ctx = useComboboxContext();\n  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (ctx.readOnly) {\n      return;\n    }\n\n    if (withKeyboardNavigation) {\n      // Ignore during composition in IME\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectNextOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectPreviousOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n        // This is a workaround for handling differences in behavior of isComposing property in Safari\n        // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n        // oxlint-disable-next-line typescript/no-deprecated\n        if (event.nativeEvent.keyCode === 229) {\n          return;\n        }\n\n        const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n        if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n          event.preventDefault();\n          ctx.store.clickSelectedOption();\n        } else if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.openDropdown('keyboard');\n        }\n      }\n\n      if (event.key === 'Escape') {\n        ctx.store.closeDropdown('keyboard');\n      }\n\n      if (event.nativeEvent.code === 'Space') {\n        if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.toggleDropdown('keyboard');\n        }\n      }\n    }\n  };\n\n  const ariaAttributes = withAriaAttributes\n    ? {\n        ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n        'aria-haspopup': 'listbox' as const,\n        'aria-expanded': withExpandedAttribute\n          ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n          : undefined,\n        'aria-controls':\n          ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n        'aria-activedescendant': ctx.store.dropdownOpened\n          ? selectedOptionId || undefined\n          : undefined,\n        autoComplete,\n        'data-expanded': ctx.store.dropdownOpened || undefined,\n        'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n      }\n    : {};\n\n  const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    // Safari does not give keyboard focus to non-text-input elements (including\n    // readOnly inputs rendered as buttons) on click, which prevents onKeyDown\n    // from firing. Explicitly focus the target when targetType is 'button'.\n    if (targetType === 'button') {\n      event.currentTarget.focus();\n    }\n\n    onClick?.(event);\n  };\n\n  return {\n    ...ariaAttributes,\n    onKeyDown: handleKeyDown,\n    onClick: handleClick,\n  };\n}\n"],"mappings":";;;;;AAaA,SAAgB,uBAAuB,EACrC,WACA,SACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAMA,yBAAAA,mBAAmB;CAC/B,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,UAA+C,IAAI;CAE5E,MAAM,iBAAiB,UAAiD;EACtE,YAAY,KAAK;EAEjB,IAAI,IAAI,UACN;EAGF,IAAI,wBAAwB;GAE1B,IAAI,MAAM,YAAY,aACpB;GAGF,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,MAAM,eAAe;IAErB,IAAI,CAAC,IAAI,MAAM,gBAAgB;KAC7B,IAAI,MAAM,aAAa,UAAU;KACjC,oBAAoB,IAAI,MAAM,mBAAmB,CAAC;KAClD,IAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,KAAK,CAAC;IAC1E,OACE,oBAAoB,IAAI,MAAM,iBAAiB,CAAC;GAEpD;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW;IACxC,MAAM,eAAe;IAErB,IAAI,CAAC,IAAI,MAAM,gBAAgB;KAC7B,IAAI,MAAM,aAAa,UAAU;KACjC,oBAAoB,IAAI,MAAM,mBAAmB,CAAC;KAClD,IAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,KAAK,CAAC;IAC1E,OACE,oBAAoB,IAAI,MAAM,qBAAqB,CAAC;GAExD;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;IAIlF,IAAI,MAAM,YAAY,YAAY,KAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,uBAAuB;IAE7D,IAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;KAC1D,MAAM,eAAe;KACrB,IAAI,MAAM,oBAAoB;IAChC,OAAO,IAAI,eAAe,UAAU;KAClC,MAAM,eAAe;KACrB,IAAI,MAAM,aAAa,UAAU;IACnC;GACF;GAEA,IAAI,MAAM,QAAQ,UAChB,IAAI,MAAM,cAAc,UAAU;GAGpC,IAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;KAC3B,MAAM,eAAe;KACrB,IAAI,MAAM,eAAe,UAAU;IACrC;;EAEJ;CACF;CAEA,MAAM,iBAAiB,qBACnB;EACE,GAAI,wBAAwB,EAAE,MAAM,WAAoB,IAAI,CAAC;EAC7D,iBAAiB;EACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;EACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;EACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;EACJ;EACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;EAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;CAC/D,IACA,CAAC;CAEL,MAAM,eAAe,UAA8C;EAIjE,IAAI,eAAe,UACjB,MAAM,cAAc,MAAM;EAG5B,UAAU,KAAK;CACjB;CAEA,OAAO;EACL,GAAG;EACH,WAAW;EACX,SAAS;CACX;AACF"}