@redsift/popovers 8.0.1 → 8.0.3

package/src/components/popover/Popover.test.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import { Button } from '@redsift/design-system';
-import { PopoverContent } from '../popover-content';
-import { PopoverTrigger } from '../popover-trigger';
-import { Popover } from '.';
-
-describe('Popover', () => {
-  const onOpenSpy = jest.fn();
-  const realError = console.error;
-
-  beforeEach(() => {
-    console.error = jest.fn();
-  });
-
-  afterEach(() => {
-    onOpenSpy.mockClear();
-    console.error = realError;
-  });
-
-  it.each`
-    Name                | Component         | props
-    ${'PopoverTrigger'} | ${PopoverTrigger} | ${{}}
-    ${'PopoverContent'} | ${PopoverContent} | ${{}}
-  `(
-    '$Name should throw error when not wrapped inside `Popover`',
-    function ({ Component, props }) {
-      expect(() => render(<Component {...props} />)).toThrow(
-        'Popover components must be wrapped in <Popover />'
-      );
-    }
-  );
-
-  it.each`
-    Name                      | Component  | props
-    ${'Controlled Popover'}   | ${Popover} | ${{ onOpen: onOpenSpy, isOpen: false }}
-    ${'Uncontrolled Popover'} | ${Popover} | ${{ onOpen: onOpenSpy, defaultOpen: false }}
-  `(
-    '$Name can be closed by default and then open',
-    function ({ Name, Component, props }) {
-      const { getByText } = render(
-        <Component {...props}>
-          <PopoverTrigger>
-            <Button variant="secondary">Trigger</Button>
-          </PopoverTrigger>
-          <PopoverContent>Content</PopoverContent>
-        </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')) {
-        expect(getByText('Content')).toBeVisible();
-
-        fireEvent.click(triggerButton);
-
-        expect(screen.queryByText('Content')).not.toBeInTheDocument();
-        expect(onOpenSpy).toHaveBeenCalled();
-      }
-    }
-  );
-
-  it.each`
-    Name                      | Component  | props
-    ${'Controlled Popover'}   | ${Popover} | ${{ onOpen: onOpenSpy, isOpen: true }}
-    ${'Uncontrolled Popover'} | ${Popover} | ${{ onOpen: onOpenSpy, defaultOpen: true }}
-  `(
-    '$Name can be open by default and then closed',
-    function ({ Name, Component, props }) {
-      const { getByText } = render(
-        <Component {...props}>
-          <PopoverTrigger>
-            <Button variant="secondary">Trigger</Button>
-          </PopoverTrigger>
-          <PopoverContent>Content</PopoverContent>
-        </Component>
-      );
-
-      expect(getByText('Content')).toBeVisible();
-      expect(onOpenSpy).not.toHaveBeenCalled();
-
-      const triggerButton = getByText('Trigger');
-      fireEvent.click(triggerButton);
-
-      expect(onOpenSpy).toHaveBeenCalled();
-      if (Name.includes('Uncontrolled')) {
-        expect(screen.queryByText('Content')).not.toBeInTheDocument();
-
-        fireEvent.click(triggerButton);
-
-        expect(getByText('Content')).toBeVisible();
-        expect(onOpenSpy).toHaveBeenCalled();
-      }
-    }
-  );
-});

package/src/components/popover/Popover.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { partitionComponents, isComponent } from '@redsift/design-system';
-import { PopoverContent } from '../popover-content';
-import { PopoverTrigger } from '../popover-trigger';
-
-import { PopoverContext } from './context';
-import { PopoverPlacement, PopoverProps } from './types';
-import { usePopover } from './usePopover';
-
-const COMPONENT_NAME = 'Popover';
-const CLASSNAME = 'redsift-popover';
-const DEFAULT_PROPS: Partial<PopoverProps> = {
-  isModal: false,
-  placement: PopoverPlacement.bottom,
-};
-
-/**
- * The Popover component.
- */
-export const BasePopover: React.FC<PopoverProps> & {
-  displayName?: string;
-  className?: string;
-} = (props) => {
-  const { children, defaultOpen, placement, isModal, isOpen, onOpen } = props;
-
-  const popover = usePopover({
-    defaultOpen,
-    placement,
-    isModal,
-    isOpen,
-    onOpen,
-  });
-
-  const [[trigger], [content]] = partitionComponents(
-    React.Children.toArray(children),
-    [isComponent('PopoverTrigger'), isComponent('PopoverContent')]
-  );
-
-  return (
-    <PopoverContext.Provider value={popover}>
-      {trigger}
-      {content}
-    </PopoverContext.Provider>
-  );
-};
-BasePopover.className = CLASSNAME;
-BasePopover.defaultProps = DEFAULT_PROPS;
-BasePopover.displayName = COMPONENT_NAME;
-
-export const Popover = Object.assign(BasePopover, {
-  Trigger: PopoverTrigger,
-  Content: PopoverContent,
-});

