@verdaccio/ui-theme 6.0.0-6-next.12 → 6.0.0-6-next.13

package/src/components/Author/styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 import ListItem from '../ListItem';

package/src/components/AutoComplete/AutoComplete.tsx

@@ -1,179 +1,101 @@
-/* eslint-disable react/jsx-no-bind */
 import styled from '@emotion/styled';
-import match from 'autosuggest-highlight/match';
-import parse from 'autosuggest-highlight/parse';
-import React, { KeyboardEvent, memo } from 'react';
-import Autosuggest, {
-  SuggestionSelectedEventData,
-  InputProps,
-  ChangeEvent,
-  SuggestionsFetchRequested,
-  GetSuggestionValue,
-  RenderSuggestion,
-  RenderSuggestionsContainer,
-  RenderInputComponent,
-} from 'react-autosuggest';
+import Search from '@mui/icons-material/Search';
+import { Theme } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
+import InputAdornment from '@mui/material/InputAdornment';
+import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { SearchResultWeb } from '@verdaccio/types';
 
-import MenuItem from '../MenuItem';
-
-import { Wrapper, InputField, SuggestionContainer } from './styles';
-
-const StyledAnchor = styled('a')<{ highlight: boolean; theme?: Theme }>((props) => ({
-  fontWeight:
-    props.theme && props.highlight ? props.theme.fontWeight.semiBold : props.theme.fontWeight.light,
-}));
-
-const StyledMenuItem = styled(MenuItem)({
-  cursor: 'pointer',
-});
+import { StyledTextField } from './styles';
+import { Wrapper } from './styles';
 
+export type OnSelecItem = (
+  event: React.SyntheticEvent,
+  value: SearchResultWeb,
+  reason: string,
+  details?: string
+) => void;
 interface Props {
-  suggestions: Suggestion[];
-  suggestionsLoading?: boolean;
-  suggestionsLoaded?: boolean;
-  suggestionsError?: boolean;
-  apiLoading?: boolean;
-  value?: string;
-  placeholder?: string;
+  suggestions: SearchResultWeb[];
+  suggestionsLoading: boolean;
+  placeholder: string;
   startAdornment?: JSX.Element;
-  disableUnderline?: boolean;
-  onChange: (event: React.FormEvent<HTMLInputElement>, params: ChangeEvent) => void;
-  onSuggestionsFetch: SuggestionsFetchRequested;
-  onCleanSuggestions?: () => void;
-  onClick?: (
-    event: React.FormEvent<HTMLInputElement>,
-    data: SuggestionSelectedEventData<unknown>
-  ) => void;
-  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FormEvent<HTMLInputElement>) => void;
+  onSuggestionsFetch: any;
+  onCleanSuggestions: (event: React.SyntheticEvent) => void;
+  onSelectItem: OnSelecItem;
 }
 
-interface Suggestion {
-  name: string;
-}
-
-/* eslint-disable react/jsx-sort-props  */
-/* eslint-disable verdaccio/jsx-spread */
-const renderInputComponent: RenderInputComponent<Suggestion> = (inputProps) => {
-  // @ts-ignore
-  const { ref, startAdornment, disableUnderline, onKeyDown, ...others } = inputProps;
-  return (
-    <InputField
-      fullWidth={true}
-      InputProps={{
-        inputRef: (node: any) => {
-          // @ts-ignore
-          ref(node);
-        },
-        startAdornment,
-        disableUnderline,
-        onKeyDown,
-      }}
-      {...others}
-    />
-  );
-};
-
-const getSuggestionValue: GetSuggestionValue<Suggestion> = (suggestion): string => suggestion.name;
+const StyledInputAdornment = styled(InputAdornment)<{ theme?: Theme }>((props) => ({
+  color: props.theme?.palette.white,
+}));
 
