@navikt/ds-react 0.15.0-rc.30 → 0.15.0-rc.51

package/cjs/accordion/AccordionHeader.js

@@ -54,12 +54,12 @@ const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
         context.toggleOpen();
         onClick && onClick(e);
     };
-    return (react_1.default.createElement("button", Object.assign({ ref: ref, id: context.buttonId, className: (0, classnames_1.default)("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick }, rest),
+    return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, id: context.buttonId, className: (0, classnames_1.default)("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-expanded": context.open }),
         children,
-        react_1.default.createElement(ds_icons_1.Expand, { title: context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: (0, classnames_1.default)("navds-accordion__expand-icon", {
+        react_1.default.createElement(ds_icons_1.Expand, { "aria-hidden": true, className: (0, classnames_1.default)("navds-accordion__expand-icon", {
                 "navds-accordion__expand-icon--flip": context.open,
             }) }),
-        react_1.default.createElement(ds_icons_1.ExpandFilled, { title: context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: (0, classnames_1.default)("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
+        react_1.default.createElement(ds_icons_1.ExpandFilled, { "aria-hidden": true, className: (0, classnames_1.default)("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
                 "navds-accordion__expand-icon--flip": context.open,
             }) })));
 });

package/cjs/alert/Alert.js

@@ -41,13 +41,13 @@ const Icon = (_a) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);
     switch (variant) {
         case "error":
-            return react_1.default.createElement(ds_icons_1.ErrorFilled, Object.assign({}, props));
+            return react_1.default.createElement(ds_icons_1.ErrorFilled, Object.assign({ title: "Feil" }, props));
         case "warning":
-            return react_1.default.createElement(ds_icons_1.WarningFilled, Object.assign({}, props));
+            return react_1.default.createElement(ds_icons_1.WarningFilled, Object.assign({ title: "Advarsel" }, props));
         case "info":
-            return react_1.default.createElement(ds_icons_1.InformationFilled, Object.assign({}, props));
+            return react_1.default.createElement(ds_icons_1.InformationFilled, Object.assign({ title: "Informasjon" }, props));
         case "success":
-            return react_1.default.createElement(ds_icons_1.SuccessFilled, Object.assign({}, props));
+            return react_1.default.createElement(ds_icons_1.SuccessFilled, Object.assign({ title: "Suksess" }, props));
         default:
             return null;
     }
@@ -55,7 +55,7 @@ const Icon = (_a) => {
 const Alert = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, variant, size = "medium", fullWidth = false, inline = false } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
-        react_1.default.createElement(Icon, { title: `${variant}-ikon`, variant: variant, className: "navds-alert__icon" }),
+        react_1.default.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
         react_1.default.createElement(__1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children)));
 });
 exports.default = Alert;

package/cjs/form/Fieldset/Fieldset.js

@@ -56,13 +56,13 @@ const Fieldset = (0, react_1.forwardRef)((props, ref) => {
         } },
         react_1.default.createElement("fieldset", Object.assign({}, (0, __1.omit)(rest, ["errorId", "error", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, { "navds-fieldset--error": hasError }) }),
             react_1.default.createElement(__1.Label, { size: size, as: "legend", className: (0, classnames_1.default)("navds-fieldset__legend", {
-                    "sr-only": !!hideLegend,
+                    "navds-sr-only": !!hideLegend,
                 }) }, legend),
             !!description &&
                 (size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-fieldset__description", {
-                        "sr-only": !!hideLegend,
+                        "navds-sr-only": !!hideLegend,
                     }), id: inputDescriptionId, size: "small", as: "div" }, props.description)) : (react_1.default.createElement(__1.Detail, { className: (0, classnames_1.default)("navds-fieldset__description", {
-                        "sr-only": !!hideLegend,
+                        "navds-sr-only": !!hideLegend,
                     }), id: inputDescriptionId, size: "small", as: "div" }, props.description))),
             children,
             react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite", className: "navds-fieldset__error" }, showErrorMsg && (react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))))));

package/cjs/form/Select.js

