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

package/esm/form/radio/Radio.d.ts

@@ -0,0 +1,18 @@
+import React, { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+export interface RadioProps extends Omit<FormFieldProps, "error" | "errorId">, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
+    /**
+     * Radio label
+     */
+    children: React.ReactNode;
+    /**
+     * The value of the HTML element
+     */
+    value: any;
+    /**
+     * Adds a description to extend labling of Radio
+     */
+    description?: string;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/esm/form/radio/RadioGroup.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { FieldsetProps } from "..";
+export interface RadioGroupContextProps {
+    name: string;
+    defaultValue?: any;
+    value?: any;
+    onChange: (value: any) => void;
+    required?: boolean;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;
+export interface RadioGroupProps extends Omit<FieldsetProps, "onChange" | "errorPropagation" | "defaultValue"> {
+    /**
+     * Collection of <Radio />-elements
+     */
+    children: React.ReactNode;
+    /**
+     * Override internal name
+     */
+    name?: string;
+    /**
+     * Default checked Radio
+     */
+    defaultValue?: any;
+    /**
+     * Controlled state for Radio
+     */
+    value?: any;
+    /**
+     * Returns current checked Radio in group
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Tells Fieldset if group is required
+     */
+    required?: boolean;
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+export default RadioGroup;

package/esm/form/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Radio, RadioProps } from "./Radio";
+export { default as RadioGroup, RadioGroupProps } from "./RadioGroup";

package/esm/form/radio/useRadio.d.ts

@@ -0,0 +1,23 @@
+import { RadioProps } from "./Radio";
+/**
+ * Handles props for Radios in context with Fieldset and RadioGroup
+ */
+export declare const useRadio: (props: RadioProps) => {
+    inputProps: {
+        name: string | undefined;
+        defaultChecked: boolean | undefined;
+        checked: boolean | undefined;
+        onChange: (e: any) => void;
+        required: boolean | undefined;
+        type: string;
+        id: string;
+        "aria-invalid": boolean;
+        "aria-describedby": string | undefined;
+        disabled: boolean | undefined;
+    };
+    showErrorMsg: boolean;
+    hasError: boolean;
+    errorId: string;
+    inputDescriptionId: string;
+    size: "medium" | "small";
+};

package/esm/form/search/Search.d.ts

@@ -0,0 +1,57 @@
+import React, { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+import { SearchButtonType } from "./SearchButton";
+export type SearchClearEvent = {
+    trigger: "Click";
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>;
+} | {
+    trigger: "Escape";
+    event: React.KeyboardEvent<HTMLDivElement>;
+};
+export interface SearchProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    children?: React.ReactNode;
+    /**
+     * Search label
+     * @note Will be hidden by default, is required for accessibility reasons.
+     */
+    label: React.ReactNode;
+    /**
+     * Shows label and description for screenreaders-only
+     * @default true
+     */
+    hideLabel?: boolean;
+    /**
+     * Callback for value-change in input
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback for click on clear-button or Escape keydown
+     */
+    onClear?: (e: SearchClearEvent) => void;
+    /**
+     * aria-label on clear button
+     * @default "Tøm"
+     */
+    clearButtonLabel?: string;
+    /**
+     * If false, removes clear-button option from input.
+     * @default true
+     */
+    clearButton?: boolean;
+    /**
+     * Changes button-variant, "simple" removes button
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "simple";
+}
+interface SearchComponent extends React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLDivElement>> {
+    Button: SearchButtonType;
+}
+export interface SearchContextProps {
+    disabled?: boolean;
+    size: "medium" | "small";
+    variant: "primary" | "secondary" | "simple";
+}
+export declare const SearchContext: React.Context<SearchContextProps | null>;
+export declare const Search: SearchComponent;
+export default Search;

package/esm/form/search/SearchButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ButtonProps } from "../..";
+export interface SearchButtonProps extends Omit<ButtonProps, "size" | "children" | "variant"> {
+    /**
+     * Text set after <Search/> icon
+     */
+    children?: React.ReactNode;
+}
+export type SearchButtonType = React.ForwardRefExoticComponent<SearchButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SearchButton: SearchButtonType;
+export default SearchButton;

package/esm/form/search/index.d.ts

@@ -0,0 +1 @@
+export { default as Search, SearchProps, SearchClearEvent } from "./Search";

package/esm/form/useFormField.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+export interface FormFieldProps {
+    /**
+     * Error message for element
+     */
+    error?: React.ReactNode;
+    /**
+     * Override internal errorId
+     */
+    errorId?: string;
+    /**
+     * Changes font-size, padding and gaps
+     */
+    size?: "medium" | "small";
+    /**
+     * Disables element
+     * @note Avoid using if possible for accessibility purposes
+     */
+    disabled?: boolean;
+    /**
+     * Adds a description to extend labling of a field
+     */
+    description?: React.ReactNode;
+    /**
+     * Override internal id
+     */
+    id?: string;
+}
+/**
+ * Handles props and their state for various form-fields in context with Fieldset
+ */
+export declare const useFormField: (props: FormFieldProps, prefix: string) => {
+    showErrorMsg: boolean;
+    hasError: boolean;
+    errorId: string;
+    inputDescriptionId: string;
+    size: "medium" | "small";
+    inputProps: {
+        id: string;
+        "aria-invalid": boolean;
+        "aria-describedby": string | undefined;
+        disabled: boolean | undefined;
+    };
+};

package/esm/grid/Cell.d.ts

@@ -0,0 +1,26 @@
+import React, { HTMLAttributes } from "react";
+type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface CellProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Cell content
+     */
+    children?: React.ReactNode;
+    /**
+     * Cell columns on width < 448px
+     */
+    xs: Column;
+    /**
+     * Cell columns on min-width: 448
+     */
+    sm?: Column;
+    /**
+     * Cell columns on min-width: 648
+     */
+    md?: Column;
+    /**
+     * Cell columns on min-width: 960px
+     */
+    lg?: Column;
+}
+export declare const Cell: React.ForwardRefExoticComponent<CellProps & React.RefAttributes<HTMLDivElement>>;
+export default Cell;

package/esm/grid/ContentContainer.d.ts

@@ -0,0 +1,9 @@
+import React, { HTMLAttributes } from "react";
+export interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ContentContainer content
+     */
+    children: React.ReactNode;
+}
+export declare const ContentContainer: React.ForwardRefExoticComponent<ContentContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default ContentContainer;

