{"version":3,"file":"searchInput.mjs","names":[],"sources":["../../../../package/common/searchInput/searchInput.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Input from 'components/common/input';\nimport { InputType } from 'components/common/input/input.types';\nimport styles from './searchInput.module.pcss';\nimport { useLabels } from '../configProvider';\nimport type { SearchInputLabels, SearchInputProps } from './searchInput.types';\n\nconst DEFAULT_LABELS: Required<SearchInputLabels> = {\n  results: (count) => `${count} ${count === 1 ? 'result' : 'results'}`,\n};\n\nexport default function SearchInput({\n  value,\n  onChange,\n  onDebounce,\n  placeholder,\n  label,\n  debounceMs = 500,\n  totalAmount,\n  showAmount = true,\n  className,\n  width,\n  style,\n  classNames,\n  styles: slotStyles,\n  labels,\n  ref,\n  ...rest\n}: SearchInputProps): ReactElement {\n  const text = useLabels('SearchInput', labels, DEFAULT_LABELS);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current !== null) clearTimeout(timerRef.current);\n    },\n    [],\n  );\n\n  function handleChange(val: unknown) {\n    const str = val != null ? String(val) : '';\n    const trimmed = str.trim() === '' ? '' : str;\n    onChange(trimmed);\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(() => {\n      onDebounce?.(trimmed);\n    }, debounceMs);\n  }\n\n  const showCount = showAmount && typeof totalAmount === 'number' && !Number.isNaN(totalAmount);\n\n  return (\n    <div\n      {...rest}\n      className={cx(className, classNames?.root)}\n      style={{ ...(width != null ? { width } : undefined), ...style, ...slotStyles?.root }}\n    >\n      <Input\n        ref={ref}\n        autoComplete='off'\n        className={classNames?.input}\n        style={slotStyles?.input}\n        type={InputType.Search}\n        label={label}\n        placeholder={placeholder}\n        value={value}\n        onChange={handleChange}\n      />\n      {showCount && (\n        <p className={cx(styles.resultCount, classNames?.resultCount)} style={slotStyles?.resultCount}>\n          {text.results(totalAmount)}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"kUAQA,IAAM,EAA8C,CAClD,QAAU,GAAU,GAAG,EAAM,GAAG,IAAU,EAAI,SAAW,WAC3D,EAEA,SAAwB,EAAY,CAClC,QACA,WACA,aACA,cACA,QACA,aAAa,IACb,cACA,aAAa,GACb,YACA,QACA,QACA,aACA,OAAQ,EACR,SACA,MACA,GAAG,GAC8B,CACjC,IAAM,EAAO,EAAU,cAAe,EAAQ,CAAc,EACtD,EAAW,EAA6C,IAAI,EAElE,UACc,CACN,EAAS,UAAY,MAAM,aAAa,EAAS,OAAO,CAC9D,EACA,CAAC,CACH,EAEA,SAAS,EAAa,EAAc,CAClC,IAAM,EAAM,GAAO,KAAqB,GAAd,OAAO,CAAG,EAC9B,EAAU,EAAI,KAAK,IAAM,GAAK,GAAK,EACzC,EAAS,CAAO,EACZ,EAAS,UAAY,MAAM,aAAa,EAAS,OAAO,EAC5D,EAAS,QAAU,eAAiB,CAClC,IAAa,CAAO,CACtB,EAAG,CAAU,CACf,CAEA,IAAM,EAAY,GAAc,OAAO,GAAgB,UAAY,CAAC,OAAO,MAAM,CAAW,EAE5F,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAW,GAAY,IAAI,EACzC,MAAO,CAAE,GAAI,GAAS,KAAmB,IAAA,GAAZ,CAAE,OAAM,EAAgB,GAAG,EAAO,GAAG,GAAY,IAAK,EAHrF,SAAA,CAKE,EAAC,EAAD,CACO,MACL,aAAa,MACb,UAAW,GAAY,MACvB,MAAO,GAAY,MACnB,KAAM,EAAU,OACT,QACM,cACN,QACP,SAAU,CACX,CAAA,EACA,GACC,EAAC,IAAD,CAAG,UAAW,EAAG,EAAO,YAAa,GAAY,WAAW,EAAG,MAAO,GAAY,YAC/E,SAAA,EAAK,QAAQ,CAAW,CACxB,CAAA,CAEF,GAET"}