@navikt/ds-react 4.7.3 → 4.8.0

package/_docs.json

@@ -3634,7 +3634,7 @@
         ],
         "required": false,
         "type": {
-          "name": "\"number\" | \"email\" | \"password\" | \"tel\" | \"text\" | \"url\""
+          "name": "\"number\" | \"email\" | \"password\" | \"tel\" | \"text\" | \"url\" | \"time\""
         }
       },
       "error": {
@@ -16428,6 +16428,373 @@
       }
     }
   },
+  {
+    "filePath": "src/layout/stack/HStack.tsx",
+    "displayName": "HStack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "wrap": {
+        "defaultValue": null,
+        "description": "flex-wrap",
+        "name": "wrap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "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",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/layout/stack/Spacer.tsx",
+    "displayName": "Spacer",
+    "props": {}
+  },
+  {
+    "filePath": "src/layout/stack/Stack.tsx",
+    "displayName": "Stack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "wrap": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "flex-wrap",
+        "name": "wrap",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "direction": {
+        "defaultValue": null,
+        "description": "",
+        "name": "direction",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "\"row\" | \"column\""
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "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",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/layout/stack/VStack.tsx",
+    "displayName": "VStack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "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",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/timeline/period/NonClickablePeriod.tsx",
     "displayName": "NonClickablePeriod",
@@ -16983,7 +17350,7 @@
     "props": {}
   },
   {
-    "filePath": "src/dropdown/Menu/GroupedList/Heading.tsx",
+    "filePath": "src/dropdown/Menu/GroupedList/GroupedHeading.tsx",
     "displayName": "GroupedHeading",
     "props": {
       "children": {
@@ -16991,75 +17358,12 @@
         "description": "Heading",
         "name": "children",
         "parent": {
-          "fileName": "src/dropdown/Menu/GroupedList/Heading.tsx",
-          "name": "GroupedHeadingProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/dropdown/Menu/GroupedList/Heading.tsx",
-            "name": "GroupedHeadingProps"
-          }
-        ],
-        "required": true,
-        "type": {
-          "name": "ReactNode"
-        }
-      },
-      "className": {
-        "defaultValue": null,
-        "description": "",
-        "name": "className",
-        "parent": {
-          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
-          "name": "HTMLAttributes"
-        },
-        "declarations": [
-          {
-            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
-            "name": "HTMLAttributes"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "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",
-        "name": "ref",
-        "parent": {
-          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
-          "name": "RefAttributes"
-        },
-        "declarations": [
-          {
-            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
-            "name": "RefAttributes"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "Ref<HTMLDetailsElement>"
-        }
-      }
-    }
-  },
-  {
-    "filePath": "src/dropdown/Menu/GroupedList/Heading.tsx",
-    "displayName": "Heading",
-    "props": {
-      "children": {
-        "defaultValue": null,
-        "description": "Heading",
-        "name": "children",
-        "parent": {
-          "fileName": "src/dropdown/Menu/GroupedList/Heading.tsx",
+          "fileName": "src/dropdown/Menu/GroupedList/GroupedHeading.tsx",
           "name": "GroupedHeadingProps"
         },
         "declarations": [
           {
-            "fileName": "src/dropdown/Menu/GroupedList/Heading.tsx",
+            "fileName": "src/dropdown/Menu/GroupedList/GroupedHeading.tsx",
             "name": "GroupedHeadingProps"
           }
         ],
@@ -17109,7 +17413,7 @@
     }
   },
   {
-    "filePath": "src/dropdown/Menu/GroupedList/Item.tsx",
+    "filePath": "src/dropdown/Menu/GroupedList/GroupedItem.tsx",
     "displayName": "GroupedItem",
     "props": {
       "children": {
@@ -17117,12 +17421,12 @@
         "description": "Menu item content",
         "name": "children",
         "parent": {
-          "fileName": "src/dropdown/Menu/GroupedList/Item.tsx",
+          "fileName": "src/dropdown/Menu/GroupedList/GroupedItem.tsx",
           "name": "GroupedItemProps"
         },
         "declarations": [
           {
-            "fileName": "src/dropdown/Menu/GroupedList/Item.tsx",
+            "fileName": "src/dropdown/Menu/GroupedList/GroupedItem.tsx",
             "name": "GroupedItemProps"
           }
         ],

package/cjs/dropdown/Menu/GroupedList/index.js

@@ -40,12 +40,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DescriptionList = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const Heading_1 = __importDefault(require("./Heading"));
-const Item_1 = __importDefault(require("./Item"));
+const GroupedHeading_1 = __importDefault(require("./GroupedHeading"));
+const GroupedItem_1 = __importDefault(require("./GroupedItem"));
 exports.DescriptionList = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
     return (react_1.default.createElement("dl", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-dropdown__list", className) }), children));
 });
-exports.DescriptionList.Heading = Heading_1.default;
-exports.DescriptionList.Item = Item_1.default;
+exports.DescriptionList.Heading = GroupedHeading_1.default;
+exports.DescriptionList.Item = GroupedItem_1.default;
 exports.default = exports.DescriptionList;

package/cjs/index.js

@@ -48,3 +48,4 @@ __exportStar(require("./toggle-group"), exports);
 __exportStar(require("./tooltip"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);
+__exportStar(require("./layout/stack"), exports);

package/cjs/layout/stack/HStack.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HStack = void 0;
+const react_1 = __importStar(require("react"));
+const Stack_1 = require("./Stack");
+/**
+ * Layout-primitive for horizontal flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link HStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ *
+ * @example
+ * // Responsive gap
+ * <HStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ */
+exports.HStack = (0, react_1.forwardRef)((props, ref) => {
+    return react_1.default.createElement(Stack_1.Stack, Object.assign({}, props, { ref: ref, direction: "row" }));
+});

package/cjs/layout/stack/Spacer.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacer = void 0;
+const react_1 = __importDefault(require("react"));
+/**
+ * Layout-primitive for auto-spacing between elements
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <Spacer />
+ *  <MyComponent />
+ * </HStack>
+ */
+const Spacer = () => react_1.default.createElement("div", { className: "navds-stack__spacer" });
+exports.Spacer = Spacer;

package/cjs/layout/stack/Stack.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+exports.Stack = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const css_1 = require("../utilities/css");
+exports.Stack = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
+    const style = Object.assign(Object.assign({ "--ac-stack-direction": direction, "--ac-stack-align": align, "--ac-stack-justify": justify, "--ac-stack-wrap": wrap ? "wrap" : "nowrap" }, (0, css_1.getResponsiveProps)(`stack`, "gap", "spacing", gap)), _style);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, style: style, className: (0, clsx_1.default)("navds-stack", className, {
+            "navds-vstack": direction === "column",
+            "navds-hstack": direction === "row",
+        }) })));
+});