package/esm/grid/Grid.d.ts

@@ -0,0 +1,9 @@
+import React, { HTMLAttributes } from "react";
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Collection of <Cell>-elements
+     */
+    children: React.ReactNode;
+}
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+export default Grid;

package/esm/grid/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Cell, CellProps } from "./Cell";
+export { default as Grid, GridProps } from "./Grid";
+export { default as ContentContainer, ContentContainerProps, } from "./ContentContainer";

package/esm/guide-panel/Guide.d.ts

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from "react";
+export interface GuideProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Custom svg/img element
+     */
+    illustration?: React.ReactNode;
+    /**
+     * Predefined size properties for illustration
+     * @default "medium"
+     */
+    size?: "small" | "medium";
+}
+declare const Guide: React.ForwardRefExoticComponent<GuideProps & React.RefAttributes<HTMLDivElement>>;
+export default Guide;

package/esm/guide-panel/GuidePanel.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes } from "react";
+export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * GuidePanel content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom svg/img element
+     */
+    illustration?: React.ReactNode;
+    /**
+     * Poster positions guide-illustation above content
+     * @default false, renders illustation left of content
+     */
+    poster?: boolean;
+}
+export declare const GuidePanel: React.ForwardRefExoticComponent<GuidePanelProps & React.RefAttributes<HTMLDivElement>>;
+export default GuidePanel;

package/esm/guide-panel/Illustration.d.ts

@@ -0,0 +1,8 @@
+import React, { SVGProps } from "react";
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+export type DefaultIllustrationType = React.FunctionComponent<SVGProps<SVGSVGElement> & SVGRProps>;
+export declare const DefaultIllustration: DefaultIllustrationType;
+export {};

