@redsift/popovers 8.0.1 → 8.0.3

package/src/components/dialog-content/DialogContent.stories.tsx

@@ -1,337 +0,0 @@
-import { mdiArrowRight, mdiInformationOutline } from '@redsift/icons';
-import React from 'react';
-
-import { Flexbox, Button, Text, Number } from '@redsift/design-system';
-import { DialogContent } from '.';
-import { Dialog } from '../dialog';
-
-export default {
-  title: 'Popovers/Dialog/DialogContent',
-  component: DialogContent,
-};
-
-export const Simple = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen>
-      <DialogContent>
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const Empty = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen hasCloseButton={false}>
-      <DialogContent />
-    </Dialog>
-  </Flexbox>
-);
-
-export const Dismissable = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen hasCloseButton={true}>
-      <DialogContent>
-        <DialogContent.Header />
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const WithHeader = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen>
-      <DialogContent>
-        <DialogContent.Header header="DialogContent Header" />
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const WithSubheader = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen>
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        />
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const WithIcon = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen hasCloseButton={false}>
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-          icon={mdiInformationOutline}
-        />
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const WithDescription = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen>
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        >
-          <Flexbox flexDirection="column" alignItems="flex-start" gap="8px">
-            <Text>
-              <Number value={102} as="b" /> mails have been detected from this
-              domain.
-            </Text>
-            <Button variant="secondary" rightIcon={mdiArrowRight}>
-              More details
-            </Button>
-          </Flexbox>
-        </DialogContent.Header>
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const WithActions = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen>
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        >
-          <Text>
-            <Number value={102} as="b" /> mails have been detected from this
-            domain.
-          </Text>
-        </DialogContent.Header>
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-        <DialogContent.Actions justifyContent="space-between">
-          <Button variant="unstyled">Previous</Button>
-          <Flexbox>
-            <Button variant="secondary">Cancel</Button>
-            <Button>Next</Button>
-          </Flexbox>
-        </DialogContent.Actions>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const Small = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen size="small">
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        >
-          <Text>
-            <Number value={102} as="b" /> mails have been detected from this
-            domain.
-          </Text>
-        </DialogContent.Header>
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-        <DialogContent.Actions justifyContent="space-between">
-          <Button variant="unstyled">Previous</Button>
-          <Flexbox>
-            <Button variant="secondary">Cancel</Button>
-            <Button>Next</Button>
-          </Flexbox>
-        </DialogContent.Actions>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const Medium = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen size="medium">
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        >
-          <Text>
-            <Number value={102} as="b" /> mails have been detected from this
-            domain.
-          </Text>
-        </DialogContent.Header>
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-        <DialogContent.Actions justifyContent="space-between">
-          <Button variant="unstyled">Previous</Button>
-          <Flexbox>
-            <Button variant="secondary">Cancel</Button>
-            <Button>Next</Button>
-          </Flexbox>
-        </DialogContent.Actions>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const Large = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen size="large">
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        >
-          <Text>
-            <Number value={102} as="b" /> mails have been detected from this
-            domain.
-          </Text>
-        </DialogContent.Header>
-        <DialogContent.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </DialogContent.Body>
-        <DialogContent.Actions justifyContent="space-between">
-          <Button variant="unstyled">Previous</Button>
-          <Flexbox>
-            <Button variant="secondary">Cancel</Button>
-            <Button>Next</Button>
-          </Flexbox>
-        </DialogContent.Actions>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const InitialFocusOnHeader = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen initialFocus="header">
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        >
-          <Text>
-            <Number value={102} as="b" /> mails have been detected from this
-            domain.
-          </Text>
-        </DialogContent.Header>
-        <DialogContent.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>
-          ))}
-        </DialogContent.Body>
-        <DialogContent.Actions justifyContent="space-between">
-          <Button variant="unstyled">Previous</Button>
-          <Flexbox>
-            <Button variant="secondary">Cancel</Button>
-            <Button>Next</Button>
-          </Flexbox>
-        </DialogContent.Actions>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const InitialFocusOnBody = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen initialFocus="body">
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        >
-          <Text>
-            <Number value={102} as="b" /> mails have been detected from this
-            domain.
-          </Text>
-        </DialogContent.Header>
-        <DialogContent.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>
-          ))}
-        </DialogContent.Body>
-        <DialogContent.Actions justifyContent="space-between">
-          <Button variant="unstyled">Previous</Button>
-          <Flexbox>
-            <Button variant="secondary">Cancel</Button>
-            <Button>Next</Button>
-          </Flexbox>
-        </DialogContent.Actions>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);
-
-export const InitialFocusOnActions = () => (
-  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
-    <Dialog isOpen initialFocus="actions">
-      <DialogContent>
-        <DialogContent.Header
-          header="DialogContent Header"
-          subheader="Subheader"
-        >
-          <Text>
-            <Number value={102} as="b" /> mails have been detected from this
-            domain.
-          </Text>
-        </DialogContent.Header>
-        <DialogContent.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>
-          ))}
-        </DialogContent.Body>
-        <DialogContent.Actions justifyContent="space-between">
-          <Button variant="unstyled">Previous</Button>
-          <Flexbox>
-            <Button variant="secondary">Cancel</Button>
-            <Button>Next</Button>
-          </Flexbox>
-        </DialogContent.Actions>
-      </DialogContent>
-    </Dialog>
-  </Flexbox>
-);

