@redsift/popovers 9.2.3-patch → 9.2.3

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

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

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

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

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { baseContainer } from '@redsift/design-system';
+import { StyledDialogContentActionsProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledDialogContentActions = styled.div<StyledDialogContentActionsProps>`
+  display: flex;
+  ${baseContainer}
+
+  margin-top: 8px;
+  margin-bottom: 8px;
+
+  &:focus-visible {
+    outline: none;
+  }
+`;

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

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { ContainerProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface DialogContentActionsProps
+  extends ComponentProps<'div'>,
+    ContainerProps {}
+
+export type StyledDialogContentActionsProps = DialogContentActionsProps;

package/src/components/dialog-content-body/DialogContentBody.test.tsx

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

package/src/components/dialog-content-body/DialogContentBody.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { Comp, useBoundingClientRect } from '@redsift/design-system';
+import { StyledDialogContentBody } from './styles';
+import { DialogContentBodyProps } from './types';
+import { useDialogContext } from '../dialog';
+
+const COMPONENT_NAME = 'DialogContentBody';
+const CLASSNAME = 'redsift-dialog-content-body';
+const DEFAULT_PROPS: Partial<DialogContentBodyProps> = {};
+
+/**
+ * The DialogContentBody component.
+ */
+export const DialogContentBody: Comp<DialogContentBodyProps, HTMLDivElement> =
+  forwardRef((props, ref) => {
+    const { children, className, ...forwardedProps } = props;
+
+    const { actionsRef, bodyRef, hasCloseButton, headerRef, initialFocus } =
+      useDialogContext();
+
+    const { height: headerHeight = 0 } = useBoundingClientRect(
+      headerRef as any,
+      [children, headerRef]
+    );
+    const { height: actionsHeight = 0 } = useBoundingClientRect(
+      actionsRef as any,
+      [children, actionsRef]
+    );
+
+    /* istanbul ignore next */
+    return (
+      <StyledDialogContentBody
+        {...forwardedProps}
+        className={classNames(DialogContentBody.className, className)}
+        ref={useMergeRefs([ref, bodyRef])}
+        tabIndex={initialFocus === 'body' ? -1 : undefined}
+        $marginTop={Math.max(headerHeight, hasCloseButton ? 40 : 0) + 80}
+        $marginBottom={(actionsHeight === 0 ? 0 : actionsHeight + 16) + 80}
+      >
+        {children}
+      </StyledDialogContentBody>
+    );
+  });
+DialogContentBody.className = CLASSNAME;
+DialogContentBody.defaultProps = DEFAULT_PROPS;
+DialogContentBody.displayName = COMPONENT_NAME;

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

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

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

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components';
+import { baseContainer } from '@redsift/design-system';
+import { StyledDialogContentBodyProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledDialogContentBody = styled.div<StyledDialogContentBodyProps>`
+  ${baseContainer}
+
+  overflow-y: auto;
+  ${({ $marginTop, $marginBottom }) => css`
+    max-height: calc(100vh - ${$marginTop + $marginBottom}px);
+  `}
+
+  color: var(--redsift-color-neutral-darkgrey);
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  padding: 0 24px;
+  margin: 16px -24px;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  scrollbar-color: var(--redsift-color-neutral-midgrey) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    block-size: 9px;
+    inline-size: 9px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: var(--redsift-color-neutral-midgrey);
+    border-radius: 0px;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal,
+  &::-webkit-scrollbar-thumb:vertical {
+    &:hover {
+      background-color: var(--redsift-color-neutral-darkgrey);
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    visibility: hidden;
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import { ContainerProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface DialogContentBodyProps
+  extends ComponentProps<'div'>,
+    ContainerProps {}
+
+export type StyledDialogContentBodyProps = DialogContentBodyProps & {
+  $marginTop: number;
+  $marginBottom: number;
+};

package/src/components/dialog-content-header/DialogContentHeader.test.tsx

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

package/src/components/dialog-content-header/DialogContentHeader.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { Icon, Heading, Comp, useId } from '@redsift/design-system';
+import { StyledDialogContentHeader } from './styles';
+import { DialogContentHeaderProps } from './types';
+import { useDialogContext } from '../dialog';
+
+const COMPONENT_NAME = 'DialogContentHeader';
+const CLASSNAME = 'redsift-dialog-content-header';
+const DEFAULT_PROPS: Partial<DialogContentHeaderProps> = {};
+
+/**
+ * The DialogContentHeader component.
+ */
+export const DialogContentHeader: Comp<DialogContentHeaderProps, HTMLDivElement> = forwardRef((props, ref) => {
+  const { children, className, header, headingProps, icon, subheader, ...forwardedProps } = props;
+
+  const { setLabelId, setDescriptionId, headerRef, initialFocus } = useDialogContext();
+  const [labelId] = useId();
+  const [descriptionId] = useId();
+
+  // Only sets `aria-labelledby` on the Dialog root element
+  // if this component is mounted inside it.
+  React.useLayoutEffect(() => {
+    setLabelId(labelId);
+    return () => setLabelId(undefined);
+  }, [labelId, setLabelId]);
+
+  // Only sets `aria-describedby` on the Dialog root element
+  // if this component is mounted inside it.
+  React.useLayoutEffect(() => {
+    setDescriptionId(descriptionId);
+    return () => setDescriptionId(undefined);
+  }, [descriptionId, setDescriptionId]);
+
+  return (
+    <StyledDialogContentHeader
+      {...forwardedProps}
+      className={classNames(DialogContentHeader.className, className)}
+      ref={useMergeRefs([ref, headerRef])}
+      tabIndex={initialFocus === 'header' ? -1 : undefined}
+    >
+      {subheader ? <div className={`${DialogContentHeader.className}__subheader`}>{subheader}</div> : null}
+      {header ? (
+        <Heading
+          as="h2"
+          color="black"
+          className={`${DialogContentHeader.className}__header`}
+          id={labelId}
+          variant="h2"
+          {...headingProps}
+        >
+          {icon ? <Icon icon={icon} aria-hidden="true" /> : null}
+          {header}
+        </Heading>
+      ) : null}
+      {children ? <div id={descriptionId}>{children}</div> : null}
+    </StyledDialogContentHeader>
+  );
+});
+DialogContentHeader.className = CLASSNAME;
+DialogContentHeader.defaultProps = DEFAULT_PROPS;
+DialogContentHeader.displayName = COMPONENT_NAME;

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

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

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

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { StyledDialogContentHeaderProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledDialogContentHeader = styled.div<StyledDialogContentHeaderProps>`
+  color: var(--redsift-color-neutral-black);
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  .redsift-dialog-content-header__header {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    padding: 10px 0px;
+    margin: 0px;
+
+    .redsift-icon {
+      color: var(--redsift-color-neutral-black);
+      padding-right: 8px;
+      font-size: 30px;
+      line-height: 30px;
+      height: 30px;
+    }
+  }
+
+  .redsift-dialog-content-header__subheader {
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+  }
+`;

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

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+import { HeadingProps, IconProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface DialogContentHeaderProps extends ComponentProps<'div'> {
+  /** Header. */
+  header?: string;
+  /** Heading props allowing to override the component rendered by the heading without changing its style. */
+  headingProps?: Pick<HeadingProps, 'as' | 'noWrap'>;
+  /** Subheader */
+  subheader?: string;
+  /**
+   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+   * Can also be a ReactElement.
+   */
+  icon?: IconProps['icon'];
+}
+
+export type StyledDialogContentHeaderProps = DialogContentHeaderProps;

package/src/components/dialog-trigger/DialogTrigger.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, ReactElement } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { Comp, isComponent } from '@redsift/design-system';
+import { useDialogContext } from '../dialog';
+import { DialogTriggerProps } from './types';
+
+const COMPONENT_NAME = 'DialogTrigger';
+const CLASSNAME = 'redsift-dialog-trigger';
+const DEFAULT_PROPS: Partial<DialogTriggerProps> = {};
+
+/**
+ * The DialogTrigger component.
+ */
+export const DialogTrigger: Comp<DialogTriggerProps, HTMLButtonElement> = forwardRef((props, ref) => {
+  const { children } = props;
+
+  const { getReferenceProps, isOpen, handleOpen, refs } = useDialogContext();
+  const childrenRef = (children as any).ref;
+  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+
+  if (
+    isComponent('Button')(children) ||
+    isComponent('IconButton')(children) ||
+    isComponent('LinkButton')(children) ||
+    isComponent('Checkbox')(children)
+  ) {
+    return React.cloneElement(children as ReactElement, {
+      ...getReferenceProps({
+        ref: triggerRef,
+        ...props,
+        ...children.props,
+        children: children.props.children ?? '',
+      }),
+      onClick: () => handleOpen(!isOpen),
+      isActive: isOpen,
+    });
+  }
+
+  return <>{children}</>;
+});
+DialogTrigger.className = CLASSNAME;
+DialogTrigger.defaultProps = DEFAULT_PROPS;
+DialogTrigger.displayName = COMPONENT_NAME;

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

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

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

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { StylingProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface DialogTriggerProps
+  extends Omit<ComponentProps<'button'>, 'onClick'>,
+    StylingProps {}