@norges-domstoler/dds-components 18.0.0 → 18.2.0

package/dist/index.mjs

@@ -2568,7 +2568,7 @@ import {
   useState as useState3
 } from "react";
 var isKeyboardEvent = (e) => e.key !== void 0;
-function useRoveFocus(size2, active, direction = "column") {
+function useRoveFocus(size2, active, direction = "column", noWrap) {
   const [currentFocusIndex, setCurrentFocusIndex] = useState3(-1);
   const nextKey = direction === "row" ? "ArrowRight" : "ArrowDown";
   const previousKey = direction === "row" ? "ArrowLeft" : "ArrowUp";
@@ -2577,16 +2577,19 @@ function useRoveFocus(size2, active, direction = "column") {
       if (!size2 || !isKeyboardEvent(e)) return;
       if (e.key === nextKey) {
         e.preventDefault();
-        setCurrentFocusIndex((prev) => prev === size2 - 1 ? 0 : prev + 1);
+        setCurrentFocusIndex((prev) => {
+          if (prev === size2 - 1) return noWrap ? prev : 0;
+          return prev + 1;
+        });
       } else if (e.key === previousKey) {
         e.preventDefault();
         setCurrentFocusIndex((prev) => {
-          if (prev === -1 || prev === 0) return size2 - 1;
+          if (prev === -1 || prev === 0) return noWrap ? prev : size2 - 1;
           return prev - 1;
         });
       }
     },
-    [size2, setCurrentFocusIndex]
+    [size2, setCurrentFocusIndex, direction, noWrap]
   );
   useEffect8(() => {
     if (!active) {
@@ -6691,7 +6694,15 @@ var FileUploader = (props) => {
       style: { ...style, width },
       ...rest,
       children: [
-        hasLabel && /* @__PURE__ */ jsx238(Label, { id: labelId, showRequiredStyling: showRequiredMarker, children: label }),
+        hasLabel && /* @__PURE__ */ jsx238(
+          Label,
+          {
+            id: labelId,
+            showRequiredStyling: showRequiredMarker,
+            htmlFor: inputId,
+            children: label
+          }
+        ),
         hasTip && /* @__PURE__ */ jsx238(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
         withDragAndDrop ? /* @__PURE__ */ jsxs50(
           "div",
@@ -8012,7 +8023,11 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 
 // src/components/Select/Select.tsx
-import { forwardRef as forwardRef75, useContext as useContext11, useId as useId15 } from "react";
+import {
+  forwardRef as forwardRef75,
+  useContext as useContext11,
+  useId as useId15
+} from "react";
 import {
   default as ReactSelect
 } from "react-select";
@@ -10700,12 +10715,17 @@ var useRadioButtonGroup = () => {
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
 import { jsx as jsx281, jsxs as jsxs71 } from "react/jsx-runtime";
-var isValueEqualToGroupValueOrFalsy = (value, group) => {
+var getIsChecked = ({
+  value,
+  group,
+  checked
+}) => {
+  if (checked !== void 0) return checked;
   if (typeof value !== "undefined" && value !== null && group) {
     if (typeof value === "number") {
-      return value === Number(group == null ? void 0 : group.value);
+      return value === Number(group.value);
     }
-    return value === (group == null ? void 0 : group.value);
+    return value === group.value;
   }
   return !!value;
 };
@@ -10739,7 +10759,7 @@ var RadioButton = forwardRef87(
     const radioButtonGroup = useRadioButtonGroup();
     const handleChange = (event) => {
       onChange && onChange(event);
-      radioButtonGroup == null ? void 0 : radioButtonGroup.onChange(event);
+      radioButtonGroup == null ? void 0 : radioButtonGroup.onChange(event, event.target.value);
     };
     const describedByIds = [];
     if (radioButtonGroup == null ? void 0 : radioButtonGroup.errorMessageId)
@@ -10748,6 +10768,7 @@ var RadioButton = forwardRef87(
     const isReadOnly = readOnly || (radioButtonGroup == null ? void 0 : radioButtonGroup.readOnly);
     const isDisabled = disabled || (radioButtonGroup == null ? void 0 : radioButtonGroup.disabled);
     const hasError = error || (radioButtonGroup == null ? void 0 : radioButtonGroup.error);
+    const isChecked = getIsChecked({ value, group: radioButtonGroup, checked });
     return /* @__PURE__ */ jsxs71(
       Label2,
       {
@@ -10768,7 +10789,7 @@ var RadioButton = forwardRef87(
               name: name != null ? name : radioButtonGroup == null ? void 0 : radioButtonGroup.name,
               disabled: isDisabled,
               required: required || !!(radioButtonGroup == null ? void 0 : radioButtonGroup.required),
-              checked: typeof checked !== "undefined" ? checked : isValueEqualToGroupValueOrFalsy(value, radioButtonGroup),
+              checked: isChecked,
               onChange: readOnlyChangeHandler(isReadOnly, handleChange),
               value,
               "aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
@@ -10819,6 +10840,7 @@ var RadioButtonGroupInner = (props, ref) => {
     readOnly = false,
     direction = "row",
     value,
+    defaultValue,
     children,
     required = false,
     onChange,
@@ -10828,13 +10850,22 @@ var RadioButtonGroupInner = (props, ref) => {
     ...rest
   } = props;
   const { "aria-required": ariaRequired = false } = htmlProps;
-  const [groupValue, setGroupValue] = useState25(value);
+  const [uncontrolledValue, setUncontrolledValue] = useState25(
+    defaultValue
+  );
   const generatedId = useId24();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-radioButtonGroup`;
-  const handleChange = combineHandlers(
-    (e) => setGroupValue(e.target.value),
-    (e) => onChange && onChange(e, e.target.value)
-  );
+  const isControlled = value !== void 0;
+  const groupValue = isControlled ? value : uncontrolledValue;
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (!isControlled) {
+      setUncontrolledValue(newValue);
+    }
+    if (onChange) {
+      onChange(e, newValue);
+    }
+  };
   const hasErrorMessage = !!errorMessage;
   const showRequiredMarker = required || ariaRequired;
   const tipId = tip && `${uniqueGroupId}-tip`;
@@ -10842,6 +10873,7 @@ var RadioButtonGroupInner = (props, ref) => {
   const contextProps = {
     name,
     disabled,
+    defaultValue,
     error: hasErrorMessage,
     errorMessageId,
     required,
@@ -11254,11 +11286,19 @@ var Table = forwardRef98(
 Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
-import { useEffect as useEffect28, useRef as useRef34, useState as useState27 } from "react";
+import {
+  useContext as useContext18,
+  useEffect as useEffect28,
+  useRef as useRef34,
+  useState as useState27
+} from "react";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var TableWrapper = ({ className, ...rest }) => {
+  const themeContext = useContext18(ThemeContext);
+  const container = themeContext == null ? void 0 : themeContext.el;
+  const containerWidth = container ? container.clientWidth : 0;
   const [overflowX, setOverflowX] = useState27(false);
-  const [windowWidth, setWindowWidth] = useState27(window.innerWidth);
+  const [themeContainerWidth, setThemeContainerWidth] = useState27(containerWidth);
   function isOverflowingX(event) {
     return event.offsetWidth < event.scrollWidth;
   }
@@ -11269,10 +11309,10 @@ var TableWrapper = ({ className, ...rest }) => {
       return;
     }
     setOverflowX(false);
-  }, [windowWidth]);
+  }, [themeContainerWidth]);
   useEffect28(() => {
     function handleResize() {
-      setWindowWidth(window.innerWidth);
+      setThemeContainerWidth(containerWidth);
     }
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
@@ -11445,7 +11485,7 @@ import {
 } from "react";
 
 // src/components/Tabs/Tabs.context.tsx
-import { createContext as createContext11, useContext as useContext18 } from "react";
+import { createContext as createContext11, useContext as useContext19 } from "react";
 var TabsContext = createContext11({
   activeTab: 0,
   tabsId: "",
@@ -11456,7 +11496,7 @@ var TabsContext = createContext11({
   setHasTabFocus: () => null,
   tabContentDirection: "row"
 });
-var useTabsContext = () => useContext18(TabsContext);
+var useTabsContext = () => useContext19(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -11547,7 +11587,7 @@ import {
 // src/components/Tabs/TabWidthContext.tsx
 import {
   createContext as createContext12,
-  useContext as useContext19,
+  useContext as useContext20,
   useLayoutEffect as useLayoutEffect3
 } from "react";
 import { jsx as jsx297 } from "react/jsx-runtime";
@@ -11580,7 +11620,7 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = useContext19(TabContext);
+  const context = useContext20(TabContext);
   useLayoutEffect3(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
@@ -12113,15 +12153,132 @@ var TextInput = forwardRef107(
 );
 TextInput.displayName = "TextInput";
 
+// src/components/Toggle/Toggle.tsx
+import {
+  forwardRef as forwardRef108,
+  useId as useId27
+} from "react";
+
+// src/components/Toggle/Toggle.module.css
+var Toggle_default = {
+  label: "Toggle_label",
+  track: "Toggle_track",
+  thumb: "Toggle_thumb",
+  checkmark: "Toggle_checkmark",
+  "labeltext--readonly": "Toggle_labeltext--readonly",
+  "icon--read-only": "Toggle_icon--read-only",
+  medium: "Toggle_medium",
+  large: "Toggle_large",
+  "label--is-loading": "Toggle_label--is-loading",
+  "label--disabled": "Toggle_label--disabled",
+  "label--read-only": "Toggle_label--read-only"
+};
+
+// src/components/Toggle/Toggle.tsx
+import { jsx as jsx304, jsxs as jsxs79 } from "react/jsx-runtime";
+var Toggle = forwardRef108(
+  ({
+    id,
+    children,
+    size: size2 = "medium",
+    checked: checkedProp,
+    defaultChecked,
+    onChange,
+    disabled,
+    readOnly,
+    isLoading,
+    className,
+    htmlProps = {},
+    ...rest
+  }, ref) => {
+    const generatedId = useId27();
+    const uniqueId = id != null ? id : `${generatedId}-toggle`;
+    const iconSize = size2 === "large" ? "medium" : "small";
+    const [checked, setChecked] = useControllableState({
+      value: checkedProp,
+      defaultValue: defaultChecked != null ? defaultChecked : false,
+      onChange
+    });
+    return /* @__PURE__ */ jsxs79(
+      "label",
+      {
+        htmlFor: uniqueId,
+        className: cn(
+          Toggle_default.label,
+          Toggle_default[size2],
+          isLoading && Toggle_default["label--is-loading"],
+          disabled && Toggle_default["label--disabled"],
+          readOnly && Toggle_default["label--read-only"]
+        ),
+        children: [
+          /* @__PURE__ */ jsx304(
+            "input",
+            {
+              ...getBaseHTMLProps(
+                uniqueId,
+                cn(
+                  className,
+                  focus_default["focusable-sibling"],
+                  utilStyles_default["hide-input"]
+                ),
+                htmlProps,
+                rest
+              ),
+              ref,
+              type: "checkbox",
+              checked,
+              onChange: (e) => setChecked(e.target.checked),
+              disabled,
+              "aria-disabled": isLoading,
+              "aria-readonly": readOnly,
+              onKeyDown: readOnlyKeyDownHandler(
+                "selectionControl",
+                readOnly || isLoading,
+                htmlProps.onKeyDown
+              ),
+              onClick: readOnlyClickHandler(
+                readOnly || isLoading,
+                htmlProps.onClick
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx304("span", { className: cn(Toggle_default.track, focus_default["focus-styled-sibling"]), children: /* @__PURE__ */ jsx304("span", { className: Toggle_default.thumb, children: isLoading ? /* @__PURE__ */ jsx304(Spinner, { size: `var(--dds-icon-size-${size2})` }) : /* @__PURE__ */ jsx304(
+            Icon,
+            {
+              className: Toggle_default.checkmark,
+              icon: CheckIcon,
+              iconSize
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs79("span", { className: cn(readOnly && Toggle_default["labeltext--readonly"]), children: [
+            readOnly && /* @__PURE__ */ jsx304(
+              Icon,
+              {
+                icon: LockIcon,
+                iconSize: "small",
+                className: Toggle_default["icon--read-only"]
+              }
+            ),
+            children,
+            " ",
+            isLoading && /* @__PURE__ */ jsx304(VisuallyHidden, { as: "span", children: "Innlastning p\xE5g\xE5r" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
 // src/components/ToggleBar/ToggleBar.tsx
-import { useId as useId27, useState as useState32 } from "react";
+import { useId as useId28, useState as useState32 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-import { createContext as createContext13, useContext as useContext20 } from "react";
+import { createContext as createContext13, useContext as useContext21 } from "react";
 var ToggleBarContext = createContext13({
   size: "medium"
 });
-var useToggleBarContext = () => useContext20(ToggleBarContext);
+var useToggleBarContext = () => useContext21(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -12140,7 +12297,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { jsx as jsx304, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx305, jsxs as jsxs80 } from "react/jsx-runtime";
 var ToggleBar = (props) => {
   const {
     children,
@@ -12155,7 +12312,7 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = useId27();
+  const generatedId = useId28();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
   const [groupValue, setGroupValue] = useState32(value);
   const handleChange = combineHandlers(
@@ -12163,7 +12320,7 @@ var ToggleBar = (props) => {
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label && `${uniqueId}-label`;
-  return /* @__PURE__ */ jsx304(
+  return /* @__PURE__ */ jsx305(
     ToggleBarContext.Provider,
     {
       value: {
@@ -12172,7 +12329,7 @@ var ToggleBar = (props) => {
         name,
         value: groupValue
       },
-      children: /* @__PURE__ */ jsxs79(
+      children: /* @__PURE__ */ jsxs80(
         "div",
         {
           ...getBaseHTMLProps(
@@ -12185,8 +12342,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ jsx304(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
-            /* @__PURE__ */ jsx304("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ jsx305(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
+            /* @__PURE__ */ jsx305("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -12197,10 +12354,10 @@ ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
 import {
-  forwardRef as forwardRef108,
-  useId as useId28
+  forwardRef as forwardRef109,
+  useId as useId29
 } from "react";
-import { jsx as jsx305, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs81 } from "react/jsx-runtime";
 var typographyTypes4 = {
   large: "bodyLarge",
   medium: "bodyMedium",
@@ -12217,7 +12374,7 @@ var calculateChecked = (value, group, checked) => {
   }
   return !!value;
 };
-var ToggleRadio = forwardRef108(
+var ToggleRadio = forwardRef109(
   (props, ref) => {
     const {
       value,
@@ -12233,7 +12390,7 @@ var ToggleRadio = forwardRef108(
       id,
       ...rest
     } = props;
-    const generatedId = useId28();
+    const generatedId = useId29();
     const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
     const group = useToggleBarContext();
     const handleChange = (event) => {
@@ -12241,8 +12398,8 @@ var ToggleRadio = forwardRef108(
       (group == null ? void 0 : group.onChange) && group.onChange(event);
     };
     const contentTypeCn = label ? "with-text" : "just-icon";
-    return /* @__PURE__ */ jsxs80("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
-      /* @__PURE__ */ jsx305(
+    return /* @__PURE__ */ jsxs81("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
+      /* @__PURE__ */ jsx306(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12265,7 +12422,7 @@ var ToggleRadio = forwardRef108(
           "aria-labelledby": ariaLabelledBy
         }
       ),
-      /* @__PURE__ */ jsxs80(
+      /* @__PURE__ */ jsxs81(
         Typography,
         {
           as: "span",
@@ -12276,8 +12433,8 @@ var ToggleRadio = forwardRef108(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon && /* @__PURE__ */ jsx305(Icon, { icon, iconSize: "inherit" }),
-            label && /* @__PURE__ */ jsx305("span", { children: label })
+            icon && /* @__PURE__ */ jsx306(Icon, { icon, iconSize: "inherit" }),
+            label && /* @__PURE__ */ jsx306("span", { children: label })
           ]
         }
       )
@@ -12287,7 +12444,7 @@ var ToggleRadio = forwardRef108(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { forwardRef as forwardRef109, useId as useId29 } from "react";
+import { forwardRef as forwardRef110, useId as useId30 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -12301,14 +12458,14 @@ var ToggleButton_default = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { jsx as jsx306, jsxs as jsxs81 } from "react/jsx-runtime";
-var ToggleButton = forwardRef109(
+import { jsx as jsx307, jsxs as jsxs82 } from "react/jsx-runtime";
+var ToggleButton = forwardRef110(
   ({ id, label, icon, className, htmlProps, ...rest }, ref) => {
-    const generatedId = useId29();
+    const generatedId = useId30();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     const hasIcon = !!icon;
-    return /* @__PURE__ */ jsxs81("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
-      /* @__PURE__ */ jsx306(
+    return /* @__PURE__ */ jsxs82("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
+      /* @__PURE__ */ jsx307(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12325,7 +12482,7 @@ var ToggleButton = forwardRef109(
           type: "checkbox"
         }
       ),
-      /* @__PURE__ */ jsxs81(
+      /* @__PURE__ */ jsxs82(
         "span",
         {
           className: cn(
@@ -12335,7 +12492,7 @@ var ToggleButton = forwardRef109(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            hasIcon && /* @__PURE__ */ jsx306(Icon, { icon, iconSize: "inherit" }),
+            hasIcon && /* @__PURE__ */ jsx307(Icon, { icon, iconSize: "inherit" }),
             " ",
             label
           ]
@@ -12347,8 +12504,8 @@ var ToggleButton = forwardRef109(
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-import { useId as useId30 } from "react";
-import { jsx as jsx307, jsxs as jsxs82 } from "react/jsx-runtime";
+import { useId as useId31 } from "react";
+import { jsx as jsx308, jsxs as jsxs83 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -12360,9 +12517,9 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId30();
+  const generatedId = useId31();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs83(
     "div",
     {
       ...getBaseHTMLProps(
@@ -12374,8 +12531,8 @@ var ToggleButtonGroup = (props) => {
       role: "group",
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
-        !!label && /* @__PURE__ */ jsx307(Typography, { as: "span", typographyType: "labelMedium", id: uniqueLabelId, children: label }),
-        /* @__PURE__ */ jsx307("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
+        !!label && /* @__PURE__ */ jsx308(Typography, { as: "span", typographyType: "labelMedium", id: uniqueLabelId, children: label }),
+        /* @__PURE__ */ jsx308("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
       ]
     }
   );
@@ -12652,6 +12809,7 @@ export {
   TimePicker,
   TingrettIcon,
   TipIcon,
+  Toggle,
   ToggleBar,
   ToggleButton,
   ToggleButtonGroup,