@navikt/ds-react 0.17.12 → 0.17.15

package/esm/stepper/Stepper.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { StepperStepType } from "./Step";
+export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * <Stepper.Step /> elements
+     */
+    children: React.ReactNode;
+    /**
+     * Adds classname to wrapper
+     */
+    className?: string;
+    /**
+     * Current active step index
+     */
+    activeStep: number;
+    /**
+     * Callback for clicked step index
+     */
+    onStepChange?: (step: number) => void;
+}
+interface StepperComponent extends React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>> {
+    Step: StepperStepType;
+}
+interface StepperContextProps {
+    activeStep: number;
+    onStepChange: (step: number) => void;
+    lastIndex: number;
+}
+export declare const StepperContext: React.Context<StepperContextProps | null>;
+declare const Stepper: StepperComponent;
+export default Stepper;

package/esm/stepper/Stepper.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { createContext, forwardRef } from "react";
+import cl from "classnames";
+import Step from "./Step";
+export const StepperContext = createContext(null);
+const Stepper = forwardRef((_a, ref) => {
+    var { children, className, activeStep, onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "onStepChange"]);
+    return (React.createElement("ol", Object.assign({}, rest, { ref: ref, className: cl("navds-stepper", className) }),
+        React.createElement(StepperContext.Provider, { value: {
+                activeStep,
+                onStepChange,
+                lastIndex: React.Children.count(children),
+            } }, React.Children.map(children, (step, index) => {
+            var _a, _b;
+            return (React.createElement("li", { className: cl("navds-stepper__step-wrapper"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") }, React.isValidElement(step)
+                ? React.cloneElement(step, Object.assign(Object.assign({}, step.props), { index }))
+                : step));
+        }))));
+});
+Stepper.Step = Step;
+export default Stepper;
+//# sourceMappingURL=Stepper.js.map

package/esm/stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,IAA2C,MAAM,QAAQ,CAAC;AAkCjE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAE9E,MAAM,OAAO,GAAqB,UAAU,CAC1C,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,OAAW,EAAN,IAAI,cAAnE,uDAAqE,CAAF;IAGnE,OAAO,CACL,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;QAC/D,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;gBACL,UAAU;gBACV,YAAY;gBACZ,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;aAC1C,IAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC5C,OAAO,CACL,4BACE,SAAS,EAAE,EAAE,CAAC,6BAA6B,CAAC,EAC5C,GAAG,EAAE,KAAK,GAAG,CAAC,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,wDAAI,mCAAI,EAAE,CAAC,IAE1C,KAAK,CAAC,cAAc,CAAmB,IAAI,CAAC;gBAC3C,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,kCAAO,IAAI,CAAC,KAAK,KAAE,KAAK,IAAG;gBACpD,CAAC,CAAC,IAAI,CACL,CACN,CAAC;QACJ,CAAC,CAAC,CACsB,CACvB,CACN,CAAC;AACJ,CAAC,CACkB,CAAC;AAEtB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;AAEpB,eAAe,OAAO,CAAC"}

package/esm/stepper/index.d.ts

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

package/esm/stepper/index.js

@@ -0,0 +1,3 @@
+export { default as Stepper } from "./Stepper";
+export * from "./Stepper";
+//# sourceMappingURL=index.js.map

package/esm/stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC"}

package/esm/table/ExpandableRow.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { RowProps } from "./Row";
+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;
+}
+export interface ExpandableRowType extends React.ForwardRefExoticComponent<ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>> {
+}
+declare const ExpandableRow: ExpandableRowType;
+export default ExpandableRow;

