@navikt/ds-react 6.0.0-alpha.1 → 6.0.0-alpha.7

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef, isValidElement } from "react";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { useId } from "../../util/hooks";
-import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
+import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -17,12 +17,18 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Heading above links
    */
-  heading?: React.ReactNode;
+  heading: React.ReactNode;
   /**
    * Allows setting a different HTML h-tag
    * @default "h2"
    */
   headingTag?: React.ElementType<any>;
+  /**
+   * When manually setting focus to `<ErrorSummary />` use the
+   * `focusTargetRef`-prop and not ref.
+   * This directs focus to heading, improving screen reader experience
+   */
+  focusTargetRef?: React.RefObject<HTMLElement>;
 }
 
 interface ErrorSummaryComponent
@@ -41,7 +47,7 @@ interface ErrorSummaryComponent
    * </ErrorSummary.Item>
    * ```
    */
-  Item: ErrorSummaryItemType;
+  Item: typeof ErrorSummaryItem;
 }
 
 /**
@@ -70,6 +76,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       size = "medium",
       headingTag = "h2",
       heading,
+      focusTargetRef,
       ...rest
     },
     ref,
@@ -85,7 +92,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           "navds-error-summary",
           `navds-error-summary--${size}`,
         )}
-        tabIndex={-1}
+        tabIndex={ref ? -1 : undefined}
         aria-live="polite"
         aria-relevant="all"
         aria-labelledby={headingId}
@@ -95,16 +102,13 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           as={headingTag}
           size="small"
           id={headingId}
+          ref={focusTargetRef}
+          tabIndex={focusTargetRef ? -1 : undefined}
         >
           {heading}
         </Heading>
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
-          {React.Children.map(children, (child) => {
-            if (!isValidElement(child)) {
-              return null;
-            }
-            return <li key={child.toString()}>{child}</li>;
-          })}
+          {children}
         </BodyShort>
       </section>
     );

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -14,7 +14,7 @@ export interface ErrorSummaryItemProps
   href?: string;
 }
 
-export type ErrorSummaryItemType = OverridableComponent<
+type ErrorSummaryItemType = OverridableComponent<
   ErrorSummaryItemProps,
   HTMLAnchorElement
 >;
@@ -22,13 +22,15 @@ export type ErrorSummaryItemType = OverridableComponent<
 export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
-      <Component
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-error-summary__item", "navds-link")}
-      >
-        {children}
-      </Component>
+      <li>
+        <Component
+          {...rest}
+          ref={ref}
+          className={cl(className, "navds-error-summary__item", "navds-link")}
+        >
+          {children}
+        </Component>
+      </li>
     );
   },
 );

package/src/form/error-summary/error-summary.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta } from "@storybook/react";
-import React from "react";
+import { expect, userEvent, within } from "@storybook/test";
+import React, { useRef } from "react";
 import { ErrorSummary } from "..";
 
 export default {
@@ -43,3 +44,56 @@ export const Small = () => (
     </ErrorSummary.Item>
   </ErrorSummary>
 );
+
+export const A11yDemo = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const ref = useRef<HTMLHeadingElement>(null);
+    return (
+      <div>
+        <button onClick={() => ref.current?.focus()}>
+          Fokuser Errorsummary på klikk
+        </button>
+        <ErrorSummary heading="Feiloppsummering tittel" focusTargetRef={ref}>
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+    );
+  },
+};
+
+export const FocusDemo = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const ref = useRef<HTMLHeadingElement>(null);
+    return (
+      <div>
+        <button onClick={() => ref.current?.focus()}>Focus summary</button>
+        <ErrorSummary heading="Feiloppsummering tittel" focusTargetRef={ref}>
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    const button = canvas.getByText("Focus summary");
+    const heading = canvas.getByText("Feiloppsummering tittel");
+
+    await step("click button", async () => {
+      await userEvent.click(button);
+    });
+
+    expect(heading).toHaveFocus();
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};

package/src/form/search/Search.tsx

@@ -66,6 +66,10 @@ export interface SearchProps
    * Exposes the HTML size attribute
    */
   htmlSize?: number | string;
+    /*
+   * Exposes role attribute
+   */
+  role?: string
 }
 
 interface SearchComponent
@@ -114,6 +118,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onChange,
       onSearchClick,
       htmlSize,
+      role,
       ...rest
     } = props;
 
@@ -205,7 +210,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              role="searchbox"
+              role={role ?? 'searchbox'}
               className={cl(
                 className,
                 "navds-search__input",

package/src/form/stories/textarea.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import React, { useState } from "react";
 import { Button } from "../../button";
+import { Modal } from "../../modal";
 import { Textarea } from "../index";
 
 const meta: Meta<typeof Textarea> = {
@@ -124,6 +126,24 @@ export const Resize: StoryFn = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
 
+export const OnChange: StoryFn = () => {
+  return (
+    <Textarea
+      label="Ipsum enim quis culpa"
+      onChange={console.log}
+      maxLength={50}
+    />
+  );
+};
+OnChange.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText("Ipsum enim quis culpa");
+  userEvent.click(input);
+  await userEvent.type(input, "Aute fugiat ut culpa");
+  const text = canvas.getByText("30 tegn igjen");
+  expect(text).toBeVisible();
+};
+
 export const Controlled: StoryFn = () => {
   const [value, setValue] = useState("");
   return (
@@ -186,3 +206,20 @@ AutoScrollbar.argTypes = {
   maxRows: { type: "number" },
   minRows: { type: "number" },
 };
+
+export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
+  // Story added after fixing an issue where TextareaAutoSize would reach max re-renders
+  // and set the height to 2px when used in StrictMode in a Modal that is initially open.
+  return (
+    <React.StrictMode>
+      <Modal open>
+        <Modal.Body>
+          <Textarea label="Har du noen tilbakemeldinger?" />
+        </Modal.Body>
+      </Modal>
+    </React.StrictMode>
+  );
+};
+ModalStrictMode.parameters = {
+  chromatic: { disable: true }, // Not reproducable in Chromatic
+};

package/src/index.ts

@@ -8,8 +8,8 @@ export * from "./date";
 export * from "./dropdown";
 export * from "./expansion-card";
 export * from "./form";
-export * from "./grid";
 export * from "./guide-panel";
+export * from "./overlays";
 export * from "./help-text";
 export * from "./internal-header";
 export * from "./link";
@@ -36,6 +36,5 @@ export * from "./layout/bleed";
 export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
-export * from "./layout/content-container";
 export * from "./layout/responsive";
 export * from "./layout/page";

package/src/layout/bleed/Bleed.stories.tsx

@@ -272,6 +272,19 @@ export const Full = {
             </Bleed>
           </Box>
         </Box>
+        <Box
+          className="maxWidth"
+          background="surface-alt-1-subtle"
+          padding="10"
+        >
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="full" reflectivePadding asChild>
+              <Box background="surface-success-subtle">
+                <BodyLong>full + reflectivePadding</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
       </VStack>
     </>
   ),

package/src/layout/bleed/Bleed.tsx

@@ -13,7 +13,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * @example
    * marginInline='4'
    * marginInline='4 5'
-   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6', "2xl": '12'}}
    */
   marginInline?: ResponsiveProp<
     BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`
