@verdaccio/ui-components 5.0.0-next-9.6 → 5.0.0-next-9.8

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":[],"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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"}
+{"version":3,"file":"Search.js","names":[],"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import SearchMui from '@mui/icons-material/Search';\nimport { debounce } from 'lodash-es';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport { useSearch } from '../../';\nimport { Route } from '../../utils';\nimport AutoComplete from './AutoComplete';\nimport SearchItem from './SearchItem';\nimport { StyledInputAdornment, StyledTextField } from './styles';\nimport { normalizeSearchOption } from './utils';\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\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: any, reason: string): void => {\n      event.stopPropagation();\n      if (reason === 'selectOption') {\n        const { name } = normalizeSearchOption(value);\n        if (name) {\n          navigate(`${Route.DETAIL}${name}`);\n        }\n      }\n    },\n    [navigate]\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    const { name, version, description, isPrivate, isCached, isRemote } =\n      normalizeSearchOption(option);\n    return (\n      <SearchItem\n        key={key}\n        {...otherProps}\n        description={description}\n        isCached={isCached}\n        isPrivate={isPrivate}\n        isRemote={isRemote}\n        name={name}\n        version={version}\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 normalizeSearchOption(option).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":";;;;;;;;;;;;;;;;;;;AAaA,IAAM,YAAY;CAChB,WAAW;CACX,aAAa;CACd;AAED,IAAM,eAAyB;CAC7B,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,YAAA,GAAA,aAAA,cAAwB;CAC9B,MAAM,EAAE,eAAe,WAAW,aAAa,uBAAA,WAAW;CAE1D,MAAM,sBAAA,GAAA,MAAA,QAAoD,KAAK;CAE/D,MAAM,2BAAA,GAAA,MAAA,mBAA4C;AAChD,MAAI,mBAAmB,SAAS;AAC9B,sBAAmB,QAAQ,OAAO;AAClC,sBAAmB,UAAU;;IAE9B,EAAE,CAAC;CAEN,MAAM,gBAAA,GAAA,MAAA,cACH,UAAgC;AAC/B,QAAM,iBAAiB;AACvB,2BAAyB;IAE3B,CAAC,wBAAwB,CAC1B;CAED,MAAM,qBAAA,GAAA,MAAA,cACH,OAA6B,OAAY,WAAyB;AACjE,QAAM,iBAAiB;AACvB,MAAI,WAAW,gBAAgB;GAC7B,MAAM,EAAE,SAAS,cAAA,sBAAsB,MAAM;AAC7C,OAAI,KACF,UAAS,GAAG,eAAA,MAAM,SAAS,OAAO;;IAIxC,CAAC,SAAS,CACX;CAGD,MAAM,eAAA,GAAA,MAAA,QAAqB,SAAS;AACpC,aAAY,UAAU;;;;;CAMtB,MAAM,uBAAA,GAAA,MAAA,aACJ,OAAO,EAAE,YAA+B;AACtC,MAAI,OAAO,MAAM,KAAK,IAAI;AAExB,4BAAyB;GAGzB,MAAM,aAAa,IAAI,iBAAiB;AACxC,sBAAmB,UAAU;AAE7B,OAAI;AACF,UAAM,YAAY,UAAU;KAC1B,MAAM;KACN,QAAQ,WAAW;KACpB,CAAC;YACK,KAAU;AACjB,QAAI,IAAI,SAAS,UAAU,YACzB,SAAQ,KAAK,yBAAyB;QAEtC,SAAQ,MAAM,iBAAiB,IAAI;;;IAK3C,CAAC,wBAAwB,CAC1B;CAID,MAAM,kBAAA,GAAA,MAAA,gBAAA,GAAA,UAAA,UACW,qBAAqB,UAAU,UAAU,EACxD,CAAC,oBAAoB,CACtB;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,eAAa;AACX,kBAAe,UAAU;AACzB,4BAAyB;;IAE1B,CAAC,gBAAgB,wBAAwB,CAAC;CAE7C,MAAM,gBAAgB,OAAO,WAAW;EACtC,MAAM,EAAE,KAAK,GAAG,eAAe;EAC/B,MAAM,EAAE,MAAM,SAAS,aAAa,WAAW,UAAU,aACvD,cAAA,sBAAsB,OAAO;AAC/B,SACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,SAAD;GAEE,GAAI;GACS;GACH;GACC;GACD;GACJ;GACG;GACT,EARK,IAQL;;CAIN,MAAM,eAAe,WAAW;AAC9B,SACE,iBAAA,GAAA,kBAAA,KAAC,eAAA,iBAAD;GACE,GAAI;GACJ,YAAY;IACV,GAAG,OAAO;IACV,gBACE,iBAAA,GAAA,kBAAA,KAAC,eAAA,sBAAD;KAAsB,UAAS;eAC7B,iBAAA,GAAA,kBAAA,KAAC,2BAAA,SAAD,EAAa,CAAA;KACQ,CAAA;IAE1B;GACD,OAAM;GACN,aAAa,EAAE,kBAAkB;GACjC,SAAQ;GACR,CAAA;;CAIN,MAAM,kBAAkB,WAAW;AACjC,SAAO,cAAA,sBAAsB,OAAO,CAAC;;AAGvC,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EACkB;EAChB,oBAAoB;EACpB,cAAc;EACd,oBAAoB;EACpB,aAAa,EAAE,kBAAkB;EACpB;EACC;EACd,aAAa;EACb,oBAAoB;EACpB,CAAA"}

package/build/components/Search/Search.mjs