@@ -47,10 +47,10 @@ const Select = (0, react_1.forwardRef)((props, ref) => {
             "navds-select--disabled": !!inputProps.disabled,
         }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-select__label", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }) }, label),
         !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, classnames_1.default)("navds-select__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-select__container" },
             react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),

package/cjs/form/Switch.js

@@ -40,7 +40,7 @@ const useFormField_1 = require("./useFormField");
 const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12px", height: "12px", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
 const Switch = (0, react_1.forwardRef)((props, ref) => {
-    var _a;
+    var _a, _b, _c;
     const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");
     const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
     const Description = size === "medium" ? __1.BodyShort : __1.Detail;
@@ -53,14 +53,15 @@ const Switch = (0, react_1.forwardRef)((props, ref) => {
         props.onChange && props.onChange(e);
     };
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
-            "navds-switch--disabled": inputProps.disabled,
+            "navds-switch--loading": loading,
+            "navds-switch--disabled": (_b = inputProps.disabled) !== null && _b !== void 0 ? _b : loading,
         }) },
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: (0, classnames_1.default)(className, "navds-switch__input") })),
+        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: (0, classnames_1.default)(className, "navds-switch__input") })),
         react_1.default.createElement("span", { className: "navds-switch__track" },
-            react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(__1.Loader, { size: "xsmall" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
+            react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(__1.Loader, { size: "xsmall", "aria-live": "polite" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
         react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
             react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch__content", {
-                    "sr-only": hideLabel,
+                    "navds-sr-only": hideLabel,
                     "navds-switch--with-description": !!description && !hideLabel,
                 }) },
                 react_1.default.createElement(__1.BodyShort, { as: "div", size: size, className: "navds-switch__label" }, children),

package/cjs/form/TextField.js

@@ -45,11 +45,13 @@ const TextField = (0, react_1.forwardRef)((props, ref) => {
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
         }) },
-        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", { "sr-only": hideLabel }) }, label),
+        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", {
+                "navds-sr-only": hideLabel,
+            }) }, label),
         !!description && (react_1.default.createElement(react_1.default.Fragment, null, size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-text-field__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: "small", as: "div" }, description)) : (react_1.default.createElement(__1.Detail, { className: (0, classnames_1.default)("navds-text-field__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: "small", as: "div" }, description)))),
         react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, className: (0, classnames_1.default)("navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize })),
         react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));

package/cjs/form/Textarea.js

@@ -51,10 +51,10 @@ const Textarea = (0, react_1.forwardRef)((props, ref) => {
             "navds-textarea--disabled": !!inputProps.disabled,
         }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-textarea__label", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }) }, label),
         !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, classnames_1.default)("navds-textarea__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-textarea__wrapper" },
             react_1.default.createElement(TextareaAutosize_1.default, Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
@@ -63,7 +63,7 @@ const Textarea = (0, react_1.forwardRef)((props, ref) => {
                     [maxLengthId]: hasMaxLength,
                 }) })),
             hasMaxLength && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("span", { id: maxLengthId, className: "sr-only" },
+                react_1.default.createElement("span", { id: maxLengthId, className: "navds-sr-only" },
                     "Tekstomr\u00E5de med plass til ",
                     maxLength,
                     " tegn., Textarea can have",

package/cjs/form/checkbox/Checkbox.js

@@ -39,10 +39,21 @@ const Checkbox = (0, react_1.forwardRef)((props, ref) => {
             "error",
             "description",
             "hideLabel",
-        ]), inputProps, { className: "navds-checkbox__input", ref: ref })),
+        ]), inputProps, { type: "checkbox", className: "navds-checkbox__input", "aria-checked": props.indeterminate ? "mixed" : inputProps.checked, ref: (el) => {
+                var _a;
+                if (el) {
+                    el.indeterminate = (_a = props.indeterminate) !== null && _a !== void 0 ? _a : false;
+                }
+                if (typeof ref === "function") {
+                    ref(el);
+                }
+                else if (ref != null) {
+                    ref.current = el;
+                }
+            } })),
         react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
             react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-checkbox__content", {
