@navikt/ds-react 0.19.16 → 1.0.0-rc.1

package/src/tooltip/Tooltip.tsx

@@ -1,26 +1,28 @@
-import cl from "classnames";
+import {
+  arrow as flArrow,
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  offset,
+  safePolygon,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+} from "@floating-ui/react-dom-interactions";
+import cl from "clsx";
 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";
+import { Detail } from "..";
+import { mergeRefs, useId } from "../util";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -80,7 +82,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       className,
       arrow: _arrow = true,
       placement: _placement = "top",
-      open,
+      open: userOpen,
       defaultOpen = false,
       offset: _offset,
       content,
@@ -92,88 +94,49 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref
   ) => {
+    const [open, setOpen] = useState(defaultOpen);
     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,
+      reference,
+      floating,
+      strategy,
+      context,
       placement,
-      refs,
       middlewareData: {
         arrow: { x: arrowX, y: arrowY } = {},
         hide: { referenceHidden } = {},
       },
     } = useFloating({
       placement: _placement,
+      open: userOpen ?? open,
+      onOpenChange: setOpen,
       middleware: [
+        offset(_offset ? _offset : _arrow ? 10 : 2),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
-        hide(),
       ],
+      whileElementsMounted: autoUpdate,
     });
 
-    /* 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 { getReferenceProps, getFloatingProps } = useInteractions([
+      useHover(context, { handleClose: safePolygon(), restMs: delay }),
+      useFocus(context),
+      useDismiss(context),
+    ]);
 
-    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]);
+    const ariaId = useId(id);
 
-    useEventListener(
-      "keydown",
-      useCallback((e) => e.key === "Escape" && handleClose(), [handleClose])
+    const mergedRef = useMemo(
+      () => mergeRefs([ref, floating]),
+      [floating, ref]
     );
-
-    /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
-    const stableRef = useMemo(
-      () => mergeRefs([ref, refs.floating]),
-      [ref, refs.floating]
+    const childMergedRef = useMemo(
+      () => mergeRefs([(children as any).ref, reference]),
+      [children, reference]
     );
 
     if (
@@ -196,107 +159,77 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     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 &&
-              document.addEventListener("mouseup", handleMouseUp, {
-                once: true,
-              });
-          }),
-          onFocus: composeEventHandlers(
-            children.props.onFocus,
-            () => !isMouseDownRef.current && handleOpen()
-          ),
-          onBlur: composeEventHandlers(children.props.onBlur, handleClose),
-        })}
-        {(open ?? isOpen) && (
-          <Portal>
+        {cloneElement(
+          children,
+          getReferenceProps({
+            ...children.props,
+            ref: childMergedRef,
+            "aria-describedby":
+              userOpen ?? open
+                ? cl(ariaId, children?.props["aria-describedby"])
+                : children?.props["aria-describedby"],
+          })
+        )}
+        <FloatingPortal>
+          {(userOpen ?? open) && (
             <div
-              ref={stableRef}
-              {...rest}
-              onMouseEnter={handleOpen}
-              onMouseLeave={handleClose}
-              role="tooltip"
-              id={ariaId}
-              style={{
-                position: "absolute",
-                top: y ?? "",
-                left: x ?? "",
-                visibility: referenceHidden ? "hidden" : "visible",
-              }}
+              {...getFloatingProps({
+                ...rest,
+                ref: mergedRef,
+                style: {
+                  position: strategy,
+                  top: y ?? 0,
+                  left: x ?? 0,
+                  visibility: referenceHidden ? "hidden" : "visible",
+                },
+                role: "tooltip",
+                id: ariaId,
+                className: cl(
+                  "navds-tooltip",
+                  "navds-detail navds-detail--small",
+                  className
+                ),
+              })}
               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>
+              {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>
-          </Portal>
-        )}
+          )}
+        </FloatingPortal>
       </>
     );
   }

package/src/tooltip/tooltip.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react/types-6-0";
 import React from "react";
-import { Button } from "../..";
+import { Alert, Button, Search } from "../..";
 import { Tooltip } from "../index";
 
 export default {
@@ -29,6 +29,20 @@ export default {
   },
 } as Meta;
 
+export const Demo = () => (
+  <div>
+    <Tooltip content="Tooltip example" placement="top">
+      <Alert variant="info">test</Alert>
+    </Tooltip>
+    <Tooltip content="Tooltip example" placement="top">
+      <Search label="søk" />
+    </Tooltip>
+    <Tooltip content="Tooltip example" placement="top">
+      <Button aria-describedby="test123">Tooltip</Button>
+    </Tooltip>
+  </div>
+);
+
 export const Default = (props) => {
   return (
     <Tooltip

package/src/typography/BodyLong.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { OverridableComponent } from "..";
 
 export interface BodyLongProps

package/src/typography/BodyShort.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { OverridableComponent } from "..";
 
 export interface BodyShortProps

package/src/typography/Detail.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { OverridableComponent } from "..";
 
 export interface DetailProps

package/src/typography/ErrorMessage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { Label } from "..";
 
 export interface ErrorMessageProps

package/src/typography/Heading.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { OverridableComponent } from "..";
 
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {

package/src/typography/Ingress.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { OverridableComponent } from "..";
 
 export interface IngressProps

package/src/typography/Label.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { OverridableComponent } from "..";
 
 export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {

package/src/util/TextareaAutoSize.tsx

@@ -0,0 +1,224 @@
+/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { debounce, mergeRefs, useClientLayoutEffect } from "..";
+
+/**
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow.ts
+ */
+const ownerWindow = (node: Node | null): Window => {
+  const doc = (node && node.ownerDocument) || document;
+  return doc.defaultView || window;
+};
+
+function getStyleValue(computedStyle, property) {
+  return parseInt(computedStyle[property], 10) || 0;
+}
+
+interface TextareaAutosizeProps
+  extends Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    "children" | "rows"
+  > {
+  /**
+   * Maximum number of rows to display.
+   */
+  maxRows?: number;
+  /**
+   * Minimum number of rows to display.
+   * @default 1
+   */
+  minRows?: number;
+}
+
+const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
+  (
+    { className, onChange, maxRows, minRows = 1, style, value, ...other },
+    ref
+  ) => {
+    const { current: isControlled } = useRef(value != null);
+    const inputRef = useRef<HTMLTextAreaElement | null>(null);
+    const handleRef = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
+    const shadowRef = useRef<HTMLTextAreaElement | null>(null);
+    const renders = useRef(0);
+    const [state, setState] = useState<any>({});
+
+    const syncHeight = useCallback(() => {
+      if (!inputRef.current || !shadowRef.current) return;
+      const input = inputRef.current;
+      const containerWindow = ownerWindow(input);
+      const computedStyle = containerWindow.getComputedStyle(input);
+
+      // If input's width is shrunk and it's not visible, don't sync height.
+      if (computedStyle.width === "0px") {
+        return;
+      }
+
+      const inputShallow = shadowRef.current;
+      inputShallow.style.width = computedStyle.width;
+      inputShallow.value = input.value || other?.placeholder || "x";
+      if (inputShallow.value.slice(-1) === "\n") {
+        // Certain fonts which overflow the line height will cause the textarea
+        // to report a different scrollHeight depending on whether the last line
+        // is empty. Make it non-empty to avoid this issue.
+        inputShallow.value += " ";
+      }
+
+      const boxSizing = computedStyle["box-sizing"];
+      const padding =
+        getStyleValue(computedStyle, "padding-bottom") +
+        getStyleValue(computedStyle, "padding-top");
+      const border =
+        getStyleValue(computedStyle, "border-bottom-width") +
+        getStyleValue(computedStyle, "border-top-width");
+
+      // The height of the inner content
+      const innerHeight = inputShallow.scrollHeight - padding;
+
+      // Measure height of a textarea with a single row
+      inputShallow.value = "x";
+      const singleRowHeight = inputShallow.scrollHeight - padding;
+
+      // The height of the outer content
+      let outerHeight = innerHeight;
+
+      if (minRows) {
+        outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+      }
+      if (maxRows) {
+        outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+      }
+      outerHeight = Math.max(outerHeight, singleRowHeight);
+
+      // Take the box sizing into account for applying this value as a style.
+      const outerHeightStyle =
+        outerHeight + (boxSizing === "border-box" ? padding + border : 0);
+      const overflow = Math.abs(outerHeight - innerHeight) <= 1;
+
+      setState((prevState) => {
+        // Need a large enough difference to update the height.
+        // This prevents infinite rendering loop.
+        if (
+          renders.current < 20 &&
+          ((outerHeightStyle > 0 &&
+            Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) >
+              1) ||
+            prevState.overflow !== overflow)
+        ) {
+          renders.current += 1;
+          return {
+            overflow,
+            outerHeightStyle,
+          };
+        }
+
+        if (process.env.NODE_ENV !== "production") {
+          if (renders.current === 20) {
+            console.error(
+              [
+                "MUI: Too many re-renders. The layout is unstable.",
+                "TextareaAutosize limits the number of renders to prevent an infinite loop.",
+              ].join("\n")
+            );
+          }
+        }
+
+        return prevState;
+      });
+    }, [maxRows, minRows, other?.placeholder]);
+
+    useEffect(() => {
+      const handleResize = debounce(() => {
+        renders.current = 0;
+        syncHeight();
+      });
+      const containerWindow = ownerWindow(inputRef.current);
+      containerWindow.addEventListener("resize", handleResize);
+      let resizeObserver;
+
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(inputRef.current);
+      }
+
+      return () => {
+        handleResize.clear();
+        containerWindow.removeEventListener("resize", handleResize);
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+        }
+      };
+    }, [syncHeight]);
+
+    useClientLayoutEffect(() => {
+      syncHeight();
+    });
+
+    useEffect(() => {
+      renders.current = 0;
+    }, [value]);
+
+    const handleChange = (event) => {
+      renders.current = 0;
+
+      if (!isControlled) {
+        syncHeight();
+      }
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return (
+      <>
+        <textarea
+          value={value}
+          onChange={handleChange}
+          ref={handleRef}
+          // Apply the rows prop to get a "correct" first SSR paint
+          rows={minRows}
+          style={{
+            height: state.outerHeightStyle,
+            // Need a large enough difference to allow scrolling.
+            // This prevents infinite rendering loop.
+            ...(state.overflow ? { overflow: "hidden" } : {}),
+            ...style,
+          }}
+          {...other}
+          className={className}
+        />
+        <textarea
+          aria-hidden
+          className={className}
+          readOnly
+          ref={shadowRef}
+          tabIndex={-1}
+          style={{
+            // Visibility needed to hide the extra text area on iPads
+            visibility: "hidden",
+            // Remove from the content flow
+            position: "absolute",
+            // Ignore the scrollbar width
+            overflow: "hidden",
+            height: 0,
+            top: 0,
+            left: 0,
+            // Create a new layer, increase the isolation of the computed values
+            transform: "translateZ(0)",
+            ...style,
+          }}
+        />
+      </>
+    );
+  }
+);
+
+export default TextareaAutosize;

package/src/util/debounce.ts

@@ -0,0 +1,17 @@
+// https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/debounce.js
+export default function debounce(func, wait = 166) {
+  let timeout;
+  function debounced(this: any, ...args) {
+    const later = () => {
+      func.apply(this, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  }
+
+  debounced.clear = () => {
+    clearTimeout(timeout);
+  };
+
+  return debounced;
+}