@redsift/popovers 8.0.0 → 8.0.1

package/dist/package.json

@@ -0,0 +1,96 @@
+{
+  "author": {
+    "name": "Red Sift"
+  },
+  "bugs": {
+    "url": "https://github.com/redsift/design-system/issues"
+  },
+  "description": "Popover component library as part of Red Sift's Design System. This package is based on @floating-ui/react and react-toastify.",
+  "homepage": "https://github.com/redsift/design-system",
+  "license": "MIT",
+  "main": "index.js",
+  "module": "index.js",
+  "name": "@redsift/popovers",
+  "publishConfig": {
+    "directory": "dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/redsift/design-system"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c",
+    "check-types": "tsc && tsc-strict",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
+    "prepare": "install-peers || exit 0",
+    "prepublishOnly": "yarn build",
+    "test:unit": "NODE_ENV=test jest --verbose",
+    "test:storybook": "test-storybook -c ../../.storybook --url http://localhost:9000/ --coverage",
+    "test": "yarn test:unit && yarn test:storybook"
+  },
+  "types": "index.d.ts",
+  "version": "8.0.1",
+  "dependencies": {
+    "@floating-ui/react": "^0.19.2",
+    "classnames": "^2.3.1",
+    "react-aria": "^3.23.1",
+    "react-toastify": "^9.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.16.7",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@svgr/rollup": "^6.2.1",
+    "@testing-library/dom": "^8.5.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "14.2.1",
+    "@types/jest": "^27.5.1",
+    "@types/react": "18.0.12",
+    "@types/react-dom": "18.0.5",
+    "@types/react-transition-group": "^4.4.5",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.26.0",
+    "autoprefixer": "^9.7.4",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "changelog-verify": "^1.1.2",
+    "identity-obj-proxy": "^3.0.0",
+    "install-peers-cli": "^2.2.0",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^29.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "^2.72.1",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-dts": "^5.0.0",
+    "rollup-plugin-execute": "^1.1.0",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-ts-paths-resolve": "^1.7.1",
+    "rollup-plugin-typescript-paths": "^1.3.1",
+    "ts-jest": "^28.0.3"
+  },
+  "peerDependencies": {
+    "@redsift/design-system": "^7.8.1",
+    "@redsift/icons": "^7.8.1",
+    "react": "18",
+    "react-dom": "18",
+    "styled-components": "^5.3.5"
+  }
+}

package/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/jest.config.js

@@ -0,0 +1,3 @@
+var JEST_CONFIG = require('../../configs/jest.config');
+
+module.exports = { ...JEST_CONFIG };

package/package.json

@@ -30,7 +30,7 @@
     "test": "yarn test:unit && yarn test:storybook"
   },
   "types": "index.d.ts",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "dependencies": {
     "@floating-ui/react": "^0.19.2",
     "classnames": "^2.3.1",
@@ -92,6 +92,5 @@
     "react": "18",
     "react-dom": "18",
     "styled-components": "^5.3.5"
-  },
-  "gitHead": "d5b44ad25f944f5869829750628000b346718034"
+  }
 }

package/rollup.config.js

@@ -0,0 +1,13 @@
+import { rollupConfig } from '../../configs/rollup.base.config';
+
+import pkg from './package.json';
+
+const baseRollupConfig = rollupConfig(__dirname, pkg);
+
+// Bundle JS code
+const bundleJS = { ...baseRollupConfig.bundleJS };
+
+// Bundle TS types in D.TS files
+const bundleType = { ...baseRollupConfig.bundleType };
+
+export default [bundleJS, bundleType];

package/src/components/dialog/Dialog.stories.tsx

