@redsift/popovers 8.0.1 → 8.0.3

package/src/components/tooltip/Tooltip.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { partitionComponents, isComponent } from '@redsift/design-system';
-import { TooltipContent } from '../tooltip-content';
-import { TooltipTrigger } from '../tooltip-trigger';
-
-import { TooltipContext } from './context';
-import { TooltipPlacement, TooltipProps } from './types';
-import { useTooltip } from './useTooltip';
-
-const COMPONENT_NAME = 'Tooltip';
-const CLASSNAME = 'redsift-tooltip';
-const DEFAULT_PROPS: Partial<TooltipProps> = {
-  delay: 500,
-  placement: TooltipPlacement.top,
-};
-
-/**
- * The Tooltip component.
- */
-export const BaseTooltip: React.FC<TooltipProps> & {
-  displayName?: string;
-  className?: string;
-} = (props) => {
-  const { children, defaultOpen, delay, isOpen, onOpen, placement, tooltipId } =
-    props;
-
-  const tooltip = useTooltip({
-    defaultOpen,
-    delay,
-    placement,
-    isOpen,
-    onOpen,
-    tooltipId,
-  });
-
-  const [[trigger], [content]] = partitionComponents(
-    React.Children.toArray(children),
-    [isComponent('TooltipTrigger'), isComponent('TooltipContent')]
-  );
-
-  return (
-    <TooltipContext.Provider value={tooltip}>
-      {trigger}
-      {content}
-    </TooltipContext.Provider>
-  );
-};
-BaseTooltip.className = CLASSNAME;
-BaseTooltip.defaultProps = DEFAULT_PROPS;
-BaseTooltip.displayName = COMPONENT_NAME;
-
-export const Tooltip = Object.assign(BaseTooltip, {
-  Trigger: TooltipTrigger,
-  Content: TooltipContent,
-});

package/src/components/tooltip/context.ts

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

package/src/components/tooltip/index.ts

@@ -1,5 +0,0 @@
-export * from './context';
-export * from './types';
-export * from './Tooltip';
-export * from './useTooltip';
-export * from './useTooltipContext';

package/src/components/tooltip/types.ts

@@ -1,55 +0,0 @@
-import { ReactNode } from 'react';
-import { ValueOf } from '@redsift/design-system';
-import { useTooltip } from './useTooltip';
-
-/**
- * Context props.
- */
-export type TooltipState = ReturnType<typeof useTooltip> | null;
-
-/**
- * Component variant.
- */
-export const TooltipPlacement = {
-  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 TooltipPlacement = ValueOf<typeof TooltipPlacement>;
-
-/**
- * Component props.
- */
-export interface TooltipProps {
-  /** Children. Can only be TooltipTrigger and TooltilContent. */
-  children: ReactNode;
-  /**
-   * Default open status.
-   * Used for uncontrolled version.
-   */
-  defaultOpen?: boolean;
-  /** Delay time (in ms) for the tooltip to show up. */
-  delay?: number;
-  /** Default placement of the tooltip. */
-  placement?: TooltipPlacement;
-  /**
-   * Whether the component is opened or not.
-   * Used for controlled version.
-   */
-  isOpen?: boolean;
-  /** Method to handle component change. */
-  onOpen?: (open: boolean) => void;
-  /** Id to the tooltip content. */
-  tooltipId?: string;
-}
-
-export type StyledTooltipProps = TooltipProps;

package/src/components/tooltip/useTooltip.tsx

@@ -1,89 +0,0 @@
-import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
-import {
-  useFloating,
-  arrow,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  useHover,
-  useFocus,
-  useDismiss,
-  useRole,
-  useInteractions,
-} from '@floating-ui/react';
-import { TooltipProps } from './types';
-
-export function useTooltip({
-  defaultOpen,
-  delay,
-  placement,
-  isOpen: propsIsOpen,
-  onOpen,
-  tooltipId: propsTooltipId,
-}: Omit<TooltipProps, 'children'>) {
-  const arrowRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(propsIsOpen ?? defaultOpen);
-
-  const tooltipId = propsTooltipId ?? useId();
-
-  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(8),
-      flip({
-        fallbackAxisSideDirection: 'start',
-      }),
-      shift({ padding: 8 }),
-      arrow({
-        element: arrowRef,
-      }),
-    ],
-  });
-
-  const context = data.context;
-
-  const hover = useHover(context, {
-    move: false,
-    delay: {
-      open: delay,
-      close: 0,
-    },
-  });
-  const focus = useFocus(context);
-  const dismiss = useDismiss(context);
-  const role = useRole(context, { role: 'tooltip' });
-
-  const interactions = useInteractions([hover, focus, dismiss, role]);
-
-  return React.useMemo(
-    () => ({
-      isOpen,
-      handleOpen,
-      ...interactions,
-      ...data,
-      arrowRef,
-      tooltipId,
-    }),
-    [isOpen, handleOpen, interactions, data, arrowRef, tooltipId]
-  );
-}

