@redsift/popovers 9.2.3-patch → 9.2.3

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

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Flexbox, Button, Text } from '@redsift/design-system';
+import { Popover, PopoverPlacement } from '.';
+
+export default {
+  title: 'Popovers/Popover',
+  component: Popover,
+};
+
+export const Uncontrolled = () => (
+  <Popover>
+    <Popover.Trigger>
+      <Button variant="secondary">Button</Button>
+    </Popover.Trigger>
+    <Popover.Content>
+      <Text margin="16px">
+        Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps. Liquorice marzipan jelly-o carrot cake icing
+        croissant carrot cake. Tart soufflé sweet roll halvah croissant wafer cotton candy. Candy halvah marzipan bear
+        claw donut.
+      </Text>
+    </Popover.Content>
+  </Popover>
+);
+
+export const Controlled = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setIsOpen(!isOpen)}>
+        External trigger
+      </Button>
+      <Popover isOpen={isOpen} onOpen={setIsOpen}>
+        <Popover.Trigger>
+          <Button variant="secondary">Trigger</Button>
+        </Popover.Trigger>
+        <Popover.Content>
+          <Text margin="16px">
+            Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps. Liquorice marzipan jelly-o carrot cake
+            icing croissant carrot cake. Tart soufflé sweet roll halvah croissant wafer cotton candy. Candy halvah
+            marzipan bear claw donut.
+          </Text>
+        </Popover.Content>
+      </Popover>
+    </>
+  );
+};
+
+export const AllPlacements = () => (
+  <Flexbox flexDirection="column" flexWrap="wrap" gap="32px" padding="64px" style={{ backgroundColor: '#EFEFEF' }}>
+    {['top', 'left', 'right', 'bottom'].map((side) => {
+      return (
+        <Flexbox key={side} flexDirection="row" flexWrap="wrap" justifyContent="space-evenly" alignItems="center">
+          {['start', '', 'end'].map((alignment) => {
+            return (
+              <div key={`${side}${alignment ? '-' : ''}${alignment}`} style={{ margin: '1em' }}>
+                <Popover isOpen placement={`${side}${alignment ? '-' : ''}${alignment}` as PopoverPlacement}>
+                  <Popover.Trigger>
+                    <Button variant="secondary">Button</Button>
+                  </Popover.Trigger>
+                  <Popover.Content>
+                    <Text margin="16px">{`Popover [${side}${alignment ? '-' : ''}${alignment}]`}</Text>
+                  </Popover.Content>
+                </Popover>
+              </div>
+            );
+          })}
+        </Flexbox>
+      );
+    })}
+  </Flexbox>
+);
+
+export const TriggerIsNotAButton = () => (
+  <Popover>
+    <Popover.Trigger>
+      This text has a popover but this will never be displayed because the trigger is not a button.
+    </Popover.Trigger>
+    <Popover.Content>
+      <Text margin="16px">
+        Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps. Liquorice marzipan jelly-o carrot cake icing
+        croissant carrot cake. Tart soufflé sweet roll halvah croissant wafer cotton candy. Candy halvah marzipan bear
+        claw donut.
+      </Text>
+    </Popover.Content>
+  </Popover>
+);
+
+export const EmptyPopover = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Popover>
+      <Popover.Trigger>
+        <Button variant="secondary">Button</Button>
+      </Popover.Trigger>
+    </Popover>
+  </Flexbox>
+);
+
+export const PopoverOnDisabledButton = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Popover>
+      <Popover.Trigger>
+        <Button variant="secondary" isDisabled>
+          Disabled
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content>
+        <Text margin="16px">
+          Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps. Liquorice marzipan jelly-o carrot cake icing
+          croissant carrot cake. Tart soufflé sweet roll halvah croissant wafer cotton candy. Candy halvah marzipan bear
+          claw donut.
+        </Text>
+      </Popover.Content>
+    </Popover>
+  </Flexbox>
+);

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

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