@@ -0,0 +1,201 @@
+import React, { RefObject, useRef, useState } from 'react';
+import { Flexbox, Button, Number, Text } from '@redsift/design-system';
+import { Dialog, DialogProps } from '.';
+
+export default {
+  title: 'Popovers/Dialog',
+  component: Dialog,
+};
+
+export const Uncontrolled = () => {
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <Dialog initialFocus={nextButtonRef} defaultOpen={false}>
+      <Dialog.Trigger>
+        <Button variant="secondary">Button</Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Content.Header header="Dialog Header">
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </Dialog.Content.Header>
+        <Dialog.Content.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Dialog.Content.Body>
+        <Dialog.Content.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button ref={nextButtonRef as RefObject<HTMLButtonElement>}>
+              Next
+            </Button>
+          </Flexbox>
+        </Dialog.Content.Actions>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+export const Controlled = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setIsOpen(!isOpen)}>
+        External trigger
+      </Button>
+      <Dialog isOpen={isOpen} onOpen={setIsOpen} initialFocus={nextButtonRef}>
+        <Dialog.Trigger>
+          <Button variant="secondary">Trigger</Button>
+        </Dialog.Trigger>
+        <Dialog.Content>
+          <Dialog.Content.Header header="Dialog Header">
+            <Text>
+              <Number value={102} as="b" /> mails have been detected from this
+              domain.
+            </Text>
+          </Dialog.Content.Header>
+          <Dialog.Content.Body>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </Dialog.Content.Body>
+          <Dialog.Content.Actions justifyContent="space-between">
+            <Button variant="unstyled">Previous</Button>
+            <Flexbox>
+              <Button variant="secondary">Cancel</Button>
+              <Button ref={nextButtonRef as RefObject<HTMLButtonElement>}>
+                Next
+              </Button>
+            </Flexbox>
+          </Dialog.Content.Actions>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+};
+
+export const TriggerIsNotAButton = () => (
+  <Dialog>
+    <Dialog.Trigger>
+      This text has a dialog but this will never be displayed because the
+      trigger is not a button.
+    </Dialog.Trigger>
+    <Dialog.Content>
+      <Text margin="16px">
+        Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps.
+        Liquorice marzipan jelly-o carrot cake icing croissant carrot cake. Tart
+        soufflé sweet roll halvah croissant wafer cotton candy. Candy halvah
+        marzipan bear claw donut.
+      </Text>
+    </Dialog.Content>
+  </Dialog>
+);
+
+export const EmptyDialog = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Dialog>
+      <Dialog.Trigger>
+        <Button variant="secondary">Button</Button>
+      </Dialog.Trigger>
+    </Dialog>
+  </Flexbox>
+);
+
+export const DialogOnDisabledButton = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Dialog>
+      <Dialog.Trigger>
+        <Button variant="secondary" isDisabled>
+          Disabled
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Text margin="16px">
+          Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps.
+          Liquorice marzipan jelly-o carrot cake icing croissant carrot cake.
+          Tart soufflé sweet roll halvah croissant wafer cotton candy. Candy
+          halvah marzipan bear claw donut.
+        </Text>
+      </Dialog.Content>
+    </Dialog>
+  </Flexbox>
+);
+
+export const InitialFocus = () => {
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+
+  const renderDialog = ({
+    title,
+    initialFocus,
+  }: {
+    title: string;
+    initialFocus?: DialogProps['initialFocus'];
+  }) => (
+    <Dialog initialFocus={initialFocus}>
+      <Dialog.Trigger>
+        <Button variant="secondary">{title}</Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Content.Header header="Dialog Header">
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </Dialog.Content.Header>
+        <Dialog.Content.Body>
+          {Array.from({ length: 100 }).map((e, i) => (
+            <p key={i}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ))}
+        </Dialog.Content.Body>
+        <Dialog.Content.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button ref={nextButtonRef as RefObject<HTMLButtonElement>}>
+              Next
+            </Button>
+          </Flexbox>
+        </Dialog.Content.Actions>
+      </Dialog.Content>
+    </Dialog>
+  );
+
+  return (
+    <Flexbox
+      flexDirection="row"
+      flexWrap="wrap"
+      justifyContent="center"
+      alignItems="center"
+      padding="32px"
+      style={{ backgroundColor: '#EFEFEF' }}
+    >
+      {renderDialog({ title: 'Default' })}
+      {renderDialog({ title: 'Next', initialFocus: nextButtonRef })}
+      {renderDialog({ title: 'Header', initialFocus: 'header' })}
+      {renderDialog({ title: 'Body', initialFocus: 'body' })}
+      {renderDialog({ title: 'Actions', initialFocus: 'actions' })}
+    </Flexbox>
+  );
+};

