@redsift/popovers 8.0.1 → 8.0.3

package/dist/package.json

@@ -1,96 +0,0 @@
-{
-  "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

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

package/jest.config.js

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

package/rollup.config.js

@@ -1,13 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

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

package/src/components/dialog/index.ts

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

package/src/components/dialog/types.ts

@@ -1,56 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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;
-};