@@ -23,7 +23,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * @example
    * marginBlock='4'
    * marginBlock='4 5'
-   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6', "2xl": '12'}}
    */
   marginBlock?: ResponsiveProp<
     BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`

package/src/layout/box/Box.stories.tsx

@@ -196,7 +196,7 @@ export const PaddingBreakpoints = {
   render: () => (
     <div>
       <Box
-        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
+        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6", "2xl": "8" }}
         background="surface-neutral"
       >
         <Box background="surface-alt-3-subtle">

package/src/layout/sidemal-test/navno-sidemal.stories.tsx

@@ -13,6 +13,7 @@ const meta = {
   title: "kitchen sink/navno-sidemal",
   parameters: {
     layout: "fullscreen",
+    chromatic: { disableSnapshot: true },
   },
 } satisfies Meta;
 

package/src/layout/utilities/css.ts

@@ -44,6 +44,9 @@ const translateTokenStringToCSS = (
       if (componentProp === "margin-inline" && x === "full") {
         const width = 100 / arr.length;
         return `calc((100vw - ${width}%)/-2)`;
+      } else if (componentProp === "padding-inline" && x === "full") {
+        const width = 100 / arr.length;
+        return `calc((100vw - ${width}%)/2)`;
       }
 
       let output = `var(--a-${tokenSubgroup}-${x})`;

package/src/layout/utilities/types.ts

@@ -14,7 +14,7 @@ export type BorderRadiiToken =
   | "0";
 export type ShadowToken = keyof typeof shadows.a.shadow;
 
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
 export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
 

package/src/overlays/index.ts

@@ -0,0 +1,2 @@
+export { Portal } from "./portal/Portal";
+export type { PortalProps } from "./portal/Portal";

package/src/overlays/portal/Portal.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Box } from "../../layout/box";
+import { Provider } from "../../provider";
+import { Portal } from "./Portal";
+
+export default {
+  title: "Utilities/Portal",
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Default = () => {
+  return (
+    <Box background="surface-neutral-subtle" border>
+      <h1>In regular DOM tree</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+        necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
+        commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
+        impedit commodi. Tenetur!
+      </p>
+      <Portal>
+        <h1>Inside Portal to different DOM tree</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+          necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
+          eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
+          molestias impedit commodi. Tenetur!
+        </p>
+      </Portal>
+    </Box>
+  );
+};
+
+export const CustomPortalRoot = () => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLDivElement | null>(null);
+
+  return (
+    <Box background="surface-neutral-subtle">
+      <Box background="surface-alt-1-subtle">
+        <h1>Tree A</h1>
+        <Portal rootElement={portalContainer}>
+          <p>This is mounted to Tree B, while created inside Tree A</p>
+        </Portal>
+      </Box>
+      <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
+        <h1>Tree B</h1>
+      </Box>
+    </Box>
+  );
+};
+
+export const CustomPortalRootFromProvider = () => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLDivElement>();
+
+  return (
+    <Provider rootElement={portalContainer}>
+      <Box background="surface-neutral-subtle">
+        <Box background="surface-alt-1-subtle">
+          <h1>Tree A</h1>
+          <Portal>
+            <p>This is mounted to Tree B, while created inside Tree A</p>
+          </Portal>
+        </Box>
+        <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
+          <h1>Tree B</h1>
+        </Box>
+      </Box>
+    </Provider>
+  );
+};
+
+export const AsChild = () => {
+  return (
+    <Box background="surface-neutral-subtle" border>
+      <h1>In regular DOM tree</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+        necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
+        commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
+        impedit commodi. Tenetur!
+      </p>
+      <Portal asChild>
+        <div data-this-is-the-child>
+          <h1>Inside Portal to different DOM tree</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+            necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
+            eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
+            molestias impedit commodi. Tenetur!
+          </p>
+        </div>
+      </Portal>
+    </Box>
+  );
+};

package/src/overlays/portal/Portal.tsx

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes, forwardRef } from "react";
+import ReactDOM from "react-dom";
+import { useProvider } from "../../provider";
+import { Slot } from "../../util/Slot";
+import { AsChildProps } from "../../util/types";
+
+interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * An optional container where the portaled content should be appended.
+   */
+  rootElement?: HTMLElement | null;
+}
+
+export type PortalProps = PortalBaseProps & AsChildProps;
+
+export const Portal = forwardRef<HTMLDivElement, PortalProps>(
+  ({ rootElement, asChild, ...rest }, ref) => {
+    const contextRoot = useProvider()?.rootElement;
+    const root = rootElement ?? contextRoot ?? globalThis?.document?.body;
+
+    const Component = asChild ? Slot : "div";
+
+    return root
+      ? ReactDOM.createPortal(
+          <Component ref={ref} data-aksel-portal="" {...rest} />,
+          root,
+        )
+      : null;
+  },
+);
+
+export default Portal;

package/src/tabs/TabList.tsx

@@ -1,4 +1,4 @@
-import { TabsList } from "@radix-ui/react-tabs";
+import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, {
   forwardRef,
@@ -112,7 +112,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
         {showSteppers && (
           <ScrollButton dir={-1} hidden={!displayScroll.start} />
         )}
-        <TabsList
+        <RadixTabs.TabsList
           {...rest}
           ref={mergedRef}
           onScroll={updateScrollButtonState}

package/src/tabs/TabPanel.tsx

@@ -1,4 +1,4 @@
-import { TabsContent } from "@radix-ui/react-tabs";
+import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 
@@ -15,7 +15,7 @@ export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
   ({ className, ...rest }, ref) => (
-    <TabsContent
+    <RadixTabs.TabsContent
       {...rest}
       ref={ref}
       className={cl("navds-tabs__tabpanel", className)}

package/src/timeline/AxisLabels.tsx

@@ -13,7 +13,7 @@ import {
   startOfYear,
   subDays,
 } from "date-fns";
-import nbLocale from "date-fns/locale/nb";
+import { nb as nbLocale } from "date-fns/locale";
 import React from "react";
 import { Detail } from "../typography/Detail";
 import { useTimelineContext } from "./hooks/useTimelineContext";

package/src/tooltip/Tooltip.tsx

@@ -1,5 +1,4 @@
 import {
-  FloatingPortal,
   autoUpdate,
   arrow as flArrow,
   flip,
@@ -21,7 +20,7 @@ import React, {
   useRef,
 } from "react";
 import { ModalContext } from "../modal/ModalContext";
-import { useProvider } from "../provider";
+import Portal from "../overlays/portal/Portal";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -123,10 +122,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const modalContext = useContext(ModalContext);
-    const providerRootElement = useProvider()?.rootElement;
-    const rootElement = modalContext
-      ? modalContext.ref.current
-      : providerRootElement;
+    const rootElement = modalContext ? modalContext.ref.current : undefined;
 
     const {
       x,
@@ -199,7 +195,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               : children?.props["aria-describedby"],
           }),
         )}
-        <FloatingPortal root={rootElement}>
+        <Portal rootElement={rootElement}>
           {_open && (
             <div
               {...getFloatingProps({
@@ -253,7 +249,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               )}
             </div>
           )}
-        </FloatingPortal>
+        </Portal>
       </>
     );
   },

package/src/util/Slot.tsx

@@ -20,10 +20,12 @@ export const Slot = React.forwardRef<HTMLElement, SlotProps>(
     }
 
     if (React.Children.count(children) > 1) {
-      console.error(
+      const error = new Error(
         "Aksel: Components using 'asChild' expects to recieve a single React element child.",
       );
-      return React.Children.only(null);
+      error.name = "SlotError";
+      Error.captureStackTrace?.(error, Slot);
+      throw error;
     }
 
     return null;