@navikt/ds-react 5.5.0 → 5.6.0

package/src/tooltip/Tooltip.test.tsx

@@ -1,13 +1,16 @@
-import { act, cleanup, fireEvent } from "@testing-library/react";
+import { act, fireEvent, screen } from "@testing-library/react";
 import React from "react";
-import { focusVisible, simulatePointerDown } from "../../tests/utils";
+import {
+  focusVisible,
+  simulatePointerDown,
+  renderWithStyles as render,
+} from "../../tests/utils";
 import userEvent from "@testing-library/user-event";
 import Tooltip from "./Tooltip";
-import { renderWithStyles as render } from "../../tests/utils";
 
 describe("Tooltip", () => {
   test("controlled open", () => {
-    const { getByRole } = render(
+    render(
       <Tooltip content="Hello World" open>
         <button id="testChild" type="submit">
           Hello World
@@ -15,12 +18,11 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    expect(getByRole("tooltip")).toBeVisible();
-    cleanup();
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   test("default open", () => {
-    const { getByRole } = render(
+    render(
       <Tooltip content="Hello World" defaultOpen>
         <button id="testChild" type="submit">
           Hello World
@@ -28,12 +30,11 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    expect(getByRole("tooltip")).toBeVisible();
-    cleanup();
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   test("Focus", async () => {
-    const { getByRole } = render(
+    render(
       <Tooltip content="Hello World">
         <button id="testChild" type="submit">
           Hello World
@@ -42,14 +43,12 @@ describe("Tooltip", () => {
     );
     simulatePointerDown();
 
-    focusVisible(getByRole("button"));
-    expect(getByRole("tooltip")).toBeVisible();
-
-    cleanup();
+    focusVisible(screen.getByRole("button"));
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   test("Escape", async () => {
-    const { queryByRole, getByRole } = render(
+    render(
       <Tooltip content="Hello World">
         <button id="testChild" type="submit">
           Hello World
@@ -58,21 +57,17 @@ describe("Tooltip", () => {
     );
     simulatePointerDown();
 
-    focusVisible(getByRole("button"));
-    expect(getByRole("tooltip")).toBeVisible();
-
-    act(() => {
-      fireEvent.keyDown(document, { key: "Escape" });
-    });
-    expect(queryByRole("tooltip")).toBeNull();
+    focusVisible(screen.getByRole("button"));
+    expect(screen.getByRole("tooltip")).toBeVisible();
 
-    cleanup();
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(screen.queryByRole("tooltip")).toBeNull();
   });
 
   it("delay", async () => {
     const user = userEvent.setup();
 
-    const { queryByRole, getByRole } = render(
+    render(
       <Tooltip content="Hello World" delay={300}>
         <button id="testChild" type="submit">
           Hello World
@@ -81,18 +76,17 @@ describe("Tooltip", () => {
     );
 
     await act(async () => {
-      await user.hover(getByRole("button"));
+      await user.hover(screen.getByRole("button"));
       await new Promise((r) => setTimeout(r, 250));
-      expect(queryByRole("tooltip")).toBeNull();
+      expect(screen.queryByRole("tooltip")).toBeNull();
       await new Promise((r) => setTimeout(r, 600));
     });
 
-    expect(getByRole("tooltip")).toBeVisible();
-    cleanup();
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   it("outsideClick", async () => {
-    const { queryByRole, getByRole } = render(
+    render(
       <div>
         <Tooltip content="Hello World">
           <button id="testChild" type="submit">
@@ -103,21 +97,19 @@ describe("Tooltip", () => {
       </div>
     );
 
-    simulatePointerDown(getByRole("button"));
-    focusVisible(getByRole("button"));
+    simulatePointerDown(screen.getByRole("button"));
+    focusVisible(screen.getByRole("button"));
 
     await act(async () => {
-      expect(getByRole("tooltip")).toBeVisible();
-      getByRole("link").focus();
+      expect(screen.getByRole("tooltip")).toBeVisible();
+      screen.getByRole("link").focus();
     });
 
-    expect(queryByRole("tooltip")).toBeNull();
-
-    cleanup();
+    expect(screen.queryByRole("tooltip")).toBeNull();
   });
 
   it("keep open on tooltip-click", async () => {
-    const { getByRole } = render(
+    render(
       <div>
         <Tooltip content="Hello World">
           <button id="testChild" type="submit">
@@ -127,21 +119,17 @@ describe("Tooltip", () => {
       </div>
     );
 
-    simulatePointerDown(getByRole("button"));
-    focusVisible(getByRole("button"));
+    simulatePointerDown(screen.getByRole("button"));
+    focusVisible(screen.getByRole("button"));
 
-    await act(async () => {
-      expect(getByRole("tooltip")).toBeVisible();
-      fireEvent.click(getByRole("tooltip"));
-    });
+    expect(screen.getByRole("tooltip")).toBeVisible();
+    fireEvent.click(screen.getByRole("tooltip"));
 
-    expect(getByRole("tooltip")).toBeVisible();
-
-    cleanup();
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   it("close on focus-loss", async () => {
-    const { getByRole, queryByRole } = render(
+    render(
       <div>
         <Tooltip content="Hello World">
           <button id="testChild" type="submit">
@@ -152,16 +140,14 @@ describe("Tooltip", () => {
       </div>
     );
 
-    simulatePointerDown(getByRole("button"));
-    focusVisible(getByRole("button"));
+    simulatePointerDown(screen.getByRole("button"));
+    focusVisible(screen.getByRole("button"));
 
     await act(async () => {
-      expect(getByRole("tooltip")).toBeVisible();
-      getByRole("link").focus();
+      expect(screen.getByRole("tooltip")).toBeVisible();
+      screen.getByRole("link").focus();
     });
 
-    expect(queryByRole("tooltip")).toBeNull();
-
-    cleanup();
+    expect(screen.queryByRole("tooltip")).toBeNull();
   });
 });

package/src/tooltip/Tooltip.tsx

@@ -125,7 +125,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     } = useFloating({
       placement: _placement,
       open: userOpen ?? open,
-      onOpenChange: setOpen,
+      onOpenChange: (_open) => setOpen(_open),
       middleware: [
         offset(_offset ? _offset : _arrow ? 10 : 2),
         shift(),

package/src/typography/Heading.tsx

@@ -52,7 +52,7 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
       },
       ref
     ) => {
-      let HeadingTag = as ?? (`h${level}` as React.ElementType);
+      const HeadingTag = as ?? (`h${level}` as React.ElementType);
 
       return (
         <HeadingTag

package/src/util/RandomIcon.tsx

@@ -1,6 +1,7 @@
 import * as AllIcons from "@navikt/aksel-icons";
 import React from "react";
 
+// eslint-disable-next-line import/namespace
 const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
 
 export const RandomIcon = () => {

package/src/util/Slot.tsx

@@ -0,0 +1,69 @@
+// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
+import * as React from "react";
+import mergeRefs from "./mergeRefs";
+
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+export const Slot = React.forwardRef<HTMLElement, SlotProps>(
+  (props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+
+    if (React.isValidElement(children)) {
+      return React.cloneElement<any>(children, {
+        ...mergeProps(slotProps, children.props),
+        ref: forwardedRef
+          ? mergeRefs([forwardedRef, (children as any).ref])
+          : (children as any).ref,
+      });
+    }
+
+    if (React.Children.count(children) > 1) {
+      console.error(
+        "Aksel: Components using 'asChild' expects to recieve a single React element child."
+      );
+      return React.Children.only(null);
+    }
+
+    return null;
+  }
+);
+
+function mergeProps(
+  slotProps: Record<string, any>,
+  childProps: Record<string, any>
+) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      }
+      // but if it exists only on the slot, we use only this one
+      else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    }
+    // if it's `style`, we merge them
+    else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue]
+        .filter(Boolean)
+        .join(" ");
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}

package/src/util/__tests__/Slot.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import React from "react";
+import { Button } from "../../button";
+import { Slot } from "../Slot";
+
+describe("Slot", () => {
+  describe("should handle forwarning events", () => {
+    test("Should call onClick when event is on Slot", async () => {
+      const handleClick = jest.fn();
+      render(
+        <Slot onClick={handleClick}>
+          <Button>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Should call onClick when event is on Child", async () => {
+      const handleClick = jest.fn();
+      render(
+        <Slot>
+          <Button onClick={handleClick}>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Should call onClick when event is on Child and Slot", async () => {
+      const handleClickSlot = jest.fn();
+      const handleClick = jest.fn();
+      render(
+        <Slot onClick={handleClickSlot}>
+          <Button onClick={handleClick}>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClickSlot).toHaveBeenCalledTimes(1);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Should call onClick when event is on Child and undefined on Slot", async () => {
+      const handleClick = jest.fn();
+      render(
+        <Slot onClick={undefined}>
+          <Button onClick={handleClick}>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Should call onClick when event is on Slot and undefined on Child", async () => {
+      const handleClick = jest.fn();
+      render(
+        <Slot onClick={handleClick}>
+          <Button onClick={undefined}>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("should handle className", () => {
+    test("Should merge className correctly when Child and Slot has className", async () => {
+      render(
+        <Slot className="class1">
+          <button className="class2 class2--inline">Button</button>
+        </Slot>
+      );
+      expect(screen.getByRole("button").className).toEqual(
+        "class1 class2 class2--inline"
+      );
+    });
+
+    test("Should merge className correctly when Child has className and Slot has undefined className", async () => {
+      render(
+        <Slot className={undefined}>
+          <button className="class2 class2--inline">Button</button>
+        </Slot>
+      );
+      expect(screen.getByRole("button").className).toEqual(
+        "class2 class2--inline"
+      );
+    });
+
+    test("Should merge className correctly when Slot has className and Child has undefined className", async () => {
+      render(
+        <Slot className="class1">
+          <button className={undefined}>Button</button>
+        </Slot>
+      );
+      expect(screen.getByRole("button").className).toEqual("class1");
+    });
+  });
+});

package/src/util/mergeRefs.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // https://github.com/gregberge/react-merge-refs
-export default function mergeRefs<T = any>(
+export default function mergeRefs<T>(
   refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
 ): React.RefCallback<T> {
   return (value) => {

package/src/util/useId.ts

@@ -18,10 +18,8 @@ function useGlobalId(idOverride?: string): string | undefined {
   return id;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
 const maybeReactUseId: undefined | (() => string) = (React as any)[
-  // eslint-disable-next-line no-useless-concat
-  "useId" + ""
+  "useId" + "" // Workaround for https://github.com/webpack/webpack/issues/14814
 ];
 /**
  *

package/cjs/date/datepicker/caption/Caption.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerCaption = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
-const react_1 = __importDefault(require("react"));
-const react_day_picker_1 = require("react-day-picker");
-const __1 = require("../../..");
-const DatePickerCaption = ({ displayMonth, id }) => {
-    const { goToMonth, nextMonth, previousMonth } = (0, react_day_picker_1.useNavigation)();
-    const { labels: { labelPrevious, labelNext }, formatters: { formatCaption }, locale, } = (0, react_day_picker_1.useDayPicker)();
-    const previousLabel = labelPrevious(previousMonth, { locale });
-    const nextLabel = labelNext(nextMonth, { locale });
-    return (react_1.default.createElement("div", { className: "navds-date__caption" },
-        react_1.default.createElement(__1.Label, { as: "span", "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-date__caption-label" }, formatCaption(displayMonth, { locale })),
-        react_1.default.createElement("div", { className: "navds-date__caption__month-wrapper" },
-            react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button", type: "button" }),
-            react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" }))));
-};
-exports.DatePickerCaption = DatePickerCaption;
-exports.default = exports.DatePickerCaption;

package/cjs/date/datepicker/caption/index.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownCaption = exports.Caption = void 0;
-var Caption_1 = require("./Caption");
-Object.defineProperty(exports, "Caption", { enumerable: true, get: function () { return __importDefault(Caption_1).default; } });
-var DropdownCaption_1 = require("./DropdownCaption");
-Object.defineProperty(exports, "DropdownCaption", { enumerable: true, get: function () { return __importDefault(DropdownCaption_1).default; } });

package/cjs/date/datepicker/caption/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../../esm/date/datepicker/caption/index.js",
-  "types": "../../../../esm/date/datepicker/caption/index.d.ts"
-}

package/esm/date/datepicker/DayButton.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import { DayProps } from "react-day-picker";
-export declare const DayButton: (props: DayProps) => React.JSX.Element;

package/esm/date/datepicker/DayButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DayButton.js","sourceRoot":"","sources":["../../../src/date/datepicker/DayButton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,MAAM,EAAY,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAe,EAAE,EAAE;IAC3C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAC1E,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAE1D,IAAI,SAAS,CAAC,QAAQ,EAAE;QACtB,OAAO,yCAAK,CAAC;KACd;IACD,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;QACvB,OAAO,6CAAS,SAAS,CAAC,QAAQ,EAAI,CAAC;KACxC;IAED,OAAO,CACL,oBAAC,MAAM,kBACL,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,SAAS,IACV,SAAS,CAAC,WAAW,kBACb,QAAQ,iBACP,SAAS,CAAC,eAAe,CAAC,OAAO,IAC9C,CACH,CAAC;AACJ,CAAC,CAAC"}

package/esm/date/datepicker/TableHead.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-/** Render the table head. */
-export declare function TableHead(): JSX.Element;

package/esm/date/datepicker/TableHead.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableHead.js","sourceRoot":"","sources":["../../../src/date/datepicker/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEzD,6BAA6B;AAC7B,MAAM,UAAU,SAAS;;IACvB,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;IAC1D,MAAM,gBAAgB,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,mCAAI,OAAO,CAAC;IACxD,OAAO,CACL,+BAAO,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI;QACnD,oBAAC,gBAAgB,OAAG,CACd,CACT,CAAC;AACJ,CAAC"}

package/esm/date/datepicker/caption/Caption.js

@@ -1,17 +0,0 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
-import React from "react";
-import { useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Label } from "../../..";
-export const DatePickerCaption = ({ displayMonth, id }) => {
-    const { goToMonth, nextMonth, previousMonth } = useNavigation();
-    const { labels: { labelPrevious, labelNext }, formatters: { formatCaption }, locale, } = useDayPicker();
-    const previousLabel = labelPrevious(previousMonth, { locale });
-    const nextLabel = labelNext(nextMonth, { locale });
-    return (React.createElement("div", { className: "navds-date__caption" },
-        React.createElement(Label, { as: "span", "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-date__caption-label" }, formatCaption(displayMonth, { locale })),
-        React.createElement("div", { className: "navds-date__caption__month-wrapper" },
-            React.createElement(Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: React.createElement(ArrowLeftIcon, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button", type: "button" }),
-            React.createElement(Button, { "aria-label": nextLabel, icon: React.createElement(ArrowRightIcon, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" }))));
-};
-export default DatePickerCaption;
-//# sourceMappingURL=Caption.js.map

package/esm/date/datepicker/caption/Caption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../src/date/datepicker/caption/Caption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAC;IAChE,MAAM,EACJ,MAAM,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EACpC,UAAU,EAAE,EAAE,aAAa,EAAE,EAC7B,MAAM,GACP,GAAG,YAAY,EAAE,CAAC;IAEnB,MAAM,aAAa,GAAG,aAAa,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,6BAAK,SAAS,EAAC,qBAAqB;QAClC,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,eACC,QAAQ,iBACN,MAAM,EAClB,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,2BAA2B,IAEpC,aAAa,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,CAAC,CAClC;QAER,6BAAK,SAAS,EAAC,oCAAoC;YACjD,oBAAC,MAAM,kBACO,aAAa,EACzB,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,IAAI,SAAS,CAAC,aAAa,CAAC,EACxD,IAAI,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAC,yBAAoB,GAAG,EAClD,SAAS,EAAC,4BAA4B,EACtC,IAAI,EAAC,QAAQ,GACb;YACF,oBAAC,MAAM,kBACO,SAAS,EACrB,IAAI,EAAE,oBAAC,cAAc,IAAC,KAAK,EAAC,uBAAkB,GAAG,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,EAChD,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAC,UAAU,EAClB,SAAS,EAAC,4BAA4B,EACtC,IAAI,EAAC,QAAQ,GACb,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/esm/date/datepicker/caption/DropdownCaption.js

@@ -1,38 +0,0 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
-import setMonth from "date-fns/setMonth";
-import setYear from "date-fns/setYear";
-import startOfMonth from "date-fns/startOfMonth";
-import React from "react";
-import { useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Select } from "../../..";
-import { getMonths, getYears } from "../../utils/get-dates";
-import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
-import { max, min } from "date-fns";
-export const DropdownCaption = ({ displayMonth, id }) => {
-    const { goToMonth, nextMonth, previousMonth } = useNavigation();
-    const { fromDate, toDate, formatters: { formatYearCaption, formatMonthCaption, formatCaption }, labels: { labelPrevious, labelNext }, locale, } = useDayPicker();
-    if (!fromDate || !toDate) {
-        console.warn("Using dropdownCaption required fromDate and toDate");
-        return null;
-    }
-    const handleYearChange = (e) => {
-        const newMonth = setYear(startOfMonth(displayMonth), Number(e.target.value));
-        goToMonth(startOfMonth(min([max([newMonth, fromDate]), toDate])));
-    };
-    const handleMonthChange = (e) => goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));
-    const years = getYears(fromDate, toDate, displayMonth.getFullYear());
-    const months = getMonths(fromDate, toDate, displayMonth);
-    const previousLabel = labelPrevious(previousMonth, { locale });
-    const nextLabel = labelNext(nextMonth, { locale });
-    const yearDropdownLabel = labelYearDropdown(locale);
-    const MonthDropdownLabel = labelMonthDropdown(locale);
-    return (React.createElement("div", { className: "navds-date__caption-dropdown" },
-        React.createElement("span", { "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-sr-only" }, formatCaption(displayMonth, { locale })),
-        React.createElement(Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: React.createElement(ArrowLeftIcon, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button", type: "button" }),
-        React.createElement("div", { className: "navds-date__caption__month-wrapper" },
-            React.createElement(Select, { label: MonthDropdownLabel, hideLabel: true, className: "navds-date__caption__month", value: displayMonth.getMonth(), onChange: handleMonthChange }, months.map((m) => (React.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale }))))),
-            React.createElement(Select, { label: yearDropdownLabel, hideLabel: true, value: displayMonth.getFullYear(), onChange: handleYearChange, className: "navds-date__caption__year" }, years.map((year) => (React.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))),
-        React.createElement(Button, { "aria-label": nextLabel, icon: React.createElement(ArrowRightIcon, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" })));
-};
-export default DropdownCaption;
-//# sourceMappingURL=DropdownCaption.js.map

package/esm/date/datepicker/caption/DropdownCaption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownCaption.js","sourceRoot":"","sources":["../../../../src/date/datepicker/caption/DropdownCaption.tsx"],"names":[],"mappings":"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"}

package/esm/date/datepicker/caption/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Caption } from "./Caption";
-export { default as DropdownCaption } from "./DropdownCaption";

package/esm/date/datepicker/caption/index.js

@@ -1,3 +0,0 @@
-export { default as Caption } from "./Caption";
-export { default as DropdownCaption } from "./DropdownCaption";
-//# sourceMappingURL=index.js.map

package/esm/date/datepicker/caption/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date/datepicker/caption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}