@redsift/popovers 9.2.3-patch → 9.2.3

package/src/components/tooltip/Tooltip.tsx

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

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

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/types.ts

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

@@ -0,0 +1,93 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  useFloating,
+  arrow,
+  autoUpdate,
+  offset,
+  flip,
+  safePolygon,
+  shift,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+} from '@floating-ui/react';
+import { TooltipProps } from './types';
+import { useId } from '@redsift/design-system';
+
+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 [_id] = useId();
+  const tooltipId = propsTooltipId ?? _id;
+
+  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,
+    },
+    handleClose: safePolygon(),
+  });
+  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

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

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

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

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

@@ -0,0 +1,84 @@
+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);
+  border-radius: 4px;
+  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

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

@@ -0,0 +1,42 @@
+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,
+        children: children.props.children ?? '',
+      }),
+    });
+  }
+
+  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

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

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

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

package/src/index.ts

@@ -0,0 +1,16 @@
+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';
+
+export { useMergeRefs, FloatingPortal } from '@floating-ui/react';

package/tsconfig.json

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