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

package/src/pagination/pagination.stories.tsx

@@ -1,38 +1,112 @@
 import React, { useState } from "react";
+import { Link, HashRouter as Router } from "react-router-dom";
 import Pagination from "./Pagination";
 
 export default {
-  title: "ds-react/pagination",
+  title: "ds-react/Pagination",
   component: Pagination,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small", "xsmall"],
+      },
+    },
+  },
 };
 
-export const All = (props) => {
+export const Default = (props: any) => {
   const [page, setPage] = useState(props.page);
-  return (
-    <div>
-      <h2>Pagination</h2>
-      <Pagination {...props} page={page} onPageChange={setPage} />
+  return <Pagination {...props} page={page} onPageChange={setPage} />;
+};
 
-      <h2>Small</h2>
-      <Pagination size="small" {...props} page={page} onPageChange={setPage} />
+Default.args = {
+  page: 2,
+  count: 8,
+  siblingCount: 1,
+  boundaryCount: 1,
+  prevNextTexts: false,
+};
 
-      <h2>prevNextTexts</h2>
-      <Pagination prevNextTexts {...props} page={page} onPageChange={setPage} />
-      <h3>prevNextTexts small</h3>
+export const PrevNextText = () => {
+  const [page, setPage] = useState(1);
+  const props = {
+    page: 1,
+    count: 8,
+    siblingCount: 1,
+    boundaryCount: 1,
+  };
+  return (
+    <div className="colgap" style={{ alignItems: "center" }}>
+      <Pagination {...props} page={page} onPageChange={setPage} prevNextTexts />
       <Pagination
+        {...props}
+        page={page}
+        onPageChange={setPage}
         prevNextTexts
         size="small"
+      />
+      <Pagination
         {...props}
         page={page}
         onPageChange={setPage}
+        prevNextTexts
+        size="xsmall"
       />
     </div>
   );
 };
 
-All.args = {
-  page: 1,
-  count: 8,
-  siblingCount: 1,
-  boundaryCount: 1,
+export const Small = () => {
+  const [page, setPage] = useState(1);
+  const props = {
+    page: 1,
+    count: 8,
+    siblingCount: 1,
+    boundaryCount: 1,
+  };
+  return (
+    <Pagination {...props} page={page} onPageChange={setPage} size="small" />
+  );
 };
+
+export const XSmall = () => {
+  const [page, setPage] = useState(1);
+  const props = {
+    page: 1,
+    count: 8,
+    siblingCount: 1,
+    boundaryCount: 1,
+  };
+  return (
+    <Pagination {...props} page={page} onPageChange={setPage} size="xsmall" />
+  );
+};
+
+export const AsLink = () => {
+  const [page, setPage] = useState(1);
+  const props = {
+    page: 1,
+    count: 8,
+    siblingCount: 1,
+    boundaryCount: 1,
+  };
+  return (
+    <Pagination
+      {...props}
+      page={page}
+      onPageChange={setPage}
+      renderItem={(item) => (
+        <Pagination.Item {...item} as={Link} to={`?page=${item.page}`} />
+      )}
+    />
+  );
+};
+
+AsLink.decorators = [
+  (Story) => (
+    <Router>
+      <Story />
+    </Router>
+  ),
+];

package/src/panel/Panel.tsx

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

package/src/popover/Popover.test.tsx

@@ -0,0 +1,143 @@
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+import { renderWithStyles as render } from "../../tests/utils";
+import Popover from "./Popover";
+
+describe("Popover", () => {
+  test("open", () => {
+    const { getByTestId } = render(
+      <Popover
+        open
+        anchorEl={document.createElement("div")}
+        onClose={() => null}
+        data-testid="popover-id"
+      >
+        <div />
+      </Popover>
+    );
+
+    expect(getByTestId("popover-id")).toBeVisible();
+    cleanup();
+  });
+
+  test("should be hidden", () => {
+    const { getByTestId } = render(
+      <Popover
+        open={false}
+        anchorEl={document.createElement("div")}
+        onClose={() => null}
+        data-testid="popover-id"
+      >
+        <div />
+      </Popover>
+    );
+
+    expect(getByTestId("popover-id")).not.toBeVisible();
+    cleanup();
+  });
+
+  it("outsideClick", async () => {
+    const fn = jest.fn();
+    const { getByRole, getByTestId } = render(
+      <div>
+        <Popover
+          open={true}
+          anchorEl={document.createElement("div")}
+          onClose={fn}
+          data-testid="popover-id"
+        >
+          <div />
+        </Popover>
+        <a href="/#">link</a>
+      </div>
+    );
+
+    await act(async () => {
+      expect(getByTestId("popover-id")).toBeVisible();
+      getByRole("link").focus();
+    });
+
+    expect(fn).toHaveBeenCalled();
+
+    cleanup();
+  });
+
+  it("escape", async () => {
+    const fn = jest.fn();
+    const { container, getByTestId } = render(
+      <div>
+        <Popover
+          open={true}
+          anchorEl={document.createElement("div")}
+          onClose={fn}
+          data-testid="popover-id"
+        >
+          <div />
+        </Popover>
+      </div>
+    );
+
+    await act(async () => {
+      expect(getByTestId("popover-id")).toBeVisible();
+      fireEvent.keyDown(
+        // Should work anywhere
+        container,
+        { key: "Escape" }
+      );
+    });
+
+    expect(fn).toHaveBeenCalled();
+
+    cleanup();
+  });
+
+  it("keep open on popover-focus", async () => {
+    const fn = jest.fn();
+    const { getByTestId } = render(
+      <div>
+        <Popover
+          open={true}
+          anchorEl={document.createElement("div")}
+          onClose={fn}
+          data-testid="popover-id"
+        >
+          <div />
+        </Popover>
+      </div>
+    );
+
+    await act(async () => {
+      expect(getByTestId("popover-id")).toBeVisible();
+      getByTestId("popover-id").focus();
+    });
+
+    expect(fn).toHaveBeenCalledTimes(0);
+
+    cleanup();
+  });
+
+  it("keep open on popover-click", async () => {
+    const fn = jest.fn();
+    const { getByTestId } = render(
+      <div>
+        <Popover
+          open={true}
+          anchorEl={document.createElement("div")}
+          onClose={fn}
+          data-testid="popover-id"
+        >
+          <div />
+        </Popover>
+      </div>
+    );
+
+    await act(async () => {
+      expect(getByTestId("popover-id")).toBeVisible();
+      fireEvent.click(getByTestId("popover-id"));
+    });
+
+    expect(fn).toHaveBeenCalledTimes(0);
+
+    cleanup();
+  });
+});

package/src/popover/Popover.tsx

@@ -1,15 +1,25 @@
-import { Placement } from "@popperjs/core";
-import cl from "classnames";
+import {
+  arrow as flArrow,
+  autoUpdate,
+  flip,
+  offset as flOffset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react-dom-interactions";
+import cl from "clsx";
 import React, {
   forwardRef,
   HTMLAttributes,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
 } from "react";
-import mergeRefs from "react-merge-refs";
-import { usePopper } from "react-popper";
-import { useClientLayoutEffect } from "..";
+import { mergeRefs } from "..";
+import { useClientLayoutEffect, useEventListener } from "../util";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
@@ -32,9 +42,21 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Orientation for popover
    * @note Try to keep general usage to "top", "bottom", "left", "right"
-   * @default "right"
+   * @default "top"
    */
-  placement?: Placement;
+  placement?:
+    | "top"
+    | "bottom"
+    | "right"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "right-start"
+    | "right-end"
+    | "left-start"
+    | "left-end";
   /**
    * Adds a arrow from dialog to anchor when true
    * @default true
@@ -53,14 +75,6 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   strategy?: "absolute" | "fixed";
 }
 
-const useEventLister = (event: string, callback) =>
-  useEffect(() => {
-    document.addEventListener(event, callback);
-    return () => {
-      document.removeEventListener(event, callback);
-    };
-  }, [event, callback]);
-
 interface PopoverComponent
   extends React.ForwardRefExoticComponent<
     PopoverProps & React.RefAttributes<HTMLDivElement>
@@ -77,99 +91,119 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       arrow = true,
       open,
       onClose,
-      placement = "right",
+      placement = "top",
       offset,
-      strategy = "absolute",
+      strategy: userStrategy = "absolute",
       ...rest
     },
     ref
   ) => {
-    const popoverRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = mergeRefs([popoverRef, ref]);
+    const arrowRef = useRef<HTMLDivElement | null>(null);
 
-    const close = useCallback(() => open && onClose(), [open, onClose]);
+    const {
+      x,
+      y,
+      reference,
+      floating,
+      strategy,
+      context,
+      update,
+      refs,
+      placement: flPlacement,
+      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    } = useFloating({
+      strategy: userStrategy,
+      placement,
+      open: open,
+      onOpenChange: onClose,
+      middleware: [
+        flOffset(offset ?? (arrow ? 16 : 4)),
+        shift(),
+        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        flArrow({ element: arrowRef, padding: 8 }),
+      ],
+    });
 
-    useEventLister(
-      "click",
-      useCallback(
-        (e: MouseEvent) => {
-          if (
-            ![anchorEl, popoverRef.current].some((element) =>
-              element?.contains(e.target as Node)
-            )
-          ) {
-            close();
-          }
-        },
-        [anchorEl, close]
-      )
-    );
+    const { getFloatingProps } = useInteractions([
+      useClick(context),
+      useDismiss(context),
+    ]);
+
+    useClientLayoutEffect(() => {
+      reference(anchorEl);
+    }, [anchorEl]);
 
-    useEventLister(
-      "keydown",
-      useCallback((e: KeyboardEvent) => e.key === "Escape" && close(), [close])
+    const floatingRef = useMemo(
+      () => mergeRefs([floating, ref]),
+      [floating, ref]
     );
 
-    useEventLister(
+    useEffect(() => {
+      update();
+    }, [open, update, anchorEl]);
+
+    useEffect(() => {
+      if (!refs.reference.current || !refs.floating.current || !open) return;
+      const cleanup = autoUpdate(
+        refs.reference.current,
+        refs.floating.current,
+        update
+      );
+      return () => cleanup();
+    }, [refs.floating, refs.reference, update, open, anchorEl]);
+
+    useEventListener(
       "focusin",
       useCallback(
         (e: FocusEvent) => {
           if (
-            ![anchorEl, popoverRef.current].some((element) =>
+            ![anchorEl, refs?.floating?.current].some((element) =>
               element?.contains(e.target as Node)
             )
           ) {
-            close();
+            open && onClose();
           }
         },
-        [anchorEl, close]
+        [anchorEl, refs, open, onClose]
       )
     );
 
-    const { styles, attributes, update } = usePopper(
-      anchorEl,
-      popoverRef.current,
-      {
-        placement,
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, offset ?? (arrow ? 16 : 4)],
-            },
-          },
-          {
-            name: "arrow",
-            options: {
-              padding: 8,
-            },
-          },
-        ],
-        strategy,
-      }
-    );
-
-    useClientLayoutEffect(() => {
-      open && update && update();
-    }, [open, update]);
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right",
+    }[flPlacement.split("-")[0]];
 
     return (
       <div
-        ref={mergedRef}
         className={cl("navds-popover", className, {
           "navds-popover--hidden": !open || !anchorEl,
         })}
+        data-placement={flPlacement}
         aria-hidden={!open || !anchorEl}
         tabIndex={-1}
-        {...attributes.popper}
+        {...getFloatingProps({
+          ref: floatingRef,
+          style: {
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+          },
+        })}
         {...rest}
-        style={styles.popper}
       >
         {children}
         {arrow && (
           <div
-            data-popper-arrow
-            style={styles.arrow}
+            ref={(node) => {
+              arrowRef.current = node;
+            }}
+            style={{
+              ...(arrowX != null ? { left: arrowX } : {}),
+              ...(arrowY != null ? { top: arrowY } : {}),
+              ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+            }}
             className="navds-popover__arrow"
           />
         )}

package/src/popover/PopoverContent.tsx

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

package/src/popover/popover.stories.tsx

@@ -1,8 +1,21 @@
 import React, { useState } from "react";
 import { Popover } from "../index";
-import { placements } from "@popperjs/core";
 import { Button } from "../button";
 
+const placements = [
+  "top",
+  "bottom",
+  "right",
+  "left",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end",
+];
 export default {
   title: "ds-react/Popover",
   component: Popover,
@@ -26,32 +39,17 @@ export default {
       },
     },
     strategy: {
-      defaultValue: "fixed",
+      defaultValue: "absolute",
       control: {
         type: "radio",
         options: ["fixed", "absolute"],
       },
     },
     placement: {
-      defaultValue: "bottom",
+      defaultValue: "right",
       control: {
         type: "radio",
-        options: [
-          "bottom",
-          "right",
-          "left",
-          "top-start",
-          "top-end",
-          "bottom-start",
-          "bottom-end",
-          "right-start",
-          "right-end",
-          "left-start",
-          "left-end",
-          "auto",
-          "auto-start",
-          "auto-end",
-        ],
+        options: placements,
       },
     },
   },
@@ -61,7 +59,7 @@ export const Default = (props: any) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState<boolean>(false);
   return (
-    <>
+    <div>
       <Button ref={(el) => setAnchorEl(el)} onClick={() => setOpen((x) => !x)}>
         Open
       </Button>
@@ -69,14 +67,11 @@ export const Default = (props: any) => {
         {...props}
         open={props.open ?? open}
         anchorEl={anchorEl}
-        onClose={() => setOpen(false)}
+        onClose={(e) => setOpen(e)}
       >
-        <Popover.Content>
-          Velit in consequat Lorem sunt ut deserunt nostrud enim enim sint
-          cillum ad veniam.
-        </Popover.Content>
+        <Popover.Content>Velit in consequat</Popover.Content>
       </Popover>
-    </>
+    </div>
   );
 };
 
@@ -90,7 +85,7 @@ const Template = (props) => {
         <Popover.Content>
           Velit in consequat Lorem
           <br />
-          sunt Pariatur ullamco ullamco
+          {props.placement}
         </Popover.Content>
       </Popover>
     </>

package/src/read-more/ReadMore.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useState } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { Collapse, UnmountClosed } from "react-collapse";
 import { Expand } from "@navikt/ds-icons";
 import { BodyLong } from "../typography";

package/src/stepper/Step.tsx

@@ -1,4 +1,4 @@
-import cl from "classnames";
+import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { StepperContext } from "./Stepper";
 import { Label, OverridableComponent } from "..";

package/src/stepper/Stepper.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import Step, { StepperStepProps, StepperStepType } from "./Step";
 
 export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {

package/src/table/Body.tsx

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

package/src/table/DataCell.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { BodyShort } from "..";
 import { TableContext } from "./Table";
 

package/src/table/ExpandableRow.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useState } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import Row, { RowProps } from "./Row";
 import DataCell from "./DataCell";
 import { UnmountClosed } from "react-collapse";
@@ -58,7 +58,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     ref
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
-    const id = `expandable-${useId()}`;
+    const id = useId();
 
     const isOpen = open ?? internalOpen;
 

package/src/table/Header.tsx

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