@navikt/ds-react 5.5.0 → 5.6.0-beta.0

package/src/form/combobox/Combobox.tsx

@@ -14,11 +14,9 @@ import Input from "./Input/Input";
 
 export const Combobox = forwardRef<
   HTMLInputElement,
-  Omit<ComboboxProps, "onChange" | "options" | "size">
+  Omit<ComboboxProps, "onChange" | "options" | "size" | "onClear" | "value">
 >((props, ref) => {
   const {
-    value: externalValue,
-    onClear,
     className,
     hideLabel = false,
     description,
@@ -87,6 +85,7 @@ export const Combobox = forwardRef<
         </BodyShort>
       )}
       <div className="navds-combobox__wrapper">
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
           className={cl(
             "navds-combobox__wrapper-inner navds-text-field__input",

package/src/form/combobox/Input/Input.tsx

@@ -14,13 +14,11 @@ interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
   ref: React.Ref<HTMLInputElement>;
   inputClassName?: string;
-  errorId?: string;
   value?: string;
-  error?: React.ReactNode;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ inputClassName, error, errorId, ...rest }, ref) => {
+  ({ inputClassName, ...rest }, ref) => {
     const { clearInput, inputProps, onChange, size, value } = useInputContext();
     const {
       selectedOptions,

package/src/form/combobox/combobox.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useState, useId, useMemo } from "react";
 import { userEvent, within } from "@storybook/testing-library";
@@ -286,28 +285,26 @@ export const ComboboxSizes = () => (
   </>
 );
 
-export const WithError: StoryObject = {
-  args: {
-    error: "Du må velge en favorittfrukt.",
-  },
-  render: (props) => {
-    const [hasSelectedValue, setHasSelectedValue] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    return (
-      <UNSAFE_Combobox
-        filteredOptions={isLoading ? [] : undefined}
-        options={options}
-        label="Hva er dine favorittfrukter?"
-        error={!hasSelectedValue && props.error}
-        isLoading={isLoading}
-        onChange={() => {
-          setIsLoading(true);
-          setTimeout(() => setIsLoading(false), 2000);
-        }}
-        onToggleSelected={(_, isSelected) => setHasSelectedValue(isSelected)}
-      />
-    );
-  },
+export const WithError: StoryFunction = (props) => {
+  const [hasSelectedValue, setHasSelectedValue] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  return (
+    <UNSAFE_Combobox
+      filteredOptions={isLoading ? [] : undefined}
+      options={options}
+      label="Hva er dine favorittfrukter?"
+      error={!hasSelectedValue && props.error}
+      isLoading={isLoading}
+      onChange={() => {
+        setIsLoading(true);
+        setTimeout(() => setIsLoading(false), 2000);
+      }}
+      onToggleSelected={(_, isSelected) => setHasSelectedValue(isSelected)}
+    />
+  );
+};
+WithError.args = {
+  error: "Du må velge en favorittfrukt.",
 };
 
 function sleep(ms: number) {

package/src/form/combobox/combobox.test.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable react/jsx-pascal-case */
-import { render } from "@testing-library/react";
+/* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { UNSAFE_Combobox } from "..";
@@ -38,54 +38,58 @@ const App = (props) => {
 describe("Render combobox", () => {
   describe("with multi select", () => {
     it("Should be able to search, select and remove selections", async () => {
-      const utils = render(<App isMultiSelect options={options} />);
+      render(<App isMultiSelect options={options} />);
 
       await act(async () => {
         await userEvent.click(
-          utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+          screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
         );
       });
       await act(async () => {
         await userEvent.type(
-          utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
           "apple"
         );
       });
       await act(async () => {
         await userEvent.click(
-          await utils.findByRole("option", { name: "apple" })
+          await screen.findByRole("option", { name: "apple" })
         );
       });
       expect(
-        await utils.findByRole("option", { name: "apple", selected: true })
+        await screen.findByRole("option", { name: "apple", selected: true })
       ).toBeInTheDocument();
       await act(async () => {
         await userEvent.click(
-          await utils.findByRole("button", { name: "apple slett" })
+          await screen.findByRole("button", { name: "apple slett" })
         );
       });
     });
   });
 
   it("Should show loading icon when loading (used for async search)", async () => {
-    const utils = render(<App options={[]} isListOpen isLoading />);
+    render(<App options={[]} isListOpen isLoading />);
 
-    expect(await utils.findByRole("option", { name: "venter..." }));
+    expect(
+      await screen.findByRole("option", { name: "venter..." })
+    ).toBeInTheDocument();
   });
 });
 
 describe("Combobox state-handling", () => {
   it("Should not select previous focused element when closes", async () => {
-    const utils = render(<App options={options} />);
+    render(<App options={options} />);
 
     await act(async () => {
       await userEvent.click(
-        utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
       );
     });
     await act(async () => {
       await userEvent.type(
-        utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
         "ban"
       );
       await userEvent.keyboard("{ArrowDown}");
@@ -93,22 +97,20 @@ describe("Combobox state-handling", () => {
       await userEvent.keyboard("{Enter}");
     });
 
-    expect(
-      await utils.queryByRole("button", { name: "banana slett" })
-    ).toBeNull();
+    expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
   });
 
   it("Should reset list when resetting input (ESC)", async () => {
-    const utils = render(<App options={options} />);
+    render(<App options={options} />);
 
     await act(async () => {
       await userEvent.click(
-        utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
       );
     });
     await act(async () => {
       await userEvent.type(
-        utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
         "apple"
       );
       await userEvent.keyboard("{ArrowDown}");
@@ -117,7 +119,7 @@ describe("Combobox state-handling", () => {
     });
 
     expect(
-      await utils.findByRole("option", { name: "banana" })
+      await screen.findByRole("option", { name: "banana" })
     ).toBeInTheDocument();
   });
 });

package/src/form/radio/radio.stories.tsx

@@ -1,58 +1,53 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Radio, RadioGroup } from "../../index";
 
-export default {
+const meta: Meta<typeof Radio> = {
   title: "ds-react/Radio",
   component: Radio,
-  subcomponents: {
-    RadioGroup,
-  },
   argTypes: {
-    size: { control: { type: "select", options: ["medium", "small"] } },
+    size: {
+      options: ["medium", "small"],
+      control: { type: "radio" },
+    },
   },
-} as Meta;
+};
+export default meta;
 
-export const Default = {
-  render: (props) => {
-    const [state, setState] = useState("radio1");
+export const Default = (props) => {
+  const [state, setState] = useState("radio1");
 
-    return (
-      <RadioGroup
-        legend={props.legend}
-        description={props.description}
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : undefined}
-        hideLegend={props.hideLegend}
-        error={props.error ? "Errormelding" : undefined}
-        size={props?.size}
+  return (
+    <RadioGroup
+      legend={props.legend}
+      description={props.description}
+      value={props.controlled ? state : undefined}
+      onChange={props.controlled ? setState : undefined}
+      hideLegend={props.hideLegend}
+      error={props.error ? "Errormelding" : undefined}
+      size={props?.size}
+    >
+      <Radio value="radio1">{props.children || "Apple"}</Radio>
+      <Radio
+        value="radio2"
+        description={props.radioDescription ? "Orange description" : undefined}
       >
-        <Radio value="radio1">{props.children || "Apple"}</Radio>
-        <Radio
-          value="radio2"
-          description={
-            props.radioDescription ? "Orange description" : undefined
-          }
-        >
-          {props.children || "Orange"}
-        </Radio>
-        <Radio value="radio3">{props.children || "Banana"}</Radio>
-        <Radio value="radio4">{props.children || "Melon"}</Radio>
-      </RadioGroup>
-    );
-  },
-
-  args: {
-    controlled: false,
-    error: false,
-    size: "medium",
-    legend: "Legend-tekst",
-    radioDescription: false,
-    hideLegend: false,
-    children: "",
-    description: "",
-  },
+        {props.children || "Orange"}
+      </Radio>
+      <Radio value="radio3">{props.children || "Banana"}</Radio>
+      <Radio value="radio4">{props.children || "Melon"}</Radio>
+    </RadioGroup>
+  );
+};
+Default.args = {
+  controlled: false,
+  error: false,
+  size: "medium",
+  legend: "Legend-tekst",
+  radioDescription: false,
+  hideLegend: false,
+  children: "",
+  description: "",
 };
 
 export const Group = () => (

package/src/form/search/Search.tsx

@@ -153,6 +153,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     };
 
     return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         onKeyDown={(e) => {
           if (e.key !== "Escape") {

package/src/form/search/search.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 
@@ -32,31 +31,28 @@ export default {
   },
 } as Meta;
 
-export const Default = {
-  render: (props) => {
-    const [state, setState] = useState("");
-    return (
-      <div data-theme={props.darkmode ? "dark" : "light"}>
-        <Search
-          value={props.controlled ? state : undefined}
-          onChange={props.controlled ? setState : undefined}
-          label="Søk"
-          size={props.size}
-          clearButton={props.clearButton}
-          variant={props.variant}
-          hideLabel={props.hideLabel}
-          error={props.error}
-          onSearchClick={console.log}
-        />
-      </div>
-    );
-  },
-
-  args: {
-    controlled: false,
-    darkmode: false,
-    hideLabel: true,
-  },
+export const Default = (props) => {
+  const [state, setState] = useState("");
+  return (
+    <div data-theme={props.darkmode ? "dark" : "light"}>
+      <Search
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        label="Søk"
+        size={props.size}
+        clearButton={props.clearButton}
+        variant={props.variant}
+        hideLabel={props.hideLabel}
+        error={props.error}
+        onSearchClick={console.log}
+      />
+    </div>
+  );
+};
+Default.args = {
+  controlled: false,
+  darkmode: false,
+  hideLabel: true,
 };
 
 export const Small = () => (

package/src/form/stories/fieldset.stories.tsx

@@ -114,7 +114,7 @@ export const Disabled = () => (
   </div>
 );
 
-export const hideLegend = () => (
+export const HideLegend = () => (
   <Fieldset legend="Mollit eiusmod" hideLegend>
     {content}
   </Fieldset>