package/src/components/popover/context.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { PopoverState } from './types';
-
-export const PopoverContext = React.createContext<PopoverState | null>(null);

package/src/components/popover/index.ts

@@ -1,5 +0,0 @@
-export * from './context';
-export * from './types';
-export * from './Popover';
-export * from './usePopover';
-export * from './usePopoverContext';

package/src/components/popover/types.ts

@@ -1,53 +0,0 @@
-import { ReactNode } from 'react';
-import { ValueOf } from '@redsift/design-system';
-import { usePopover } from './usePopover';
-
-/**
- * Context props.
- */
-export type PopoverState = ReturnType<typeof usePopover> | null;
-
-/**
- * Component variant.
- */
-export const PopoverPlacement = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-  'top-start': 'top-start',
-  'top-end': 'top-end',
-  'right-start': 'right-start',
-  'right-end': 'right-end',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-  'left-start': 'left-start',
-  'left-end': 'left-end',
-} as const;
-export type PopoverPlacement = ValueOf<typeof PopoverPlacement>;
-
-/**
- * Component props.
- */
-export interface PopoverProps {
-  /** Children. Can only be PopoverTrigger and PopoverContent. */
-  children: ReactNode;
-  /**
-   * Default open status.
-   * Used for uncontrolled version.
-   */
-  defaultOpen?: boolean;
-  /** Default placement of the popover. */
-  placement?: PopoverPlacement;
-  /** Whether the popover is a modal or not. */
-  isModal?: boolean;
-  /**
-   * Whether the component is opened or not.
-   * Used for controlled version.
-   */
-  isOpen?: boolean;
-  /** Method to handle component change. */
-  onOpen?: (open: boolean) => void;
-}
-
-export type StyledPopoverProps = PopoverProps;

package/src/components/popover/usePopover.tsx

@@ -1,70 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  useFloating,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  useDismiss,
-  useRole,
-  useInteractions,
-} from '@floating-ui/react';
-import { PopoverProps } from './types';
-
-export function usePopover({
-  defaultOpen,
-  placement,
-  isModal,
-  isOpen: propsIsOpen,
-  onOpen,
-}: Omit<PopoverProps, 'children'>) {
-  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({
-    placement,
-    open: isOpen,
-    onOpenChange: handleOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      offset(2),
-      flip({
-        fallbackAxisSideDirection: 'end',
-      }),
-      shift({ padding: 2 }),
-    ],
-  });
-
-  const context = data.context;
-
-  const dismiss = useDismiss(context);
-  const role = useRole(context);
-
-  const interactions = useInteractions([dismiss, role]);
-
-  return React.useMemo(
-    () => ({
-      isOpen,
-      handleOpen,
-      ...interactions,
-      ...data,
-      isModal,
-    }),
-    [isOpen, handleOpen, interactions, data, isModal]
-  );
-}

package/src/components/popover/usePopoverContext.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { PopoverContext } from './context';
-
-export const usePopoverContext = () => {
-  const context = React.useContext(PopoverContext);
-
-  if (context == null) {
-    throw new Error('Popover components must be wrapped in <Popover />');
-  }
-
-  return context;
-};

package/src/components/popover-content/PopoverContent.tsx

@@ -1,61 +0,0 @@
-import React, { forwardRef } from 'react';
-import {
-  useMergeRefs,
-  FloatingPortal,
-  FloatingFocusManager,
-} from '@floating-ui/react';
-
-import { Comp } from '@redsift/design-system';
-import { PopoverContentProps } from './types';
-import { usePopoverContext } from '../popover';
-import { StyledPopoverContent } from './styles';
-import classNames from 'classnames';
-
-const COMPONENT_NAME = 'PopoverContent';
-const CLASSNAME = 'redsift-popover-content';
-const DEFAULT_PROPS: Partial<PopoverContentProps> = {};
-
-/**
- * The PopoverContent component.
- */
-export const PopoverContent: Comp<PopoverContentProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    const { children, className, style } = props;
-    const {
-      context: floatingContext,
-      getFloatingProps,
-      isModal,
-      isOpen,
-      refs,
-      strategy,
-      x,
-      y,
-    } = usePopoverContext();
-    const popoverRef = useMergeRefs([refs.setFloating, ref]);
-
-    return (
-      <FloatingPortal id="redsift-app-container">
-        {isOpen && (
-          <FloatingFocusManager context={floatingContext} modal={isModal}>
-            <StyledPopoverContent
-              className={classNames(PopoverContent.className, className)}
-              ref={popoverRef}
-              style={{
-                position: strategy,
-                top: y ?? 0,
-                left: x ?? 0,
-                width: 'fit-content',
-                ...style,
-              }}
-              {...getFloatingProps(props)}
-            >
-              {children}
-            </StyledPopoverContent>
-          </FloatingFocusManager>
-        )}
-      </FloatingPortal>
-    );
-  });
-PopoverContent.className = CLASSNAME;
-PopoverContent.defaultProps = DEFAULT_PROPS;
-PopoverContent.displayName = COMPONENT_NAME;

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

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

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

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-import { baseContainer } from '@redsift/design-system';
-import { StyledPopoverContentProps } from './types';
-
-/**
- * Component style.
- */
-export const StyledPopoverContent = styled.div<StyledPopoverContentProps>`
-  ${baseContainer}
-  align-items: center;
-  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));
-  font-family: var(--redsift-typography-popover-font-family);
-  font-size: var(--redsift-typography-popover-font-size);
-  font-weight: var(--redsift-typography-popover-font-weight);
-  line-height: var(--redsift-typography-popover-line-height);
-  max-width: calc(100vw - 48px);
-  z-index: var(--redsift-layout-z-index-popover);
-
-  &:focus-visible {
-    outline: none;
-  }
-`;

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

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