-const renderSuggestion: RenderSuggestion<Suggestion> = (
-  suggestion,
-  { query, isHighlighted }
-): JSX.Element => {
-  const matches = match(suggestion.name, query);
-  const parts = parse(suggestion.name, matches);
-  return (
-    <StyledMenuItem component="div" selected={isHighlighted}>
-      <div>
-        {parts.map((part, index) => {
-          return (
-            <StyledAnchor highlight={part.highlight} key={String(index)}>
-              {part.text}
-            </StyledAnchor>
-          );
-        })}
-      </div>
-    </StyledMenuItem>
-  );
-};
+const AutoComplete: FC<Props> = ({
+  suggestions,
+  startAdornment,
+  onSuggestionsFetch,
+  onCleanSuggestions,
+  placeholder = '',
+  onSelectItem,
+  suggestionsLoading = false,
+}: Props) => {
+  const { t } = useTranslation();
+  const [inputValue, setInputValue] = useState('');
+
+  const handleOnInputChange = (event: React.SyntheticEvent, value: string, reason: string) => {
+    if (reason === 'input') {
+      event.preventDefault();
+      onSuggestionsFetch({ value });
+      setInputValue(value);
+    } else if (reason === 'clear') {
+      onCleanSuggestions(event);
+      setInputValue('');
+    }
+  };
+
+  const handleOnClose = (event) => {
+    onCleanSuggestions(event);
+    setInputValue('');
+  };
 
-const renderMessage = (message: string): JSX.Element => {
   return (
-    <MenuItem component="div" selected={false}>
-      <div>{message}</div>
-    </MenuItem>
+    <Wrapper>
+      <Autocomplete
+        disablePortal={true}
+        freeSolo={true}
+        onChange={onSelectItem}
+        autoHighlight={true}
+        id="search-header-suggest"
+        options={suggestions}
+        inputValue={inputValue}
+        clearOnBlur={true}
+        loading={suggestionsLoading}
+        renderTags={() => null}
+        onClose={handleOnClose}
+        loadingText={t('autoComplete.loading')}
+        onInputChange={handleOnInputChange}
+        getOptionLabel={(option) => option.name}
+        fullWidth={true}
+        renderInput={(params) => (
+          <StyledTextField
+            {...params}
+            placeholder={placeholder}
+            InputProps={{
+              ...params.InputProps,
+              startAdornment: startAdornment || (
+                <StyledInputAdornment position="start">
+                  <Search />
+                </StyledInputAdornment>
+              ),
+            }}
+            label=""
+            variant="standard"
+          />
+        )}
+      />
+    </Wrapper>
   );
 };
 
-const AutoComplete = memo(
-  ({
-    suggestions,
-    startAdornment,
-    onChange,
-    onSuggestionsFetch,
-    onCleanSuggestions,
-    value = '',
-    placeholder = '',
-    disableUnderline = false,
-    onClick,
-    onKeyDown,
-    onBlur,
-    suggestionsLoading = false,
-    suggestionsLoaded = false,
-    suggestionsError = false,
-  }: Props) => {
-    const { t } = useTranslation();
-
-    const inputProps: InputProps<Suggestion> = {
-      value,
-      onChange,
-      placeholder,
-      // material-ui@4.5.1 introduce better types for TextInput, check readme
-      // @ts-ignore
-      startAdornment,
-      disableUnderline,
-      onKeyDown,
-      onBlur,
-    };
-
-    // this format avoid arrow function eslint rule
-    const renderSuggestionsContainer: RenderSuggestionsContainer = function ({
-      containerProps,
-      children,
-      query,
-    }): JSX.Element {
-      return (
-        <SuggestionContainer {...containerProps} square={true}>
-          {suggestionsLoaded &&
-            children === null &&
-            query &&
-            renderMessage(t('autoComplete.no-results-found'))}
-          {suggestionsLoading && query && renderMessage(t('autoComplete.loading'))}
-          {suggestionsError && renderMessage(t('error.unspecific'))}
-          {children}
-        </SuggestionContainer>
-      );
-    };
-
-    return (
-      <Wrapper>
-        <Autosuggest<Suggestion>
-          renderInputComponent={renderInputComponent}
-          suggestions={suggestions}
-          getSuggestionValue={getSuggestionValue}
-          renderSuggestion={renderSuggestion}
-          onSuggestionsFetchRequested={onSuggestionsFetch}
-          onSuggestionsClearRequested={onCleanSuggestions}
-          inputProps={inputProps}
-          onSuggestionSelected={onClick}
-          renderSuggestionsContainer={renderSuggestionsContainer}
-        />
-      </Wrapper>
-    );
-  }
-);
-
 export default AutoComplete;

package/src/components/AutoComplete/AutoCompleteV2.tsx

@@ -1,26 +1,24 @@
 import styled from '@emotion/styled';
-import { withStyles } from '@material-ui/core/styles';
-import CloseIcon from '@material-ui/icons/Close';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import CloseIcon from '@mui/icons-material/Close';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import withStyles from '@mui/styles/withStyles';
 import React, {
-  memo,
-  useState,
   ChangeEvent,
   KeyboardEvent,
+  memo,
+  useCallback,
   useEffect,
   useRef,
-  useCallback,
+  useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
-import { useOnClickOutside } from 'verdaccio-ui/design-tokens/useOnClickOutside';
 
+import { useOnClickOutside } from '../../hooks/useOnClickOutside';
 import IconButton from '../IconButton';
 import MenuItem from '../MenuItem';
 import Paper from '../Paper';
 import TextField from '../TextField';
-
 import { createFilterOptions } from './useAutoComplete';
 
 const defaultFilterOptions = createFilterOptions();

package/src/components/AutoComplete/styles.tsx

@@ -1,9 +1,6 @@
 import styled from '@emotion/styled';
-import React from 'react';
-
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
-import Paper from '../Paper';
 import TextField from '../TextField';
 
 export interface InputFieldProps {
@@ -12,7 +9,6 @@ export interface InputFieldProps {
 
 export const Wrapper = styled('div')({
   width: '100%',
-  height: '32px',
   position: 'relative',
   zIndex: 1,
 });
@@ -45,14 +41,3 @@ export const StyledTextField = styled(TextField)<{ theme?: Theme }>((props) => (
     },
   },
 }));
-
-/* eslint-disable verdaccio/jsx-spread */
-// @ts-ignore types of color are incompatible
-export const InputField: React.FC<InputFieldProps & TextFieldProps> = ({ ...others }) => (
-  <StyledTextField {...others} />
-);
-
-export const SuggestionContainer = styled(Paper)({
-  maxHeight: '500px',
-  overflowY: 'auto',
-});

package/src/components/Avatar.tsx

@@ -1,3 +1,3 @@
-import { default as MaterialUIAvatar } from '@material-ui/core/Avatar';
+import { default as MaterialUIAvatar } from '@mui/material/Avatar';
 
 export default MaterialUIAvatar;

package/src/components/Box.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIBox, BoxProps } from '@material-ui/core/Box';
+import { BoxProps, default as MaterialUIBox } from '@mui/material/Box';
 import React from 'react';
 
 function Box(props: BoxProps) {

package/src/components/Button.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIButton, ButtonProps } from '@material-ui/core/Button';
+import { ButtonProps, default as MaterialUIButton } from '@mui/material/Button';
 import React, { forwardRef } from 'react';
 
 type ButtonRef = HTMLButtonElement;

