@norges-domstoler/dds-components 21.14.0 → 21.16.0

package/dist/index.js

@@ -407,6 +407,7 @@ var typographyStyles_default = {
   "a--nested__child": "typographyStyles_a--nested__child",
   "a--margins": "typographyStyles_a--margins",
   "a--external": "typographyStyles_a--external",
+  a__icon: "typographyStyles_a__icon",
   "a--visited": "typographyStyles_a--visited",
   "body-xsmall": "typographyStyles_body-xsmall",
   "body-xsmall--margins": "typographyStyles_body-xsmall--margins",
@@ -3770,32 +3771,50 @@ var Label = ({
   className,
   htmlProps,
   children,
+  afterLabelContent,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(import_jsx_runtime184.Fragment, { children: [
+    readOnly && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+      Icon,
+      {
+        icon: LockIcon,
+        iconSize: "small",
+        className: Label_default["read-only__icon"]
+      }
+    ),
+    children,
+    showRequiredStyling && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(RequiredMarker, {})
+  ] });
+  const labelProps = {
+    ...getBaseHTMLProps(
+      id,
+      cn(className, readOnly && Label_default["read-only"]),
+      htmlProps,
+      rest
+    )
+  };
+  const render = afterLabelContent ? /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
     Typography,
     {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, readOnly && Label_default["read-only"]),
-        htmlProps,
-        rest
-      ),
       typographyType: "labelMedium",
+      as: "div",
+      withMargins: rest.withMargins,
       children: [
-        readOnly && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
-          Icon,
+        /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+          Typography,
           {
-            icon: LockIcon,
-            iconSize: "small",
-            className: Label_default["read-only__icon"]
+            ...labelProps,
+            typographyType: "labelMedium",
+            withMargins: false,
+            children: content
           }
         ),
-        children,
-        showRequiredStyling && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(RequiredMarker, {})
+        afterLabelContent
       ]
     }
-  );
+  ) : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Typography, { ...labelProps, typographyType: "labelMedium", children: content });
+  return render;
 };
 Label.displayName = "Label";
 