package/src/components/tooltip/useTooltipContext.tsx

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

package/src/components/tooltip-content/TooltipContent.tsx

@@ -1,76 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useMergeRefs, FloatingPortal } from '@floating-ui/react';
-
-import { Comp } from '@redsift/design-system';
-import { TooltipContentProps } from './types';
-import { TooltipPlacement, useTooltipContext } from '../tooltip';
-import { StyledTooltipContent } from './styles';
-import classNames from 'classnames';
-
-const COMPONENT_NAME = 'TooltipContent';
-const CLASSNAME = 'redsift-tooltip-content';
-const DEFAULT_PROPS: Partial<TooltipContentProps> = {};
-
-/**
- * The TooltipContent component.
- */
-export const TooltipContent: Comp<TooltipContentProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    const { children, className, style } = props;
-    const {
-      getFloatingProps,
-      isOpen,
-      placement,
-      refs,
-      strategy,
-      x,
-      y,
-      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
-    } = useTooltipContext();
-    const popoverRef = useMergeRefs([refs.setFloating, ref]);
-
-    const { arrowRef } = useTooltipContext();
-
-    const staticSide = {
-      top: 'bottom',
-      right: 'left',
-      bottom: 'top',
-      left: 'right',
-    }[placement.split('-')[0]];
-
-    return (
-      <FloatingPortal id="redsift-app-container">
-        {isOpen && (
-          <StyledTooltipContent
-            className={classNames(TooltipContent.className, className)}
-            ref={popoverRef}
-            style={{
-              position: strategy,
-              top: y ?? 0,
-              left: x ?? 0,
-              visibility: x == null ? 'hidden' : 'visible',
-              ...style,
-            }}
-            {...getFloatingProps(props)}
-            $placement={placement as TooltipPlacement}
-          >
-            <div
-              ref={arrowRef}
-              className={`${TooltipContent.className}__arrow`}
-              style={{
-                left: arrowX != null ? `${arrowX}px` : '',
-                top: arrowY != null ? `${arrowY}px` : '',
-                [staticSide!]: '-6px',
-              }}
-            />
-            <div className={`${TooltipContent.className}__inner`}>
-              {children}
-            </div>
-          </StyledTooltipContent>
-        )}
-      </FloatingPortal>
-    );
-  });
-TooltipContent.className = CLASSNAME;
-TooltipContent.defaultProps = DEFAULT_PROPS;
-TooltipContent.displayName = COMPONENT_NAME;

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

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

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

