@navikt/ds-react 2.1.1-next.1 → 2.1.2

package/esm/accordion/Accordion.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { AccordionItemType } from "./AccordionItem";
+import { AccordionContentType } from "./AccordionContent";
+import { AccordionHeaderType } from "./AccordionHeader";
+interface AccordionComponent extends React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>> {
+    Item: AccordionItemType;
+    Header: AccordionHeaderType;
+    Content: AccordionContentType;
+}
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Instances of Accordion.Item
+     */
+    children: React.ReactNode;
+}
+export declare const Accordion: AccordionComponent;
+export default Accordion;

package/esm/accordion/AccordionContent.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content inside Accordion.Content
+     */
+    children: React.ReactNode;
+}
+export type AccordionContentType = React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionContent: AccordionContentType;
+export default AccordionContent;

package/esm/accordion/AccordionHeader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Text inside Accordion.Header
+     */
+    children: React.ReactNode;
+}
+export type AccordionHeaderType = React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionHeader: AccordionHeaderType;
+export default AccordionHeader;

package/esm/accordion/AccordionItem.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content in Accordion.Item
+     * Should include one Accordion.Header and one Accordion.Content
+     */
+    children: React.ReactNode;
+    /**
+     * Controlled open-state
+     * Using this removes automatic control of open-state
+     */
+    open?: boolean;
+    /**
+     * Defaults the accordion to open if not controlled
+     * @default false
+     */
+    defaultOpen?: boolean;
+}
+export type AccordionItemType = React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionItemContextProps {
+    open: boolean;
+    toggleOpen: () => void;
+}
+export declare const AccordionItemContext: React.Context<AccordionItemContextProps | null>;
+declare const AccordionItem: AccordionItemType;
+export default AccordionItem;

package/esm/accordion/index.d.ts

@@ -0,0 +1 @@
+export { AccordionProps, default as Accordion } from "./Accordion";

package/esm/alert/Alert.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Alert content
+     */
+    children: React.ReactNode;
+    /**
+     * Changes colors and icon usage when changed
+     */
+    variant: "error" | "warning" | "info" | "success";
+    /**
+     * Changes padding and font-sizes
+     * @default medium
+     */
+    size?: "medium" | "small";
+    /**
+     * Removes border-radius
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Removes background from Alert
+     * @default false
+     */
+    inline?: boolean;
+}
+export interface AlertContextProps {
+    size: "medium" | "small";
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export default Alert;

package/esm/alert/index.d.ts

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

package/esm/button/Button.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { OverridableComponent } from "../";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Button content
+     */
+    children?: React.ReactNode;
+    /**
+     * Changes design and interaction-visuals
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "danger";
+    /**
+     * Changes padding, height and font-size
+     * @default medium
+     */
+    size?: "medium" | "small" | "xsmall";
+    /**
+     * Prevent the user from interacting with the button: it cannot be pressed or focused.
+     * @note Avoid using if possible for accessibility purposes
+     */
+    disabled?: boolean;
+    /**
+     * Replaces button content with a Loader component, keeps width
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Button Icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Icon position in Button
+     * @default "left"
+     */
+    iconPosition?: "left" | "right";
+}
+export declare const Button: OverridableComponent<ButtonProps, HTMLButtonElement>;
+export default Button;

package/esm/button/index.d.ts

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

package/esm/chat/Bubble.d.ts

@@ -0,0 +1,26 @@
+import React, { HTMLAttributes } from "react";
+export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Bubble text
+     */
+    children: React.ReactNode;
+    /**
+     * name/sender on bubble
+     */
+    name?: string;
+    /**
+     * Timestamp for sent message
+     */
+    timestamp?: string;
+    /**
+     * Background color on bubble
+     */
+    backgroundColor?: string;
+    /**
+     * Overrides hoizontal position of toptext
+     */
+    toptextPosition?: "left" | "right";
+}
+export type BubbleType = React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
+declare const Bubble: BubbleType;
+export default Bubble;

package/esm/chat/Chat.d.ts

@@ -0,0 +1,43 @@
+import React, { HTMLAttributes } from "react";
+import { BubbleType } from "./Bubble";
+export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children of type <Chat.Bubble />
+     */
+    children: React.ReactNode;
+    /**
+     * Chat-message name
+     */
+    name?: string;
+    /**
+     * Timestamp for sent message
+     */
+    timestamp?: string;
+    /**
+     * Avatar for messenger. Regular text for initials works to
+     */
+    avatar: React.ReactNode;
+    /**
+     * Background color on bubbles
+     */
+    backgroundColor?: string;
+    /**
+     * Background color for avatar
+     */
+    avatarBgColor?: string;
+    /**
+     * Positions avatar and Bubbles
+     * @default "left"
+     */
+    position?: "left" | "right";
+    /**
+     * Hoizontal position of toptext
+     * @default Same as chat
+     */
+    toptextPosition?: "left" | "right";
+}
+interface ChatComponent extends React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<HTMLDivElement>> {
+    Bubble: BubbleType;
+}
+export declare const Chat: ChatComponent;
+export default Chat;