package/src/components/dialog/Dialog.test.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+
+import { Button } from '@redsift/design-system';
+import { DialogContent } from '../dialog-content';
+import { DialogTrigger } from '../dialog-trigger';
+import { DialogContentHeader } from '../dialog-content-header';
+import { DialogContentBody } from '../dialog-content-body';
+import { Dialog } from '.';
+
+describe('Dialog', () => {
+  const onOpenSpy = jest.fn();
+  const realError = console.error;
+
+  beforeEach(() => {
+    console.error = jest.fn();
+  });
+
+  afterEach(() => {
+    onOpenSpy.mockClear();
+    console.error = realError;
+  });
+
+  it.each`
+    Name                     | Component              | props
+    ${'DialogTrigger'}       | ${DialogTrigger}       | ${{}}
+    ${'DialogContent'}       | ${DialogContent}       | ${{}}
+    ${'DialogContentHeader'} | ${DialogContentHeader} | ${{}}
+  `(
+    '$Name should throw error when not wrapped inside `Dialog`',
+    function ({ Component, props }) {
+      expect(() => render(<Component {...props} />)).toThrow(
+        'Dialog components must be wrapped in <Dialog />'
+      );
+    }
+  );
+
+  it.each`
+    Name                     | Component | props
+    ${'Controlled Dialog'}   | ${Dialog} | ${{ onOpen: onOpenSpy, isOpen: false }}
+    ${'Uncontrolled Dialog'} | ${Dialog} | ${{ onOpen: onOpenSpy, defaultOpen: false }}
+  `(
+    '$Name can be closed by default and then open',
+    async function ({ Name, Component, props }) {
+      const { getByText } = render(
+        <Component {...props}>
+          <DialogTrigger>
+            <Button variant="secondary">Trigger</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogContentBody>Content</DialogContentBody>
+          </DialogContent>
+        </Component>
+      );
+
+      expect(screen.queryByText('Content')).not.toBeInTheDocument();
+      expect(onOpenSpy).not.toHaveBeenCalled();
+
+      const triggerButton = getByText('Trigger');
+      fireEvent.click(triggerButton);
+
+      expect(onOpenSpy).toHaveBeenCalled();
+      if (Name.includes('Uncontrolled')) {
+        await act(async () => {});
+        await waitFor(() => {
+          expect(screen.queryByText('Content')).toBeInTheDocument();
+        });
+        expect(getByText('Content')).toBeVisible();
+      }
+    }
+  );
+
+  it.each`
+    Name                     | Component | props
+    ${'Controlled Dialog'}   | ${Dialog} | ${{ onOpen: onOpenSpy, isOpen: true }}
+    ${'Uncontrolled Dialog'} | ${Dialog} | ${{ onOpen: onOpenSpy, defaultOpen: true }}
+  `(
+    '$Name can be open by default and then closed',
+    async function ({ Name, Component, props }) {
+      render(
+        <Component {...props}>
+          <DialogTrigger>
+            <Button variant="secondary">Trigger</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogContentBody>Content</DialogContentBody>
+          </DialogContent>
+        </Component>
+      );
+      await act(async () => {});
+      await waitFor(() => {
+        expect(screen.queryByText('Content')).toBeInTheDocument();
+      });
+
+      expect(screen.queryByText('Content')).toBeVisible();
+      expect(onOpenSpy).not.toHaveBeenCalled();
+
+      const closeButton = screen.getByLabelText('Close');
+      fireEvent.click(closeButton);
+
+      expect(onOpenSpy).toHaveBeenCalled();
+      if (Name.includes('Uncontrolled')) {
+        await act(async () => {});
+        await waitFor(() => {
+          expect(screen.queryByText('Content')).not.toBeInTheDocument();
+        });
+      }
+    }
+  );
+});

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { partitionComponents, isComponent } from '@redsift/design-system';
+import { DialogContent } from '../dialog-content';
+import { DialogTrigger } from '../dialog-trigger';
+
+import { DialogContext } from './context';
+import { DialogProps, DialogSize } from './types';
+import { useDialog } from './useDialog';
+
+const COMPONENT_NAME = 'Dialog';
+const CLASSNAME = 'redsift-dialog';
+const DEFAULT_PROPS: Partial<DialogProps> = {
+  hasCloseButton: true,
+  size: DialogSize.medium,
+};
+
+/**
+ * The Dialog component.
+ */
+export const BaseDialog: React.FC<DialogProps> & {
+  displayName?: string;
+  className?: string;
+} = (props) => {
+  const {
+    children,
+    defaultOpen,
+    hasCloseButton = DEFAULT_PROPS.hasCloseButton,
+    initialFocus,
+    isOpen,
+    onOpen,
+    size,
+  } = props;
+
+  const dialog = useDialog({
+    defaultOpen,
+    hasCloseButton,
+    initialFocus,
+    isOpen,
+    onOpen,
+    size,
+  });
+
+  const [[trigger], [content]] = partitionComponents(
+    React.Children.toArray(children),
+    [isComponent('DialogTrigger'), isComponent('DialogContent')]
+  );
+
+  return (
+    <DialogContext.Provider value={dialog}>
+      {trigger}
+      {content}
+    </DialogContext.Provider>
+  );
+};
+BaseDialog.className = CLASSNAME;
+BaseDialog.defaultProps = DEFAULT_PROPS;
+BaseDialog.displayName = COMPONENT_NAME;
+
+export const Dialog = Object.assign(BaseDialog, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+});