@@ -0,0 +1,70 @@
+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,
+  role: 'dialog',
+};
+
+/**
+ * The Popover component.
+ */
+export const BasePopover: React.FC<PopoverProps> & {
+  displayName?: string;
+  className?: string;
+} = (props) => {
+  const {
+    children,
+    defaultOpen,
+    isModal,
+    isOpen,
+    maxWidth,
+    minWidth,
+    onOpen,
+    overrideDisplayName,
+    placement,
+    role,
+    width,
+  } = props;
+
+  const popover = usePopover({
+    defaultOpen,
+    isModal,
+    isOpen,
+    maxWidth,
+    minWidth,
+    onOpen,
+    placement,
+    role,
+    width,
+  });
+
+  const [[trigger], [content]] = partitionComponents(React.Children.toArray(children), [
+    isComponent(overrideDisplayName?.trigger ?? 'PopoverTrigger'),
+    isComponent(overrideDisplayName?.content ?? '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

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

package/src/components/popover/index.ts

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

package/src/components/popover/types.ts

@@ -0,0 +1,66 @@
+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 {
+  /** Popover content width. Can be either based on the trigger, the available space or define with a number of pixels. */
+  width?: 'trigger-width' | 'available-width' | number;
+  /** Popover content min width. Can be either based on the trigger, the available space or define with a number of pixels. */
+  minWidth?: 'trigger-width' | 'available-width' | number;
+  /** Popover content max width. Can be either based on the trigger, the available space or define with a number of pixels. */
+  maxWidth?: 'trigger-width' | 'available-width' | number;
+  /** 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;
+  /** Allows other components to be treated as trigger and content. */
+  overrideDisplayName?: {
+    content?: string;
+    trigger?: string;
+  };
+  /** Role to apply to the popover. */
+  role?: 'dialog' | 'menu' | 'listbox';
+}
+
+export type StyledPopoverProps = PopoverProps;

package/src/components/popover/usePopover.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  size,
+  useDismiss,
+  useRole,
+  useInteractions,
+} from '@floating-ui/react';
+import { PopoverProps } from './types';
+
+export function usePopover({
+  defaultOpen,
+  isModal,
+  isOpen: propsIsOpen,
+  maxWidth,
+  minWidth,
+  onOpen,
+  placement,
+  role: propsRole,
+  width,
+}: 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 middleware = [
+    offset(2),
+    flip({
+      fallbackAxisSideDirection: 'end',
+    }),
+    shift({ padding: 2 }),
+  ];
+
+  middleware.push(
+    size({
+      apply({ availableHeight, availableWidth, rects, elements }) {
+        Object.assign(elements.floating.style, {
+          maxHeight: `${availableHeight}px`,
+          ...(minWidth !== undefined && {
+            minWidth: `${
+              minWidth === 'available-width'
+                ? availableWidth
+                : minWidth === 'trigger-width'
+                ? rects.reference.width
+                : minWidth
+            }px`,
+          }),
+          ...(width !== undefined && {
+            width: `${
+              width === 'available-width' ? availableWidth : width === 'trigger-width' ? rects.reference.width : width
+            }px`,
+          }),
+          ...(maxWidth !== undefined && {
+            maxWidth: `${
+              maxWidth === 'available-width'
+                ? availableWidth
+                : maxWidth === 'trigger-width'
+                ? rects.reference.width
+                : maxWidth
+            }px`,
+          }),
+        });
+      },
+    })
+  );
+
+  const data = useFloating({
+    placement,
+    open: isOpen,
+    onOpenChange: handleOpen,
+    whileElementsMounted: autoUpdate,
+    middleware,
+  });
+
+  const context = data.context;
+
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: propsRole });
+
+  const interactions = useInteractions([dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      isOpen,
+      handleOpen,
+      ...interactions,
+      ...data,
+      isModal,
+    }),
+    [isOpen, handleOpen, interactions, data, isModal]
+  );
+}

package/src/components/popover/usePopoverContext.tsx

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

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+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';
+
+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, ...forwardedProps } = 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
+            style={{
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              width: 'fit-content',
+              ...style,
+            }}
+            {...getFloatingProps(props)}
+            className={classNames(PopoverContent.className, className)}
+            {...forwardedProps}
+            ref={popoverRef}
+          >
+            {children}
+          </StyledPopoverContent>
+        </FloatingFocusManager>
+      )}
+    </FloatingPortal>
+  );
+});
+PopoverContent.className = CLASSNAME;
+PopoverContent.defaultProps = DEFAULT_PROPS;
+PopoverContent.displayName = COMPONENT_NAME;

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

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

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

@@ -0,0 +1,95 @@
+import styled, { css } from 'styled-components';
+import { StyledPopoverContentProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledPopoverContent = styled.div<StyledPopoverContentProps>`
+  ${({ display }) => (display ? `display: ${display};` : 'display: flex;')}
+  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: 20px;
+  color: var(--redsift-color-neutral-black);
+
+  ${({ padding, paddingBottom, paddingLeft, paddingRight, paddingTop }) =>
+    css`
+      ${padding ? `padding: ${padding};` : ''}
+      ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}
+      ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}
+      ${paddingRight ? `padding-right: ${paddingRight};` : ''}
+      ${paddingTop ? `padding-top: ${paddingTop};` : ''}
+    `}
+  ${({ margin, marginBottom, marginLeft, marginRight, marginTop }) =>
+    css`
+      ${margin ? `margin: ${margin};` : ''}
+      ${marginBottom ? `margin-bottom: ${marginBottom};` : ''}
+        ${marginLeft ? `margin-left: ${marginLeft};` : ''}
+        ${marginRight ? `margin-right: ${marginRight};` : ''}
+        ${marginTop ? `margin-top: ${marginTop};` : ''}
+    `}
+  ${({ height, maxHeight, maxWidth, minHeight, minWidth, width }) =>
+    css`
+      ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
+      ${maxHeight ? `max-height: ${maxHeight};` : ''}
+          ${maxWidth ? `max-width: ${maxWidth};` : ''}
+          ${minHeight ? `min-height: ${minHeight};` : ''}
+          ${minWidth ? `min-width: ${minWidth};` : ''}
+          ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
+    `}
+  ${({ position, top, bottom, left, right, zIndex }) =>
+    css`
+      ${position ? `position: ${position};` : ''}
+      ${top ? `top: ${top};` : ''}
+            ${bottom ? `bottom: ${bottom};` : ''}
+            ${left ? `left: ${left};` : ''}
+            ${right ? `right: ${right};` : ''}
+            ${zIndex ? `z-index: ${zIndex};` : ''}
+    `}
+  ${({
+    alignContent,
+    alignItems,
+    gap,
+    gridAutoColumns,
+    gridAutoRows,
+    gridTemplateAreas,
+    gridTemplateColumns,
+    gridTemplateRows,
+    justifyContent,
+    justifyItems,
+  }) =>
+    css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+              ${gap ? `gap: ${gap};` : ''}
+              ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}
+              ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}
+              ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}
+              ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}
+              ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}
+              ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+              ${justifyItems ? `justify-items: ${justifyItems};` : ''}
+    `}
+  ${({ alignContent, alignItems, flexDirection, flexWrap, gap, justifyContent }) =>
+    css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${flexDirection ? `flex-direction: ${flexDirection};` : ''}
+      ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}
+      gap: ${gap};
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+    `}
+
+  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);
+  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
+  max-width: calc(100vw - 48px);
+  z-index: var(--redsift-layout-z-index-popover);
+  overflow: auto;
+
+  &:focus-visible {
+    outline: none;
+  }
+`;

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

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