package/esm/table/ExpandableRow.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useState } from "react";
+import cl from "classnames";
+import Row from "./Row";
+import DataCell from "./DataCell";
+import { UnmountClosed } from "react-collapse";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import { useId } from "..";
+const ExpandableRow = forwardRef((_a, ref) => {
+    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange"]);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const id = `expandable-${useId()}`;
+    const isOpen = open !== null && open !== void 0 ? open : internalOpen;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Row, Object.assign({}, rest, { ref: ref, className: cl("navds-table__expandable-row", className, {
+                "navds-table__expandable-row--open": isOpen,
+            }) }),
+            togglePlacement === "right" && children,
+            React.createElement(DataCell, { className: cl("navds-table__toggle-expand-cell", {
+                    "navds-table__toggle-expand-cell--open": isOpen,
+                }) },
+                React.createElement("button", { className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
+                        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
+                        if (open === undefined) {
+                            setInternalOpen((open) => !open);
+                        }
+                    } },
+                    React.createElement(Expand, { className: "navds-table__expandable-icon", title: "Vis mer" }),
+                    React.createElement(ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: "Vis mindre" }))),
+            togglePlacement === "left" && children),
+        React.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
+            React.createElement("td", { colSpan: 999, className: "navds-table__expanded-row-cell" },
+                React.createElement(UnmountClosed, { isOpened: isOpen, theme: {
+                        collapse: "navds-table__expanded-row-collapse",
+                        content: "navds-table__expanded-row-content",
+                    } }, content)))));
+});
+export default ExpandableRow;
+//# sourceMappingURL=ExpandableRow.js.map

package/esm/table/ExpandableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableRow.js","sourceRoot":"","sources":["../../src/table/ExpandableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAiC3B,MAAM,aAAa,GAAsB,UAAU,CACjD,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,QAAQ,EACR,OAAO,EACP,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,KAAK,EACnB,IAAI,EACJ,YAAY,OAEb,EADI,IAAI,cART,8FASC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,EAAE,GAAG,cAAc,KAAK,EAAE,EAAE,CAAC;IAEnC,MAAM,MAAM,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;IAEpC,OAAO,CACL;QACE,oBAAC,GAAG,oBACE,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,EAAE;gBACtD,mCAAmC,EAAE,MAAM;aAC5C,CAAC;YAED,eAAe,KAAK,OAAO,IAAI,QAAQ;YACxC,oBAAC,QAAQ,IACP,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE;oBAC/C,uCAAuC,EAAE,MAAM;iBAChD,CAAC;gBAEF,gCACE,SAAS,EAAC,mCAAmC,mBAC9B,EAAE,mBACF,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE;wBACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,MAAM,CAAC,CAAC;wBACxB,IAAI,IAAI,KAAK,SAAS,EAAE;4BACtB,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;yBAClC;oBACH,CAAC;oBAED,oBAAC,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAC,SAAS,GACf;oBACF,oBAAC,YAAY,IACX,SAAS,EAAC,mEAAmE,EAC7E,KAAK,EAAC,YAAY,GAClB,CACK,CACA;YACV,eAAe,KAAK,MAAM,IAAI,QAAQ,CACnC;QACN,4BAAI,SAAS,EAAC,2BAA2B,iBAAc,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;YACpE,4BAAI,OAAO,EAAE,GAAG,EAAE,SAAS,EAAC,gCAAgC;gBAC1D,oBAAC,aAAa,IACZ,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE;wBACL,QAAQ,EAAE,oCAAoC;wBAC9C,OAAO,EAAE,mCAAmC;qBAC7C,IAEA,OAAO,CACM,CACb,CACF,CACJ,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/table/Row.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * Row is selected
      * @default false

package/esm/table/Table.d.ts

@@ -5,6 +5,7 @@ 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";
@@ -36,6 +37,7 @@ export interface TableType extends React.ForwardRefExoticComponent<TableProps &
     DataCell: DataCellType;
     HeaderCell: HeaderCellType;
     ColumnHeader: ColumnHeaderType;
