@scality/core-ui 0.116.0 → 0.117.0

package/src/lib/components/dropdown/Dropdown.component.tsx

@@ -12,6 +12,8 @@ import { spacing } from '../../spacing';
 import { fontSize } from '../../style/theme';
 import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
+import { useSelect } from 'downshift';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 export type Item = {
   label: string;
   name?: string;
@@ -41,38 +43,14 @@ const DropdownMenuStyled = styled.ul`
   position: absolute;
   margin: 0;
   padding: 0;
+  top: 50px;
   border: 1px solid ${getThemePropSelector('backgroundLevel1')};
   z-index: ${zIndex.dropdown};
   max-height: 200px;
   min-width: 100%;
   overflow: auto;
   border-bottom: 0.3px solid ${getThemePropSelector('border')};
-  ${(props) => {
-    if (
-      props.size &&
-      props.triggerSize &&
-      props.triggerSize.x + props.size.width > window.innerWidth
-    ) {
-      return css`
-        right: 0;
-        top: 100%;
-      `;
-    } else if (
-      props.size &&
-      props.triggerSize &&
-      props.triggerSize.y + props.size.height > window.innerHeight
-    ) {
-      return css`
-        left: 0;
-        bottom: ${props.triggerSize.height + 'px'};
-      `;
-    } else {
-      return css`
-        left: 0;
-        top: 100%;
-      `;
-    }
-  }};
+  display: ${(props) => (props.isOpen ? 'auto' : 'none')};
 `;
 const DropdownMenuItemStyled = styled.li`
   display: flex;
@@ -81,25 +59,36 @@ const DropdownMenuItemStyled = styled.li`
   white-space: nowrap;
   cursor: pointer;
   font-size: ${fontSize.base};
+  ${(props) => {
+    console.log(props.isSelected);
+    return props.isSelected
+      ? `background-color: ${props.theme.highlight};`
+      : `background-color: ${props.theme.backgroundLevel1};`;
+  }}
+
+  color: ${getThemePropSelector('textPrimary')};
+  border-top: 0.3px solid ${getThemePropSelector('border')};
+  border-left: 0.3px solid ${getThemePropSelector('border')};
+  border-right: 0.3px solid ${getThemePropSelector('border')};
 
-  ${css`
-    background-color: ${getThemePropSelector('backgroundLevel1')};
-    color: ${getThemePropSelector('textPrimary')};
-    border-top: 0.3px solid ${getThemePropSelector('border')};
-    border-left: 0.3px solid ${getThemePropSelector('border')};
-    border-right: 0.3px solid ${getThemePropSelector('border')};
-    &:hover {
-      background-color: ${getThemePropSelector('highlight')};
-    }
-    &:active {
-      background-color: ${getThemePropSelector('highlight')};
-    }
-  `};
+  &:hover {
+    background-color: ${getThemePropSelector('highlight')};
+  }
+  &:active {
+    background-color: ${getThemePropSelector('highlight')};
+  }
 `;
 const Caret = styled.span`
   margin-left: ${spacing.r16};
 `;
-const TriggerStyled = ButtonStyled.withComponent('div');
+const Trigger = ButtonStyled.withComponent('div');
+const TriggerStyled = styled(Trigger)`
+  // :focus-visible is the keyboard-only version of :focus
+  &:focus-visible {
+    ${FocusVisibleStyle}
+    color: ${(props) => props.theme.textPrimary};
+  }
+`;
 
 function Dropdown({
   items,
@@ -111,19 +100,16 @@ function Dropdown({
   caret = true,
   ...rest
 }: Props) {
-  const [open, setOpen] = useState(false);
-  const [menuSize, setMenuSize] = useState();
-  const [triggerSize, setTriggerSize] = useState();
-  const refMenuCallback = useCallback((node) => {
-    if (node !== null) {
-      setMenuSize(node.getBoundingClientRect());
-    }
-  }, []);
-  const refTriggerCallback = useCallback((node) => {
-    if (node !== null) {
-      setTriggerSize(node.getBoundingClientRect());
-    }
-  }, []);
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+  } = useSelect({
+    items,
+    itemToString: (item) => item?.label || '',
+  });
   return (
     <DropdownStyled
       active={open}
@@ -135,12 +121,8 @@ function Dropdown({
         variant={variant}
         size={size}
         className="trigger"
-        onBlur={() => setOpen(!open)}
-        onFocus={() => setOpen(!open)}
-        onClick={(event) => event.stopPropagation()}
-        tabIndex="0"
         title={title}
-        ref={refTriggerCallback}
+        {...getToggleButtonProps()}
       >
         {icon && (
           <ButtonIcon text={text} size={size}>
@@ -153,29 +135,31 @@ function Dropdown({
             <Icon name="Dropdown-down" />
           </Caret>
         )}
-        {open && (
-          <DropdownMenuStyled
-            className="menu-item"
-            postion={'right'}
-            ref={refMenuCallback}
-            size={menuSize}
-            triggerSize={triggerSize}
-          >
-            {items.map(({ label, onClick, ...itemRest }) => {
-              return (
-                <DropdownMenuItemStyled
-                  className="menu-item-label"
-                  key={label}
-                  onClick={onClick}
-                  variant={variant}
-                  {...itemRest}
-                >
-                  {label}
-                </DropdownMenuItemStyled>
-              );
-            })}
-          </DropdownMenuStyled>
-        )}
+
+        <DropdownMenuStyled
+          className="menu-item"
+          isOpen={isOpen}
+          {...getMenuProps()}
+        >
+          {items.map((item, index) => {
+            return (
+              <DropdownMenuItemStyled
+                className="menu-item-label"
+                key={item.label}
+                variant={item.variant}
+                {...item}
+                {...getItemProps({
+                  item,
+                  index,
+                  onClick: item.onClick,
+                })}
+                isSelected={index === highlightedIndex}
+              >
+                {item.label}
+              </DropdownMenuItemStyled>
+            );
+          })}
+        </DropdownMenuStyled>
       </TriggerStyled>
     </DropdownStyled>
   );

package/src/lib/components/inlineinput/InlineInput.test.tsx

@@ -0,0 +1,211 @@
+import React, { PropsWithChildren } from 'react';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+  UseMutationResult,
+} from 'react-query';
+import { ToastProvider } from '../toast/ToastProvider';
+import {
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+  within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InlineInput } from './InlineInput';
+
+const queryClient = new QueryClient();
+const Wrapper = ({ children }: PropsWithChildren<{}>) => {
+  return (
+    <ToastProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ToastProvider>
+  );
+};
+
+const ChangeMutationProvider = ({
+  onChange,
+  children,
+}: {
+  onChange: (value: string) => void;
+  children: ({
+    changeMutation,
+  }: {
+    changeMutation: UseMutationResult<unknown, unknown, { value: string }>;
+  }) => JSX.Element;
+}) => {
+  const changeMutation = useMutation<unknown, unknown, { value: string }>({
+    mutationFn: ({ value }) => {
+      return new Promise((resolve) => {
+        onChange(value);
+        resolve(null);
+      });
+    },
+  });
+  return <>{children({ changeMutation })}</>;
+};
+
+const selectors = {
+  confirmationModal: () => screen.getByRole('dialog', { name: /Confirm/i }),
+};
+
+describe('InlineInput', () => {
+  describe('when the user clicks accepts the edit', () => {
+    test('without confirmation modal', async () => {
+      //S
+      const mock = jest.fn();
+      render(
+        <ChangeMutationProvider onChange={mock}>
+          {({ changeMutation }) => (
+            <InlineInput
+              id="test"
+              defaultValue={'test'}
+              changeMutation={changeMutation}
+            />
+          )}
+        </ChangeMutationProvider>,
+        { wrapper: Wrapper },
+      );
+
+      //E
+      /// First focus the edit button
+      await userEvent.tab();
+      /// Then press enter to edit the input
+      await userEvent.keyboard('{enter}');
+      /// Then type a new value
+      await userEvent.type(document.activeElement, 'new value');
+      /// Then press enter to confirm the new value
+      await userEvent.keyboard('{enter}');
+      await waitForElementToBeRemoved(() => screen.getByRole('textbox'));
+
+      //V
+      expect(mock).toHaveBeenCalledWith('testnew value');
+      expect(mock).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('testnew value')).toBeInTheDocument();
+    });
+
+    test('with confirmation modal', async () => {
+      //S
+      const mock = jest.fn();
+      render(
+        <ChangeMutationProvider onChange={mock}>
+          {({ changeMutation }) => (
+            <InlineInput
+              id="test"
+              defaultValue={'test'}
+              changeMutation={changeMutation}
+              confirmationModal={{
+                title: <div>Confirm</div>,
+                body: <div>Are you sure?</div>,
+              }}
+            />
+          )}
+        </ChangeMutationProvider>,
+        { wrapper: Wrapper },
+      );
+
+      //E
+      /// First focus the edit button
+      await userEvent.tab();
+      /// Then press enter to edit the input
+      await userEvent.keyboard('{enter}');
+      /// Then type a new value
+      await userEvent.type(document.activeElement, 'new value');
+      /// Then press enter to confirm the new value
+      await userEvent.keyboard('{enter}');
+      /// Expect the confirmation modal to be opened
+      await waitFor(() =>
+        expect(selectors.confirmationModal()).toBeInTheDocument(),
+      );
+      /// Click the confirm button
+      await userEvent.click(screen.getByRole('button', { name: /confirm/i }));
+      /// Wait for modal to be closed
+      await waitForElementToBeRemoved(() => selectors.confirmationModal());
+
+      //V
+      expect(mock).toHaveBeenCalledWith('testnew value');
+      expect(mock).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('testnew value')).toBeInTheDocument();
+    });
+  });
+
+  describe('when the user clicks reset the edit', () => {
+    test('without confirmation modal', async () => {
+      //S
+      const mock = jest.fn();
+      render(
+        <ChangeMutationProvider onChange={mock}>
+          {({ changeMutation }) => (
+            <InlineInput
+              id="test"
+              defaultValue={'test'}
+              changeMutation={changeMutation}
+            />
+          )}
+        </ChangeMutationProvider>,
+        { wrapper: Wrapper },
+      );
+
+      //E
+      /// First focus the edit button
+      await userEvent.tab();
+      /// Then press enter to edit the input
+      await userEvent.keyboard('{enter}');
+      /// Then type a new value
+      await userEvent.type(document.activeElement, 'new value');
+      /// Then press escape to cancel the new value
+      await userEvent.keyboard('{esc}');
+
+      //V
+      expect(mock).not.toHaveBeenCalled();
+      expect(screen.getByText('test')).toBeInTheDocument();
+    });
+    test('with confirmation modal', async () => {
+      //S
+      const mock = jest.fn();
+      render(
+        <ChangeMutationProvider onChange={mock}>
+          {({ changeMutation }) => (
+            <InlineInput
+              id="test"
+              defaultValue={'test'}
+              changeMutation={changeMutation}
+              confirmationModal={{
+                title: <div>Confirm</div>,
+                body: <div>Are you sure?</div>,
+              }}
+            />
+          )}
+        </ChangeMutationProvider>,
+        { wrapper: Wrapper },
+      );
+
+      //E
+      /// First focus the edit button
+      await userEvent.tab();
+      /// Then press enter to edit the input
+      await userEvent.keyboard('{enter}');
+      /// Then type a new value
+      await userEvent.type(document.activeElement, 'new value');
+      /// Then press enter to confirm the new value
+      await userEvent.keyboard('{enter}');
+      /// Expect the confirmation modal to be opened
+      await waitFor(() =>
+        expect(selectors.confirmationModal()).toBeInTheDocument(),
+      );
+      /// Click the cancel button
+      await userEvent.click(
+        within(selectors.confirmationModal()).getByRole('button', {
+          name: /Cancel/i,
+        }),
+      );
+
+      //V
+      expect(mock).not.toHaveBeenCalled();
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+      expect(screen.getByRole('textbox').value).toBe('testnew value');
+    });
+  });
+});

package/src/lib/components/inlineinput/InlineInput.tsx

@@ -0,0 +1,179 @@
+import styled from 'styled-components';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { Input, InputProps } from '../inputv2/inputv2';
+import { Modal } from '../modal/Modal.component';
+import { useToast } from '../toast/ToastProvider';
+import { useForm } from 'react-hook-form';
+import { UseMutationResult } from 'react-query';
+import { Text } from '../text/Text.component';
+import { useState } from 'react';
+import { Stack, Wrap } from '../../spacing';
+
+const UnderlinedText = styled(Text)`
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+  cursor: text;
+`;
+
+type InlineInputForm = {
+  value: string;
+};
+type InlineInputProps = {
+  defaultValue?: string;
+  confirmationModal?: {
+    title: JSX.Element;
+    body: JSX.Element;
+  };
+  changeMutation: UseMutationResult<unknown, unknown, InlineInputForm, unknown>;
+} & InputProps;
+
+export const InlineInput = ({
+  defaultValue,
+  confirmationModal,
+  changeMutation,
+  ...props
+}: InlineInputProps) => {
+  const { register, handleSubmit, watch, reset } = useForm<InlineInputForm>({
+    defaultValues: {
+      value: defaultValue,
+    },
+  });
+  const [isConfirmationModalOpened, setIsConfirmationModalOpened] =
+    useState(false);
+  const handleSuccess = () => {
+    setIsConfirmationModalOpened(false);
+    setIsEditing(false);
+    setIsHover(false);
+  };
+  const onSubmit = (data: InlineInputForm) => {
+    if (confirmationModal) {
+      setIsConfirmationModalOpened(true);
+    } else {
+      changeMutation.mutate(data, {
+        onSuccess: () => {
+          handleSuccess();
+        },
+        onError: () => {
+          showToast({
+            open: true,
+            status: 'error',
+            message: 'An error occurred while updating the value',
+          });
+        },
+      });
+    }
+  };
+  const { showToast } = useToast();
+  const [isHover, setIsHover] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleReset = () => {
+    reset();
+    setIsEditing(false);
+    setIsHover(false);
+  };
+
+  //handle esc key to cancel editing
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      handleReset();
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Stack>
+            <Input
+              {...register('value')}
+              size="1/3"
+              autoFocus
+              onKeyDown={handleKeyDown}
+              {...props}
+            />
+            <Button
+              icon={<Icon name="Close" />}
+              tooltip={{
+                overlay: 'Cancel',
+              }}
+              type="reset"
+              variant="outline"
+              onClick={handleReset}
+            />
+            <Button
+              icon={<Icon name="Check" />}
+              tooltip={{
+                overlay: 'Save',
+              }}
+              variant="primary"
+              type="submit"
+              isLoading={changeMutation.isLoading}
+            />
+          </Stack>
+        </form>
+        {confirmationModal && (
+          <Modal
+            isOpen={isConfirmationModalOpened}
+            title={confirmationModal.title}
+            footer={
+              <Wrap>
+                <p></p>
+                <Stack>
+                  <Button
+                    label="Cancel"
+                    variant="outline"
+                    onClick={() => setIsConfirmationModalOpened(false)}
+                  />
+                  <Button
+                    label="Confirm"
+                    variant="primary"
+                    isLoading={changeMutation.isLoading}
+                    onClick={() => {
+                      changeMutation.mutate(watch(), {
+                        onSuccess: () => {
+                          handleSuccess();
+                        },
+                        onError: () => {
+                          showToast({
+                            open: true,
+                            status: 'error',
+                            message:
+                              'An error occurred while updating the value',
+                          });
+                        },
+                      });
+                    }}
+                  />
+                </Stack>
+              </Wrap>
+            }
+          >
+            {confirmationModal.body}
+          </Modal>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <Stack
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+      onFocus={() => setIsHover(true)}
+      onBlur={() => setIsHover(false)}
+    >
+      <UnderlinedText>{watch('value')}</UnderlinedText>
+      <Button
+        icon={<Icon name="Pencil" />}
+        tooltip={{
+          overlay: 'Edit',
+        }}
+        variant="primary"
+        onClick={() => setIsEditing(true)}
+        style={{ opacity: !isHover ? '0' : '1' }}
+      />
+    </Stack>
+  );
+};

package/src/lib/components/inputv2/inputv2.tsx

@@ -89,7 +89,7 @@ const SelfCenterredIcon = styled(Icon)`
 
 type InputSize = '1' | '2/3' | '1/2' | '1/3';
 
-type Props = {
+export type InputProps = {
   error?: string;
   id: string;
   leftIcon?: IconName;
@@ -97,7 +97,7 @@ type Props = {
   size?: InputSize;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
-export const Input = forwardRef<HTMLInputElement, Props>(
+export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       error,

package/src/lib/components/modal/Modal.component.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useLayoutEffect, useRef } from 'react';
+import { ReactNode, useEffect, useLayoutEffect, useRef } from 'react';
 import ReactDom from 'react-dom';
 import styled from 'styled-components';
 import { Wrap, spacing } from '../../spacing';
@@ -76,6 +76,24 @@ const Modal = ({
       document.body && document.body.removeChild(modalContainer.current);
     };
   }, [modalContainer]);
+
+  useEffect(() => {
+    if (isOpen) {
+      //Auto focus the modal when it opens
+      modalContainer.current.setAttribute('tabindex', '0');
+      modalContainer.current.focus();
+      //Listen to esc key to close the modal
+      const handleEsc = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          close && close();
+        }
+      };
+      document.addEventListener('keydown', handleEsc);
+      return () => {
+        document.removeEventListener('keydown', handleEsc);
+      };
+    }
+  }, [isOpen]);
   return isOpen
     ? ReactDom.createPortal(
         <ModalContainer