-                    "sr-only": props.hideLabel,
+                    "navds-sr-only": props.hideLabel,
                 }) },
                 react_1.default.createElement(__1.BodyShort, { as: "div", size: size }, props.children),
                 props.description && (react_1.default.createElement(Description, { as: "div", size: "small", className: "navds-checkbox__description" }, props.description))))));

package/cjs/form/checkbox/CheckboxGroup.js

@@ -42,9 +42,9 @@ const CheckboxGroup = (0, react_1.forwardRef)((_a, ref) => {
     var _b, _c;
     var { value, defaultValue, onChange = () => { }, children, className } = _a, rest = __rest(_a, ["value", "defaultValue", "onChange", "children", "className"]);
     const fieldset = (0, react_1.useContext)(__1.FieldsetContext);
-    const [state, setState] = (0, react_1.useState)([]);
-    const handleChange = (v) => {
-        const newValue = value ? value : state;
+    const [state, setState] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+    const toggleValue = (v) => {
+        const newValue = value !== null && value !== void 0 ? value : state;
         const newState = newValue.includes(v)
             ? newValue.filter((x) => x !== v)
             : [...newValue, v];
@@ -55,7 +55,7 @@ const CheckboxGroup = (0, react_1.forwardRef)((_a, ref) => {
         react_1.default.createElement(exports.CheckboxGroupContext.Provider, { value: {
                 value,
                 defaultValue,
-                toggleValue: (value) => handleChange(value),
+                toggleValue,
             } },
             react_1.default.createElement("div", { className: "navds-checkboxes" }, children))));
 });

package/cjs/form/checkbox/useCheckbox.js

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

package/cjs/form/search-field/SearchField.js

@@ -51,10 +51,10 @@ const SearchField = (0, react_1.forwardRef)((props, ref) => {
             "navds-search-field--disabled": !!inputProps.disabled,
         }) }),
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }) }, label),
         !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, classnames_1.default)("navds-text-field__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-search-field__input-wrapper" },
             react_1.default.createElement(exports.SearchFieldContext.Provider, { value: {

package/cjs/help-text/HelpText.js

@@ -42,13 +42,13 @@ const HelpText = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
     const buttonRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
-    const popoverRef = (0, react_1.useRef)(null);
+    const [popoverRef, setPopoverRef] = (0, react_1.useState)(null);
     const wrapperRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         var _a;
-        open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }, [open]);
+        open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
+    }, [open, popoverRef]);
     const handleClick = (e) => {
         setOpen((x) => !x);
         rest.onClick && rest.onClick(e);
@@ -57,7 +57,7 @@ const HelpText = (0, react_1.forwardRef)((_a, ref) => {
         react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
             react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon" }),
             react_1.default.createElement("span", { className: "navds-sr-only" }, title)),
-        react_1.default.createElement(__1.Popover, { ref: popoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
+        react_1.default.createElement(__1.Popover, { ref: setPopoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
             react_1.default.createElement(__1.Popover.Content, null, children))));
 });
 exports.default = HelpText;

package/cjs/index.js

@@ -11,7 +11,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./accordion"), exports);
-__exportStar(require("./accordion-menu"), exports);
 __exportStar(require("./alert"), exports);
 __exportStar(require("./button"), exports);
 __exportStar(require("./form"), exports);
@@ -21,6 +20,7 @@ __exportStar(require("./guide-panel"), exports);
 __exportStar(require("./link"), exports);
 __exportStar(require("./link-panel"), exports);
 __exportStar(require("./loader"), exports);
+__exportStar(require("./menu"), exports);
 __exportStar(require("./modal"), exports);
 __exportStar(require("./pagination"), exports);
 __exportStar(require("./panel"), exports);
@@ -28,6 +28,7 @@ __exportStar(require("./popover"), exports);
 __exportStar(require("./speech-bubble"), exports);
 __exportStar(require("./step-indicator"), exports);
 __exportStar(require("./tag"), exports);
+__exportStar(require("./toggle-group"), exports);
 __exportStar(require("./table"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);

package/cjs/{accordion-menu/AccordionMenu.js → menu/Menu.js}

@@ -36,13 +36,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const MenuItems_1 = __importDefault(require("./MenuItems"));
-const AccordionMenuCollapsable_1 = __importDefault(require("./AccordionMenuCollapsable"));
-const AccordionMenuItem_1 = __importDefault(require("./AccordionMenuItem"));
-const AccordionMenu = (0, react_1.forwardRef)((_a, ref) => {
+const MenuItem_1 = __importDefault(require("./MenuItem"));
+const MenuCollapse_1 = __importDefault(require("./MenuCollapse"));
+const Menu = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (react_1.default.createElement("nav", Object.assign({ role: "navigation", ref: ref, className: (0, classnames_1.default)("navds-accordion-menu", className) }, rest),
+    return (react_1.default.createElement("nav", Object.assign({}, rest, { role: "navigation", ref: ref, className: (0, classnames_1.default)("navds-menu", className) }),
         react_1.default.createElement(MenuItems_1.default, null, children)));
 });
-AccordionMenu.Collapsable = AccordionMenuCollapsable_1.default;
-AccordionMenu.Item = AccordionMenuItem_1.default;
-exports.default = AccordionMenu;
+Menu.Collapse = MenuCollapse_1.default;
+Menu.Item = MenuItem_1.default;
+exports.default = Menu;

package/cjs/{accordion-menu/AccordionMenuCollapsable.js → menu/MenuCollapse.js}

@@ -33,19 +33,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NestingContext = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ds_icons_1 = require("@navikt/ds-icons");
 const MenuItems_1 = __importDefault(require("./MenuItems"));
-const Collapsable = (0, react_1.forwardRef)((_a, ref) => {
+exports.NestingContext = (0, react_1.createContext)({ depth: 1 });
+const NestingProvider = ({ children }) => {
+    const context = (0, react_1.useContext)(exports.NestingContext);
+    return (react_1.default.createElement(exports.NestingContext.Provider, { value: {
+            depth: context.depth + 1,
+        } }, children));
+};
+const Collapse = (0, react_1.forwardRef)((_a, ref) => {
     var { children, defaultOpen = false, title, className } = _a, rest = __rest(_a, ["children", "defaultOpen", "title", "className"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-accordion-menu-collapsable", className, {
-            "navds-accordion-menu-collapsable--open": isOpen,
-        }) }, rest),
-        react_1.default.createElement("button", { onClick: () => setIsOpen(!isOpen), className: "navds-accordion-menu-collapsable__button" },
+    const context = (0, react_1.useContext)(exports.NestingContext);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-menu-collapse", className, {
+            "navds-menu-collapse--open": isOpen,
+        }) }),
+        react_1.default.createElement("button", { onClick: () => setIsOpen(!isOpen), className: "navds-menu-collapse__button" },
             title,
-            react_1.default.createElement(ds_icons_1.Expand, { title: isOpen ? "Pil peker opp" : "Pil peker ned", className: "navds-accordion-menu-collapsable__expand-icon" })),
-        isOpen && react_1.default.createElement(MenuItems_1.default, null, children)));
+            react_1.default.createElement(ds_icons_1.Expand, { title: isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff", className: "navds-menu-collapse__expand-icon" }),
+            react_1.default.createElement(ds_icons_1.ExpandFilled, { title: isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff", className: "navds-menu-collapse__expand-icon navds-menu-collapse__expand-icon--filled" })),
+        react_1.default.createElement(NestingProvider, null, isOpen && (react_1.default.createElement(MenuItems_1.default, { "data-depth": context.depth, className: "navds-menu__list--inner" }, children)))));
 });
-exports.default = Collapsable;
+exports.default = Collapse;

package/cjs/{accordion-menu/AccordionMenuItem.js → menu/MenuItem.js}

@@ -37,8 +37,8 @@ const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Item = (0, react_1.forwardRef)((_a, ref) => {
     var { children, as: Component = "a", active = false, className } = _a, rest = __rest(_a, ["children", "as", "active", "className"]);
-    return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-accordion-menu-item", className, {
-            "navds-accordion-menu-item--active": active,
+    return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-menu-item", className, {
+            "navds-menu-item--active": active,
         }) }, rest), children));
 });
 exports.default = Item;

