@navikt/ds-react 5.12.5 → 5.14.0

package/_docs.json

@@ -335,6 +335,25 @@
           "name": "boolean"
         }
       },
+      "onOpenChange": {
+        "defaultValue": null,
+        "description": "Callback for current open-state",
+        "name": "onOpenChange",
+        "parent": {
+          "fileName": "src/accordion/AccordionItem.tsx",
+          "name": "AccordionItemProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/accordion/AccordionItem.tsx",
+            "name": "AccordionItemProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((open: boolean) => void)"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -1879,6 +1898,25 @@
         "type": {
           "name": "boolean"
         }
+      },
+      "onOpenChange": {
+        "defaultValue": null,
+        "description": "Change handler for open",
+        "name": "onOpenChange",
+        "parent": {
+          "fileName": "src/dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/dropdown/Dropdown.tsx",
+            "name": "DropdownProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((open: boolean) => void)"
+        }
       }
     }
   },
@@ -4134,27 +4172,6 @@
           "name": "string"
         }
       },
-      "placement": {
-        "defaultValue": {
-          "value": "top"
-        },
-        "description": "Default dialog-placement on open",
-        "name": "placement",
-        "parent": {
-          "fileName": "src/help-text/HelpText.tsx",
-          "name": "HelpTextProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/help-text/HelpText.tsx",
-            "name": "HelpTextProps"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
-        }
-      },
       "wrapperClassName": {
         "defaultValue": null,
         "description": "Classname for wrapper",
@@ -4214,6 +4231,27 @@
           "name": "\"absolute\" | \"fixed\""
         }
       },
+      "placement": {
+        "defaultValue": {
+          "value": "\"top\""
+        },
+        "description": "Default orientation of popover\n@note Try to keep general usage to \"top\", \"bottom\", \"left\", \"right\"",
+        "name": "placement",
+        "parent": {
+          "fileName": "react/src/popover/Popover.tsx",
+          "name": "PopoverProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/popover/Popover.tsx",
+            "name": "PopoverProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
+        }
+      },
       "ref": {
         "defaultValue": null,
         "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
@@ -4986,7 +5024,7 @@
         ],
         "required": false,
         "type": {
-          "name": "ElementType<any>"
+          "name": "ElementType<any, keyof IntrinsicElements>"
         }
       },
       "size": {
@@ -5384,7 +5422,7 @@
       },
       "onCancel": {
         "defaultValue": null,
-        "description": "*Sometimes** called when the user presses the Esc key, unless you return `false` in `onBeforeClose()`.\n@warning *Some browsers does not always trigger this event. Chrome only triggers it if you have\ninteracted with the modal, and will not trigger it a second time if you press Esc twice in a row.",
+        "description": "*Sometimes** called when the user presses the Esc key.\n@warning *Some browsers does not always trigger this event. Chrome only triggers it if you have\ninteracted with the modal, and will not trigger it a second time if you press Esc twice in a row.",
         "name": "onCancel",
         "parent": {
           "fileName": "react/src/modal/types.ts",
@@ -6319,7 +6357,7 @@
         "defaultValue": {
           "value": "\"top\""
         },
-        "description": "Orientation for popover\n@note Try to keep general usage to \"top\", \"bottom\", \"left\", \"right\"",
+        "description": "Default orientation of popover\n@note Try to keep general usage to \"top\", \"bottom\", \"left\", \"right\"",
         "name": "placement",
         "parent": {
           "fileName": "src/popover/Popover.tsx",
@@ -6611,6 +6649,25 @@
           "name": "boolean"
         }
       },
+      "onOpenChange": {
+        "defaultValue": null,
+        "description": "Callback for current open-state",
+        "name": "onOpenChange",
+        "parent": {
+          "fileName": "src/read-more/ReadMore.tsx",
+          "name": "ReadMoreProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/read-more/ReadMore.tsx",
+            "name": "ReadMoreProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((open: boolean) => void)"
+        }
+      },
       "size": {
         "defaultValue": {
           "value": "medium"
@@ -7065,6 +7122,111 @@
       }
     }
   },
