@onewelcome/react-lib-components 0.1.1-alpha → 0.1.2-alpha

package/src/Notifications/BaseModal/BaseModalContent/BaseModalContent.tsx

@@ -1,35 +1,36 @@
-import React, { HTMLAttributes, useEffect, useRef } from 'react';
+import React, { ComponentPropsWithRef, createRef, useEffect } from 'react';
 import classes from './BaseModalContent.module.scss';
 
-export interface Props extends HTMLAttributes<HTMLDivElement> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   id?: string;
   children: React.ReactNode;
   className?: string;
   disableAutoFocus?: boolean;
 }
 
-export const BaseModalContent = ({
-  id,
-  children,
-  className = '',
-  disableAutoFocus = false,
-  ...restProps
-}: Props) => {
-  const contentRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    !disableAutoFocus && contentRef.current?.focus();
-  }, []);
+export const BaseModalContent = React.forwardRef<HTMLDivElement, Props>(
+  ({ id, children, className = '', disableAutoFocus = false, ...rest }: Props, ref) => {
+    const contentRef = createRef<HTMLDivElement>();
 
-  /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
-  return (
-    <div
-      {...restProps}
-      ref={contentRef}
-      id={id}
-      className={`${classes['content']} ${className}`}
-      tabIndex={-1}
-    >
-      {children}
-    </div>
-  );
-};
+    useEffect(() => {
+      if (!disableAutoFocus && ref) {
+        (ref as React.RefObject<HTMLDivElement>).current?.focus();
+      } else if (!disableAutoFocus) {
+        contentRef.current?.focus();
+      }
+    }, []);
+
+    /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
+    return (
+      <div
+        {...rest}
+        ref={ref || contentRef}
+        id={id}
+        className={`${classes['content']} ${className}`}
+        tabIndex={-1}
+      >
+        {children}
+      </div>
+    );
+  }
+);

package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { BaseModalHeader, Props } from './BaseModalHeader';
 import { render, getByRole, getByTestId, getByText } from '@testing-library/react';
 import { labelId } from '../BaseModalContext';
