@navikt/ds-react 0.16.15 → 0.16.18

package/cjs/button/Button.js

@@ -39,7 +39,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const __1 = require("../");
 const util_1 = require("../util");
 const Button = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled"]);
+    var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled, style } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled", "style"]);
     const buttonRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
     const [widthOverride, setWidthOverride] = (0, react_1.useState)();
@@ -57,7 +57,7 @@ const Button = (0, react_1.forwardRef)((_a, ref) => {
     }, [loading, children]);
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: mergedRef, className: (0, classnames_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
             "navds-button--loading": widthOverride,
-        }), style: { width: widthOverride }, disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
-        react_1.default.createElement(__1.BodyShort, { as: "span", className: "navds-button__inner", size: size, "aria-live": "polite" }, widthOverride ? react_1.default.createElement(__1.Loader, { size: size }) : children)));
+        }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
+        react_1.default.createElement(__1.BodyShort, { as: "span", className: "navds-button__inner", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, widthOverride ? react_1.default.createElement(__1.Loader, { size: size }) : children)));
 });
 exports.default = Button;

package/cjs/form/checkbox/useCheckbox.js

@@ -30,14 +30,13 @@ const useCheckbox = (_a) => {
             console.warn("A <Checkbox> element within a <CheckboxGroup> requires a `value` property.");
         }
     }
-    const value = props.value;
     return Object.assign(Object.assign({}, rest), { inputProps: Object.assign(Object.assign({}, inputProps), { checked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.value)
-                ? checkboxGroup.value.includes(value)
+                ? checkboxGroup.value.includes(props.value)
                 : props.checked, defaultChecked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.defaultValue)
-                ? checkboxGroup.defaultValue.includes(value)
+                ? checkboxGroup.defaultValue.includes(props.value)
                 : props.defaultChecked, onChange: (e) => {
                 props.onChange && props.onChange(e);
-                checkboxGroup && checkboxGroup.toggleValue(value);
+                checkboxGroup && checkboxGroup.toggleValue(props.value);
             } }) });
 };
 exports.default = useCheckbox;

package/cjs/table/ColumnHeader.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ds_icons_1 = require("@navikt/ds-icons");
+const __1 = require("..");
+const HeaderCell_1 = __importDefault(require("./HeaderCell"));
+const ColumnHeader = (0, react_1.forwardRef)((_a, ref) => {
+    var _b, _c, _d, _e;
+    var { className, children, sortable = false, sortKey } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortKey"]);
+    const context = (0, react_1.useContext)(__1.TableContext);
+    if (sortable && !sortKey) {
+        console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
+    }
+    return (react_1.default.createElement(HeaderCell_1.default, Object.assign({ scope: "col", ref: ref, className: className, "aria-sort": sortable
+            ? ((_b = context === null || context === void 0 ? void 0 : context.sort) === null || _b === void 0 ? void 0 : _b.orderBy) === sortKey
+                ? (_c = context === null || context === void 0 ? void 0 : context.sort) === null || _c === void 0 ? void 0 : _c.direction
+                : "none"
+            : undefined }, rest), sortable ? (react_1.default.createElement("button", { className: "navds-table__sort-button", onClick: sortable && sortKey
+            ? () => { var _a; return (_a = context === null || context === void 0 ? void 0 : context.onSortChange) === null || _a === void 0 ? void 0 : _a.call(context, sortKey); }
+            : undefined },
+        children,
+        ((_d = context === null || context === void 0 ? void 0 : context.sort) === null || _d === void 0 ? void 0 : _d.orderBy) === sortKey &&
+            ((_e = context === null || context === void 0 ? void 0 : context.sort) === null || _e === void 0 ? void 0 : _e.direction) === "descending" ? (react_1.default.createElement(ds_icons_1.Down, { "aria-label": "sorter synkende" })) : (react_1.default.createElement(ds_icons_1.Up, { "aria-label": "sorter stigende" })))) : (children)));
+});
+exports.default = ColumnHeader;

