@redsift/popovers 9.2.3 → 9.2.4

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

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

@@ -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,70 +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,
-  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

@@ -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,66 +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 {
-  /** 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

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

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

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

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

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

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