@scality/core-ui 0.134.0 → 0.136.0

package/src/lib/components/icon/Icon.component.tsx

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import { CoreUITheme } from '../../style/theme';
 
 import { Loader } from '../loader/Loader.component';
@@ -137,6 +137,13 @@ export const iconTable = {
   News: 'fas faBullhorn',
 };
 
+const getColor = (color: string | undefined): string => {
+  const theme = useTheme();
+  if (!color) return 'currentColor';
+
+  return theme[color] || color;
+};
+
 export const customIcons = {
   'Remote-user': ({ ariaLabel, color, size }) => (
     <svg
@@ -148,11 +155,11 @@ export const customIcons = {
     >
       <path
         d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
-        fill={color || 'currentcolor'}
+        fill={getColor(color)}
       />
       <path
         d="M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z"
-        fill={color || 'currentcolor'}
+        fill={getColor(color)}
       />
     </svg>
   ),
@@ -166,11 +173,11 @@ export const customIcons = {
     >
       <path
         d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
-        fill={color || 'currentcolor'}
+        fill={getColor(color)}
       />
       <path
         d="M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z"
-        fill={color || 'currentcolor'}
+        fill={getColor(color)}
       />
     </svg>
   ),

package/src/lib/components/searchinput/SearchInput.component.tsx

@@ -10,7 +10,6 @@ export type Props = {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   onReset?: () => void;
-  disableToggle: boolean;
   disabled?: boolean;
   id?: string;
   size?: InputSize;
@@ -57,7 +56,6 @@ const ClearButton = styled.div`
 const SearchInput = forwardRef(
   (
     {
-      disableToggle,
       placeholder,
       value,
       onChange,

package/src/lib/components/searchinput/SearchInput.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { SearchInput, Props } from './SearchInput.component';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import userEvent from '@testing-library/user-event';
+
+const queryClient = new QueryClient();
+
+const SearchInputRender = (props: Props) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SearchInput {...props} />
+    </QueryClientProvider>
+  );
+};
+
+describe('SearchInput', () => {
+  const selectors = {
+    searchInput: () => screen.getByRole('searchbox'),
+    clearButton: () => screen.queryByRole('button'),
+  };
+  it('should render the SearchInput component', () => {
+    render(<SearchInputRender value="" onChange={() => {}} />);
+
+    const searchInput = selectors.searchInput();
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render the SearchInput component with placeholder', () => {
+    render(
+      <SearchInputRender value="" onChange={() => {}} placeholder="Search" />,
+    );
+
+    const searchInput = screen.queryByPlaceholderText('Example: Search');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render the SearchInput component with disabled prop', () => {
+    render(<SearchInputRender value="" onChange={() => {}} disabled />);
+
+    const searchInput = selectors.searchInput();
+    expect(searchInput).toBeInTheDocument();
+    expect(searchInput).toBeDisabled();
+  });
+
+  it('should change value instantly but call the onChange function with a 300ms delay after the end of typing', async () => {
+    const onChange = jest.fn();
+    render(<SearchInputRender value="" onChange={onChange} />);
+    const searchInput = selectors.searchInput();
+    userEvent.type(searchInput, 'test');
+    expect(searchInput).toHaveValue('test');
+    expect(onChange).not.toHaveBeenCalled();
+    await waitFor(
+      () => {
+        expect(onChange).toHaveBeenCalled();
+      },
+      { timeout: 350 },
+    );
+  });
+
+  it('should have a clear button when the input is not empty', () => {
+    render(<SearchInputRender value="" onChange={() => {}} />);
+
+    // clear button should not be rendered as value is empty
+    let clearButton = selectors.clearButton();
+    expect(clearButton).not.toBeInTheDocument();
+
+    const searchInput = selectors.searchInput();
+    userEvent.type(searchInput, 'test');
+
+    // clear button should now be rendered
+    clearButton = selectors.clearButton();
+    expect(clearButton).toBeInTheDocument();
+  });
+
+  it('should call the onReset function when the clear button is clicked and clear the input value', async () => {
+    const onReset = jest.fn();
+    render(
+      <SearchInputRender value="test" onChange={() => {}} onReset={onReset} />,
+    );
+    const searchInput = selectors.searchInput();
+    const clearButton = selectors.clearButton();
+    expect(clearButton).toBeInTheDocument();
+    clearButton && userEvent.click(clearButton);
+    expect(onReset).toHaveBeenCalled();
+    expect(searchInput).toHaveValue('');
+  });
+});

package/src/lib/components/selectv2/Selectv2.component.tsx

@@ -135,7 +135,11 @@ const InternalOption = (width, isDefaultVariant) => (props) => {
                 ? 'sc-highlighted-matching-text'
                 : '';
             return (
-              <span key={i} className={highlightStyle}>
+              <span
+                role={highlightStyle ? 'mark' : undefined}
+                key={i}
+                className={highlightStyle}
+              >
                 {part}
               </span>
             );
@@ -238,7 +242,6 @@ const MenuList = (props) => {
     selectedIndex * optionHeight - (ITEMS_PER_SCROLL_WINDOW - 1) * optionHeight;
   useEffect(() => {
     if (listRef && listRef.current) {
-      // @ts-ignore
       listRef.current.scrollTo(
         getScrollOffset(
           listRef.current,
@@ -282,6 +285,7 @@ const ValueContainer = ({ children, ...props }) => {
   const icon = selectedOption ? selectedOption.icon : null;
   const ariaProps = {
     innerProps: {
+      disabled: true,
       role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
       'aria-expanded': props.selectProps.menuIsOpen,
       'aria-autocomplete': 'list',
@@ -302,7 +306,6 @@ export type SelectProps = {
   placeholder?: string;
   disabled?: boolean;
   children?: React.ReactNode;
-  defaultValue?: string;
   value?: string;
   onFocus?: (event: FocusEvent) => void;
   onBlur?: (event: FocusEvent) => void;
@@ -310,6 +313,7 @@ export type SelectProps = {
   variant?: 'default' | 'rounded';
   size?: '1' | '2/3' | '1/2' | '1/3';
   className?: string;
+  /** use menuPositon='fixed' inside modal to avoid display issue */
   menuPosition?: 'fixed' | 'absolute';
 };
 type SelectOptionProps = {
@@ -357,7 +361,6 @@ function SelectWithOptionContext(props: SelectProps) {
 function SelectBox({
   placeholder = 'Select...',
   disabled = false,
-  defaultValue,
   value,
   onChange,
   variant = 'default',
@@ -366,11 +369,6 @@ function SelectBox({
   id,
   ...rest
 }: SelectProps) {
-  if (defaultValue && value) {
-    console.error(
-      'The `defaultValue` will be overridden by the `value` if they are set at the same time.',
-    );
-  }
   const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
   const [searchSelection, setSearchSelection] = useState('');
   const [searchValue, setSearchValue] = useState('');
@@ -414,7 +412,6 @@ function SelectBox({
   // Force to reset the value
   useEffect(() => {
     if (
-      !defaultValue &&
       !isEmptyStringInOptions &&
       value === '' &&
       selectRef.current &&
@@ -436,7 +433,6 @@ function SelectBox({
             value={
               searchSelection || options.find((opt) => opt.value === value)
             }
-            defaultValue={defaultValue}
             inputValue={options.length > NOPT_SEARCH ? searchValue : undefined}
             selectedOption={options.find((opt) => opt.value === value)}
             keyboardFocusEnabled={keyboardFocusEnabled}