@norges-domstoler/dds-components 21.2.0 → 21.2.2

package/dist/index.js

@@ -3043,7 +3043,7 @@ var getLiteralScreenSize = (screenSize) => {
 // src/components/helpers/StylelessList/StylelessList.tsx
 var import_jsx_runtime176 = require("react/jsx-runtime");
 var StylelessList = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("ul", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
-var StylelessOList = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("ul", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
+var StylelessOList = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("ol", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
 
 // src/components/helpers/styling/utils.ts
 var outlineOffset = "var(--dds-spacing-x0-125)";
@@ -4970,8 +4970,14 @@ var Label2 = ({
   ...rest
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
-    "label",
+    Box,
     {
+      as: "label",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      width: "fit-content",
+      paddingInline: "calc(18px + var(--dds-spacing-x0-5)) 0",
       className: cn(
         className,
         SelectionControl_default.label,
@@ -4987,6 +4993,35 @@ var Label2 = ({
     }
   );
 };
+var GroupLabel = ({
+  id,
+  showRequiredMarker,
+  readOnly,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
+    Typography,
+    {
+      as: "span",
+      typographyType: "labelMedium",
+      id,
+      className: readOnly ? Label_default["read-only"] : void 0,
+      children: [
+        readOnly && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+          Icon,
+          {
+            icon: LockIcon,
+            className: Label_default["read-only__icon"],
+            iconSize: "small"
+          }
+        ),
+        children,
+        " ",
+        showRequiredMarker && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(RequiredMarker, {})
+      ]
+    }
+  );
+};
 
 // src/components/SelectionControl/SelectionControl.utils.tsx
 var selectionControlSizeNumberPx = 18;
@@ -5023,14 +5058,8 @@ var Checkbox = ({
   const hasError = error || (checkboxGroup == null ? void 0 : checkboxGroup.error);
   const isDisabled = disabled || (checkboxGroup == null ? void 0 : checkboxGroup.disabled);
   return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
-    Box,
+    Label2,
     {
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      width: "fit-content",
-      paddingInline: "calc(18px + var(--dds-spacing-x0-5)) 0",
-      as: Label2,
       hasError,
       disabled: isDisabled,
       readOnly: isReadOnly,
@@ -5086,6 +5115,17 @@ Checkbox.displayName = "Checkbox";
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
 var import_react27 = require("react");
 
+// src/types/Booleanish.ts
+function convertBooleanishToBoolean(value) {
+  if (value === "true") {
+    return true;
+  } else if (value === "false") {
+    return false;
+  } else {
+    return value;
+  }
+}
+
 // src/components/InputMessage/InputMessage.module.css
 var InputMessage_default = {
   container: "InputMessage_container",
@@ -5163,7 +5203,7 @@ var CheckboxGroup = (props) => {
   const generatedId = (0, import_react27.useId)();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
   const hasErrorMessage = !!errorMessage;
-  const showRequiredMarker = required || ariaRequired;
+  const showRequiredMarker = required || convertBooleanishToBoolean(ariaRequired);
   const errorMessageId = derivativeIdGenerator(uniqueGroupId, "errorMessage");
   const tipId = derivativeIdGenerator(uniqueGroupId, "tip");
   const contextProps = {
@@ -5184,19 +5224,13 @@ var CheckboxGroup = (props) => {
         rest
       ),
       children: [
-        label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(
-          Typography,
+        label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+          GroupLabel,
           {
-            as: "span",
-            typographyType: "labelMedium",
             id: uniqueGroupId,
-            className: readOnly ? Label_default["read-only"] : void 0,
-            children: [
-              readOnly && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(Icon, { icon: LockIcon, className: Label_default["read-only__icon"] }),
-              label,
-              " ",
-              showRequiredMarker && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(RequiredMarker, {})
-            ]
+            readOnly,
+            showRequiredMarker,
+            children: label
           }
         ) : null,
         renderInputMessage(tip, tipId),
@@ -5345,9 +5379,9 @@ var DateInput_default = {
   popover: "DateInput_popover",
   "modal-close-button-wrapper": "DateInput_modal-close-button-wrapper",
   calendar: "DateInput_calendar",
-  calendar__header: "DateInput_calendar__header",
   calendar__header__month: "DateInput_calendar__header__month",
   "calendar__month-button": "DateInput_calendar__month-button",
+  "calendar__grid-element": "DateInput_calendar__grid-element",
   "calendar__week-number": "DateInput_calendar__week-number",
   "calendar__cell-button": "DateInput_calendar__cell-button",
   "calendar__cell-button--today": "DateInput_calendar__cell-button--today",
@@ -5392,6 +5426,7 @@ function CalendarCell({ date, state, onClose }) {
       hidden: isOutsideVisibleRange,
       onKeyDown: closeOnKeyboardBlurForward,
       className: cn(
+        DateInput_default["calendar__grid-element"],
         DateInput_default["calendar__cell-button"],
         (0, import_date.isToday)(date, timezone) && DateInput_default["calendar__cell-button--today"],
         DateInput_default[`calendar__cell-button--${variant}`],
@@ -5579,6 +5614,11 @@ var CalendarPopoverContent = ({
     }
   };
   if (!isOpen) return null;
+  const paperStyleProps = {
+    elevation: 2,
+    border: "border-default",
+    padding: "x0.75"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(import_jsx_runtime220.Fragment, { children: [
     portalTarget && hasBreakpoint && (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ShowHide, { showBelow: smallScreenBreakpoint, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Backdrop, { zIndex: "modal", isMounted, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
@@ -5586,9 +5626,7 @@ var CalendarPopoverContent = ({
         {
           ref: modalRef,
           className: cn(DateInput_default.popover, className),
-          elevation: 2,
-          border: "border-default",
-          padding: "x0.5",
+          ...paperStyleProps,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { className: DateInput_default["modal-close-button-wrapper"], children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
               Button,
@@ -5615,8 +5653,7 @@ var CalendarPopoverContent = ({
         hideBelow: hasBreakpoint ? smallScreenBreakpoint : void 0,
         className: cn(DateInput_default.popover, className),
         style: floatingStyles.floating,
-        elevation: 2,
-        border: "border-default",
+        ...paperStyleProps,
         children
       }
     )
@@ -5651,10 +5688,16 @@ function CalendarGrid({ state, ...props }) {
       cellPadding: "0",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("tr", { children: [
-          showWeekNumbers && /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("th", { className: cn(...typographyCn), children: [
-            "# ",
-            /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(VisuallyHidden, { as: "span", children: "Ukenummer" })
-          ] }),
+          showWeekNumbers && /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
+            "th",
+            {
+              className: cn(DateInput_default["calendar__grid-element"], ...typographyCn),
+              children: [
+                "# ",
+                /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(VisuallyHidden, { as: "span", children: "Ukenummer" })
+              ]
+            }
+          ),
           weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("th", { className: cn(...typographyCn), children: day }, index))
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => {
@@ -5666,6 +5709,7 @@ function CalendarGrid({ state, ...props }) {
               "td",
               {
                 className: cn(
+                  DateInput_default["calendar__grid-element"],
                   DateInput_default["calendar__week-number"],
                   ...typographyCn
                 ),
@@ -5724,7 +5768,7 @@ function Calendar(props) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...calendarProps, className: DateInput_default.calendar, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: DateInput_default.calendar__header, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(HStack, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
         Button,
         {
@@ -10492,7 +10536,8 @@ var import_react70 = require("react");
 var import_react68 = require("react");
 var ProgressTrackerContext = (0, import_react68.createContext)(
   {
-    activeStep: 0
+    activeStep: 0,
+    direction: "column"
   }
 );
 var useProgressTrackerContext = () => (0, import_react68.useContext)(ProgressTrackerContext);
@@ -10500,9 +10545,9 @@ var useProgressTrackerContext = () => (0, import_react68.useContext)(ProgressTra
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
   list: "ProgressTracker_list",
-  "connector--column": "ProgressTracker_connector--column",
-  "connector--row": "ProgressTracker_connector--row",
-  item: "ProgressTracker_item",
+  "list-item": "ProgressTracker_list-item",
+  "list-item--column": "ProgressTracker_list-item--column",
+  "list-item--row": "ProgressTracker_list-item--row",
   "item-button": "ProgressTracker_item-button",
   "item-number--active-incomplete": "ProgressTracker_item-number--active-incomplete",
   "item-number--inactive-incomplete": "ProgressTracker_item-number--inactive-incomplete",
@@ -10539,7 +10584,8 @@ var itemStateCn = {
   inactiveCompleted: "inactive-completed",
   inactiveIncomplete: "inactive-incomplete"
 };
-var getVisuallyHiddenText = (active, completed, index) => `${index + 1}, ${active ? "" : "Trinn, "}${completed ? "Ferdig, " : "Ikke ferdig, "}`;
+var getVisuallyHiddenTextBefore = (index) => `${index + 1}. trinn, `;
+var getVisuallyHiddenTextAfter = (completed) => `, ${completed ? "ferdig" : "ikke ferdig"}`;
 var ProgressTrackerItem = (props) => {
   const {
     id,
@@ -10553,7 +10599,7 @@ var ProgressTrackerItem = (props) => {
     children,
     ...rest
   } = props;
-  const { activeStep, handleStepChange } = useProgressTrackerContext();
+  const { activeStep, handleStepChange, direction } = useProgressTrackerContext();
   const active = activeStep === index;
   const itemState = toItemState(active, completed, disabled);
   const handleClick = () => {
@@ -10573,8 +10619,11 @@ var ProgressTrackerItem = (props) => {
   }, [completed, icon, index]);
   const stepContent = /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(import_jsx_runtime283.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
-      "div",
+      Box,
       {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         "aria-hidden": true,
         className: cn(
           ProgressTracker_default["item-number"],
@@ -10593,37 +10642,47 @@ var ProgressTrackerItem = (props) => {
           typographyStyles_default["body-medium"]
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
-          children
+          /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenTextBefore(index) }),
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenTextAfter(completed) })
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)("li", { "aria-current": active ? "step" : void 0, className: ProgressTracker_default.item, children: handleStepChange ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
-    "button",
-    {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, ProgressTracker_default["item-button"], focusable),
-        htmlProps,
-        rest
-      ),
-      onClick: () => handleClick(),
-      disabled,
-      children: stepContent
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+    Box,
     {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"])),
-        htmlProps,
-        rest
-      ),
-      children: stepContent
+      as: "li",
+      display: direction === "row" ? "flex" : void 0,
+      "aria-current": active ? "step" : void 0,
+      className: cn(ProgressTracker_default["list-item"], ProgressTracker_default[`list-item--${direction}`]),
+      children: handleStepChange ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+        "button",
+        {
+          ...getBaseHTMLProps(
+            id,
+            cn(className, ProgressTracker_default["item-button"], focusable),
+            htmlProps,
+            rest
+          ),
+          onClick: () => handleClick(),
+          disabled,
+          children: stepContent
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+        "div",
+        {
+          ...getBaseHTMLProps(
+            id,
+            cn(className, cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"])),
+            htmlProps,
+            rest
+          ),
+          children: stepContent
+        }
+      )
     }
-  ) });
+  );
 };
 ProgressTrackerItem.displayName = "ProgressTracker.Item";
 
@@ -10637,7 +10696,7 @@ var ProgressTracker = (() => {
     direction = "column",
     children,
     className,
-    htmlProps,
+    htmlProps = {},
     ...rest
   }) => {
     const [thisActiveStep, setActiveStep] = (0, import_react70.useState)(activeStep);
@@ -10653,25 +10712,22 @@ var ProgressTracker = (() => {
     const steps = (0, import_react70.useMemo)(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
-      const itemsWithConnectorsBetween = intersperseItemsWithConnector(
-        itemsWithIndex,
-        direction
-      );
-      return itemsWithConnectorsBetween;
+      return itemsWithIndex;
     }, [children]);
     const isRow = direction === "row";
+    const { "aria-label": ariaLabel } = htmlProps;
     return /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
       ProgressTrackerContext,
       {
         value: {
           activeStep: thisActiveStep,
-          handleStepChange: handleChange
+          handleStepChange: handleChange,
+          direction
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
-          "div",
+          "nav",
           {
-            role: "group",
-            "aria-label": "progress",
+            "aria-label": ariaLabel != null ? ariaLabel : "stegprogresjon",
             ...getBaseHTMLProps(id, className, htmlProps, rest),
             children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
               Box,
@@ -10709,15 +10765,6 @@ function passIndexPropToProgressTrackerItem(children) {
     })
   );
 }
-var intersperseItemsWithConnector = (children, direction) => import_react70.Children.map(children, (child, index) => {
-  if (index === 0) {
-    return child;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(import_react70.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime284.jsx)("div", { "aria-hidden": true, className: ProgressTracker_default[`connector--${direction}`] }),
-    child
-  ] }, index);
-});
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_react71 = require("react");
@@ -11387,7 +11434,7 @@ var RadioButtonGroup = ({
     }
   };
   const hasErrorMessage = !!errorMessage;
-  const showRequiredMarker = required || ariaRequired;
+  const showRequiredMarker = required || convertBooleanishToBoolean(ariaRequired);
   const tipId = tip && `${uniqueGroupId}-tip`;
   const errorMessageId = errorMessage && `${uniqueGroupId}-errorMessage`;
   const contextProps = {
@@ -11411,21 +11458,15 @@ var RadioButtonGroup = ({
         rest
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime291.jsxs)(
-          Typography,
+        label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(
+          GroupLabel,
           {
-            as: "span",
-            typographyType: "labelMedium",
             id: uniqueGroupId,
-            className: readOnly ? Label_default["read-only"] : void 0,
-            children: [
-              readOnly && /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(Icon, { icon: LockIcon, className: Label_default["read-only__icon"] }),
-              label,
-              " ",
-              showRequiredMarker && /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(RequiredMarker, {})
-            ]
+            readOnly,
+            showRequiredMarker,
+            children: label
           }
-        ),
+        ) : null,
         renderInputMessage(tip, tipId),
         /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(RadioButtonGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(
           "div",
@@ -11550,7 +11591,8 @@ var SplitButton = ({
           className: cn(
             SplitButton_default.option,
             purpose === "primary" && SplitButton_default["option--primary"]
-          )
+          ),
+          type: "button"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(OverflowMenuList, { children: secondaryActions.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(OverflowMenuButton, { ...item, children: item.children }, index)) }) })