package/cjs/menu/MenuItems.js

@@ -0,0 +1,23 @@
+"use strict";
+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 classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const MenuItems = (_a) => {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    return (react_1.default.createElement("ul", Object.assign({}, rest, { className: (0, classnames_1.default)("navds-menu__list", className) }), react_1.default.Children.toArray(children).map((child, i) => (react_1.default.createElement("li", { key: i, className: "navds-menu__list-item" }, child)))));
+};
+exports.default = MenuItems;

package/cjs/menu/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+var Menu_1 = require("./Menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return __importDefault(Menu_1).default; } });

package/cjs/menu/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/menu/index.js",
+  "types": "../../esm/menu/index.d.ts"
+}

package/cjs/modal/Modal.js

@@ -41,7 +41,7 @@ const ds_icons_1 = require("@navikt/ds-icons");
 const __1 = require("..");
 const ModalContent_1 = __importDefault(require("./ModalContent"));
 const Modal = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton"]);
+    var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal"]);
     const modalRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([modalRef, ref]);
     const buttonRef = (0, react_1.useRef)(null);
@@ -53,7 +53,11 @@ const Modal = (0, react_1.forwardRef)((_a, ref) => {
             buttonRef.current.focus();
         }
     };
-    return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: (0, classnames_1.default)("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e) }),
+    return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: (0, classnames_1.default)("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
+            describedby: ariaDescribedBy,
+            labelledby: ariaLabelledBy,
+            modal: ariaModal,
+        } }),
         children,
         closeButton && (react_1.default.createElement(__1.Button, { className: (0, classnames_1.default)("navds-modal__button", {
                 "navds-modal__button--shake": shouldCloseOnOverlayClick,

package/cjs/page-header/PageHeader.js

@@ -41,7 +41,7 @@ const PageHeader = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-page-header", className, `navds-page-header--${variant}`, `navds-page-header--${align}`) }, rest),
         illustration && (react_1.default.createElement("div", { className: "navds-page-header__illustration" }, illustration)),
         react_1.default.createElement("div", { className: "navds-page-header__wrapper" },
-            react_1.default.createElement(__1.Heading, { className: "navds-page-header__title", size: "2xlarge", level: "1" }, children),
+            react_1.default.createElement(__1.Heading, { className: "navds-page-header__title", size: "xlarge", level: "1" }, children),
             description && (react_1.default.createElement(__1.BodyShort, { className: "navds-page-header__description" }, description)))));
 });
 exports.default = PageHeader;

package/cjs/pagination/Pagination.js

@@ -8,37 +8,64 @@ const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ds_icons_1 = require("@navikt/ds-icons");
 const __1 = require("..");
-const getSteps = ({ current, count }) => new Array(count)
-    .fill(null)
-    .map((_, i) => i)
-    .filter((n) => {
-    if (count < 8) {
-        return true;
-    }
-    if (n === count - 1 || n === 0) {
-        return true;
+const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, }) => {
+    var _a, _b;
+    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    if (count <= (boundaryCount + siblingCount) * 2 + 3)
+        return range(1, count);
+    const startPages = range(1, boundaryCount);
+    const endPages = range(count - boundaryCount + 1, count);
+    const siblingsStart = Math.max(Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = siblingsStart + siblingCount * 2;
+    return [
+        ...startPages,
+        siblingsStart - ((_a = startPages[startPages.length - 1]) !== null && _a !== void 0 ? _a : 0) === 2
+            ? siblingsStart - 1
+            : "ellipsis",
+        ...range(siblingsStart, siblingsEnd),
+        ((_b = endPages[0]) !== null && _b !== void 0 ? _b : count + 1) - siblingsEnd === 2
+            ? siblingsEnd + 1
+            : "ellipsis",
+        ...endPages,
+    ];
+};
+exports.getSteps = getSteps;
+const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false, }) => {
+    if (page < 1) {
+        console.error("page cannot be less than 1");
+        return null;
     }
-    if (n >= current - 1 && n <= current + 1) {
-        return true;
+    if (count < 1) {
+        console.error("count cannot be less than 1");
+        return null;
     }
-    if (current <= 3 && n <= 4) {
-        return true;
+    if (boundaryCount < 0) {
+        console.error("boundaryCount cannot be less than 0");
+        return null;
     }
-    if (current >= count - 4 && n >= count - 5) {
-        return true;
+    if (siblingCount < 0) {
+        console.error("siblingCount cannot be less than 0");
+        return null;
     }
-    return false;
-});
-exports.getSteps = getSteps;
-const Pagination = ({ page, onPageChange, count, className, }) => {
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-pagination", className) },
-        react_1.default.createElement(__1.Button, { variant: "tertiary", size: "small", disabled: page === 0, onClick: () => onPageChange(page - 1) },
-            react_1.default.createElement(ds_icons_1.Back, null)),
-        (0, exports.getSteps)({ current: page, count }).map((n, i, a) => (react_1.default.createElement(react_1.default.Fragment, null,
-            i !== 0 && a[i - 1] !== n - 1 && (react_1.default.createElement("div", { className: "navds-pagination__ellipsis" },
-                react_1.default.createElement("span", null, "..."))),
-            react_1.default.createElement(__1.Button, { key: n, variant: page === n ? "primary" : "tertiary", size: "small", onClick: () => onPageChange(n) }, n + 1)))),
-        react_1.default.createElement(__1.Button, { variant: "tertiary", size: "small", disabled: page === count - 1, onClick: () => onPageChange(page + 1) },
-            react_1.default.createElement(ds_icons_1.Next, null))));
+    return (react_1.default.createElement("nav", { className: (0, classnames_1.default)("navds-pagination", `navds-pagination--${size}`, className) },
+        prevNextTexts && page !== 1 && (react_1.default.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page - 1) },
+            react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", role: "presentation" }),
+            react_1.default.createElement(__1.BodyShort, { size: size, className: "navds-pagination__prev-text" }, "Forrige"))),
+        react_1.default.createElement("ul", { className: "navds-pagination__list" },
+            !prevNextTexts && page !== 1 && (react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page - 1) },
+                    react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", title: "Forrige" })))),
+            (0, exports.getSteps)({ page, count, siblingCount, boundaryCount }).map((step, i) => {
+                const n = Number(step);
+                return isNaN(n) ? (react_1.default.createElement("li", { className: "navds-pagination__ellipsis", key: `${step}${i}` },
+                    react_1.default.createElement(__1.BodyShort, { size: size }, "..."))) : (react_1.default.createElement("li", { key: step },
+                    react_1.default.createElement(__1.BodyShort, { size: size, as: "button", className: "navds-pagination__item", onClick: () => onPageChange(n), "aria-current": page === n ? true : undefined }, n)));
+            }),
+            !prevNextTexts && page !== count && (react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page + 1) },
+                    react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", title: "Neste" }))))),
+        prevNextTexts && page !== count && (react_1.default.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page + 1) },
+            react_1.default.createElement(__1.BodyShort, { size: size, className: "navds-pagination__next-text" }, "Neste"),
+            react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", role: "presentation" })))));
 };
 exports.default = Pagination;

package/cjs/table/ColumnHeader.js

@@ -34,8 +34,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const __1 = require("..");
 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;
@@ -49,10 +49,10 @@ const ColumnHeader = (0, react_1.forwardRef)((_a, ref) => {
                 ? (_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.toggleColumnSort) === null || _a === void 0 ? void 0 : _a.call(context, 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) === "ascending" ? react_1.default.createElement(ds_icons_1.Down, null) : react_1.default.createElement(ds_icons_1.Up, null)))) : (children)));
+            ((_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;