@saas-ui/search-input/dist/index.modern.mjs.map

A search input for Chakra UI

{"version":3,"file":"index.modern.mjs","sources":["../src/search-input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  forwardRef,\n  InputGroup,\n  Input,\n  InputLeftElement,\n  InputRightElement,\n  IconButton,\n  InputProps,\n  ThemingProps,\n  useMultiStyleConfig,\n  useControllableState,\n} from '@chakra-ui/react'\nimport { callAllHandlers, EventHandler, __DEV__ } from '@chakra-ui/utils'\nimport { SearchIcon, CloseIcon } from '@chakra-ui/icons'\n\nexport interface SearchInputProps\n  extends ThemingProps<'SearchInput'>,\n    Omit<InputProps, 'size' | 'variant'> {\n  /**\n   * The placeholder text for the input\n   * @type string\n   * @default Search\n   */\n  placeholder?: string\n  /**\n   * The icon to render before the input text\n   * @type React.ReactElement\n   */\n  icon?: React.ReactElement\n  /**\n   * The icon to render in the reset button\n   * @type React.ReactElement\n   */\n  resetIcon?: React.ReactElement\n  /**\n   * Right element rendered when the value is empty\n   * @type React.ReactElement\n   */\n  rightElement?: React.ReactElement\n  /**\n   * Callback to trigger when the reset button is clicked or escape key is pressed\n   */\n  onReset?: () => void\n}\n\nexport const SearchInput = forwardRef<SearchInputProps, 'input'>(\n  (props, ref) => {\n    const {\n      value: valueProp,\n      size,\n      variant,\n      icon,\n      resetIcon,\n      rightElement,\n      onChange: onChangeProp,\n      onReset,\n      onKeyDown: onKeyDownProp,\n      ...inputProps\n    } = props\n    const styles = useMultiStyleConfig('SearchInput', props)\n\n    const [value, setValue] = useControllableState({\n      value: valueProp,\n      defaultValue: '',\n    })\n\n    const onChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        setValue(e.target.value)\n      },\n      [setValue]\n    )\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          setValue('')\n          onReset?.()\n        }\n      },\n      [onReset, setValue]\n    )\n\n    const btnSize = size === 'lg' ? 'sm' : 'xs'\n\n    return (\n      <InputGroup size={size}>\n        <InputLeftElement>{icon || <SearchIcon />}</InputLeftElement>\n        <Input\n          type=\"text\"\n          size={size}\n          value={value}\n          ref={ref}\n          sx={styles.input}\n          onChange={callAllHandlers(onChange, onChangeProp)}\n          onKeyDown={callAllHandlers(onKeyDown, onKeyDownProp)}\n          {...inputProps}\n        />\n        <InputRightElement>\n          {value ? (\n            <IconButton\n              onClick={onReset}\n              size={btnSize}\n              variant=\"ghost\"\n              aria-label=\"Reset search\"\n              icon={resetIcon || <CloseIcon />}\n              sx={styles.reset}\n            />\n          ) : (\n            rightElement\n          )}\n        </InputRightElement>\n      </InputGroup>\n    )\n  }\n)\n\nSearchInput.defaultProps = {\n  placeholder: 'Search',\n}\n\nif (__DEV__) {\n  SearchInput.displayName = 'SearchInput'\n}\n"],"names":["_excluded","SearchInput","forwardRef","props","ref","value","valueProp","size","icon","resetIcon","rightElement","onChange","onChangeProp","onReset","onKeyDown","onKeyDownProp","inputProps","useMultiStyleConfig","setValue","useControllableState","defaultValue","React","useCallback","e","target","event","key","btnSize","createElement","InputGroup","InputLeftElement","SearchIcon","Input","_extends","type","sx","styles","input","callAllHandlers","InputRightElement","IconButton","onClick","variant","CloseIcon","reset","defaultProps","placeholder","__DEV__","displayName"],"mappings":"kjBAAA,MAAAA,EAAA,CAAA,QAAA,OAAA,UAAA,OAAA,YAAA,eAAA,WAAA,UAAA,aA+CaC,EAAcC,EACzB,CAACC,EAAOC,KACN,MACEC,MAAOC,EAASC,KAChBA,EAAIC,KAEJA,EAAIC,UACJA,EAASC,aACTA,EACAC,SAAUC,EAAYC,QACtBA,EACAC,UAAWC,GAETZ,EADCa,oIACDb,CAAAA,EACJH,KAAeiB,EAAoB,cAAed,IAE3CE,EAAOa,GAAYC,EAAqB,CAC7Cd,MAAOC,EACPc,aAAc,OAGCC,EAAMC,YACpBC,IACCL,EAASK,EAAEC,OAAOnB,MACpB,EACA,CAACa,MAGeG,EAAMC,YACrBG,IACmB,WAAdA,EAAMC,MACRR,EAAS,IACF,MAAPL,GAAAA,IACD,EAEH,CAACA,EAASK,IAGCS,EAAY,OAATpB,EAAgB,KAAO,kBAEvC,OACEc,EAAAO,cAACC,EAAW,CAAAtB,KAAMA,gBAChBc,EAACO,cAAAE,EAAkBtB,KAAAA,gBAAQa,EAAAO,cAACG,EAAU,oBACtCV,EAAAO,cAACI,EAAKC,EAAA,CACJC,KAAK,OACL3B,KAAMA,EACNF,MAAOA,EACPD,IAAKA,EACL+B,GAAIC,EAAOC,MACX1B,SAAU2B,EAAgB3B,EAAUC,GACpCE,UAAWwB,EAAgBxB,EAAWC,IAClCC,iBAENK,EAAAO,cAACW,EACElC,KAAAA,eACCgB,EAAAO,cAACY,EACC,CAAAC,QAAS5B,EACTN,KAAMoB,EACNe,QAAQ,QACR,aAAW,eACXlC,KAAMC,gBAAaY,EAACO,cAAAe,EAAa,MACjCR,GAAIC,EAAOQ,QAGblC,GAGN,GAKNT,EAAY4C,aAAe,CACzBC,YAAa,UAGXC,IACF9C,EAAY+C,YAAc"}