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

package/esm/popover/Popover.d.ts

@@ -0,0 +1,47 @@
+import React, { HTMLAttributes } from "react";
+import { PopoverContentType } from "./PopoverContent";
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Popover content
+     */
+    children: React.ReactNode;
+    /**
+     * Element popover anchors to
+     */
+    anchorEl: Element | null;
+    /**
+     * Open state
+     */
+    open: boolean;
+    /**
+     * onClose callback
+     */
+    onClose: () => void;
+    /**
+     * Orientation for popover
+     * @note Try to keep general usage to "top", "bottom", "left", "right"
+     * @default "top"
+     */
+    placement?: "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    /**
+     * Adds a arrow from dialog to anchor when true
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * Distance from anchor to popover
+     * @default 16 w/arrow, 4 w/no-arrow
+     */
+    offset?: number;
+    /**
+     * Changes what CSS position property to use
+     * You want to use "fixed" if reference element is inside a fixed container, but popover is not
+     * @default "absolute"
+     */
+    strategy?: "absolute" | "fixed";
+}
+interface PopoverComponent extends React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>> {
+    Content: PopoverContentType;
+}
+export declare const Popover: PopoverComponent;
+export default Popover;

package/esm/popover/PopoverContent.d.ts

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

package/esm/popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popover, PopoverProps } from "./Popover";
+export { PopoverContentProps } from "./PopoverContent";

package/esm/provider/Provider.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface ProviderContextType {
+    /**
+     * Global root-element to attach portals to (Modal, Tooltip)
+     */
+    rootElement?: HTMLElement;
+    /**
+     * Global config for appElement (Modal)
+     */
+    appElement?: HTMLElement;
+}
+export declare const ProviderContext: React.Context<ProviderContextType | undefined>;
+export interface ProviderProps {
+    children?: React.ReactNode;
+    rootElement?: HTMLElement;
+    appElement?: HTMLElement;
+}
+export declare const useProvider: () => ProviderContextType | undefined;
+export declare const Provider: ({ children, ...rest }: ProviderProps) => JSX.Element;
+export default Provider;

package/esm/provider/index.d.ts

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

package/esm/read-more/ReadMore.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface ReadMoreProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Content inside ReadMore
+     */
+    children: React.ReactNode;
+    /**
+     * ReadMore header content
+     */
+    header: React.ReactNode;
+    /**
+     * Opens component if 'true', closes if 'false'
+     * Using this props removes automatic control of open-state
+     */
+    open?: boolean;
+    /**
+     * Defaults the accordion to opened state
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Changes fontsize for content
+     * @default false
+     */
+    size?: "medium" | "small";
+}
+export declare const ReadMore: React.ForwardRefExoticComponent<ReadMoreProps & React.RefAttributes<HTMLButtonElement>>;
+export default ReadMore;

package/esm/read-more/index.d.ts

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

package/esm/stepper/Step.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface StepperStepProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Text content by indicator
+     */
+    children: string;
+    /**
+     * Handled by Stepper, overwriting may break component logic
+     * @private
+     */
+    unsafe_index?: number;
+    /**
+     * Makes step-indicator a checkmark
+     * @default false
+     */
+    completed?: boolean;
+    /**
+     * Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
+     * @default true
+     */
+    interactive?: boolean;
+}
+export interface StepperStepType extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {
+}
+export declare const StepComponent: OverridableComponent<StepperStepProps, HTMLAnchorElement>;
+declare const Step: StepperStepType;
+export default Step;

