@norges-domstoler/dds-components 22.8.2 → 22.10.0

package/dist/index.mjs

@@ -49,9 +49,11 @@ var typographyStyles_default = {
   "heading-xlarge--margins": "typographyStyles_heading-xlarge--margins",
   "heading-xxlarge": "typographyStyles_heading-xxlarge",
   "heading-xxlarge--margins": "typographyStyles_heading-xxlarge--margins",
+  "heading--margins-over-input": "typographyStyles_heading--margins-over-input",
   "label-medium": "typographyStyles_label-medium",
   "label-medium--margins": "typographyStyles_label-medium--margins",
   legend: "typographyStyles_legend",
+  "legend--margins-over-input": "typographyStyles_legend--margins-over-input",
   caption: "typographyStyles_caption",
   "caption--withMargins": "typographyStyles_caption--withMargins",
   bold: "typographyStyles_bold",
@@ -378,6 +380,12 @@ function cn(...classNames) {
 function convertCamelToHyphen(value) {
   return value.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([a-z])([0-9])/g, "$1-$2").toLowerCase();
 }
+function optAttr(value, keepZero) {
+  if (keepZero && value === 0) {
+    return value;
+  }
+  return value ? value : void 0;
+}
 
 // src/utils/getFocusableElements.ts
 function getFocusableElements(elementRef) {
@@ -3934,6 +3942,8 @@ var Heading = ({
   children,
   typographyType,
   level,
+  withMargins,
+  withMarginsOverInput,
   ...rest
 }) => {
   const headingElement = getHeadingElement(level);
@@ -3941,9 +3951,19 @@ var Heading = ({
   return /* @__PURE__ */ jsx199(
     Typography,
     {
-      ...getBaseHTMLProps(id, className, style, htmlProps, rest),
+      ...getBaseHTMLProps(
+        id,
+        cn(
+          className,
+          withMarginsOverInput && typographyStyles_default["heading--margins-over-input"]
+        ),
+        style,
+        htmlProps,
+        rest
+      ),
       typographyType: standardTypographyType,
       as: headingElement,
+      withMargins: optAttr(withMargins || withMarginsOverInput),
       children
     }
   );
@@ -4022,14 +4042,26 @@ var Legend = ({
   style,
   htmlProps,
   typographyType = "headingLarge",
+  withMarginsOverInput,
+  withMargins,
   ...rest
 }) => {
   return /* @__PURE__ */ jsx201(
     Typography,
     {
-      ...getBaseHTMLProps(id, className, style, htmlProps, rest),
+      ...getBaseHTMLProps(
+        id,
+        cn(
+          className,
+          withMarginsOverInput && typographyStyles_default["legend--margins-over-input"]
+        ),
+        style,
+        htmlProps,
+        rest
+      ),
       as: "legend",
-      typographyType
+      typographyType,
+      withMargins: optAttr(withMargins || withMarginsOverInput)
     }
   );
 };
@@ -4428,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 {
@@ -4483,6 +4516,8 @@ import { jsx as jsx210 } from "react/jsx-runtime";
 var OverflowMenu = ({
   placement = "bottom-end",
   offset = 2,
+  parentElement,
+  portal = true,
   className,
   htmlProps = {},
   ref,
@@ -4490,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",
@@ -4521,6 +4561,7 @@ var OverflowMenu = ({
       border: "border-default"
     }
   );
+  return portal && portalTarget ? createPortal(menu, portalTarget) : menu;
 };
 OverflowMenu.displayName = "OverflowMenu";
 
@@ -5017,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: [
@@ -5339,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
@@ -5680,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
@@ -5872,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";
@@ -6273,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
@@ -6282,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";
@@ -6414,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,
@@ -6446,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 = ({
@@ -6459,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);
@@ -6500,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,
         {
@@ -6559,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"],
@@ -6744,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) {
@@ -7021,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";
@@ -7111,7 +7152,7 @@ function DateInput({
   ...props
 }) {
   const hasErrorMessage = !!errorMessage;
-  const { isOpen } = useContext12(CalendarPopoverContext);
+  const { isOpen } = useContext13(CalendarPopoverContext);
   return /* @__PURE__ */ jsxs93(
     "div",
     {
@@ -7614,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 = {
@@ -7739,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 = {
@@ -7760,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";
@@ -7783,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");
   }
@@ -7911,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";
 
@@ -9864,14 +9905,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,
@@ -10530,12 +10571,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 = {
@@ -10577,7 +10618,7 @@ var Modal = ({
       onClose();
     }
   };
-  const themeContext = useContext17(ThemeContext);
+  const themeContext = useContext18(ThemeContext);
   if (!themeContext) {
     throw new Error("Modal must be used within a ThemeProvider");
   }
@@ -10599,7 +10640,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,
       {
@@ -10758,7 +10799,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 {
@@ -11165,7 +11206,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");
   }
@@ -12513,11 +12554,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 = {
@@ -12530,10 +12571,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";
@@ -12564,7 +12605,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,
@@ -12678,7 +12719,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";
 
@@ -12781,14 +12822,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 = {
@@ -13150,11 +13191,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
@@ -13696,12 +13737,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";
@@ -13709,12 +13750,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;
 }
 
@@ -13880,14 +13921,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);
@@ -14082,7 +14123,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: "",
@@ -14095,7 +14136,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 = {
@@ -14115,7 +14156,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";
@@ -14148,7 +14189,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);
@@ -14797,12 +14838,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 = {