package/src/components/Card.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUICard, CardProps } from '@material-ui/core/Card';
+import { CardProps, default as MaterialUICard } from '@mui/material/Card';
 import React, { forwardRef } from 'react';
 
 type CardRef = HTMLDivElement;

package/src/components/CardActions.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUICardActions, CardActionsProps } from '@material-ui/core/CardActions';
+import { CardActionsProps, default as MaterialUICardActions } from '@mui/material/CardActions';
 import React, { forwardRef } from 'react';
 
 type CardActionsRef = HTMLDivElement;

package/src/components/CardContent.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUICardContent, CardContentProps } from '@material-ui/core/CardContent';
+import { CardContentProps, default as MaterialUICardContent } from '@mui/material/CardContent';
 import React, { forwardRef } from 'react';
 
 type CardContentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

package/src/components/Chip.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIChip, ChipProps } from '@material-ui/core/Chip';
+import { ChipProps, default as MaterialUIChip } from '@mui/material/Chip';
 import React, { forwardRef } from 'react';
 
 type ChipRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

package/src/components/CircularProgress.tsx

@@ -1,7 +1,7 @@
 import {
-  default as MaterialUICircularProgress,
   CircularProgressProps,
-} from '@material-ui/core/CircularProgress';
+  default as MaterialUICircularProgress,
+} from '@mui/material/CircularProgress';
 import React, { forwardRef } from 'react';
 
 type CircularProgressRef = HTMLDivElement;

