@redsift/popovers 9.2.3 → 9.2.4

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';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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