package/cjs/table/DataCell.js

@@ -38,8 +38,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const __1 = require("..");
 const _1 = require(".");
 const DataCell = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children = "" } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = (0, react_1.useContext)(_1.TableContext);
-    return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, classnames_1.default)("navds-table__data-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+    return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, classnames_1.default)("navds-table__data-cell", className, {
+            [`navds-table__data-cell--align-${align}`]: align,
+        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 exports.default = DataCell;

package/cjs/table/HeaderCell.js

@@ -37,8 +37,10 @@ const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const __1 = require("..");
 const HeaderCell = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = (0, react_1.useContext)(__1.TableContext);
-    return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, classnames_1.default)("navds-table__header-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+    return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, classnames_1.default)("navds-table__header-cell", className, {
+            [`navds-table__header-cell--align-${align}`]: align,
+        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 exports.default = HeaderCell;

package/cjs/table/Table.js

@@ -39,12 +39,13 @@ const classnames_1 = __importDefault(require("classnames"));
 const Header_1 = __importDefault(require("./Header"));
 const Body_1 = __importDefault(require("./Body"));
 const Row_1 = __importDefault(require("./Row"));
+const ColumnHeader_1 = __importDefault(require("./ColumnHeader"));
 const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const DataCell_1 = __importDefault(require("./DataCell"));
 exports.TableContext = (0, react_1.createContext)(null);
 const Table = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, zebraStripes = false, size = "medium" } = _a, rest = __rest(_a, ["className", "zebraStripes", "size"]);
-    return (react_1.default.createElement(exports.TableContext.Provider, { value: { size } },
+    var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
+    return (react_1.default.createElement(exports.TableContext.Provider, { value: { size, onSortChange, sort } },
         react_1.default.createElement("table", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table", `navds-table--${size}`, className, {
                 "navds-table--zebra-stripes": zebraStripes,
             }) }))));
@@ -52,6 +53,7 @@ const Table = (0, react_1.forwardRef)((_a, ref) => {
 Table.Header = Header_1.default;
 Table.Body = Body_1.default;
 Table.Row = Row_1.default;
+Table.ColumnHeader = ColumnHeader_1.default;
 Table.HeaderCell = HeaderCell_1.default;
 Table.DataCell = DataCell_1.default;
 exports.default = Table;

package/esm/button/Button.d.ts

@@ -14,7 +14,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * Changes padding, height and font-size
      * @default "medium"
      */
-    size?: "medium" | "small";
+    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

package/esm/button/Button.js

@@ -15,7 +15,7 @@ import cl from "classnames";
 import { BodyShort, Loader } from "../";
 import { useClientLayoutEffect } from "../util";
 const Button = forwardRef((_a, ref) => {
-    var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled"]);
+    var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled, style } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled", "style"]);
     const buttonRef = useRef(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
     const [widthOverride, setWidthOverride] = useState();
@@ -33,8 +33,8 @@ const Button = forwardRef((_a, ref) => {
     }, [loading, children]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: mergedRef, className: cl(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
             "navds-button--loading": widthOverride,
-        }), style: { width: widthOverride }, disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
-        React.createElement(BodyShort, { as: "span", className: "navds-button__inner", size: size, "aria-live": "polite" }, widthOverride ? React.createElement(Loader, { size: size }) : children)));
+        }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
+        React.createElement(BodyShort, { as: "span", className: "navds-button__inner", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, widthOverride ? React.createElement(Loader, { size: size }) : children)));
 });
 export default Button;
 //# sourceMappingURL=Button.js.map