package/esm/chat/index.d.ts

@@ -0,0 +1 @@
+export { default as Chat, ChatProps } from "./Chat";

package/esm/chips/Chips.d.ts

@@ -0,0 +1,17 @@
+import React, { HTMLAttributes } from "react";
+import { ToggleChipsType } from "./Toggle";
+import { RemovableChipsType } from "./Removable";
+export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
+    children: React.ReactNode;
+    /**
+     * Changes padding and font-sizes
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+}
+interface ChipsComponent extends React.ForwardRefExoticComponent<ChipsProps & React.RefAttributes<HTMLUListElement>> {
+    Toggle: ToggleChipsType;
+    Removable: RemovableChipsType;
+}
+export declare const Chips: ChipsComponent;
+export default Chips;

package/esm/chips/Removable.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface RemovableChipsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: string;
+    /**
+     * Chip-variants
+     * @default "action"
+     */
+    variant?: "action" | "neutral";
+    /**
+     * Replaces label read for screen-readers
+     * @default "slett filter"
+     */
+    removeLabel?: string;
+    /**
+     * Click callback
+     */
+    onDelete?: () => void;
+}
+export interface RemovableChipsType extends OverridableComponent<RemovableChipsProps, HTMLButtonElement> {
+}
+export declare const RemovableChips: OverridableComponent<RemovableChipsProps, HTMLButtonElement>;
+export default RemovableChips;

package/esm/chips/Toggle.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface ToggleChipsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: string;
+    /**
+     * Toggles aria-pressed and visual-changes
+     */
+    selected?: boolean;
+}
+export interface ToggleChipsType extends OverridableComponent<ToggleChipsProps, HTMLButtonElement> {
+}
+export declare const ToggleChips: ToggleChipsType;
+export default ToggleChips;

package/esm/chips/index.d.ts

@@ -0,0 +1 @@
+export { default as Chips, ChipsProps } from "./Chips";

package/esm/date/DateInput.d.ts

@@ -0,0 +1,25 @@
+import React, { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../form/useFormField";
+export interface DateInputProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Input label
+     */
+    label: React.ReactNode;
+    /**
+     * Shows label and description for screenreaders-only
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Changes padding and font-sizes
+     * @default medium
+     */
+    size?: "medium" | "small";
+    /**
+     * @private
+     */
+    variant?: "datepicker" | "monthpicker";
+}
+export type DateInputType = React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const DatePickerInput: DateInputType;
+export declare const MonthPickerInput: DateInputType;

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

@@ -0,0 +1,97 @@
+import React from "react";
+import { DateRange, DayPickerBase, Matcher } from "react-day-picker";
+import { DateInputType } from "../DateInput";
+import { DatePickerStandaloneType } from "./DatePickerStandalone";
+export type ConditionalModeProps = {
+    mode?: "single";
+    onSelect?: (val?: Date) => void;
+    selected?: Date;
+    defaultSelected?: Date;
+} | {
+    mode?: "multiple";
+    onSelect?: (val?: Date[]) => void;
+    selected?: Date[];
+    defaultSelected?: Date[];
+    min?: number;
+    max?: number;
+} | {
+    mode?: "range";
+    onSelect?: (val?: DateRange) => void;
+    selected?: DateRange;
+    defaultSelected?: DateRange;
+    min?: number;
+    max?: number;
+};
+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 "absolute"
+     */
+    strategy?: "absolute" | "fixed";
+}
+export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
+interface DatePickerComponent extends React.ForwardRefExoticComponent<DatePickerProps> {
+    Standalone: DatePickerStandaloneType;
+    Input: DateInputType;
+}
+export declare const DatePicker: DatePickerComponent;
+export default DatePicker;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
+interface DatePickerStandaloneDefaultProps extends Omit<DatePickerDefaultProps, "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"> {
+    /**
+     * Datepicker classname
+     */
+    className?: string;
+}
+export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps & ConditionalModeProps;
+export type DatePickerStandaloneType = React.ForwardRefExoticComponent<DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePickerStandalone: DatePickerStandaloneType;
+export default DatePickerStandalone;

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

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

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CaptionProps } from "react-day-picker";
+export declare const DatePickerCaption: ({ displayMonth, id }: CaptionProps) => JSX.Element;
+export default DatePickerCaption;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CaptionProps } from "react-day-picker";
+export declare const DropdownCaption: ({ displayMonth, id }: CaptionProps) => JSX.Element | null;
+export default DropdownCaption;

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

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

