@norges-domstoler/dds-components 21.14.0 → 21.16.0

package/dist/index.mjs

@@ -13,6 +13,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",
@@ -3397,7 +3398,7 @@ var Label_default = {
 };
 
 // src/components/Typography/Label/Label.tsx
-import { jsx as jsx184, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx184, jsxs as jsxs21 } from "react/jsx-runtime";
 var Label = ({
   showRequiredStyling,
   readOnly,
@@ -3405,32 +3406,50 @@ var Label = ({
   className,
   htmlProps,
   children,
+  afterLabelContent,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsxs21(
+  const content = /* @__PURE__ */ jsxs21(Fragment, { children: [
+    readOnly && /* @__PURE__ */ jsx184(
+      Icon,
+      {
+        icon: LockIcon,
+        iconSize: "small",
+        className: Label_default["read-only__icon"]
+      }
+    ),
+    children,
+    showRequiredStyling && /* @__PURE__ */ jsx184(RequiredMarker, {})
+  ] });
+  const labelProps = {
+    ...getBaseHTMLProps(
+      id,
+      cn(className, readOnly && Label_default["read-only"]),
+      htmlProps,
+      rest
+    )
+  };
+  const render = afterLabelContent ? /* @__PURE__ */ jsxs21(
     Typography,
     {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, readOnly && Label_default["read-only"]),
-        htmlProps,
-        rest
-      ),
       typographyType: "labelMedium",
+      as: "div",
+      withMargins: rest.withMargins,
       children: [
-        readOnly && /* @__PURE__ */ jsx184(
-          Icon,
+        /* @__PURE__ */ jsx184(
+          Typography,
           {
-            icon: LockIcon,
-            iconSize: "small",
-            className: Label_default["read-only__icon"]
+            ...labelProps,
+            typographyType: "labelMedium",
+            withMargins: false,
+            children: content
           }
         ),
-        children,
-        showRequiredStyling && /* @__PURE__ */ jsx184(RequiredMarker, {})
+        afterLabelContent
       ]
     }
-  );
+  ) : /* @__PURE__ */ jsx184(Typography, { ...labelProps, typographyType: "labelMedium", children: content });
+  return render;
 };
 Label.displayName = "Label";
 
@@ -3459,7 +3478,7 @@ import { jsx as jsx186, jsxs as jsxs22 } from "react/jsx-runtime";
 var Link = ({
   id,
   className,
-  htmlProps = {},
+  htmlProps,
   children,
   typographyType,
   withMargins,
@@ -3468,12 +3487,14 @@ var Link = ({
   target,
   style,
   color,
+  as: propAs,
   ...rest
 }) => {
-  const { style: htmlPropsStyle, ...restHtmlProps } = htmlProps;
+  const as = propAs ? propAs : "a";
   return /* @__PURE__ */ jsxs22(
-    "a",
+    ElementAs,
     {
+      as,
       ...getBaseHTMLProps(
         id,
         cn(
@@ -3486,14 +3507,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
       },
@@ -3634,12 +3654,28 @@ var BackLink_default = {
 
 // src/components/BackLink/BackLink.tsx
 import { jsx as jsx190, jsxs as jsxs24 } from "react/jsx-runtime";
-var BackLink = ({ label, ref, ...rest }) => {
+var BackLink = ({ label, ref, as = "a", ...rest }) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx190("nav", { ref, "aria-label": t(texts.goBack), children: /* @__PURE__ */ jsxs24(Link, { ...rest, children: [
-    /* @__PURE__ */ jsx190(Icon, { icon: ArrowLeftIcon, iconSize: "inherit", className: BackLink_default.icon }),
-    label
-  ] }) });
+  return /* @__PURE__ */ jsx190("nav", { ref, "aria-label": t(texts.goBack), children: /* @__PURE__ */ jsxs24(
+    ElementAs,
+    {
+      as,
+      className: cn(typographyStyles_default.a, focusable),
+      rel: "noopener noreferer",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx190(
+          Icon,
+          {
+            icon: ArrowLeftIcon,
+            iconSize: "inherit",
+            className: cn(typographyStyles_default.a__icon, BackLink_default.icon)
+          }
+        ),
+        label
+      ]
+    }
+  ) });
 };
 BackLink.displayName = "BackLink";
 var texts = createTexts({
@@ -3795,7 +3831,7 @@ function Spinner(props) {
 Spinner.displayName = "Spinner";
 
 // src/components/Button/Button.tsx
-import { Fragment, jsx as jsx193, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx193, jsxs as jsxs26 } from "react/jsx-runtime";
 var Button = ({
   children,
   purpose = "primary",
@@ -3845,8 +3881,8 @@ var Button = ({
       className: cn(Button_default.icon, loading && invisible)
     }
   );
-  const content = /* @__PURE__ */ jsxs26(Fragment, { children: [
-    hasLabel && /* @__PURE__ */ jsxs26(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs26(Fragment2, { children: [
+    hasLabel && /* @__PURE__ */ jsxs26(Fragment2, { children: [
       iconPosition === "left" && iconElement,
       /* @__PURE__ */ jsx193("span", { "aria-hidden": loading, className: cn(loading && invisible), children }),
       iconPosition === "right" && iconElement
@@ -3868,10 +3904,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
       }
     );
@@ -4322,7 +4358,7 @@ var OverflowMenuGroup = ({
 OverflowMenuGroup.displayName = "OverflowMenuGroup";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { Fragment as Fragment2, jsx as jsx204, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs30 } from "react/jsx-runtime";
 var Breadcrumbs = ({
   children,
   smallScreenBreakpoint,
@@ -4369,7 +4405,7 @@ var Breadcrumbs = ({
         return /* @__PURE__ */ jsx204(OverflowMenuSpan, { children: item.props.children }, index);
     }
   }) : [];
-  const bChildrenSmallScreen = /* @__PURE__ */ jsxs30(Fragment2, { children: [
+  const bChildrenSmallScreen = /* @__PURE__ */ jsxs30(Fragment3, { children: [
     /* @__PURE__ */ jsx204(HStack, { ...responsiveLiProps, children: childrenArray[0] }),
     bChildrenTruncated.length > 0 && /* @__PURE__ */ jsxs30(HStack, { ...responsiveLiProps, children: [
       chevronIcon,
@@ -4903,7 +4939,7 @@ var InputMessage_default = {
 };
 
 // src/components/InputMessage/InputMessage.tsx
-import { Fragment as Fragment3, jsx as jsx212, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx212, jsxs as jsxs34 } from "react/jsx-runtime";
 var InputMessage = ({
   message,
   messageType,
@@ -4938,7 +4974,7 @@ var InputMessage = ({
   );
 };
 InputMessage.displayName = "InputMessage";
-var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs34(Fragment3, { children: [
+var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs34(Fragment4, { children: [
   errorMessage && errorMessageId && /* @__PURE__ */ jsx212(
     InputMessage,
     {
@@ -5768,7 +5804,7 @@ import {
   useRef as useRef12
 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx225, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx225, jsxs as jsxs42 } from "react/jsx-runtime";
 var CalendarPopoverContext = createContext9({
   anchorRef: null,
   closeButtonRef: null,
@@ -5848,7 +5884,7 @@ var CalendarPopoverContent = ({
     border: "border-default",
     padding: "x0.75"
   };
-  return /* @__PURE__ */ jsxs42(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment5, { children: [
     portalTarget && hasBreakpoint && createPortal(
       /* @__PURE__ */ jsx225(ShowHide, { showBelow: smallScreenBreakpoint, children: /* @__PURE__ */ jsx225(Backdrop, { zIndex: "modal", isMounted, children: /* @__PURE__ */ jsxs42(
         Paper,
@@ -6430,6 +6466,7 @@ function DateInput({
   width,
   clearable,
   ref,
+  afterLabelContent,
   ...props
 }) {
   var _a;
@@ -6448,7 +6485,8 @@ function DateInput({
           ...labelProps,
           label: props.label,
           showRequiredStyling: required,
-          readOnly
+          readOnly,
+          afterLabelContent
         }),
         /* @__PURE__ */ jsxs46(
           Box,
@@ -6916,11 +6954,11 @@ var DetailListDesc = ({ className, ...rest }) => /* @__PURE__ */ jsx243("dd", {
 DetailListDesc.displayName = "DetailListDesc";
 
 // src/components/DetailList/DetailListRow.tsx
-import { Fragment as Fragment5, jsx as jsx244, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx244, jsxs as jsxs49 } from "react/jsx-runtime";
 var DetailListRow = ({ className, ...rest }) => {
   const { smallScreenBreakpoint: bp } = useDetailListContext();
   const hasBp = !!bp;
-  return /* @__PURE__ */ jsxs49(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs49(Fragment6, { children: [
     /* @__PURE__ */ jsx244(
       Box,
       {
@@ -7966,7 +8004,7 @@ var FileUploader_default = {
 };
 
 // src/components/FileUploader/File.tsx
-import { Fragment as Fragment6, jsx as jsx259, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx259, jsxs as jsxs58 } from "react/jsx-runtime";
 var File = (props) => {
   const { t } = useTranslation();
   const {
@@ -8006,7 +8044,7 @@ var File = (props) => {
               children: stateFile.file.name
             }
           ),
-          !inactive && /* @__PURE__ */ jsxs58(Fragment6, { children: [
+          !inactive && /* @__PURE__ */ jsxs58(Fragment7, { children: [
             /* @__PURE__ */ jsx259(
               Icon,
               {
@@ -8385,6 +8423,7 @@ var FileUploader = (props) => {
     errorMessage,
     hideFileList,
     className,
+    afterLabelContent,
     ...rest
   } = props;
   const { t } = useTranslation();
@@ -8479,7 +8518,8 @@ var FileUploader = (props) => {
           id: labelId,
           showRequiredStyling: required,
           htmlFor: inputId,
-          readOnly
+          readOnly,
+          afterLabelContent
         }),
         hasTip && /* @__PURE__ */ jsx260(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
         inactive ? input : withDragAndDrop ? /* @__PURE__ */ jsxs59(
@@ -8719,6 +8759,8 @@ import { jsx as jsx270 } from "react/jsx-runtime";
 var InlineButton = ({
   className,
   color,
+  icon,
+  children,
   ...rest
 }) => /* @__PURE__ */ jsx270(
   StylelessButton,
@@ -8730,7 +8772,8 @@ var InlineButton = ({
       InlineButton_default.button,
       getColorCn(color)
     ),
-    ...rest
+    ...rest,
+    children: icon ? /* @__PURE__ */ jsx270(Icon, { icon, iconSize: "inherit" }) : children
   }
 );
 
@@ -8891,7 +8934,7 @@ function createClearChangeEvent(elementId) {
 }
 
 // src/components/InlineEdit/InlineField.tsx
-import { Fragment as Fragment7, jsx as jsx272, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx272, jsxs as jsxs62 } from "react/jsx-runtime";
 function InlineField(props) {
   const {
     elementType,
@@ -8972,7 +9015,7 @@ function InlineField(props) {
           }
         );
       case "select":
-        return /* @__PURE__ */ jsxs62(Fragment7, { children: [
+        return /* @__PURE__ */ jsxs62(Fragment8, { children: [
           /* @__PURE__ */ jsx272(
             "select",
             {
@@ -9346,7 +9389,7 @@ var LocalMessage_default = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment8, jsx as jsx280, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx280, jsxs as jsxs64 } from "react/jsx-runtime";
 var icons2 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -9370,7 +9413,7 @@ var LocalMessage = ({
   const { t } = useTranslation();
   const [isClosed, setClosed] = useState20(false);
   if (isClosed) {
-    return /* @__PURE__ */ jsx280(Fragment8, {});
+    return /* @__PURE__ */ jsx280(Fragment9, {});
   }
   return /* @__PURE__ */ jsxs64(
     Box,
@@ -9889,7 +9932,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],
@@ -9957,10 +10000,9 @@ var getIndicatorIconSize = (componentSize) => {
   }
 };
 var DDSOption = ({
-  componentSize,
   ...props
 }) => /* @__PURE__ */ jsxs66(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ jsx284(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
+  props.isSelected && /* @__PURE__ */ jsx284(Icon, { icon: CheckIcon, iconSize: "small" }),
   props.children
 ] });
 var CustomOption = (props) => /* @__PURE__ */ jsx284(Option, { ...props, children: React.createElement(props.customElement, props) });
@@ -10077,6 +10119,7 @@ function Select({
   openMenuOnClick,
   ref,
   instanceId,
+  afterLabelContent,
   ...rest
 }) {
   const themeContext = useContext18(ThemeContext);
@@ -10151,7 +10194,7 @@ function Select({
       if (customOptionElement) {
         return /* @__PURE__ */ jsx285(CustomOption, { ...props, customElement: customOptionElement });
       } else {
-        return /* @__PURE__ */ jsx285(DDSOption, { ...props, componentSize });
+        return /* @__PURE__ */ jsx285(DDSOption, { ...props });
       }
     },
     [customOptionElement, componentSize]
@@ -10212,7 +10255,8 @@ function Select({
           label,
           htmlFor: uniqueId,
           showRequiredStyling,
-          readOnly
+          readOnly,
+          afterLabelContent
         }),
         /* @__PURE__ */ jsx285(ReactSelect, { ...reactSelectProps, ref }),
         renderInputMessage(tip, tipId, errorMessage, errorMessageId)
@@ -10261,6 +10305,7 @@ var NativeSelect = ({
   onKeyDown,
   onMouseDown,
   clearable,
+  afterLabelContent,
   onChange,
   ...rest
 }) => {
@@ -10312,7 +10357,8 @@ var NativeSelect = ({
       label,
       htmlFor: uniqueId,
       showRequiredStyling,
-      readOnly
+      readOnly,
+      afterLabelContent
     }),
     /* @__PURE__ */ jsxs68(Box, { position: "relative", width: inputWidth, children: [
       /* @__PURE__ */ jsx286(
@@ -10386,6 +10432,7 @@ var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
   defaultActivePage = 1,
+  activePage: activePageProp,
   withPagination = true,
   withCounter,
   withSelect,
@@ -10405,7 +10452,15 @@ var Pagination = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [activePage, setActivePage] = useState22(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] = useState22(defaultItemsPerPage);
   const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   const items = PaginationGenerator(pagesLength, activePage);
@@ -10623,7 +10678,7 @@ var Pagination = ({
             {
               options: selectOptions,
               isSearchable: false,
-              width: "74px",
+              width: "90px",
               defaultValue: {
                 label: itemsPerPage.toString(),
                 value: itemsPerPage
@@ -11166,6 +11221,7 @@ var PhoneInput = ({
   "aria-required": ariaRequired,
   "aria-describedby": ariaDescribedby,
   groupLabel = "Landskode og telefonnummer",
+  afterLabelContent,
   ref,
   ...props
 }) => {
@@ -11254,7 +11310,8 @@ var PhoneInput = ({
       label,
       htmlFor: phoneNumberId,
       showRequiredStyling,
-      readOnly
+      readOnly,
+      afterLabelContent
     }),
     /* @__PURE__ */ jsxs70(
       Box,
@@ -11658,7 +11715,7 @@ var ProgressTracker_default = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment9, jsx as jsx291, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx291, jsxs as jsxs72 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -11714,7 +11771,7 @@ var ProgressTrackerItem = (props) => {
     if (active) return "text-action-resting";
   }
   const isInactiveLink = disabled || active;
-  const stepContent = /* @__PURE__ */ jsxs72(Fragment9, { children: [
+  const stepContent = /* @__PURE__ */ jsxs72(Fragment10, { children: [
     /* @__PURE__ */ jsx291(
       Box,
       {
@@ -12133,7 +12190,7 @@ var texts22 = createTexts({
 });
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment10, jsx as jsx296, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx296, jsxs as jsxs75 } from "react/jsx-runtime";
 var getIconSize2 = (size2) => {
   switch (size2) {
     case "large":
@@ -12256,7 +12313,7 @@ var Search = ({
             )
           }
         ),
-        hasSuggestions && /* @__PURE__ */ jsxs75(Fragment10, { children: [
+        hasSuggestions && /* @__PURE__ */ jsxs75(Fragment11, { children: [
           /* @__PURE__ */ jsx296(
             SearchSuggestions,
             {
@@ -12554,7 +12611,7 @@ var texts24 = createTexts({
 // src/components/Table/collapsible/CollapsibleRow.tsx
 import {
   Children as Children4,
-  Fragment as Fragment11,
+  Fragment as Fragment12,
   cloneElement as cloneElement6,
   isValidElement as isValidElement6,
   useEffect as useEffect32,
@@ -12814,7 +12871,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment12, jsx as jsx309, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx309, jsxs as jsxs78 } from "react/jsx-runtime";
 var CollapsibleRow = ({
   type: _type,
   className,
@@ -12857,7 +12914,7 @@ var CollapsibleRow = ({
   const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
     const id = derivativeIdGenerator(prefix2, index.toString());
     collapsibleIds.push(id);
-    return /* @__PURE__ */ jsxs78(Fragment11, { children: [
+    return /* @__PURE__ */ jsxs78(Fragment12, { children: [
       /* @__PURE__ */ jsx309(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
       isValidElement6(child) && cloneElement6(child, {
         collapsibleProps: { isCollapsibleChild: true }
@@ -12870,7 +12927,7 @@ var CollapsibleRow = ({
   });
   const headerRow = () => {
     if (type !== "head" || !isCollapsed) return null;
-    return /* @__PURE__ */ jsx309(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs78(Fragment12, { children: [
+    return /* @__PURE__ */ jsx309(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs78(Fragment13, { children: [
       definingColumnCells,
       /* @__PURE__ */ jsxs78(Table2.Cell, { type: "head", layout: "center", children: [
         t(texts26.expand),
@@ -12902,9 +12959,9 @@ var CollapsibleRow = ({
       ) })
     ] });
   };
-  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs78(Fragment12, { children: [
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs78(Fragment13, { children: [
     headerRow(),
-    type === "body" && /* @__PURE__ */ jsxs78(Fragment12, { children: [
+    type === "body" && /* @__PURE__ */ jsxs78(Fragment13, { children: [
       rowWithChevron(),
       childrenCollapsed ? null : collapsedRows
     ] })
@@ -13437,6 +13494,7 @@ var TextInput_default = {
 import { jsx as jsx319, jsxs as jsxs83 } from "react/jsx-runtime";
 var TextInput = ({
   label,
+  afterLabelContent,
   disabled,
   readOnly,
   errorMessage,
@@ -13614,7 +13672,13 @@ var TextInput = ({
       ),
       style,
       children: [
-        renderLabel({ label, htmlFor: uniqueId, showRequiredStyling, readOnly }),
+        renderLabel({
+          label,
+          htmlFor: uniqueId,
+          showRequiredStyling,
+          readOnly,
+          afterLabelContent
+        }),
         extendedInput ? extendedInput : /* @__PURE__ */ jsx319(Box, { as: StatefulInput, width: inputWidth, ...generalInputProps }),
         hasBottomContainer && /* @__PURE__ */ jsxs83(
           Box,
@@ -13708,8 +13772,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",