package/src/components/dialog-content/DialogContent.tsx

@@ -1,134 +0,0 @@
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-import {
-  useMergeRefs,
-  FloatingPortal,
-  FloatingFocusManager,
-  useTransitionStyles,
-} from '@floating-ui/react';
-import { mdiClose } from '@redsift/icons';
-
-import { useLocalizedStringFormatter } from 'react-aria';
-import intlMessages from './intl';
-
-import {
-  Comp,
-  IconButton,
-  isComponent,
-  partitionComponents,
-} from '@redsift/design-system';
-import { DialogContentProps } from './types';
-import { useDialogContext } from '../dialog';
-import { StyledDialogContent, StyledFloatingOverlay } from './styles';
-import { DialogContentActions } from '../dialog-content-actions';
-import { DialogContentBody } from '../dialog-content-body';
-import { DialogContentHeader } from '../dialog-content-header';
-
-const COMPONENT_NAME = 'DialogContent';
-const CLASSNAME = 'redsift-dialog-content';
-const DEFAULT_PROPS: Partial<DialogContentProps> = {};
-
-/**
- * The DialogContent component.
- */
-export const BaseDialogContent: Comp<DialogContentProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-    const {
-      context: floatingContext,
-      getFloatingProps,
-      refs,
-      labelId,
-      descriptionId,
-      handleOpen,
-      hasCloseButton,
-      initialFocus: propsInitialFocus,
-      size,
-      headerRef,
-      bodyRef,
-      actionsRef,
-    } = useDialogContext();
-    const { isMounted, styles } = useTransitionStyles(floatingContext);
-    const dialogRef = useMergeRefs([refs.setFloating, ref]);
-
-    const stringFormatter = useLocalizedStringFormatter(intlMessages);
-
-    const [[header], [body], [actions]] = partitionComponents(
-      React.Children.toArray(children),
-      [
-        isComponent('DialogContentHeader'),
-        isComponent('DialogContentBody'),
-        isComponent('DialogContentActions'),
-      ]
-    );
-
-    const initialFocus:
-      | number
-      | React.MutableRefObject<HTMLElement | null>
-      | undefined =
-      propsInitialFocus === 'header'
-        ? headerRef
-        : propsInitialFocus === 'body'
-        ? bodyRef
-        : propsInitialFocus === 'actions'
-        ? actionsRef
-        : propsInitialFocus
-        ? propsInitialFocus
-        : undefined;
-
-    return (
-      <FloatingPortal id="redsift-app-container">
-        {isMounted && (
-          <StyledFloatingOverlay lockScroll style={styles}>
-            <FloatingFocusManager
-              context={floatingContext}
-              initialFocus={initialFocus ? initialFocus : undefined}
-            >
-              <StyledDialogContent
-                className={classNames(DialogContent.className, className)}
-                {...forwardedProps}
-                ref={dialogRef}
-                aria-labelledby={labelId}
-                aria-describedby={descriptionId}
-                {...getFloatingProps(props)}
-                style={styles}
-                $size={size!}
-              >
-                {header || hasCloseButton ? (
-                  <div className={`${BaseDialogContent.className}__header`}>
-                    {header}
-
-                    {hasCloseButton ? (
-                      <IconButton
-                        aria-label={stringFormatter.format('close')}
-                        className={`${BaseDialogContent.className}-header__icon-button`}
-                        color="question"
-                        icon={mdiClose}
-                        onClick={() => handleOpen(false)}
-                      />
-                    ) : null}
-                  </div>
-                ) : null}
-
-                {body || actions ? (
-                  <div className={`${BaseDialogContent.className}__content`}>
-                    {body}
-                    {actions}
-                  </div>
-                ) : null}
-              </StyledDialogContent>
-            </FloatingFocusManager>
-          </StyledFloatingOverlay>
-        )}
-      </FloatingPortal>
-    );
-  });
-BaseDialogContent.className = CLASSNAME;
-BaseDialogContent.defaultProps = DEFAULT_PROPS;
-BaseDialogContent.displayName = COMPONENT_NAME;
-
-export const DialogContent = Object.assign(BaseDialogContent, {
-  Header: DialogContentHeader,
-  Body: DialogContentBody,
-  Actions: DialogContentActions,
-});