package/esm/stepper/Stepper.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { StepperStepType } from "./Step";
+export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * <Stepper.Step /> elements
+     */
+    children: React.ReactNode;
+    /**
+     * The direction the component grows.
+     * @default "vertical"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Current active step.
+     * @note Stepper index starts at 1, not 0
+     */
+    activeStep: number;
+    /**
+     * Callback for next activeStep
+     * @note Stepper index starts at 1, not 0
+     */
+    onStepChange?: (step: number) => void;
+    /**
+     * Makes stepper non-interactive if false
+     * @default true
+     */
+    interactive?: boolean;
+}
+interface StepperComponent extends React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>> {
+    Step: StepperStepType;
+}
+interface StepperContextProps {
+    activeStep: number;
+    onStepChange: (step: number) => void;
+    lastIndex: number;
+    orientation: "horizontal" | "vertical";
+    interactive: boolean;
+}
+export declare const StepperContext: React.Context<StepperContextProps | null>;
+export declare const Stepper: StepperComponent;
+export default Stepper;

package/esm/stepper/index.d.ts

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

package/esm/table/Body.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export interface BodyType extends React.ForwardRefExoticComponent<BodyProps & React.RefAttributes<HTMLTableSectionElement>> {
+}
+export declare const Body: BodyType;
+export default Body;

package/esm/table/ColumnHeader.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { HeaderCellProps } from "./HeaderCell";
+export interface ColumnHeaderProps extends HeaderCellProps {
+    /**
+     * Key to sort by
+     */
+    sortKey?: string;
+    /**
+     * Column is sortable, adds indicators to show sorting
+     * @default false
+     */
+    sortable?: boolean;
+}
+export interface ColumnHeaderType extends React.ForwardRefExoticComponent<ColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>> {
+}
+export declare const ColumnHeader: ColumnHeaderType;
+export default ColumnHeader;

package/esm/table/DataCell.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Content alignment inside cell
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+}
+export interface DataCellType extends React.ForwardRefExoticComponent<DataCellProps & React.RefAttributes<HTMLTableCellElement>> {
+}
+export declare const DataCell: DataCellType;
+export default DataCell;

package/esm/table/ExpandableRow.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { RowProps } from "./Row";
+export interface ExpandableRowProps extends RowProps {
+    /**
+     * Content of the expanded row
+     */
+    content: React.ReactNode;
+    /**
+     * Placement of toggle button
+     * @default "left"
+     */
+    togglePlacement?: "left" | "right";
+    /**
+     * Opens component if 'true', closes if 'false'
+     * Using this props removes automatic control of open-state
+     */
+    open?: boolean;
+    /**
+     * Opened state default
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Change handler for open
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Disable expansio
+     * @default false
+     */
+    expansionDisabled?: boolean;
+    /**
+     * The width of the expanded row's internal cell
+     * @default 999
+     */
+    colSpan?: number;
+}
+export interface ExpandableRowType extends React.ForwardRefExoticComponent<ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>> {
+}
+export declare const ExpandableRow: ExpandableRowType;
+export default ExpandableRow;

package/esm/table/Header.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface HeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export interface HeaderType extends React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLTableSectionElement>> {
+}
+export declare const Header: HeaderType;
+export default Header;

package/esm/table/HeaderCell.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    scope?: string;
+    /**
+     * Content alignment inside cell
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+}
+export interface HeaderCellType extends React.ForwardRefExoticComponent<HeaderCellProps & React.RefAttributes<HTMLTableCellElement>> {
+}
+export declare const HeaderCell: HeaderCellType;
+export default HeaderCell;

package/esm/table/Row.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Row is selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Shade the table row on hover.
+     * @default true
+     */
+    shadeOnHover?: boolean;
+}
+export interface RowType extends React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLTableRowElement>> {
+}
+export declare const Row: RowType;
+export default Row;