package/esm/date/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export { useDatepicker as UNSAFE_useDatepicker } from "./useDatepicker";
+export type { DateValidationT } from "./useDatepicker";
+export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatepicker";
+export type { RangeValidationT } from "./useRangeDatepicker";
+export { useMonthpicker as UNSAFE_useMonthpicker } from "./useMonthPicker";
+export type { MonthValidationT } from "./useMonthPicker";
+export { useDateInputContext, DateContext } from "./useDateInputContext";
+export { useSharedMonthContext, SharedMonthProvider, } from "./useSharedMonthContext";

package/esm/date/hooks/useDateInputContext.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+interface DateContextContextProps {
+    /**
+     * Open state for popover
+     */
+    open: boolean;
+    /**
+     * Callback for opOpen toggle
+     */
+    onOpen: () => void;
+    /**
+     * Aria-connected ID
+     */
+    ariaId?: string;
+}
+export declare const DateContext: import("react").Context<DateContextContextProps>;
+export declare const useDateInputContext: () => DateContextContextProps;
+export {};

package/esm/date/hooks/useDatepicker.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import { DateInputProps } from "../DateInput";
+import { DatePickerProps } from "../datepicker/DatePicker";
+export interface UseDatepickerOptions extends Pick<DatePickerProps, "locale" | "fromDate" | "toDate" | "today" | "toDate" | "fromDate" | "toDate" | "disabled" | "disableWeekends"> {
+    /**
+     * The initially selected Date
+     */
+    defaultSelected?: Date;
+    /**
+     * Default shown month
+     */
+    defaultMonth?: Date;
+    /**
+     * Make selection of Date required
+     */
+    required?: boolean;
+    /**
+     * Callback for changed state
+     */
+    onDateChange?: (val?: Date) => void;
+    /**
+     * Input-format
+     * @default "dd.MM.yyyy"
+     */
+    inputFormat?: string;
+    /**
+     * validation-callback
+     */
+    onValidate?: (val: DateValidationT) => void;
+    /**
+     * Allows input of with 'yy' year format.
+     * @default true
+     * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+     * In 2023 this equals to 1943 - 2042
+     */
+    allowTwoDigitYear?: boolean;
+}
+interface UseDatepickerValue {
+    /**
+     * Use: <DatePicker {...datepickerProps}/>
+     */
+    datepickerProps: DatePickerProps;
+    /**
+     * Use: <DatePicker.Input {...inputProps}/>
+     */
+    inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
+        ref: React.RefObject<HTMLInputElement>;
+    };
+    /**
+     * Resets all states (callback)
+     */
+    reset: () => void;
+    /**
+     * Currently selected date
+     * Up to user to validate date
+     */
+    selectedDay?: Date;
+    /**
+     * Manually override currently selected day
+     */
+    setSelected: (date?: Date) => void;
+}
+export type DateValidationT = {
+    isDisabled: boolean;
+    isWeekend: boolean;
+    isEmpty: boolean;
+    isInvalid: boolean;
+    isValidDate: boolean;
+    isBefore: boolean;
+    isAfter: boolean;
+};
+export declare const useDatepicker: (opt?: UseDatepickerOptions) => UseDatepickerValue;
+export {};

package/esm/date/hooks/useMonthPicker.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { DateInputProps } from "../DateInput";
+import { MonthPickerProps } from "../monthpicker/MonthPicker";
+export interface UseMonthPickerOptions extends Pick<MonthPickerProps, "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"> {
+    /**
+     * Make Date-selection required
+     */
+    required?: boolean;
+    /**
+     * Callback for month-change
+     */
+    onMonthChange?: (date?: Date) => void;
+    /**
+     * Input-format
+     * @default "MMMM yyyy"
+     */
+    inputFormat?: string;
+    /**
+     * validation-callback
+     */
+    onValidate?: (val: MonthValidationT) => void;
+    /**
+     * Default shown year
+     */
+    defaultYear?: Date;
+    /**
+     * Allows input of with 'yy' year format.
+     * @default true
+     * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+     * In 2023 this equals to 1943 - 2042
+     */
+    allowTwoDigitYear?: boolean;
+}
+interface UseMonthPickerValue {
+    /**
+     * Use: <MonthPicker {...monthpickerProps} />
+     */
+    monthpickerProps: MonthPickerProps;
+    /**
+     * Use: <MonthPicker.Input {...inputProps} />
+     */
+    inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
+        ref: React.RefObject<HTMLInputElement>;
+    };
+    /**
+     * Currently selected Date
+     * Up to user to validate value and extract month
+     */
+    selectedMonth?: Date;
+    /**
+     * Manually set selected month if needed
+     */
+    setSelected: (date?: Date) => void;
+    /**
+     * Resets all states
+     */
+    reset: () => void;
+}
+export type MonthValidationT = {
+    isDisabled: boolean;
+    isEmpty: boolean;
+    isInvalid: boolean;
+    isValidMonth: boolean;
+    isBefore: boolean;
+    isAfter: boolean;
+};
+export declare const useMonthpicker: (opt?: UseMonthPickerOptions) => UseMonthPickerValue;
+export {};