@@ -1,17 +1,17 @@
 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 { normalizeSearchOption } from "./utils.mjs";
 import SearchItem from "./SearchItem.mjs";
 import { StyledInputAdornment, StyledTextField } from "./styles.mjs";
 import "../../index.mjs";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { debounce } from "lodash-es";
 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 = {
@@ -22,8 +22,6 @@ 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) {
@@ -38,10 +36,10 @@ var Search = () => {
 	const handleClickSearch = useCallback((event, value, reason) => {
 		event.stopPropagation();
 		if (reason === "selectOption") {
-			const pkgName = value["package"]?.name ?? value.name;
-			navigate(`${Route$1.DETAIL}${pkgName}`);
+			const { name } = normalizeSearchOption(value);
+			if (name) navigate(`${Route$1.DETAIL}${name}`);
 		}
-	}, [navigate, searchRemote]);
+	}, [navigate]);
 	const doSearchRef = useRef(doSearch);
 	doSearchRef.current = doSearch;
 	/**
@@ -73,29 +71,16 @@ var Search = () => {
 	}, [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 { name, version, description, isPrivate, isCached, isRemote } = normalizeSearchOption(option);
+		return /* @__PURE__ */ jsx(SearchItem, {
+			...otherProps,
+			description,
+			isCached,
+			isPrivate,
+			isRemote,
+			name,
+			version
+		}, key);
 	};
 	const renderInput = (params) => {
 		return /* @__PURE__ */ jsx(StyledTextField, {
@@ -113,7 +98,7 @@ var Search = () => {
 		});
 	};
 	const getOptionLabel = (option) => {
-		return option?.package?.name;
+		return normalizeSearchOption(option).name;
 	};
 	return /* @__PURE__ */ jsx(AutoComplete, {
 		getOptionLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"Search.mjs","names":[],"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":";;;;;;;;;;;;;;;;AAcA,IAAM,YAAY;CAChB,WAAW;CACX,aAAa;CACd;AAED,IAAM,eAAyB;CAC7B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,eAAe,WAAW,aAAa,WAAW;CAC1D,MAAM,EACJ,eAAe,EAAE,YACf,WAAW;CACf,MAAM,eAAe,OAAO,gBAAgB;CAE5C,MAAM,qBAAqB,OAA+B,KAAK;CAE/D,MAAM,0BAA0B,kBAAkB;AAChD,MAAI,mBAAmB,SAAS;AAC9B,sBAAmB,QAAQ,OAAO;AAClC,sBAAmB,UAAU;;IAE9B,EAAE,CAAC;CAEN,MAAM,eAAe,aAClB,UAAgC;AAC/B,QAAM,iBAAiB;AACvB,2BAAyB;IAE3B,CAAC,wBAAwB,CAC1B;CAED,MAAM,oBAAoB,aACvB,OAA6B,OAAwB,WAAyB;AAC7E,QAAM,iBAAiB;AACvB,MAAI,WAAW,gBAAgB;GAC7B,MAAM,UAAU,MAAM,YAAY,QAAQ,MAAM;AAChD,YAAS,GAAG,QAAM,SAAS,UAAU;;IAGzC,CAAC,UAAU,aAAa,CACzB;CAGD,MAAM,cAAc,OAAO,SAAS;AACpC,aAAY,UAAU;;;;;CAMtB,MAAM,sBAAsB,YAC1B,OAAO,EAAE,YAA+B;AACtC,MAAI,OAAO,MAAM,KAAK,IAAI;AAExB,4BAAyB;GAGzB,MAAM,aAAa,IAAI,iBAAiB;AACxC,sBAAmB,UAAU;AAE7B,OAAI;AACF,UAAM,YAAY,UAAU;KAC1B,MAAM;KACN,QAAQ,WAAW;KACpB,CAAC;YACK,KAAU;AACjB,QAAI,IAAI,SAAS,UAAU,YACzB,SAAQ,KAAK,yBAAyB;QAEtC,SAAQ,MAAM,iBAAiB,IAAI;;;IAK3C,CAAC,wBAAwB,CAC1B;CAID,MAAM,iBAAiB,cACf,SAAS,qBAAqB,UAAU,UAAU,EACxD,CAAC,oBAAoB,CACtB;AAED,iBAAgB;AACd,eAAa;AACX,kBAAe,UAAU;AACzB,4BAAyB;;IAE1B,CAAC,gBAAgB,wBAAwB,CAAC;CAE7C,MAAM,gBAAgB,OAAO,WAAW;EACtC,MAAM,EAAE,KAAK,GAAG,eAAe;AAE/B,MAAI,cAAc;GAChB,MAAM,OAAwB,OAAO;GACrC,MAAM,YAAY,QAAQ;GAC1B,MAAM,WAAW,QAAQ;GACzB,MAAM,WAAW,CAAC,YAAY,CAAC;AAC/B,UACE,oBAAC,YAAD;IAEE,GAAI;IACJ,aAAa,MAAM;IACT;IACC;IACD;IACV,MAAM,MAAM;IACZ,SAAS,MAAM;IACf,EARK,IAQL;SAEC;GACL,MAAM,OAAwB,OAAO;AACrC,UACE,oBAAC,YAAD;IAEE,GAAI;IACJ,aAAa,MAAM;IACnB,MAAM,MAAM;IACZ,SAAS,MAAM;IACf,EALK,IAKL;;;CAKR,MAAM,eAAe,WAAW;AAC9B,SACE,oBAAC,iBAAD;GACE,GAAI;GACJ,YAAY;IACV,GAAG,OAAO;IACV,gBACE,oBAAC,sBAAD;KAAsB,UAAS;eAC7B,oBAAC,WAAD,EAAa,CAAA;KACQ,CAAA;IAE1B;GACD,OAAM;GACN,aAAa,EAAE,kBAAkB;GACjC,SAAQ;GACR,CAAA;;CAIN,MAAM,kBAAkB,WAAW;AACjC,SAAO,QAAQ,SAAS;;AAG1B,QACE,oBAAC,cAAD;EACkB;EAChB,oBAAoB;EACpB,cAAc;EACd,oBAAoB;EACpB,aAAa,EAAE,kBAAkB;EACpB;EACC;EACd,aAAa;EACb,oBAAoB;EACpB,CAAA"}
+{"version":3,"file":"Search.mjs","names":[],"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import SearchMui from '@mui/icons-material/Search';\nimport { debounce } from 'lodash-es';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport { useSearch } from '../../';\nimport { Route } from '../../utils';\nimport AutoComplete from './AutoComplete';\nimport SearchItem from './SearchItem';\nimport { StyledInputAdornment, StyledTextField } from './styles';\nimport { normalizeSearchOption } from './utils';\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\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: any, reason: string): void => {\n      event.stopPropagation();\n      if (reason === 'selectOption') {\n        const { name } = normalizeSearchOption(value);\n        if (name) {\n          navigate(`${Route.DETAIL}${name}`);\n        }\n      }\n    },\n    [navigate]\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    const { name, version, description, isPrivate, isCached, isRemote } =\n      normalizeSearchOption(option);\n    return (\n      <SearchItem\n        key={key}\n        {...otherProps}\n        description={description}\n        isCached={isCached}\n        isPrivate={isPrivate}\n        isRemote={isRemote}\n        name={name}\n        version={version}\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 normalizeSearchOption(option).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":";;;;;;;;;;;;;;;;AAaA,IAAM,YAAY;CAChB,WAAW;CACX,aAAa;CACd;AAED,IAAM,eAAyB;CAC7B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,eAAe,WAAW,aAAa,WAAW;CAE1D,MAAM,qBAAqB,OAA+B,KAAK;CAE/D,MAAM,0BAA0B,kBAAkB;AAChD,MAAI,mBAAmB,SAAS;AAC9B,sBAAmB,QAAQ,OAAO;AAClC,sBAAmB,UAAU;;IAE9B,EAAE,CAAC;CAEN,MAAM,eAAe,aAClB,UAAgC;AAC/B,QAAM,iBAAiB;AACvB,2BAAyB;IAE3B,CAAC,wBAAwB,CAC1B;CAED,MAAM,oBAAoB,aACvB,OAA6B,OAAY,WAAyB;AACjE,QAAM,iBAAiB;AACvB,MAAI,WAAW,gBAAgB;GAC7B,MAAM,EAAE,SAAS,sBAAsB,MAAM;AAC7C,OAAI,KACF,UAAS,GAAG,QAAM,SAAS,OAAO;;IAIxC,CAAC,SAAS,CACX;CAGD,MAAM,cAAc,OAAO,SAAS;AACpC,aAAY,UAAU;;;;;CAMtB,MAAM,sBAAsB,YAC1B,OAAO,EAAE,YAA+B;AACtC,MAAI,OAAO,MAAM,KAAK,IAAI;AAExB,4BAAyB;GAGzB,MAAM,aAAa,IAAI,iBAAiB;AACxC,sBAAmB,UAAU;AAE7B,OAAI;AACF,UAAM,YAAY,UAAU;KAC1B,MAAM;KACN,QAAQ,WAAW;KACpB,CAAC;YACK,KAAU;AACjB,QAAI,IAAI,SAAS,UAAU,YACzB,SAAQ,KAAK,yBAAyB;QAEtC,SAAQ,MAAM,iBAAiB,IAAI;;;IAK3C,CAAC,wBAAwB,CAC1B;CAID,MAAM,iBAAiB,cACf,SAAS,qBAAqB,UAAU,UAAU,EACxD,CAAC,oBAAoB,CACtB;AAED,iBAAgB;AACd,eAAa;AACX,kBAAe,UAAU;AACzB,4BAAyB;;IAE1B,CAAC,gBAAgB,wBAAwB,CAAC;CAE7C,MAAM,gBAAgB,OAAO,WAAW;EACtC,MAAM,EAAE,KAAK,GAAG,eAAe;EAC/B,MAAM,EAAE,MAAM,SAAS,aAAa,WAAW,UAAU,aACvD,sBAAsB,OAAO;AAC/B,SACE,oBAAC,YAAD;GAEE,GAAI;GACS;GACH;GACC;GACD;GACJ;GACG;GACT,EARK,IAQL;;CAIN,MAAM,eAAe,WAAW;AAC9B,SACE,oBAAC,iBAAD;GACE,GAAI;GACJ,YAAY;IACV,GAAG,OAAO;IACV,gBACE,oBAAC,sBAAD;KAAsB,UAAS;eAC7B,oBAAC,WAAD,EAAa,CAAA;KACQ,CAAA;IAE1B;GACD,OAAM;GACN,aAAa,EAAE,kBAAkB;GACjC,SAAQ;GACR,CAAA;;CAIN,MAAM,kBAAkB,WAAW;AACjC,SAAO,sBAAsB,OAAO,CAAC;;AAGvC,QACE,oBAAC,cAAD;EACkB;EAChB,oBAAoB;EACpB,cAAc;EACd,oBAAoB;EACpB,aAAa,EAAE,kBAAkB;EACpB;EACC;EACd,aAAa;EACb,oBAAoB;EACpB,CAAA"}

package/build/components/Search/utils.d.ts

@@ -1 +1,22 @@
+export type NormalizedSearchOption = {
+    name: string;
+    version?: string;
+    description?: string;
+    isPrivate: boolean;
+    isCached: boolean;
+    isRemote: boolean;
+};
+/**
+ * Normalize a raw search result into a unified shape the UI can render,
+ * regardless of which backend response format was returned:
+ *
+ * 1) npm-style "search objects" response where each entry is wrapped in
+ *    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.
+ * 2) Flat packument-style response where each entry exposes `name`, `version`,
+ *    `description`, `dist`, etc. directly at the top level.
+ *
+ * The second shape carries no uplink metadata, so private/remote/cached flags
+ * default to `false` and the UI simply omits the corresponding badges.
+ */
+export declare function normalizeSearchOption(option: any): NormalizedSearchOption;
 export declare function cleanDescription(description: string): string;

package/build/components/Search/utils.js

@@ -1,4 +1,40 @@
 //#region src/components/Search/utils.ts
+/**
+* Normalize a raw search result into a unified shape the UI can render,
+* regardless of which backend response format was returned:
+*
+* 1) npm-style "search objects" response where each entry is wrapped in
+*    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.
+* 2) Flat packument-style response where each entry exposes `name`, `version`,
+*    `description`, `dist`, etc. directly at the top level.
+*
+* The second shape carries no uplink metadata, so private/remote/cached flags
+* default to `false` and the UI simply omits the corresponding badges.
+*/
+function normalizeSearchOption(option) {
+	if (option && typeof option === "object" && option.package) {
+		const pkg = option.package ?? {};
+		const isPrivate = Boolean(option.verdaccioPrivate);
+		const isCached = Boolean(option.verdaccioPkgCached);
+		return {
+			name: pkg.name,
+			version: pkg.version,
+			description: pkg.description,
+			isPrivate,
+			isCached,
+			isRemote: !isCached && !isPrivate
+		};
+	}
+	const flat = option ?? {};
+	return {
+		name: flat.name,
+		version: flat.version,
+		description: flat.description,
+		isPrivate: false,
+		isCached: false,
+		isRemote: false
+	};
+}
 function removeHtmlTags(input) {
 	let previous;
 	do {
@@ -15,5 +51,6 @@ function cleanDescription(description) {
 }
 //#endregion
 exports.cleanDescription = cleanDescription;
+exports.normalizeSearchOption = normalizeSearchOption;
 
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/Search/utils.ts"],"sourcesContent":["function removeHtmlTags(input: string): string {\n  let previous;\n  do {\n    previous = input;\n    input = input.replace(/<[^>]*>?/gm, '');\n  } while (input !== previous);\n  return input;\n}\n\nexport function cleanDescription(description: string): string {\n  let output = description;\n  // remove html tags from description (e.g. <h1...>)\n  output = removeHtmlTags(output);\n  // remove markdown links from description (e.g. [link](url))\n  output = output.replace(/\\(.*?\\)/gm, '').replace(/(\\[!?|\\])/gm, '');\n  return output;\n}\n"],"mappings":";AAAA,SAAS,eAAe,OAAuB;CAC7C,IAAI;AACJ,IAAG;AACD,aAAW;AACX,UAAQ,MAAM,QAAQ,cAAc,GAAG;UAChC,UAAU;AACnB,QAAO;;AAGT,SAAgB,iBAAiB,aAA6B;CAC5D,IAAI,SAAS;AAEb,UAAS,eAAe,OAAO;AAE/B,UAAS,OAAO,QAAQ,aAAa,GAAG,CAAC,QAAQ,eAAe,GAAG;AACnE,QAAO"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/Search/utils.ts"],"sourcesContent":["export type NormalizedSearchOption = {\n  name: string;\n  version?: string;\n  description?: string;\n  isPrivate: boolean;\n  isCached: boolean;\n  isRemote: boolean;\n};\n\n/**\n * Normalize a raw search result into a unified shape the UI can render,\n * regardless of which backend response format was returned:\n *\n * 1) npm-style \"search objects\" response where each entry is wrapped in\n *    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.\n * 2) Flat packument-style response where each entry exposes `name`, `version`,\n *    `description`, `dist`, etc. directly at the top level.\n *\n * The second shape carries no uplink metadata, so private/remote/cached flags\n * default to `false` and the UI simply omits the corresponding badges.\n */\nexport function normalizeSearchOption(option: any): NormalizedSearchOption {\n  if (option && typeof option === 'object' && option.package) {\n    const pkg = option.package ?? {};\n    const isPrivate = Boolean(option.verdaccioPrivate);\n    const isCached = Boolean(option.verdaccioPkgCached);\n    return {\n      name: pkg.name,\n      version: pkg.version,\n      description: pkg.description,\n      isPrivate,\n      isCached,\n      isRemote: !isCached && !isPrivate,\n    };\n  }\n\n  const flat = option ?? {};\n  return {\n    name: flat.name,\n    version: flat.version,\n    description: flat.description,\n    isPrivate: false,\n    isCached: false,\n    isRemote: false,\n  };\n}\n\nfunction removeHtmlTags(input: string): string {\n  let previous;\n  do {\n    previous = input;\n    input = input.replace(/<[^>]*>?/gm, '');\n  } while (input !== previous);\n  return input;\n}\n\nexport function cleanDescription(description: string): string {\n  let output = description;\n  // remove html tags from description (e.g. <h1...>)\n  output = removeHtmlTags(output);\n  // remove markdown links from description (e.g. [link](url))\n  output = output.replace(/\\(.*?\\)/gm, '').replace(/(\\[!?|\\])/gm, '');\n  return output;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,sBAAsB,QAAqC;AACzE,KAAI,UAAU,OAAO,WAAW,YAAY,OAAO,SAAS;EAC1D,MAAM,MAAM,OAAO,WAAW,EAAE;EAChC,MAAM,YAAY,QAAQ,OAAO,iBAAiB;EAClD,MAAM,WAAW,QAAQ,OAAO,mBAAmB;AACnD,SAAO;GACL,MAAM,IAAI;GACV,SAAS,IAAI;GACb,aAAa,IAAI;GACjB;GACA;GACA,UAAU,CAAC,YAAY,CAAC;GACzB;;CAGH,MAAM,OAAO,UAAU,EAAE;AACzB,QAAO;EACL,MAAM,KAAK;EACX,SAAS,KAAK;EACd,aAAa,KAAK;EAClB,WAAW;EACX,UAAU;EACV,UAAU;EACX;;AAGH,SAAS,eAAe,OAAuB;CAC7C,IAAI;AACJ,IAAG;AACD,aAAW;AACX,UAAQ,MAAM,QAAQ,cAAc,GAAG;UAChC,UAAU;AACnB,QAAO;;AAGT,SAAgB,iBAAiB,aAA6B;CAC5D,IAAI,SAAS;AAEb,UAAS,eAAe,OAAO;AAE/B,UAAS,OAAO,QAAQ,aAAa,GAAG,CAAC,QAAQ,eAAe,GAAG;AACnE,QAAO"}

package/build/components/Search/utils.mjs

@@ -1,4 +1,40 @@
 //#region src/components/Search/utils.ts
+/**
+* Normalize a raw search result into a unified shape the UI can render,
+* regardless of which backend response format was returned:
+*
+* 1) npm-style "search objects" response where each entry is wrapped in
+*    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.
+* 2) Flat packument-style response where each entry exposes `name`, `version`,
+*    `description`, `dist`, etc. directly at the top level.
+*
+* The second shape carries no uplink metadata, so private/remote/cached flags
+* default to `false` and the UI simply omits the corresponding badges.
+*/
+function normalizeSearchOption(option) {
+	if (option && typeof option === "object" && option.package) {
+		const pkg = option.package ?? {};
+		const isPrivate = Boolean(option.verdaccioPrivate);
+		const isCached = Boolean(option.verdaccioPkgCached);
+		return {
+			name: pkg.name,
+			version: pkg.version,
+			description: pkg.description,
+			isPrivate,
+			isCached,
+			isRemote: !isCached && !isPrivate
+		};
+	}
+	const flat = option ?? {};
+	return {
+		name: flat.name,
+		version: flat.version,
+		description: flat.description,
+		isPrivate: false,
+		isCached: false,
+		isRemote: false
+	};
+}
 function removeHtmlTags(input) {
 	let previous;
 	do {
@@ -14,6 +50,6 @@ function cleanDescription(description) {
 	return output;
 }
 //#endregion
-export { cleanDescription };
+export { cleanDescription, normalizeSearchOption };
 
 //# sourceMappingURL=utils.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/components/Search/utils.ts"],"sourcesContent":["function removeHtmlTags(input: string): string {\n  let previous;\n  do {\n    previous = input;\n    input = input.replace(/<[^>]*>?/gm, '');\n  } while (input !== previous);\n  return input;\n}\n\nexport function cleanDescription(description: string): string {\n  let output = description;\n  // remove html tags from description (e.g. <h1...>)\n  output = removeHtmlTags(output);\n  // remove markdown links from description (e.g. [link](url))\n  output = output.replace(/\\(.*?\\)/gm, '').replace(/(\\[!?|\\])/gm, '');\n  return output;\n}\n"],"mappings":";AAAA,SAAS,eAAe,OAAuB;CAC7C,IAAI;AACJ,IAAG;AACD,aAAW;AACX,UAAQ,MAAM,QAAQ,cAAc,GAAG;UAChC,UAAU;AACnB,QAAO;;AAGT,SAAgB,iBAAiB,aAA6B;CAC5D,IAAI,SAAS;AAEb,UAAS,eAAe,OAAO;AAE/B,UAAS,OAAO,QAAQ,aAAa,GAAG,CAAC,QAAQ,eAAe,GAAG;AACnE,QAAO"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/components/Search/utils.ts"],"sourcesContent":["export type NormalizedSearchOption = {\n  name: string;\n  version?: string;\n  description?: string;\n  isPrivate: boolean;\n  isCached: boolean;\n  isRemote: boolean;\n};\n\n/**\n * Normalize a raw search result into a unified shape the UI can render,\n * regardless of which backend response format was returned:\n *\n * 1) npm-style \"search objects\" response where each entry is wrapped in\n *    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.\n * 2) Flat packument-style response where each entry exposes `name`, `version`,\n *    `description`, `dist`, etc. directly at the top level.\n *\n * The second shape carries no uplink metadata, so private/remote/cached flags\n * default to `false` and the UI simply omits the corresponding badges.\n */\nexport function normalizeSearchOption(option: any): NormalizedSearchOption {\n  if (option && typeof option === 'object' && option.package) {\n    const pkg = option.package ?? {};\n    const isPrivate = Boolean(option.verdaccioPrivate);\n    const isCached = Boolean(option.verdaccioPkgCached);\n    return {\n      name: pkg.name,\n      version: pkg.version,\n      description: pkg.description,\n      isPrivate,\n      isCached,\n      isRemote: !isCached && !isPrivate,\n    };\n  }\n\n  const flat = option ?? {};\n  return {\n    name: flat.name,\n    version: flat.version,\n    description: flat.description,\n    isPrivate: false,\n    isCached: false,\n    isRemote: false,\n  };\n}\n\nfunction removeHtmlTags(input: string): string {\n  let previous;\n  do {\n    previous = input;\n    input = input.replace(/<[^>]*>?/gm, '');\n  } while (input !== previous);\n  return input;\n}\n\nexport function cleanDescription(description: string): string {\n  let output = description;\n  // remove html tags from description (e.g. <h1...>)\n  output = removeHtmlTags(output);\n  // remove markdown links from description (e.g. [link](url))\n  output = output.replace(/\\(.*?\\)/gm, '').replace(/(\\[!?|\\])/gm, '');\n  return output;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,sBAAsB,QAAqC;AACzE,KAAI,UAAU,OAAO,WAAW,YAAY,OAAO,SAAS;EAC1D,MAAM,MAAM,OAAO,WAAW,EAAE;EAChC,MAAM,YAAY,QAAQ,OAAO,iBAAiB;EAClD,MAAM,WAAW,QAAQ,OAAO,mBAAmB;AACnD,SAAO;GACL,MAAM,IAAI;GACV,SAAS,IAAI;GACb,aAAa,IAAI;GACjB;GACA;GACA,UAAU,CAAC,YAAY,CAAC;GACzB;;CAGH,MAAM,OAAO,UAAU,EAAE;AACzB,QAAO;EACL,MAAM,KAAK;EACX,SAAS,KAAK;EACd,aAAa,KAAK;EAClB,WAAW;EACX,UAAU;EACV,UAAU;EACX;;AAGH,SAAS,eAAe,OAAuB;CAC7C,IAAI;AACJ,IAAG;AACD,aAAW;AACX,UAAQ,MAAM,QAAQ,cAAc,GAAG;UAChC,UAAU;AACnB,QAAO;;AAGT,SAAgB,iBAAiB,aAA6B;CAC5D,IAAI,SAAS;AAEb,UAAS,eAAe,OAAO;AAE/B,UAAS,OAAO,QAAQ,aAAa,GAAG,CAAC,QAAQ,eAAe,GAAG;AACnE,QAAO"}

package/build/components/UpLinks/styles.mjs

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import { common } from "@mui/material/colors";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import ListItemText from "@mui/material/ListItemText";
 //#region src/components/UpLinks/styles.ts
-var StyledText = styled(Typography)((props) => ({ fontWeight: props.theme.fontWeight.bold }));
+var StyledText = styled(MaterialUITypography)((props) => ({ fontWeight: props.theme.fontWeight.bold }));
 var Spacer = styled("div")(({ theme }) => ({
 	flex: "1 1 auto",
 	borderBottom: `1px dotted ${theme.palette.mode == "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"} `,

package/build/components/UpLinks/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/components/UpLinks/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as MuiListItemText } from '@mui/material/ListItemText';\nimport Typography from '@mui/material/Typography';\nimport { common } from '@mui/material/colors';\n\nimport type { Theme } from '../../Theme';\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n}));\n\nexport const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  flex: '1 1 auto',\n  borderBottom: `1px dotted ${\n    theme.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'\n  } `,\n  whiteSpace: 'nowrap',\n  height: '0.5em',\n  margin: '0 16px',\n}));\n\nexport const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({\n  flex: 'none',\n  color: theme.palette.mode == 'light' ? theme.palette.black : common.white,\n  opacity: 0.6,\n}));\n"],"mappings":";;;;;AAOA,IAAa,aAAa,OAAO,WAAW,EAAqB,WAAW,EAC1E,YAAY,MAAM,MAAM,WAAW,MACpC,EAAE;AAEH,IAAa,SAAS,OAAO,MAAM,EAAqB,EAAE,aAAa;CACrE,MAAM;CACN,cAAc,cACZ,MAAM,QAAQ,QAAQ,UAAU,uBAAuB,2BACxD;CACD,YAAY;CACZ,QAAQ;CACR,QAAQ;CACT,EAAE;AAEH,IAAa,iBAAe,OAAO,aAAgB,EAAqB,EAAE,aAAa;CACrF,MAAM;CACN,OAAO,MAAM,QAAQ,QAAQ,UAAU,MAAM,QAAQ,QAAQ,OAAO;CACpE,SAAS;CACV,EAAE"}
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/components/UpLinks/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as MuiListItemText } from '@mui/material/ListItemText';\nimport Typography from '@mui/material/Typography';\nimport { common } from '@mui/material/colors';\n\nimport type { Theme } from '../../Theme';\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n}));\n\nexport const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  flex: '1 1 auto',\n  borderBottom: `1px dotted ${\n    theme.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'\n  } `,\n  whiteSpace: 'nowrap',\n  height: '0.5em',\n  margin: '0 16px',\n}));\n\nexport const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({\n  flex: 'none',\n  color: theme.palette.mode == 'light' ? theme.palette.black : common.white,\n  opacity: 0.6,\n}));\n"],"mappings":";;;;;AAOA,IAAa,aAAa,OAAO,qBAAW,EAAqB,WAAW,EAC1E,YAAY,MAAM,MAAM,WAAW,MACpC,EAAE;AAEH,IAAa,SAAS,OAAO,MAAM,EAAqB,EAAE,aAAa;CACrE,MAAM;CACN,cAAc,cACZ,MAAM,QAAQ,QAAQ,UAAU,uBAAuB,2BACxD;CACD,YAAY;CACZ,QAAQ;CACR,QAAQ;CACT,EAAE;AAEH,IAAa,iBAAe,OAAO,aAAgB,EAAqB,EAAE,aAAa;CACrF,MAAM;CACN,OAAO,MAAM,QAAQ,QAAQ,UAAU,MAAM,QAAQ,QAAQ,OAAO;CACpE,SAAS;CACV,EAAE"}

