@redsift/popovers 9.2.3-patch → 9.2.3

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": "9.2.3",
+  "dependencies": {
+    "@floating-ui/react": "^0.19.2",
+    "@react-aria/i18n": "3.7.2",
+    "classnames": "^2.3.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": ">=9.0.0-alpha.0",
+    "@redsift/icons": ">=9.0.0-alpha.0",
+    "react": ">=17",
+    "react-dom": ">=17",
+    "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": "9.2.3-patch",
+  "version": "9.2.3",
   "dependencies": {
     "@floating-ui/react": "^0.19.2",
     "@react-aria/i18n": "3.7.2",
@@ -92,6 +92,5 @@
     "react": ">=17",
     "react-dom": ">=17",
     "styled-components": "^5.3.5"
-  },
-  "gitHead": "44635b1b3181bd68befd7efc0c3519a81342ad7b"
+  }
 }

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,264 @@
+import React, { RefObject, useRef, useState } from 'react';
+import { Flexbox, Button, Number, Text, Checkbox } 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 CheckboxAsTrigger = () => {
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <Dialog isOpen={isOpen} onOpen={setIsOpen} initialFocus={nextButtonRef} defaultOpen={false}>
+      <Dialog.Trigger>
+        <Checkbox isSelected={selected} onChange={() => {}}>
+          I accept the terms and conditions
+        </Checkbox>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Content.Header header="Terms and conditions" />
+        <Dialog.Content.Body display="flex" flexDirection="column" gap="8px">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula est, volutpat sit amet lectus
+            condimentum, laoreet imperdiet dolor. Sed eu enim vitae orci egestas blandit id non orci. Mauris blandit
+            quis erat sit amet suscipit. Proin congue, leo vitae rutrum accumsan, leo diam consectetur sapien, fermentum
+            vestibulum elit turpis et metus. Nulla id magna a enim pulvinar accumsan sit amet sit amet dui. Fusce
+            fermentum accumsan odio molestie convallis. Mauris faucibus ex bibendum, condimentum risus eget, ullamcorper
+            diam. Nullam at ullamcorper felis. Donec diam ante, gravida a ex non, semper interdum orci.
+          </p>
+          <p>
+            Aliquam rhoncus dui ut odio accumsan, a suscipit ex posuere. Quisque faucibus, justo at consequat malesuada,
+            tellus nunc tempus mi, in consequat justo metus ac urna. Suspendisse ut augue at arcu aliquam porttitor. Nam
+            vestibulum sit amet nulla quis lobortis. Aenean id odio ut ex ultrices egestas. Nulla luctus fringilla nibh,
+            eu accumsan massa mollis eget. Pellentesque eleifend sit amet ante ut lobortis. Curabitur imperdiet ex
+            gravida lacus fringilla mollis. Phasellus quis metus elit. Praesent lobortis nec ipsum suscipit congue.
+            Aliquam in congue felis.
+          </p>
+          <p>
+            Donec a ante eget leo aliquet congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+            posuere cubilia curae; Nunc id libero vitae ante interdum pharetra. Phasellus ipsum diam, sagittis eget
+            feugiat in, faucibus ut quam. Sed ac urna interdum, convallis libero vel, fringilla ipsum. Suspendisse
+            blandit fringilla augue, in fringilla nulla. Quisque aliquet mi in fermentum sagittis. Vestibulum eu feugiat
+            est. Proin tristique, turpis commodo elementum ultricies, elit ipsum lobortis ex, sed porta orci dolor at
+            mi.
+          </p>
+          <p>
+            Donec in dolor blandit, egestas nunc sed, mollis ligula. Class aptent taciti sociosqu ad litora torquent per
+            conubia nostra, per inceptos himenaeos. Etiam tempor ipsum id tincidunt pharetra. Nulla orci tortor,
+            tristique semper vulputate nec, pharetra sit amet quam. Pellentesque habitant morbi tristique senectus et
+            netus et malesuada fames ac turpis egestas. Nam suscipit lacus odio, at vestibulum orci viverra in.
+            Phasellus interdum dictum congue. Nulla erat turpis, fermentum sit amet placerat eu, condimentum nec augue.
+            Donec eget tortor in massa vehicula ultrices.
+          </p>
+          <p>
+            Sed quis turpis turpis. Ut tincidunt justo ligula, a fermentum nisl venenatis vitae. Vestibulum sodales
+            consequat diam, venenatis placerat libero dignissim ac. Vestibulum placerat venenatis pretium. Suspendisse
+            potenti. Etiam at pretium magna, non pulvinar risus. Nulla in enim felis. Proin at luctus ipsum. Nunc a
+            tristique odio, et dictum quam. Donec a commodo ante, eget fringilla augue. Proin luctus neque vitae est
+            congue, et volutpat libero luctus. Nulla luctus placerat accumsan. Aliquam tristique urna est, nec volutpat
+            nisl varius at.
+          </p>
+        </Dialog.Content.Body>
+        <Dialog.Content.Actions justifyContent="space-between">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              setSelected(false);
+              setIsOpen(false);
+            }}
+          >
+            Decline
+          </Button>
+          <Button
+            ref={nextButtonRef as RefObject<HTMLButtonElement>}
+            onClick={() => {
+              setSelected(true);
+              setIsOpen(false);
+            }}
+          >
+            Accept
+          </Button>
+        </Dialog.Content.Actions>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+export const TriggerIsInvalid = () => (
+  <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,52 @@
+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',
+  xlarge: 'xlarge',
+} 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 | { width: string };
+}
+
+export type StyledDialogProps = DialogProps;