@navikt/ds-react 5.6.4 → 5.7.0

package/src/accordion/AccordionHeader.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Heading } from "../typography/Heading";
+import { Heading } from "../typography";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
 import { ChevronDownIcon } from "@navikt/aksel-icons";

package/src/alert/Alert.tsx

@@ -7,7 +7,7 @@ import {
 } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BodyLong } from "../typography/BodyLong";
+import { BodyLong } from "../typography";
 import { Button } from "../button";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/button/Button.tsx

@@ -1,7 +1,13 @@
-import React, { useRef, useState, forwardRef, useMemo } from "react";
 import cl from "clsx";
-import { OverridableComponent, Loader, mergeRefs, Label } from "../";
-import { omit, useClientLayoutEffect } from "../util";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { Loader } from "../loader";
+import { Label } from "../typography";
+import {
+  mergeRefs,
+  OverridableComponent,
+  omit,
+  useClientLayoutEffect,
+} from "../util";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/chips/Chips.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
 import ToggleChips, { ToggleChipsProps } from "./Toggle";
 import RemovableChips, { RemovableChipsProps } from "./Removable";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util";
 
 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;

package/src/chips/Toggle.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util";
 
 export interface ToggleChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/copybutton/CopyButton.tsx

@@ -8,13 +8,13 @@ import React, {
   useState,
 } from "react";
 import copy from "../util/copy";
-import Label from "../typography/Label";
+import { Label } from "../typography";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
   /**
+   * 'xsmall' should only be used in tables
    * @default "medium"
-   * xsmall should only be used in tables/
    */
   size?: "medium" | "small" | "xsmall";
   /**
@@ -30,12 +30,12 @@ export interface CopyButtonProps
    */
   text?: string;
   /**
-   * Text shown when button is clicked
-   * Only set if used with 'text'-prop
+   * Text shown when button is clicked.
+   * Only set if used with `text`-prop.
    */
   activeText?: string;
   /**
-   *  Callback when 'copied'-state is active
+   * Callback when 'copied'-state is active
    */
   onActiveChange?: (state: boolean) => void;
   /**
@@ -54,17 +54,17 @@ export interface CopyButtonProps
    */
   activeDuration?: number;
   /**
-   * * accessible label for icon (ignored if text is set)
+   * Accessible label for icon (ignored if text is set)
    * @default 'Kopier'
    */
   title?: string;
   /**
-   * accessible label for icon in active-state (ignored if text is set)
+   * Accessible label for icon in active-state (ignored if text is set)
    * @default 'Kopiert'
    */
   activeTitle?: string;
   /**
-   * Icon position in Button
+   * Icon position in button
    * @default "left"
    */
   iconPosition?: "left" | "right";
@@ -125,24 +125,23 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       }, activeDuration);
     };
 
-    const CopyIcon = () => {
-      return active ? (
-        <span className="navds-copybutton__icon">
-          {activeIcon ?? (
-            <CheckmarkIcon
-              aria-hidden={!!text}
-              title={text ? undefined : activeTitle}
-            />
-          )}
-        </span>
-      ) : (
-        <span className="navds-copybutton__icon">
-          {icon ?? (
-            <FilesIcon aria-hidden={!!text} title={text ? undefined : title} />
-          )}
-        </span>
-      );
-    };
+    const copyIcon = (
+      <span className="navds-copybutton__icon">
+        {active
+          ? activeIcon ?? (
+              <CheckmarkIcon
+                aria-hidden={!!text}
+                title={text ? undefined : activeTitle}
+              />
+            )
+          : icon ?? (
+              <FilesIcon
+                aria-hidden={!!text}
+                title={text ? undefined : title}
+              />
+            )}
+      </span>
+    );
 
     return (
       <button
@@ -157,14 +156,14 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           `navds-copybutton--${variant}`,
           {
             "navds-copybutton--icon-only": !text,
+            "navds-copybutton--icon-right": iconPosition === "right",
             "navds-copybutton--active": active,
           }
         )}
         onClick={handleClick}
       >
         <span className="navds-copybutton__content">
-          {iconPosition === "left" && <CopyIcon />}
-
+          {iconPosition === "left" && copyIcon}
           {text &&
             (active ? (
               <Label
@@ -183,7 +182,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
                 {text}
               </Label>
             ))}