+  {
+    "filePath": "src/table/AnimateHeight.tsx",
+    "displayName": "AnimateHeight",
+    "props": {
+      "duration": {
+        "defaultValue": {
+          "value": "250ms"
+        },
+        "description": "",
+        "name": "duration",
+        "parent": {
+          "fileName": "src/table/AnimateHeight.tsx",
+          "name": "AnimateHeightProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/AnimateHeight.tsx",
+            "name": "AnimateHeightProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "easing": {
+        "defaultValue": {
+          "value": "ease"
+        },
+        "description": "",
+        "name": "easing",
+        "parent": {
+          "fileName": "src/table/AnimateHeight.tsx",
+          "name": "AnimateHeightProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/AnimateHeight.tsx",
+            "name": "AnimateHeightProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "height": {
+        "defaultValue": null,
+        "description": "",
+        "name": "height",
+        "parent": {
+          "fileName": "src/table/AnimateHeight.tsx",
+          "name": "AnimateHeightProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/AnimateHeight.tsx",
+            "name": "AnimateHeightProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "Height"
+        }
+      },
+      "innerClassName": {
+        "defaultValue": null,
+        "description": "",
+        "name": "innerClassName",
+        "parent": {
+          "fileName": "src/table/AnimateHeight.tsx",
+          "name": "AnimateHeightProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/AnimateHeight.tsx",
+            "name": "AnimateHeightProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/table/Body.tsx",
     "displayName": "Body",
@@ -7193,6 +7355,25 @@
           "name": "\"left\" | \"center\" | \"right\""
         }
       },
+      "textSize": {
+        "defaultValue": null,
+        "description": "Adjusts font-size",
+        "name": "textSize",
+        "parent": {
+          "fileName": "react/src/table/HeaderCell.tsx",
+          "name": "HeaderCellProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/table/HeaderCell.tsx",
+            "name": "HeaderCellProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"medium\" | \"small\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -7258,6 +7439,25 @@
           "name": "\"left\" | \"center\" | \"right\""
         }
       },
+      "textSize": {
+        "defaultValue": null,
+        "description": "Adjusts font-size",
+        "name": "textSize",
+        "parent": {
+          "fileName": "src/table/DataCell.tsx",
+          "name": "DataCellProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/DataCell.tsx",
+            "name": "DataCellProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"medium\" | \"small\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -7634,6 +7834,25 @@
           "name": "\"left\" | \"center\" | \"right\""
         }
       },
+      "textSize": {
+        "defaultValue": null,
+        "description": "Adjusts font-size",
+        "name": "textSize",
+        "parent": {
+          "fileName": "src/table/HeaderCell.tsx",
+          "name": "HeaderCellProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/HeaderCell.tsx",
+            "name": "HeaderCellProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"medium\" | \"small\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -8359,6 +8578,25 @@
           "name": "\"medium\" | \"small\" | \"xsmall\""
         }
       },
+      "icon": {
+        "defaultValue": null,
+        "description": "Tag Icon",
+        "name": "icon",
+        "parent": {
+          "fileName": "src/tag/Tag.tsx",
+          "name": "TagProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/tag/Tag.tsx",
+            "name": "TagProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -9034,6 +9272,25 @@
           "name": "boolean"
         }
       },
+      "onOpenChange": {
+        "defaultValue": null,
+        "description": "Change handler for open",
+        "name": "onOpenChange",
+        "parent": {
+          "fileName": "src/tooltip/Tooltip.tsx",
+          "name": "TooltipProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/tooltip/Tooltip.tsx",
+            "name": "TooltipProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((open: boolean) => void)"
+        }
+      },
       "placement": {
         "defaultValue": {
           "value": "\"top\""
@@ -10237,111 +10494,6 @@
       }
     }
   },
-  {
-    "filePath": "src/util/AnimateHeight.tsx",
-    "displayName": "AnimateHeight",
-    "props": {
-      "duration": {
-        "defaultValue": {
-          "value": "250ms"
-        },
-        "description": "",
-        "name": "duration",
-        "parent": {
-          "fileName": "src/util/AnimateHeight.tsx",
-          "name": "AnimateHeightProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/util/AnimateHeight.tsx",
-            "name": "AnimateHeightProps"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "number"
-        }
-      },
-      "easing": {
-        "defaultValue": {
-          "value": "ease"
-        },
-        "description": "",
-        "name": "easing",
-        "parent": {
-          "fileName": "src/util/AnimateHeight.tsx",
-          "name": "AnimateHeightProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/util/AnimateHeight.tsx",
-            "name": "AnimateHeightProps"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "height": {
-        "defaultValue": null,
-        "description": "",
-        "name": "height",
-        "parent": {
-          "fileName": "src/util/AnimateHeight.tsx",
-          "name": "AnimateHeightProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/util/AnimateHeight.tsx",
-            "name": "AnimateHeightProps"
-          }
-        ],
-        "required": true,
-        "type": {
-          "name": "Height"
-        }
-      },
-      "innerClassName": {
-        "defaultValue": null,
-        "description": "",
-        "name": "innerClassName",
-        "parent": {
-          "fileName": "src/util/AnimateHeight.tsx",
-          "name": "AnimateHeightProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/util/AnimateHeight.tsx",
-            "name": "AnimateHeightProps"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "className": {
-        "defaultValue": null,
-        "description": "",
-        "name": "className",
-        "parent": {
-          "fileName": "aksel/node_modules/@types/react/index.d.ts",
-          "name": "HTMLAttributes"
-        },
-        "declarations": [
-          {
-            "fileName": "aksel/node_modules/@types/react/index.d.ts",
-            "name": "HTMLAttributes"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      }
-    }
-  },
   {
     "filePath": "src/util/Slot.tsx",
     "displayName": "Slot",
@@ -10489,11 +10641,6 @@
       }
     }
   },
-  {
-    "filePath": "src/util/mergeRefs.tsx",
-    "displayName": "mergeRefs",
-    "props": {}
-  },
   {
     "filePath": "src/date/context/useSharedMonthContext.tsx",
     "displayName": "SharedMonthProvider",
@@ -15808,7 +15955,7 @@
         ],
         "required": false,
         "type": {
-          "name": "ElementType<any>"
+          "name": "ElementType<any, keyof IntrinsicElements>"
         }
       },
       "className": {
@@ -17444,7 +17591,7 @@
         ],
         "required": false,
         "type": {
-          "name": "\"bg-default\" | \"bg-subtle\""
+          "name": "\"bg-default\" | \"bg-subtle\" | \"surface-subtle\""
         }
       },
       "footer": {
@@ -19393,7 +19540,7 @@
         "defaultValue": {
           "value": "max-width: 100%;"
         },
-        "description": "Predefined max-width\n@example md:  768px\nlg:  1024px\nxl:  1280px\n2xl: 1440px",
+        "description": "Predefined max-width\n@example text: 576px + dynamic gutters\nmd:   768px\nlg:   1024px\nxl:   1280px\n2xl:  1440px",
         "name": "width",
         "parent": {
           "fileName": "src/layout/page/parts/PageBlock.tsx",
@@ -19407,7 +19554,7 @@
         ],
         "required": false,
         "type": {
-          "name": "\"md\" | \"lg\" | \"xl\" | \"2xl\""
+          "name": "\"text\" | \"md\" | \"lg\" | \"xl\" | \"2xl\""
         }
       },
       "gutters": {

package/cjs/accordion/Accordion.js

@@ -40,10 +40,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const AccordionItem_1 = __importDefault(require("./AccordionItem"));
 const AccordionContent_1 = __importDefault(require("./AccordionContent"));
-const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
 const AccordionContext_1 = require("./AccordionContext");
+const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
+const AccordionItem_1 = __importDefault(require("./AccordionItem"));
 /**
  * A component that displays collapsible content sections.
  *

package/cjs/accordion/AccordionHeader.js

@@ -37,10 +37,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const typography_1 = require("../typography");
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
 const AccordionContext_1 = require("./AccordionContext");
 const AccordionItem_1 = require("./AccordionItem");
 const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
@@ -52,10 +53,7 @@ const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
         console.error("<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>");
         return null;
     }
-    return (react_1.default.createElement("button", Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)("navds-accordion__header", className), onClick: (e) => {
-            itemContext.toggleOpen();
-            onClick && onClick(e);
-        }, "aria-expanded": itemContext.open, type: "button" }),
+    return (react_1.default.createElement("button", Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)("navds-accordion__header", className), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, itemContext.toggleOpen), "aria-expanded": itemContext.open, type: "button" }),
         react_1.default.createElement("span", { className: "navds-accordion__icon-wrapper" },
             react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-accordion__header-chevron", title: "Vis mer", "aria-hidden": true })),
         react_1.default.createElement(typography_1.Heading, { size: (_b = accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.headingSize) !== null && _b !== void 0 ? _b : "small", as: "span", className: "navds-accordion__header-content" }, children)));

package/cjs/accordion/AccordionItem.js

@@ -40,36 +40,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionItemContext = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const AccordionContext_1 = require("./AccordionContext");
 const util_1 = require("../util");
+const useControllableState_1 = require("../util/hooks/useControllableState");
+const AccordionContext_1 = require("./AccordionContext");
 exports.AccordionItemContext = (0, react_1.createContext)(null);
 const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, open, defaultOpen = false } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen"]);
-    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    var { children, className, open, defaultOpen = false, onOpenChange } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen", "onOpenChange"]);
+    const [_open, _setOpen] = (0, useControllableState_1.useControllableState)({
+        defaultValue: defaultOpen,
+        value: open,
+        onChange: onOpenChange,
+    });
     const context = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
-    const [_open, _setOpen] = (0, react_1.useState)(defaultOpen);
     const shouldAnimate = (0, react_1.useRef)(!(Boolean(open) || defaultOpen));
     const handleOpen = () => {
-        if (open === undefined) {
-            const newOpen = !_open;
-            _setOpen(newOpen);
-            setInternalOpen(newOpen);
-        }
-        else {
-            setInternalOpen(!open);
-        }
+        _setOpen((x) => !x);
         shouldAnimate.current = true;
     };
     if (!(context === null || context === void 0 ? void 0 : context.mounted)) {
         console.error("<Accordion.Item> has to be used within an <Accordion>");
     }
     return (react_1.default.createElement("div", Object.assign({ className: (0, clsx_1.default)("navds-accordion__item", className, {
-            "navds-accordion__item--open": open !== null && open !== void 0 ? open : internalOpen,
+            "navds-accordion__item--open": _open,
             "navds-accordion__item--neutral": (context === null || context === void 0 ? void 0 : context.variant) === "neutral",
             "navds-accordion__item--no-animation": !shouldAnimate.current,
         }), ref: ref }, (0, util_1.omit)(rest, ["onClick"])),
         react_1.default.createElement(exports.AccordionItemContext.Provider, { value: {
-                open: open !== null && open !== void 0 ? open : internalOpen,
+                open: _open,
                 toggleOpen: handleOpen,
             } }, children)));
 });

package/cjs/alert/Alert.js

@@ -38,11 +38,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const typography_1 = require("../typography");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../button");
+const typography_1 = require("../typography");
 const Icon = (_a) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);
     switch (variant) {