@mantine/spotlight/esm/SpotlightSearch.mjs.map

Command center components for react and Mantine

{"version":3,"file":"SpotlightSearch.mjs","names":["classes"],"sources":["../src/SpotlightSearch.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  Input,\n  InputProps,\n  InputStylesNames,\n  useProps,\n} from '@mantine/core';\nimport { useSpotlightContext } from './Spotlight.context';\nimport { spotlightActions } from './spotlight.store';\nimport classes from './Spotlight.module.css';\n\nexport type SpotlightSearchStylesNames = InputStylesNames;\n\nexport interface SpotlightSearchProps\n  extends\n    BoxProps,\n    Omit<InputProps, 'classNames' | 'styles' | 'vars' | 'variant'>,\n    CompoundStylesApiProps<SpotlightSearchFactory>,\n    ElementProps<'input', 'size'> {}\n\nexport type SpotlightSearchFactory = Factory<{\n  props: SpotlightSearchProps;\n  ref: HTMLInputElement;\n  stylesNames: SpotlightSearchStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  size: 'lg',\n} satisfies Partial<SpotlightSearchProps>;\n\nexport const SpotlightSearch = factory<SpotlightSearchFactory>((props) => {\n  const { classNames, styles, onKeyDown, onChange, vars, value, attributes, ...others } = useProps(\n    'SpotlightSearch',\n    defaultProps,\n    props\n  );\n  const ctx = useSpotlightContext();\n  const inputStyles = ctx.getStyles('search');\n  const [isComposing, setIsComposing] = useState(false); // IME\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n    if (isComposing) {\n      return;\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown') {\n      event.preventDefault();\n      spotlightActions.selectNextAction(ctx.store);\n    }\n\n    if (event.nativeEvent.code === 'ArrowUp') {\n      event.preventDefault();\n      spotlightActions.selectPreviousAction(ctx.store);\n    }\n\n    if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n      event.preventDefault();\n      spotlightActions.triggerSelectedAction(ctx.store);\n    }\n  };\n\n  return (\n    <Input\n      {...inputStyles}\n      classNames={[{ input: inputStyles.className }, classNames] as any}\n      styles={[{ input: inputStyles.style }, styles] as any}\n      {...others}\n      value={value ?? ctx.query}\n      onChange={(event) => {\n        ctx.setQuery(event.currentTarget.value);\n        onChange?.(event);\n      }}\n      onKeyDown={handleKeyDown}\n      onCompositionStart={() => setIsComposing(true)}\n      onCompositionEnd={() => setIsComposing(false)}\n    />\n  );\n});\n\nSpotlightSearch.classes = classes;\nSpotlightSearch.displayName = '@mantine/spotlight/SpotlightSearch';\n"],"mappings":";;;;;;;;AAgCA,MAAM,eAAe,EACnB,MAAM,KACR;AAEA,MAAa,kBAAkB,SAAiC,UAAU;CACxE,MAAM,EAAE,YAAY,QAAQ,WAAW,UAAU,MAAM,OAAO,YAAY,GAAG,WAAW,SACtF,mBACA,cACA,KACF;CACA,MAAM,MAAM,oBAAoB;CAChC,MAAM,cAAc,IAAI,UAAU,QAAQ;CAC1C,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,iBAAiB,UAAiD;EACtE,YAAY,KAAK;EACjB,IAAI,aACF;EAGF,IAAI,MAAM,YAAY,SAAS,aAAa;GAC1C,MAAM,eAAe;GACrB,iBAAiB,iBAAiB,IAAI,KAAK;EAC7C;EAEA,IAAI,MAAM,YAAY,SAAS,WAAW;GACxC,MAAM,eAAe;GACrB,iBAAiB,qBAAqB,IAAI,KAAK;EACjD;EAEA,IAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;GAClF,MAAM,eAAe;GACrB,iBAAiB,sBAAsB,IAAI,KAAK;EAClD;CACF;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,YAAY,CAAC,EAAE,OAAO,YAAY,UAAU,GAAG,UAAU;EACzD,QAAQ,CAAC,EAAE,OAAO,YAAY,MAAM,GAAG,MAAM;EAC7C,GAAI;EACJ,OAAO,SAAS,IAAI;EACpB,WAAW,UAAU;GACnB,IAAI,SAAS,MAAM,cAAc,KAAK;GACtC,WAAW,KAAK;EAClB;EACA,WAAW;EACX,0BAA0B,eAAe,IAAI;EAC7C,wBAAwB,eAAe,KAAK;CAC7C,CAAA;AAEL,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}