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

package/esm/util/useId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../src/util/useId.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,IAAI,QAAQ,GAAG,CAAC,CAAC;AACjB,SAAS,WAAW,CAAC,UAAmB;IACtC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACvD,MAAM,EAAE,GAAG,UAAU,IAAI,SAAS,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,IAAI,EAAE;YACrB,6CAA6C;YAC7C,6DAA6D;YAC7D,+BAA+B;YAC/B,wHAAwH;YACxH,QAAQ,IAAI,CAAC,CAAC;YACd,YAAY,CAAC,YAAY,QAAQ,EAAE,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,+GAA+G;AAC/G,MAAM,eAAe,GAAgC,KAAa;AAChE,6CAA6C;AAC7C,OAAO,GAAG,EAAE,CACb,CAAC;AACF;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CAAC,UAAmB;;IACvC,IAAI,eAAe,KAAK,SAAS,EAAE;QACjC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;QAClC,OAAO,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;KAClD;IACD,0FAA0F;IAC1F,OAAO,MAAA,WAAW,CAAC,UAAU,CAAC,mCAAI,EAAE,CAAC;AACvC,CAAC"}
+{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../src/util/useId.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,IAAI,QAAQ,GAAG,CAAC,CAAC;AACjB,SAAS,WAAW,CAAC,UAAmB;IACtC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACvD,MAAM,EAAE,GAAG,UAAU,IAAI,SAAS,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,IAAI,EAAE;YACrB,6CAA6C;YAC7C,6DAA6D;YAC7D,+BAA+B;YAC/B,wHAAwH;YACxH,QAAQ,IAAI,CAAC,CAAC;YACd,YAAY,CAAC,YAAY,QAAQ,EAAE,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,eAAe,GAAgC,KAAa,CAChE,OAAO,GAAG,EAAE,CAAC,iEAAiE;CAC/E,CAAC;AACF;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CAAC,UAAmB;;IACvC,IAAI,eAAe,KAAK,SAAS,EAAE;QACjC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;QAClC,OAAO,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;KAClD;IACD,0FAA0F;IAC1F,OAAO,MAAA,WAAW,CAAC,UAAU,CAAC,mCAAI,EAAE,CAAC;AACvC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.5.0",
+  "version": "5.6.0-beta.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -18,8 +18,7 @@
   "module": "./esm/index.js",
   "typings": "./esm/index.d.ts",
   "publishConfig": {
-    "access": "public",
-    "provenance": true
+    "access": "public"
   },
   "files": [
     "/cjs",
@@ -37,7 +36,7 @@
     "test": "TZ=UTC jest"
   },
   "dependencies": {
-    "@floating-ui/react": "0.24.1",
+    "@floating-ui/react": "0.25.4",
     "@navikt/aksel-icons": "^5.5.0",
     "@navikt/ds-tokens": "^5.5.0",
     "@radix-ui/react-tabs": "1.0.0",

package/src/accordion/AccordionItem.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from "react";
 import { AccordionContext } from "./AccordionContext";
+import { omit } from "../util";
 
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -36,10 +37,7 @@ export const AccordionItemContext =
   createContext<AccordionItemContextProps | null>(null);
 
 const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  (
-    { children, className, open, defaultOpen = false, onClick, id, ...rest },
-    ref
-  ) => {
+  ({ children, className, open, defaultOpen = false, ...rest }, ref) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
     const context = useContext(AccordionContext);
 
@@ -64,7 +62,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
           "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
         ref={ref}
-        {...rest}
+        {...omit(rest, ["onClick"])}
       >
         <AccordionItemContext.Provider
           value={{

package/src/accordion/accordion.stories.tsx

@@ -274,39 +274,26 @@ const SingleHeaderAccordion = ({
   );
 };
 
-type sizesType = "large" | "medium" | "small";
-type headingSizesType = "large" | "medium" | "small" | "xsmall";
-const sizes: sizesType[] = ["large", "medium", "small"];
-const headingSizes: headingSizesType[] = ["large", "medium", "small", "xsmall"]; // enum this?!
+const sizes: AccordionProps["size"][] = ["large", "medium", "small"];
+const headingSizes: AccordionProps["headingSize"][] = [
+  "large",
+  "medium",
+  "small",
+  "xsmall",
+];
 
-export const Size = {
-  render: ({ ...props }) => {
-    return (
-      <div style={{ width: 500 }} className="colgap">
-        {sizes.map((element) => (
-          <SingleHeaderAccordion size={element} {...props} />
-        ))}
-      </div>
-    );
-  },
-
-  args: {
-    variant: "neutral",
-  },
-};
-
-export const HeadingSize = {
-  render: ({ ...props }) => {
-    return (
-      <div style={{ width: 500 }} className="colgap">
-        {headingSizes.map((element) => (
-          <SingleHeaderAccordion headingSize={element} {...props} />
-        ))}
-      </div>
-    );
-  },
+export const Size = (props) => (
+  <div style={{ width: 500 }} className="colgap">
+    {sizes.map((size) => (
+      <SingleHeaderAccordion key={size} size={size} {...props} />
+    ))}
+  </div>
+);
 
-  args: {
-    variant: "neutral",
-  },
-};
+export const HeadingSize = (props) => (
+  <div style={{ width: 500 }} className="colgap">
+    {headingSizes.map((size) => (
+      <SingleHeaderAccordion key={size} headingSize={size} {...props} />
+    ))}
+  </div>
+);

package/src/alert/alert.stories.tsx

@@ -140,7 +140,7 @@ export const Heading = () => {
 export const Links = () => {
   return (
     <div className="colgap">
-      {variants.map((variant, i) => (
+      {variants.map((variant) => (
         <Alert key={variant} variant={variant}>
           <Link href="#">Id elit esse enim reprehenderit</Link>
         </Alert>
@@ -156,7 +156,7 @@ const AlertWithCloseButton = ({
   size?: "medium" | "small";
   children?: React.ReactNode;
 }) => {
-  let [show, setShow] = React.useState(true);
+  const [show, setShow] = React.useState(true);
 
   return show ? (
     <Alert

package/src/chips/chips.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Chips } from ".";
 
@@ -23,46 +22,44 @@ export default {
 
 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
 
-export const Default = {
-  render: (props) => {
-    const [selected, setSelected] = useState(["Dansk", "Svensk"]);
-    const [filter, setFilter] = useState(options);
-
-    if (props.type === "toggle") {
-      return (
-        <Chips size={props.size ?? "medium"}>
-          {options.map((c) => (
-            <Chips.Toggle
-              selected={selected.includes(c)}
-              key={c}
-              onClick={() =>
-                setSelected(
-                  selected.includes(c)
-                    ? selected.filter((x) => x !== c)
-                    : [...selected, c]
-                )
-              }
-            >
-              {c}
-            </Chips.Toggle>
-          ))}
-        </Chips>
-      );
-    }
+export const Default = (props) => {
+  const [selected, setSelected] = useState(["Dansk", "Svensk"]);
+  const [filter, setFilter] = useState(options);
 
+  if (props.type === "toggle") {
     return (
       <Chips size={props.size ?? "medium"}>
-        {filter.map((c) => (
-          <Chips.Removable
+        {options.map((c) => (
+          <Chips.Toggle
+            selected={selected.includes(c)}
             key={c}
-            onClick={() => setFilter((x) => x.filter((y) => y !== c))}
+            onClick={() =>
+              setSelected(
+                selected.includes(c)
+                  ? selected.filter((x) => x !== c)
+                  : [...selected, c]
+              )
+            }
           >
             {c}
-          </Chips.Removable>
+          </Chips.Toggle>
         ))}
       </Chips>
     );
-  },
+  }
+
+  return (
+    <Chips size={props.size ?? "medium"}>
+      {filter.map((c) => (
+        <Chips.Removable
+          key={c}
+          onClick={() => setFilter((x) => x.filter((y) => y !== c))}
+        >
+          {c}
+        </Chips.Removable>
+      ))}
+    </Chips>
+  );
 };
 
 export const Toggle = () => {

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -44,7 +44,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
 >(
   (
     {
-      children,
       className,
       locale = "nb",
       dropdownCaption,
@@ -52,7 +51,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       disableWeekends = false,
       showWeekNumber = false,
       selected,
-      id,
       defaultSelected,
       onSelect,
       fixedWeeks = true,
@@ -121,7 +119,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
           showWeekNumber={showWeekNumber}
           fixedWeeks={fixedWeeks}
           showOutsideDays
-          {...omit(rest, ["onSelect"])}
+          {...omit(rest, ["onSelect", "children", "id"])}
         />
       </div>
     );

package/src/date/datepicker/datepicker.stories.tsx

@@ -311,7 +311,7 @@ export const UseRangedDatepickerValidation = () => {
   );
 };
 
-export const defaultShownMonth = () => {
+export const DefaultShownMonth = () => {
   const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     onDateChange: console.log,

package/src/date/datepicker/datepicker.test.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/jsx-pascal-case */
-import { act, render } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { DatePicker, useDatepicker } from "..";
@@ -18,11 +17,13 @@ const App = () => {
 };
 
 describe("Render datepicker", () => {
+  // eslint-disable-next-line jest/expect-expect
   it("Should not crash when e.target is window", async () => {
-    const utils = render(<App />);
+    render(<App />);
 
+    // eslint-disable-next-line testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
     await act(async () => {
-      await userEvent.click(utils.getByText("Velg dato"));
+      await userEvent.click(screen.getByText("Velg dato"));
     });
   });
 });

package/src/date/hooks/useDatepicker.tsx

@@ -207,7 +207,7 @@ export const useDatepicker = (
       return;
     }
     !open && openOnFocus && handleOpen(true);
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,
@@ -227,7 +227,7 @@ export const useDatepicker = (
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,

package/src/date/hooks/useMonthPicker.tsx

@@ -204,7 +204,7 @@ export const useMonthpicker = (
       return;
     }
     !open && openOnFocus && handleOpen(true);
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,
@@ -223,7 +223,7 @@ export const useMonthpicker = (
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,

package/src/date/hooks/useRangeDatepicker.test.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable react/jsx-pascal-case */
-import { act, render } from "@testing-library/react";
+/* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { DatePicker, useRangeDatepicker } from "..";
@@ -23,15 +23,15 @@ const RangeDemo = () => {
 
 describe("Writing in input sets correct values", () => {
   it("useRangeDatepicker same date", async () => {
-    const utils = render(<RangeDemo />);
+    render(<RangeDemo />);
 
-    const fraInput = utils.getByRole("textbox", { name: "Fra" });
-    const tilInput = utils.getByRole("textbox", { name: "Til" });
+    const fraInput = screen.getByRole("textbox", { name: "Fra" });
+    const tilInput = screen.getByRole("textbox", { name: "Til" });
     await act(async () => {
       await userEvent.type(fraInput, "03.08.2022");
       await userEvent.type(tilInput, "03.08.2022");
     });
-    const res = utils.getByTitle("res");
+    const res = screen.getByTitle("res");
     expect(res.innerHTML).toEqual(
       JSON.stringify({
         from: "2022-08-03T00:00:00.000Z",
@@ -40,16 +40,16 @@ describe("Writing in input sets correct values", () => {
     );
   });
 
-  it("useRangeDatepicker before after to ", async () => {
-    const utils = render(<RangeDemo />);
+  it("useRangeDatepicker before after to", async () => {
+    render(<RangeDemo />);
 
-    const fraInput = utils.getByRole("textbox", { name: "Fra" });
-    const tilInput = utils.getByRole("textbox", { name: "Til" });
+    const fraInput = screen.getByRole("textbox", { name: "Fra" });
+    const tilInput = screen.getByRole("textbox", { name: "Til" });
     await act(async () => {
       await userEvent.type(fraInput, "03.08.2022");
       await userEvent.type(tilInput, "02.08.2022");
     });
-    const res = utils.getByTitle("res");
+    const res = screen.getByTitle("res");
     expect(res.innerHTML).toEqual(
       JSON.stringify({
         from: "2022-08-03T00:00:00.000Z",

package/src/date/hooks/useRangeDatepicker.tsx

@@ -325,7 +325,7 @@ export const useRangeDatepicker = (
       return;
     }
     !open && openOnFocus && setOpen(true);
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,
@@ -349,7 +349,7 @@ export const useRangeDatepicker = (
   };
 
   const handleBlur = (e, src: RangeT) => {
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,
@@ -379,7 +379,7 @@ export const useRangeDatepicker = (
     if (range?.from && range?.to) {
       setOpen(false);
     }
-    let prevToRange =
+    const prevToRange =
       !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
 
     const resetTo = isBefore(prevToRange, range?.from);

package/src/date/monthpicker/MonthButton.tsx

@@ -13,9 +13,9 @@ interface MonthType {
   month: Date;
   months: Date[];
   focus: Date | undefined;
-  setFocus: Function;
+  setFocus: (date?: Date) => void;
   tabRoot?: Date;
-  setTabRoot: Function;
+  setTabRoot: (date?: Date) => void;
 }
 
 const disableMonth = (month: Date, fromDate?: Date, toDate?: Date) => {

package/src/date/monthpicker/MonthPicker.tsx

@@ -70,7 +70,7 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Callback for user-controlled state
    */
-  onMonthSelect?: Function;
+  onMonthSelect?: (month?: Date) => void;
   /**
    * Used to set visible year programmatically. Component controlled by default
    */

package/src/date/monthpicker/MonthSelector.tsx

@@ -62,9 +62,9 @@ export const MonthSelector = () => {
   return (
     <BodyShort as="table" className="rdp-table">
       <tbody className="rdp-tbody">
-        {tableMonths.map((x, y) => (
-          <tr className="rdp-row" key={y}>
-            {x.map((month: Date, y) => {
+        {tableMonths.map((months, i) => (
+          <tr className="rdp-row" key={i}>
+            {months.map((month: Date) => {
               return (
                 <td key={month.toDateString()} className="rdp-cell">
                   <MonthButton

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -42,7 +42,7 @@ Default.argTypes = {
   },
 };
 
-export const dropdownCaption = () => {
+export const DropdownCaption = () => {
   return (
     <MonthPicker.Standalone
       dropdownCaption

package/src/date/utils/__tests__/get-initial-year.test.ts

@@ -22,18 +22,6 @@ describe("Returns initial year for monthpicker", () => {
       )
     ).toBeFalsy();
   });
-  test("Default selected should not be valid (false)", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2021"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2020"),
-          /* toDate: new Date("Oct 4 2021"), */
-          /* fromDate: new Date("Oct 4 2021"), */
-        })
-      )
-    ).toBeFalsy();
-  });
   test("Default selected should be valid with fromDate", () => {
     expect(
       isSameYear(

package/src/date/utils/__tests__/is-match.test.ts

@@ -13,13 +13,13 @@ describe("Returns if date is disabled", () => {
   test("Date should be disabled type Date[] (true)", () => {
     expect(isMatch(new Date("Dec 4 2011"), disabled)).toBeTruthy();
   });
-  test("Date should be disabled type Range (true)", () => {
+  test("Date should be disabled type Range (false)", () => {
     expect(isMatch(new Date("Sep 5 2023"), disabled)).toBeTruthy();
   });
   test("Date should be disabled type Range (true)", () => {
     expect(isMatch(new Date("Sep 3 2023"), disabled)).toBeTruthy();
   });
-  test("Date should be disabled type After (true)", () => {
+  test("Date should be disabled type After (same month)(true)", () => {
     expect(
       isMatch(new Date("Aug 5 2018"), [{ after: new Date("Aug 2 2018") }])
     ).toBeTruthy();
@@ -34,7 +34,7 @@ describe("Returns if date is disabled", () => {
       isMatch(new Date("Aug 1 2018"), [{ before: new Date("Aug 2 2018") }])
     ).toBeTruthy();
   });
-  test("Date should be disabled type Before (true)", () => {
+  test("Date should be disabled type Before (false)", () => {
     expect(
       isMatch(new Date("Jul 1 2018"), [{ before: new Date("Aug 2 2018") }])
     ).toBeTruthy();

package/src/date/utils/__tests__/parse-dates.test.ts

@@ -1,12 +1,14 @@
-import { parseDate } from "..";
-import { isValidDate } from "..";
+/* eslint-disable jest/expect-expect */
+import { parseDate, isValidDate } from "..";
 import nb from "date-fns/locale/nb";
 import getMonth from "date-fns/getMonth";
 
 const check = (inp: string) =>
+  // eslint-disable-next-line jest/valid-expect
   expect(isValidDate(parseDate(inp, new Date(), nb, "date", false)));
 
 const checkTwoDigit = (inp: string) =>
+  // eslint-disable-next-line jest/valid-expect
   expect(isValidDate(parseDate(inp, new Date(), nb, "date", true)));
 
 const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);

package/src/date/utils/navigation.ts

@@ -6,7 +6,7 @@ export const nextEnabled = (
   key: string,
   disabled: Matcher[],
   currentMonth: Date,
-  setYearState: Function,
+  setYearState: (date: Date) => void,
   yearState: Date,
   dropdownCaption: boolean,
   fromDate?: Date,
@@ -148,7 +148,7 @@ const loopBack = (
   months: Date[],
   disabled: Matcher[],
   yearState: Date,
-  setYearState: Function,
+  setYearState: (date: Date) => void,
   rowCheck: boolean,
   dropdownCaption: boolean,
   fromDate?: Date,
@@ -191,7 +191,7 @@ const loopForward = (
   currentIndex: number,
   months: Date[],
   yearState: Date,
-  setYearState: Function,
+  setYearState: (date: Date) => void,
   disabled: Matcher[],
   rowCheck: boolean,
   dropdownCaption: boolean,

package/src/dropdown/Toggle.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { DropdownContext } from ".";
+import { DropdownContext } from "./Dropdown";
 
 export interface ToggleProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/dropdown/dropdown.stories.tsx

@@ -60,32 +60,29 @@ export const DefaultOpen = {
   args: { chromatic: { delay: 300 } },
 };
 
-export const ControlledOpen = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [openState, setOpenState] = useState(true);
-    return (
-      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
-        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
-          Toggle
-        </Button>
-        <Dropdown.Menu
-          strategy="fixed"
-          onClose={() => console.log("ONCLOSE CONTROLLED")}
-        >
-          <Dropdown.Menu.GroupedList>
-            <Dropdown.Menu.GroupedList.Heading>
-              Systemer og oppslagsverk
-            </Dropdown.Menu.GroupedList.Heading>
-            <Dropdown.Menu.GroupedList.Item
-              onClick={() => console.log("GroupedList.Item-click")}
-            >
-              Gosys
-            </Dropdown.Menu.GroupedList.Item>
-          </Dropdown.Menu.GroupedList>
-        </Dropdown.Menu>
-      </Dropdown>
-    );
-  },
-  args: { chromatic: { delay: 300 } },
+export const ControlledOpen = () => {
+  const [openState, setOpenState] = useState(true);
+  return (
+    <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+      <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+        Toggle
+      </Button>
+      <Dropdown.Menu
+        strategy="fixed"
+        onClose={() => console.log("ONCLOSE CONTROLLED")}
+      >
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item
+            onClick={() => console.log("GroupedList.Item-click")}
+          >
+            Gosys
+          </Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
 };
+ControlledOpen.args = { chromatic: { delay: 300 } };

package/src/dropdown/index.ts

@@ -1,2 +1 @@
-export { default as Dropdown } from "./Dropdown";
-export * from "./Dropdown";
+export { default as Dropdown, type DropdownProps } from "./Dropdown";