@@ -3824,7 +3843,7 @@ var import_jsx_runtime186 = require("react/jsx-runtime");
 var Link = ({
   id,
   className,
-  htmlProps = {},
+  htmlProps,
   children,
   typographyType,
   withMargins,
@@ -3833,12 +3852,14 @@ var Link = ({
   target,
   style,
   color,
+  as: propAs,
   ...rest
 }) => {
-  const { style: htmlPropsStyle, ...restHtmlProps } = htmlProps;
+  const as = propAs ? propAs : "a";
   return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
-    "a",
+    ElementAs,
     {
+      as,
       ...getBaseHTMLProps(
         id,
         cn(
@@ -3851,14 +3872,13 @@ var Link = ({
           focusable,
           getColorCn(color)
         ),
-        restHtmlProps,
+        htmlProps,
         rest
       ),
-      ...rest,
       rel: "noopener noreferer",
       target: external ? "_blank" : target,
       style: {
-        ...htmlPropsStyle,
+        ...htmlProps == null ? void 0 : htmlProps.style,
         ...style,
         color: color && !isTextColor(color) ? getTextColor(color) : void 0
       },
@@ -3999,12 +4019,28 @@ var BackLink_default = {
 
 // src/components/BackLink/BackLink.tsx
 var import_jsx_runtime190 = require("react/jsx-runtime");
-var BackLink = ({ label, ref, ...rest }) => {
+var BackLink = ({ label, ref, as = "a", ...rest }) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("nav", { ref, "aria-label": t(texts.goBack), children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(Link, { ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Icon, { icon: ArrowLeftIcon, iconSize: "inherit", className: BackLink_default.icon }),
-    label
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("nav", { ref, "aria-label": t(texts.goBack), children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
+    ElementAs,
+    {
+      as,
+      className: cn(typographyStyles_default.a, focusable),
+      rel: "noopener noreferer",
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+          Icon,
+          {
+            icon: ArrowLeftIcon,
+            iconSize: "inherit",
+            className: cn(typographyStyles_default.a__icon, BackLink_default.icon)
+          }
+        ),
+        label
+      ]
+    }
+  ) });
 };
 BackLink.displayName = "BackLink";
 var texts = createTexts({
@@ -4233,10 +4269,10 @@ var Button = ({
       {
         ref,
         ...getBaseHTMLProps(id, buttonCn, htmlProps, rest),
-        onClick: loading ? void 0 : onClick,
+        onClick,
         onFocus,
         onBlur,
-        "aria-disabled": loading,
+        disabled: loading != null ? loading : rest.disabled,
         children: content
       }
     );
@@ -6762,6 +6798,7 @@ function DateInput({
   width,
   clearable,
   ref,
+  afterLabelContent,
   ...props
 }) {
   var _a;
@@ -6780,7 +6817,8 @@ function DateInput({
           ...labelProps,
           label: props.label,
           showRequiredStyling: required,
-          readOnly
+          readOnly,
+          afterLabelContent
         }),
         /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
           Box,
@@ -6923,14 +6961,14 @@ var texts7 = createTexts({
 });
 
 // src/components/date-inputs/utils/useFocusManagerRef.ts
-var import_focus17 = require("@react-aria/focus");
+var import_focus18 = require("@react-aria/focus");
 var import_react46 = require("react");
 function useFocusManagerRef(ref) {
   const domRef = (0, import_react46.useRef)(null);
   (0, import_react46.useImperativeHandle)(ref, () => ({
     ...createDOMRef(domRef),
     focus() {
-      (0, import_focus17.createFocusManager)(domRef).focusFirst({ tabbable: true });
+      (0, import_focus18.createFocusManager)(domRef).focusFirst({ tabbable: true });
     }
   }));
   return domRef;
@@ -8688,6 +8726,7 @@ var FileUploader = (props) => {
     errorMessage,
     hideFileList,
     className,
+    afterLabelContent,
     ...rest
   } = props;
   const { t } = useTranslation();
@@ -8782,7 +8821,8 @@ var FileUploader = (props) => {
           id: labelId,
           showRequiredStyling: required,
           htmlFor: inputId,
-          readOnly
+          readOnly,
+          afterLabelContent
         }),
         hasTip && /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
         inactive ? input : withDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
@@ -9022,6 +9062,8 @@ var import_jsx_runtime270 = require("react/jsx-runtime");
 var InlineButton = ({
   className,
   color,
+  icon,
+  children,
   ...rest
 }) => /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
   StylelessButton,
@@ -9033,7 +9075,8 @@ var InlineButton = ({
       InlineButton_default.button,
       getColorCn(color)
     ),
-    ...rest
+    ...rest,
+    children: icon ? /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Icon, { icon, iconSize: "inherit" }) : children
   }
 );
 
@@ -10177,7 +10220,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
-    gap: "var(--dds-spacing-x0-5)",
+    gap: "var(--dds-spacing-x0-25)",
     padding: "var(--dds-spacing-x0-75)",
     backgroundColor: "var(--dds-color-surface-default)",
     ...typography.option[size2],
@@ -10243,10 +10286,9 @@ var getIndicatorIconSize = (componentSize) => {
   }
 };
 var DDSOption = ({
-  componentSize,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime285.jsxs)(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
+  props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Icon, { icon: CheckIcon, iconSize: "small" }),
   props.children
 ] });
 var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Option, { ...props, children: import_react70.default.createElement(props.customElement, props) });
@@ -10363,6 +10405,7 @@ function Select({
   openMenuOnClick,
   ref,
   instanceId,
+  afterLabelContent,
   ...rest
 }) {
   const themeContext = (0, import_react71.useContext)(ThemeContext);
@@ -10437,7 +10480,7 @@ function Select({
       if (customOptionElement) {
         return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(CustomOption, { ...props, customElement: customOptionElement });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(DDSOption, { ...props, componentSize });
+        return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(DDSOption, { ...props });
       }
     },
     [customOptionElement, componentSize]
@@ -10498,7 +10541,8 @@ function Select({
           label,
           htmlFor: uniqueId,
           showRequiredStyling,
-          readOnly
+          readOnly,
+          afterLabelContent
         }),
         /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(import_react_select2.default, { ...reactSelectProps, ref }),
         renderInputMessage(tip, tipId, errorMessage, errorMessageId)
@@ -10547,6 +10591,7 @@ var NativeSelect = ({
   onKeyDown,
   onMouseDown,
   clearable,
+  afterLabelContent,
   onChange,
   ...rest
 }) => {
@@ -10598,7 +10643,8 @@ var NativeSelect = ({
       label,
       htmlFor: uniqueId,
       showRequiredStyling,
-      readOnly
+      readOnly,
+      afterLabelContent
     }),
     /* @__PURE__ */ (0, import_jsx_runtime287.jsxs)(Box, { position: "relative", width: inputWidth, children: [
       /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(
@@ -10672,6 +10718,7 @@ var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
   defaultActivePage = 1,
+  activePage: activePageProp,
   withPagination = true,
   withCounter,
   withSelect,
@@ -10691,7 +10738,15 @@ var Pagination = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [activePage, setActivePage] = (0, import_react73.useState)(defaultActivePage);
+  if (withSelect && !selectOptions.some((o) => o.value === defaultItemsPerPage)) {
+    console.warn(
+      `[Pagination] defaultItemsPerPage prop value (${defaultItemsPerPage}) is not included in customOptions prop. Please add it to ensure it appears in the dropdown.`
+    );
+  }
+  const [activePage, setActivePage] = useControllableState({
+    value: activePageProp,
+    defaultValue: defaultActivePage
+  });
   const [itemsPerPage, setItemsPerPage] = (0, import_react73.useState)(defaultItemsPerPage);
   const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   const items = PaginationGenerator(pagesLength, activePage);
@@ -10909,7 +10964,7 @@ var Pagination = ({
             {
               options: selectOptions,
               isSearchable: false,
-              width: "74px",
+              width: "90px",
               defaultValue: {
                 label: itemsPerPage.toString(),
                 value: itemsPerPage
@@ -11446,6 +11501,7 @@ var PhoneInput = ({
   "aria-required": ariaRequired,
   "aria-describedby": ariaDescribedby,
   groupLabel = "Landskode og telefonnummer",
+  afterLabelContent,
   ref,
   ...props
 }) => {
@@ -11534,7 +11590,8 @@ var PhoneInput = ({
       label,
       htmlFor: phoneNumberId,
       showRequiredStyling,
-      readOnly
+      readOnly,
+      afterLabelContent
     }),
     /* @__PURE__ */ (0, import_jsx_runtime289.jsxs)(
       Box,
@@ -13657,6 +13714,7 @@ var TextInput_default = {
 var import_jsx_runtime320 = require("react/jsx-runtime");
 var TextInput = ({
   label,
+  afterLabelContent,
   disabled,
   readOnly,
   errorMessage,
@@ -13834,7 +13892,13 @@ var TextInput = ({
       ),
       style,
       children: [
-        renderLabel({ label, htmlFor: uniqueId, showRequiredStyling, readOnly }),
+        renderLabel({
+          label,
+          htmlFor: uniqueId,
+          showRequiredStyling,
+          readOnly,
+          afterLabelContent
+        }),
         extendedInput ? extendedInput : /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(Box, { as: StatefulInput, width: inputWidth, ...generalInputProps }),
         hasBottomContainer && /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
           Box,
@@ -13928,8 +13992,7 @@ var Toggle = ({
             type: "checkbox",
             checked,
             onChange: (e) => setChecked(e.target.checked),
-            disabled,
-            "aria-disabled": isLoading,
+            disabled: isLoading != null ? isLoading : disabled,
             "aria-readonly": readOnly,
             onKeyDown: readOnlyKeyDownHandler(
               "selectionControl",