@navikt/ds-react 5.6.4 → 5.7.0

package/src/date/index.ts

@@ -1,19 +1,17 @@
 export { type DateInputProps } from "./DateInput";
 export {
-  type DatePickerProps,
   default as DatePicker,
+  type DatePickerProps,
 } from "./datepicker/DatePicker";
 export { type DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
-export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export {
   useDatepicker,
   useMonthpicker,
   useRangeDatepicker,
-  type RangeValidationT,
   type DateValidationT,
   type MonthValidationT,
+  type RangeValidationT,
 } from "./hooks";
-export {
-  default as MonthPicker,
-  type MonthPickerProps,
-} from "./monthpicker/MonthPicker";
+export { default as MonthPicker } from "./monthpicker/MonthPicker";
+export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
+export { type MonthPickerProps } from "./monthpicker/types";

package/src/date/monthpicker/MonthCaption.tsx

@@ -4,10 +4,11 @@ import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
-import { Button, Select } from "../..";
 import { useSharedMonthContext } from "../context";
 import { labelNextYear, labelPrevYear } from "../utils";
 import { isAfter, isBefore } from "date-fns";
+import { Button } from "../../button";
+import { Select } from "../../form/Select";
 
 export const MonthCaption = () => {
   const {

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,97 +1,15 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { Popover, useId } from "../..";
-import { DateInputProps, MonthPickerInput } from "../DateInput";
+import { Popover } from "../../popover";
+import { useId } from "../../util";
+import { MonthPickerInput } from "../DateInput";
 import { DateContext, SharedMonthProvider } from "../context";
-import { getLocaleFromString, Matcher } from "../utils";
+import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
-import MonthPickerStandalone, {
-  MonthPickerStandaloneType,
-} from "./MonthPickerStandalone";
+import MonthPickerStandalone from "./MonthPickerStandalone";
 import MonthSelector from "./MonthSelector";
-
-export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Element monthpicker anchors to. Use <MonthPicker.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;
-  /**
-   * The earliest month to start navigation.
-   */
-  fromDate?: Date;
-  /**
-   * The latest day to end  navigation.
-   */
-  toDate?: Date;
-  /**
-   * Changes monthpicker locale
-   * @default "nb" (norsk bokmål)
-   */
-  locale?: "nb" | "nn" | "en";
-  /**
-   * Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
-   * @default false
-   */
-  dropdownCaption?: boolean;
-  /**
-   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
-   */
-  disabled?: Matcher[];
-  /**
-   * Controlled selected-month
-   */
-  selected?: Date;
-  /**
-   * Default selected month.
-   */
-  defaultSelected?: Date;
-  /**
-   * 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 `<MonthPicker.Input />` is used
-   */
-  onOpenToggle?: () => void;
-  /**
-   * Callback for user-controlled state
-   */
-  onMonthSelect?: (month?: Date) => void;
-  /**
-   * Used to set visible year programmatically. Component controlled by default
-   */
-  year?: Date;
-  /**
-   * Event fired when the user navigates between years.
-   */
-  onYearChange?: (y?: Date) => 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 "absolute"
-   */
-  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 { MonthPickerProps } from "./types";
 
 interface MonthPickerComponent
   extends React.ForwardRefExoticComponent<MonthPickerProps> {
@@ -105,14 +23,12 @@ interface MonthPickerComponent
    * />
    * ```
    */
-  Standalone: MonthPickerStandaloneType;
+  Standalone: typeof MonthPickerStandalone;
   /**
    * Custom TextField for MonthPicker
    * @see 🏷️ {@link DateInputProps}
    */
-  Input: React.ForwardRefExoticComponent<
-    DateInputProps & React.RefAttributes<HTMLInputElement>
-  >;
+  Input: typeof MonthPickerInput;
 }
 
 /**
@@ -211,6 +127,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
               className="navds-date navds-date__popover"
               strategy={strategy}
               bubbleEscape={bubbleEscape}
+              flip={false}
             >
               <RootProvider
                 locale={getLocaleFromString(locale)}

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -4,8 +4,8 @@ import { RootProvider } from "react-day-picker";
 import { SharedMonthProvider } from "../context";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
-import { MonthPickerProps } from "./MonthPicker";
 import MonthSelector from "./MonthSelector";
+import { MonthPickerProps } from "./types";
 
 export interface MonthPickerStandaloneProps
   extends Omit<

package/src/date/monthpicker/MonthSelector.tsx

@@ -3,7 +3,7 @@ import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React, { useState } from "react";
-import { BodyShort } from "../..";
+import { BodyShort } from "../../typography";
 import { useSharedMonthContext } from "../context";
 import { isMatch } from "../utils";
 import MonthButton from "./MonthButton";

package/src/date/monthpicker/types.ts

@@ -0,0 +1,83 @@
+import { Matcher } from "../utils";
+
+export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Element monthpicker anchors to. Use <MonthPicker.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;
+  /**
+   * The earliest month to start navigation.
+   */
+  fromDate?: Date;
+  /**
+   * The latest day to end  navigation.
+   */
+  toDate?: Date;
+  /**
+   * Changes monthpicker locale
+   * @default "nb" (norsk bokmål)
+   */
+  locale?: "nb" | "nn" | "en";
+  /**
+   * Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
+   * @default false
+   */
+  dropdownCaption?: boolean;
+  /**
+   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
+   */
+  disabled?: Matcher[];
+  /**
+   * Controlled selected-month
+   */
+  selected?: Date;
+  /**
+   * Default selected month.
+   */
+  defaultSelected?: Date;
+  /**
+   * 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 `<MonthPicker.Input />` is used
+   */
+  onOpenToggle?: () => void;
+  /**
+   * Callback for user-controlled state
+   */
+  onMonthSelect?: (month?: Date) => void;
+  /**
+   * Used to set visible year programmatically. Component controlled by default
+   */
+  year?: Date;
+  /**
+   * Event fired when the user navigates between years.
+   */
+  onYearChange?: (y?: Date) => 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 "absolute"
+   */
+  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/utils/parse-date.ts

@@ -1,7 +1,7 @@
 import parse from "date-fns/parse";
 import isBefore from "date-fns/isBefore";
 import sub from "date-fns/sub";
-import { isValidDate } from ".";
+import { isValidDate } from "./check-dates";
 
 export const INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";
 

package/src/dropdown/Dropdown.tsx

@@ -1,6 +1,7 @@
-import React, { createContext, useState } from "react";
-import Toggle, { ToggleProps } from "./Toggle";
+import React, { useState } from "react";
 import Menu, { MenuType } from "./Menu";
+import Toggle, { ToggleProps } from "./Toggle";
+import { DropdownContext } from "./context";
 
 export interface DropdownProps {
   children: React.ReactNode;
@@ -36,16 +37,6 @@ export interface DropdownType extends React.FC<DropdownProps> {
   Menu: MenuType;
 }
 
-export interface DropdownContextType {
-  readonly isOpen: boolean;
-  handleToggle: (v: boolean) => void;
-  readonly anchorEl: Element | null;
-  setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
-  onSelect: (element: React.MouseEvent) => void;
-}
-
-export const DropdownContext = createContext<DropdownContextType | null>(null);
-
 /**
  * A component that displays a dropdown menu when the user clicks on its toggle button.
  *

package/src/dropdown/Menu/GroupedList/GroupedItem.tsx

@@ -1,7 +1,7 @@
-import { OverridableComponent } from "../../../util/OverridableComponent";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { DropdownContext } from "../../Dropdown";
+import { OverridableComponent } from "../../../util";
+import { DropdownContext } from "../../context";
 
 export interface GroupedItemProps
   extends React.ButtonHTMLAttributes<HTMLElement> {

package/src/dropdown/Menu/GroupedList/index.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util/OverridableComponent";
+import { OverridableComponent } from "../../../util";
 import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";
 

package/src/dropdown/Menu/List/Item.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../../../util/OverridableComponent";
-import { DropdownContext } from "../../Dropdown";
+import React, { forwardRef, useContext } from "react";
+import { OverridableComponent } from "../../../util";
+import { DropdownContext } from "../../context";
 
 export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
   /**

package/src/dropdown/Menu/List/index.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util/OverridableComponent";
+import { OverridableComponent } from "../../../util";
 import ListItem, { ListItemProps } from "./Item";
 
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {

package/src/dropdown/Menu/index.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Popover } from "../../popover";
-import { DropdownContext } from "../Dropdown";
+import { DropdownContext } from "../context";
 import Divider from "./Divider";
 import GroupedList, { GroupedListType } from "./GroupedList";
 import List, { ListType } from "./List";

package/src/dropdown/Toggle.tsx

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

package/src/dropdown/context.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+export interface DropdownContextType {
+  readonly isOpen: boolean;
+  handleToggle: (v: boolean) => void;
+  readonly anchorEl: Element | null;
+  setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
+  onSelect: (element: React.MouseEvent) => void;
+}
+
+export const DropdownContext = createContext<DropdownContextType | null>(null);

package/src/expansion-card/ExpansionCard.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
-import React, { createContext, forwardRef, useRef, useState } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import React, { forwardRef, useRef, useState } from "react";
+import { OverridableComponent } from "../util";
 import ExpansionCardContent, {
   ExpansionCardContentProps,
 } from "./ExpansionCardContent";
@@ -15,6 +15,7 @@ import {
   ExpansionCardTitle,
   ExpansionCardTitleProps,
 } from "./ExpansionCardTitle";
+import { ExpansionCardContext } from "./context";
 
 interface ExpansionCardComponent
   extends React.ForwardRefExoticComponent<
@@ -82,18 +83,6 @@ type ExpansionCardConditionalProps =
       "aria-labelledby": string;
     };
 
-export type ExpansionCardContextProps = {
-  open: boolean;
-  toggleOpen: () => void;
-  size: "medium" | "small";
-};
-
-export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
-  open: false,
-  toggleOpen: () => {},
-  size: "medium",
-});
-
 export type ExpansionCardProps = ExpansionCardCommonProps &
   ExpansionCardConditionalProps;
 

package/src/expansion-card/ExpansionCardContent.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyLong } from "../typography/BodyLong";
-import { ExpansionCardContext } from "./ExpansionCard";
+import { BodyLong } from "../typography";
+import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardContentProps
   extends React.HTMLAttributes<HTMLDivElement> {

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { BodyLong } from "../typography/BodyLong";
-import { ExpansionCardContext } from "./ExpansionCard";
+import React, { forwardRef, useContext } from "react";
+import { BodyLong } from "../typography";
+import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardDescriptionProps
   extends React.HTMLAttributes<HTMLParagraphElement> {

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -1,7 +1,7 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { ExpansionCardContext } from "./ExpansionCard";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardHeaderProps
   extends React.HTMLAttributes<HTMLDivElement> {

package/src/expansion-card/ExpansionCardTitle.tsx

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

package/src/expansion-card/context.ts

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export type ExpansionCardContextProps = {
+  open: boolean;
+  toggleOpen: () => void;
+  size: "medium" | "small";
+};
+
+export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
+  open: false,
+  toggleOpen: () => {},
+  size: "medium",
+});

package/src/form/ConfirmationPanel.tsx

@@ -1,6 +1,8 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { BodyLong, Checkbox, CheckboxProps, ErrorMessage, useId } from "..";
+import React, { forwardRef } from "react";
+import { BodyLong, ErrorMessage } from "../typography";
+import { useId } from "../util";
+import { Checkbox, CheckboxProps } from "./checkbox";
 import { useFormField } from "./useFormField";
 
 export interface ConfirmationPanelProps

package/src/form/Fieldset/Fieldset.tsx

@@ -1,36 +1,11 @@
 import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyShort, ErrorMessage, Label, omit } from "../..";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps } from "../useFormField";
+import { FieldsetContext } from "./context";
 import { useFieldset } from "./useFieldset";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
-
-export type FieldsetContextProps = {
-  /**
-   * Error message applied to element,
-   */
-  error?: React.ReactNode;
-  /**
-   * Overrides internal errorId
-   */
-  errorId: string;
-  /**
-   * Changes paddings, margins and font-sizes
-   */
-  size: "medium" | "small";
-  /**
-   * Sets fieldset and all form-children to disabled
-   */
-  disabled: boolean;
-  /**
-   * Read only-state
-   */
-  readOnly?: boolean;
-};
-
-export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
-  null
-);
 
 export interface FieldsetProps
   extends FormFieldProps,

package/src/form/Fieldset/context.ts

@@ -0,0 +1,26 @@
+import { createContext } from "react";
+
+export type FieldsetContextProps = {
+  /**
+   * Error message applied to element,
+   */
+  error?: React.ReactNode;
+  /**
+   * Overrides internal errorId
+   */
+  errorId: string;
+  /**
+   * Changes paddings, margins and font-sizes
+   */
+  size: "medium" | "small";
+  /**
+   * Sets fieldset and all form-children to disabled
+   */
+  disabled: boolean;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
+};
+
+export const FieldsetContext = createContext<FieldsetContextProps | null>(null);

package/src/form/Fieldset/index.ts

@@ -1,5 +1,2 @@
-export {
-  default as Fieldset,
-  type FieldsetProps,
-  FieldsetContext,
-} from "./Fieldset";
+export { default as Fieldset, type FieldsetProps } from "./Fieldset";
+export { FieldsetContext } from "./context";

package/src/form/Select.tsx

@@ -1,10 +1,10 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, SelectHTMLAttributes } from "react";
-
-import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { BodyShort, ErrorMessage, Label, omit } from "..";
-import { FormFieldProps, useFormField } from "./useFormField";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface SelectProps
   extends FormFieldProps,

package/src/form/Switch.tsx

@@ -5,9 +5,11 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { Loader } from "../loader";
+import { BodyShort } from "../typography";
+import { omit } from "../util";
 
 const SelectedIcon = () => (
   <svg

package/src/form/TextField.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyShort, ErrorMessage, Label, omit } from "..";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./useFormField";
 

package/src/form/Textarea.tsx

@@ -1,9 +1,10 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
+import { BodyShort, ErrorMessage, Label } from "../typography";
 import TextareaAutosize from "../util/TextareaAutoSize";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { omit, useId } from "../util";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text