@navikt/ds-react 0.17.16 → 0.17.19

package/src/tooltip/Tooltip.tsx

@@ -0,0 +1,301 @@
+import cl from "classnames";
+import React, {
+  cloneElement,
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { composeEventHandlers, Detail, useEventListener } from "..";
+import {
+  useFloating,
+  arrow as flArrow,
+  shift,
+  autoUpdate,
+  flip,
+  hide,
+} from "@floating-ui/react-dom";
+import mergeRefs from "react-merge-refs";
+import Portal from "./portal";
+import { useId } from "../util";
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Element tooltip anchors to
+   */
+  children: React.ReactElement & React.RefAttributes<HTMLElement>;
+  /**
+   * Open state for contolled tooltip
+   */
+  open?: boolean;
+  /**
+   * Tells tooltip to start in open state
+   * @note "open"-prop overwrites this
+   */
+  defaultOpen?: boolean;
+  /**
+   * Orientation for tooltip
+   * @default "top"
+   */
+  placement?: "top" | "right" | "bottom" | "left";
+  /**
+   *  Toggles rendering of arrow
+   *  @default true
+   */
+  arrow?: boolean;
+  /**
+   * Distance from anchor to tooltip
+   * @default 10px with arrow, 2px without arrow
+   */
+  offset?: number;
+  /**
+   * Content shown in tooltip
+   */
+  content: string;
+  /**
+   * Sets max allowed character length
+   * @default 80
+   */
+  maxChar?: number;
+  /**
+   * Adds a delay in milliseconds before opening tooltip
+   * @default 300
+   */
+  delay?: number;
+  /**
+   * List of Keyboard-keys for shortcuts
+   */
+  keys?: string[];
+}
+
+const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    {
+      children,
+      className,
+      arrow: _arrow = true,
+      placement: _placement = "top",
+      open,
+      defaultOpen = false,
+      offset: _offset,
+      content,
+      delay = 150,
+      id,
+      keys,
+      maxChar = 80,
+      ...rest
+    },
+    ref
+  ) => {
+    const arrowRef = useRef<HTMLDivElement | null>(null);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const openTimerRef = useRef(0);
+    const leaveTimerRef = useRef(0);
+    const isMouseDownRef = useRef(false);
+
+    const ariaId = useId(id);
+
+    const {
+      x,
+      y,
+      update,
+      placement,
+      refs,
+      middlewareData: {
+        arrow: { x: arrowX, y: arrowY } = {},
+        hide: { referenceHidden } = {},
+      },
+    } = useFloating({
+      placement: _placement,
+      middleware: [
+        shift(),
+        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        flArrow({ element: arrowRef, padding: 5 }),
+        hide(),
+      ],
+    });
+
+    /* https://floating-ui.com/docs/react-dom#updating */
+    useEffect(() => {
+      if (!refs.reference.current || !refs.floating.current) {
+        return;
+      }
+
+      // Only call this when the floating element is rendered
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update, open, isOpen]);
+
+    const handleOpen = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(leaveTimerRef.current);
+      setIsOpen(true);
+    }, [setIsOpen]);
+
+    const handleDelayedOpen = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(leaveTimerRef.current);
+      openTimerRef.current = window.setTimeout(() => {
+        setIsOpen(true);
+      }, delay);
+    }, [delay, setIsOpen]);
+
+    const handleClose = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      leaveTimerRef.current = window.setTimeout(() => {
+        setIsOpen(false);
+      }, 50);
+    }, [setIsOpen]);
+
+    const handleMouseUp = useCallback(
+      () => (isMouseDownRef.current = false),
+      []
+    );
+
+    useEffect(() => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      return () => window.clearTimeout(openTimerRef.current);
+    }, []);
+
+    useEffect(() => {
+      return () => document.removeEventListener("mouseup", handleMouseUp);
+    }, [handleMouseUp]);
+
+    useEventListener(
+      "keydown",
+      useCallback((e) => e.key === "Escape" && handleClose(), [handleClose]),
+      document
+    );
+
+    /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
+    const stableRef = useMemo(() => mergeRefs([ref, refs.floating]), [
+      ref,
+      refs.floating,
+    ]);
+
+    if (
+      !children ||
+      children?.type === React.Fragment ||
+      (children as any) === React.Fragment
+    ) {
+      console.error(
+        "<Tooltip> children needs to be a single ReactElement and not <React.Fragment/>/<></>"
+      );
+      return null;
+    }
+
+    if (content?.length > maxChar) {
+      console.error(
+        `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop`
+      );
+      return null;
+    }
+
+    return (
+      <>
+        {cloneElement(children, {
+          ...children.props,
+          "aria-describedby":
+            open || isOpen
+              ? cl(ariaId, children?.props["aria-describedby"])
+              : children?.props["aria-describedby"],
+          ref: mergeRefs([(children as any).ref, refs.reference]),
+          onMouseEnter: composeEventHandlers(
+            children.props.onMouseEnter,
+            handleDelayedOpen
+          ),
+          onMouseLeave: composeEventHandlers(
+            children.props.onMouseLeave,
+            handleClose
+          ),
+          onMouseDown: composeEventHandlers(children.props.onMouseDown, () => {
+            isMouseDownRef.current = true;
+            document.addEventListener("mouseup", handleMouseUp, { once: true });
+          }),
+          onFocus: composeEventHandlers(
+            children.props.onFocus,
+            () => !isMouseDownRef.current && handleOpen()
+          ),
+          onBlur: composeEventHandlers(children.props.onBlur, handleClose),
+        })}
+        {(open ?? isOpen) && (
+          <Portal>
+            <div
+              ref={stableRef}
+              {...rest}
+              onMouseEnter={handleOpen}
+              onMouseLeave={handleClose}
+              role="tooltip"
+              id={ariaId}
+              style={{
+                position: "absolute",
+                top: y ?? "",
+                left: x ?? "",
+                visibility: referenceHidden ? "hidden" : "visible",
+              }}
+              data-side={placement}
+              className={cl(
+                "navds-tooltip",
+                "navds-detail navds-detail--small",
+                className
+              )}
+            >
+              <div
+                className="navds-tooltip__inner"
+                style={{
+                  [{
+                    top: "marginBottom",
+                    right: "marginLeft",
+                    bottom: "marginTop",
+                    left: "marginRight",
+                  }[placement]]: _offset ? _offset : _arrow ? 10 : 2,
+                }}
+              >
+                {content}
+                {keys && (
+                  <span className="navds-tooltip__keys">
+                    {keys.map((key) => (
+                      <Detail
+                        size="small"
+                        as="kbd"
+                        key={key}
+                        className="navds-tooltip__key"
+                      >
+                        {key}
+                      </Detail>
+                    ))}
+                  </span>
+                )}
+                {_arrow && (
+                  <div
+                    ref={(node) => {
+                      arrowRef.current = node;
+                    }}
+                    className="navds-tooltip__arrow"
+                    style={{
+                      left: arrowX != null ? `${arrowX}px` : "",
+                      top: arrowY != null ? `${arrowY}px` : "",
+                      right: "",
+                      bottom: "",
+
+                      [{
+                        top: "bottom",
+                        right: "left",
+                        bottom: "top",
+                        left: "right",
+                      }[placement]]: "-3.5px",
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          </Portal>
+        )}
+      </>
+    );
+  }
+);
+
+export default Tooltip;

package/src/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip";
+export * from "./Tooltip";

package/src/tooltip/portal.tsx

@@ -0,0 +1,15 @@
+/* https://github.com/radix-ui/primitives/blob/main/packages/react/portal/src/Portal.tsx */
+import ReactDOM from "react-dom";
+
+const Portal = ({ children }) => {
+  const hostElement = globalThis?.document?.body;
+
+  if (hostElement) {
+    return ReactDOM.createPortal(children, hostElement);
+  }
+
+  // bail out of ssr
+  return null;
+};
+
+export default Portal;

package/src/tooltip/tooltip.stories.tsx

@@ -0,0 +1,144 @@
+import React, { useRef, useState } from "react";
+import { Tooltip } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { Refresh } from "@navikt/ds-icons";
+import { Button } from "../..";
+import { ToggleGroup } from "../toggle-group";
+
+export default {
+  title: "ds-react/tooltip",
+  component: Tooltip,
+  parameters: {
+    chromatic: { disable: true },
+  },
+} as Meta;
+
+export const Demo = () => {
+  const [open, setOpen] = useState(true);
+  const testRef = useRef(null);
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        gap: 32,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Tooltip
+        content="Tooltip example"
+        keys={["Cmd", "K"]}
+        placement="right"
+        open={open}
+        ref={testRef}
+      >
+        <Button aria-describedby="test123" onClick={() => setOpen(!open)}>
+          Tooltip C
+        </Button>
+      </Tooltip>
+      <Tooltip
+        content="Tooltip example"
+        keys={["Cmd", "K"]}
+        placement="right"
+        defaultOpen
+      >
+        <Button onClick={() => console.log(testRef.current)}>Tooltip C</Button>
+      </Tooltip>
+      <ToggleGroup onChange={null} defaultValue="321">
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="123">Tekst</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="321">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3212">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3213">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3214">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+      </ToggleGroup>
+    </div>
+  );
+};
+
+export const All = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style={{ margin: "4rem 8rem 4rem 8rem" }}>
+      <h2>Controlled</h2>
+      <Tooltip open={open} content="Controlled tooltip example" placement="top">
+        <Button onClick={() => setOpen((x) => !x)}>Toggle tooltip</Button>
+      </Tooltip>
+
+      <h2>no arrow</h2>
+      <Tooltip content="no arrow" placement="top" arrow={false}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+
+      <h2>Keys</h2>
+      <Tooltip content="Tooltip" placement="top" open keys={["Cmd", "K"]}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+      <h2>more offset</h2>
+      <Tooltip content="Tooltip" placement="top" open offset={20}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+
+      <h2>all placements</h2>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexWrap: "wrap",
+          gap: "3rem",
+        }}
+      >
+        {["top", "left", "bottom", "right"].map((placement) => (
+          <div key={placement}>
+            <h3>{placement}</h3>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                flexWrap: "wrap",
+                gap: "3rem",
+              }}
+            >
+              <Tooltip
+                key={placement}
+                defaultOpen
+                content={placement}
+                placement={placement as any}
+              >
+                <Refresh aria-hidden tabIndex={0} />
+              </Tooltip>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const UUDemo = () => {
+  return (
+    <div>
+      <Button>Placeholder</Button>
+      <br />
+      <br />
+      <Tooltip content="Shortcut" placement="right" keys={["Cmd", "S"]}>
+        <Button>Lagre</Button>
+      </Tooltip>
+      <br />
+      <br />
+      <Button>Placeholder</Button>
+    </div>
+  );
+};

package/src/util/index.ts

@@ -44,3 +44,17 @@ export const useEventListener = <T extends ListenerT>(
     };
   }, [name, handler, target]);
 };
+
+/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx */
+export const composeEventHandlers = <E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void
+) => {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event);
+
+    if (!((event as unknown) as Event).defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+};