{"version":3,"sources":["../../../../src/lib/api-keys/api-keys-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"radix-ui/internal\";\nimport { Cross2Icon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport cx from \"clsx\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IconButton, TextField, TextFieldSlot } from \"../elements.js\";\nimport { useApiKeysSearchContext } from \"./api-keys-search-provider.js\";\nimport { useApiKeysContext } from \"./api-keys-context.js\";\nimport { namespaceClassNames } from \"../utils.js\";\nimport { useTranslation } from \"../i18n/use-translation.js\";\n\ntype ApiKeysSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;\n\nexport const ApiKeysSearch = React.forwardRef<\n  HTMLInputElement,\n  ApiKeysSearchProps\n>(({ className, ...props }, ref) => {\n  const { inputRef, clearSearch, searchValue, setSearchValue } =\n    useApiKeysSearchContext();\n  const { dispatch } = useApiKeysContext();\n  const translate = useTranslation();\n\n  const filter = useDebouncedCallback((value) => {\n    dispatch({ type: \"FILTER_BY_SEARCH\", searchQuery: value });\n  }, 200);\n\n  const resetSearch = () => {\n    clearSearch();\n    filter.cancel();\n  };\n\n  return (\n    <TextField\n      ref={useComposedRefs(inputRef, ref)}\n      className={cx(namespaceClassNames(\"api-keys-search\"), className)}\n      autoComplete=\"off\"\n      placeholder={translate({\n        defaultMessage: \"Search by name\",\n        id: \"GC8aGI\",\n        description: \"Placeholder for API key search input\",\n      })}\n      value={searchValue}\n      onChange={(event) => {\n        const value = event.target.value;\n        setSearchValue(value);\n        filter(value);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          resetSearch();\n        }\n      }}\n      {...props}\n    >\n      <TextFieldSlot side=\"left\">\n        <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n      </TextFieldSlot>\n\n      <TextFieldSlot side=\"right\">\n        {!!searchValue && (\n          <IconButton\n            size=\"1\"\n            onClick={resetSearch}\n            title={translate({\n              defaultMessage: \"Clear search\",\n              id: \"7enwzK\",\n              description: \"Title tooltip for clear search button\",\n            })}\n          >\n            <Cross2Icon aria-hidden=\"true\" />\n          </IconButton>\n        )}\n      </TextFieldSlot>\n    </TextField>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAhCJ,sBAAgC;AAChC,yBAAgD;AAChD,kBAAe;AACf,YAAuB;AACvB,0BAAqC;AACrC,sBAAqD;AACrD,sCAAwC;AACxC,8BAAkC;AAClC,mBAAoC;AACpC,6BAA+B;AAIxB,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,UAAU,aAAa,aAAa,eAAe,QACzD,yDAAwB;AAC1B,QAAM,EAAE,SAAS,QAAI,2CAAkB;AACvC,QAAM,gBAAY,uCAAe;AAEjC,QAAM,aAAS,0CAAqB,CAAC,UAAU;AAC7C,aAAS,EAAE,MAAM,oBAAoB,aAAa,MAAM,CAAC;AAAA,EAC3D,GAAG,GAAG;AAEN,QAAM,cAAc,MAAM;AACxB,gBAAY;AACZ,WAAO,OAAO;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAK,iCAAgB,UAAU,GAAG;AAAA,MAClC,eAAW,YAAAA,aAAG,kCAAoB,iBAAiB,GAAG,SAAS;AAAA,MAC/D,cAAa;AAAA,MACb,aAAa,UAAU;AAAA,QACrB,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf,CAAC;AAAA,MACD,OAAO;AAAA,MACP,UAAU,CAAC,UAAU;AACnB,cAAM,QAAQ,MAAM,OAAO;AAC3B,uBAAe,KAAK;AACpB,eAAO,KAAK;AAAA,MACd;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,UAAU;AAC1B,gBAAM,eAAe;AACrB,sBAAY;AAAA,QACd;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,iCAAc,MAAK,QAClB,sDAAC,0CAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA,QAEA,4CAAC,iCAAc,MAAK,SACjB,WAAC,CAAC,eACD;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,OAAO,UAAU;AAAA,cACf,gBAAgB;AAAA,cAChB,IAAI;AAAA,cACJ,aAAa;AAAA,YACf,CAAC;AAAA,YAED,sDAAC,iCAAW,eAAY,QAAO;AAAA;AAAA,QACjC,GAEJ;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["cx"]}