+    ExpandableRow: ExpandableRowType;
 }
 export interface TableContextProps {
     size: "medium" | "small";

package/esm/table/Table.js

@@ -17,6 +17,7 @@ import Row from "./Row";
 import ColumnHeader from "./ColumnHeader";
 import HeaderCell from "./HeaderCell";
 import DataCell from "./DataCell";
+import ExpandableRow from "./ExpandableRow";
 export const TableContext = createContext(null);
 const Table = forwardRef((_a, ref) => {
     var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
@@ -31,5 +32,6 @@ Table.Row = Row;
 Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;
+Table.ExpandableRow = ExpandableRow;
 export default Table;
 //# sourceMappingURL=Table.js.map

package/esm/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAChE,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AA+CpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,IAAI,GAAG,QAAQ,EACf,YAAY,EACZ,IAAI,OAEL,EADI,IAAI,cANT,6DAOC,CADQ;IAGN,OAAA,CACH,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;QACxD,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;AAClC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE1B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAChE,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AACpD,OAAO,aAAoC,MAAM,iBAAiB,CAAC;AAgDnE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,IAAI,GAAG,QAAQ,EACf,YAAY,EACZ,IAAI,OAEL,EADI,IAAI,cANT,6DAOC,CADQ;IAGN,OAAA,CACH,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;QACxD,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;AAClC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1B,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;AAEpC,eAAe,KAAK,CAAC"}

package/esm/tabs/Tab.d.ts

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

package/esm/tabs/Tab.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as RadixTabs from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { Label } from "..";
+import { TabsContext } from "./Tabs";
+const Tab = forwardRef((_a, ref) => {
+    var _b;
+    var { className, as: Component = "button", label, icon, iconPosition, value } = _a, rest = __rest(_a, ["className", "as", "label", "icon", "iconPosition", "value"]);
+    const context = useContext(TabsContext);
+    if (!label && !icon) {
+        console.error("<Tabs.Tab/> needs label/icon");
+        return null;
+    }
+    return (React.createElement(RadixTabs.Trigger, { value: value, asChild: true },
+        React.createElement(Component, Object.assign({ ref: ref, className: cl("navds-tabs__tab", `navds-tabs__tab--${(_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "medium"}`, `navds-tabs__tab-icon--${iconPosition}`, className, {
+                "navds-tabs__tab--icon-only": icon && !label,
+            }) }, rest),
+            React.createElement(Label, { as: "span", className: "navds-tabs__tab-inner", size: context === null || context === void 0 ? void 0 : context.size },
+                icon,
+                label))));
+});
+export default Tab;
+//# sourceMappingURL=Tab.js.map

package/esm/tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/tabs/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAyBrC,MAAM,GAAG,GAAY,UAAU,CAC7B,CACE,EAQC,EACD,GAAG,EACH,EAAE;;QAVF,EACE,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,OAEN,EADI,IAAI,cAPT,6DAQC,CADQ;IAIT,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;QACnB,OAAO,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,SAAS,CAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO;QACtC,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,oBAAoB,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,QAAQ,EAAE,EAC/C,yBAAyB,YAAY,EAAE,EACvC,SAAS,EACT;gBACE,4BAA4B,EAAE,IAAI,IAAI,CAAC,KAAK;aAC7C,CACF,IACG,IAAI;YAER,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;gBAElB,IAAI;gBACJ,KAAK,CACA,CACE,CACM,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/esm/tabs/TabList.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tab elements
+     */
+    children: React.ReactNode;
+    /**
+     * Loops back to start when navigating past last item
+     */
+    loop?: boolean;
+}
+export declare type ListType = React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
+declare const List: ListType;
+export default List;

package/esm/tabs/TabList.js

@@ -0,0 +1,81 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { debounce } from "@material-ui/core";
+import { Back, Next } from "@navikt/ds-icons";
+import { TabsList } from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import mergeRefs from "react-merge-refs";
+const List = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const listRef = useRef(null);
+    const mergedRef = mergeRefs([listRef, ref]);
+    const [displayScroll, setDisplayScroll] = useState({
+        start: false,
+        end: false,
+    });
+    const updateScrollButtonState = useMemo(() => debounce(() => {
+        var _a;
+        if (!(listRef === null || listRef === void 0 ? void 0 : listRef.current))
+            return;
+        const { scrollWidth, clientWidth } = listRef === null || listRef === void 0 ? void 0 : listRef.current;
+        let showStartScroll;
+        let showEndScroll;
+        const scrollLeft = (_a = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft;
+        // use 1 for the potential rounding error with browser zooms.
+        showStartScroll = scrollLeft > 1;
+        showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+        setDisplayScroll((displayScroll) => showStartScroll === displayScroll.start &&
+            showEndScroll === displayScroll.end
+            ? displayScroll
+            : { start: showStartScroll, end: showEndScroll });
+    }), []);
+    useEffect(() => {
+        var _a, _b, _c;
+        const handleResize = () => updateScrollButtonState();
+        const win = (_c = (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document) !== null && _c !== void 0 ? _c : window;
+        win.addEventListener("resize", handleResize);
+        let resizeObserver;
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(listRef.current);
+        }
+        return () => {
+            win.removeEventListener("resize", handleResize);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [updateScrollButtonState]);
+    useEffect(() => {
+        updateScrollButtonState();
+    });
+    useEffect(() => {
+        return () => {
+            updateScrollButtonState.clear();
+        };
+    }, [updateScrollButtonState]);
+    const ScrollButton = ({ dir, hidden, }) => (React.createElement("div", { className: cl("navds-tabs__scroll-button", {
+            "navds-tabs__scroll-button--hidden": hidden,
+        }), onClick: () => {
+            if (!listRef.current)
+                return;
+            listRef.current.scrollLeft += dir * 100;
+        } }, dir === -1 ? (React.createElement(Back, { title: "scroll tilbake" })) : (React.createElement(Next, { title: "scroll neste" }))));
+    const showSteppers = displayScroll.end || displayScroll.start;
+    return (React.createElement("div", { className: "navds-tabs__tablist-wrapper" },
+        showSteppers && (React.createElement(ScrollButton, { dir: -1, hidden: !displayScroll.start })),
+        React.createElement(TabsList, Object.assign({}, rest, { ref: mergedRef, onScroll: updateScrollButtonState, className: cl("navds-tabs__tablist", className) })),
+        showSteppers && React.createElement(ScrollButton, { dir: 1, hidden: !displayScroll.end })));
+});
+export default List;
+//# sourceMappingURL=TabList.js.map

package/esm/tabs/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../src/tabs/TabList.tsx"],"names":[],"mappings":"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"}

package/esm/tabs/TabPanel.d.ts

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

package/esm/tabs/TabPanel.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { TabsContent } from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef } from "react";
+const Panel = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(TabsContent, Object.assign({}, rest, { ref: ref, className: cl("navds-tabs__tabpanel", className) })));
+});
+export default Panel;
+//# sourceMappingURL=TabPanel.js.map