package/esm/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAwB,MAAM,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+BhD,MAAM,MAAM,GAAyD,UAAU,CAC7E,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,OAET,EADI,IAAI,cART,yEASC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7D,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;;gBAClD,gBAAgB,CAAC,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CAAC,CAAC;YACvE,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CACX,SAAS,EACT,cAAc,EACd,iBAAiB,OAAO,EAAE,EAC1B,iBAAiB,IAAI,EAAE,EACvB;YACE,uBAAuB,EAAE,aAAa;SACvC,CACF,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAC/B,QAAQ,EAAE,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAEtD,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,IAAI,eACA,QAAQ,IAEjB,aAAa,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,QAAQ,CACxC,CACF,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAwB,MAAM,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+BhD,MAAM,MAAM,GAAyD,UAAU,CAC7E,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,KAAK,OAEN,EADI,IAAI,cATT,kFAUC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7D,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;;gBAClD,gBAAgB,CAAC,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CAAC,CAAC;YACvE,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CACX,SAAS,EACT,cAAc,EACd,iBAAiB,OAAO,EAAE,EAC1B,iBAAiB,IAAI,EAAE,EACvB;YACE,uBAAuB,EAAE,aAAa;SACvC,CACF,EACD,KAAK,kCACA,KAAK,KACR,KAAK,EAAE,aAAa,KAEtB,QAAQ,EAAE,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAEtD,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eAClC,QAAQ,IAEjB,aAAa,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,QAAQ,CACxC,CACF,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/form/checkbox/Checkbox.d.ts

@@ -17,7 +17,7 @@ export interface CheckboxProps extends Omit<FormFieldProps, "errorId">, Omit<Inp
     /**
      * The value of the HTML element.
      */
-    value?: string | number | boolean;
+    value?: any;
     /**
      * Specify whether the Checkbox is in an indeterminate state
      * @default false

package/esm/form/checkbox/CheckboxGroup.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { FieldsetProps } from "..";
 export interface CheckboxGroupState {
-    readonly defaultValue?: ReadonlyArray<string | number | boolean>;
-    readonly value?: ReadonlyArray<string | number | boolean>;
-    toggleValue(value: string | number | boolean): void;
+    readonly defaultValue?: readonly any[];
+    readonly value?: readonly any[];
+    toggleValue(value: any): void;
 }
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupState | null>;
 export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange" | "errorPropagation" | "defaultValue"> {
@@ -14,15 +14,15 @@ export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange" | "er
     /**
      * Controlled state for group
      */
-    value?: Array<string | number | boolean>;
+    value?: any[];
     /**
      * Default checked checkboxes on render
      */
-    defaultValue?: Array<string | number | boolean>;
+    defaultValue?: any[];
     /**
      * Returns current checked checkboxes in group
      */
-    onChange?: (value: Array<string | number | boolean>) => void;
+    onChange?: (value: any[]) => void;
 }
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
 export default CheckboxGroup;

package/esm/form/checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/form/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAiB,eAAe,EAAE,MAAM,IAAI,CAAC;AAQ9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAC/C,IAAI,CACL,CAAC;AAyBF,MAAM,aAAa,GAAG,UAAU,CAC9B,CACE,EAA0E,EAC1E,GAAG,EACH,EAAE;;QAFF,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAAxE,8DAA0E,CAAF;IAGxE,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CACnB,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAA4B,EAAE,EAAE;QACnD,MAAM,QAAQ,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;YACjC,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;QAErB,KAAK,KAAK,SAAS,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC1C,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,sBAAsB,EACtB,yBAAyB,MAAA,MAAA,IAAI,CAAC,IAAI,mCAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ,EAAE,CACnE;QAED,oBAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;gBACL,KAAK;gBACL,YAAY;gBACZ,WAAW;aACZ;YAED,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO,CACpB,CACvB,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/form/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAiB,eAAe,EAAE,MAAM,IAAI,CAAC;AAQ9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAC/C,IAAI,CACL,CAAC;AAyBF,MAAM,aAAa,GAAG,UAAU,CAC9B,CACE,EAA0E,EAC1E,GAAG,EACH,EAAE;;QAFF,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAAxE,8DAA0E,CAAF;IAGxE,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,CAAC,CAAM,EAAE,EAAE;QAC7B,MAAM,QAAQ,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;YACjC,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;QAErB,KAAK,KAAK,SAAS,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC1C,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,sBAAsB,EACtB,yBAAyB,MAAA,MAAA,IAAI,CAAC,IAAI,mCAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ,EAAE,CACnE;QAED,oBAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;gBACL,KAAK;gBACL,YAAY;gBACZ,WAAW;aACZ;YAED,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO,CACpB,CACvB,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/form/checkbox/useCheckbox.js