package/src/components/dialog-content/index.ts

@@ -1,2 +0,0 @@
-export * from './types';
-export * from './DialogContent';

package/src/components/dialog-content/intl/en-US.json

@@ -1,3 +0,0 @@
-{
-  "close": "Close"
-}

package/src/components/dialog-content/intl/fr-FR.json

@@ -1,3 +0,0 @@
-{
-  "close": "Fermer"
-}

package/src/components/dialog-content/intl/index.ts

@@ -1,7 +0,0 @@
-import enUS from './en-US.json';
-import frFR from './fr-FR.json';
-
-export default {
-  'en-US': enUS,
-  'fr-FR': frFR,
-};

package/src/components/dialog-content/styles.ts

@@ -1,72 +0,0 @@
-import { FloatingOverlay } from '@floating-ui/react';
-import styled, { css } from 'styled-components';
-import { DialogSize } from '../dialog/types';
-import { StyledDialogContentProps } from './types';
-
-/**
- * Component style.
- */
-export const StyledDialogContent = styled.div<StyledDialogContentProps>`
-  background-color: var(--redsift-color-neutral-white);
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
-  color: var(--redsift-color-neutral-black);
-  display: flex;
-  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
-    drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
-  flex-direction: column;
-  font-family: var(--redsift-typography-dialog-font-family);
-  font-size: var(--redsift-typography-dialog-font-size);
-  font-weight: var(--redsift-typography-dialog-font-weight);
-  line-height: var(--redsift-typography-dialog-line-height);
-  margin: 32px;
-  max-width: calc(100vw - 48px);
-  padding: 24px;
-  width: 540px;
-  z-index: var(--redsift-layout-z-index-dialog);
-
-  ${({ $size }) => {
-    switch ($size) {
-      case DialogSize.small:
-        return css`
-          width: 540px;
-        `;
-      case DialogSize.large:
-        return css`
-          width: 800px;
-        `;
-      case DialogSize.medium:
-      default:
-        return css`
-          width: 700px;
-        `;
-    }
-  }}
-
-  &:focus-visible {
-    outline: none;
-  }
-
-  .redsift-dialog-content__header {
-    align-items: flex-start;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .redsift-card-header__icon-button {
-    margin-top: 8px;
-    margin-left: auto;
-    margin-right: 8px;
-
-    [dir='rtl'] & {
-      margin-left: 8px;
-      margin-right: auto;
-    }
-  }
-`;
-
-export const StyledFloatingOverlay = styled(FloatingOverlay)`
-  background: rgba(0, 0, 0, 0.8);
-  display: grid;
-  place-items: center;
-  z-index: var(--redsift-layout-z-index-overlay);
-`;