package/src/components/dialog/context.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DialogState } from './types';
+
+export const DialogContext = React.createContext<DialogState | null>(null);

package/src/components/dialog/index.ts

@@ -0,0 +1,5 @@
+export * from './context';
+export * from './types';
+export * from './Dialog';
+export * from './useDialog';
+export * from './useDialogContext';

package/src/components/dialog/types.ts

@@ -0,0 +1,56 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ValueOf } from '@redsift/design-system';
+import { useDialog } from './useDialog';
+
+/**
+ * Context props.
+ */
+export type DialogState =
+  | (ReturnType<typeof useDialog> & {
+      setLabelId: Dispatch<SetStateAction<string | undefined>>;
+      setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
+    })
+  | null;
+
+/**
+ * Component variant.
+ */
+export const DialogSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+} as const;
+export type DialogSize = ValueOf<typeof DialogSize>;
+
+/**
+ * Component props.
+ */
+export interface DialogProps {
+  /** Children. Can only be DialogTrigger and DialogContent. */
+  children: ReactNode;
+  /**
+   * Default open status.
+   * Used for uncontrolled version.
+   */
+  defaultOpen?: boolean;
+  /** Whether the Close icon button is displayed or not. */
+  hasCloseButton?: boolean;
+  /** Which element to initially focus. Can be either a number (tabbable index), a ref to en element, or a shortcut pointing towards a section of the dialog. See the accessibility section in the documentation to know which one to use. */
+  initialFocus?:
+    | number
+    | React.MutableRefObject<HTMLElement | null>
+    | 'header'
+    | 'body'
+    | 'actions';
+  /**
+   * Whether the component is opened or not.
+   * Used for controlled version.
+   */
+  isOpen?: boolean;
+  /** Method to handle component change. */
+  onOpen?: (open: boolean) => void;
+  /** Dialog size. */
+  size?: DialogSize;
+}
+
+export type StyledDialogProps = DialogProps;

package/src/components/dialog/useDialog.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  useFloating,
+  useDismiss,
+  useRole,
+  useInteractions,
+} from '@floating-ui/react';
+import { DialogProps } from './types';
+
+export function useDialog({
+  defaultOpen,
+  hasCloseButton,
+  initialFocus,
+  isOpen: propsIsOpen,
+  onOpen,
+  size,
+}: Omit<DialogProps, 'children'>) {
+  const headerRef = useRef(null);
+  const bodyRef = useRef(null);
+  const actionsRef = useRef(null);
+  const [labelId, setLabelId] = React.useState<string | undefined>();
+  const [descriptionId, setDescriptionId] =
+    React.useState<string | undefined>();
+
+  const [isOpen, setIsOpen] = useState(propsIsOpen ?? defaultOpen);
+
+  useEffect(() => {
+    setIsOpen(propsIsOpen ?? defaultOpen);
+  }, [propsIsOpen, defaultOpen]);
+
+  const handleOpen = useCallback(
+    (collapsed: boolean) => {
+      if (onOpen) {
+        onOpen(collapsed);
+      }
+      if (propsIsOpen === undefined || propsIsOpen === null) {
+        setIsOpen(collapsed);
+      }
+    },
+    [onOpen]
+  );
+
+  const data = useFloating({
+    open: isOpen,
+    onOpenChange: handleOpen,
+  });
+
+  const context = data.context;
+
+  const dismiss = useDismiss(context, { outsidePressEvent: 'mousedown' });
+  const role = useRole(context);
+
+  const interactions = useInteractions([dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      isOpen,
+      handleOpen,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+      hasCloseButton,
+      initialFocus,
+      size,
+      headerRef,
+      bodyRef,
+      actionsRef,
+    }),
+    [
+      isOpen,
+      handleOpen,
+      interactions,
+      data,
+      labelId,
+      descriptionId,
+      hasCloseButton,
+      initialFocus,
+      size,
+      headerRef,
+      bodyRef,
+      actionsRef,
+    ]
+  );
+}

package/src/components/dialog/useDialogContext.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DialogContext } from './context';
+
+export const useDialogContext = () => {
+  const context = React.useContext(DialogContext);
+
+  if (context == null) {
+    throw new Error('Dialog components must be wrapped in <Dialog />');
+  }
+
+  return context;
+};