@@ -28,14 +28,13 @@ const useCheckbox = (_a) => {
             console.warn("A <Checkbox> element within a <CheckboxGroup> requires a `value` property.");
         }
     }
-    const value = props.value;
     return Object.assign(Object.assign({}, rest), { inputProps: Object.assign(Object.assign({}, inputProps), { checked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.value)
-                ? checkboxGroup.value.includes(value)
+                ? checkboxGroup.value.includes(props.value)
                 : props.checked, defaultChecked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.defaultValue)
-                ? checkboxGroup.defaultValue.includes(value)
+                ? checkboxGroup.defaultValue.includes(props.value)
                 : props.defaultChecked, onChange: (e) => {
                 props.onChange && props.onChange(e);
-                checkboxGroup && checkboxGroup.toggleValue(value);
+                checkboxGroup && checkboxGroup.toggleValue(props.value);
             } }) });
 };
 export default useCheckbox;

package/esm/form/checkbox/useCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/useCheckbox.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B;;GAEG;AACH,MAAM,WAAW,GAAG,CAAC,EAAqC,EAAE,EAAE;QAAzC,EAAE,QAAQ,OAA2B,EAAtB,KAAK,cAApB,YAAsB,CAAF;IACvC,MAAM,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEvD,MAAM,KAA0B,YAAY,CAC1C,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,CAAC,EAC5B,UAAU,CACX,EAHK,EAAE,UAAU,OAGjB,EAHsB,IAAI,cAArB,cAAuB,CAG5B,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,OAAO,CAAC,IAAI,CACV,8IAA8I,CAC/I,CAAC;SACH;QACD,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;YAC7B,OAAO,CAAC,IAAI,CACV,4EAA4E,CAC7E,CAAC;SACH;KACF;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAkC,CAAC;IAEvD,uCACK,IAAI,KACP,UAAU,kCACL,UAAU,KACb,OAAO,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK;gBAC3B,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;gBACrC,CAAC,CAAC,KAAK,CAAC,OAAO,EACjB,cAAc,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY;gBACzC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAC5C,CAAC,CAAC,KAAK,CAAC,cAAc,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACpC,aAAa,IAAI,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACpD,CAAC,OAEH;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/useCheckbox.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B;;GAEG;AACH,MAAM,WAAW,GAAG,CAAC,EAAqC,EAAE,EAAE;QAAzC,EAAE,QAAQ,OAA2B,EAAtB,KAAK,cAApB,YAAsB,CAAF;IACvC,MAAM,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEvD,MAAM,KAA0B,YAAY,CAC1C,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,CAAC,EAC5B,UAAU,CACX,EAHK,EAAE,UAAU,OAGjB,EAHsB,IAAI,cAArB,cAAuB,CAG5B,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,OAAO,CAAC,IAAI,CACV,8IAA8I,CAC/I,CAAC;SACH;QACD,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;YAC7B,OAAO,CAAC,IAAI,CACV,4EAA4E,CAC7E,CAAC;SACH;KACF;IAED,uCACK,IAAI,KACP,UAAU,kCACL,UAAU,KACb,OAAO,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK;gBAC3B,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;gBAC3C,CAAC,CAAC,KAAK,CAAC,OAAO,EACjB,cAAc,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY;gBACzC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;gBAClD,CAAC,CAAC,KAAK,CAAC,cAAc,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACpC,aAAa,IAAI,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC1D,CAAC,OAEH;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -8,7 +8,7 @@ export interface RadioProps extends Omit<FormFieldProps, "error" | "errorId">, O
     /**
      * The value of the HTML element
      */