package/esm/table/Table.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { HeaderType } from "./Header";
+import { BodyType } from "./Body";
+import { RowType } from "./Row";
+import { ColumnHeaderType } from "./ColumnHeader";
+import { HeaderCellType } from "./HeaderCell";
+import { DataCellType } from "./DataCell";
+import { ExpandableRowType } from "./ExpandableRow";
+export interface SortState {
+    orderBy: string;
+    direction: "ascending" | "descending";
+}
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Changes padding
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Zebra striped table
+     * @default false
+     */
+    zebraStripes?: boolean;
+    /**
+     * Sort state
+     */
+    sort?: SortState;
+    /**
+     * Callback whens sort state changes
+     */
+    onSortChange?: (sortKey?: string) => void;
+}
+export interface TableType extends React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>> {
+    Header: HeaderType;
+    Body: BodyType;
+    Row: RowType;
+    DataCell: DataCellType;
+    HeaderCell: HeaderCellType;
+    ColumnHeader: ColumnHeaderType;
+    ExpandableRow: ExpandableRowType;
+}
+export interface TableContextProps {
+    size: "medium" | "small";
+    onSortChange?: (sortKey: string) => void;
+    sort?: SortState;
+}
+export declare const TableContext: React.Context<TableContextProps | null>;
+export declare const Table: TableType;
+export default Table;

package/esm/table/index.d.ts

@@ -0,0 +1,8 @@
+export { BodyProps } from "./Body";
+export { ColumnHeaderProps } from "./ColumnHeader";
+export { DataCellProps } from "./DataCell";
+export { ExpandableRowProps } from "./ExpandableRow";
+export { HeaderProps } from "./Header";
+export { HeaderCellProps } from "./HeaderCell";
+export { RowProps } from "./Row";
+export { default as Table, TableProps, SortState } from "./Table";

package/esm/tabs/Tab.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface TabProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
+    /**
+     * Tab label
+     */
+    label?: React.ReactNode;
+    /**
+     * Tab Icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Value for state-handling
+     */
+    value: string;
+}
+export type TabType = OverridableComponent<TabProps, HTMLButtonElement>;
+export declare const Tab: TabType;
+export default Tab;

package/esm/tabs/TabList.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * <Tabs.Tab /> elements
+     */
+    children: React.ReactNode;
+}
+export type TabListType = React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabList: TabListType;
+export default TabList;

package/esm/tabs/TabPanel.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tab panel content
+     */
+    children: React.ReactNode;
+    /**
+     * Value for state-handling
+     */
+    value: string;
+}
+export type TabPanelType = React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabPanel: TabPanelType;
+export default TabPanel;

package/esm/tabs/Tabs.d.ts

@@ -0,0 +1,52 @@
+import React, { HTMLAttributes } from "react";
+import { TabType } from "./Tab";
+import { TabListType } from "./TabList";
+import { TabPanelType } from "./TabPanel";
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+    children: React.ReactNode;
+    /**
+     * Changes padding and font-size
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * onChange callback for selected Tab
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Controlled selected value
+     */
+    value?: string;
+    /**
+     * If not controlled, a default-value needs to be set
+     */
+    defaultValue?: string;
+    /**
+     * Automatically activates tab on focus/navigation
+     * @default false
+     */
+    selectionFollowsFocus?: boolean;
+    /**
+     * Loops back to start when navigating past last item
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Icon position in Tab
+     * @default "left"
+     */
+    iconPosition?: "left" | "top";
+}
+interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> {
+    Tab: TabType;
+    List: TabListType;
+    Panel: TabPanelType;
+}
+interface TabsContextProps {
+    size: "medium" | "small";
+    loop: boolean;
+    iconPosition: "left" | "top";
+}
+export declare const TabsContext: React.Context<TabsContextProps | null>;
+export declare const Tabs: TabsComponent;
+export default Tabs;

package/esm/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { TabProps } from "./Tab";
+export { TabListProps } from "./TabList";
+export { TabPanelProps } from "./TabPanel";
+export { default as Tabs, TabsProps } from "./Tabs";

package/esm/tag/Tag.d.ts

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from "react";
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    /**
+     * Changes visual profile of tag
+     */
+    variant: "warning" | "warning-filled" | "error" | "error-filled" | "info" | "info-filled" | "success" | "success-filled" | "neutral" | "neutral-filled" | "alt1" | "alt1-filled" | "alt2" | "alt2-filled" | "alt3" | "alt3-filled";
+    /**
+     * @default "medium"
+     */
+    size?: "medium" | "small" | "xsmall";
+}
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export default Tag;