-          {iconPosition === "right" && <CopyIcon />}
+          {iconPosition === "right" && copyIcon}
         </span>
       </button>
     );

package/src/copybutton/copy-button.stories.tsx

@@ -1,38 +1,40 @@
-import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
-import { userEvent, within } from "@storybook/testing-library";
 import React from "react";
-import { CopyButton } from ".";
+import { userEvent, within } from "@storybook/testing-library";
+import { Meta, StoryObj } from "@storybook/react";
+import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
 import { Tooltip } from "../tooltip";
+import { CopyButton } from ".";
 
-export default {
+const meta: Meta<typeof CopyButton> = {
   title: "ds-react/CopyButton",
   component: CopyButton,
+};
+export default meta;
+
+type Story = StoryObj<typeof CopyButton>;
+
+export const Default: Story = {
+  render: (props) => <CopyButton {...props} />,
   argTypes: {
     size: {
-      defaultValue: "medium",
       control: { type: "radio" },
-      options: ["small", "medium", "xsmall"],
+      options: ["medium", "small", "xsmall"],
     },
     variant: {
-      defaultValue: undefined,
       control: { type: "radio" },
       options: ["neutral", "action"],
     },
   },
-};
-
-export const Default = {
-  render: (args) => <CopyButton {...args} />,
   args: {
     size: "medium",
-    duration: 2000,
+    activeDuration: 2000,
     copyText: "3.14",
     text: "",
     activeText: "",
   },
 };
 
-export const Interaction = {
+export const Interaction: Story = {
   render: () => (
     <CopyButton
       copyText="3.14"
@@ -50,7 +52,7 @@ export const Interaction = {
   },
 };
 
-export const Variants = {
+export const Variants: Story = {
   render: () => (
     <div className="colgap">
       <CopyButton copyText="3.14" variant="action" text="Kopier" />
@@ -60,7 +62,7 @@ export const Variants = {
   ),
 };
 
-export const IconPosition = {
+export const IconPosition: Story = {
   render: () => (
     <div className="colgap">
       <CopyButton copyText="3.14" iconPosition="left" text="Kopier" />
@@ -70,7 +72,7 @@ export const IconPosition = {
   ),
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <div className="colgap">
       <div className="rowgap">
@@ -115,7 +117,7 @@ export const Sizes = {
   ),
 };
 
-export const Texts = {
+export const Texts: Story = {
   render: () => (
     <div className="colgap">
       <div>
@@ -145,7 +147,7 @@ export const Texts = {
   ),
 };
 
-export const Icons = {
+export const Icons: Story = {
   render: () => (
     <div className="rowgap">
       <div>
@@ -175,7 +177,7 @@ export const Icons = {
   ),
 };
 
-export const InlineDemo = {
+export const InlineDemo: Story = {
   render: () => (
     <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
       <CopyButton size="small" copyText="3.14" /> Kopier dette feltet
@@ -183,7 +185,7 @@ export const InlineDemo = {
   ),
 };
 
-export const WithTooltip = {
+export const WithTooltip: Story = {
   render: () => {
     return (
       <div>
@@ -195,11 +197,11 @@ export const WithTooltip = {
   },
 };
 
-export const Duration = {
+export const Duration: Story = {
   render: () => <CopyButton copyText="3.14" activeDuration={300} />,
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <div className="colgap">
       <CopyButton copyText="3.14" disabled />

package/src/date/DateInput.tsx

@@ -1,10 +1,11 @@
 import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";
 import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
 
 export interface DateInputProps
   extends FormFieldProps,

package/src/date/datepicker/DatePicker.tsx

@@ -1,20 +1,13 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
 import React, { forwardRef, useRef, useState } from "react";
-import {
-  DateRange,
-  DayPicker,
-  DayPickerBase,
-  Matcher,
-  isMatch,
-} from "react-day-picker";
-import { Popover, omit, useId } from "../..";
-import { DateInputProps, DatePickerInput } from "../DateInput";
+import { DateRange, DayPicker, isMatch } from "react-day-picker";
+import { Popover } from "../../popover";
+import { omit, useId } from "../../util";
+import { DatePickerInput } from "../DateInput";
 import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
-import DatePickerStandalone, {
-  DatePickerStandaloneType,
-} from "./DatePickerStandalone";
+import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
@@ -22,114 +15,7 @@ import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
 import TableHead from "./parts/TableHead";
 import WeekNumber from "./parts/WeekNumber";
-
-export type SingleMode = {
-  mode?: "single";
-  onSelect?: (val?: Date) => void;
-  selected?: Date;
-  defaultSelected?: Date;
-  onWeekNumberClick?: never;
-};
-
-export type MultipleMode = {
-  mode: "multiple";
-  onSelect?: (val?: Date[]) => void;
-  selected?: Date[];
-  defaultSelected?: Date[];
-  min?: number;
-  max?: number;
-  /**
-   * Allows selecting a week at a time. Only used with mode="multiple".
-   */
-  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
-};
-
-export type RangeMode = {
-  mode: "range";
-  onSelect?: (val?: DateRange) => void;
-  selected?: DateRange;
-  defaultSelected?: DateRange;
-  min?: number;
-  max?: number;
-  onWeekNumberClick?: never;
-};
-
-type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
-
-//github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
-export interface DatePickerDefaultProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
-    Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
-  /**
-   * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
-   */
-  children?: React.ReactNode;
-  /**
-   * Classname for datepicker in popover
-   */
-  className?: string;
-  /**
-   * Classname for wrapper
-   */
-  wrapperClassName?: string;
-  /**
-   * Changes datepicker locale
-   * @default "nb" (norsk bokmål)
-   */
-  locale?: "nb" | "nn" | "en";
-  /**
-   * The earliest day to start navigation.
-   */
-  fromDate?: Date;
-  /**
-   * The latests day to end navigation.
-   */
-  toDate?: Date;
-  /**
-   * Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
-   * @default false
-   */
-  dropdownCaption?: boolean;
-  /**
-   * Apply the disabled modifier to the matching days.
-   * https://react-day-picker.js.org/api/types/Matcher
-   */
-  disabled?: Matcher[];
-  /**
-   * Disable saturday and sunday.
-   * @default false
-   */
-  disableWeekends?: boolean;
-  /**
-   * Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
-   * @default false
-   */
-  showWeekNumber?: boolean;
-  /**
-   * Open state for user-controlled state. Component controlled by default
-   */
-  open?: boolean;
-  /**
-   * onClose callback for user-controlled state
-   */
-  onClose?: () => void;
-  /**
-   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
-   */
-  onOpenToggle?: () => void;
-  /**
-   * Avoid using if possible!
-   * Changes what CSS position property to use.
-   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
-   * @default See Popover
-   */
-  strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
-}
+import { ConditionalModeProps, DatePickerDefaultProps } from "./types";
 
 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
 
@@ -145,14 +31,12 @@ interface DatePickerComponent
    * />
    * ```
    */
-  Standalone: DatePickerStandaloneType;
+  Standalone: typeof DatePickerStandalone;
   /**
    * Custom TextField for DatePicker
    * @see 🏷️ {@link DateInputProps}
    */
-  Input: React.ForwardRefExoticComponent<
-    DateInputProps & React.RefAttributes<HTMLInputElement>
-  >;
+  Input: typeof DatePickerInput;
 }
 
 /**
@@ -257,6 +141,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               strategy={strategy}
               className="navds-date__popover"
               bubbleEscape={bubbleEscape}
+              flip={false}
             >
               <DayPicker
                 locale={getLocaleFromString(locale)}

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -2,21 +2,21 @@ import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { omit } from "../..";
+import { omit } from "../../util";
 import { getLocaleFromString, labels } from "../utils";
+import Caption from "./parts/Caption";
+import DayButton from "./parts/DayButton";
+import DropdownCaption from "./parts/DropdownCaption";
+import { HeadRow } from "./parts/HeadRow";
+import Row from "./parts/Row";
+import TableHead from "./parts/TableHead";
+import WeekNumber from "./parts/WeekNumber";
 import {
   DatePickerDefaultProps,
   MultipleMode,
   RangeMode,
   SingleMode,
-} from "./DatePicker";
-import TableHead from "./parts/TableHead";
-import WeekNumber from "./parts/WeekNumber";
-import Caption from "./parts/Caption";
-import DropdownCaption from "./parts/DropdownCaption";
-import Row from "./parts/Row";
-import { HeadRow } from "./parts/HeadRow";
-import DayButton from "./parts/DayButton";
+} from "./types";
 
 interface DatePickerStandaloneDefaultProps
   extends Omit<

package/src/date/datepicker/parts/Caption.tsx

@@ -1,8 +1,10 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Label } from "../../..";
+
 import WeekRow from "./WeekRow";
+import { Button } from "../../../button";
+import { Label } from "../../../typography";
 
 /**
  * https://github.com/gpbl/react-day-picker/tree/main/src/components/Caption

package/src/date/datepicker/parts/DropdownCaption.tsx

@@ -1,13 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import { max, min } from "date-fns";
 import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Select } from "../../..";
+import { Button } from "../../../button";
+import { Select } from "../../../form/Select";
 import { getMonths, getYears } from "../../utils/get-dates";
 import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
-import { max, min } from "date-fns";
 import WeekRow from "./WeekRow";
 
 /**

package/src/date/datepicker/parts/WeekRow.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
+import { useId } from "../../../util";
 import { getMonthWeeks } from "../../utils/get-month-weeks";
 import { labelWeek } from "../../utils/labels";
 import WeekNumber from "./WeekNumber";
-import { useId } from "../../../util";
 
 const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
   const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();

package/src/date/datepicker/types.ts

@@ -0,0 +1,109 @@
+import { DateRange, DayPickerBase, Matcher } from "react-day-picker";
+
+export type SingleMode = {
+  mode?: "single";
+  onSelect?: (val?: Date) => void;
+  selected?: Date;
+  defaultSelected?: Date;
+  onWeekNumberClick?: never;
+};
+
+export type MultipleMode = {
+  mode: "multiple";
+  onSelect?: (val?: Date[]) => void;
+  selected?: Date[];
+  defaultSelected?: Date[];
+  min?: number;
+  max?: number;
+  /**
+   * Allows selecting a week at a time. Only used with mode="multiple".
+   */
+  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
+};
+
+export type RangeMode = {
+  mode: "range";
+  onSelect?: (val?: DateRange) => void;
+  selected?: DateRange;
+  defaultSelected?: DateRange;
+  min?: number;
+  max?: number;
+  onWeekNumberClick?: never;
+};
+
+export type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
+
+//github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
+export interface DatePickerDefaultProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
+    Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
+  /**
+   * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
+   */
+  children?: React.ReactNode;
+  /**
+   * Classname for datepicker in popover
+   */
+  className?: string;
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
+  /**
+   * Changes datepicker locale
+   * @default "nb" (norsk bokmål)
+   */
+  locale?: "nb" | "nn" | "en";
+  /**
+   * The earliest day to start navigation.
+   */
+  fromDate?: Date;
+  /**
+   * The latests day to end navigation.
+   */
+  toDate?: Date;
+  /**
+   * Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
+   * @default false
+   */
+  dropdownCaption?: boolean;
+  /**
+   * Apply the disabled modifier to the matching days.
+   * https://react-day-picker.js.org/api/types/Matcher
+   */
+  disabled?: Matcher[];
+  /**
+   * Disable saturday and sunday.
+   * @default false
+   */
+  disableWeekends?: boolean;
+  /**
+   * Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
+   * @default false
+   */
+  showWeekNumber?: boolean;
+  /**
+   * Open state for user-controlled state. Component controlled by default
+   */
+  open?: boolean;
+  /**
+   * onClose callback for user-controlled state
+   */
+  onClose?: () => void;
+  /**
+   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
+   */
+  onOpenToggle?: () => void;
+  /**
+   * Avoid using if possible!
+   * Changes what CSS position property to use.
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * @default See Popover
+   */
+  strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
+}

package/src/date/hooks/useMonthPicker.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { DateInputProps } from "../DateInput";
-import { MonthPickerProps } from "../monthpicker/MonthPicker";
+import { MonthPickerProps } from "../monthpicker/types";
 import {
   formatDateForInput,
   getLocaleFromString,