@@ -28,3 +28,31 @@ describe('BaseModalHeader', () => {
     expect(initParams.onClose).toBeCalledTimes(1);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return (
+        <BaseModalHeader id="test" title="test" onClose={jest.fn()} data-ref="testing" ref={ref} />
+      );
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -1,28 +1,30 @@
-import React, { HTMLAttributes } from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import classes from './BaseModalHeader.module.scss';
 import { IconButton } from '../../../Button/IconButton';
 import { Icon, Icons } from '../../../Icon/Icon';
 import { Typography } from '../../../Typography/Typography';
 
-export interface Props extends HTMLAttributes<HTMLDivElement> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   id: string;
   title: string;
   children?: React.ReactNode;
   onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-export const BaseModalHeader = ({ id, title, children, onClose, ...restProps }: Props) => {
-  return (
-    <div {...restProps} className={classes['header']}>
-      <div className={classes['headline']}>
-        <Typography id={id} className={classes['title']} tag="h1" variant="h4">
-          {title}
-        </Typography>
-        <IconButton onClick={onClose} className={classes['closeBtn']} title="close modal">
-          <Icon icon={Icons.Times} />
-        </IconButton>
+export const BaseModalHeader = React.forwardRef<HTMLDivElement, Props>(
+  ({ id, title, children, onClose, ...rest }: Props, ref) => {
+    return (
+      <div {...rest} ref={ref} className={classes['header']}>
+        <div className={classes['headline']}>
+          <Typography id={id} className={classes['title']} tag="h1" variant="h4">
+            {title}
+          </Typography>
+          <IconButton onClick={onClose} className={classes['closeBtn']} title="close modal">
+            <Icon icon={Icons.Times} />
+          </IconButton>
+        </div>
+        {children}
       </div>
-      {children}
-    </div>
-  );
-};
+    );
+  }
+);

package/src/Notifications/Dialog/Dialog.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Dialog, Props } from './Dialog';
 import { render, getAllByRole } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -74,3 +74,41 @@ describe('Dialog', () => {
     expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return (
+        <Dialog
+          children="test"
+          open={false}
+          alignActions={'left'}
+          onClose={jest.fn()}
+          primaryAction={{ label: 'test', onClick: jest.fn() }}
+          title="test"
+          id="test"
+          data-ref="testing"
+          ref={ref}
+        />
+      );
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useState } from 'react';
+import React, { ComponentPropsWithRef, useState } from 'react';
 import { BaseModal } from '../BaseModal/BaseModal';
 import { BaseModalContent } from '../BaseModal/BaseModalContent/BaseModalContent';
 import { DialogActions } from './DialogActions/DialogActions';
@@ -8,7 +8,7 @@ import { Button, Props as ButtonProps } from '../../Button/Button';
 import { labelId, descriptionId } from '../BaseModal/BaseModalContext';
 import { generateID } from '../../util/helper';
 
-export interface Props extends HTMLAttributes<HTMLDivElement> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   id?: string;
   open: boolean;
   children: React.ReactNode;
@@ -26,82 +26,88 @@ export interface Action extends Omit<ButtonProps, 'variant' | 'ref'> {
   onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
 }
 
-export const Dialog = ({
-  id,
-  open,
-  children,
-  alignActions,
-  onClose,
-  title,
-  primaryAction,
-  secondaryAction,
-  zIndex,
-  disableEscapeKeyDown = true,
-  ...restProps
-}: Props) => {
-  const [dialogId] = useState(id ?? generateID(20));
-  const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
-  const PrimaryButton = (
-    <Button key="primary" {...restOfPrimaryAction}>
-      {primaryLabel}
-    </Button>
-  );
-  const TertiaryButton =
-    secondaryAction &&
-    (function () {
-      const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
-      return (
-        <Button key="tertiary" variant="text" {...restOfSecondaryAction}>
-          {secondaryLabel}
-        </Button>
-      );
-    })();
+export const Dialog = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      id,
+      open,
+      children,
+      alignActions,
+      onClose,
+      title,
+      primaryAction,
+      secondaryAction,
+      zIndex,
+      disableEscapeKeyDown = true,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const [dialogId] = useState(id ?? generateID(20));
+    const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
+    const PrimaryButton = (
+      <Button key="primary" {...restOfPrimaryAction}>
+        {primaryLabel}
+      </Button>
+    );
+    const TertiaryButton =
+      secondaryAction &&
+      (function () {
+        const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
+        return (
+          <Button key="tertiary" variant="text" {...restOfSecondaryAction}>
+            {secondaryLabel}
+          </Button>
+        );
+      })();
 
-  const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
-    if (event.key === 'Enter') {
-      primaryAction.onClick();
-    }
-  };
+    const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
+      if (event.key === 'Enter') {
+        primaryAction.onClick();
+      }
+    };
 
-  return (
-    <BaseModal
-      {...restProps}
-      id={dialogId}
-      className={classes['dialog']}
-      containerClassName={classes['container']}
-      open={open}
-      disableBackdrop
-      onClose={onClose}
-      zIndex={zIndex}
-      disableEscapeKeyDown={disableEscapeKeyDown}
-    >
-      <DialogTitle id={labelId(dialogId)} title={title} />
-      <BaseModalContent
-        id={descriptionId(dialogId)}
-        className={classes['content']}
-        disableAutoFocus
+    return (
+      <BaseModal
+        {...rest}
+        ref={ref}
+        id={dialogId}
+        className={classes['dialog']}
+        containerClassName={classes['container']}
+        open={open}
+        disableBackdrop
+        onClose={onClose}
+        zIndex={zIndex}
+        disableEscapeKeyDown={disableEscapeKeyDown}
       >
-        {children}
-      </BaseModalContent>
-      <DialogActions align={alignActions}>
-        {alignActions === 'left'
-          ? [PrimaryButton, TertiaryButton]
-          : [TertiaryButton, PrimaryButton]}
-      </DialogActions>
-      <input
-        autoFocus
-        aria-hidden={true}
-        style={{
-          position: 'absolute',
-          width: 0,
-          height: 0,
-          opacity: 0,
-        }}
-        maxLength={0}
-        tabIndex={-1}
-        onKeyPress={onHiddenInputKeyPress}
-      />
-    </BaseModal>
-  );
-};
+        <DialogTitle id={labelId(dialogId)} title={title} />
+        <BaseModalContent
+          id={descriptionId(dialogId)}
+          className={classes['content']}
+          disableAutoFocus
+        >
+          {children}
+        </BaseModalContent>
+        <DialogActions align={alignActions}>
+          {alignActions === 'left'
+            ? [PrimaryButton, TertiaryButton]
+            : [TertiaryButton, PrimaryButton]}
+        </DialogActions>
+        <input
+          autoFocus
+          aria-hidden={true}
+          style={{
+            position: 'absolute',
+            width: 0,
+            height: 0,
+            opacity: 0,
+          }}
+          maxLength={0}
+          tabIndex={-1}
+          onKeyPress={onHiddenInputKeyPress}
+        />
+      </BaseModal>
+    );
+  }
+);

package/src/Notifications/Dialog/DialogActions/DialogActions.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DialogActions, Props } from './DialogActions';
 import { render } from '@testing-library/react';
 