-    value: string | number | boolean;
+    value: any;
 }
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

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

@@ -2,9 +2,9 @@ import React from "react";
 import { FieldsetProps } from "..";
 export interface RadioGroupContextProps {
     name: string;
-    defaultValue?: string | number | boolean;
-    value?: string | number | boolean;
-    onChange: (value: string | number | boolean) => void;
+    defaultValue?: any;
+    value?: any;
+    onChange: (value: any) => void;
     required?: boolean;
 }
 export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;
@@ -20,15 +20,15 @@ export interface RadioGroupProps extends Omit<FieldsetProps, "onChange" | "error
     /**
      * Default checked radiobutton
      */
-    defaultValue?: string | number | boolean;
+    defaultValue?: any;
     /**
      * Controlled state for Radiobutton
      */
-    value?: string | number | boolean;
+    value?: any;
     /**
      * Returns current checked radiobutton in group
      */
-    onChange?: (value: string | number | boolean) => void;
+    onChange?: (value: any) => void;
     /**
      * Tells Fieldset if group is required
      */

package/esm/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/menu/Menu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,OAAO,IAAsB,MAAM,YAAY,CAAC;AAChD,OAAO,QAA8B,MAAM,gBAAgB,CAAC;AAc5D,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAAY,OAAA,CACvC,6CACM,IAAI,IACR,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;QAEtC,oBAAC,SAAS,QAAE,QAAQ,CAAa,CAC7B,CACP,CAAA;CAAA,CACa,CAAC;AAEnB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AAEjB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/menu/Menu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,OAAO,IAAsB,MAAM,YAAY,CAAC;AAChD,OAAO,QAA8B,MAAM,gBAAgB,CAAC;AAc5D,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAAY,OAAA,CACzC,6CACM,IAAI,IACR,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;QAEtC,oBAAC,SAAS,QAAE,QAAQ,CAAa,CAC7B,CACP,CAAA;CAAA,CACe,CAAC;AAEnB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AAEjB,eAAe,IAAI,CAAC"}

package/esm/table/ColumnHeader.d.ts

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

package/esm/table/ColumnHeader.js

@@ -0,0 +1,35 @@
+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, useContext } from "react";
+import { Down, Up } from "@navikt/ds-icons";
+import { TableContext } from "..";
+import HeaderCell from "./HeaderCell";
+const ColumnHeader = forwardRef((_a, ref) => {
+    var _b, _c, _d, _e;
+    var { className, children, sortable = false, sortKey } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortKey"]);
+    const context = useContext(TableContext);
+    if (sortable && !sortKey) {
+        console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
+    }
+    return (React.createElement(HeaderCell, Object.assign({ scope: "col", ref: ref, className: className, "aria-sort": sortable
+            ? ((_b = context === null || context === void 0 ? void 0 : context.sort) === null || _b === void 0 ? void 0 : _b.orderBy) === sortKey
+                ? (_c = context === null || context === void 0 ? void 0 : context.sort) === null || _c === void 0 ? void 0 : _c.direction
+                : "none"
+            : undefined }, rest), sortable ? (React.createElement("button", { className: "navds-table__sort-button", onClick: sortable && sortKey
+            ? () => { var _a; return (_a = context === null || context === void 0 ? void 0 : context.onSortChange) === null || _a === void 0 ? void 0 : _a.call(context, sortKey); }
+            : undefined },
+        children,
+        ((_d = context === null || context === void 0 ? void 0 : context.sort) === null || _d === void 0 ? void 0 : _d.orderBy) === sortKey &&
+            ((_e = context === null || context === void 0 ? void 0 : context.sort) === null || _e === void 0 ? void 0 : _e.direction) === "descending" ? (React.createElement(Down, { "aria-label": "sorter synkende" })) : (React.createElement(Up, { "aria-label": "sorter stigende" })))) : (children)));
+});
+export default ColumnHeader;
+//# sourceMappingURL=ColumnHeader.js.map

