@norges-domstoler/dds-components 22.7.1 → 22.8.0

package/dist/index.mjs

@@ -1837,21 +1837,7 @@ var focusVisibleInset = {
 var scrollbarWidth = "thin";
 var scrollbarStyling = {
   scrollbarColor: "var(--dds-color-surface-scrollbar) transparent",
-  scrollbarWidth,
-  /* Safari styling. TODO: fjernes når scrollbar styling blir standardisert */
-  /* width */
-  "&::-webkit-scrollbar": {
-    width: "var(--dds-spacing-x0-5)",
-    height: "var(--dds-spacing-x0-5)"
-  },
-  /* Track */
-  "&::-webkit-scrollbar-track": {
-    background: "transparent"
-  },
-  /* Handle */
-  "&::-webkit-scrollbar-thumb": {
-    background: "var(--dds-color-surface-scrollbar)"
-  }
+  scrollbarWidth
 };
 var hideInput = {
   clip: "rect(0 0 0 0)",
@@ -3709,6 +3695,17 @@ var Typography_default = {
   container: "Typography_container"
 };
 
+// src/components/Typography/Typography/Typography.types.ts
+var TG_HEADING_TYPES = [
+  "headingXxsmall",
+  "headingXsmall",
+  "headingSmall",
+  "headingMedium",
+  "headingLarge",
+  "headingXlarge",
+  "headingXxlarge"
+];
+
 // src/components/Typography/Typography/Typography.utils.ts
 var getElementType = (element) => {
   switch (element) {
@@ -3743,7 +3740,7 @@ var getElementType = (element) => {
   }
 };
 var isHeading = (type) => {
-  return true;
+  return TG_HEADING_TYPES.includes(type);
 };
 var isLegend = (as) => {
   return as === "legend";
@@ -4533,6 +4530,7 @@ import { jsx as jsx211 } from "react/jsx-runtime";
 var OverflowMenuButton = ({
   onClick,
   onClickAsync,
+  closeMenuOnClickAsync = true,
   purpose = "default",
   loading,
   ref,
@@ -4549,17 +4547,21 @@ var OverflowMenuButton = ({
   }, []);
   const handleClick = async (e) => {
     if (isLoading) return;
+    const close = () => onClose == null ? void 0 : onClose();
     if (onClickAsync) {
       setInternalLoading(true);
+      const shouldAutoClose = closeMenuOnClickAsync === true;
       try {
         await onClickAsync(e);
+        if (typeof closeMenuOnClickAsync === "function") {
+          closeMenuOnClickAsync(close);
+        } else if (shouldAutoClose) close();
       } finally {
         setInternalLoading(false);
-        onClose == null ? void 0 : onClose();
       }
     } else {
       onClick == null ? void 0 : onClick(e);
-      onClose == null ? void 0 : onClose();
+      close();
     }
   };
   return /* @__PURE__ */ jsx211("li", { children: /* @__PURE__ */ jsx211(
@@ -7619,10 +7621,8 @@ var useDetailListContext = () => useContext13(DetailListContext);
 // src/components/DetailList/DetailList.module.css
 var DetailList_default = {
   list: "DetailList_list",
-  "list--with-dividers": "DetailList_list--with-dividers",
-  row: "DetailList_row",
-  "list--striped": "DetailList_list--striped",
   "list--striped-with-bp": "DetailList_list--striped-with-bp",
+  row: "DetailList_row",
   "list--small": "DetailList_list--small",
   "list--medium": "DetailList_list--medium",
   "list--large": "DetailList_list--large",
@@ -7631,6 +7631,32 @@ var DetailList_default = {
   term: "DetailList_term"
 };
 
+// src/components/Table/normal/Table.module.css
+var Table_default = {
+  wrapper: "Table_wrapper",
+  "wrapper--scrollable": "Table_wrapper--scrollable",
+  table: "Table_table",
+  "table--with-dividers": "Table_table--with-dividers",
+  "row--body": "Table_row--body",
+  "row--colapsible-header--open": "Table_row--colapsible-header--open",
+  "table--sticky-header": "Table_table--sticky-header",
+  "table--with-stripes": "Table_table--with-stripes",
+  "table--small": "Table_table--small",
+  "table--medium": "Table_table--medium",
+  "table--large": "Table_table--large",
+  row: "Table_row",
+  "row--sum": "Table_row--sum",
+  "row--selected": "Table_row--selected",
+  "row--hoverable": "Table_row--hoverable",
+  "cell--head": "Table_cell--head",
+  "cell--left": "Table_cell--left",
+  "cell--right": "Table_cell--right",
+  "cell--center": "Table_cell--center",
+  cell__inner: "Table_cell__inner",
+  "sort-button": "Table_sort-button",
+  "collapse-button": "Table_collapse-button"
+};
+
 // src/components/DetailList/DetailList.tsx
 import { jsx as jsx258 } from "react/jsx-runtime";
 var DETAIL_LIST_SIZES = createSizes("small", "medium", "large");
@@ -7652,10 +7678,11 @@ var DetailList = ({
       cn(
         className,
         typographyStyles_default[`body-short-${size2}`],
+        Table_default.table,
         DetailList_default.list,
         DetailList_default[`list--${size2}`],
-        withDividers && DetailList_default["list--with-dividers"],
-        striped && !smallScreenBreakpoint && DetailList_default["list--striped"],
+        withDividers && Table_default["table--with-dividers"],
+        striped && !smallScreenBreakpoint && Table_default["table--with-stripes"],
         striped && smallScreenBreakpoint && DetailList_default["list--striped-with-bp"]
       ),
       style,
@@ -7682,7 +7709,7 @@ var DetailListRow = ({ className, ...rest }) => {
       {
         display: "table-row",
         hideBelow: hasBp ? bp : void 0,
-        className: cn(className, DetailList_default.row),
+        className: cn(className, DetailList_default.row, Table_default["row--body"]),
         ...rest
       }
     ),
@@ -7692,7 +7719,12 @@ var DetailListRow = ({ className, ...rest }) => {
         display: "flex",
         flexDirection: "column",
         showBelow: bp,
-        className: cn(className, DetailList_default.row, DetailList_default.column),
+        className: cn(
+          className,
+          DetailList_default.row,
+          DetailList_default.column,
+          Table_default["row--body"]
+        ),
         ...rest
       }
     )
@@ -12409,7 +12441,7 @@ var PhoneInput = ({
               children: countryOptions.map((item, index) => /* @__PURE__ */ jsx308("option", { value: item.countryCode, children: item.label }, index))
             }
           ),
-          /* @__PURE__ */ jsxs119(Box, { width: "100%", className: Input_default["input-group"], children: [
+          /* @__PURE__ */ jsxs119(Box, { width: "100%", display: "flex", className: Input_default["input-group"], children: [
             /* @__PURE__ */ jsx308(
               "span",
               {
@@ -13684,32 +13716,6 @@ function useIsInTableHead() {
   return isInTableHead;
 }
 
-// src/components/Table/normal/Table.module.css
-var Table_default = {
-  wrapper: "Table_wrapper",
-  "wrapper--scrollable": "Table_wrapper--scrollable",
-  table: "Table_table",
-  "table--with-dividers": "Table_table--with-dividers",
-  "row--body": "Table_row--body",
-  "row--colapsible-header--open": "Table_row--colapsible-header--open",
-  "table--sticky-header": "Table_table--sticky-header",
-  "table--with-stripes": "Table_table--with-stripes",
-  "table--small": "Table_table--small",
-  "table--medium": "Table_table--medium",
-  "table--large": "Table_table--large",
-  row: "Table_row",
-  "row--sum": "Table_row--sum",
-  "row--selected": "Table_row--selected",
-  "row--hoverable": "Table_row--hoverable",
-  "cell--head": "Table_cell--head",
-  "cell--left": "Table_cell--left",
-  "cell--right": "Table_cell--right",
-  "cell--center": "Table_cell--center",
-  cell__inner: "Table_cell__inner",
-  "sort-button": "Table_sort-button",
-  "collapse-button": "Table_collapse-button"
-};
-
 // src/components/Table/normal/Cell.tsx
 import { jsx as jsx323 } from "react/jsx-runtime";
 var Cell = ({
@@ -15329,6 +15335,7 @@ export {
   SunIcon,
   SupportIcon,
   SyncIcon,
+  TG_HEADING_TYPES,
   Tab,
   TabList,
   TabPanel,