package/esm/guide-panel/index.d.ts

@@ -0,0 +1,3 @@
+export { default as GuidePanel, GuidePanelProps } from "./GuidePanel";
+export { GuideProps } from "./Guide";
+export { DefaultIllustration as GuideDefaultIllustration } from "./Illustration";

package/esm/help-text/HelpText.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { PopoverProps } from "..";
+export interface HelpTextProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Pick<PopoverProps, "strategy" | "placement"> {
+    children: React.ReactNode;
+    /**
+     * Adds a title-tooltip with the given text
+     * @default "hjelp"
+     */
+    title?: string;
+    /**
+     * Default dialog-placement on open
+     * @default "top"
+     */
+    placement?: "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+}
+export declare const HelpText: React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<HTMLButtonElement>>;
+export default HelpText;

package/esm/help-text/index.d.ts

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

package/esm/index.d.ts

@@ -0,0 +1,27 @@
+export * from "./accordion";
+export * from "./alert";
+export * from "./provider";
+export * from "./button";
+export * from "./date";
+export * from "./form";
+export * from "./grid";
+export * from "./help-text";
+export * from "./guide-panel";
+export * from "./link";
+export * from "./link-panel";
+export * from "./loader";
+export * from "./modal";
+export * from "./pagination";
+export * from "./panel";
+export * from "./popover";
+export * from "./read-more";
+export * from "./chat";
+export * from "./chips";
+export * from "./stepper";
+export * from "./tag";
+export * from "./toggle-group";
+export * from "./table";
+export * from "./tabs";
+export * from "./tooltip";
+export * from "./typography";
+export * from "./util";

package/esm/link/Link.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Link text
+     */
+    children: React.ReactNode;
+}
+export declare const Link: OverridableComponent<LinkProps, HTMLAnchorElement>;
+export default Link;

package/esm/link/index.d.ts

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

package/esm/link-panel/LinkPanel.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { OverridableComponent } from "..";
+import { LinkPanelTitleType } from "./LinkPanelTitle";
+import { LinkPanelDescriptionType } from "./LinkPanelDescription";
+export interface LinkPanelProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Panel content
+     */
+    children?: React.ReactNode;
+    /**
+     * Adds border to panel if true
+     * @default true
+     */
+    border?: boolean;
+}
+interface LinkPanelComponentType extends OverridableComponent<LinkPanelProps, HTMLAnchorElement> {
+    Title: LinkPanelTitleType;
+    Description: LinkPanelDescriptionType;
+}
+export declare const LinkPanelComponent: OverridableComponent<LinkPanelProps, HTMLAnchorElement>;
+declare const LinkPanel: LinkPanelComponentType;
+export default LinkPanel;

package/esm/link-panel/LinkPanelDescription.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface LinkPanelDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export type LinkPanelDescriptionType = React.ForwardRefExoticComponent<LinkPanelDescriptionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const LinkPanelDescription: LinkPanelDescriptionType;
+export {};

package/esm/link-panel/LinkPanelTitle.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { OverridableComponent } from "..";
+interface LinkPanelTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export type LinkPanelTitleType = OverridableComponent<LinkPanelTitleProps, HTMLDivElement>;
+export declare const LinkPanelTitle: LinkPanelTitleType;
+export {};

package/esm/link-panel/index.d.ts

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

package/esm/loader/Loader.d.ts

@@ -0,0 +1,27 @@
+import React, { SVGProps } from "react";
+export interface LoaderProps extends SVGProps<SVGSVGElement> {
+    /**
+     * Changes Loader width/height
+     * 64px | 40px | 32px | 24px | 20px | 16px
+     * @default "medium"
+     */
+    size?: "3xlarge" | "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+    /**
+     * Title prop on svg
+     * @default "venter..."
+     */
+    title?: React.ReactNode;
+    /**
+     * Sets svg-background to transparent
+     * @default false
+     */
+    transparent?: boolean;
+    /**
+     * Colored variants for Loader
+     * @default "neutral"
+     */
+    variant?: "neutral" | "interaction" | "inverted";
+}
+export type LoaderType = React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<SVGSVGElement>>;
+export declare const Loader: LoaderType;
+export default Loader;

