@redsift/popovers 9.2.3-patch → 9.2.3

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;
+};

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

@@ -0,0 +1,348 @@
+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 Xlarge = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen size="xlarge">
+      <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 FreeSize = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen size={{ width: '900px' }}>
+      <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

@@ -0,0 +1,133 @@
+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/i18n';
+import intlMessages from './intl';
+
+import { Comp, IconButton, isComponent, partitionComponents } from '@redsift/design-system';
+import { DialogContentProps } from './types';
+import { DialogSize, 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> = {};
+
+export const sizeToDimension = (size: DialogSize | { width: string }): { width: string } => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+
+  switch (size) {
+    case DialogSize.small:
+      return { width: '540px' };
+    case DialogSize.large:
+      return { width: '800px' };
+    case DialogSize.xlarge:
+      return { width: '80vw' };
+    case DialogSize.medium:
+    default:
+      return { width: '700px' };
+  }
+};
+
+/**
+ * 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 { width } = sizeToDimension(size!);
+
+  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}
+              $width={width!}
+            >
+              {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

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+import { FloatingOverlay } from '@floating-ui/react';
+import styled, { css } from 'styled-components';
+import { StyledDialogContentProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledDialogContent = styled.div<StyledDialogContentProps>`
+  background-color: var(--redsift-color-neutral-white);
+  border-radius: 4px;
+  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);
+
+  ${({ $width }) => css`
+    width: ${$width};
+  `}
+
+  &: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

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