@norges-domstoler/dds-components 22.9.0 → 22.11.0

package/dist/index.mjs

@@ -3853,7 +3853,7 @@ var Typography = (props) => {
     externalLinkProp = as === "a" && externalLink ? externalLink : void 0;
   }
   return /* @__PURE__ */ jsxs70(
-    ElementAs,
+    Box,
     {
       ...getBaseHTMLProps(
         id,
@@ -4460,7 +4460,8 @@ var texts2 = createTexts({
 });
 
 // src/components/OverflowMenu/OverflowMenu.tsx
-import { useEffect as useEffect14 } from "react";
+import { useContext as useContext6, useEffect as useEffect14 } from "react";
+import { createPortal } from "react-dom";
 
 // src/components/OverflowMenu/OverflowMenu.context.tsx
 import {
@@ -4515,6 +4516,8 @@ import { jsx as jsx210 } from "react/jsx-runtime";
 var OverflowMenu = ({
   placement = "bottom-end",
   offset = 2,
+  parentElement,
+  portal = true,
   className,
   htmlProps = {},
   ref,
@@ -4522,11 +4525,16 @@ var OverflowMenu = ({
   ...rest
 }) => {
   const { isOpen, floatStyling, setFloatOptions, menuRef, menuId } = useOverflowMenuContext();
+  const themeContext = useContext6(ThemeContext);
+  if (portal && !themeContext) {
+    throw new Error("OverflowMenu must be used within a DdsProvider");
+  }
+  const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
   useEffect14(() => {
     setFloatOptions == null ? void 0 : setFloatOptions({ placement, offset });
   }, [placement, offset]);
   const openCn = isOpen ? "open" : "closed";
-  return /* @__PURE__ */ jsx210(
+  const menu = /* @__PURE__ */ jsx210(
     Paper,
     {
       overflowY: "auto",
@@ -4553,6 +4561,7 @@ var OverflowMenu = ({
       border: "border-default"
     }
   );
+  return portal && portalTarget ? createPortal(menu, portalTarget) : menu;
 };
 OverflowMenu.displayName = "OverflowMenu";
 
@@ -5049,7 +5058,7 @@ var Breadcrumbs = ({
             "aria-label": bChildrenTruncated.length > 1 ? t(texts3.showHiddenTo(bChildren.length - 1)) : t(texts3.showHidden)
           }
         ),
-        /* @__PURE__ */ jsx222(OverflowMenu, { children: /* @__PURE__ */ jsx222(OverflowMenuList, { children: bChildrenTruncated }) })
+        /* @__PURE__ */ jsx222(OverflowMenu, { portal: false, children: /* @__PURE__ */ jsx222(OverflowMenuList, { children: bChildrenTruncated }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs77(HStack, { ...responsiveLiProps, children: [
@@ -5371,10 +5380,10 @@ CardExpandableBody.displayName = "CardExpandableBody";
 import { useId as useId5 } from "react";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
-import { createContext as createContext6, useContext as useContext6 } from "react";
+import { createContext as createContext6, useContext as useContext7 } from "react";
 var CheckboxGroupContext = createContext6(null);
 var useCheckboxGroup = () => {
-  return useContext6(CheckboxGroupContext);
+  return useContext7(CheckboxGroupContext);
 };
 
 // src/components/SelectionControl/SelectionControl.module.css
@@ -5712,10 +5721,10 @@ CheckboxGroup.displayName = "CheckboxGroup";
 import { useId as useId7 } from "react";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
-import { createContext as createContext7, useContext as useContext7 } from "react";
+import { createContext as createContext7, useContext as useContext8 } from "react";
 var RadioButtonGroupContext = createContext7(null);
 var useRadioButtonGroup = () => {
-  return useContext7(RadioButtonGroupContext);
+  return useContext8(RadioButtonGroupContext);
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
@@ -5904,9 +5913,9 @@ var RadioButtonGroup = ({
 RadioButtonGroup.displayName = "RadioButtonGroup";
 
 // src/components/Card/CardSelectionControl/CardSelectable.context.tsx
-import { createContext as createContext8, useContext as useContext8 } from "react";
+import { createContext as createContext8, useContext as useContext9 } from "react";
 var CardSelectableContext = createContext8({});
-var useCardSelectableContext = () => useContext8(CardSelectableContext);
+var useCardSelectableContext = () => useContext9(CardSelectableContext);
 
 // src/components/Card/CardSelectionControl/CardSelectable.tsx
 import { jsx as jsx234 } from "react/jsx-runtime";
@@ -6305,7 +6314,7 @@ import {
 import { useLocale as useLocale2 } from "@react-aria/i18n";
 import { useCalendarState } from "@react-stately/calendar";
 import {
-  useContext as useContext11
+  useContext as useContext12
 } from "react";
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarGrid.tsx
@@ -6314,7 +6323,7 @@ import {
   useCalendarGrid
 } from "@react-aria/calendar";
 import { useLocale } from "@react-aria/i18n";
-import { useContext as useContext10 } from "react";
+import { useContext as useContext11 } from "react";
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
 import { isToday } from "@internationalized/date";
@@ -6446,11 +6455,11 @@ function isLeapYear(date) {
 // src/components/date-inputs/DatePicker/CalendarPopover.tsx
 import {
   createContext as createContext9,
-  useContext as useContext9,
+  useContext as useContext10,
   useEffect as useEffect18,
   useRef as useRef13
 } from "react";
-import { createPortal } from "react-dom";
+import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment6, jsx as jsx242, jsxs as jsxs89 } from "react/jsx-runtime";
 var CalendarPopoverContext = createContext9({
   anchorRef: null,
@@ -6478,7 +6487,7 @@ var CalendarPopover = ({
 var CalendarPopoverAnchor = ({
   children
 }) => {
-  const { anchorRef } = useContext9(CalendarPopoverContext);
+  const { anchorRef } = useContext10(CalendarPopoverContext);
   return /* @__PURE__ */ jsx242("div", { ref: anchorRef != null ? anchorRef : void 0, children });
 };
 var CalendarPopoverContent = ({
@@ -6491,13 +6500,13 @@ var CalendarPopoverContent = ({
   const { refs, styles: floatingStyles } = useFloatPosition(null, {
     placement: "bottom-start"
   });
-  const themeContext = useContext9(ThemeContext);
+  const themeContext = useContext10(ThemeContext);
   if (!themeContext) {
     throw new Error("DatePicker must be used within a ThemeProvider");
   }
   const portalTarget = themeContext.el;
   const { t } = useTranslation();
-  const { isOpen, onClose, anchorRef, closeButtonRef } = useContext9(
+  const { isOpen, onClose, anchorRef, closeButtonRef } = useContext10(
     CalendarPopoverContext
   );
   const hasTransitionedIn = useMountTransition(isOpen, 500);
@@ -6532,7 +6541,7 @@ var CalendarPopoverContent = ({
     padding: "x0.75"
   };
   return /* @__PURE__ */ jsxs89(Fragment6, { children: [
-    portalTarget && hasBreakpoint && createPortal(
+    portalTarget && hasBreakpoint && createPortal2(
       /* @__PURE__ */ jsx242(ShowHide, { showBelow: smallScreenBreakpoint, children: /* @__PURE__ */ jsx242(Backdrop, { zIndex: "modal", isMounted, children: /* @__PURE__ */ jsxs89(
         Paper,
         {
@@ -6591,7 +6600,7 @@ function CalendarGrid({ state, ...props }) {
     { short: t(texts6.sa), full: t(texts6.saturday) },
     { short: t(texts6.su), full: t(texts6.sunday) }
   ];
-  const { showWeekNumbers, onClose } = useContext10(CalendarPopoverContext);
+  const { showWeekNumbers, onClose } = useContext11(CalendarPopoverContext);
   const thCn = cn(
     DateInput_default["calendar__grid-element"],
     typographyStyles_default["text-color--subtle"],
@@ -6776,7 +6785,7 @@ function Calendar(props) {
     nextButtonProps: { onPress: onNext },
     title
   } = useCalendar(props, state);
-  const { onClose, closeButtonRef } = useContext11(CalendarPopoverContext);
+  const { onClose, closeButtonRef } = useContext12(CalendarPopoverContext);
   const closeOnKeyboardBlurBack = (event) => {
     var _a;
     if (event.key === "Tab" && event.shiftKey === true) {
@@ -7053,7 +7062,7 @@ var ClearButton = ({
 ClearButton.displayName = "ClearButton";
 
 // src/components/date-inputs/common/DateInput.tsx
-import { useContext as useContext12 } from "react";
+import { useContext as useContext13 } from "react";
 
 // src/components/helpers/Input/Input.tsx
 import { jsx as jsx248 } from "react/jsx-runtime";
@@ -7143,7 +7152,7 @@ function DateInput({
   ...props
 }) {
   const hasErrorMessage = !!errorMessage;
-  const { isOpen } = useContext12(CalendarPopoverContext);
+  const { isOpen } = useContext13(CalendarPopoverContext);
   return /* @__PURE__ */ jsxs93(
     "div",
     {
@@ -7646,9 +7655,9 @@ var DescriptionListGroup = ({
 DescriptionListGroup.displayName = "DescriptionListGroup";
 
 // src/components/DetailList/DetailList.context.tsx
-import { createContext as createContext10, useContext as useContext13 } from "react";
+import { createContext as createContext10, useContext as useContext14 } from "react";
 var DetailListContext = createContext10({});
-var useDetailListContext = () => useContext13(DetailListContext);
+var useDetailListContext = () => useContext14(DetailListContext);
 
 // src/components/DetailList/DetailList.module.css
 var DetailList_default = {
@@ -7771,11 +7780,11 @@ DetailListTerm.displayName = "DetailListTerm";
 
 // src/components/Drawer/Drawer.tsx
 import {
-  useContext as useContext15,
+  useContext as useContext16,
   useEffect as useEffect19,
   useRef as useRef20
 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/Drawer/Drawer.module.css
 var Drawer_default = {
@@ -7792,9 +7801,9 @@ var Drawer_default = {
 };
 
 // src/components/Drawer/Drawer.context.tsx
-import { createContext as createContext11, useContext as useContext14 } from "react";
+import { createContext as createContext11, useContext as useContext15 } from "react";
 var DrawerContext = createContext11({});
-var useDrawerContext = () => useContext14(DrawerContext);
+var useDrawerContext = () => useContext15(DrawerContext);
 
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx262, jsxs as jsxs97 } from "react/jsx-runtime";
@@ -7815,7 +7824,7 @@ var Drawer = ({
   ref,
   ...rest
 }) => {
-  const themeContext = useContext15(ThemeContext);
+  const themeContext = useContext16(ThemeContext);
   if (!themeContext) {
     throw new Error("Drawer must be used within a ThemeProvider");
   }
@@ -7943,7 +7952,7 @@ var Drawer = ({
       children: drawer
     }
   ) : drawer;
-  return (isOpen || hasTransitionedIn) && portalTarget ? createPortal2(component, portalTarget) : null;
+  return (isOpen || hasTransitionedIn) && portalTarget ? createPortal3(component, portalTarget) : null;
 };
 Drawer.displayName = "Drawer";
 
@@ -9062,13 +9071,21 @@ var fileUploaderReducer = (state, action) => {
     case "dragEnter":
       return {
         ...state,
+        dragCounter: state.dragCounter + 1,
         isDragActive: true
       };
-    case "dragLeave":
-      return { ...state, isDragActive: false };
+    case "dragLeave": {
+      const newCounter = Math.max(0, state.dragCounter - 1);
+      return {
+        ...state,
+        dragCounter: newCounter,
+        isDragActive: newCounter > 0
+      };
+    }
     case "onSetFiles":
       return {
         ...state,
+        dragCounter: 0,
         isDragActive: false,
         files: action.payload
       };
@@ -9175,6 +9192,7 @@ var useFileUploader = (props) => {
     isFocused: false,
     isFileDialogActive: false,
     isDragActive: false,
+    dragCounter: 0,
     rootErrors: calcRootErrors(
       t(texts17.invalidFileAmount),
       initialFileUploaderFiles,
@@ -9223,16 +9241,13 @@ var useFileUploader = (props) => {
   );
   const onRootBlur = useCallback6(() => dispatch({ type: "blur" }), [dispatch]);
   const onRootDragEnter = useCallback6(
-    async (evt) => {
+    (evt) => {
       preventDefaults(evt);
       if (isEventWithFiles(evt)) {
-        const files = await getFilesFromEvent(evt);
-        const fileCount = files.length;
-        if (fileCount === 0) return;
         dispatch({ type: "dragEnter" });
       }
     },
-    [dispatch, accept, maxFiles]
+    [dispatch]
   );
   const onRootDragOver = useCallback6((evt) => {
     preventDefaults(evt);
@@ -9247,7 +9262,6 @@ var useFileUploader = (props) => {
   const onRootDragLeave = useCallback6(
     (evt) => {
       preventDefaults(evt);
-      if (evt.currentTarget.contains(evt.relatedTarget)) return;
       dispatch({ type: "dragLeave" });
     },
     [dispatch]
@@ -9896,14 +9910,14 @@ import { useRef as useRef26 } from "react";
 // src/components/InlineEdit/InlineEdit.context.tsx
 import {
   createContext as createContext12,
-  useContext as useContext16,
+  useContext as useContext17,
   useState as useState19
 } from "react";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var InlineEditContext = createContext12(
   {}
 );
-var useInlineEditContext = () => useContext16(InlineEditContext);
+var useInlineEditContext = () => useContext17(InlineEditContext);
 var InlineEditContextProvider = (props) => {
   const {
     emptiable,
@@ -10562,12 +10576,12 @@ LocalMessage.displayName = "LocalMessage";
 
 // src/components/Modal/Modal.tsx
 import {
-  useContext as useContext17,
+  useContext as useContext18,
   useEffect as useEffect25,
   useId as useId20,
   useRef as useRef29
 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/Modal/Modal.module.css
 var Modal_default = {
@@ -10609,7 +10623,7 @@ var Modal = ({
       onClose();
     }
   };
-  const themeContext = useContext17(ThemeContext);
+  const themeContext = useContext18(ThemeContext);
   if (!themeContext) {
     throw new Error("Modal must be used within a ThemeProvider");
   }
@@ -10631,7 +10645,7 @@ var Modal = ({
   };
   useOnKeyDown(["Escape", "Esc"], () => handleClose());
   const hasTransitionedIn = useMountTransition(isOpen, 200);
-  return (isOpen || hasTransitionedIn) && portalTarget ? createPortal3(
+  return (isOpen || hasTransitionedIn) && portalTarget ? createPortal4(
     /* @__PURE__ */ jsx301(
       Backdrop,
       {
@@ -10790,7 +10804,7 @@ function PaginationGenerator(pagesAmount, activePage) {
 // src/components/Select/Select.tsx
 import {
   useCallback as useCallback7,
-  useContext as useContext18,
+  useContext as useContext19,
   useId as useId21
 } from "react";
 import {
@@ -11197,7 +11211,7 @@ function Select({
   hideSelectedOptions,
   ...rest
 }) {
-  const themeContext = useContext18(ThemeContext);
+  const themeContext = useContext19(ThemeContext);
   if (!themeContext) {
     throw new Error("Select must be used within a ThemeProvider");
   }
@@ -12545,11 +12559,11 @@ var texts23 = createTexts({
 
 // src/components/Popover/Popover.tsx
 import {
-  useContext as useContext20,
+  useContext as useContext21,
   useEffect as useEffect28,
   useId as useId24
 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
 
 // src/components/Popover/Popover.module.css
 var Popover_default = {
@@ -12562,10 +12576,10 @@ var Popover_default = {
 // src/components/Popover/Popover.context.tsx
 import {
   createContext as createContext13,
-  useContext as useContext19
+  useContext as useContext20
 } from "react";
 var PopoverContext = createContext13({});
-var usePopoverContext = () => useContext19(PopoverContext);
+var usePopoverContext = () => useContext20(PopoverContext);
 
 // src/components/Popover/Popover.tsx
 import { jsx as jsx309, jsxs as jsxs120 } from "react/jsx-runtime";
@@ -12596,7 +12610,7 @@ var Popover = ({
   });
   const { maxHeight, maxWidth, minHeight, minWidth, height, width } = sizeProps;
   const context = usePopoverContext();
-  const themeContext = useContext20(ThemeContext);
+  const themeContext = useContext21(ThemeContext);
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
   const {
     floatStyling: contextFloatStyling,
@@ -12710,7 +12724,7 @@ var Popover = ({
       ]
     }
   );
-  return isOpen || hasTransitionedIn ? portal && portalTarget ? createPortal4(popover, portalTarget) : popover : null;
+  return isOpen || hasTransitionedIn ? portal && portalTarget ? createPortal5(popover, portalTarget) : popover : null;
 };
 Popover.displayName = "Popover";
 
@@ -12813,14 +12827,14 @@ import {
 } from "react";
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
-import { createContext as createContext14, useContext as useContext21 } from "react";
+import { createContext as createContext14, useContext as useContext22 } from "react";
 var ProgressTrackerContext = createContext14(
   {
     activeStep: 0,
     direction: "column"
   }
 );
-var useProgressTrackerContext = () => useContext21(ProgressTrackerContext);
+var useProgressTrackerContext = () => useContext22(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
@@ -13182,11 +13196,11 @@ import {
 // src/components/Search/AutocompleteSearch.context.tsx
 import {
   createContext as createContext15,
-  useContext as useContext22
+  useContext as useContext23
 } from "react";
 var AutocompleteSearchContext = createContext15({});
 var useAutocompleteSearch = () => {
-  return useContext22(AutocompleteSearchContext);
+  return useContext23(AutocompleteSearchContext);
 };
 
 // src/components/Search/Search.module.css
@@ -13728,12 +13742,12 @@ import {
 } from "react";
 
 // src/components/Table/collapsible/Table.context.tsx
-import { createContext as createContext16, useContext as useContext23 } from "react";
+import { createContext as createContext16, useContext as useContext24 } from "react";
 var CollapsibleTableContext = createContext16({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => useContext23(CollapsibleTableContext);
+var useCollapsibleTableContext = () => useContext24(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
 import { jsx as jsx321 } from "react/jsx-runtime";
@@ -13741,12 +13755,12 @@ var Body = (props) => /* @__PURE__ */ jsx321("tbody", { ...props });
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Head.tsx
-import { createContext as createContext17, useContext as useContext24 } from "react";
+import { createContext as createContext17, useContext as useContext25 } from "react";
 import { jsx as jsx322 } from "react/jsx-runtime";
 var Head = ({ children, ...rest }) => /* @__PURE__ */ jsx322("thead", { ...rest, children: /* @__PURE__ */ jsx322(HeadContext, { value: true, children }) });
 var HeadContext = createContext17(false);
 function useIsInTableHead() {
-  const isInTableHead = useContext24(HeadContext);
+  const isInTableHead = useContext25(HeadContext);
   return isInTableHead;
 }
 
@@ -13912,14 +13926,14 @@ Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
 import {
-  useContext as useContext25,
+  useContext as useContext26,
   useEffect as useEffect32,
   useRef as useRef35,
   useState as useState30
 } from "react";
 import { jsx as jsx328 } from "react/jsx-runtime";
 var TableWrapper = ({ className, ...rest }) => {
-  const themeContext = useContext25(ThemeContext);
+  const themeContext = useContext26(ThemeContext);
   const container2 = themeContext == null ? void 0 : themeContext.el;
   const containerWidth = container2 ? container2.clientWidth : 0;
   const [overflowX, setOverflowX] = useState30(false);
@@ -14114,7 +14128,7 @@ CollapsibleTable2.Row = CollapsibleRow;
 import { useRef as useRef36 } from "react";
 
 // src/components/Tabs/Tabs.context.tsx
-import { createContext as createContext18, useContext as useContext26 } from "react";
+import { createContext as createContext18, useContext as useContext27 } from "react";
 var TabsContext = createContext18({
   activeTab: 0,
   tabsId: "",
@@ -14127,7 +14141,7 @@ var TabsContext = createContext18({
   tabContentDirection: "row",
   addTabButtonProps: void 0
 });
-var useTabsContext = () => useContext26(TabsContext);
+var useTabsContext = () => useContext27(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -14147,7 +14161,7 @@ var Tabs_default = {
 // src/components/Tabs/TabWidthContext.tsx
 import {
   createContext as createContext19,
-  useContext as useContext27,
+  useContext as useContext28,
   useLayoutEffect as useLayoutEffect4
 } from "react";
 import { jsx as jsx331 } from "react/jsx-runtime";
@@ -14180,7 +14194,7 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = useContext27(TabContext);
+  const context = useContext28(TabContext);
   useLayoutEffect4(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
@@ -14829,12 +14843,12 @@ TextInput.displayName = "TextInput";
 import { useId as useId30, useState as useState35 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-import { createContext as createContext20, useContext as useContext28 } from "react";
+import { createContext as createContext20, useContext as useContext29 } from "react";
 var ToggleBarContext = createContext20({
   size: "medium",
   purpose: "primary"
 });
-var useToggleBarContext = () => useContext28(ToggleBarContext);
+var useToggleBarContext = () => useContext29(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {