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

package/src/App/Header/Search/__snapshots__/Search.test.tsx.snap

@@ -3,50 +3,409 @@
 exports[`<Search /> component should load the component in default state 1`] = `
 .emotion-0 {
   width: 100%;
-  height: 32px;
   position: relative;
   z-index: 1;
 }
 
-.emotion-2 .MuiInputBase-root:before {
+.emotion-2 {
+  width: 100%;
+}
+
+.emotion-2.Mui-focused .MuiAutocomplete-clearIndicator {
+  visibility: visible;
+}
+
+@media (pointer: fine) {
+  .emotion-2:hover .MuiAutocomplete-clearIndicator {
+    visibility: visible;
+  }
+}
+
+.emotion-2 .MuiAutocomplete-tag {
+  margin: 3px;
+  max-width: calc(100% - 6px);
+}
+
+.emotion-2 .MuiAutocomplete-inputRoot {
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.MuiAutocomplete-hasPopupIcon.emotion-2 .MuiAutocomplete-inputRoot,
+.MuiAutocomplete-hasClearIcon.emotion-2 .MuiAutocomplete-inputRoot {
+  padding-right: 30px;
+}
+
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-2 .MuiAutocomplete-inputRoot {
+  padding-right: 56px;
+}
+
+.emotion-2 .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
+  width: 0;
+  min-width: 30px;
+}
+
+.emotion-2 .MuiInput-root {
+  padding-bottom: 1px;
+}
+
+.emotion-2 .MuiInput-root .MuiInput-input {
+  padding: 4px 4px 4px 0px;
+}
+
+.emotion-2 .MuiInput-root.MuiInputBase-sizeSmall .MuiInput-input {
+  padding: 2px 4px 3px 0;
+}
+
+.emotion-2 .MuiOutlinedInput-root {
+  padding: 9px;
+}
+
+.MuiAutocomplete-hasPopupIcon.emotion-2 .MuiOutlinedInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-2 .MuiOutlinedInput-root {
+  padding-right: 39px;
+}
+
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-2 .MuiOutlinedInput-root {
+  padding-right: 65px;
+}
+
+.emotion-2 .MuiOutlinedInput-root .MuiAutocomplete-input {
+  padding: 7.5px 4px 7.5px 6px;
+}
+
+.emotion-2 .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
+  right: 9px;
+}
+
+.emotion-2 .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
+  padding: 6px;
+}
+
+.emotion-2 .MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+  padding: 2.5px 4px 2.5px 6px;
+}
+
+.emotion-2 .MuiFilledInput-root {
+  padding-top: 19px;
+  padding-left: 8px;
+}
+
+.MuiAutocomplete-hasPopupIcon.emotion-2 .MuiFilledInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-2 .MuiFilledInput-root {
+  padding-right: 39px;
+}
+
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-2 .MuiFilledInput-root {
+  padding-right: 65px;
+}
+
+.emotion-2 .MuiFilledInput-root .MuiFilledInput-input {
+  padding: 7px 4px;
+}
+
+.emotion-2 .MuiFilledInput-root .MuiAutocomplete-endAdornment {
+  right: 9px;
+}
+
+.emotion-2 .MuiFilledInput-root.MuiInputBase-sizeSmall {
+  padding-bottom: 1px;
+}
+
+.emotion-2 .MuiFilledInput-root.MuiInputBase-sizeSmall .MuiFilledInput-input {
+  padding: 2.5px 4px;
+}
+
+.emotion-2 .MuiAutocomplete-input {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  opacity: 1;
+}
+
+.emotion-4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  vertical-align: top;
+  width: 100%;
+}
+
+.emotion-4 .MuiInputBase-root:before {
   content: '';
   border: none;
 }
 
-.emotion-2 .MuiInputBase-root:after {
+.emotion-4 .MuiInputBase-root:after {
   border-color: #fff;
 }
 
-.emotion-2 .MuiInputBase-root:hover:before {
+.emotion-4 .MuiInputBase-root:hover:before {
   content: none;
 }
 
-.emotion-2 .MuiInputBase-root:hover:after {
+.emotion-4 .MuiInputBase-root:hover:after {
   content: none;
   -webkit-transform: scaleX(1);
+  -moz-transform: scaleX(1);
   -ms-transform: scaleX(1);
   transform: scaleX(1);
 }
 
-@media screen and (min-width:768px) {
-  .emotion-2 .MuiInputBase-root:hover:after {
+@media screen and (min-width: 768px) {
+  .emotion-4 .MuiInputBase-root:hover:after {
     content: '';
   }
 }
 
-@media screen and (min-width:768px) {
-  .emotion-2 .MuiInputBase-input {
+@media screen and (min-width: 768px) {
+  .emotion-4 .MuiInputBase-input {
     color: #fff;
   }
 }
 
-.emotion-4 {
+.emotion-5 {
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.4375em;
+  color: rgba(0, 0, 0, 0.87);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+.emotion-5.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+label+.emotion-5 {
+  margin-top: 16px;
+}
+
+.emotion-5:after {
+  border-bottom: 2px solid #4b5e40;
+  left: 0;
+  bottom: 0;
+  content: "";
+  position: absolute;
+  right: 0;
+  -webkit-transform: scaleX(0);
+  -moz-transform: scaleX(0);
+  -ms-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  pointer-events: none;
+}
+
+.emotion-5.Mui-focused:after {
+  -webkit-transform: scaleX(1);
+  -moz-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+.emotion-5.Mui-error:after {
+  border-bottom-color: #d32f2f;
+  -webkit-transform: scaleX(1);
+  -moz-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+.emotion-5:before {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  left: 0;
+  bottom: 0;
+  content: "\\00a0";
+  position: absolute;
+  right: 0;
+  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  pointer-events: none;
+}
+
+.emotion-5:hover:not(.Mui-disabled):before {
+  border-bottom: 2px solid rgba(0, 0, 0, 0.87);
+}
+
+@media (hover: none) {
+  .emotion-5:hover:not(.Mui-disabled):before {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  }
+}
+
+.emotion-5.Mui-disabled:before {
+  border-bottom-style: dotted;
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 0.01em;
+  max-height: 2em;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.54);
+  margin-right: 8px;
   color: #fff;
 }
 
-.emotion-6 {
-  max-height: 500px;
-  overflow-y: auto;
+.emotion-8 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+}
+
+.emotion-9 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+}
+
+.emotion-9::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9:-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9:focus {
+  outline: 0;
+}
+
+.emotion-9:invalid {
+  box-shadow: none;
+}
+
+.emotion-9::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus:-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-9.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-9:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-10 {
+  position: absolute;
+  right: 0;
+  top: calc(50% - 14px);
 }
 
 <div
@@ -54,25 +413,28 @@ exports[`<Search /> component should load the component in default state 1`] = `
 >
   <div
     aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-owns="react-autowhatever-1"
-    class="react-autosuggest__container"
+    class="MuiAutocomplete-root MuiAutocomplete-fullWidth emotion-2"
     role="combobox"
   >
     <div
-      aria-autocomplete="list"
-      aria-controls="react-autowhatever-1"
-      class="MuiFormControl-root MuiTextField-root react-autosuggest__input emotion-2 emotion-3 MuiFormControl-fullWidth"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-3 emotion-4"
     >
+      
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
+        class="MuiInput-root MuiInput-underline MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-5"
       >
         <div
-          class="MuiInputAdornment-root emotion-4 emotion-5 MuiInputAdornment-positionStart"
+          class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-6 emotion-7"
         >
+          <span
+            class="notranslate"
+          >
+            ​
+          </span>
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-8"
+            data-testid="SearchIcon"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -82,20 +444,22 @@ exports[`<Search /> component should load the component in default state 1`] = `
           </svg>
         </div>
         <input
+          aria-autocomplete="list"
           aria-invalid="false"
+          autocapitalize="none"
           autocomplete="off"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
+          class="MuiInput-input MuiInputBase-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-9"
+          id="search-header-suggest"
           placeholder="Search Packages"
+          spellcheck="false"
           type="text"
           value=""
         />
+        <div
+          class="MuiAutocomplete-endAdornment emotion-10"
+        />
       </div>
     </div>
-    <div
-      class="MuiPaper-root react-autosuggest__suggestions-container emotion-6 emotion-7 MuiPaper-elevation1"
-      id="react-autowhatever-1"
-      role="listbox"
-    />
   </div>
 </div>
 `;

