@verdaccio/ui-components 5.0.0-next-9.2 → 5.0.0-next-9.4

package/build/components/Search/AutoComplete/AutoComplete.mjs

@@ -0,0 +1,47 @@
+import { Wrapper } from "./styles.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Autocomplete from "@mui/material/Autocomplete";
+//#region src/components/Search/AutoComplete/AutoComplete.tsx
+var AutoComplete = ({ suggestions = [], onSuggestionsFetch, onCleanSuggestions, renderInput, renderOption, getOptionLabel, onSelectItem, suggestionsLoading = false }) => {
+	const { t } = useTranslation();
+	const [inputValue, setInputValue] = useState("");
+	const handleOnInputChange = (event, value, reason) => {
+		if (reason === "input") {
+			event.preventDefault();
+			onSuggestionsFetch({ value });
+			setInputValue(value);
+		} else if (reason === "clear") {
+			onCleanSuggestions(event);
+			setInputValue("");
+		}
+	};
+	const handleOnClose = (event) => {
+		onCleanSuggestions(event);
+		setInputValue("");
+	};
+	return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Autocomplete, {
+		clearOnBlur: true,
+		disablePortal: true,
+		filterOptions: (options, state) => state.inputValue.trim() ? options : [],
+		fullWidth: true,
+		getOptionLabel,
+		id: "search-header-suggest",
+		inputValue,
+		loading: suggestionsLoading,
+		loadingText: t("autoComplete.loading"),
+		noOptionsText: t("autoComplete.no-results-found"),
+		onChange: onSelectItem,
+		onClose: handleOnClose,
+		onInputChange: handleOnInputChange,
+		options: suggestions,
+		renderInput,
+		renderOption,
+		renderTags: () => null
+	}) });
+};
+//#endregion
+export { AutoComplete as default };
+
+//# sourceMappingURL=AutoComplete.mjs.map