package/src/components/CopyToClipBoard.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import FileCopy from '@material-ui/icons/FileCopy';
+import FileCopy from '@mui/icons-material/FileCopy';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { copyToClipBoardUtility } from 'verdaccio-ui/utils/cli-utils';
 
 import IconButton from './IconButton';
@@ -19,7 +18,7 @@ function CopyToClipBoard({ text, children, ...props }: Props) {
     <Wrapper {...props}>
       <Content>{children ?? text}</Content>
       <Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
-        <IconButton onClick={copyToClipBoardUtility(text)} data-testid="copy-icon">
+        <IconButton onClick={copyToClipBoardUtility(text)} data-testid="copy-icon" size="large">
           <FileCopy />
         </IconButton>
       </Tooltip>

package/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIDialog, DialogProps } from '@material-ui/core/Dialog';
+import { DialogProps, default as MaterialUIDialog } from '@mui/material/Dialog';
 import React, { forwardRef } from 'react';
 
 type DialogRef = HTMLDivElement;

package/src/components/DialogActions.tsx

@@ -1,7 +1,7 @@
 import {
-  default as MaterialUIDialogActions,
   DialogActionsProps,
-} from '@material-ui/core/DialogActions';
+  default as MaterialUIDialogActions,
+} from '@mui/material/DialogActions';
 import React, { forwardRef } from 'react';
 
 type DialogActionsRef = HTMLDivElement;

package/src/components/DialogContent.tsx

@@ -1,7 +1,7 @@
 import {
-  default as MaterialUIDialogContent,
   DialogContentProps,
-} from '@material-ui/core/DialogContent';
+  default as MaterialUIDialogContent,
+} from '@mui/material/DialogContent';
 import React, { forwardRef } from 'react';
 
 type DialogContentRef = HTMLDivElement;

package/src/components/DialogTitle.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIDialogTitle, DialogTitleProps } from '@material-ui/core/DialogTitle';
+import { DialogTitleProps, default as MaterialUIDialogTitle } from '@mui/material/DialogTitle';
 import React, { forwardRef } from 'react';
 
 type DialogTitleRef = HTMLDivElement;

package/src/components/Divider.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIDivider, DividerProps } from '@material-ui/core/Divider';
+import { DividerProps, default as MaterialUIDivider } from '@mui/material/Divider';
 import React, { forwardRef } from 'react';
 
 type DividerRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

package/src/components/FloatingActionButton.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIFab, FabProps } from '@material-ui/core/Fab';
+import { FabProps, default as MaterialUIFab } from '@mui/material/Fab';
 import React, { forwardRef } from 'react';
 
 type FloatingActionButtonRef = HTMLButtonElement;

package/src/components/FormControl.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIFormControl, FormControlProps } from '@material-ui/core/FormControl';
+import { FormControlProps, default as MaterialUIFormControl } from '@mui/material/FormControl';
 import React, { forwardRef } from 'react';
 
 type FormControlRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

package/src/components/FormHelperText.tsx

@@ -1,7 +1,7 @@
 import {
-  default as MaterialUIFormHelperText,
   FormHelperTextProps,
-} from '@material-ui/core/FormHelperText';
+  default as MaterialUIFormHelperText,
+} from '@mui/material/FormHelperText';
 import React, { forwardRef } from 'react';
 
 type FormHelperTextRef = HTMLParagraphElement;

