@verdaccio/ui-components 5.0.0-next-9.20 → 5.0.0-next-9.21

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

@@ -1,10 +1,10 @@
 import { Wrapper } from "./styles.mjs";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
 import Autocomplete from "@mui/material/Autocomplete";
 //#region src/components/Search/AutoComplete/AutoComplete.tsx
-var AutoComplete = ({ suggestions = [], onSuggestionsFetch, onCleanSuggestions, renderInput, renderOption, getOptionLabel, onSelectItem, suggestionsLoading = false }) => {
+var AutoComplete = ({ suggestions = [], onSuggestionsFetch, onCleanSuggestions, renderInput, renderOption, getOptionLabel, onSelectItem, suggestionsLoading = false, hasError = false }) => {
 	const { t } = useTranslation();
 	const [inputValue, setInputValue] = useState("");
 	const handleOnInputChange = (event, value, reason) => {
@@ -31,11 +31,11 @@ var AutoComplete = ({ suggestions = [], onSuggestionsFetch, onCleanSuggestions,
 		inputValue,
 		loading: suggestionsLoading,
 		loadingText: t("autoComplete.loading"),
-		noOptionsText: t("autoComplete.no-results-found"),
+		noOptionsText: hasError ? t("autoComplete.error") : t("autoComplete.no-results-found"),
 		onChange: onSelectItem,
 		onClose: handleOnClose,
 		onInputChange: handleOnInputChange,
-		options: suggestions,
+		options: hasError ? [] : suggestions,
 		renderInput,
 		renderOption,
 		renderTags: () => null

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

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.mjs","names":[],"sources":["../../../../src/components/Search/AutoComplete/AutoComplete.tsx"],"sourcesContent":["import Autocomplete from '@mui/material/Autocomplete';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { SearchResultWeb } from '@verdaccio/types';\n\nimport { Wrapper } from './styles';\n\nexport type OnSelecItem = (\n  event: React.SyntheticEvent,\n  value: SearchResultWeb,\n  reason: string,\n  details?: string\n) => void;\ninterface Props {\n  suggestions?: SearchResultWeb[];\n  suggestionsLoading?: boolean;\n  placeholder: string;\n  renderOption?: (props: any, option: any) => React.JSX.Element;\n  renderInput: (params: any) => React.JSX.Element;\n  onSuggestionsFetch: any;\n  getOptionLabel: (option: any) => any;\n  onCleanSuggestions: (event: React.SyntheticEvent) => void;\n  onSelectItem: OnSelecItem;\n}\n\nconst AutoComplete: FC<Props> = ({\n  suggestions = [],\n  onSuggestionsFetch,\n  onCleanSuggestions,\n  renderInput,\n  renderOption,\n  getOptionLabel,\n  onSelectItem,\n  suggestionsLoading = false,\n}: Props) => {\n  const { t } = useTranslation();\n  const [inputValue, setInputValue] = useState('');\n\n  const handleOnInputChange = (event: React.SyntheticEvent, value: string, reason: string) => {\n    if (reason === 'input') {\n      event.preventDefault();\n      onSuggestionsFetch({ value });\n      setInputValue(value);\n    } else if (reason === 'clear') {\n      onCleanSuggestions(event);\n      setInputValue('');\n    }\n  };\n\n  const handleOnClose = (event) => {\n    onCleanSuggestions(event);\n    setInputValue('');\n  };\n\n  // @ts-ignore\n  return (\n    <Wrapper>\n      <Autocomplete\n        /* @ts-ignore */\n        clearOnBlur={true}\n        disablePortal={true}\n        filterOptions={(options, state) => (state.inputValue.trim() ? options : [])}\n        fullWidth={true}\n        getOptionLabel={getOptionLabel}\n        id=\"search-header-suggest\"\n        inputValue={inputValue}\n        loading={suggestionsLoading}\n        loadingText={t('autoComplete.loading')}\n        noOptionsText={t('autoComplete.no-results-found')}\n        onChange={onSelectItem as any}\n        onClose={handleOnClose}\n        onInputChange={handleOnInputChange}\n        options={suggestions}\n        renderInput={renderInput}\n        renderOption={renderOption}\n        renderTags={() => null}\n      />\n    </Wrapper>\n  );\n};\n\nexport default AutoComplete;\n"],"mappings":";;;;;;AA2BA,IAAM,gBAA2B,EAC/B,cAAc,CAAC,GACf,oBACA,oBACA,aACA,cACA,gBACA,cACA,qBAAqB,YACV;CACX,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAE/C,MAAM,uBAAuB,OAA6B,OAAe,WAAmB;EAC1F,IAAI,WAAW,SAAS;GACtB,MAAM,eAAe;GACrB,mBAAmB,EAAE,MAAM,CAAC;GAC5B,cAAc,KAAK;EACrB,OAAO,IAAI,WAAW,SAAS;GAC7B,mBAAmB,KAAK;GACxB,cAAc,EAAE;EAClB;CACF;CAEA,MAAM,iBAAiB,UAAU;EAC/B,mBAAmB,KAAK;EACxB,cAAc,EAAE;CAClB;CAGA,OACE,oBAAC,SAAD,EAAA,UACE,oBAAC,cAAD;EAEE,aAAa;EACb,eAAe;EACf,gBAAgB,SAAS,UAAW,MAAM,WAAW,KAAK,IAAI,UAAU,CAAC;EACzE,WAAW;EACK;EAChB,IAAG;EACS;EACZ,SAAS;EACT,aAAa,EAAE,sBAAsB;EACrC,eAAe,EAAE,+BAA+B;EAChD,UAAU;EACV,SAAS;EACT,eAAe;EACf,SAAS;EACI;EACC;EACd,kBAAkB;CACnB,CAAA,EACM,CAAA;AAEb"}
+{"version":3,"file":"AutoComplete.mjs","names":[],"sources":["../../../../src/components/Search/AutoComplete/AutoComplete.tsx"],"sourcesContent":["import Autocomplete from '@mui/material/Autocomplete';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { SearchResultWeb } from '@verdaccio/types';\n\nimport { Wrapper } from './styles';\n\nexport type OnSelecItem = (\n  event: React.SyntheticEvent,\n  value: SearchResultWeb,\n  reason: string,\n  details?: string\n) => void;\ninterface Props {\n  suggestions?: SearchResultWeb[];\n  suggestionsLoading?: boolean;\n  hasError?: boolean;\n  placeholder: string;\n  renderOption?: (props: any, option: any) => React.JSX.Element;\n  renderInput: (params: any) => React.JSX.Element;\n  onSuggestionsFetch: any;\n  getOptionLabel: (option: any) => any;\n  onCleanSuggestions: (event: React.SyntheticEvent) => void;\n  onSelectItem: OnSelecItem;\n}\n\nconst AutoComplete: FC<Props> = ({\n  suggestions = [],\n  onSuggestionsFetch,\n  onCleanSuggestions,\n  renderInput,\n  renderOption,\n  getOptionLabel,\n  onSelectItem,\n  suggestionsLoading = false,\n  hasError = false,\n}: Props) => {\n  const { t } = useTranslation();\n  const [inputValue, setInputValue] = useState('');\n\n  const handleOnInputChange = (event: React.SyntheticEvent, value: string, reason: string) => {\n    if (reason === 'input') {\n      event.preventDefault();\n      onSuggestionsFetch({ value });\n      setInputValue(value);\n    } else if (reason === 'clear') {\n      onCleanSuggestions(event);\n      setInputValue('');\n    }\n  };\n\n  const handleOnClose = (event) => {\n    onCleanSuggestions(event);\n    setInputValue('');\n  };\n\n  // @ts-ignore\n  return (\n    <Wrapper>\n      <Autocomplete\n        /* @ts-ignore */\n        clearOnBlur={true}\n        disablePortal={true}\n        filterOptions={(options, state) => (state.inputValue.trim() ? options : [])}\n        fullWidth={true}\n        getOptionLabel={getOptionLabel}\n        id=\"search-header-suggest\"\n        inputValue={inputValue}\n        loading={suggestionsLoading}\n        loadingText={t('autoComplete.loading')}\n        // a failed search must not read as \"no results found\"\n        noOptionsText={hasError ? t('autoComplete.error') : t('autoComplete.no-results-found')}\n        onChange={onSelectItem as any}\n        onClose={handleOnClose}\n        onInputChange={handleOnInputChange}\n        options={hasError ? [] : suggestions}\n        renderInput={renderInput}\n        renderOption={renderOption}\n        renderTags={() => null}\n      />\n    </Wrapper>\n  );\n};\n\nexport default AutoComplete;\n"],"mappings":";;;;;;AA4BA,IAAM,gBAA2B,EAC/B,cAAc,CAAC,GACf,oBACA,oBACA,aACA,cACA,gBACA,cACA,qBAAqB,OACrB,WAAW,YACA;CACX,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAE/C,MAAM,uBAAuB,OAA6B,OAAe,WAAmB;EAC1F,IAAI,WAAW,SAAS;GACtB,MAAM,eAAe;GACrB,mBAAmB,EAAE,MAAM,CAAC;GAC5B,cAAc,KAAK;EACrB,OAAO,IAAI,WAAW,SAAS;GAC7B,mBAAmB,KAAK;GACxB,cAAc,EAAE;EAClB;CACF;CAEA,MAAM,iBAAiB,UAAU;EAC/B,mBAAmB,KAAK;EACxB,cAAc,EAAE;CAClB;CAGA,OACE,oBAAC,SAAD,EAAA,UACE,oBAAC,cAAD;EAEE,aAAa;EACb,eAAe;EACf,gBAAgB,SAAS,UAAW,MAAM,WAAW,KAAK,IAAI,UAAU,CAAC;EACzE,WAAW;EACK;EAChB,IAAG;EACS;EACZ,SAAS;EACT,aAAa,EAAE,sBAAsB;EAErC,eAAe,WAAW,EAAE,oBAAoB,IAAI,EAAE,+BAA+B;EACrF,UAAU;EACV,SAAS;EACT,eAAe;EACf,SAAS,WAAW,CAAC,IAAI;EACZ;EACC;EACd,kBAAkB;CACnB,CAAA,EACM,CAAA;AAEb"}

package/build/components/Search/Search.js

@@ -10,9 +10,9 @@ const require_styles = require("./styles.js");
 require("../../index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lodash_es = require("lodash-es");
-let react_i18next = require("react-i18next");
 let react_router = require("react-router");
 let _mui_icons_material_Search = require("@mui/icons-material/Search");
 _mui_icons_material_Search = require_runtime.__toESM(_mui_icons_material_Search);
@@ -24,7 +24,7 @@ var CONSTANTS = {
 var Search = () => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const navigate = (0, react_router.useNavigate)();
-	const { searchResults, isLoading, doSearch } = require_SearchProvider.useSearch();
+	const { searchResults, isLoading, isError, doSearch, resetSearch } = require_SearchProvider.useSearch();
 	const abortControllerRef = (0, react.useRef)(null);
 	const cancelAllSearchRequests = (0, react.useCallback)(() => {
 		if (abortControllerRef.current) {
@@ -45,11 +45,13 @@ var Search = () => {
 	}, [navigate]);
 	const doSearchRef = (0, react.useRef)(doSearch);
 	doSearchRef.current = doSearch;
+	const [isDebouncing, setIsDebouncing] = (0, react.useState)(false);
 	/**
 	* Stable fetch function that reads the latest doSearch from a ref,
 	* avoiding dependency changes that would break the debounce.
 	*/
 	const handleFetchPackages = (0, react.useCallback)(async ({ value }) => {
+		setIsDebouncing(false);
 		if (value?.trim() !== "") {
 			cancelAllSearchRequests();
 			const controller = new AbortController();
@@ -66,6 +68,11 @@ var Search = () => {
 		}
 	}, [cancelAllSearchRequests]);
 	const debouncedFetch = (0, react.useMemo)(() => (0, lodash_es.debounce)(handleFetchPackages, CONSTANTS.API_DELAY), [handleFetchPackages]);
+	const handleSuggestionsFetch = (0, react.useCallback)(({ value }) => {
+		resetSearch?.();
+		if (value?.trim() !== "") setIsDebouncing(true);
+		debouncedFetch({ value });
+	}, [resetSearch, debouncedFetch]);
 	(0, react.useEffect)(() => {
 		return () => {
 			debouncedFetch.cancel?.();
@@ -105,14 +112,15 @@ var Search = () => {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AutoComplete.default, {
 		getOptionLabel,
+		hasError: isError,
 		onCleanSuggestions: handleOnBlur,
 		onSelectItem: handleClickSearch,
-		onSuggestionsFetch: debouncedFetch,
+		onSuggestionsFetch: handleSuggestionsFetch,
 		placeholder: t("search.packages"),
 		renderInput,
 		renderOption,
 		suggestions: searchResults,
-		suggestionsLoading: isLoading
+		suggestionsLoading: isLoading || isDebouncing
 	});
 };
 //#endregion

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-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":"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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, useState } 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, isError, doSearch, resetSearch } = 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  // shows the dropdown as loading during the debounce window; without it the\n  // immediate reset below reads as \"no results found\" on every keystroke\n  const [isDebouncing, setIsDebouncing] = useState(false);\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      setIsDebouncing(false);\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  // clear the previous query's results right away so the dropdown never lists\n  // stale suggestions under the new input while the debounce timer runs\n  const handleSuggestionsFetch = useCallback(\n    ({ value }: { value: string }) => {\n      resetSearch?.();\n      if (value?.trim() !== '') {\n        setIsDebouncing(true);\n      }\n      debouncedFetch({ value });\n    },\n    [resetSearch, debouncedFetch]\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      hasError={isError}\n      onCleanSuggestions={handleOnBlur}\n      onSelectItem={handleClickSearch}\n      onSuggestionsFetch={handleSuggestionsFetch}\n      placeholder={t('search.packages')}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      suggestions={searchResults}\n      suggestionsLoading={isLoading || isDebouncing}\n    />\n  );\n};\n\nexport default Search;\n"],"mappings":"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"}

package/build/components/Search/Search.mjs

@@ -7,10 +7,10 @@ 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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { jsx } from "react/jsx-runtime";
 import { debounce } from "lodash-es";
-import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
 import SearchMui from "@mui/icons-material/Search";
 //#region src/components/Search/Search.tsx
@@ -21,7 +21,7 @@ var CONSTANTS = {
 var Search = () => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
-	const { searchResults, isLoading, doSearch } = useSearch();
+	const { searchResults, isLoading, isError, doSearch, resetSearch } = useSearch();
 	const abortControllerRef = useRef(null);
 	const cancelAllSearchRequests = useCallback(() => {
 		if (abortControllerRef.current) {
@@ -42,11 +42,13 @@ var Search = () => {
 	}, [navigate]);
 	const doSearchRef = useRef(doSearch);
 	doSearchRef.current = doSearch;
+	const [isDebouncing, setIsDebouncing] = useState(false);
 	/**
 	* Stable fetch function that reads the latest doSearch from a ref,
 	* avoiding dependency changes that would break the debounce.
 	*/
 	const handleFetchPackages = useCallback(async ({ value }) => {
+		setIsDebouncing(false);
 		if (value?.trim() !== "") {
 			cancelAllSearchRequests();
 			const controller = new AbortController();
@@ -63,6 +65,11 @@ var Search = () => {
 		}
 	}, [cancelAllSearchRequests]);
 	const debouncedFetch = useMemo(() => debounce(handleFetchPackages, CONSTANTS.API_DELAY), [handleFetchPackages]);
+	const handleSuggestionsFetch = useCallback(({ value }) => {
+		resetSearch?.();
+		if (value?.trim() !== "") setIsDebouncing(true);
+		debouncedFetch({ value });
+	}, [resetSearch, debouncedFetch]);
 	useEffect(() => {
 		return () => {
 			debouncedFetch.cancel?.();
@@ -102,14 +109,15 @@ var Search = () => {
 	};
 	return /* @__PURE__ */ jsx(AutoComplete, {
 		getOptionLabel,
+		hasError: isError,
 		onCleanSuggestions: handleOnBlur,
 		onSelectItem: handleClickSearch,
-		onSuggestionsFetch: debouncedFetch,
+		onSuggestionsFetch: handleSuggestionsFetch,
 		placeholder: t("search.packages"),
 		renderInput,
 		renderOption,
 		suggestions: searchResults,
-		suggestionsLoading: isLoading
+		suggestionsLoading: isLoading || isDebouncing
 	});
 };
 //#endregion

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-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;AACf;AAEA,IAAM,eAAyB;CAC7B,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,eAAe,WAAW,aAAa,UAAU;CAEzD,MAAM,qBAAqB,OAA+B,IAAI;CAE9D,MAAM,0BAA0B,kBAAkB;EAChD,IAAI,mBAAmB,SAAS;GAC9B,mBAAmB,QAAQ,MAAM;GACjC,mBAAmB,UAAU;EAC/B;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,aAClB,UAAgC;EAC/B,MAAM,gBAAgB;EACtB,wBAAwB;CAC1B,GACA,CAAC,uBAAuB,CAC1B;CAEA,MAAM,oBAAoB,aACvB,OAA6B,OAAY,WAAyB;EACjE,MAAM,gBAAgB;EACtB,IAAI,WAAW,gBAAgB;GAC7B,MAAM,EAAE,SAAS,sBAAsB,KAAK;GAC5C,IAAI,MACF,SAAS,GAAG,QAAM,SAAS,MAAM;EAErC;CACF,GACA,CAAC,QAAQ,CACX;CAGA,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;;;;;CAMtB,MAAM,sBAAsB,YAC1B,OAAO,EAAE,YAA+B;EACtC,IAAI,OAAO,KAAK,MAAM,IAAI;GAExB,wBAAwB;GAGxB,MAAM,aAAa,IAAI,gBAAgB;GACvC,mBAAmB,UAAU;GAE7B,IAAI;IACF,MAAM,YAAY,UAAU;KAC1B,MAAM;KACN,QAAQ,WAAW;IACrB,CAAC;GACH,SAAS,KAAU;IACjB,IAAI,IAAI,SAAS,UAAU,aACzB,QAAQ,KAAK,wBAAwB;SAErC,QAAQ,MAAM,iBAAiB,GAAG;GAEtC;EACF;CACF,GACA,CAAC,uBAAuB,CAC1B;CAIA,MAAM,iBAAiB,cACf,SAAS,qBAAqB,UAAU,SAAS,GACvD,CAAC,mBAAmB,CACtB;CAEA,gBAAgB;EACd,aAAa;GACX,eAAe,SAAS;GACxB,wBAAwB;EAC1B;CACF,GAAG,CAAC,gBAAgB,uBAAuB,CAAC;CAE5C,MAAM,gBAAgB,OAAO,WAAW;EACtC,MAAM,EAAE,KAAK,GAAG,eAAe;EAC/B,MAAM,EAAE,MAAM,SAAS,aAAa,WAAW,UAAU,aACvD,sBAAsB,MAAM;EAC9B,OACE,oBAAC,YAAD;GAEE,GAAI;GACS;GACH;GACC;GACD;GACJ;GACG;EACV,GARM,GAQN;CAEL;CAEA,MAAM,eAAe,WAAW;EAC9B,OACE,oBAAC,iBAAD;GACE,GAAI;GACJ,YAAY;IACV,GAAG,OAAO;IACV,gBACE,oBAAC,sBAAD;KAAsB,UAAS;KAC7B,UAAA,oBAAC,WAAD,CAAY,CAAA;IACQ,CAAA;GAE1B;GACA,OAAM;GACN,aAAa,EAAE,iBAAiB;GAChC,SAAQ;EACT,CAAA;CAEL;CAEA,MAAM,kBAAkB,WAAW;EACjC,OAAO,sBAAsB,MAAM,CAAC,CAAC;CACvC;CAEA,OACE,oBAAC,cAAD;EACkB;EAChB,oBAAoB;EACpB,cAAc;EACd,oBAAoB;EACpB,aAAa,EAAE,iBAAiB;EACnB;EACC;EACd,aAAa;EACb,oBAAoB;CACrB,CAAA;AAEL"}
+{"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, useState } 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, isError, doSearch, resetSearch } = 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  // shows the dropdown as loading during the debounce window; without it the\n  // immediate reset below reads as \"no results found\" on every keystroke\n  const [isDebouncing, setIsDebouncing] = useState(false);\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      setIsDebouncing(false);\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  // clear the previous query's results right away so the dropdown never lists\n  // stale suggestions under the new input while the debounce timer runs\n  const handleSuggestionsFetch = useCallback(\n    ({ value }: { value: string }) => {\n      resetSearch?.();\n      if (value?.trim() !== '') {\n        setIsDebouncing(true);\n      }\n      debouncedFetch({ value });\n    },\n    [resetSearch, debouncedFetch]\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      hasError={isError}\n      onCleanSuggestions={handleOnBlur}\n      onSelectItem={handleClickSearch}\n      onSuggestionsFetch={handleSuggestionsFetch}\n      placeholder={t('search.packages')}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      suggestions={searchResults}\n      suggestionsLoading={isLoading || isDebouncing}\n    />\n  );\n};\n\nexport default Search;\n"],"mappings":";;;;;;;;;;;;;;;;AAaA,IAAM,YAAY;CAChB,WAAW;CACX,aAAa;AACf;AAEA,IAAM,eAAyB;CAC7B,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,eAAe,WAAW,SAAS,UAAU,gBAAgB,UAAU;CAE/E,MAAM,qBAAqB,OAA+B,IAAI;CAE9D,MAAM,0BAA0B,kBAAkB;EAChD,IAAI,mBAAmB,SAAS;GAC9B,mBAAmB,QAAQ,MAAM;GACjC,mBAAmB,UAAU;EAC/B;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,aAClB,UAAgC;EAC/B,MAAM,gBAAgB;EACtB,wBAAwB;CAC1B,GACA,CAAC,uBAAuB,CAC1B;CAEA,MAAM,oBAAoB,aACvB,OAA6B,OAAY,WAAyB;EACjE,MAAM,gBAAgB;EACtB,IAAI,WAAW,gBAAgB;GAC7B,MAAM,EAAE,SAAS,sBAAsB,KAAK;GAC5C,IAAI,MACF,SAAS,GAAG,QAAM,SAAS,MAAM;EAErC;CACF,GACA,CAAC,QAAQ,CACX;CAGA,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAItB,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;;;;;CAMtD,MAAM,sBAAsB,YAC1B,OAAO,EAAE,YAA+B;EACtC,gBAAgB,KAAK;EACrB,IAAI,OAAO,KAAK,MAAM,IAAI;GAExB,wBAAwB;GAGxB,MAAM,aAAa,IAAI,gBAAgB;GACvC,mBAAmB,UAAU;GAE7B,IAAI;IACF,MAAM,YAAY,UAAU;KAC1B,MAAM;KACN,QAAQ,WAAW;IACrB,CAAC;GACH,SAAS,KAAU;IACjB,IAAI,IAAI,SAAS,UAAU,aACzB,QAAQ,KAAK,wBAAwB;SAErC,QAAQ,MAAM,iBAAiB,GAAG;GAEtC;EACF;CACF,GACA,CAAC,uBAAuB,CAC1B;CAIA,MAAM,iBAAiB,cACf,SAAS,qBAAqB,UAAU,SAAS,GACvD,CAAC,mBAAmB,CACtB;CAIA,MAAM,yBAAyB,aAC5B,EAAE,YAA+B;EAChC,cAAc;EACd,IAAI,OAAO,KAAK,MAAM,IACpB,gBAAgB,IAAI;EAEtB,eAAe,EAAE,MAAM,CAAC;CAC1B,GACA,CAAC,aAAa,cAAc,CAC9B;CAEA,gBAAgB;EACd,aAAa;GACX,eAAe,SAAS;GACxB,wBAAwB;EAC1B;CACF,GAAG,CAAC,gBAAgB,uBAAuB,CAAC;CAE5C,MAAM,gBAAgB,OAAO,WAAW;EACtC,MAAM,EAAE,KAAK,GAAG,eAAe;EAC/B,MAAM,EAAE,MAAM,SAAS,aAAa,WAAW,UAAU,aACvD,sBAAsB,MAAM;EAC9B,OACE,oBAAC,YAAD;GAEE,GAAI;GACS;GACH;GACC;GACD;GACJ;GACG;EACV,GARM,GAQN;CAEL;CAEA,MAAM,eAAe,WAAW;EAC9B,OACE,oBAAC,iBAAD;GACE,GAAI;GACJ,YAAY;IACV,GAAG,OAAO;IACV,gBACE,oBAAC,sBAAD;KAAsB,UAAS;KAC7B,UAAA,oBAAC,WAAD,CAAY,CAAA;IACQ,CAAA;GAE1B;GACA,OAAM;GACN,aAAa,EAAE,iBAAiB;GAChC,SAAQ;EACT,CAAA;CAEL;CAEA,MAAM,kBAAkB,WAAW;EACjC,OAAO,sBAAsB,MAAM,CAAC,CAAC;CACvC;CAEA,OACE,oBAAC,cAAD;EACkB;EAChB,UAAU;EACV,oBAAoB;EACpB,cAAc;EACd,oBAAoB;EACpB,aAAa,EAAE,iBAAiB;EACnB;EACC;EACd,aAAa;EACb,oBAAoB,aAAa;CAClC,CAAA;AAEL"}

package/build/components/Search/SearchItem.js

@@ -6,10 +6,10 @@ let _emotion_styled = require("@emotion/styled");
 _emotion_styled = require_runtime.__toESM(_emotion_styled);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_Stack = require("@mui/material/Stack");
 _mui_material_Stack = require_runtime.__toESM(_mui_material_Stack);
-let react_i18next = require("react-i18next");
 let _mui_material_Chip = require("@mui/material/Chip");
 _mui_material_Chip = require_runtime.__toESM(_mui_material_Chip);
 let _mui_icons_material_Cached = require("@mui/icons-material/Cached");

package/build/components/Search/SearchItem.mjs

@@ -3,9 +3,9 @@ import { cleanDescription } from "./utils.mjs";
 import "../../index.mjs";
 import styled from "@emotion/styled";
 import "react";
+import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Stack from "@mui/material/Stack";
-import { useTranslation } from "react-i18next";
 import Chip from "@mui/material/Chip";
 import Cached from "@mui/icons-material/Cached";
 import HttpsIcon from "@mui/icons-material/Https";

package/build/components/SettingsMenu/SettingsMenu.js

@@ -7,8 +7,8 @@ let _mui_material_IconButton = require("@mui/material/IconButton");
 _mui_material_IconButton = require_runtime.__toESM(_mui_material_IconButton);
 let react = require("react");
 react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_i18next = require("react-i18next");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_icons_material_Check = require("@mui/icons-material/Check");
 _mui_icons_material_Check = require_runtime.__toESM(_mui_icons_material_Check);
 let _mui_icons_material_Settings = require("@mui/icons-material/Settings");

package/build/components/SettingsMenu/SettingsMenu.mjs

@@ -4,8 +4,8 @@ import "../../providers/PersistenceSettingProvider/index.mjs";
 import "../../providers/index.mjs";
 import IconButton from "@mui/material/IconButton";
 import React from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Check from "@mui/icons-material/Check";
 import Settings from "@mui/icons-material/Settings";
 import ListItemIcon from "@mui/material/ListItemIcon";

package/build/components/SideBarTitle/SideBarTitle.js

@@ -10,10 +10,10 @@ let _emotion_styled = require("@emotion/styled");
 _emotion_styled = require_runtime.__toESM(_emotion_styled);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
 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 react_i18next = require("react-i18next");
 //#region src/components/SideBarTitle/SideBarTitle.tsx
 var Icon = _emotion_styled.default.div(({ theme }) => ({ marginLeft: theme.spacing(1) }));
 var ModuleJS = ({ module }) => {
@@ -36,7 +36,7 @@ var DetailSidebarTitle = ({ description, packageName, version, isLatest, hasType
 			] }) }) }),
 			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: description }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledBoxVersion, {
-				title: require_utils.formatDate(time),
+				title: time ? require_utils.formatDate(time) : void 0,
 				children: [isLatest ? t("sidebar.detail.latest-version", { version }) : t("sidebar.detail.version", { version }), time ? " - " + t("sidebar.detail.published") + " " + require_utils.formatDateDistance(time) : t("versions.not-available")]
 			})
 		]

package/build/components/SideBarTitle/SideBarTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBarTitle.js","names":[],"sources":["../../../src/components/SideBarTitle/SideBarTitle.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport Heading from '../Heading';\nimport { CommonJS, ES6Modules, TypeScript } from '../Icons';\nimport { formatDate, formatDateDistance } from './utils';\n\nexport type ModuleType = 'commonjs' | 'module';\n\ninterface Props {\n  packageName: string;\n  description?: string;\n  version: string;\n  isLatest: boolean;\n  hasTypes?: boolean;\n  moduleTypes: ModuleType[];\n  time: string;\n}\n\nconst Icon = styled.div<{ theme?: Theme }>(({ theme }) => ({\n  marginLeft: theme.spacing(1),\n}));\n\nconst ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {\n  if (module === 'commonjs') {\n    return (\n      <Icon>\n        <CommonJS />\n      </Icon>\n    );\n  } else if (module === 'module') {\n    return (\n      <Icon>\n        <ES6Modules />\n      </Icon>\n    );\n  } else {\n    return null;\n  }\n};\n\nconst DetailSidebarTitle: React.FC<Props> = ({\n  description,\n  packageName,\n  version,\n  isLatest,\n  hasTypes,\n  moduleTypes,\n  time,\n}) => {\n  const { t } = useTranslation();\n  return (\n    <Box className={'detail-info'} display=\"flex\" flexDirection=\"column\" marginBottom=\"8px\">\n      <StyledHeading>\n        <TitleWrapper>\n          <>\n            {packageName}\n            {hasTypes && (\n              <Icon>\n                <TypeScript />\n              </Icon>\n            )}\n            {moduleTypes.map((module, index) => (\n              <ModuleJS key={index} module={module} />\n            ))}\n          </>\n        </TitleWrapper>\n      </StyledHeading>\n      {description && <div>{description}</div>}\n      <StyledBoxVersion title={formatDate(time)}>\n        {isLatest\n          ? t('sidebar.detail.latest-version', { version })\n          : t('sidebar.detail.version', { version })}\n        {time\n          ? ' - ' + t('sidebar.detail.published') + ' ' + formatDateDistance(time)\n          : t('versions.not-available')}\n      </StyledBoxVersion>\n    </Box>\n  );\n};\n\nexport default DetailSidebarTitle;\n\nconst TitleWrapper = styled.div({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst StyledHeading = styled(Heading)({\n  fontSize: '1rem',\n  fontWeight: 700,\n});\n\nconst StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: theme.fontSize.sm,\n}));\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAM,OAAO,gBAAA,QAAO,KAAwB,EAAE,aAAa,EACzD,YAAY,MAAM,QAAQ,CAAC,EAC7B,EAAE;AAEF,IAAM,YAAqD,EAAE,aAAa;CACxE,IAAI,WAAW,YACb,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAA,UAAD,CAAW,CAAA,EACP,CAAA;MAEH,IAAI,WAAW,UACpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAA,YAAD,CAAa,CAAA,EACT,CAAA;MAGR,OAAO;AAEX;AAEA,IAAM,sBAAuC,EAC3C,aACA,aACA,SACA,UACA,UACA,aACA,WACI;CACJ,MAAM,EAAE,OAAA,GAAM,cAAA,eAAA,CAAe;CAC7B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAA,SAAD;EAAK,WAAW;EAAe,SAAQ;EAAO,eAAc;EAAS,cAAa;EAAlF,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;IACG;IACA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,YAAD,CAAa,CAAA,EACT,CAAA;IAEP,YAAY,KAAK,QAAQ,UACxB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAA8B,OAAS,GAAxB,KAAwB,CACxC;GACD,EAAA,CAAA,EACU,CAAA,EACD,CAAA;GACd,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UAAM,YAAiB,CAAA;GACvC,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAD;IAAkB,OAAO,cAAA,WAAW,IAAI;IAAxC,UAAA,CACG,WACG,EAAE,iCAAiC,EAAE,QAAQ,CAAC,IAC9C,EAAE,0BAA0B,EAAE,QAAQ,CAAC,GAC1C,OACG,QAAQ,EAAE,0BAA0B,IAAI,MAAM,cAAA,mBAAmB,IAAI,IACrE,EAAE,wBAAwB,CACd;;EACf;;AAET;AAIA,IAAM,eAAe,gBAAA,QAAO,IAAI;CAC9B,SAAS;CACT,YAAY;AACd,CAAC;AAED,IAAM,iBAAA,GAAgB,gBAAA,QAAA,CAAO,gBAAA,OAAO,CAAC,CAAC;CACpC,UAAU;CACV,YAAY;AACd,CAAC;AAED,IAAM,oBAAA,GAAmB,gBAAA,QAAA,CAAO,kBAAA,OAAG,CAAC,EAAqB,EAAE,aAAa;CACtE,OAAO,MAAM,QAAQ,KAAK;CAC1B,UAAU,MAAM,SAAS;AAC3B,EAAE"}
+{"version":3,"file":"SideBarTitle.js","names":[],"sources":["../../../src/components/SideBarTitle/SideBarTitle.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport Heading from '../Heading';\nimport { CommonJS, ES6Modules, TypeScript } from '../Icons';\nimport { formatDate, formatDateDistance } from './utils';\n\nexport type ModuleType = 'commonjs' | 'module';\n\ninterface Props {\n  packageName: string;\n  description?: string;\n  version: string;\n  isLatest: boolean;\n  hasTypes?: boolean;\n  moduleTypes: ModuleType[];\n  time: string;\n}\n\nconst Icon = styled.div<{ theme?: Theme }>(({ theme }) => ({\n  marginLeft: theme.spacing(1),\n}));\n\nconst ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {\n  if (module === 'commonjs') {\n    return (\n      <Icon>\n        <CommonJS />\n      </Icon>\n    );\n  } else if (module === 'module') {\n    return (\n      <Icon>\n        <ES6Modules />\n      </Icon>\n    );\n  } else {\n    return null;\n  }\n};\n\nconst DetailSidebarTitle: React.FC<Props> = ({\n  description,\n  packageName,\n  version,\n  isLatest,\n  hasTypes,\n  moduleTypes,\n  time,\n}) => {\n  const { t } = useTranslation();\n  return (\n    <Box className={'detail-info'} display=\"flex\" flexDirection=\"column\" marginBottom=\"8px\">\n      <StyledHeading>\n        <TitleWrapper>\n          <>\n            {packageName}\n            {hasTypes && (\n              <Icon>\n                <TypeScript />\n              </Icon>\n            )}\n            {moduleTypes.map((module, index) => (\n              <ModuleJS key={index} module={module} />\n            ))}\n          </>\n        </TitleWrapper>\n      </StyledHeading>\n      {description && <div>{description}</div>}\n      <StyledBoxVersion title={time ? formatDate(time) : undefined}>\n        {isLatest\n          ? t('sidebar.detail.latest-version', { version })\n          : t('sidebar.detail.version', { version })}\n        {time\n          ? ' - ' + t('sidebar.detail.published') + ' ' + formatDateDistance(time)\n          : t('versions.not-available')}\n      </StyledBoxVersion>\n    </Box>\n  );\n};\n\nexport default DetailSidebarTitle;\n\nconst TitleWrapper = styled.div({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst StyledHeading = styled(Heading)({\n  fontSize: '1rem',\n  fontWeight: 700,\n});\n\nconst StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: theme.fontSize.sm,\n}));\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAM,OAAO,gBAAA,QAAO,KAAwB,EAAE,aAAa,EACzD,YAAY,MAAM,QAAQ,CAAC,EAC7B,EAAE;AAEF,IAAM,YAAqD,EAAE,aAAa;CACxE,IAAI,WAAW,YACb,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAA,UAAD,CAAW,CAAA,EACP,CAAA;MAEH,IAAI,WAAW,UACpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAA,YAAD,CAAa,CAAA,EACT,CAAA;MAGR,OAAO;AAEX;AAEA,IAAM,sBAAuC,EAC3C,aACA,aACA,SACA,UACA,UACA,aACA,WACI;CACJ,MAAM,EAAE,OAAA,GAAM,cAAA,eAAA,CAAe;CAC7B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAA,SAAD;EAAK,WAAW;EAAe,SAAQ;EAAO,eAAc;EAAS,cAAa;EAAlF,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;IACG;IACA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,YAAD,CAAa,CAAA,EACT,CAAA;IAEP,YAAY,KAAK,QAAQ,UACxB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAA8B,OAAS,GAAxB,KAAwB,CACxC;GACD,EAAA,CAAA,EACU,CAAA,EACD,CAAA;GACd,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UAAM,YAAiB,CAAA;GACvC,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAD;IAAkB,OAAO,OAAO,cAAA,WAAW,IAAI,IAAI,KAAA;IAAnD,UAAA,CACG,WACG,EAAE,iCAAiC,EAAE,QAAQ,CAAC,IAC9C,EAAE,0BAA0B,EAAE,QAAQ,CAAC,GAC1C,OACG,QAAQ,EAAE,0BAA0B,IAAI,MAAM,cAAA,mBAAmB,IAAI,IACrE,EAAE,wBAAwB,CACd;;EACf;;AAET;AAIA,IAAM,eAAe,gBAAA,QAAO,IAAI;CAC9B,SAAS;CACT,YAAY;AACd,CAAC;AAED,IAAM,iBAAA,GAAgB,gBAAA,QAAA,CAAO,gBAAA,OAAO,CAAC,CAAC;CACpC,UAAU;CACV,YAAY;AACd,CAAC;AAED,IAAM,oBAAA,GAAmB,gBAAA,QAAA,CAAO,kBAAA,OAAG,CAAC,EAAqB,EAAE,aAAa;CACtE,OAAO,MAAM,QAAQ,KAAK;CAC1B,UAAU,MAAM,SAAS;AAC3B,EAAE"}

package/build/components/SideBarTitle/SideBarTitle.mjs

@@ -7,9 +7,9 @@ import "../Heading/index.mjs";
 import { formatDate, formatDateDistance } from "./utils.mjs";
 import styled from "@emotion/styled";
 import "react";
+import { useTranslation } from "react-i18next";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
 //#region src/components/SideBarTitle/SideBarTitle.tsx
 var Icon = styled.div(({ theme }) => ({ marginLeft: theme.spacing(1) }));
 var ModuleJS = ({ module }) => {
@@ -32,7 +32,7 @@ var DetailSidebarTitle = ({ description, packageName, version, isLatest, hasType
 			] }) }) }),
 			description && /* @__PURE__ */ jsx("div", { children: description }),
 			/* @__PURE__ */ jsxs(StyledBoxVersion, {
-				title: formatDate(time),
+				title: time ? formatDate(time) : void 0,
 				children: [isLatest ? t("sidebar.detail.latest-version", { version }) : t("sidebar.detail.version", { version }), time ? " - " + t("sidebar.detail.published") + " " + formatDateDistance(time) : t("versions.not-available")]
 			})
 		]

package/build/components/SideBarTitle/SideBarTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideBarTitle.mjs","names":[],"sources":["../../../src/components/SideBarTitle/SideBarTitle.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport Heading from '../Heading';\nimport { CommonJS, ES6Modules, TypeScript } from '../Icons';\nimport { formatDate, formatDateDistance } from './utils';\n\nexport type ModuleType = 'commonjs' | 'module';\n\ninterface Props {\n  packageName: string;\n  description?: string;\n  version: string;\n  isLatest: boolean;\n  hasTypes?: boolean;\n  moduleTypes: ModuleType[];\n  time: string;\n}\n\nconst Icon = styled.div<{ theme?: Theme }>(({ theme }) => ({\n  marginLeft: theme.spacing(1),\n}));\n\nconst ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {\n  if (module === 'commonjs') {\n    return (\n      <Icon>\n        <CommonJS />\n      </Icon>\n    );\n  } else if (module === 'module') {\n    return (\n      <Icon>\n        <ES6Modules />\n      </Icon>\n    );\n  } else {\n    return null;\n  }\n};\n\nconst DetailSidebarTitle: React.FC<Props> = ({\n  description,\n  packageName,\n  version,\n  isLatest,\n  hasTypes,\n  moduleTypes,\n  time,\n}) => {\n  const { t } = useTranslation();\n  return (\n    <Box className={'detail-info'} display=\"flex\" flexDirection=\"column\" marginBottom=\"8px\">\n      <StyledHeading>\n        <TitleWrapper>\n          <>\n            {packageName}\n            {hasTypes && (\n              <Icon>\n                <TypeScript />\n              </Icon>\n            )}\n            {moduleTypes.map((module, index) => (\n              <ModuleJS key={index} module={module} />\n            ))}\n          </>\n        </TitleWrapper>\n      </StyledHeading>\n      {description && <div>{description}</div>}\n      <StyledBoxVersion title={formatDate(time)}>\n        {isLatest\n          ? t('sidebar.detail.latest-version', { version })\n          : t('sidebar.detail.version', { version })}\n        {time\n          ? ' - ' + t('sidebar.detail.published') + ' ' + formatDateDistance(time)\n          : t('versions.not-available')}\n      </StyledBoxVersion>\n    </Box>\n  );\n};\n\nexport default DetailSidebarTitle;\n\nconst TitleWrapper = styled.div({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst StyledHeading = styled(Heading)({\n  fontSize: '1rem',\n  fontWeight: 700,\n});\n\nconst StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: theme.fontSize.sm,\n}));\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAM,OAAO,OAAO,KAAwB,EAAE,aAAa,EACzD,YAAY,MAAM,QAAQ,CAAC,EAC7B,EAAE;AAEF,IAAM,YAAqD,EAAE,aAAa;CACxE,IAAI,WAAW,YACb,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD,CAAW,CAAA,EACP,CAAA;MAEH,IAAI,WAAW,UACpB,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,YAAD,CAAa,CAAA,EACT,CAAA;MAGR,OAAO;AAEX;AAEA,IAAM,sBAAuC,EAC3C,aACA,aACA,SACA,UACA,UACA,aACA,WACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EAAK,WAAW;EAAe,SAAQ;EAAO,eAAc;EAAS,cAAa;EAAlF,UAAA;GACE,oBAAC,eAAD,EAAA,UACE,oBAAC,cAAD,EAAA,UACE,qBAAA,YAAA,EAAA,UAAA;IACG;IACA,YACC,oBAAC,MAAD,EAAA,UACE,oBAAC,YAAD,CAAa,CAAA,EACT,CAAA;IAEP,YAAY,KAAK,QAAQ,UACxB,oBAAC,UAAD,EAA8B,OAAS,GAAxB,KAAwB,CACxC;GACD,EAAA,CAAA,EACU,CAAA,EACD,CAAA;GACd,eAAe,oBAAC,OAAD,EAAA,UAAM,YAAiB,CAAA;GACvC,qBAAC,kBAAD;IAAkB,OAAO,WAAW,IAAI;IAAxC,UAAA,CACG,WACG,EAAE,iCAAiC,EAAE,QAAQ,CAAC,IAC9C,EAAE,0BAA0B,EAAE,QAAQ,CAAC,GAC1C,OACG,QAAQ,EAAE,0BAA0B,IAAI,MAAM,mBAAmB,IAAI,IACrE,EAAE,wBAAwB,CACd;;EACf;;AAET;AAIA,IAAM,eAAe,OAAO,IAAI;CAC9B,SAAS;CACT,YAAY;AACd,CAAC;AAED,IAAM,gBAAgB,OAAO,OAAO,CAAC,CAAC;CACpC,UAAU;CACV,YAAY;AACd,CAAC;AAED,IAAM,mBAAmB,OAAO,GAAG,CAAC,EAAqB,EAAE,aAAa;CACtE,OAAO,MAAM,QAAQ,KAAK;CAC1B,UAAU,MAAM,SAAS;AAC3B,EAAE"}
+{"version":3,"file":"SideBarTitle.mjs","names":[],"sources":["../../../src/components/SideBarTitle/SideBarTitle.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport Heading from '../Heading';\nimport { CommonJS, ES6Modules, TypeScript } from '../Icons';\nimport { formatDate, formatDateDistance } from './utils';\n\nexport type ModuleType = 'commonjs' | 'module';\n\ninterface Props {\n  packageName: string;\n  description?: string;\n  version: string;\n  isLatest: boolean;\n  hasTypes?: boolean;\n  moduleTypes: ModuleType[];\n  time: string;\n}\n\nconst Icon = styled.div<{ theme?: Theme }>(({ theme }) => ({\n  marginLeft: theme.spacing(1),\n}));\n\nconst ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {\n  if (module === 'commonjs') {\n    return (\n      <Icon>\n        <CommonJS />\n      </Icon>\n    );\n  } else if (module === 'module') {\n    return (\n      <Icon>\n        <ES6Modules />\n      </Icon>\n    );\n  } else {\n    return null;\n  }\n};\n\nconst DetailSidebarTitle: React.FC<Props> = ({\n  description,\n  packageName,\n  version,\n  isLatest,\n  hasTypes,\n  moduleTypes,\n  time,\n}) => {\n  const { t } = useTranslation();\n  return (\n    <Box className={'detail-info'} display=\"flex\" flexDirection=\"column\" marginBottom=\"8px\">\n      <StyledHeading>\n        <TitleWrapper>\n          <>\n            {packageName}\n            {hasTypes && (\n              <Icon>\n                <TypeScript />\n              </Icon>\n            )}\n            {moduleTypes.map((module, index) => (\n              <ModuleJS key={index} module={module} />\n            ))}\n          </>\n        </TitleWrapper>\n      </StyledHeading>\n      {description && <div>{description}</div>}\n      <StyledBoxVersion title={time ? formatDate(time) : undefined}>\n        {isLatest\n          ? t('sidebar.detail.latest-version', { version })\n          : t('sidebar.detail.version', { version })}\n        {time\n          ? ' - ' + t('sidebar.detail.published') + ' ' + formatDateDistance(time)\n          : t('versions.not-available')}\n      </StyledBoxVersion>\n    </Box>\n  );\n};\n\nexport default DetailSidebarTitle;\n\nconst TitleWrapper = styled.div({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst StyledHeading = styled(Heading)({\n  fontSize: '1rem',\n  fontWeight: 700,\n});\n\nconst StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: theme.fontSize.sm,\n}));\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAM,OAAO,OAAO,KAAwB,EAAE,aAAa,EACzD,YAAY,MAAM,QAAQ,CAAC,EAC7B,EAAE;AAEF,IAAM,YAAqD,EAAE,aAAa;CACxE,IAAI,WAAW,YACb,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD,CAAW,CAAA,EACP,CAAA;MAEH,IAAI,WAAW,UACpB,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,YAAD,CAAa,CAAA,EACT,CAAA;MAGR,OAAO;AAEX;AAEA,IAAM,sBAAuC,EAC3C,aACA,aACA,SACA,UACA,UACA,aACA,WACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EAAK,WAAW;EAAe,SAAQ;EAAO,eAAc;EAAS,cAAa;EAAlF,UAAA;GACE,oBAAC,eAAD,EAAA,UACE,oBAAC,cAAD,EAAA,UACE,qBAAA,YAAA,EAAA,UAAA;IACG;IACA,YACC,oBAAC,MAAD,EAAA,UACE,oBAAC,YAAD,CAAa,CAAA,EACT,CAAA;IAEP,YAAY,KAAK,QAAQ,UACxB,oBAAC,UAAD,EAA8B,OAAS,GAAxB,KAAwB,CACxC;GACD,EAAA,CAAA,EACU,CAAA,EACD,CAAA;GACd,eAAe,oBAAC,OAAD,EAAA,UAAM,YAAiB,CAAA;GACvC,qBAAC,kBAAD;IAAkB,OAAO,OAAO,WAAW,IAAI,IAAI,KAAA;IAAnD,UAAA,CACG,WACG,EAAE,iCAAiC,EAAE,QAAQ,CAAC,IAC9C,EAAE,0BAA0B,EAAE,QAAQ,CAAC,GAC1C,OACG,QAAQ,EAAE,0BAA0B,IAAI,MAAM,mBAAmB,IAAI,IACrE,EAAE,wBAAwB,CACd;;EACf;;AAET;AAIA,IAAM,eAAe,OAAO,IAAI;CAC9B,SAAS;CACT,YAAY;AACd,CAAC;AAED,IAAM,gBAAgB,OAAO,OAAO,CAAC,CAAC;CACpC,UAAU;CACV,YAAY;AACd,CAAC;AAED,IAAM,mBAAmB,OAAO,GAAG,CAAC,EAAqB,EAAE,aAAa;CACtE,OAAO,MAAM,QAAQ,KAAK;CAC1B,UAAU,MAAM,SAAS;AAC3B,EAAE"}

package/build/components/UpLinks/UpLinks.js

@@ -7,10 +7,10 @@ const require_UplinkLink = require("./UplinkLink.js");
 const require_styles = require("./styles.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
 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 react_i18next = require("react-i18next");
 let _mui_material_List = require("@mui/material/List");
 _mui_material_List = require_runtime.__toESM(_mui_material_List);
 let _mui_material_ListItem = require("@mui/material/ListItem");

package/build/components/UpLinks/UpLinks.mjs

@@ -5,9 +5,9 @@ import "../NoItems/index.mjs";
 import UpLinkLink from "./UplinkLink.mjs";
 import { ListItemText, Spacer, StyledText } from "./styles.mjs";
 import "react";
+import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import Card from "@mui/material/Card";

package/build/components/Versions/HistoryList.js

@@ -9,8 +9,8 @@ require("../Link/index.js");
 const require_styles = require("./styles.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_i18next = require("react-i18next");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_List = require("@mui/material/List");
 _mui_material_List = require_runtime.__toESM(_mui_material_List);
 let _mui_material_ListItem = require("@mui/material/ListItem");
@@ -60,7 +60,7 @@ var VersionsHistoryList = ({ versions, packageName, time }) => {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.ListItemText, {
 					"data-testid": `version-list-text`,
 					primary: time[version] ? require_utils.formatDateDistance(time[version]) : t("versions.not-available"),
-					slotProps: { primary: { title: require_utils.formatDate(time[version]) } }
+					slotProps: { primary: { title: time[version] ? require_utils.formatDate(time[version]) : void 0 } }
 				})
 			]
 		}, version))

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

@@ -1 +1 @@
-{"version":3,"file":"HistoryList.js","names":[],"sources":["../../../src/components/Versions/HistoryList.tsx"],"sourcesContent":["import Chip from '@mui/material/Chip';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useConfig } from '../../providers';\nimport type { Time, Versions } from '../../types/packageMeta';\nimport { Route, utils } from '../../utils';\nimport Link from '../Link';\nimport { ListItemText, Spacer } from './styles';\n\ninterface Props {\n  versions: Versions;\n  packageName: string;\n  time: Time;\n}\n\nexport function filterDeprecated(versions: Versions) {\n  const versionsIds = Object.keys(versions);\n  return versionsIds.reduce((prev, current) => {\n    if (!versions[current].deprecated) {\n      prev[current] = versions[current];\n    }\n\n    return prev;\n  }, {});\n}\n\nconst VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;\n\n  return (\n    <List dense={true}>\n      {Object.keys(listVersions)\n        .sort((a, b) => {\n          const timeA = time[a] ? new Date(time[a]).getTime() : 0;\n          const timeB = time[b] ? new Date(time[b]).getTime() : 0;\n          return timeB - timeA;\n        })\n        .map((version) => (\n          <ListItem\n            className=\"version-item\"\n            data-testid={`version-${version}`}\n            key={version}\n            sx={{ pr: 0 }}\n          >\n            <Link to={`${Route.DETAIL}${packageName}/v/${version}`} variant=\"outline\">\n              <ListItemText\n                data-testid={`version-list-link`}\n                disableTypography={false}\n                primary={version}\n                sx={\n                  typeof versions[version]?.deprecated === 'string'\n                    ? { textDecoration: 'line-through' }\n                    : undefined\n                }\n              />\n            </Link>\n            {typeof versions[version]?.deprecated === 'string' ? (\n              <Chip\n                color=\"warning\"\n                data-testid=\"deprecated-badge\"\n                label={t('versions.deprecated')}\n                size=\"small\"\n                sx={{ marginLeft: 1 }}\n                variant=\"outlined\"\n              />\n            ) : null}\n            <Spacer />\n            <ListItemText\n              data-testid={`version-list-text`}\n              primary={\n                time[version]\n                  ? utils.formatDateDistance(time[version])\n                  : t('versions.not-available')\n              }\n              slotProps={{ primary: { title: utils.formatDate(time[version]) } }}\n            />\n          </ListItem>\n        ))}\n    </List>\n  );\n};\n\nexport default VersionsHistoryList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,iBAAiB,UAAoB;CAEnD,OADoB,OAAO,KAAK,QACzB,CAAA,CAAY,QAAQ,MAAM,YAAY;EAC3C,IAAI,CAAC,SAAS,QAAQ,CAAC,YACrB,KAAK,WAAW,SAAS;EAG3B,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,IAAM,uBAAwC,EAAE,UAAU,aAAa,WAAW;CAChF,MAAM,EAAE,OAAA,GAAM,cAAA,eAAA,CAAe;CAC7B,MAAM,EAAE,kBAAkB,iCAAA,UAAU;CAEpC,MAAM,eADyB,cAAc,yBACC,iBAAiB,QAAQ,IAAI;CAE3E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,SAAD;EAAM,OAAO;EACV,UAAA,OAAO,KAAK,YAAY,CAAC,CACvB,MAAM,GAAG,MAAM;GACd,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI;GAEtD,QADc,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI,KACvC;EACjB,CAAC,CAAC,CACD,KAAK,YACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,uBAAA,SAAD;GACE,WAAU;GACV,eAAa,WAAW;GAExB,IAAI,EAAE,IAAI,EAAE;GAJd,UAAA;IAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,SAAD;KAAM,IAAI,GAAG,eAAA,MAAM,SAAS,YAAY,KAAK;KAAW,SAAQ;KAC9D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,cAAD;MACE,eAAa;MACb,mBAAmB;MACnB,SAAS;MACT,IACE,OAAO,SAAS,QAAQ,EAAE,eAAe,WACrC,EAAE,gBAAgB,eAAe,IACjC,KAAA;KAEP,CAAA;IACG,CAAA;IACL,OAAO,SAAS,QAAQ,EAAE,eAAe,WACxC,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,SAAD;KACE,OAAM;KACN,eAAY;KACZ,OAAO,EAAE,qBAAqB;KAC9B,MAAK;KACL,IAAI,EAAE,YAAY,EAAE;KACpB,SAAQ;IACT,CAAA,IACC;IACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,QAAD,CAAS,CAAA;IACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,cAAD;KACE,eAAa;KACb,SACE,KAAK,WAAA,cAAA,mBACwB,KAAK,QAAQ,IACtC,EAAE,wBAAwB;KAEhC,WAAW,EAAE,SAAS,EAAE,OAAA,cAAA,WAAwB,KAAK,QAAQ,EAAE,EAAE;IAClE,CAAA;GACO;EAnCH,GAAA,OAmCG,CACX;CACC,CAAA;AAEV"}
+{"version":3,"file":"HistoryList.js","names":[],"sources":["../../../src/components/Versions/HistoryList.tsx"],"sourcesContent":["import Chip from '@mui/material/Chip';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useConfig } from '../../providers';\nimport type { Time, Versions } from '../../types/packageMeta';\nimport { Route, utils } from '../../utils';\nimport Link from '../Link';\nimport { ListItemText, Spacer } from './styles';\n\ninterface Props {\n  versions: Versions;\n  packageName: string;\n  time: Time;\n}\n\nexport function filterDeprecated(versions: Versions) {\n  const versionsIds = Object.keys(versions);\n  return versionsIds.reduce((prev, current) => {\n    if (!versions[current].deprecated) {\n      prev[current] = versions[current];\n    }\n\n    return prev;\n  }, {});\n}\n\nconst VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;\n\n  return (\n    <List dense={true}>\n      {Object.keys(listVersions)\n        .sort((a, b) => {\n          const timeA = time[a] ? new Date(time[a]).getTime() : 0;\n          const timeB = time[b] ? new Date(time[b]).getTime() : 0;\n          return timeB - timeA;\n        })\n        .map((version) => (\n          <ListItem\n            className=\"version-item\"\n            data-testid={`version-${version}`}\n            key={version}\n            sx={{ pr: 0 }}\n          >\n            <Link to={`${Route.DETAIL}${packageName}/v/${version}`} variant=\"outline\">\n              <ListItemText\n                data-testid={`version-list-link`}\n                disableTypography={false}\n                primary={version}\n                sx={\n                  typeof versions[version]?.deprecated === 'string'\n                    ? { textDecoration: 'line-through' }\n                    : undefined\n                }\n              />\n            </Link>\n            {typeof versions[version]?.deprecated === 'string' ? (\n              <Chip\n                color=\"warning\"\n                data-testid=\"deprecated-badge\"\n                label={t('versions.deprecated')}\n                size=\"small\"\n                sx={{ marginLeft: 1 }}\n                variant=\"outlined\"\n              />\n            ) : null}\n            <Spacer />\n            <ListItemText\n              data-testid={`version-list-text`}\n              primary={\n                time[version]\n                  ? utils.formatDateDistance(time[version])\n                  : t('versions.not-available')\n              }\n              slotProps={{\n                primary: { title: time[version] ? utils.formatDate(time[version]) : undefined },\n              }}\n            />\n          </ListItem>\n        ))}\n    </List>\n  );\n};\n\nexport default VersionsHistoryList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,iBAAiB,UAAoB;CAEnD,OADoB,OAAO,KAAK,QACzB,CAAA,CAAY,QAAQ,MAAM,YAAY;EAC3C,IAAI,CAAC,SAAS,QAAQ,CAAC,YACrB,KAAK,WAAW,SAAS;EAG3B,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,IAAM,uBAAwC,EAAE,UAAU,aAAa,WAAW;CAChF,MAAM,EAAE,OAAA,GAAM,cAAA,eAAA,CAAe;CAC7B,MAAM,EAAE,kBAAkB,iCAAA,UAAU;CAEpC,MAAM,eADyB,cAAc,yBACC,iBAAiB,QAAQ,IAAI;CAE3E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,SAAD;EAAM,OAAO;EACV,UAAA,OAAO,KAAK,YAAY,CAAC,CACvB,MAAM,GAAG,MAAM;GACd,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI;GAEtD,QADc,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI,KACvC;EACjB,CAAC,CAAC,CACD,KAAK,YACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,uBAAA,SAAD;GACE,WAAU;GACV,eAAa,WAAW;GAExB,IAAI,EAAE,IAAI,EAAE;GAJd,UAAA;IAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,SAAD;KAAM,IAAI,GAAG,eAAA,MAAM,SAAS,YAAY,KAAK;KAAW,SAAQ;KAC9D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,cAAD;MACE,eAAa;MACb,mBAAmB;MACnB,SAAS;MACT,IACE,OAAO,SAAS,QAAQ,EAAE,eAAe,WACrC,EAAE,gBAAgB,eAAe,IACjC,KAAA;KAEP,CAAA;IACG,CAAA;IACL,OAAO,SAAS,QAAQ,EAAE,eAAe,WACxC,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,SAAD;KACE,OAAM;KACN,eAAY;KACZ,OAAO,EAAE,qBAAqB;KAC9B,MAAK;KACL,IAAI,EAAE,YAAY,EAAE;KACpB,SAAQ;IACT,CAAA,IACC;IACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,QAAD,CAAS,CAAA;IACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,cAAD;KACE,eAAa;KACb,SACE,KAAK,WAAA,cAAA,mBACwB,KAAK,QAAQ,IACtC,EAAE,wBAAwB;KAEhC,WAAW,EACT,SAAS,EAAE,OAAO,KAAK,WAAA,cAAA,WAA4B,KAAK,QAAQ,IAAI,KAAA,EAAU,EAChF;IACD,CAAA;GACO;EArCH,GAAA,OAqCG,CACX;CACC,CAAA;AAEV"}

package/build/components/Versions/HistoryList.mjs

@@ -7,8 +7,8 @@ import Link from "../Link/Link.mjs";
 import "../Link/index.mjs";
 import { ListItemText, Spacer } from "./styles.mjs";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import Chip from "@mui/material/Chip";
@@ -55,7 +55,7 @@ var VersionsHistoryList = ({ versions, packageName, time }) => {
 				/* @__PURE__ */ jsx(ListItemText, {
 					"data-testid": `version-list-text`,
 					primary: time[version] ? formatDateDistance(time[version]) : t("versions.not-available"),
-					slotProps: { primary: { title: formatDate(time[version]) } }
+					slotProps: { primary: { title: time[version] ? formatDate(time[version]) : void 0 } }
 				})
 			]
 		}, version))

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

@@ -1 +1 @@
-{"version":3,"file":"HistoryList.mjs","names":[],"sources":["../../../src/components/Versions/HistoryList.tsx"],"sourcesContent":["import Chip from '@mui/material/Chip';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useConfig } from '../../providers';\nimport type { Time, Versions } from '../../types/packageMeta';\nimport { Route, utils } from '../../utils';\nimport Link from '../Link';\nimport { ListItemText, Spacer } from './styles';\n\ninterface Props {\n  versions: Versions;\n  packageName: string;\n  time: Time;\n}\n\nexport function filterDeprecated(versions: Versions) {\n  const versionsIds = Object.keys(versions);\n  return versionsIds.reduce((prev, current) => {\n    if (!versions[current].deprecated) {\n      prev[current] = versions[current];\n    }\n\n    return prev;\n  }, {});\n}\n\nconst VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;\n\n  return (\n    <List dense={true}>\n      {Object.keys(listVersions)\n        .sort((a, b) => {\n          const timeA = time[a] ? new Date(time[a]).getTime() : 0;\n          const timeB = time[b] ? new Date(time[b]).getTime() : 0;\n          return timeB - timeA;\n        })\n        .map((version) => (\n          <ListItem\n            className=\"version-item\"\n            data-testid={`version-${version}`}\n            key={version}\n            sx={{ pr: 0 }}\n          >\n            <Link to={`${Route.DETAIL}${packageName}/v/${version}`} variant=\"outline\">\n              <ListItemText\n                data-testid={`version-list-link`}\n                disableTypography={false}\n                primary={version}\n                sx={\n                  typeof versions[version]?.deprecated === 'string'\n                    ? { textDecoration: 'line-through' }\n                    : undefined\n                }\n              />\n            </Link>\n            {typeof versions[version]?.deprecated === 'string' ? (\n              <Chip\n                color=\"warning\"\n                data-testid=\"deprecated-badge\"\n                label={t('versions.deprecated')}\n                size=\"small\"\n                sx={{ marginLeft: 1 }}\n                variant=\"outlined\"\n              />\n            ) : null}\n            <Spacer />\n            <ListItemText\n              data-testid={`version-list-text`}\n              primary={\n                time[version]\n                  ? utils.formatDateDistance(time[version])\n                  : t('versions.not-available')\n              }\n              slotProps={{ primary: { title: utils.formatDate(time[version]) } }}\n            />\n          </ListItem>\n        ))}\n    </List>\n  );\n};\n\nexport default VersionsHistoryList;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,SAAgB,iBAAiB,UAAoB;CAEnD,OADoB,OAAO,KAAK,QACzB,CAAA,CAAY,QAAQ,MAAM,YAAY;EAC3C,IAAI,CAAC,SAAS,QAAQ,CAAC,YACrB,KAAK,WAAW,SAAS;EAG3B,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,IAAM,uBAAwC,EAAE,UAAU,aAAa,WAAW;CAChF,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,kBAAkB,UAAU;CAEpC,MAAM,eADyB,cAAc,yBACC,iBAAiB,QAAQ,IAAI;CAE3E,OACE,oBAAC,MAAD;EAAM,OAAO;EACV,UAAA,OAAO,KAAK,YAAY,CAAC,CACvB,MAAM,GAAG,MAAM;GACd,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI;GAEtD,QADc,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI,KACvC;EACjB,CAAC,CAAC,CACD,KAAK,YACJ,qBAAC,UAAD;GACE,WAAU;GACV,eAAa,WAAW;GAExB,IAAI,EAAE,IAAI,EAAE;GAJd,UAAA;IAME,oBAAC,MAAD;KAAM,IAAI,GAAG,MAAM,SAAS,YAAY,KAAK;KAAW,SAAQ;KAC9D,UAAA,oBAAC,cAAD;MACE,eAAa;MACb,mBAAmB;MACnB,SAAS;MACT,IACE,OAAO,SAAS,QAAQ,EAAE,eAAe,WACrC,EAAE,gBAAgB,eAAe,IACjC,KAAA;KAEP,CAAA;IACG,CAAA;IACL,OAAO,SAAS,QAAQ,EAAE,eAAe,WACxC,oBAAC,MAAD;KACE,OAAM;KACN,eAAY;KACZ,OAAO,EAAE,qBAAqB;KAC9B,MAAK;KACL,IAAI,EAAE,YAAY,EAAE;KACpB,SAAQ;IACT,CAAA,IACC;IACJ,oBAAC,QAAD,CAAS,CAAA;IACT,oBAAC,cAAD;KACE,eAAa;KACb,SACE,KAAK,WACD,mBAAyB,KAAK,QAAQ,IACtC,EAAE,wBAAwB;KAEhC,WAAW,EAAE,SAAS,EAAE,OAAO,WAAiB,KAAK,QAAQ,EAAE,EAAE;IAClE,CAAA;GACO;EAnCH,GAAA,OAmCG,CACX;CACC,CAAA;AAEV"}
+{"version":3,"file":"HistoryList.mjs","names":[],"sources":["../../../src/components/Versions/HistoryList.tsx"],"sourcesContent":["import Chip from '@mui/material/Chip';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useConfig } from '../../providers';\nimport type { Time, Versions } from '../../types/packageMeta';\nimport { Route, utils } from '../../utils';\nimport Link from '../Link';\nimport { ListItemText, Spacer } from './styles';\n\ninterface Props {\n  versions: Versions;\n  packageName: string;\n  time: Time;\n}\n\nexport function filterDeprecated(versions: Versions) {\n  const versionsIds = Object.keys(versions);\n  return versionsIds.reduce((prev, current) => {\n    if (!versions[current].deprecated) {\n      prev[current] = versions[current];\n    }\n\n    return prev;\n  }, {});\n}\n\nconst VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;\n\n  return (\n    <List dense={true}>\n      {Object.keys(listVersions)\n        .sort((a, b) => {\n          const timeA = time[a] ? new Date(time[a]).getTime() : 0;\n          const timeB = time[b] ? new Date(time[b]).getTime() : 0;\n          return timeB - timeA;\n        })\n        .map((version) => (\n          <ListItem\n            className=\"version-item\"\n            data-testid={`version-${version}`}\n            key={version}\n            sx={{ pr: 0 }}\n          >\n            <Link to={`${Route.DETAIL}${packageName}/v/${version}`} variant=\"outline\">\n              <ListItemText\n                data-testid={`version-list-link`}\n                disableTypography={false}\n                primary={version}\n                sx={\n                  typeof versions[version]?.deprecated === 'string'\n                    ? { textDecoration: 'line-through' }\n                    : undefined\n                }\n              />\n            </Link>\n            {typeof versions[version]?.deprecated === 'string' ? (\n              <Chip\n                color=\"warning\"\n                data-testid=\"deprecated-badge\"\n                label={t('versions.deprecated')}\n                size=\"small\"\n                sx={{ marginLeft: 1 }}\n                variant=\"outlined\"\n              />\n            ) : null}\n            <Spacer />\n            <ListItemText\n              data-testid={`version-list-text`}\n              primary={\n                time[version]\n                  ? utils.formatDateDistance(time[version])\n                  : t('versions.not-available')\n              }\n              slotProps={{\n                primary: { title: time[version] ? utils.formatDate(time[version]) : undefined },\n              }}\n            />\n          </ListItem>\n        ))}\n    </List>\n  );\n};\n\nexport default VersionsHistoryList;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,SAAgB,iBAAiB,UAAoB;CAEnD,OADoB,OAAO,KAAK,QACzB,CAAA,CAAY,QAAQ,MAAM,YAAY;EAC3C,IAAI,CAAC,SAAS,QAAQ,CAAC,YACrB,KAAK,WAAW,SAAS;EAG3B,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,IAAM,uBAAwC,EAAE,UAAU,aAAa,WAAW;CAChF,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,kBAAkB,UAAU;CAEpC,MAAM,eADyB,cAAc,yBACC,iBAAiB,QAAQ,IAAI;CAE3E,OACE,oBAAC,MAAD;EAAM,OAAO;EACV,UAAA,OAAO,KAAK,YAAY,CAAC,CACvB,MAAM,GAAG,MAAM;GACd,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI;GAEtD,QADc,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI,KACvC;EACjB,CAAC,CAAC,CACD,KAAK,YACJ,qBAAC,UAAD;GACE,WAAU;GACV,eAAa,WAAW;GAExB,IAAI,EAAE,IAAI,EAAE;GAJd,UAAA;IAME,oBAAC,MAAD;KAAM,IAAI,GAAG,MAAM,SAAS,YAAY,KAAK;KAAW,SAAQ;KAC9D,UAAA,oBAAC,cAAD;MACE,eAAa;MACb,mBAAmB;MACnB,SAAS;MACT,IACE,OAAO,SAAS,QAAQ,EAAE,eAAe,WACrC,EAAE,gBAAgB,eAAe,IACjC,KAAA;KAEP,CAAA;IACG,CAAA;IACL,OAAO,SAAS,QAAQ,EAAE,eAAe,WACxC,oBAAC,MAAD;KACE,OAAM;KACN,eAAY;KACZ,OAAO,EAAE,qBAAqB;KAC9B,MAAK;KACL,IAAI,EAAE,YAAY,EAAE;KACpB,SAAQ;IACT,CAAA,IACC;IACJ,oBAAC,QAAD,CAAS,CAAA;IACT,oBAAC,cAAD;KACE,eAAa;KACb,SACE,KAAK,WACD,mBAAyB,KAAK,QAAQ,IACtC,EAAE,wBAAwB;KAEhC,WAAW,EACT,SAAS,EAAE,OAAO,KAAK,WAAW,WAAiB,KAAK,QAAQ,IAAI,KAAA,EAAU,EAChF;IACD,CAAA;GACO;EArCH,GAAA,OAqCG,CACX;CACC,CAAA;AAEV"}

package/build/components/Versions/Versions.js

@@ -7,19 +7,19 @@ let _emotion_styled = require("@emotion/styled");
 _emotion_styled = require_runtime.__toESM(_emotion_styled);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
 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_Alert = require("@mui/material/Alert");
+_mui_material_Alert = require_runtime.__toESM(_mui_material_Alert);
 let _mui_material_Typography = require("@mui/material/Typography");
 _mui_material_Typography = require_runtime.__toESM(_mui_material_Typography);
 let _mui_material_Card = require("@mui/material/Card");
 _mui_material_Card = require_runtime.__toESM(_mui_material_Card);
 let _mui_material_CardContent = require("@mui/material/CardContent");
 _mui_material_CardContent = require_runtime.__toESM(_mui_material_CardContent);
-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 semver = require("semver");
@@ -32,26 +32,27 @@ var StyledText = (0, _emotion_styled.default)(_mui_material_Typography.default)(
 var Versions = ({ packageMeta, packageName }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const { configOptions } = require_AppConfigurationProvider.useConfig();
-	const { versions = {}, time = {}, ["dist-tags"]: distTags = {} } = packageMeta;
-	const [packageVersions, setPackageVersions] = (0, react.useState)(versions);
+	const { versions = {}, time = {}, ["dist-tags"]: distTags = {} } = packageMeta ?? {};
+	const [textSearch, setTextSearch] = (0, react.useState)("");
+	(0, react.useEffect)(() => {
+		setTextSearch("");
+	}, [packageName]);
+	const packageVersions = (0, react.useMemo)(() => {
+		if (textSearch === "") return versions;
+		return Object.keys(versions).reduce((acc, version) => {
+			if (typeof versions[version] !== "undefined") {
+				if (semver.default.satisfies(version, textSearch, {
+					includePrerelease: true,
+					loose: true
+				})) acc[version] = versions[version];
+			}
+			return acc;
+		}, {});
+	}, [versions, textSearch]);
 	if (!packageMeta || Object.keys(packageMeta).length === 0) return null;
 	const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
 	const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
 	const hasVersionHistory = packageVersions && Object.keys(packageVersions).length > 0 && packageName;
-	const filterVersions = (textSearch) => {
-		const filteredVersions = Object.keys(versions).reduce((acc, version) => {
-			if (textSearch !== "") {
-				if (typeof versions[version] !== "undefined") {
-					if (semver.default.satisfies(version, textSearch, {
-						includePrerelease: true,
-						loose: true
-					})) acc[version] = versions[version];
-				}
-			} else acc[version] = versions[version];
-			return acc;
-		}, {});
-		setPackageVersions(filteredVersions);
-	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Card.default, {
 		sx: { mb: 2 },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_CardContent.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
@@ -72,12 +73,12 @@ var Versions = ({ packageMeta, packageName }) => {
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_TextField.default, {
 					helperText: t("versions.search.placeholder"),
 					onChange: (0, lodash_es.debounce)((e) => {
-						filterVersions(e.target.value);
+						setTextSearch(e.target.value);
 					}, 200),
 					size: "small",
 					variant: "standard",
 					sx: { width: "50%" }
-				})] }),
+				}, packageName)] }),
 				hasVersionHistory ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [hideDeprecatedVersions === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Alert.default, {
 					severity: "info",
 					sx: {