package/esm/tag/index.d.ts

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

package/esm/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes } from "react";
+import { ToggleItemType } from "./ToggleItem";
+export interface ToggleGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+    /**
+     * Toggles.Item elements
+     */
+    children: React.ReactNode;
+    /**
+     * Changes padding and font-size
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Controlled selected value
+     */
+    value?: string;
+    /**
+     * If not controlled, a default-value needs to be set
+     */
+    defaultValue?: string;
+    /**
+     * Callback for selected toggle
+     */
+    onChange: (value: string) => void;
+    /**
+     * Label describing ToggleGroup
+     */
+    label?: React.ReactNode;
+}
+interface ToggleGroupComponent extends React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>> {
+    Item: ToggleItemType;
+}
+interface ToggleContextProps {
+    size: "medium" | "small";
+}
+export declare const ToggleGroupContext: React.Context<ToggleContextProps | null>;
+export declare const ToggleGroup: ToggleGroupComponent;
+export default ToggleGroup;

package/esm/toggle-group/ToggleItem.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface ToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Content
+     */
+    children: React.ReactNode;
+    /**
+     * Value for state-handling
+     */
+    value: string;
+}
+export type ToggleItemType = React.ForwardRefExoticComponent<ToggleItemProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ToggleItem: ToggleItemType;
+export default ToggleItem;

package/esm/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup, ToggleGroupProps } from "./ToggleGroup";
+export { ToggleItemProps } from "./ToggleItem";

package/esm/tooltip/Tooltip.d.ts

@@ -0,0 +1,53 @@
+import React, { HTMLAttributes } from "react";
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Element tooltip anchors to
+     * @note Needs to be React.ReactElement, does not support multiple children/react fragment
+     */
+    children: React.ReactElement & React.RefAttributes<HTMLElement>;
+    /**
+     * Open state for contolled tooltip
+     */
+    open?: boolean;
+    /**
+     * Tells tooltip to start in open state.
+     * Use sparingly synce hover/focus on other elements will close it
+     * @note "open"-prop overwrites this
+     */
+    defaultOpen?: boolean;
+    /**
+     * Orientation for tooltip
+     * @default "top"
+     */
+    placement?: "top" | "right" | "bottom" | "left";
+    /**
+     * Toggles rendering of arrow
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * Distance from anchor to tooltip
+     * @default 10px with arrow, 2px without arrow
+     */
+    offset?: number;
+    /**
+     * Text-content inside tooltip
+     */
+    content: string;
+    /**
+     * Sets max allowed character length.
+     * @default 80
+     */
+    maxChar?: number;
+    /**
+     * Adds a delay in milliseconds before opening tooltip
+     * @default 150
+     */
+    delay?: number;
+    /**
+     * List of Keyboard-keys for shortcuts
+     */
+    keys?: string[];
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+export default Tooltip;

package/esm/tooltip/index.d.ts

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

package/esm/typography/BodyLong.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface BodyLongProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * medium: 18px, small: 16px
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Paragraph text
+     */
+    children: React.ReactNode;
+    /**
+     * Adds margin-bottom
+     */
+    spacing?: boolean;
+}
+export declare const BodyLong: OverridableComponent<BodyLongProps, HTMLParagraphElement>;
+export default BodyLong;

package/esm/typography/BodyShort.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface BodyShortProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * medium: 18px, small: 16px
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Paragraph text
+     */
+    children: React.ReactNode;
+    /**
+     * Adds margin-bottom
+     */
+    spacing?: boolean;
+}
+export declare const BodyShort: OverridableComponent<BodyShortProps, HTMLParagraphElement>;
+export default BodyShort;