package/src/components/Grid.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIGrid, GridProps } from '@material-ui/core/Grid';
+import { GridProps, default as MaterialUIGrid } from '@mui/material/Grid';
 import React, { forwardRef } from 'react';
 
 type GridRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

package/src/components/Heading.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
+import { default as MaterialUITypography, TypographyProps } from '@mui/material/Typography';
 import React, { forwardRef } from 'react';
 
 type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/src/components/IconButton.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIIconButton, IconButtonProps } from '@material-ui/core/IconButton';
+import { IconButtonProps, default as MaterialUIIconButton } from '@mui/material/IconButton';
 import React, { forwardRef } from 'react';
 
 type IconButtonRef = HTMLButtonElement;

package/src/components/Input.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIInput, InputProps } from '@material-ui/core/Input';
+import { InputProps, default as MaterialUIInput } from '@mui/material/Input';
 import React, { forwardRef } from 'react';
 
 type InputRef = HTMLDivElement;

package/src/components/InputAdornment/InputAdornment.tsx

@@ -1,7 +1,7 @@
 import {
-  default as MaterialUIInputAdornment,
   InputAdornmentProps,
-} from '@material-ui/core/InputAdornment';
+  default as MaterialUIInputAdornment,
+} from '@mui/material/InputAdornment';
 import React, { forwardRef } from 'react';
 
 type InputAdornmentRef = HTMLDivElement;

package/src/components/InputLabel.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIInputLabel, InputLabelProps } from '@material-ui/core/InputLabel';
+import { InputLabelProps, default as MaterialUIInputLabel } from '@mui/material/InputLabel';
 import React, { forwardRef } from 'react';
 
 type InputLabelRef = HTMLLabelElement;

package/src/components/Label/Label.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import Label from './Label';

package/src/components/Label/Label.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
-
-import { Theme, FontWeight } from 'verdaccio-ui/design-tokens/theme';
+import { FontWeight, Theme } from 'verdaccio-ui/design-tokens/theme';
 
 interface Props {
   text: string;

package/src/components/List.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIList, ListProps } from '@material-ui/core/List';
+import { ListProps, default as MaterialUIList } from '@mui/material/List';
 import React, { forwardRef } from 'react';
 
 type ListRef = HTMLUListElement;

package/src/components/ListItem.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIListItem, ListItemProps } from '@material-ui/core/ListItem';
+import { ListItemProps, default as MaterialUIListItem } from '@mui/material/ListItem';
 import React, { forwardRef } from 'react';
 
 type ListItemRef<T extends boolean = false> = T extends true ? HTMLDivElement : HTMLLIElement;

package/src/components/ListItemText.tsx

@@ -1,7 +1,4 @@
-import {
-  default as MaterialUIListItemText,
-  ListItemTextProps,
-} from '@material-ui/core/ListItemText';
+import { ListItemTextProps, default as MaterialUIListItemText } from '@mui/material/ListItemText';
 import React, { forwardRef } from 'react';
 
 type ListItemTextRef = HTMLDivElement;

package/src/components/Loading/Loading.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import Loading from './Loading';

package/src/components/Loading/Loading.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import Logo from '../Logo';
-
 import Spinner from './Spinner';
-import { Wrapper, Badge } from './styles';
+import { Badge, Wrapper } from './styles';
 
 const Loading: React.FC = () => (
   <Wrapper data-testid="loading">

package/src/components/Loading/Spinner/Spinner.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+import { cleanup, render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import Spinner from './Spinner';
 

package/src/components/Loading/Spinner/Spinner.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import React from 'react';
-
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 import CircularProgress from '../../CircularProgress';
@@ -31,5 +30,5 @@ const Wrapper = styled('div')<Pick<Props, 'centered'>>(({ centered }) => ({
 }));
 
 const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
+  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
 }));