@@ -23,3 +23,29 @@ describe('DialogActions', () => {
     expect(dialogActionsContainer).toHaveClass('actions', 'left');
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <DialogActions id="test" children="test" open={true} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -1,21 +1,24 @@
-import React from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import {
   BaseModalActions,
   Props as BaseModalActionsProps,
 } from '../../BaseModal/BaseModalActions/BaseModalActions';
 import classes from './DialogActions.module.scss';
 
-export interface Props extends BaseModalActionsProps {
+export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps {
   align: 'left' | 'right';
 }
 
-export const DialogActions = ({ children, align, ...restProps }: Props) => {
-  return (
-    <BaseModalActions
-      {...restProps}
-      className={`${classes['actions']}${align === 'left' ? ' ' + classes['left'] : ''}`}
-    >
-      {children}
-    </BaseModalActions>
-  );
-};
+export const DialogActions = React.forwardRef<HTMLElement, Props>(
+  ({ children, align, ...rest }: Props, ref) => {
+    return (
+      <BaseModalActions
+        {...rest}
+        ref={ref}
+        className={`${classes['actions']}${align === 'left' ? ' ' + classes['left'] : ''}`}
+      >
+        {children}
+      </BaseModalActions>
+    );
+  }
+);

package/src/Notifications/Dialog/DialogTitle/DialogTitle.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DialogTitle, Props } from './DialogTitle';
 import { render, getByText } from '@testing-library/react';
 
@@ -7,7 +7,7 @@ const initParams: Props = {
   title: 'Example title',
 };
 
-describe('DialogActions', () => {
+describe('DialogTitle', () => {
   it('renders without crashing', () => {
     const { container } = render(<DialogTitle {...initParams} />);
 
@@ -16,3 +16,29 @@ describe('DialogActions', () => {
     expect(getByText(container, initParams.title));
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <DialogTitle title="test" id="test" data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import { Typography } from '../../../Typography/Typography';
 import classes from './DialogTitle.module.scss';
 
-export interface Props {
+export interface Props extends ComponentPropsWithRef<'div'> {
   id: string;
   title: string;
 }
 
-export const DialogTitle = ({ id, title }: Props) => {
-  return (
-    <div className={classes['header']}>
-      <Typography id={id} className={classes['title']} tag="h1" variant="h4">
-        {title}
-      </Typography>
-    </div>
-  );
-};
+export const DialogTitle = React.forwardRef<HTMLDivElement, Props>(
+  ({ id, title, ...rest }: Props, ref) => {
+    return (
+      <div {...rest} ref={ref} className={classes['header']}>
+        <Typography id={id} className={classes['title']} tag="h1" variant="h4">
+          {title}
+        </Typography>
+      </div>
+    );
+  }
+);

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DiscardChangesDialog, Props } from './DiscardChangesDialog';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -53,3 +53,43 @@ describe('DiscardChangesDialog should render', () => {
     expect(defaultParams.onKeepEditing).toBeCalledTimes(1);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return (
+        <DiscardChangesDialog
+          open={false}
+          onKeepEditing={jest.fn()}
+          onDiscardChanges={jest.fn()}
+          discardChangesButtonLabel="test"
+          keepEditingButtonLabel="test"
+          contentLabel="test"
+          titleLabel="test"
+          title="test"
+          id="test"
+          data-ref="testing"
+          ref={ref}
+        />
+      );
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -1,48 +1,55 @@
-import React from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import { Dialog } from '../../Dialog/Dialog';
-import { HTMLProps } from '../../../interfaces';
 import { Typography } from '../../../Typography/Typography';
+import { DataAttributeKey } from '../../../interfaces';
 
-export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'children'> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   open: boolean;
   discardChangesButtonLabel: string;
   keepEditingButtonLabel: string;
   contentLabel: string;
   titleLabel: string;
+  [dataAttribute: DataAttributeKey]: any;
   onKeepEditing: () => void;
   onDiscardChanges: () => void;
 }
 
-export const DiscardChangesDialog = ({
-  open,
-  onKeepEditing,
-  onDiscardChanges,
-  discardChangesButtonLabel,
-  keepEditingButtonLabel,
-  contentLabel,
-  titleLabel,
-  ...rest
-}: Props) => {
-  return (
-    <Dialog
-      {...rest}
-      open={open}
-      alignActions="left"
-      title={titleLabel}
-      onClose={onKeepEditing}
-      primaryAction={{
-        label: discardChangesButtonLabel,
-        onClick: onDiscardChanges,
-      }}
-      secondaryAction={{
-        label: keepEditingButtonLabel,
-        onClick: onKeepEditing,
-      }}
-      disableEscapeKeyDown={false}
-    >
-      <Typography variant="body" spacing={{ margin: 0 }}>
-        {contentLabel}
-      </Typography>
-    </Dialog>
-  );
-};
+export const DiscardChangesDialog = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      open,
+      onKeepEditing,
+      onDiscardChanges,
+      discardChangesButtonLabel,
+      keepEditingButtonLabel,
+      contentLabel,
+      titleLabel,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    return (
+      <Dialog
+        {...rest}
+        ref={ref}
+        open={open}
+        alignActions="left"
+        title={titleLabel}
+        onClose={onKeepEditing}
+        primaryAction={{
+          label: discardChangesButtonLabel,
+          onClick: onDiscardChanges,
+        }}
+        secondaryAction={{
+          label: keepEditingButtonLabel,
+          onClick: onKeepEditing,
+        }}
+        disableEscapeKeyDown={false}
+      >
+        <Typography variant="body" spacing={{ margin: 0 }}>
+          {contentLabel}
+        </Typography>
+      </Dialog>
+    );
+  }
+);