package/src/App/Header/styles.ts

@@ -1,6 +1,5 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-
 import AppBar from 'verdaccio-ui/components/AppBar';
 import IconButton from 'verdaccio-ui/components/IconButton';
 import Link from 'verdaccio-ui/components/Link';
@@ -54,7 +53,7 @@ export const SearchWrapper = styled('div')({
 
 export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
-    theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
   color: theme?.palette.white,
   minHeight: 60,
   display: 'flex',

package/src/App/utils/loadable.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable verdaccio/jsx-spread */
-import React, { lazy, Suspense } from 'react';
+import React, { Suspense, lazy } from 'react';
+
 export default (importCallback: any) => {
   const TargetComponent = lazy(importCallback);
   return (props: any) => (

package/src/components/ActionBar/ActionBar.test.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-
-import { renderWithStore, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+import { cleanup, renderWithStore, screen } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContext, DetailContextProps } from '../../pages/Version';
 import { store } from '../../store/store';
-
 import ActionBar from './ActionBar';
 
 const detailContextValue: DetailContextProps = {
@@ -74,18 +72,12 @@ describe('<ActionBar /> component', () => {
   });
 
   test('when there is a button to download a tarball', () => {
-    const { getByTitle } = renderWithStore(
-      <ComponentToBeRendered contextValue={{ ...detailContextValue }} />,
-      store
-    );
-    expect(getByTitle('Download tarball')).toBeTruthy();
+    renderWithStore(<ComponentToBeRendered contextValue={{ ...detailContextValue }} />, store);
+    expect(screen.getByLabelText('Download tarball')).toBeTruthy();
   });
 
   test('when there is a button to open an issue', () => {
-    const { getByTitle } = renderWithStore(
-      <ComponentToBeRendered contextValue={{ ...detailContextValue }} />,
-      store
-    );
-    expect(getByTitle('Open an issue')).toBeTruthy();
+    renderWithStore(<ComponentToBeRendered contextValue={{ ...detailContextValue }} />, store);
+    expect(screen.getByLabelText('Open an issue')).toBeTruthy();
   });
 });

package/src/components/ActionBar/ActionBar.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-
 import { isURL } from 'verdaccio-ui/utils/url';
 
 import { DetailContext } from '../../pages/Version';
 import Box from '../Box';
-
 import ActionBarAction, { ActionBarActionProps } from './ActionBarAction';
 
 /* eslint-disable verdaccio/jsx-spread */

package/src/components/ActionBar/ActionBarAction.tsx

@@ -1,25 +1,24 @@
 import styled from '@emotion/styled';
-import BugReportIcon from '@material-ui/icons/BugReport';
-import DownloadIcon from '@material-ui/icons/CloudDownload';
-import HomeIcon from '@material-ui/icons/Home';
+import BugReportIcon from '@mui/icons-material/BugReport';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import HomeIcon from '@mui/icons-material/Home';
+import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
-
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 import { Dispatch } from '../../store/store';
 import FloatingActionButton from '../FloatingActionButton';
 import Link from '../Link';
-import Tooltip from '../Tooltip';
 
 export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
-    theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
   color: theme?.palette.white,
   marginRight: 10,
   ':hover': {
-    color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
     background: theme?.palette.white,
   },
 }));