@@ -1,84 +0,0 @@
-import styled, { css } from 'styled-components';
-import { baseContainer } from '@redsift/design-system';
-import { TooltipPlacement } from '../tooltip';
-import { StyledTooltipContentProps } from './types';
-
-/**
- * Component style.
- */
-export const StyledTooltipContent = styled.div<StyledTooltipContentProps>`
-  ${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-tooltip-font-family);
-  font-size: var(--redsift-typography-tooltip-font-size);
-  font-weight: var(--redsift-typography-tooltip-font-weight);
-  line-height: var(--redsift-typography-tooltip-line-height);
-  max-width: calc(100vw - 48px);
-  padding: 4px 8px;
-  z-index: var(--redsift-layout-z-index-tooltip);
-
-  .redsift-tooltip-content__arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: var(--redsift-color-neutral-white);
-    border-style: solid;
-  }
-
-  ${({ $placement }) => {
-    switch ($placement) {
-      case TooltipPlacement.left:
-      case TooltipPlacement['left-end']:
-      case TooltipPlacement['left-start']:
-        return css`
-          .redsift-tooltip-content__arrow {
-            border-width: 6px 0 6px 6px;
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-          }
-        `;
-      case TooltipPlacement.top:
-      case TooltipPlacement['top-end']:
-      case TooltipPlacement['top-start']:
-        return css`
-          .redsift-tooltip-content__arrow {
-            border-width: 6px 6px 0;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-            border-left-color: transparent;
-          }
-        `;
-      case TooltipPlacement.right:
-      case TooltipPlacement['right-end']:
-      case TooltipPlacement['right-start']:
-        return css`
-          .redsift-tooltip-content__arrow {
-            border-width: 6px 6px 6px 0;
-            border-top-color: transparent;
-            border-bottom-color: transparent;
-            border-left-color: transparent;
-          }
-        `;
-      case TooltipPlacement.bottom:
-      case TooltipPlacement['bottom-end']:
-      case TooltipPlacement['bottom-start']:
-      default:
-        return css`
-          .redsift-tooltip-content__arrow {
-            border-width: 0 6px 6px;
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-left-color: transparent;
-          }
-        `;
-    }
-  }}
-`;

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

@@ -1,14 +0,0 @@
-import { ComponentProps } from 'react';
-import { ContainerProps, InternalSpacingProps } from '@redsift/design-system';
-import { TooltipPlacement } from '../tooltip';
-
-/**
- * Component props.
- */
-export interface TooltipContentProps
-  extends ComponentProps<'div'>,
-    Omit<ContainerProps, keyof InternalSpacingProps> {}
-
-export type StyledTooltipContentProps = TooltipContentProps & {
-  $placement: TooltipPlacement;
-};

package/src/components/tooltip-trigger/TooltipTrigger.tsx

@@ -1,42 +0,0 @@
-import React, { forwardRef, ReactElement } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-
-import { Comp } from '@redsift/design-system';
-import { useTooltipContext } from '../tooltip';
-import { TooltipTriggerProps } from './types';
-
-const COMPONENT_NAME = 'TooltipTrigger';
-const CLASSNAME = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS: Partial<TooltipTriggerProps> = {};
-
-/**
- * The TooltipTrigger component.
- */
-export const TooltipTrigger: Comp<TooltipTriggerProps, HTMLSpanElement> =
-  forwardRef((props, ref) => {
-    const { children } = props;
-
-    const { getReferenceProps, refs, tooltipId } = useTooltipContext();
-    const childrenRef = (children as any).ref;
-    const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
-
-    if (React.isValidElement(children)) {
-      return React.cloneElement(children as ReactElement, {
-        ...getReferenceProps({
-          ref: triggerRef,
-          ...props,
-          'aria-describedby': tooltipId,
-          ...children.props,
-        }),
-      });
-    }
-
-    return (
-      <span ref={triggerRef} {...getReferenceProps(props)}>
-        {children}
-      </span>
-    );
-  });
-TooltipTrigger.className = CLASSNAME;
-TooltipTrigger.defaultProps = DEFAULT_PROPS;
-TooltipTrigger.displayName = COMPONENT_NAME;

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

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

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

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

package/src/index.ts

@@ -1,14 +0,0 @@
-export * from './components/dialog';
-export * from './components/dialog-content';
-export * from './components/dialog-content-actions';
-export * from './components/dialog-content-body';
-export * from './components/dialog-content-header';
-export * from './components/dialog-trigger';
-export * from './components/popover';
-export * from './components/popover-content';
-export * from './components/popover-trigger';
-export * from './components/toast';
-export * from './components/toast-container';
-export * from './components/tooltip';
-export * from './components/tooltip-content';
-export * from './components/tooltip-trigger';

package/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig"
-}

package/{dist/index.js → index.js}

@@ -687,12 +687,12 @@ const PopoverPlacement = {
  * Component style.
  */
 const StyledPopoverContent = styled.div`
-  ${baseContainer}
   align-items: center;
+  display: flex;
+  ${baseContainer}
   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);