package/esm/tabs/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../src/tabs/TabPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiB1C,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC/B,oBAAC,WAAW,oBACN,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAChD,CACH,CAAA;CAAA,CACW,CAAC;AAEf,eAAe,KAAK,CAAC"}

package/esm/tabs/Tabs.d.ts

@@ -0,0 +1,43 @@
+import React, { HTMLAttributes } from "react";
+import { TabType } from "./Tab";
+import { ListType } from "./TabList";
+import { PanelType } from "./TabPanel";
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+    /**
+     * Tabs elements
+     */
+    children: React.ReactNode;
+    /**
+     * Changes padding and font-size
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * onChange
+     */
+    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;
+}
+interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> {
+    Tab: TabType;
+    List: ListType;
+    Panel: PanelType;
+}
+interface TabsContextProps {
+    size: "medium" | "small";
+}
+export declare const TabsContext: React.Context<TabsContextProps | null>;
+declare const Tabs: TabsComponent;
+export default Tabs;

package/esm/tabs/Tabs.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "classnames";
+import React, { createContext, forwardRef } from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import Tab from "./Tab";
+import List from "./TabList";
+import Panel from "./TabPanel";
+export const TabsContext = createContext(null);
+const Tabs = forwardRef((_a, ref) => {
+    var { className, children, onChange, size = "medium", selectionFollowsFocus = false } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "selectionFollowsFocus"]);
+    return (React.createElement(RadixTabs.Root, Object.assign({}, rest, { ref: ref, className: cl("navds-tabs", className, `navds-tabs--${size}`), activationMode: selectionFollowsFocus ? "automatic" : "manual", onValueChange: onChange }),
+        React.createElement(TabsContext.Provider, { value: {
+                size,
+            } }, children)));
+});
+Tabs.Tab = Tab;
+Tabs.List = List;
+Tabs.Panel = Panel;
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

