@norges-domstoler/dds-components 19.0.0 → 19.2.0

package/dist/index.mjs

@@ -2502,7 +2502,7 @@ import { useEffect as useEffect5 } from "react";
 function useOnClickOutside(element, handler) {
   useEffect5(() => {
     const listener = (event) => {
-      const elements = Array.isArray(element) ? element : [element];
+      const elements = Array.isArray(element) ? element : [element].filter(Boolean);
       const hasClickedInside = elements.some(
         (el) => el == null ? void 0 : el.contains(event.target)
       );
@@ -4459,7 +4459,7 @@ var CalendarPopoverContent = ({
   if (!themeContext) {
     throw new Error("DatePicker must be used within a ThemeProvider");
   }
-  const portalTarget = themeContext == null ? void 0 : themeContext.el;
+  const portalTarget = themeContext.el;
   const { isOpen, onClose, anchorRef, closeButtonRef } = useContext4(
     CalendarPopoverContext
   );
@@ -4471,14 +4471,18 @@ var CalendarPopoverContent = ({
     var _a;
     refs.setReference((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
   }, []);
+  const hasBreakpoint = !!smallScreenBreakpoint;
   useEffect16(() => {
-    if (isOpen) {
-      handleElementWithBackdropMount(document.body);
-    } else {
-      handleElementWithBackdropUnmount(document.body);
+    var _a;
+    if (hasBreakpoint && ((_a = modalRef.current) == null ? void 0 : _a.checkVisibility())) {
+      if (isOpen) {
+        handleElementWithBackdropMount(document.body);
+      } else {
+        handleElementWithBackdropUnmount(document.body);
+      }
+      return () => handleElementWithBackdropUnmount(document.body);
     }
-    return () => handleElementWithBackdropUnmount(document.body);
-  }, [isOpen]);
+  }, [isOpen, hasBreakpoint]);
   const closeOnKeyboardBlurBack = (event) => {
     if (event.key === "Tab" && event.shiftKey === true) {
       onClose();
@@ -4486,7 +4490,7 @@ var CalendarPopoverContent = ({
   };
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs34(Fragment3, { children: [
-    portalTarget && createPortal(
+    portalTarget && hasBreakpoint && createPortal(
       /* @__PURE__ */ jsx207(
         "div",
         {
@@ -9664,7 +9668,11 @@ var getCallingCode = (s) => {
 };
 
 // src/components/Popover/Popover.tsx
-import { forwardRef as forwardRef79, useEffect as useEffect25 } from "react";
+import {
+  forwardRef as forwardRef79,
+  useEffect as useEffect25,
+  useId as useId16
+} from "react";
 
 // src/components/Popover/Popover.module.css
 var Popover_default = {
@@ -9687,6 +9695,7 @@ import { jsx as jsx270, jsxs as jsxs63 } from "react/jsx-runtime";
 var Popover = forwardRef79(
   (props, ref) => {
     const {
+      id,
       header,
       withCloseButton = true,
       onBlur,
@@ -9697,23 +9706,59 @@ var Popover = forwardRef79(
       returnFocusOnBlur = true,
       className,
       htmlProps = {},
+      anchorRef,
+      isOpen: propIsOpen,
+      onClose: propOnClose,
       ...rest
     } = props;
+    const { refs, styles: positionStyles } = useFloatPosition(null, {
+      offset,
+      placement
+    });
+    const context = usePopoverContext();
     const {
-      floatStyling,
+      floatStyling: contextFloatStyling,
       setFloatOptions,
-      floatingRef,
+      floatingRef: contextFloatingRef,
+      popoverId: contextPopoverId,
+      onClose: contextOnClose,
+      isOpen: contextIsOpen,
+      anchorEl: contextAnchorEl
+    } = context;
+    const hasContext = contextPopoverId !== void 0;
+    const generatedId = useId16();
+    const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
+    const [
       popoverId,
-      onClose,
+      anchorEl,
       isOpen = false,
-      anchorEl
-    } = usePopoverContext();
+      floatingRef,
+      floatStyling,
+      onClose
+    ] = hasContext ? [
+      contextPopoverId,
+      contextAnchorEl,
+      contextIsOpen,
+      contextFloatingRef,
+      contextFloatStyling,
+      contextOnClose
+    ] : [
+      uniquePopoverId,
+      (anchorRef == null ? void 0 : anchorRef.current) && anchorRef.current,
+      propIsOpen,
+      refs.setFloating,
+      positionStyles.floating,
+      propOnClose
+    ];
+    if (!hasContext) {
+      refs.setReference(anchorEl || null);
+    }
     const hasTransitionedIn = useMountTransition(isOpen, 400);
     const popoverRef = useReturnFocusOnBlur(
       isOpen && hasTransitionedIn && returnFocusOnBlur,
       () => {
-        onClose && onClose();
-        onBlur && onBlur();
+        onClose == null ? void 0 : onClose();
+        onBlur == null ? void 0 : onBlur();
       },
       anchorEl && anchorEl
     );
@@ -9721,6 +9766,12 @@ var Popover = forwardRef79(
     useEffect25(() => {
       setFloatOptions && setFloatOptions({ placement, offset });
     }, [placement, offset]);
+    useOnClickOutside([popoverRef.current, anchorEl], () => {
+      if (isOpen && !hasContext) onClose == null ? void 0 : onClose();
+    });
+    useOnKeyDown("Escape", () => {
+      if (isOpen && !hasContext) onClose == null ? void 0 : onClose();
+    });
     const hasTitle = !!header;
     const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
     return isOpen || hasTransitionedIn ? /* @__PURE__ */ jsxs63(
@@ -9780,7 +9831,7 @@ import {
   Children as ReactChildren5,
   cloneElement as cloneElement6,
   isValidElement as isValidElement7,
-  useId as useId16,
+  useId as useId17,
   useRef as useRef30,
   useState as useState21
 } from "react";
@@ -9798,7 +9849,7 @@ var PopoverGroup = ({
   const [internalIsOpen, internalSetIsOpen] = useState21(isInitiallyOpen);
   const open = propIsOpen != null ? propIsOpen : internalIsOpen;
   const setOpen = propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen;
-  const generatedId = useId16();
+  const generatedId = useId17();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
   const [floatOptions, setFloatOptions] = useState21();
   const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
@@ -10084,7 +10135,7 @@ var intersperseItemsWithConnector = (children) => Children4.map(children, (child
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { forwardRef as forwardRef81, useId as useId17 } from "react";
+import { forwardRef as forwardRef81, useId as useId18 } from "react";
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -10117,7 +10168,7 @@ var ProgressBar = forwardRef81(
       style,
       ...rest
     } = props;
-    const generatedId = useId17();
+    const generatedId = useId18();
     const uniqueId = id != null ? id : `${generatedId}-searchInput`;
     const hasErrorMessage = !!errorMessage;
     const hasTip = !!tip;
@@ -10182,7 +10233,7 @@ ProgressBar.displayName = "ProgressBar";
 // src/components/Search/Search.tsx
 import {
   forwardRef as forwardRef84,
-  useId as useId18,
+  useId as useId19,
   useState as useState23
 } from "react";
 
@@ -10388,7 +10439,7 @@ var Search = forwardRef84(
     ...rest
   }, ref) => {
     var _a;
-    const generatedId = useId18();
+    const generatedId = useId19();
     const uniqueId = id != null ? id : `${generatedId}-searchInput`;
     const hasLabel = !!label;
     const tipId = derivativeIdGenerator(uniqueId, "tip");
@@ -10605,7 +10656,7 @@ Search2.AutocompleteWrapper = SearchAutocompleteWrapper;
 Search2.Suggestions = SearchSuggestions;
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef86, useId as useId19 } from "react";
+import { forwardRef as forwardRef86, useId as useId20 } from "react";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
 import { createContext as createContext9, useContext as useContext15 } from "react";
@@ -10711,7 +10762,7 @@ var Checkbox = forwardRef86(
       htmlProps = {},
       ...rest
     } = props;
-    const generatedId = useId19();
+    const generatedId = useId20();
     const uniqueId = id != null ? id : `${generatedId}-checkbox`;
     const checkboxGroup = useCheckboxGroup();
     const hasLabel = !!label;
@@ -10781,7 +10832,7 @@ var Checkbox = forwardRef86(
 Checkbox.displayName = "Checkbox";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
-import { useId as useId20 } from "react";
+import { useId as useId21 } from "react";
 import { jsx as jsx281, jsxs as jsxs70 } from "react/jsx-runtime";
 var CheckboxGroup = (props) => {
   const {
@@ -10800,7 +10851,7 @@ var CheckboxGroup = (props) => {
     ...rest
   } = props;
   const { "aria-required": ariaRequired } = htmlProps;
-  const generatedId = useId20();
+  const generatedId = useId21();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
   const hasErrorMessage = !!errorMessage;
   const showRequiredMarker = required || ariaRequired;
@@ -10858,7 +10909,7 @@ var CheckboxGroup = (props) => {
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-import { forwardRef as forwardRef87, useId as useId21 } from "react";
+import { forwardRef as forwardRef87, useId as useId22 } from "react";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
 import { createContext as createContext10, useContext as useContext16 } from "react";
@@ -10907,7 +10958,7 @@ var RadioButton = forwardRef87(
       style,
       ...restHtmlProps
     } = htmlProps;
-    const generatedId = useId21();
+    const generatedId = useId22();
     const uniqueId = id != null ? id : `${generatedId}-radioButton`;
     const hasLabel = !!label;
     const radioButtonGroup = useRadioButtonGroup();
@@ -10979,7 +11030,7 @@ RadioButton.displayName = "RadioButton";
 // src/components/SelectionControl/RadioButton/RadioButtonGroup.tsx
 import {
   forwardRef as forwardRef88,
-  useId as useId22,
+  useId as useId23,
   useState as useState25
 } from "react";
 import { jsx as jsx283, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -11007,7 +11058,7 @@ var RadioButtonGroupInner = (props, ref) => {
   const [uncontrolledValue, setUncontrolledValue] = useState25(
     defaultValue
   );
-  const generatedId = useId22();
+  const generatedId = useId23();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-radioButtonGroup`;
   const isControlled = value !== void 0;
   const groupValue = isControlled ? value : uncontrolledValue;
@@ -11637,6 +11688,7 @@ import { createContext as createContext13, useContext as useContext20 } from "re
 var TabsContext = createContext13({
   activeTab: 0,
   tabsId: "",
+  size: "small",
   handleTabChange: () => null,
   tabListRef: null,
   tabPanelsRef: null,
@@ -11654,6 +11706,10 @@ var Tabs_default = {
   "tab-row--standard-widths": "Tabs_tab-row--standard-widths",
   "tab-row--custom-widths": "Tabs_tab-row--custom-widths",
   tab: "Tabs_tab",
+  "tab--medium--row": "Tabs_tab--medium--row",
+  "tab--small--row": "Tabs_tab--small--row",
+  "tab--medium--column": "Tabs_tab--medium--column",
+  "tab--small--column": "Tabs_tab--small--column",
   "tab--row": "Tabs_tab--row",
   "tab--column": "Tabs_tab--column",
   "tab--active": "Tabs_tab--active",
@@ -11711,7 +11767,7 @@ var AddTabButton = forwardRef101(
     useSetTabWidth(index, width);
     const buttonRef = useRef34(null);
     const combinedRef = useCombinedRef(ref, buttonRef);
-    const { tabContentDirection } = useTabsContext();
+    const { tabContentDirection, size: size2 } = useTabsContext();
     return /* @__PURE__ */ jsxs76(
       "button",
       {
@@ -11721,7 +11777,7 @@ var AddTabButton = forwardRef101(
           className,
           Tabs_default.tab,
           Tabs_default[`tab--${tabContentDirection}`],
-          typographyStyles_default[getTypographyCn(defaultTypographyType)],
+          typographyStyles_default[`body-${size2}`],
           focus_default["focusable--inset"]
         ),
         children: [
@@ -11738,7 +11794,7 @@ AddTabButton.displayName = "AddTabButton";
 import {
   forwardRef as forwardRef102,
   useEffect as useEffect31,
-  useId as useId23,
+  useId as useId24,
   useRef as useRef35,
   useState as useState29
 } from "react";
@@ -11749,6 +11805,7 @@ var Tabs = forwardRef102((props, ref) => {
     activeTab,
     onChange,
     tabContentDirection = "row",
+    size: size2 = "small",
     addTabButtonProps,
     width,
     children,
@@ -11756,7 +11813,7 @@ var Tabs = forwardRef102((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId23();
+  const generatedId = useId24();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
   const [thisActiveTab, setActiveTab] = useState29(activeTab != null ? activeTab : 0);
   const [hasTabFocus, setHasTabFocus] = useState29(false);
@@ -11781,6 +11838,7 @@ var Tabs = forwardRef102((props, ref) => {
       value: {
         tabsId: uniqueId,
         activeTab: thisActiveTab,
+        size: size2,
         handleTabChange,
         tabListRef,
         tabPanelsRef,
@@ -11835,7 +11893,7 @@ var Tab = forwardRef103((props, ref) => {
   useSetTabWidth(index, width);
   const itemRef = useRef36(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  const { tabContentDirection } = useTabsContext();
+  const { tabContentDirection, size: size2 } = useTabsContext();
   useEffect32(() => {
     var _a;
     if (focus) {
@@ -11863,9 +11921,10 @@ var Tab = forwardRef103((props, ref) => {
         cn(
           className,
           Tabs_default.tab,
+          Tabs_default[`tab--${size2}--${tabContentDirection}`],
           active && Tabs_default["tab--active"],
           Tabs_default[`tab--${tabContentDirection}`],
-          typographyStyles_default[getTypographyCn(defaultTypographyType)],
+          typographyStyles_default[`body-${size2}`],
           focus_default["focusable--inset"]
         ),
         htmlProps,
@@ -11919,7 +11978,11 @@ var TabList = forwardRef104(
         index,
         focus: focus === index && hasTabFocus,
         setFocus,
-        onClick: () => handleTabChange(index)
+        onClick: () => {
+          var _a, _b;
+          handleTabChange(index);
+          (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a);
+        }
       });
     }) : [];
     if (hasButton && tabListChildren) {
@@ -12090,7 +12153,7 @@ Tag.displayName = "Tag";
 // src/components/TextInput/TextInput.tsx
 import {
   forwardRef as forwardRef108,
-  useId as useId24,
+  useId as useId25,
   useLayoutEffect as useLayoutEffect4,
   useRef as useRef37,
   useState as useState31
@@ -12168,7 +12231,7 @@ var TextInput = forwardRef108(
         onChange(event);
       }
     };
-    const generatedId = useId24();
+    const generatedId = useId25();
     const uniqueId = id != null ? id : `${generatedId}-textInput`;
     const hasErrorMessage = !!errorMessage;
     const hasTip = !!tip;
@@ -12350,7 +12413,7 @@ TextInput.displayName = "TextInput";
 // src/components/Toggle/Toggle.tsx
 import {
   forwardRef as forwardRef109,
-  useId as useId25
+  useId as useId26
 } from "react";
 
 // src/components/Toggle/Toggle.module.css
@@ -12385,7 +12448,7 @@ var Toggle = forwardRef109(
     htmlProps = {},
     ...rest
   }, ref) => {
-    const generatedId = useId25();
+    const generatedId = useId26();
     const uniqueId = id != null ? id : `${generatedId}-toggle`;
     const iconSize = size2 === "large" ? "medium" : "small";
     const [checked, setChecked] = useControllableState({
@@ -12465,7 +12528,7 @@ var Toggle = forwardRef109(
 Toggle.displayName = "Toggle";
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { useId as useId26, useState as useState32 } from "react";
+import { useId as useId27, useState as useState32 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
 import { createContext as createContext15, useContext as useContext22 } from "react";
@@ -12506,7 +12569,7 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = useId26();
+  const generatedId = useId27();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
   const [groupValue, setGroupValue] = useState32(value);
   const handleChange = combineHandlers(
@@ -12549,7 +12612,7 @@ ToggleBar.displayName = "ToggleBar";
 // src/components/ToggleBar/ToggleRadio.tsx
 import {
   forwardRef as forwardRef110,
-  useId as useId27
+  useId as useId28
 } from "react";
 import { jsx as jsx308, jsxs as jsxs82 } from "react/jsx-runtime";
 var typographyTypes4 = {
@@ -12584,7 +12647,7 @@ var ToggleRadio = forwardRef110(
       id,
       ...rest
     } = props;
-    const generatedId = useId27();
+    const generatedId = useId28();
     const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
     const group = useToggleBarContext();
     const handleChange = (event) => {
@@ -12638,7 +12701,7 @@ var ToggleRadio = forwardRef110(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { forwardRef as forwardRef111, useId as useId28 } from "react";
+import { forwardRef as forwardRef111, useId as useId29 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -12657,7 +12720,7 @@ var ToggleButton_default = {
 import { jsx as jsx309, jsxs as jsxs83 } from "react/jsx-runtime";
 var ToggleButton = forwardRef111(
   ({ id, label, icon, size: size2 = "small", className, htmlProps, ...rest }, ref) => {
-    const generatedId = useId28();
+    const generatedId = useId29();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     const hasIcon = !!icon;
     return /* @__PURE__ */ jsxs83("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
@@ -12701,7 +12764,7 @@ var ToggleButton = forwardRef111(
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-import { useId as useId29 } from "react";
+import { useId as useId30 } from "react";
 import { jsx as jsx310, jsxs as jsxs84 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
@@ -12714,7 +12777,7 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId29();
+  const generatedId = useId30();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
   return /* @__PURE__ */ jsxs84(
     "div",