package/src/components/dialog-content/types.ts

@@ -1,11 +0,0 @@
-import { ComponentProps } from 'react';
-import { DialogSize } from '../dialog/types';
-
-/**
- * Component props.
- */
-export interface DialogContentProps extends ComponentProps<'div'> {}
-
-export type StyledDialogContentProps = DialogContentProps & {
-  $size: DialogSize;
-};

package/src/components/dialog-content-actions/DialogContentActions.test.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { act, render, waitFor } from '@testing-library/react';
-
-import { DialogContentActions } from '.';
-import { Dialog } from '../dialog';
-
-const DialogActionsWrapper = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <Dialog isOpen>
-      <Dialog.Content>{children}</Dialog.Content>
-    </Dialog>
-  );
-};
-
-describe('DialogContentActions', () => {
-  it('handles default', async () => {
-    const { getByText } = render(
-      <DialogContentActions>Actions</DialogContentActions>,
-      {
-        wrapper: DialogActionsWrapper,
-      }
-    );
-    await act(async () => {});
-    await waitFor(() => {
-      expect(getByText('Actions')).toBeVisible();
-    });
-    expect(getByText('Actions')).toBeVisible();
-  });
-
-  it('supports custom className', async () => {
-    const { getByText } = render(
-      <DialogContentActions className="test-class">
-        Actions
-      </DialogContentActions>,
-      { wrapper: DialogActionsWrapper }
-    );
-
-    await act(async () => {});
-    await waitFor(() => {
-      expect(getByText('Actions')).toBeVisible();
-    });
-
-    const component = getByText('Actions');
-    expect(component).toHaveAttribute(
-      'class',
-      expect.stringContaining(DialogContentActions.className!)
-    );
-    expect(component).toHaveAttribute(
-      'class',
-      expect.stringContaining('test-class')
-    );
-  });
-
-  it('supports custom data attributes', async () => {
-    const { getByText } = render(
-      <DialogContentActions data-testid="test">Actions</DialogContentActions>,
-      { wrapper: DialogActionsWrapper }
-    );
-
-    await act(async () => {});
-    await waitFor(() => {
-      expect(getByText('Actions')).toBeVisible();
-    });
-
-    const component = getByText('Actions');
-    expect(component).toHaveAttribute('data-testid', 'test');
-  });
-});

package/src/components/dialog-content-actions/DialogContentActions.tsx

@@ -1,40 +0,0 @@
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-import { useMergeRefs } from '@floating-ui/react';
-
-import { Comp } from '@redsift/design-system';
-import { StyledDialogContentActions } from './styles';
-import { DialogContentActionsProps } from './types';
-import { useDialogContext } from '../dialog';
-
-const COMPONENT_NAME = 'DialogContentActions';
-const CLASSNAME = 'redsift-dialog-content-actions';
-const DEFAULT_PROPS: Partial<DialogContentActionsProps> = {
-  flexDirection: 'row',
-};
-
-/**
- * The DialogContentActions component.
- */
-export const DialogContentActions: Comp<
-  DialogContentActionsProps,
-  HTMLDivElement
-> = forwardRef((props, ref) => {
-  const { children, className, ...forwardedProps } = props;
-
-  const { actionsRef, initialFocus } = useDialogContext();
-
-  return (
-    <StyledDialogContentActions
-      {...forwardedProps}
-      className={classNames(DialogContentActions.className, className)}
-      ref={useMergeRefs([ref, actionsRef])}
-      tabIndex={initialFocus === 'actions' ? -1 : undefined}
-    >
-      {children}
-    </StyledDialogContentActions>
-  );
-});
-DialogContentActions.className = CLASSNAME;
-DialogContentActions.defaultProps = DEFAULT_PROPS;
-DialogContentActions.displayName = COMPONENT_NAME;

package/src/components/dialog-content-actions/index.ts

@@ -1,2 +0,0 @@
-export * from './types';
-export * from './DialogContentActions';