package/esm/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAClD,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,IAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAoB,MAAM,YAAY,CAAC;AA6C9C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;AAExE,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,qBAAqB,GAAG,KAAK,OAE9B,EADI,IAAI,cANT,sEAOC,CADQ;IAIT,OAAO,CACL,oBAAC,SAAS,CAAC,IAAI,oBACT,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,IAAI,EAAE,CAAC,EAC7D,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAC9D,aAAa,EAAE,QAAQ;QAEvB,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;gBACL,IAAI;aACL,IAEA,QAAQ,CACY,CACR,CAClB,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,eAAe,IAAI,CAAC"}

package/esm/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tabs, TabsProps } from "./Tabs";
+export { TabProps } from "./Tab";

package/esm/tabs/index.js

@@ -0,0 +1,2 @@
+export { default as Tabs } from "./Tabs";
+//# sourceMappingURL=index.js.map

package/esm/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAa,MAAM,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.12",
+  "version": "0.17.15",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -37,6 +37,7 @@
     "@material-ui/core": "^4.12.3",
     "@navikt/ds-icons": "^0.8.6",
     "@popperjs/core": "^2.10.1",
+    "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -67,5 +68,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "08be6c0e8b0f5fe8177db9cb2222aebe2ec317d8"
+  "gitHead": "c80cb199a138566285d516e8c2f5aa3993afb20f"
 }

package/src/index.ts

@@ -16,9 +16,11 @@ export * from "./popover";
 export * from "./read-more";
 export * from "./speech-bubble";
 export * from "./step-indicator";
+export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
+export * from "./tabs";
 export * from "./typography";
 export * from "./util";
 

package/src/step-indicator/stories/step-indicator.stories.mdx

@@ -28,7 +28,7 @@ Du må nå selv styre state med `activeStep` og `onStepChange`.
 
 ## responsive
 
-Bruk `responsive`-prop for å skjule labels med en gang StepIndicator begynner å overlfowe.
+Bruk `responsive`-prop for å skjule labels med en gang StepIndicator begynner å overflowe.
 
 ```jsx
 <StepIndicator

package/src/stepper/Step.tsx

@@ -0,0 +1,59 @@
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { StepperContext } from ".";
+import { Label, OverridableComponent } from "..";
+
+export interface StepperStepProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Text content under indicator
+   */
+  children: string;
+  /**
+   * Handled by Stepper
+   */
+  index?: number;
+}
+
+export interface StepperStepType
+  extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {}
+
+const StepComponent: OverridableComponent<
+  StepperStepProps,
+  HTMLAnchorElement
+> = forwardRef(
+  ({ className, children, as: Component = "a", index = 0, ...rest }, ref) => {
+    const context = useContext(StepperContext);
+    if (context === null) {
+      console.error(
+        "<StepIndicator.Step> has to be used within an <StepIndicator>"
+      );
+      return null;
+    }
+    const activeStep = context.activeStep === index;
+
+    return (
+      <Component
+        {...rest}
+        aria-current={Boolean(activeStep)}
+        ref={ref}
+        className={cl("navds-stepper__step", className, {
+          "navds-stepper__step--active": activeStep,
+        })}
+        onClick={(e) => {
+          context.onStepChange(index);
+          rest?.onClick?.(e);
+        }}
+      >
+        <Label className="navds-stepper__step-number" as="span">
+          {activeStep ? `${index + 1}` : index + 1}
+        </Label>
+        <Label className="navds-stepper__step-label">{children}</Label>
+      </Component>
+    );
+  }
+);
+
+const Step = StepComponent as StepperStepType;
+
+export default Step;