package/src/components/popover-trigger/PopoverTrigger.tsx

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

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

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

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

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

package/src/components/toast/Toast.stories.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-
-import { Toast, ToastVariant } from '.';
-import { Flexbox } from '@redsift/design-system';
-import { Button, ButtonColor } from '@redsift/design-system';
-
-export default {
-  title: 'Popovers/Toast/Toast',
-  component: Toast,
-};
-
-export const Simple = () => (
-  <Toast>Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.</Toast>
-);
-
-export const WithTitle = () => (
-  <Toast title="Title">
-    Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
-  </Toast>
-);
-
-export const AllVariants = () => (
-  <Flexbox flexDirection="column">
-    {Object.keys(ToastVariant).map((variant) => (
-      <Toast
-        key={variant}
-        variant={variant as ToastVariant}
-        title={`${variant[0].toUpperCase()}${variant.slice(1, variant.length)}`}
-      >
-        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
-      </Toast>
-    ))}
-  </Flexbox>
-);
-
-export const WithoutCloseButton = () => (
-  <Toast title="Without close button" closeButton={false}>
-    Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
-  </Toast>
-);
-
-export const WithCustomCloseButton = () => (
-  <Flexbox flexDirection="column">
-    {Object.keys(ToastVariant).map((variant) => (
-      <Toast
-        key={variant}
-        variant={variant as ToastVariant}
-        title={`${variant[0].toUpperCase()}${variant.slice(1, variant.length)}`}
-        closeButton={<Button>Click me</Button>}
-      >
-        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
-      </Toast>
-    ))}
-  </Flexbox>
-);
-
-export const WithComponents = () => (
-  <Flexbox flexDirection="column">
-    {Object.keys(ToastVariant).map((variant) => (
-      <Toast
-        key={variant}
-        variant={variant as ToastVariant}
-        title={`${variant[0].toUpperCase()}${variant.slice(1, variant.length)}`}
-      >
-        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
-        <Button
-          color={variant === 'loading' ? 'default' : (variant as ButtonColor)}
-          marginTop="8px"
-        >
-          Click me
-        </Button>
-      </Toast>
-    ))}
-  </Flexbox>
-);

package/src/components/toast/Toast.test.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-
-import { Toast } from '.';
-import { Button } from '@redsift/design-system';
-
-describe('Toast', () => {
-  const onClickSpy = jest.fn();
-  const onClickSpy2 = jest.fn();
-
-  afterEach(() => {
-    onClickSpy.mockClear();
-    onClickSpy2.mockClear();
-  });
-
-  it('handles default', () => {
-    const { getByText } = render(<Toast>Content</Toast>);
-    expect(getByText('Content')).toBeVisible();
-  });
-
-  it('supports custom className', () => {
-    const tree = render(<Toast className="test-class">Content</Toast>);
-    const component = tree.asFragment().firstChild;
-    expect(component).toHaveAttribute(
-      'class',
-      expect.stringContaining(Toast.className!)
-    );
-    expect(component).toHaveAttribute(
-      'class',
-      expect.stringContaining('test-class')
-    );
-  });
-
-  it('supports custom data attributes', () => {
-    const tree = render(<Toast data-testid="test">Content</Toast>);
-    const component = tree.asFragment().firstChild;
-    expect(component).toHaveAttribute('data-testid', 'test');
-  });
-
-  it('supports custom close button with onClick', () => {
-    const { getByRole } = render(
-      <Toast closeButton={<Button onClick={onClickSpy}>Click me</Button>}>
-        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
-      </Toast>
-    );
-
-    const button = getByRole('button');
-    fireEvent.click(button);
-    expect(onClickSpy).toHaveBeenCalled();
-  });
-
-  it('supports custom close button without onClick', () => {
-    const { getByRole } = render(
-      <Toast closeToast={onClickSpy2} closeButton={<Button>Click me</Button>}>
-        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
-      </Toast>
-    );
-
-    const button = getByRole('button');
-    fireEvent.click(button);
-    expect(onClickSpy2).toHaveBeenCalled();
-  });
-});