package/esm/loader/index.d.ts

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

package/esm/modal/Modal.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import ReactModal from "react-modal";
+import { ModalContentType } from "./ModalContent";
+export interface ModalProps {
+    /**
+     * Modal content
+     */
+    children: React.ReactNode;
+    /**
+     * Open state for modal
+     */
+    open: boolean;
+    /**
+     * Callback for modal wanting to close
+     */
+    onClose: () => void;
+    /**
+     * If modal should close on overlay click (click outside Modal)
+     * @default true
+     */
+    shouldCloseOnOverlayClick?: boolean;
+    /**
+     * User defined classname for modal
+     */
+    className?: string;
+    /**
+     * User defined classname for modal
+     */
+    overlayClassName?: string;
+    /**
+     * Removes close-button(X) when false
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     *
+     */
+    shouldCloseOnEsc?: boolean;
+    /**
+     * Allows custom styling of ReactModal, in accordance with their typing
+     */
+    style?: ReactModal.Styles;
+    /**
+     * Callback for setting parent element modal will attach to
+     */
+    parentSelector?(): HTMLElement;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-modal"?: boolean;
+    /**
+     * Sets aria-label on modal
+     * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
+     */
+    "aria-label"?: string;
+}
+interface ModalComponent extends ModalLifecycle, React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ReactModal>> {
+    Content: ModalContentType;
+}
+type ModalLifecycle = {
+    setAppElement: (element: any) => void;
+};
+export declare const Modal: ModalComponent;
+export default Modal;

package/esm/modal/ModalContent.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Modal.Content content
+     */
+    children: React.ReactNode;
+}
+export type ModalContentType = React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ModalContent: ModalContentType;
+export default ModalContent;

package/esm/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Modal, ModalProps } from "./Modal";
+export { ModalContentProps } from "./ModalContent";

package/esm/pagination/Pagination.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import { PaginationItemProps, PaginationItemType } from "./PaginationItem";
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Current page
+     * @note Pagination indexing starts at 1
+     */
+    page: number;
+    /**
+     * Number of always visible pages before and after the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Number of always visible pages at the beginning and end.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Callback when current page changes
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Total number of pages
+     */
+    count: number;
+    /**
+     * Changes padding, height and font-size
+     * @default "medium"
+     */
+    size?: "medium" | "small" | "xsmall";
+    /**
+     * Display text alongside "previous" and "next" icons
+     * @default false
+     */
+    prevNextTexts?: boolean;
+    /**
+     * Override pagination item rendering
+     * @default (item: PaginationItemProps) => <PaginationItem {...item} />
+     */
+    renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+}
+interface PaginationType extends React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>> {
+    Item: PaginationItemType;
+}
+export declare const getSteps: ({ page, count, boundaryCount, siblingCount, }: {
+    page: any;
+    count: any;
+    boundaryCount?: number | undefined;
+    siblingCount?: number | undefined;
+}) => (string | number)[];
+export declare const Pagination: PaginationType;
+export default Pagination;

package/esm/pagination/PaginationItem.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { ButtonProps, OverridableComponent } from "..";
+export interface PaginationItemProps extends ButtonProps {
+    children: React.ReactNode;
+    /**
+     * Sets selected styling if true
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * The page the item represents
+     */
+    page: number;
+    /**
+     * Changes padding, height and font-size
+     * @default medium
+     */
+    size?: "medium" | "small" | "xsmall";
+}
+export type PaginationItemType = OverridableComponent<PaginationItemProps, HTMLAnchorElement>;
+export declare const Item: PaginationItemType;
+export default Item;

package/esm/pagination/index.d.ts

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

package/esm/panel/Panel.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Panel content
+     */
+    children: React.ReactNode;
+    /**
+     * Adds a border to panel when true
+     * @default false
+     */
+    border?: boolean;
+}
+export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
+export declare const Panel: PanelType;
+export default Panel;

package/esm/panel/index.d.ts

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