package/esm/table/ColumnHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeader.js","sourceRoot":"","sources":["../../src/table/ColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,UAA+B,MAAM,cAAc,CAAC;AAmB3D,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAA2D,EAAE,GAAG,EAAE,EAAE;;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzD,gDAA2D,CAAF;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;KACxE;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,eAElB,QAAQ;YACN,CAAC,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;gBAClC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS;gBAC1B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,IAEX,IAAI,GAEP,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EACL,QAAQ,IAAI,OAAO;YACjB,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,+CAArB,OAAO,EAAiB,OAAO,CAAC,CAAA,EAAA;YACxC,CAAC,CAAC,SAAS;QAGd,QAAQ;QACR,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;YACnC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,MAAK,YAAY,CAAC,CAAC,CAAC,CAC1C,oBAAC,IAAI,kBAAY,iBAAiB,GAAG,CACtC,CAAC,CAAC,CAAC,CACF,oBAAC,EAAE,kBAAY,iBAAiB,GAAG,CACpC,CACM,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/esm/table/DataCell.d.ts

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

package/esm/table/DataCell.js

@@ -14,9 +14,11 @@ import cl from "classnames";
 import { BodyShort } from "..";
 import { TableContext } from ".";
 const DataCell = forwardRef((_a, ref) => {
-    var { className, children = "" } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = useContext(TableContext);
-    return (React.createElement(BodyShort, Object.assign({ as: "td", ref: ref, className: cl("navds-table__data-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+    return (React.createElement(BodyShort, Object.assign({ as: "td", ref: ref, className: cl("navds-table__data-cell", className, {
+            [`navds-table__data-cell--align-${align}`]: align,
+        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 export default DataCell;
 //# sourceMappingURL=DataCell.js.map

package/esm/table/DataCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AASjC,MAAM,QAAQ,GAAiB,UAAU,CACvC,CAAC,EAAqC,EAAE,GAAG,EAAE,EAAE;QAA9C,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE,OAAW,EAAN,IAAI,cAAnC,yBAAqC,CAAF;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAClD,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAejC,MAAM,QAAQ,GAAiB,UAAU,CACvC,CAAC,EAA4C,EAAE,GAAG,EAAE,EAAE;QAArD,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,OAAW,EAAN,IAAI,cAA1C,kCAA4C,CAAF;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,EAAE;YACjD,CAAC,iCAAiC,KAAK,EAAE,CAAC,EAAE,KAAK;SAClD,CAAC,EACF,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/table/HeaderCell.d.ts

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

package/esm/table/HeaderCell.js

@@ -13,9 +13,11 @@ import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
 import { Label, TableContext } from "..";
 const HeaderCell = forwardRef((_a, ref) => {
-    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = useContext(TableContext);
-    return (React.createElement(Label, Object.assign({ as: "th", ref: ref, className: cl("navds-table__header-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+    return (React.createElement(Label, Object.assign({ as: "th", ref: ref, className: cl("navds-table__header-cell", className, {
+            [`navds-table__header-cell--align-${align}`]: align,
+        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 export default HeaderCell;
 //# sourceMappingURL=HeaderCell.js.map

package/esm/table/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../src/table/HeaderCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAWzC,MAAM,UAAU,GAAmB,UAAU,CAC3C,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,KAAK,kBACJ,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,EACpD,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../src/table/HeaderCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAiBzC,MAAM,UAAU,GAAmB,UAAU,CAC3C,CAAC,EAAuC,EAAE,GAAG,EAAE,EAAE;QAAhD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACpC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,KAAK,kBACJ,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,EAAE;YACnD,CAAC,mCAAmC,KAAK,EAAE,CAAC,EAAE,KAAK;SACpD,CAAC,EACF,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/table/Table.d.ts

@@ -2,8 +2,13 @@ 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";
+export interface SortState {
+    orderBy: string;
+    direction: "ascending" | "descending";
+}
 export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Changes padding
@@ -15,6 +20,14 @@ export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement>
      * @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;
@@ -22,9 +35,12 @@ export interface TableType extends React.ForwardRefExoticComponent<TableProps &
     Row: RowType;
     DataCell: DataCellType;
     HeaderCell: HeaderCellType;
+    ColumnHeader: ColumnHeaderType;
 }
 export interface TableContextProps {
     size: "medium" | "small";
+    onSortChange?: (sortKey: string) => void;
+    sort?: SortState;
 }
 export declare const TableContext: React.Context<TableContextProps | null>;
 declare const Table: TableType;

package/esm/table/Table.js

@@ -14,12 +14,13 @@ import cl from "classnames";
 import Header from "./Header";
 import Body from "./Body";
 import Row from "./Row";
+import ColumnHeader from "./ColumnHeader";
 import HeaderCell from "./HeaderCell";
 import DataCell from "./DataCell";
 export const TableContext = createContext(null);
 const Table = forwardRef((_a, ref) => {
-    var { className, zebraStripes = false, size = "medium" } = _a, rest = __rest(_a, ["className", "zebraStripes", "size"]);
-    return (React.createElement(TableContext.Provider, { value: { size } },
+    var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
+    return (React.createElement(TableContext.Provider, { value: { size, onSortChange, sort } },
         React.createElement("table", Object.assign({}, rest, { ref: ref, className: cl("navds-table", `navds-table--${size}`, className, {
                 "navds-table--zebra-stripes": zebraStripes,
             }) }))));
@@ -27,6 +28,7 @@ const Table = forwardRef((_a, ref) => {
 Table.Header = Header;
 Table.Body = Body;
 Table.Row = Row;
+Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;
 export default Table;

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,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AA+BpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,SAAS,EAAE,YAAY,GAAG,KAAK,EAAE,IAAI,GAAG,QAAQ,OAAW,EAAN,IAAI,cAA3D,qCAA6D,CAAF;IAAY,OAAA,CACtE,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE;QACpC,+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,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;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.16.15",
+  "version": "0.16.18",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -37,7 +37,7 @@
     "@material-ui/core": "^4.12.3",
     "@navikt/ds-icons": "^0.8.4",
     "@popperjs/core": "^2.10.1",
-    "@radix-ui/react-toggle-group": "^0.1.4",
+    "@radix-ui/react-toggle-group": "0.1.4",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
@@ -59,11 +59,12 @@
     "react-router-dom": "^6.1.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1",
+    "swr": "^1.1.2",
     "ts-jest": "^27.0.5"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "8e4e08d51c3913f8058244960223af88924f45f4"
+  "gitHead": "6f5fee96288a9d7302a595d9d5a09102387c39c2"
 }

package/src/button/Button.tsx

@@ -19,7 +19,7 @@ export interface ButtonProps
    * Changes padding, height and font-size
    * @default "medium"
    */
-  size?: "medium" | "small";
+  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
@@ -43,6 +43,7 @@ const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
       size = "medium",
       loading = false,
       disabled,
+      style,
       ...rest
     },
     ref
@@ -76,13 +77,16 @@ const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
             "navds-button--loading": widthOverride,
           }
         )}
-        style={{ width: widthOverride }}
+        style={{
+          ...style,
+          width: widthOverride,
+        }}
         disabled={disabled ?? widthOverride ? true : undefined}
       >
         <BodyShort
           as="span"
           className="navds-button__inner"
-          size={size}
+          size={size === "medium" ? "medium" : "small"}
           aria-live="polite"
         >
           {widthOverride ? <Loader size={size} /> : children}

package/src/button/button.stories.tsx

@@ -81,6 +81,14 @@ export const All = () => {
           </Button>
         ))}
       </Section>
+      <h2>Xsmall</h2>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} size="xsmall">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </Section>
       <h2>Button w/icon</h2>
       <Section>
         {variants.map((variant) => (