package/build/components/Versions/Versions.js

@@ -10,6 +10,7 @@ react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_Box = require("@mui/material/Box");
 _mui_material_Box = require_runtime.__toESM(_mui_material_Box);
+let lodash_es = require("lodash-es");
 let react_i18next = require("react-i18next");
 let _mui_material_Typography = require("@mui/material/Typography");
 _mui_material_Typography = require_runtime.__toESM(_mui_material_Typography);
@@ -21,8 +22,6 @@ let _mui_material_Alert = require("@mui/material/Alert");
 _mui_material_Alert = require_runtime.__toESM(_mui_material_Alert);
 let _mui_material_TextField = require("@mui/material/TextField");
 _mui_material_TextField = require_runtime.__toESM(_mui_material_TextField);
-let lodash_debounce = require("lodash/debounce");
-lodash_debounce = require_runtime.__toESM(lodash_debounce);
 let semver = require("semver");
 semver = require_runtime.__toESM(semver);
 //#region src/components/Versions/Versions.tsx
@@ -71,7 +70,7 @@ var Versions = ({ packageMeta, packageName }) => {
 					children: [t("versions.version-history"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: ` (${Object.keys(packageVersions).length})` })]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_TextField.default, {
 					helperText: t("versions.search.placeholder"),
-					onChange: (0, lodash_debounce.default)((e) => {
+					onChange: (0, lodash_es.debounce)((e) => {
 						filterVersions(e.target.value);
 					}, 200),
 					size: "small",

package/build/components/Versions/Versions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Versions.js","names":[],"sources":["../../../src/components/Versions/Versions.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport debounce from 'lodash/debounce';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport semver from 'semver';\n\nimport type { Theme } from '../../Theme';\nimport { useConfig } from '../../providers';\nimport VersionsHistoryList from './HistoryList';\nimport VersionsTagList from './TagList';\n\nexport type Props = { packageMeta: any; packageName: string };\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme && props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst Versions: React.FC<Props> = ({ packageMeta, packageName }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;\n\n  const [packageVersions, setPackageVersions] = useState(versions);\n  if (!packageMeta || Object.keys(packageMeta).length === 0) {\n    return null;\n  }\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;\n  const hasVersionHistory =\n    packageVersions && Object.keys(packageVersions).length > 0 && packageName;\n\n  const filterVersions = (textSearch) => {\n    const filteredVersions = Object.keys(versions).reduce((acc, version) => {\n      if (textSearch !== '') {\n        if (typeof versions[version] !== 'undefined') {\n          if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {\n            acc[version] = versions[version];\n          }\n        }\n      } else {\n        acc[version] = versions[version];\n      }\n      return acc;\n    }, {});\n\n    setPackageVersions(filteredVersions);\n  };\n\n  return (\n    <Card sx={{ mb: 2 }}>\n      <CardContent>\n        <Box data-testid=\"versions\" sx={{ m: 2 }}>\n          {hasDistTags ? (\n            <>\n              <StyledText variant=\"subtitle1\">\n                {t('versions.current-tags')}\n                <span>{` (${Object.keys(distTags).length})`}</span>\n              </StyledText>\n              <VersionsTagList packageName={packageName} tags={distTags} time={time} />\n            </>\n          ) : null}\n          <>\n            <StyledText variant=\"subtitle1\">\n              {t('versions.version-history')}\n              <span>{` (${Object.keys(packageVersions).length})`}</span>\n            </StyledText>\n            <TextField\n              helperText={t('versions.search.placeholder')}\n              onChange={debounce((e) => {\n                filterVersions(e.target.value);\n              }, 200)}\n              size=\"small\"\n              variant=\"standard\"\n              sx={{ width: '50%' }}\n            />\n          </>\n          {hasVersionHistory ? (\n            <>\n              {hideDeprecatedVersions === true && (\n                // @ts-ignore - Alert does accept children despite the type error\n                <Alert severity=\"info\" sx={{ marginTop: 1, marginBottom: 1 }}>\n                  {t('versions.hide-deprecated')}\n                </Alert>\n              )}\n              <VersionsHistoryList\n                packageName={packageName}\n                time={time}\n                versions={packageVersions}\n              />\n            </>\n          ) : null}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Versions;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAa,cAAA,GAAA,gBAAA,SAAoB,yBAAA,QAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,SAAS,MAAM,MAAM,WAAW;CAClD,eAAe;CAChB,EAAE;AAEH,IAAM,YAA6B,EAAE,aAAa,kBAAkB;CAClE,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,EAAE,kBAAkB,iCAAA,WAAW;CACrC,MAAM,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,GAAG,cAAc,WAAW,EAAE,KAAK;CAEnE,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA+B,SAAS;AAChE,KAAI,CAAC,eAAe,OAAO,KAAK,YAAY,CAAC,WAAW,EACtD,QAAO;CAET,MAAM,yBAAyB,cAAc;CAC7C,MAAM,cAAc,YAAY,OAAO,KAAK,SAAS,CAAC,SAAS,KAAK;CACpE,MAAM,oBACJ,mBAAmB,OAAO,KAAK,gBAAgB,CAAC,SAAS,KAAK;CAEhE,MAAM,kBAAkB,eAAe;AAcrC,qBAbyB,OAAO,KAAK,SAAS,CAAC,QAAQ,KAAK,YAAY;AACtE,OAAI,eAAe;QACb,OAAO,SAAS,aAAa;SAC3B,OAAA,QAAO,UAAU,SAAS,YAAY;MAAE,mBAAmB;MAAM,OAAO;MAAM,CAAC,CACjF,KAAI,WAAW,SAAS;;SAI5B,KAAI,WAAW,SAAS;AAE1B,UAAO;KACN,EAAE,CAAC,CAE8B;;AAGtC,QACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,SAAD;EAAM,IAAI,EAAE,IAAI,GAAG;YACjB,iBAAA,GAAA,kBAAA,KAAC,0BAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,kBAAA,SAAD;GAAK,eAAY;GAAW,IAAI,EAAE,GAAG,GAAG;aAAxC;IACG,cACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAAC,YAAD;KAAY,SAAQ;eAApB,CACG,EAAE,wBAAwB,EAC3B,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,SAAS,CAAC,OAAO,IAAU,CAAA,CACxC;QACb,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KAA8B;KAAa,MAAM;KAAgB;KAAQ,CAAA,CACxE,EAAA,CAAA,GACD;IACJ,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAAC,YAAD;KAAY,SAAQ;eAApB,CACG,EAAE,2BAA2B,EAC9B,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAU,CAAA,CAC/C;QACb,iBAAA,GAAA,kBAAA,KAAC,wBAAA,SAAD;KACE,YAAY,EAAE,8BAA8B;KAC5C,WAAA,GAAA,gBAAA,UAAoB,MAAM;AACxB,qBAAe,EAAE,OAAO,MAAM;QAC7B,IAAI;KACP,MAAK;KACL,SAAQ;KACR,IAAI,EAAE,OAAO,OAAO;KACpB,CAAA,CACD,EAAA,CAAA;IACF,oBACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,2BAA2B,QAE1B,iBAAA,GAAA,kBAAA,KAAC,oBAAA,SAAD;KAAO,UAAS;KAAO,IAAI;MAAE,WAAW;MAAG,cAAc;MAAG;eACzD,EAAE,2BAA2B;KACxB,CAAA,EAEV,iBAAA,GAAA,kBAAA,KAAC,oBAAA,SAAD;KACe;KACP;KACN,UAAU;KACV,CAAA,CACD,EAAA,CAAA,GACD;IACA;MACM,CAAA;EACT,CAAA"}
+{"version":3,"file":"Versions.js","names":[],"sources":["../../../src/components/Versions/Versions.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport { debounce } from 'lodash-es';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport semver from 'semver';\n\nimport type { Theme } from '../../Theme';\nimport { useConfig } from '../../providers';\nimport VersionsHistoryList from './HistoryList';\nimport VersionsTagList from './TagList';\n\nexport type Props = { packageMeta: any; packageName: string };\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme && props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst Versions: React.FC<Props> = ({ packageMeta, packageName }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;\n\n  const [packageVersions, setPackageVersions] = useState(versions);\n  if (!packageMeta || Object.keys(packageMeta).length === 0) {\n    return null;\n  }\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;\n  const hasVersionHistory =\n    packageVersions && Object.keys(packageVersions).length > 0 && packageName;\n\n  const filterVersions = (textSearch) => {\n    const filteredVersions = Object.keys(versions).reduce((acc, version) => {\n      if (textSearch !== '') {\n        if (typeof versions[version] !== 'undefined') {\n          if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {\n            acc[version] = versions[version];\n          }\n        }\n      } else {\n        acc[version] = versions[version];\n      }\n      return acc;\n    }, {});\n\n    setPackageVersions(filteredVersions);\n  };\n\n  return (\n    <Card sx={{ mb: 2 }}>\n      <CardContent>\n        <Box data-testid=\"versions\" sx={{ m: 2 }}>\n          {hasDistTags ? (\n            <>\n              <StyledText variant=\"subtitle1\">\n                {t('versions.current-tags')}\n                <span>{` (${Object.keys(distTags).length})`}</span>\n              </StyledText>\n              <VersionsTagList packageName={packageName} tags={distTags} time={time} />\n            </>\n          ) : null}\n          <>\n            <StyledText variant=\"subtitle1\">\n              {t('versions.version-history')}\n              <span>{` (${Object.keys(packageVersions).length})`}</span>\n            </StyledText>\n            <TextField\n              helperText={t('versions.search.placeholder')}\n              onChange={debounce((e) => {\n                filterVersions(e.target.value);\n              }, 200)}\n              size=\"small\"\n              variant=\"standard\"\n              sx={{ width: '50%' }}\n            />\n          </>\n          {hasVersionHistory ? (\n            <>\n              {hideDeprecatedVersions === true && (\n                // @ts-ignore - Alert does accept children despite the type error\n                <Alert severity=\"info\" sx={{ marginTop: 1, marginBottom: 1 }}>\n                  {t('versions.hide-deprecated')}\n                </Alert>\n              )}\n              <VersionsHistoryList\n                packageName={packageName}\n                time={time}\n                versions={packageVersions}\n              />\n            </>\n          ) : null}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Versions;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAa,cAAA,GAAA,gBAAA,SAAoB,yBAAA,QAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,SAAS,MAAM,MAAM,WAAW;CAClD,eAAe;CAChB,EAAE;AAEH,IAAM,YAA6B,EAAE,aAAa,kBAAkB;CAClE,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,EAAE,kBAAkB,iCAAA,WAAW;CACrC,MAAM,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,GAAG,cAAc,WAAW,EAAE,KAAK;CAEnE,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA+B,SAAS;AAChE,KAAI,CAAC,eAAe,OAAO,KAAK,YAAY,CAAC,WAAW,EACtD,QAAO;CAET,MAAM,yBAAyB,cAAc;CAC7C,MAAM,cAAc,YAAY,OAAO,KAAK,SAAS,CAAC,SAAS,KAAK;CACpE,MAAM,oBACJ,mBAAmB,OAAO,KAAK,gBAAgB,CAAC,SAAS,KAAK;CAEhE,MAAM,kBAAkB,eAAe;AAcrC,qBAbyB,OAAO,KAAK,SAAS,CAAC,QAAQ,KAAK,YAAY;AACtE,OAAI,eAAe;QACb,OAAO,SAAS,aAAa;SAC3B,OAAA,QAAO,UAAU,SAAS,YAAY;MAAE,mBAAmB;MAAM,OAAO;MAAM,CAAC,CACjF,KAAI,WAAW,SAAS;;SAI5B,KAAI,WAAW,SAAS;AAE1B,UAAO;KACN,EAAE,CAAC,CAE8B;;AAGtC,QACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,SAAD;EAAM,IAAI,EAAE,IAAI,GAAG;YACjB,iBAAA,GAAA,kBAAA,KAAC,0BAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,kBAAA,SAAD;GAAK,eAAY;GAAW,IAAI,EAAE,GAAG,GAAG;aAAxC;IACG,cACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAAC,YAAD;KAAY,SAAQ;eAApB,CACG,EAAE,wBAAwB,EAC3B,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,SAAS,CAAC,OAAO,IAAU,CAAA,CACxC;QACb,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KAA8B;KAAa,MAAM;KAAgB;KAAQ,CAAA,CACxE,EAAA,CAAA,GACD;IACJ,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAAC,YAAD;KAAY,SAAQ;eAApB,CACG,EAAE,2BAA2B,EAC9B,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAU,CAAA,CAC/C;QACb,iBAAA,GAAA,kBAAA,KAAC,wBAAA,SAAD;KACE,YAAY,EAAE,8BAA8B;KAC5C,WAAA,GAAA,UAAA,WAAoB,MAAM;AACxB,qBAAe,EAAE,OAAO,MAAM;QAC7B,IAAI;KACP,MAAK;KACL,SAAQ;KACR,IAAI,EAAE,OAAO,OAAO;KACpB,CAAA,CACD,EAAA,CAAA;IACF,oBACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,2BAA2B,QAE1B,iBAAA,GAAA,kBAAA,KAAC,oBAAA,SAAD;KAAO,UAAS;KAAO,IAAI;MAAE,WAAW;MAAG,cAAc;MAAG;eACzD,EAAE,2BAA2B;KACxB,CAAA,EAEV,iBAAA,GAAA,kBAAA,KAAC,oBAAA,SAAD;KACe;KACP;KACN,UAAU;KACV,CAAA,CACD,EAAA,CAAA,GACD;IACA;MACM,CAAA;EACT,CAAA"}

package/build/components/Versions/Versions.mjs

@@ -6,16 +6,16 @@ import styled from "@emotion/styled";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
+import { debounce } from "lodash-es";
 import { useTranslation } from "react-i18next";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Alert from "@mui/material/Alert";
 import TextField from "@mui/material/TextField";
-import debounce from "lodash/debounce";
 import semver from "semver";
 //#region src/components/Versions/Versions.tsx
-var StyledText = styled(Typography)((props) => ({
+var StyledText = styled(MaterialUITypography)((props) => ({
 	fontWeight: props.theme && props.theme.fontWeight.bold,
 	textTransform: "capitalize"
 }));

package/build/components/Versions/Versions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Versions.mjs","names":[],"sources":["../../../src/components/Versions/Versions.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport debounce from 'lodash/debounce';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport semver from 'semver';\n\nimport type { Theme } from '../../Theme';\nimport { useConfig } from '../../providers';\nimport VersionsHistoryList from './HistoryList';\nimport VersionsTagList from './TagList';\n\nexport type Props = { packageMeta: any; packageName: string };\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme && props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst Versions: React.FC<Props> = ({ packageMeta, packageName }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;\n\n  const [packageVersions, setPackageVersions] = useState(versions);\n  if (!packageMeta || Object.keys(packageMeta).length === 0) {\n    return null;\n  }\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;\n  const hasVersionHistory =\n    packageVersions && Object.keys(packageVersions).length > 0 && packageName;\n\n  const filterVersions = (textSearch) => {\n    const filteredVersions = Object.keys(versions).reduce((acc, version) => {\n      if (textSearch !== '') {\n        if (typeof versions[version] !== 'undefined') {\n          if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {\n            acc[version] = versions[version];\n          }\n        }\n      } else {\n        acc[version] = versions[version];\n      }\n      return acc;\n    }, {});\n\n    setPackageVersions(filteredVersions);\n  };\n\n  return (\n    <Card sx={{ mb: 2 }}>\n      <CardContent>\n        <Box data-testid=\"versions\" sx={{ m: 2 }}>\n          {hasDistTags ? (\n            <>\n              <StyledText variant=\"subtitle1\">\n                {t('versions.current-tags')}\n                <span>{` (${Object.keys(distTags).length})`}</span>\n              </StyledText>\n              <VersionsTagList packageName={packageName} tags={distTags} time={time} />\n            </>\n          ) : null}\n          <>\n            <StyledText variant=\"subtitle1\">\n              {t('versions.version-history')}\n              <span>{` (${Object.keys(packageVersions).length})`}</span>\n            </StyledText>\n            <TextField\n              helperText={t('versions.search.placeholder')}\n              onChange={debounce((e) => {\n                filterVersions(e.target.value);\n              }, 200)}\n              size=\"small\"\n              variant=\"standard\"\n              sx={{ width: '50%' }}\n            />\n          </>\n          {hasVersionHistory ? (\n            <>\n              {hideDeprecatedVersions === true && (\n                // @ts-ignore - Alert does accept children despite the type error\n                <Alert severity=\"info\" sx={{ marginTop: 1, marginBottom: 1 }}>\n                  {t('versions.hide-deprecated')}\n                </Alert>\n              )}\n              <VersionsHistoryList\n                packageName={packageName}\n                time={time}\n                versions={packageVersions}\n              />\n            </>\n          ) : null}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Versions;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAa,aAAa,OAAO,WAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,SAAS,MAAM,MAAM,WAAW;CAClD,eAAe;CAChB,EAAE;AAEH,IAAM,YAA6B,EAAE,aAAa,kBAAkB;CAClE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,kBAAkB,WAAW;CACrC,MAAM,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,GAAG,cAAc,WAAW,EAAE,KAAK;CAEnE,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,SAAS;AAChE,KAAI,CAAC,eAAe,OAAO,KAAK,YAAY,CAAC,WAAW,EACtD,QAAO;CAET,MAAM,yBAAyB,cAAc;CAC7C,MAAM,cAAc,YAAY,OAAO,KAAK,SAAS,CAAC,SAAS,KAAK;CACpE,MAAM,oBACJ,mBAAmB,OAAO,KAAK,gBAAgB,CAAC,SAAS,KAAK;CAEhE,MAAM,kBAAkB,eAAe;AAcrC,qBAbyB,OAAO,KAAK,SAAS,CAAC,QAAQ,KAAK,YAAY;AACtE,OAAI,eAAe;QACb,OAAO,SAAS,aAAa;SAC3B,OAAO,UAAU,SAAS,YAAY;MAAE,mBAAmB;MAAM,OAAO;MAAM,CAAC,CACjF,KAAI,WAAW,SAAS;;SAI5B,KAAI,WAAW,SAAS;AAE1B,UAAO;KACN,EAAE,CAAC,CAE8B;;AAGtC,QACE,oBAAC,MAAD;EAAM,IAAI,EAAE,IAAI,GAAG;YACjB,oBAAC,aAAD,EAAA,UACE,qBAAC,KAAD;GAAK,eAAY;GAAW,IAAI,EAAE,GAAG,GAAG;aAAxC;IACG,cACC,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,YAAD;KAAY,SAAQ;eAApB,CACG,EAAE,wBAAwB,EAC3B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,SAAS,CAAC,OAAO,IAAU,CAAA,CACxC;QACb,oBAAC,iBAAD;KAA8B;KAAa,MAAM;KAAgB;KAAQ,CAAA,CACxE,EAAA,CAAA,GACD;IACJ,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,YAAD;KAAY,SAAQ;eAApB,CACG,EAAE,2BAA2B,EAC9B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAU,CAAA,CAC/C;QACb,oBAAC,WAAD;KACE,YAAY,EAAE,8BAA8B;KAC5C,UAAU,UAAU,MAAM;AACxB,qBAAe,EAAE,OAAO,MAAM;QAC7B,IAAI;KACP,MAAK;KACL,SAAQ;KACR,IAAI,EAAE,OAAO,OAAO;KACpB,CAAA,CACD,EAAA,CAAA;IACF,oBACC,qBAAA,YAAA,EAAA,UAAA,CACG,2BAA2B,QAE1B,oBAAC,OAAD;KAAO,UAAS;KAAO,IAAI;MAAE,WAAW;MAAG,cAAc;MAAG;eACzD,EAAE,2BAA2B;KACxB,CAAA,EAEV,oBAAC,qBAAD;KACe;KACP;KACN,UAAU;KACV,CAAA,CACD,EAAA,CAAA,GACD;IACA;MACM,CAAA;EACT,CAAA"}
+{"version":3,"file":"Versions.mjs","names":[],"sources":["../../../src/components/Versions/Versions.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport { debounce } from 'lodash-es';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport semver from 'semver';\n\nimport type { Theme } from '../../Theme';\nimport { useConfig } from '../../providers';\nimport VersionsHistoryList from './HistoryList';\nimport VersionsTagList from './TagList';\n\nexport type Props = { packageMeta: any; packageName: string };\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme && props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst Versions: React.FC<Props> = ({ packageMeta, packageName }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;\n\n  const [packageVersions, setPackageVersions] = useState(versions);\n  if (!packageMeta || Object.keys(packageMeta).length === 0) {\n    return null;\n  }\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;\n  const hasVersionHistory =\n    packageVersions && Object.keys(packageVersions).length > 0 && packageName;\n\n  const filterVersions = (textSearch) => {\n    const filteredVersions = Object.keys(versions).reduce((acc, version) => {\n      if (textSearch !== '') {\n        if (typeof versions[version] !== 'undefined') {\n          if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {\n            acc[version] = versions[version];\n          }\n        }\n      } else {\n        acc[version] = versions[version];\n      }\n      return acc;\n    }, {});\n\n    setPackageVersions(filteredVersions);\n  };\n\n  return (\n    <Card sx={{ mb: 2 }}>\n      <CardContent>\n        <Box data-testid=\"versions\" sx={{ m: 2 }}>\n          {hasDistTags ? (\n            <>\n              <StyledText variant=\"subtitle1\">\n                {t('versions.current-tags')}\n                <span>{` (${Object.keys(distTags).length})`}</span>\n              </StyledText>\n              <VersionsTagList packageName={packageName} tags={distTags} time={time} />\n            </>\n          ) : null}\n          <>\n            <StyledText variant=\"subtitle1\">\n              {t('versions.version-history')}\n              <span>{` (${Object.keys(packageVersions).length})`}</span>\n            </StyledText>\n            <TextField\n              helperText={t('versions.search.placeholder')}\n              onChange={debounce((e) => {\n                filterVersions(e.target.value);\n              }, 200)}\n              size=\"small\"\n              variant=\"standard\"\n              sx={{ width: '50%' }}\n            />\n          </>\n          {hasVersionHistory ? (\n            <>\n              {hideDeprecatedVersions === true && (\n                // @ts-ignore - Alert does accept children despite the type error\n                <Alert severity=\"info\" sx={{ marginTop: 1, marginBottom: 1 }}>\n                  {t('versions.hide-deprecated')}\n                </Alert>\n              )}\n              <VersionsHistoryList\n                packageName={packageName}\n                time={time}\n                versions={packageVersions}\n              />\n            </>\n          ) : null}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Versions;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAa,aAAa,OAAO,qBAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,SAAS,MAAM,MAAM,WAAW;CAClD,eAAe;CAChB,EAAE;AAEH,IAAM,YAA6B,EAAE,aAAa,kBAAkB;CAClE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,kBAAkB,WAAW;CACrC,MAAM,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,GAAG,cAAc,WAAW,EAAE,KAAK;CAEnE,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,SAAS;AAChE,KAAI,CAAC,eAAe,OAAO,KAAK,YAAY,CAAC,WAAW,EACtD,QAAO;CAET,MAAM,yBAAyB,cAAc;CAC7C,MAAM,cAAc,YAAY,OAAO,KAAK,SAAS,CAAC,SAAS,KAAK;CACpE,MAAM,oBACJ,mBAAmB,OAAO,KAAK,gBAAgB,CAAC,SAAS,KAAK;CAEhE,MAAM,kBAAkB,eAAe;AAcrC,qBAbyB,OAAO,KAAK,SAAS,CAAC,QAAQ,KAAK,YAAY;AACtE,OAAI,eAAe;QACb,OAAO,SAAS,aAAa;SAC3B,OAAO,UAAU,SAAS,YAAY;MAAE,mBAAmB;MAAM,OAAO;MAAM,CAAC,CACjF,KAAI,WAAW,SAAS;;SAI5B,KAAI,WAAW,SAAS;AAE1B,UAAO;KACN,EAAE,CAAC,CAE8B;;AAGtC,QACE,oBAAC,MAAD;EAAM,IAAI,EAAE,IAAI,GAAG;YACjB,oBAAC,aAAD,EAAA,UACE,qBAAC,KAAD;GAAK,eAAY;GAAW,IAAI,EAAE,GAAG,GAAG;aAAxC;IACG,cACC,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,YAAD;KAAY,SAAQ;eAApB,CACG,EAAE,wBAAwB,EAC3B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,SAAS,CAAC,OAAO,IAAU,CAAA,CACxC;QACb,oBAAC,iBAAD;KAA8B;KAAa,MAAM;KAAgB;KAAQ,CAAA,CACxE,EAAA,CAAA,GACD;IACJ,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,YAAD;KAAY,SAAQ;eAApB,CACG,EAAE,2BAA2B,EAC9B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAU,CAAA,CAC/C;QACb,oBAAC,WAAD;KACE,YAAY,EAAE,8BAA8B;KAC5C,UAAU,UAAU,MAAM;AACxB,qBAAe,EAAE,OAAO,MAAM;QAC7B,IAAI;KACP,MAAK;KACL,SAAQ;KACR,IAAI,EAAE,OAAO,OAAO;KACpB,CAAA,CACD,EAAA,CAAA;IACF,oBACC,qBAAA,YAAA,EAAA,UAAA,CACG,2BAA2B,QAE1B,oBAAC,OAAD;KAAO,UAAS;KAAO,IAAI;MAAE,WAAW;MAAG,cAAc;MAAG;eACzD,EAAE,2BAA2B;KACxB,CAAA,EAEV,oBAAC,qBAAD;KACe;KACP;KACN,UAAU;KACV,CAAA,CACD,EAAA,CAAA,GACD;IACA;MACM,CAAA;EACT,CAAA"}

package/build/sections/Header/LanguageSwitch.mjs

@@ -5,7 +5,7 @@ import { useCallback, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import i18next from "i18next";
 import { useTranslation } from "react-i18next";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Grid from "@mui/material/Grid";
@@ -24,7 +24,7 @@ var CardUnSelected = styled(Card)(({ theme }) => {
 		":hover": { backgroundColor: theme.palette.greyGainsboro }
 	};
 });
-var LanguageContent = ({ translation, icon }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, {
+var LanguageContent = ({ translation, icon }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(MaterialUITypography, {
 	display: "block",
 	gutterBottom: true,
 	variant: "caption",

package/build/sections/Header/LanguageSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageSwitch.mjs","names":[],"sources":["../../../src/sections/Header/LanguageSwitch.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\nimport i18next from 'i18next';\nimport React, { useCallback, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { useLanguage } from '../../';\n\nexport const CardSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {\n  return {\n    backgroundColor: theme.palette.grey['600'],\n    opacity: '0.9',\n    color: theme.palette.error.contrastText,\n    fontWeight: 'bold',\n  };\n});\n\nexport const CardUnSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {\n  return {\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: theme.palette.greyGainsboro,\n    },\n  };\n});\n\nconst LanguageContent = ({ translation, icon }) => (\n  <>\n    <CardContent>\n      <Typography display=\"block\" gutterBottom={true} variant=\"caption\">\n        {translation}\n      </Typography>\n    </CardContent>\n    <CardContent>{icon}</CardContent>\n  </>\n);\n\nconst LanguageSwitch = () => {\n  const { language, setLanguage, listLanguages } = useLanguage();\n  const listConverted = listLanguages.reduce(\n    (prev, item) => {\n      prev[item.lng] = {\n        translation: item.menuKey,\n        icon: item.icon,\n      };\n      return prev;\n    },\n    {} as Record<string, { translation: string; icon: any }>\n  );\n\n  const [languages] = useState<string[]>(Object.keys(i18next.options?.resources || {}));\n  const { t } = useTranslation();\n  const currentLanguage = language;\n  const getCurrentLngDetails = useCallback(\n    (language: string) => {\n      const lng = listConverted[language] || listConverted['en-US'];\n      return {\n        icon: <lng.icon />,\n        translation: t(lng.translation),\n      };\n    },\n    [listConverted, t]\n  );\n  const handleChangeLanguage = useCallback(\n    (language: string) => {\n      setLanguage(language);\n    },\n    [setLanguage]\n  );\n\n  return (\n    <div>\n      <Grid columns={{ xs: 12, sm: 12, md: 12 }} container={true} spacing={{ xs: 1, md: 1 }}>\n        {languages.map((language, index) => {\n          const { icon, translation } = getCurrentLngDetails(language);\n          return (\n            <Grid key={index} size={{ sm: 2, xs: 6 }}>\n              {language === currentLanguage ? (\n                <CardSelected sx={{ maxWidth: 80 }}>\n                  <LanguageContent icon={icon} translation={translation} />\n                </CardSelected>\n              ) : (\n                <CardUnSelected onClick={() => handleChangeLanguage(language)}>\n                  <LanguageContent icon={icon} translation={translation} />\n                </CardUnSelected>\n              )}\n            </Grid>\n          );\n        })}\n      </Grid>\n    </div>\n  );\n};\n\nexport default LanguageSwitch;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,eAAe,OAAO,KAAK,EAAqB,EAAE,YAAY;AACzE,QAAO;EACL,iBAAiB,MAAM,QAAQ,KAAK;EACpC,SAAS;EACT,OAAO,MAAM,QAAQ,MAAM;EAC3B,YAAY;EACb;EACD;AAEF,IAAa,iBAAiB,OAAO,KAAK,EAAqB,EAAE,YAAY;AAC3E,QAAO;EACL,QAAQ;EACR,UAAU,EACR,iBAAiB,MAAM,QAAQ,eAChC;EACF;EACD;AAEF,IAAM,mBAAmB,EAAE,aAAa,WACtC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UACE,oBAAC,YAAD;CAAY,SAAQ;CAAQ,cAAc;CAAM,SAAQ;WACrD;CACU,CAAA,EACD,CAAA,EACd,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,CAChC,EAAA,CAAA;AAGL,IAAM,uBAAuB;CAC3B,MAAM,EAAE,UAAU,aAAa,kBAAkB,aAAa;CAC9D,MAAM,gBAAgB,cAAc,QACjC,MAAM,SAAS;AACd,OAAK,KAAK,OAAO;GACf,aAAa,KAAK;GAClB,MAAM,KAAK;GACZ;AACD,SAAO;IAET,EAAE,CACH;CAED,MAAM,CAAC,aAAa,SAAmB,OAAO,KAAK,QAAQ,SAAS,aAAa,EAAE,CAAC,CAAC;CACrF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,kBAAkB;CACxB,MAAM,uBAAuB,aAC1B,aAAqB;EACpB,MAAM,MAAM,cAAc,aAAa,cAAc;AACrD,SAAO;GACL,MAAM,oBAAC,IAAI,MAAL,EAAY,CAAA;GAClB,aAAa,EAAE,IAAI,YAAY;GAChC;IAEH,CAAC,eAAe,EAAE,CACnB;CACD,MAAM,uBAAuB,aAC1B,aAAqB;AACpB,cAAY,SAAS;IAEvB,CAAC,YAAY,CACd;AAED,QACE,oBAAC,OAAD,EAAA,UACE,oBAAC,MAAD;EAAM,SAAS;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;GAAI;EAAE,WAAW;EAAM,SAAS;GAAE,IAAI;GAAG,IAAI;GAAG;YAClF,UAAU,KAAK,UAAU,UAAU;GAClC,MAAM,EAAE,MAAM,gBAAgB,qBAAqB,SAAS;AAC5D,UACE,oBAAC,MAAD;IAAkB,MAAM;KAAE,IAAI;KAAG,IAAI;KAAG;cACrC,aAAa,kBACZ,oBAAC,cAAD;KAAc,IAAI,EAAE,UAAU,IAAI;eAChC,oBAAC,iBAAD;MAAuB;MAAmB;MAAe,CAAA;KAC5C,CAAA,GAEf,oBAAC,gBAAD;KAAgB,eAAe,qBAAqB,SAAS;eAC3D,oBAAC,iBAAD;MAAuB;MAAmB;MAAe,CAAA;KAC1C,CAAA;IAEd,EAVI,MAUJ;IAET;EACG,CAAA,EACH,CAAA"}
+{"version":3,"file":"LanguageSwitch.mjs","names":[],"sources":["../../../src/sections/Header/LanguageSwitch.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\nimport i18next from 'i18next';\nimport React, { useCallback, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { useLanguage } from '../../';\n\nexport const CardSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {\n  return {\n    backgroundColor: theme.palette.grey['600'],\n    opacity: '0.9',\n    color: theme.palette.error.contrastText,\n    fontWeight: 'bold',\n  };\n});\n\nexport const CardUnSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {\n  return {\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: theme.palette.greyGainsboro,\n    },\n  };\n});\n\nconst LanguageContent = ({ translation, icon }) => (\n  <>\n    <CardContent>\n      <Typography display=\"block\" gutterBottom={true} variant=\"caption\">\n        {translation}\n      </Typography>\n    </CardContent>\n    <CardContent>{icon}</CardContent>\n  </>\n);\n\nconst LanguageSwitch = () => {\n  const { language, setLanguage, listLanguages } = useLanguage();\n  const listConverted = listLanguages.reduce(\n    (prev, item) => {\n      prev[item.lng] = {\n        translation: item.menuKey,\n        icon: item.icon,\n      };\n      return prev;\n    },\n    {} as Record<string, { translation: string; icon: any }>\n  );\n\n  const [languages] = useState<string[]>(Object.keys(i18next.options?.resources || {}));\n  const { t } = useTranslation();\n  const currentLanguage = language;\n  const getCurrentLngDetails = useCallback(\n    (language: string) => {\n      const lng = listConverted[language] || listConverted['en-US'];\n      return {\n        icon: <lng.icon />,\n        translation: t(lng.translation),\n      };\n    },\n    [listConverted, t]\n  );\n  const handleChangeLanguage = useCallback(\n    (language: string) => {\n      setLanguage(language);\n    },\n    [setLanguage]\n  );\n\n  return (\n    <div>\n      <Grid columns={{ xs: 12, sm: 12, md: 12 }} container={true} spacing={{ xs: 1, md: 1 }}>\n        {languages.map((language, index) => {\n          const { icon, translation } = getCurrentLngDetails(language);\n          return (\n            <Grid key={index} size={{ sm: 2, xs: 6 }}>\n              {language === currentLanguage ? (\n                <CardSelected sx={{ maxWidth: 80 }}>\n                  <LanguageContent icon={icon} translation={translation} />\n                </CardSelected>\n              ) : (\n                <CardUnSelected onClick={() => handleChangeLanguage(language)}>\n                  <LanguageContent icon={icon} translation={translation} />\n                </CardUnSelected>\n              )}\n            </Grid>\n          );\n        })}\n      </Grid>\n    </div>\n  );\n};\n\nexport default LanguageSwitch;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,eAAe,OAAO,KAAK,EAAqB,EAAE,YAAY;AACzE,QAAO;EACL,iBAAiB,MAAM,QAAQ,KAAK;EACpC,SAAS;EACT,OAAO,MAAM,QAAQ,MAAM;EAC3B,YAAY;EACb;EACD;AAEF,IAAa,iBAAiB,OAAO,KAAK,EAAqB,EAAE,YAAY;AAC3E,QAAO;EACL,QAAQ;EACR,UAAU,EACR,iBAAiB,MAAM,QAAQ,eAChC;EACF;EACD;AAEF,IAAM,mBAAmB,EAAE,aAAa,WACtC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UACE,oBAAC,sBAAD;CAAY,SAAQ;CAAQ,cAAc;CAAM,SAAQ;WACrD;CACU,CAAA,EACD,CAAA,EACd,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,CAChC,EAAA,CAAA;AAGL,IAAM,uBAAuB;CAC3B,MAAM,EAAE,UAAU,aAAa,kBAAkB,aAAa;CAC9D,MAAM,gBAAgB,cAAc,QACjC,MAAM,SAAS;AACd,OAAK,KAAK,OAAO;GACf,aAAa,KAAK;GAClB,MAAM,KAAK;GACZ;AACD,SAAO;IAET,EAAE,CACH;CAED,MAAM,CAAC,aAAa,SAAmB,OAAO,KAAK,QAAQ,SAAS,aAAa,EAAE,CAAC,CAAC;CACrF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,kBAAkB;CACxB,MAAM,uBAAuB,aAC1B,aAAqB;EACpB,MAAM,MAAM,cAAc,aAAa,cAAc;AACrD,SAAO;GACL,MAAM,oBAAC,IAAI,MAAL,EAAY,CAAA;GAClB,aAAa,EAAE,IAAI,YAAY;GAChC;IAEH,CAAC,eAAe,EAAE,CACnB;CACD,MAAM,uBAAuB,aAC1B,aAAqB;AACpB,cAAY,SAAS;IAEvB,CAAC,YAAY,CACd;AAED,QACE,oBAAC,OAAD,EAAA,UACE,oBAAC,MAAD;EAAM,SAAS;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;GAAI;EAAE,WAAW;EAAM,SAAS;GAAE,IAAI;GAAG,IAAI;GAAG;YAClF,UAAU,KAAK,UAAU,UAAU;GAClC,MAAM,EAAE,MAAM,gBAAgB,qBAAqB,SAAS;AAC5D,UACE,oBAAC,MAAD;IAAkB,MAAM;KAAE,IAAI;KAAG,IAAI;KAAG;cACrC,aAAa,kBACZ,oBAAC,cAAD;KAAc,IAAI,EAAE,UAAU,IAAI;eAChC,oBAAC,iBAAD;MAAuB;MAAmB;MAAe,CAAA;KAC5C,CAAA,GAEf,oBAAC,gBAAD;KAAgB,eAAe,qBAAqB,SAAS;eAC3D,oBAAC,iBAAD;MAAuB;MAAmB;MAAe,CAAA;KAC1C,CAAA;IAEd,EAVI,MAUJ;IAET;EACG,CAAA,EACH,CAAA"}

package/build/sections/Header/RegistryInfoContent/RegistryInfoContent.mjs

@@ -9,7 +9,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import { useTranslation } from "react-i18next";
 import Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import ReactMarkdown from "react-markdown";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import Accordion from "@mui/material/Accordion";
@@ -104,7 +104,7 @@ var RegistryInfoContent = ({ scope, registryUrl }) => {
 				"aria-controls": "panel1a-content",
 				expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
 				id: "panel1a-header",
-				children: /* @__PURE__ */ jsx(Typography, {
+				children: /* @__PURE__ */ jsx(MaterialUITypography, {
 					sx: {
 						fontSize: "1rem",
 						fontWeight: "bold"
@@ -122,7 +122,7 @@ var RegistryInfoContent = ({ scope, registryUrl }) => {
 				"aria-controls": "panel2a-content",
 				expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
 				id: "panel2a-header",
-				children: /* @__PURE__ */ jsx(Typography, {
+				children: /* @__PURE__ */ jsx(MaterialUITypography, {
 					sx: {
 						fontSize: "1rem",
 						fontWeight: "bold"
@@ -148,7 +148,7 @@ var RegistryInfoContent = ({ scope, registryUrl }) => {
 				"aria-controls": "panel3a-content",
 				expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
 				id: "panel3a-header",
-				children: /* @__PURE__ */ jsx(Typography, {
+				children: /* @__PURE__ */ jsx(MaterialUITypography, {
 					sx: {
 						fontSize: "1rem",
 						fontWeight: "bold"
@@ -163,7 +163,7 @@ var RegistryInfoContent = ({ scope, registryUrl }) => {
 		/* @__PURE__ */ jsx(LinkContainer, { children: /* @__PURE__ */ jsx(Link, {
 			href: "https://verdaccio.org/docs/cli-registry",
 			target: "_blank",
-			children: /* @__PURE__ */ jsx(Typography, { children: t("header.registry-info-link") })
+			children: /* @__PURE__ */ jsx(MaterialUITypography, { children: t("header.registry-info-link") })
 		}) })
 	] })] });
 };

package/build/sections/Header/RegistryInfoContent/RegistryInfoContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RegistryInfoContent.mjs","names":[],"sources":["../../../../src/sections/Header/RegistryInfoContent/RegistryInfoContent.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Box from '@mui/material/Box';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport {\n  CopyClipboard,\n  getCLIChangePassword,\n  getCLISBerryYamlRegistry,\n  getCLISetConfigRegistry,\n  getCLISetRegistry,\n  useConfig,\n} from '../../../';\nimport { Description, TextContent } from './styles';\n\nexport const NODE_MANAGER = {\n  npm: 'npm',\n  yarn: 'yarn',\n  pnpm: 'pnpm',\n};\n\nconst renderNpmTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)}\n      />\n      <CopyClipboard dataTestId=\"copy\" text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />\n    </Box>\n  );\n};\n\nconst renderPnpmTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)}\n      />\n    </Box>\n  );\n};\n\nconst renderYarnTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)}\n      />\n    </Box>\n  );\n};\n\nconst renderYarnBerryTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard dataTestId=\"copy\" text={getCLISBerryYamlRegistry(scope, registryUrl)} />\n    </Box>\n  );\n};\n\nexport const AccordionContainer = styled('div')({\n  padding: 0,\n  paddingLeft: 0,\n  paddingRight: 0,\n});\n\nexport const CommandContainer = styled('div')({\n  padding: 5,\n});\n\nexport const LinkContainer = styled('div')({\n  margin: 10,\n  marginLeft: 0,\n});\n\nexport type Props = {\n  registryUrl: string;\n  scope: string | undefined;\n};\n\nconst RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n\n  const hasNpm = configOptions?.pkgManagers?.includes('npm');\n  const hasYarn = configOptions?.pkgManagers?.includes('yarn');\n  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm');\n  // TODO: we can improve this logic, expanding only one accordion based on which package manager is enabled\n  // feel free to contribute here\n  return (\n    <>\n      <TextContent>{t('packageManagers.description')}</TextContent>\n      <AccordionContainer>\n        <Accordion disabled={!hasNpm}>\n          <AccordionSummary\n            aria-controls=\"panel1a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel1a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'npm'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderNpmTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n        <Accordion disabled={!hasYarn}>\n          <AccordionSummary\n            aria-controls=\"panel2a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel2a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'yarn'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <Description>\n              <ReactMarkdown>{t('packageManagers.yarnclassicDetails')}</ReactMarkdown>\n            </Description>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderYarnTab(scope, registryUrl)}\n            </CommandContainer>\n            <Description>\n              <ReactMarkdown>{t('packageManagers.yarnBerryDetails')}</ReactMarkdown>\n            </Description>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderYarnBerryTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n\n        <Accordion disabled={!hasPnpm}>\n          <AccordionSummary\n            aria-controls=\"panel3a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel3a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'pnpm'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderPnpmTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n\n        <LinkContainer>\n          <Link href=\"https://verdaccio.org/docs/cli-registry\" target=\"_blank\">\n            <Typography>{t('header.registry-info-link')}</Typography>\n          </Link>\n        </LinkContainer>\n      </AccordionContainer>\n    </>\n  );\n};\n\nexport default RegistryInfoContent;\n"],"mappings":"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"}
+{"version":3,"file":"RegistryInfoContent.mjs","names":[],"sources":["../../../../src/sections/Header/RegistryInfoContent/RegistryInfoContent.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Box from '@mui/material/Box';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport {\n  CopyClipboard,\n  getCLIChangePassword,\n  getCLISBerryYamlRegistry,\n  getCLISetConfigRegistry,\n  getCLISetRegistry,\n  useConfig,\n} from '../../../';\nimport { Description, TextContent } from './styles';\n\nexport const NODE_MANAGER = {\n  npm: 'npm',\n  yarn: 'yarn',\n  pnpm: 'pnpm',\n};\n\nconst renderNpmTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)}\n      />\n      <CopyClipboard dataTestId=\"copy\" text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />\n    </Box>\n  );\n};\n\nconst renderPnpmTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)}\n      />\n    </Box>\n  );\n};\n\nconst renderYarnTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)}\n      />\n    </Box>\n  );\n};\n\nconst renderYarnBerryTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard dataTestId=\"copy\" text={getCLISBerryYamlRegistry(scope, registryUrl)} />\n    </Box>\n  );\n};\n\nexport const AccordionContainer = styled('div')({\n  padding: 0,\n  paddingLeft: 0,\n  paddingRight: 0,\n});\n\nexport const CommandContainer = styled('div')({\n  padding: 5,\n});\n\nexport const LinkContainer = styled('div')({\n  margin: 10,\n  marginLeft: 0,\n});\n\nexport type Props = {\n  registryUrl: string;\n  scope: string | undefined;\n};\n\nconst RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n\n  const hasNpm = configOptions?.pkgManagers?.includes('npm');\n  const hasYarn = configOptions?.pkgManagers?.includes('yarn');\n  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm');\n  // TODO: we can improve this logic, expanding only one accordion based on which package manager is enabled\n  // feel free to contribute here\n  return (\n    <>\n      <TextContent>{t('packageManagers.description')}</TextContent>\n      <AccordionContainer>\n        <Accordion disabled={!hasNpm}>\n          <AccordionSummary\n            aria-controls=\"panel1a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel1a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'npm'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderNpmTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n        <Accordion disabled={!hasYarn}>\n          <AccordionSummary\n            aria-controls=\"panel2a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel2a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'yarn'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <Description>\n              <ReactMarkdown>{t('packageManagers.yarnclassicDetails')}</ReactMarkdown>\n            </Description>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderYarnTab(scope, registryUrl)}\n            </CommandContainer>\n            <Description>\n              <ReactMarkdown>{t('packageManagers.yarnBerryDetails')}</ReactMarkdown>\n            </Description>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderYarnBerryTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n\n        <Accordion disabled={!hasPnpm}>\n          <AccordionSummary\n            aria-controls=\"panel3a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel3a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'pnpm'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderPnpmTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n\n        <LinkContainer>\n          <Link href=\"https://verdaccio.org/docs/cli-registry\" target=\"_blank\">\n            <Typography>{t('header.registry-info-link')}</Typography>\n          </Link>\n        </LinkContainer>\n      </AccordionContainer>\n    </>\n  );\n};\n\nexport default RegistryInfoContent;\n"],"mappings":"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"}

package/build/sections/Security/utils.js

@@ -1,7 +1,6 @@
-require("../../_virtual/_rolldown/runtime.js");
 const require_routes = require("../../utils/routes.js");
 require("../../utils/index.js");
-require("lodash/isEmpty");
+require("lodash-es");
 //#region src/sections/Security/utils.ts
 function getSecurityUrlParams(location) {
 	const queryParams = new URLSearchParams(location.search);