package/build/components/Search/AutoComplete/AutoComplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.mjs","names":["Autocomplete","FC","React","useState","useTranslation","SearchResultWeb","Wrapper","OnSelecItem","event","SyntheticEvent","value","reason","details","Props","suggestions","suggestionsLoading","placeholder","renderOption","props","option","JSX","Element","renderInput","params","onSuggestionsFetch","getOptionLabel","onCleanSuggestions","onSelectItem","AutoComplete","t","inputValue","setInputValue","handleOnInputChange","preventDefault","handleOnClose","options","state","trim"],"sources":["../../../../src/components/Search/AutoComplete/AutoComplete.tsx"],"sourcesContent":["import Autocomplete from '@mui/material/Autocomplete';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { SearchResultWeb } from '@verdaccio/types';\n\nimport { Wrapper } from './styles';\n\nexport type OnSelecItem = (\n  event: React.SyntheticEvent,\n  value: SearchResultWeb,\n  reason: string,\n  details?: string\n) => void;\ninterface Props {\n  suggestions?: SearchResultWeb[];\n  suggestionsLoading?: boolean;\n  placeholder: string;\n  renderOption?: (props: any, option: any) => JSX.Element;\n  renderInput: (params: any) => JSX.Element;\n  onSuggestionsFetch: any;\n  getOptionLabel: (option: any) => any;\n  onCleanSuggestions: (event: React.SyntheticEvent) => void;\n  onSelectItem: OnSelecItem;\n}\n\nconst AutoComplete: FC<Props> = ({\n  suggestions = [],\n  onSuggestionsFetch,\n  onCleanSuggestions,\n  renderInput,\n  renderOption,\n  getOptionLabel,\n  onSelectItem,\n  suggestionsLoading = false,\n}: Props) => {\n  const { t } = useTranslation();\n  const [inputValue, setInputValue] = useState('');\n\n  const handleOnInputChange = (event: React.SyntheticEvent, value: string, reason: string) => {\n    if (reason === 'input') {\n      event.preventDefault();\n      onSuggestionsFetch({ value });\n      setInputValue(value);\n    } else if (reason === 'clear') {\n      onCleanSuggestions(event);\n      setInputValue('');\n    }\n  };\n\n  const handleOnClose = (event) => {\n    onCleanSuggestions(event);\n    setInputValue('');\n  };\n\n  // @ts-ignore\n  return (\n    <Wrapper>\n      <Autocomplete\n        /* @ts-ignore */\n        clearOnBlur={true}\n        disablePortal={true}\n        filterOptions={(options, state) => (state.inputValue.trim() ? options : [])}\n        fullWidth={true}\n        getOptionLabel={getOptionLabel}\n        id=\"search-header-suggest\"\n        inputValue={inputValue}\n        loading={suggestionsLoading}\n        loadingText={t('autoComplete.loading')}\n        noOptionsText={t('autoComplete.no-results-found')}\n        onChange={onSelectItem as any}\n        onClose={handleOnClose}\n        onInputChange={handleOnInputChange}\n        options={suggestions}\n        renderInput={renderInput}\n        renderOption={renderOption}\n        renderTags={() => null}\n      />\n    </Wrapper>\n  );\n};\n\nexport default AutoComplete;\n"],"mappings":";;;;;;AA2BA,IAAM4B,gBAA2B,EAC/Bd,cAAc,EAAE,EAChBU,oBACAE,oBACAJ,aACAL,cACAQ,gBACAE,cACAZ,qBAAqB,YACV;CACX,MAAM,EAAEc,MAAMzB,gBAAgB;CAC9B,MAAM,CAAC0B,YAAYC,iBAAiB5B,SAAS,GAAG;CAEhD,MAAM6B,uBAAuBxB,OAA6BE,OAAeC,WAAmB;AAC1F,MAAIA,WAAW,SAAS;AACtBH,SAAMyB,gBAAgB;AACtBT,sBAAmB,EAAEd,OAAO,CAAC;AAC7BqB,iBAAcrB,MAAM;aACXC,WAAW,SAAS;AAC7Be,sBAAmBlB,MAAM;AACzBuB,iBAAc,GAAG;;;CAIrB,MAAMG,iBAAiB1B,UAAU;AAC/BkB,qBAAmBlB,MAAM;AACzBuB,gBAAc,GAAG;;AAInB,QACE,oBAAC,SAAD,EAAA,UACE,oBAAC,cAAD;EAEE,aAAa;EACb,eAAe;EACf,gBAAgBI,SAASC,UAAWA,MAAMN,WAAWO,MAAM,GAAGF,UAAU,EAAG;EAC3E,WAAW;EACKV;EAChB,IAAG;EACSK;EACZ,SAASf;EACT,aAAac,EAAE,uBAAuB;EACtC,eAAeA,EAAE,gCAAgC;EACjD,UAAUF;EACV,SAASO;EACT,eAAeF;EACf,SAASlB;EACIQ;EACCL;EACd,kBAAkB;EAAK,CAAA,EAEjB,CAAA"}

package/build/components/Search/AutoComplete/index.js

@@ -1 +1 @@
-import "./AutoComplete.js";
+require("./AutoComplete.js");

package/build/components/Search/AutoComplete/index.mjs

@@ -0,0 +1 @@
+import "./AutoComplete.mjs";

package/build/components/Search/AutoComplete/styles.js

@@ -1,9 +1,11 @@
-import e from "@emotion/styled/base";
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+let _emotion_styled_base = require("@emotion/styled/base");
+_emotion_styled_base = require_runtime.__toESM(_emotion_styled_base);
 //#region src/components/Search/AutoComplete/styles.ts
-function t() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-var n = /* @__PURE__ */ e("div", process.env.NODE_ENV === "production" ? { target: "e17sb8qr0" } : {
+var Wrapper = /* @__PURE__ */ (0, _emotion_styled_base.default)("div", process.env.NODE_ENV === "production" ? { target: "e17sb8qr0" } : {
 	target: "e17sb8qr0",
 	label: "Wrapper"
 })(process.env.NODE_ENV === "production" ? {
@@ -12,9 +14,9 @@ var n = /* @__PURE__ */ e("div", process.env.NODE_ENV === "production" ? { targe
 } : {
 	name: "1ayuow2",
 	styles: "width:100%;position:relative;z-index:1/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3ZlcmRhY2Npby92ZXJkYWNjaW8vcGFja2FnZXMvdWktY29tcG9uZW50cy9zcmMvY29tcG9uZW50cy9TZWFyY2gvQXV0b0NvbXBsZXRlL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdmVyZGFjY2lvL3ZlcmRhY2Npby9wYWNrYWdlcy91aS1jb21wb25lbnRzL3NyYy9jb21wb25lbnRzL1NlYXJjaC9BdXRvQ29tcGxldGUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZCgnZGl2Jykoe1xuICB3aWR0aDogJzEwMCUnLFxuICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgekluZGV4OiAxLFxufSk7XG4iXX0= */",
-	toString: t
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 //#endregion
-export { n as Wrapper };
+exports.Wrapper = Wrapper;
 
 //# sourceMappingURL=styles.js.map

package/build/components/Search/AutoComplete/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["Wrapper","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["../../../../src/components/Search/AutoComplete/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\n\nexport const Wrapper = styled('div')({\n  width: '100%',\n  position: 'relative',\n  zIndex: 1,\n});\n"],"mappings":";;;;;AAEA,IAAaA,IAAUC,kBAAO,OAAA,QAAA,IAAA,aAAK,eAAA,EAAAI,QAAA,aAAA,GAAA;CAAAA,QAAA;CAAAC,OAAA;CAAA,CAAC,CAAA,QAAA,IAAA,aAAA,eAAA;CAAAC,MAAA;CAAAC,QAAA;CAAA,GAAA;CAAAD,MAAA;CAAAC,QAAA;CAAAC,UAAAC;CAInC,CAAC"}
+{"version":3,"file":"styles.js","names":["Wrapper","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["../../../../src/components/Search/AutoComplete/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\n\nexport const Wrapper = styled('div')({\n  width: '100%',\n  position: 'relative',\n  zIndex: 1,\n});\n"],"mappings":";;;;;;;AAEA,IAAaA,UAAUC,iBAAAA,GAAAA,qBAAAA,SAAO,OAAA,QAAA,IAAA,aAAK,eAAA,EAAAI,QAAA,aAAA,GAAA;CAAAA,QAAA;CAAAC,OAAA;CAAA,CAAC,CAAA,QAAA,IAAA,aAAA,eAAA;CAAAC,MAAA;CAAAC,QAAA;CAAA,GAAA;CAAAD,MAAA;CAAAC,QAAA;CAAAC,UAAAC;CAInC,CAAC"}

package/build/components/Search/AutoComplete/styles.mjs

@@ -0,0 +1,20 @@
+import _styled from "@emotion/styled/base";
+//#region src/components/Search/AutoComplete/styles.ts
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+var Wrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? { target: "e17sb8qr0" } : {
+	target: "e17sb8qr0",
+	label: "Wrapper"
+})(process.env.NODE_ENV === "production" ? {
+	name: "1ayuow2",
+	styles: "width:100%;position:relative;z-index:1"
+} : {
+	name: "1ayuow2",
+	styles: "width:100%;position:relative;z-index:1/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3ZlcmRhY2Npby92ZXJkYWNjaW8vcGFja2FnZXMvdWktY29tcG9uZW50cy9zcmMvY29tcG9uZW50cy9TZWFyY2gvQXV0b0NvbXBsZXRlL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdmVyZGFjY2lvL3ZlcmRhY2Npby9wYWNrYWdlcy91aS1jb21wb25lbnRzL3NyYy9jb21wb25lbnRzL1NlYXJjaC9BdXRvQ29tcGxldGUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZCgnZGl2Jykoe1xuICB3aWR0aDogJzEwMCUnLFxuICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgekluZGV4OiAxLFxufSk7XG4iXX0= */",
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+//#endregion
+export { Wrapper };
+
+//# sourceMappingURL=styles.mjs.map

package/build/components/Search/AutoComplete/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","names":["Wrapper","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["../../../../src/components/Search/AutoComplete/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\n\nexport const Wrapper = styled('div')({\n  width: '100%',\n  position: 'relative',\n  zIndex: 1,\n});\n"],"mappings":";;;;;AAEA,IAAaA,UAAUC,wBAAO,OAAA,QAAA,IAAA,aAAK,eAAA,EAAAI,QAAA,aAAA,GAAA;CAAAA,QAAA;CAAAC,OAAA;CAAA,CAAC,CAAA,QAAA,IAAA,aAAA,eAAA;CAAAC,MAAA;CAAAC,QAAA;CAAA,GAAA;CAAAD,MAAA;CAAAC,QAAA;CAAAC,UAAAC;CAInC,CAAC"}

package/build/components/Search/Search.js

@@ -1,94 +1,137 @@
-import { Route as e } from "../../utils/routes.js";
-import "../../utils/index.js";
-import { useConfig as t } from "../../providers/AppConfigurationProvider/AppConfigurationProvider.js";
-import { useSearch as n } from "../../providers/SearchProvider/SearchProvider.js";
-import r from "./AutoComplete/AutoComplete.js";
-import "./AutoComplete/index.js";
-import i from "./SearchItem.js";
-import { StyledInputAdornment as a, StyledTextField as o } from "./styles.js";
-import "../../index.js";
-import { jsx as s } from "react/jsx-runtime";
-import { useCallback as c, useEffect as l, useRef as u } from "react";
-import { useTranslation as d } from "react-i18next";
-import { useNavigate as f } from "react-router";
-import p from "lodash/debounce";
-import m from "@mui/icons-material/Search";
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_routes = require("../../utils/routes.js");
+require("../../utils/index.js");
+const require_AppConfigurationProvider = require("../../providers/AppConfigurationProvider/AppConfigurationProvider.js");
+const require_SearchProvider = require("../../providers/SearchProvider/SearchProvider.js");
+const require_AutoComplete = require("./AutoComplete/AutoComplete.js");
+require("./AutoComplete/index.js");
+const require_SearchItem = require("./SearchItem.js");
+const require_styles = require("./styles.js");
+require("../../index.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
+let react_router = require("react-router");
+let lodash_debounce = require("lodash/debounce");
+lodash_debounce = require_runtime.__toESM(lodash_debounce);
+let _mui_icons_material_Search = require("@mui/icons-material/Search");
+_mui_icons_material_Search = require_runtime.__toESM(_mui_icons_material_Search);
 //#region src/components/Search/Search.tsx
-var h = {
+var CONSTANTS = {
 	API_DELAY: 300,
 	ABORT_ERROR: "AbortError"
-}, g = () => {
-	let { t: g } = d(), _ = f(), { searchResults: v, isLoading: y, doSearch: b } = n(), { configOptions: { flags: x } } = t(), S = x?.searchRemote ?? !1, C = u(null), w = c(() => {
-		C.current &&= (C.current.abort(), null);
+};
+var Search = () => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const navigate = (0, react_router.useNavigate)();
+	const { searchResults, isLoading, doSearch } = require_SearchProvider.useSearch();
+	const { configOptions: { flags } } = require_AppConfigurationProvider.useConfig();
+	const searchRemote = flags?.searchRemote ?? false;
+	const abortControllerRef = (0, react.useRef)(null);
+	const cancelAllSearchRequests = (0, react.useCallback)(() => {
+		if (abortControllerRef.current) {
+			abortControllerRef.current.abort();
+			abortControllerRef.current = null;
+		}
 	}, []);
-	return l(() => () => w(), [w]), /* @__PURE__ */ s(r, {
-		getOptionLabel: (e) => e?.package?.name,
-		onCleanSuggestions: c((e) => {
-			e.stopPropagation(), w();
-		}, [w]),
-		onSelectItem: c((t, n, r) => {
-			if (t.stopPropagation(), r === "selectOption") {
-				let t = S ? n.package.name : n.name;
-				_(`${e.DETAIL}${t}`);
-			}
-		}, [_, S]),
-		onSuggestionsFetch: p(c(async ({ value: e }) => {
-			if (e?.trim() !== "") {
-				w();
-				let t = new AbortController();
-				C.current = t;
-				try {
-					await b?.({
-						text: e,
-						signal: t.signal
-					});
-				} catch (e) {
-					e.name === h.ABORT_ERROR ? console.warn("Search request aborted") : console.error("Search error:", e);
-				}
+	const handleOnBlur = (0, react.useCallback)((event) => {
+		event.stopPropagation();
+		cancelAllSearchRequests();
+	}, [cancelAllSearchRequests]);
+	const handleClickSearch = (0, react.useCallback)((event, value, reason) => {
+		event.stopPropagation();
+		if (reason === "selectOption") {
+			const pkgName = value["package"]?.name ?? value.name;
+			navigate(`${require_routes.Route.DETAIL}${pkgName}`);
+		}
+	}, [navigate, searchRemote]);
+	const doSearchRef = (0, react.useRef)(doSearch);
+	doSearchRef.current = doSearch;
+	/**
+	* Stable fetch function that reads the latest doSearch from a ref,
+	* avoiding dependency changes that would break the debounce.
+	*/
+	const handleFetchPackages = (0, react.useCallback)(async ({ value }) => {
+		if (value?.trim() !== "") {
+			cancelAllSearchRequests();
+			const controller = new AbortController();
+			abortControllerRef.current = controller;
+			try {
+				await doSearchRef.current?.({
+					text: value,
+					signal: controller.signal
+				});
+			} catch (err) {
+				if (err.name === CONSTANTS.ABORT_ERROR) console.warn("Search request aborted");
+				else console.error("Search error:", err);
 			}
-		}, [b, w]), h.API_DELAY),
-		placeholder: g("search.packages"),
-		renderInput: (e) => /* @__PURE__ */ s(o, {
-			...e,
+		}
+	}, [cancelAllSearchRequests]);
+	const debouncedFetch = (0, react.useMemo)(() => (0, lodash_debounce.default)(handleFetchPackages, CONSTANTS.API_DELAY), [handleFetchPackages]);
+	(0, react.useEffect)(() => {
+		return () => {
+			debouncedFetch.cancel?.();
+			cancelAllSearchRequests();
+		};
+	}, [debouncedFetch, cancelAllSearchRequests]);
+	const renderOption = (props, option) => {
+		const { key, ...otherProps } = props;
+		if (searchRemote) {
+			const item = option.package;
+			const isPrivate = option?.verdaccioPrivate;
+			const isCached = option?.verdaccioPkgCached;
+			const isRemote = !isCached && !isPrivate;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchItem.default, {
+				...otherProps,
+				description: item?.description,
+				isCached,
+				isPrivate,
+				isRemote,
+				name: item?.name,
+				version: item?.version
+			}, key);
+		} else {
+			const item = option.package;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchItem.default, {
+				...otherProps,
+				description: item?.description,
+				name: item?.name,
+				version: item?.version
+			}, key);
+		}
+	};
+	const renderInput = (params) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.StyledTextField, {
+			...params,
 			InputProps: {
-				...e.InputProps,
-				startAdornment: /* @__PURE__ */ s(a, {
+				...params.InputProps,
+				startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.StyledInputAdornment, {
 					position: "start",
-					children: /* @__PURE__ */ s(m, {})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_Search.default, {})
 				})
 			},
 			label: "",
-			placeholder: g("search.packages"),
+			placeholder: t("search.packages"),
 			variant: "standard"
-		}),
-		renderOption: (e, t) => {
-			let { key: n, ...r } = e;
-			if (S) {
-				let e = t.package, a = t?.verdaccioPrivate, o = t?.verdaccioPkgCached, c = !o && !a;
-				return /* @__PURE__ */ s(i, {
-					...r,
-					description: e?.description,
-					isCached: o,
-					isPrivate: a,
-					isRemote: c,
-					name: e?.name,
-					version: e?.version
-				}, n);
-			} else {
-				let e = t.package;
-				return /* @__PURE__ */ s(i, {
-					...r,
-					description: e?.description,
-					name: e?.name,
-					version: e?.version
-				}, n);
-			}
-		},
-		suggestions: v,
-		suggestionsLoading: y
+		});
+	};
+	const getOptionLabel = (option) => {
+		return option?.package?.name;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AutoComplete.default, {
+		getOptionLabel,
+		onCleanSuggestions: handleOnBlur,
+		onSelectItem: handleClickSearch,
+		onSuggestionsFetch: debouncedFetch,
+		placeholder: t("search.packages"),
+		renderInput,
+		renderOption,
+		suggestions: searchResults,
+		suggestionsLoading: isLoading
 	});
 };
 //#endregion
-export { g as default };
+exports.default = Search;
 
 //# sourceMappingURL=Search.js.map

package/build/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["SearchMui","debounce","React","useCallback","useEffect","useRef","useTranslation","useNavigate","SearchResultWeb","useConfig","useSearch","Route","AutoComplete","SearchItem","StyledInputAdornment","StyledTextField","CONSTANTS","API_DELAY","ABORT_ERROR","Search","FC","t","navigate","searchResults","isLoading","doSearch","configOptions","flags","searchRemote","abortControllerRef","AbortController","cancelAllSearchRequests","current","abort","handleOnBlur","event","SyntheticEvent","stopPropagation","handleClickSearch","value","reason","pkgName","name","DETAIL","handleFetchPackages","trim","controller","text","signal","err","console","warn","error","renderOption","props","option","key","otherProps","item","package","isPrivate","verdaccioPrivate","isCached","verdaccioPkgCached","isRemote","description","version","renderInput","params","InputProps","startAdornment","getOptionLabel"],"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import SearchMui from '@mui/icons-material/Search';\nimport debounce from 'lodash/debounce';\nimport React, { useCallback, useEffect, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { SearchResultWeb } from '@verdaccio/types';\n\nimport { useConfig, useSearch } from '../../';\nimport { Route } from '../../utils';\nimport AutoComplete from './AutoComplete';\nimport SearchItem from './SearchItem';\nimport { StyledInputAdornment, StyledTextField } from './styles';\n\nconst CONSTANTS = {\n  API_DELAY: 300,\n  ABORT_ERROR: 'AbortError',\n};\n\nconst Search: React.FC = () => {\n  const { t } = useTranslation();\n  const navigate = useNavigate();\n  const { searchResults, isLoading, doSearch } = useSearch();\n  const {\n    configOptions: { flags },\n  } = useConfig();\n  const searchRemote = flags?.searchRemote ?? false;\n\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const cancelAllSearchRequests = useCallback(() => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      abortControllerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => cancelAllSearchRequests();\n  }, [cancelAllSearchRequests]);\n\n  const handleOnBlur = useCallback(\n    (event: React.SyntheticEvent) => {\n      event.stopPropagation();\n      cancelAllSearchRequests();\n    },\n    [cancelAllSearchRequests]\n  );\n\n  const handleClickSearch = useCallback(\n    (event: React.SyntheticEvent, value: SearchResultWeb, reason: string): void => {\n      event.stopPropagation();\n      if (reason === 'selectOption') {\n        const pkgName = searchRemote ? value['package'].name : value.name;\n        navigate(`${Route.DETAIL}${pkgName}`);\n      }\n    },\n    [navigate, searchRemote]\n  );\n\n  /**\n   * Fetch packages from API with Abort Logic.\n   */\n  const handleFetchPackages = useCallback(\n    async ({ value }: { value: string }) => {\n      if (value?.trim() !== '') {\n        // 2. Abort any previous pending request before starting a new one\n        cancelAllSearchRequests();\n\n        // 3. Create a new controller for the current request\n        const controller = new AbortController();\n        abortControllerRef.current = controller;\n\n        try {\n          await doSearch?.({\n            text: value,\n            signal: controller.signal,\n          });\n        } catch (err: any) {\n          if (err.name === CONSTANTS.ABORT_ERROR) {\n            console.warn('Search request aborted');\n          } else {\n            console.error('Search error:', err);\n          }\n        }\n      }\n    },\n    [doSearch, cancelAllSearchRequests]\n  );\n\n  const renderOption = (props, option) => {\n    const { key, ...otherProps } = props;\n\n    if (searchRemote) {\n      const item: SearchResultWeb = option.package;\n      const isPrivate = option?.verdaccioPrivate;\n      const isCached = option?.verdaccioPkgCached;\n      const isRemote = !isCached && !isPrivate;\n      return (\n        <SearchItem\n          key={key}\n          {...otherProps}\n          description={item?.description}\n          isCached={isCached}\n          isPrivate={isPrivate}\n          isRemote={isRemote}\n          name={item?.name}\n          version={item?.version}\n        />\n      );\n    } else {\n      const item: SearchResultWeb = option.package;\n      return (\n        <SearchItem\n          key={key}\n          {...otherProps}\n          description={item?.description}\n          name={item?.name}\n          version={item?.version}\n        />\n      );\n    }\n  };\n\n  const renderInput = (params) => {\n    return (\n      <StyledTextField\n        {...params}\n        InputProps={{\n          ...params.InputProps,\n          startAdornment: (\n            <StyledInputAdornment position=\"start\">\n              <SearchMui />\n            </StyledInputAdornment>\n          ),\n        }}\n        label=\"\"\n        placeholder={t('search.packages')}\n        variant=\"standard\"\n      />\n    );\n  };\n\n  const getOptionLabel = (option) => {\n    return option?.package?.name;\n  };\n\n  return (\n    <AutoComplete\n      getOptionLabel={getOptionLabel}\n      onCleanSuggestions={handleOnBlur}\n      onSelectItem={handleClickSearch}\n      // Debounce the entire fetcher wrapper\n      onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}\n      placeholder={t('search.packages')}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      suggestions={searchResults}\n      suggestionsLoading={isLoading}\n    />\n  );\n};\n\nexport default Search;\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,IAAMgB,IAAY;CAChBC,WAAW;CACXC,aAAa;CACd,EAEKC,UAAyB;CAC7B,IAAM,EAAEE,SAAMf,GAAgB,EACxBgB,IAAWf,GAAa,EACxB,EAAEgB,kBAAeC,cAAWC,gBAAaf,GAAW,EACpD,EACJgB,eAAe,EAAEC,eACflB,GAAW,EACTmB,IAAeD,GAAOC,gBAAgB,IAEtCC,IAAqBxB,EAA+B,KAAK,EAEzD0B,IAA0B5B,QAAkB;AAChD,EAEE0B,EAAmBG,aADnBH,EAAmBG,QAAQC,OAAO,EACL;IAE9B,EAAE,CAAC;AAgHN,QA9GA7B,cACe2B,GAAyB,EACrC,CAACA,EAAwB,CAAC,EA6G3B,kBAAC,GAAD;EACkBwC,iBANIhB,MACfA,GAAQI,SAASjB;EAMtB,oBA7GiBvC,GAClBgC,MAAgC;AAE/BJ,GADAI,EAAME,iBAAiB,EACvBN,GAAyB;KAE3B,CAACA,EACH,CAAC;EAwGG,cAtGsB5B,GACvBgC,GAA6BI,GAAwBC,MAAyB;AAE7E,OADAL,EAAME,iBAAiB,EACnBG,MAAW,gBAAgB;IAC7B,IAAMC,IAAUb,IAAeW,EAAM,QAAWG,OAAOH,EAAMG;AAC7DpB,MAAS,GAAGX,EAAMgC,SAASF,IAAU;;KAGzC,CAACnB,GAAUM,EACb,CAAC;EA+FG,oBAAoB3B,EA1FIE,EAC1B,OAAO,EAAEoC,eAA+B;AACtC,OAAIA,GAAOM,MAAM,KAAK,IAAI;AAExBd,OAAyB;IAGzB,IAAMe,IAAa,IAAIhB,iBAAiB;AACxCD,MAAmBG,UAAUc;AAE7B,QAAI;AACF,WAAMrB,IAAW;MACfsB,MAAMR;MACNS,QAAQF,EAAWE;MACpB,CAAC;aACKC,GAAU;AACjB,KAAIA,EAAIP,SAAS1B,EAAUE,cACzBgC,QAAQC,KAAK,yBAAyB,GAEtCD,QAAQE,MAAM,iBAAiBH,EAAI;;;KAK3C,CAACxB,GAAUM,EACb,CAAC,EAiEqDf,EAAUC,UAAU;EACtE,aAAaI,EAAE,kBAAkB;EACpB8C,cA/BIC,MAEjB,kBAAC,GAAD;GACE,GAAIA;GACJ,YAAY;IACV,GAAGA,EAAOC;IACVC,gBACE,kBAAC,GAAD;KAAsB,UAAS;eAC7B,kBAAC,GAAD,EAAU,CAAA;KACU,CAAA;IAEzB;GACD,OAAM;GACN,aAAajD,EAAE,kBAAkB;GACjC,SAAQ;GACR,CAAA;EAiBYgC,eAlEIC,GAAOC,MAAW;GACtC,IAAM,EAAEC,QAAK,GAAGC,MAAeH;AAE/B,OAAI1B,GAAc;IAChB,IAAM8B,IAAwBH,EAAOI,SAC/BC,IAAYL,GAAQM,kBACpBC,IAAWP,GAAQQ,oBACnBC,IAAW,CAACF,KAAY,CAACF;AAC/B,WACE,kBAAC,GAAD;KAEE,GAAIH;KACJ,aAAaC,GAAMO;KACTH;KACCF;KACDI;KACV,MAAMN,GAAMhB;KACZ,SAASgB,GAAMQ;KACf,EARKV,EAQL;UAEC;IACL,IAAME,IAAwBH,EAAOI;AACrC,WACE,kBAAC,GAAD;KAEE,GAAIF;KACJ,aAAaC,GAAMO;KACnB,MAAMP,GAAMhB;KACZ,SAASgB,GAAMQ;KACf,EALKV,EAKL;;;EAsCJ,aAAajC;EACb,oBAAoBC;EACpB,CAAA"}
+{"version":3,"file":"Search.js","names":["SearchMui","debounce","React","useCallback","useEffect","useMemo","useRef","useTranslation","useNavigate","SearchResultWeb","useConfig","useSearch","Route","AutoComplete","SearchItem","StyledInputAdornment","StyledTextField","CONSTANTS","API_DELAY","ABORT_ERROR","Search","FC","t","navigate","searchResults","isLoading","doSearch","configOptions","flags","searchRemote","abortControllerRef","AbortController","cancelAllSearchRequests","current","abort","handleOnBlur","event","SyntheticEvent","stopPropagation","handleClickSearch","value","reason","pkgName","name","DETAIL","doSearchRef","handleFetchPackages","trim","controller","text","signal","err","console","warn","error","debouncedFetch","cancel","renderOption","props","option","key","otherProps","item","package","isPrivate","verdaccioPrivate","isCached","verdaccioPkgCached","isRemote","description","version","renderInput","params","InputProps","startAdornment","getOptionLabel"],"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import SearchMui from '@mui/icons-material/Search';\nimport debounce from 'lodash/debounce';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { SearchResultWeb } from '@verdaccio/types';\n\nimport { useConfig, useSearch } from '../../';\nimport { Route } from '../../utils';\nimport AutoComplete from './AutoComplete';\nimport SearchItem from './SearchItem';\nimport { StyledInputAdornment, StyledTextField } from './styles';\n\nconst CONSTANTS = {\n  API_DELAY: 300,\n  ABORT_ERROR: 'AbortError',\n};\n\nconst Search: React.FC = () => {\n  const { t } = useTranslation();\n  const navigate = useNavigate();\n  const { searchResults, isLoading, doSearch } = useSearch();\n  const {\n    configOptions: { flags },\n  } = useConfig();\n  const searchRemote = flags?.searchRemote ?? false;\n\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const cancelAllSearchRequests = useCallback(() => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      abortControllerRef.current = null;\n    }\n  }, []);\n\n  const handleOnBlur = useCallback(\n    (event: React.SyntheticEvent) => {\n      event.stopPropagation();\n      cancelAllSearchRequests();\n    },\n    [cancelAllSearchRequests]\n  );\n\n  const handleClickSearch = useCallback(\n    (event: React.SyntheticEvent, value: SearchResultWeb, reason: string): void => {\n      event.stopPropagation();\n      if (reason === 'selectOption') {\n        const pkgName = value['package']?.name ?? value.name;\n        navigate(`${Route.DETAIL}${pkgName}`);\n      }\n    },\n    [navigate, searchRemote]\n  );\n\n  // Use a ref to always access the latest doSearch without re-creating the debounced function\n  const doSearchRef = useRef(doSearch);\n  doSearchRef.current = doSearch;\n\n  /**\n   * Stable fetch function that reads the latest doSearch from a ref,\n   * avoiding dependency changes that would break the debounce.\n   */\n  const handleFetchPackages = useCallback(\n    async ({ value }: { value: string }) => {\n      if (value?.trim() !== '') {\n        // Abort any previous pending request before starting a new one\n        cancelAllSearchRequests();\n\n        // Create a new controller for the current request\n        const controller = new AbortController();\n        abortControllerRef.current = controller;\n\n        try {\n          await doSearchRef.current?.({\n            text: value,\n            signal: controller.signal,\n          });\n        } catch (err: any) {\n          if (err.name === CONSTANTS.ABORT_ERROR) {\n            console.warn('Search request aborted');\n          } else {\n            console.error('Search error:', err);\n          }\n        }\n      }\n    },\n    [cancelAllSearchRequests]\n  );\n\n  // Memoize the debounced function so a single instance is reused across renders,\n  // ensuring the debounce timer works correctly instead of creating a new timer per render.\n  const debouncedFetch = useMemo(\n    () => debounce(handleFetchPackages, CONSTANTS.API_DELAY),\n    [handleFetchPackages]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedFetch.cancel?.();\n      cancelAllSearchRequests();\n    };\n  }, [debouncedFetch, cancelAllSearchRequests]);\n\n  const renderOption = (props, option) => {\n    const { key, ...otherProps } = props;\n\n    if (searchRemote) {\n      const item: SearchResultWeb = option.package;\n      const isPrivate = option?.verdaccioPrivate;\n      const isCached = option?.verdaccioPkgCached;\n      const isRemote = !isCached && !isPrivate;\n      return (\n        <SearchItem\n          key={key}\n          {...otherProps}\n          description={item?.description}\n          isCached={isCached}\n          isPrivate={isPrivate}\n          isRemote={isRemote}\n          name={item?.name}\n          version={item?.version}\n        />\n      );\n    } else {\n      const item: SearchResultWeb = option.package;\n      return (\n        <SearchItem\n          key={key}\n          {...otherProps}\n          description={item?.description}\n          name={item?.name}\n          version={item?.version}\n        />\n      );\n    }\n  };\n\n  const renderInput = (params) => {\n    return (\n      <StyledTextField\n        {...params}\n        InputProps={{\n          ...params.InputProps,\n          startAdornment: (\n            <StyledInputAdornment position=\"start\">\n              <SearchMui />\n            </StyledInputAdornment>\n          ),\n        }}\n        label=\"\"\n        placeholder={t('search.packages')}\n        variant=\"standard\"\n      />\n    );\n  };\n\n  const getOptionLabel = (option) => {\n    return option?.package?.name;\n  };\n\n  return (\n    <AutoComplete\n      getOptionLabel={getOptionLabel}\n      onCleanSuggestions={handleOnBlur}\n      onSelectItem={handleClickSearch}\n      onSuggestionsFetch={debouncedFetch}\n      placeholder={t('search.packages')}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      suggestions={searchResults}\n      suggestionsLoading={isLoading}\n    />\n  );\n};\n\nexport default Search;\n"],"mappings":"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"}

package/build/components/Search/Search.mjs

@@ -0,0 +1,133 @@
+import { Route as Route$1 } from "../../utils/routes.mjs";
+import "../../utils/index.mjs";
+import { useConfig } from "../../providers/AppConfigurationProvider/AppConfigurationProvider.mjs";
+import { useSearch } from "../../providers/SearchProvider/SearchProvider.mjs";
+import AutoComplete from "./AutoComplete/AutoComplete.mjs";
+import "./AutoComplete/index.mjs";
+import SearchItem from "./SearchItem.mjs";
+import { StyledInputAdornment, StyledTextField } from "./styles.mjs";
+import "../../index.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import debounce from "lodash/debounce";
+import SearchMui from "@mui/icons-material/Search";
+//#region src/components/Search/Search.tsx
+var CONSTANTS = {
+	API_DELAY: 300,
+	ABORT_ERROR: "AbortError"
+};
+var Search = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { searchResults, isLoading, doSearch } = useSearch();
+	const { configOptions: { flags } } = useConfig();
+	const searchRemote = flags?.searchRemote ?? false;
+	const abortControllerRef = useRef(null);
+	const cancelAllSearchRequests = useCallback(() => {
+		if (abortControllerRef.current) {
+			abortControllerRef.current.abort();
+			abortControllerRef.current = null;
+		}
+	}, []);
+	const handleOnBlur = useCallback((event) => {
+		event.stopPropagation();
+		cancelAllSearchRequests();
+	}, [cancelAllSearchRequests]);
+	const handleClickSearch = useCallback((event, value, reason) => {
+		event.stopPropagation();
+		if (reason === "selectOption") {
+			const pkgName = value["package"]?.name ?? value.name;
+			navigate(`${Route$1.DETAIL}${pkgName}`);
+		}
+	}, [navigate, searchRemote]);
+	const doSearchRef = useRef(doSearch);
+	doSearchRef.current = doSearch;
+	/**
+	* Stable fetch function that reads the latest doSearch from a ref,
+	* avoiding dependency changes that would break the debounce.
+	*/
+	const handleFetchPackages = useCallback(async ({ value }) => {
+		if (value?.trim() !== "") {
+			cancelAllSearchRequests();
+			const controller = new AbortController();
+			abortControllerRef.current = controller;
+			try {
+				await doSearchRef.current?.({
+					text: value,
+					signal: controller.signal
+				});
+			} catch (err) {
+				if (err.name === CONSTANTS.ABORT_ERROR) console.warn("Search request aborted");
+				else console.error("Search error:", err);
+			}
+		}
+	}, [cancelAllSearchRequests]);
+	const debouncedFetch = useMemo(() => debounce(handleFetchPackages, CONSTANTS.API_DELAY), [handleFetchPackages]);
+	useEffect(() => {
+		return () => {
+			debouncedFetch.cancel?.();
+			cancelAllSearchRequests();
+		};
+	}, [debouncedFetch, cancelAllSearchRequests]);
+	const renderOption = (props, option) => {
+		const { key, ...otherProps } = props;
+		if (searchRemote) {
+			const item = option.package;
+			const isPrivate = option?.verdaccioPrivate;
+			const isCached = option?.verdaccioPkgCached;
+			const isRemote = !isCached && !isPrivate;
+			return /* @__PURE__ */ jsx(SearchItem, {
+				...otherProps,
+				description: item?.description,
+				isCached,
+				isPrivate,
+				isRemote,
+				name: item?.name,
+				version: item?.version
+			}, key);
+		} else {
+			const item = option.package;
+			return /* @__PURE__ */ jsx(SearchItem, {
+				...otherProps,
+				description: item?.description,
+				name: item?.name,
+				version: item?.version
+			}, key);
+		}
+	};
+	const renderInput = (params) => {
+		return /* @__PURE__ */ jsx(StyledTextField, {
+			...params,
+			InputProps: {
+				...params.InputProps,
+				startAdornment: /* @__PURE__ */ jsx(StyledInputAdornment, {
+					position: "start",
+					children: /* @__PURE__ */ jsx(SearchMui, {})
+				})
+			},
+			label: "",
+			placeholder: t("search.packages"),
+			variant: "standard"
+		});
+	};
+	const getOptionLabel = (option) => {
+		return option?.package?.name;
+	};
+	return /* @__PURE__ */ jsx(AutoComplete, {
+		getOptionLabel,
+		onCleanSuggestions: handleOnBlur,
+		onSelectItem: handleClickSearch,
+		onSuggestionsFetch: debouncedFetch,
+		placeholder: t("search.packages"),
+		renderInput,
+		renderOption,
+		suggestions: searchResults,
+		suggestionsLoading: isLoading
+	});
+};
+//#endregion
+export { Search as default };
+
+//# sourceMappingURL=Search.mjs.map

package/build/components/Search/Search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.mjs","names":["SearchMui","debounce","React","useCallback","useEffect","useMemo","useRef","useTranslation","useNavigate","SearchResultWeb","useConfig","useSearch","Route","AutoComplete","SearchItem","StyledInputAdornment","StyledTextField","CONSTANTS","API_DELAY","ABORT_ERROR","Search","FC","t","navigate","searchResults","isLoading","doSearch","configOptions","flags","searchRemote","abortControllerRef","AbortController","cancelAllSearchRequests","current","abort","handleOnBlur","event","SyntheticEvent","stopPropagation","handleClickSearch","value","reason","pkgName","name","DETAIL","doSearchRef","handleFetchPackages","trim","controller","text","signal","err","console","warn","error","debouncedFetch","cancel","renderOption","props","option","key","otherProps","item","package","isPrivate","verdaccioPrivate","isCached","verdaccioPkgCached","isRemote","description","version","renderInput","params","InputProps","startAdornment","getOptionLabel"],"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import SearchMui from '@mui/icons-material/Search';\nimport debounce from 'lodash/debounce';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { SearchResultWeb } from '@verdaccio/types';\n\nimport { useConfig, useSearch } from '../../';\nimport { Route } from '../../utils';\nimport AutoComplete from './AutoComplete';\nimport SearchItem from './SearchItem';\nimport { StyledInputAdornment, StyledTextField } from './styles';\n\nconst CONSTANTS = {\n  API_DELAY: 300,\n  ABORT_ERROR: 'AbortError',\n};\n\nconst Search: React.FC = () => {\n  const { t } = useTranslation();\n  const navigate = useNavigate();\n  const { searchResults, isLoading, doSearch } = useSearch();\n  const {\n    configOptions: { flags },\n  } = useConfig();\n  const searchRemote = flags?.searchRemote ?? false;\n\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const cancelAllSearchRequests = useCallback(() => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      abortControllerRef.current = null;\n    }\n  }, []);\n\n  const handleOnBlur = useCallback(\n    (event: React.SyntheticEvent) => {\n      event.stopPropagation();\n      cancelAllSearchRequests();\n    },\n    [cancelAllSearchRequests]\n  );\n\n  const handleClickSearch = useCallback(\n    (event: React.SyntheticEvent, value: SearchResultWeb, reason: string): void => {\n      event.stopPropagation();\n      if (reason === 'selectOption') {\n        const pkgName = value['package']?.name ?? value.name;\n        navigate(`${Route.DETAIL}${pkgName}`);\n      }\n    },\n    [navigate, searchRemote]\n  );\n\n  // Use a ref to always access the latest doSearch without re-creating the debounced function\n  const doSearchRef = useRef(doSearch);\n  doSearchRef.current = doSearch;\n\n  /**\n   * Stable fetch function that reads the latest doSearch from a ref,\n   * avoiding dependency changes that would break the debounce.\n   */\n  const handleFetchPackages = useCallback(\n    async ({ value }: { value: string }) => {\n      if (value?.trim() !== '') {\n        // Abort any previous pending request before starting a new one\n        cancelAllSearchRequests();\n\n        // Create a new controller for the current request\n        const controller = new AbortController();\n        abortControllerRef.current = controller;\n\n        try {\n          await doSearchRef.current?.({\n            text: value,\n            signal: controller.signal,\n          });\n        } catch (err: any) {\n          if (err.name === CONSTANTS.ABORT_ERROR) {\n            console.warn('Search request aborted');\n          } else {\n            console.error('Search error:', err);\n          }\n        }\n      }\n    },\n    [cancelAllSearchRequests]\n  );\n\n  // Memoize the debounced function so a single instance is reused across renders,\n  // ensuring the debounce timer works correctly instead of creating a new timer per render.\n  const debouncedFetch = useMemo(\n    () => debounce(handleFetchPackages, CONSTANTS.API_DELAY),\n    [handleFetchPackages]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedFetch.cancel?.();\n      cancelAllSearchRequests();\n    };\n  }, [debouncedFetch, cancelAllSearchRequests]);\n\n  const renderOption = (props, option) => {\n    const { key, ...otherProps } = props;\n\n    if (searchRemote) {\n      const item: SearchResultWeb = option.package;\n      const isPrivate = option?.verdaccioPrivate;\n      const isCached = option?.verdaccioPkgCached;\n      const isRemote = !isCached && !isPrivate;\n      return (\n        <SearchItem\n          key={key}\n          {...otherProps}\n          description={item?.description}\n          isCached={isCached}\n          isPrivate={isPrivate}\n          isRemote={isRemote}\n          name={item?.name}\n          version={item?.version}\n        />\n      );\n    } else {\n      const item: SearchResultWeb = option.package;\n      return (\n        <SearchItem\n          key={key}\n          {...otherProps}\n          description={item?.description}\n          name={item?.name}\n          version={item?.version}\n        />\n      );\n    }\n  };\n\n  const renderInput = (params) => {\n    return (\n      <StyledTextField\n        {...params}\n        InputProps={{\n          ...params.InputProps,\n          startAdornment: (\n            <StyledInputAdornment position=\"start\">\n              <SearchMui />\n            </StyledInputAdornment>\n          ),\n        }}\n        label=\"\"\n        placeholder={t('search.packages')}\n        variant=\"standard\"\n      />\n    );\n  };\n\n  const getOptionLabel = (option) => {\n    return option?.package?.name;\n  };\n\n  return (\n    <AutoComplete\n      getOptionLabel={getOptionLabel}\n      onCleanSuggestions={handleOnBlur}\n      onSelectItem={handleClickSearch}\n      onSuggestionsFetch={debouncedFetch}\n      placeholder={t('search.packages')}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      suggestions={searchResults}\n      suggestionsLoading={isLoading}\n    />\n  );\n};\n\nexport default Search;\n"],"mappings":"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"}