@norges-domstoler/dds-components 22.8.2 → 22.10.0

package/dist/index.d.mts

@@ -3537,9 +3537,11 @@ type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
     level: HeadingLevel;
     /**Spesifiserer typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Heading>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 } & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
 declare const Heading: {
-    ({ id, className, style, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, children, typographyType, level, withMargins, withMarginsOverInput, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3561,9 +3563,11 @@ declare const Label: {
 type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
     /**Typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Legend>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 }, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
 declare const Legend: {
-    ({ id, className, style, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, typographyType, withMarginsOverInput, withMargins, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -4594,7 +4598,7 @@ declare const ModalActions: {
 };
 
 declare const OverflowMenu: {
-    ({ placement, offset, className, htmlProps, ref, style, ...rest }: OverflowMenuProps): react_jsx_runtime.JSX.Element;
+    ({ placement, offset, parentElement, portal, className, htmlProps, ref, style, ...rest }: OverflowMenuProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -4611,6 +4615,17 @@ type OverflowMenuProps = Omit<BaseComponentPropsWithChildren<HTMLDivElement, {
      * @default 2
      */
     offset?: number;
+    /**Angir rotnode hvor menyen skal rendres hvis portal=false.
+     * Hvis parentElement ikke er satt vil menyen rendres i det elementet som OverflowMenu er plassert i.
+     * Hvis portal er true, vil parentElement bli ignorert.
+     * @default themeProviderRef
+     */
+    parentElement?: HTMLElement;
+    /**Angir om menyen skal rendres i en portal eller ikke.
+     * Hvis portal er false, vil parentElement bli brukt hvis det er satt.
+     * @default true
+     */
+    portal?: boolean;
 }>, 'id'>;
 
 declare const OverflowMenuButton: {

package/dist/index.d.ts

@@ -3537,9 +3537,11 @@ type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
     level: HeadingLevel;
     /**Spesifiserer typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Heading>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 } & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
 declare const Heading: {
-    ({ id, className, style, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, children, typographyType, level, withMargins, withMarginsOverInput, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3561,9 +3563,11 @@ declare const Label: {
 type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
     /**Typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Legend>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 }, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
 declare const Legend: {
-    ({ id, className, style, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, typographyType, withMarginsOverInput, withMargins, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -4594,7 +4598,7 @@ declare const ModalActions: {
 };
 
 declare const OverflowMenu: {
-    ({ placement, offset, className, htmlProps, ref, style, ...rest }: OverflowMenuProps): react_jsx_runtime.JSX.Element;
+    ({ placement, offset, parentElement, portal, className, htmlProps, ref, style, ...rest }: OverflowMenuProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -4611,6 +4615,17 @@ type OverflowMenuProps = Omit<BaseComponentPropsWithChildren<HTMLDivElement, {
      * @default 2
      */
     offset?: number;
+    /**Angir rotnode hvor menyen skal rendres hvis portal=false.
+     * Hvis parentElement ikke er satt vil menyen rendres i det elementet som OverflowMenu er plassert i.
+     * Hvis portal er true, vil parentElement bli ignorert.
+     * @default themeProviderRef
+     */
+    parentElement?: HTMLElement;
+    /**Angir om menyen skal rendres i en portal eller ikke.
+     * Hvis portal er false, vil parentElement bli brukt hvis det er satt.
+     * @default true
+     */
+    portal?: boolean;
 }>, 'id'>;
 
 declare const OverflowMenuButton: {

package/dist/index.js

@@ -469,9 +469,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",
@@ -782,6 +784,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) {
@@ -4325,6 +4333,8 @@ var Heading = ({
   children,
   typographyType,
   level,
+  withMargins,
+  withMarginsOverInput,
   ...rest
 }) => {
   const headingElement = getHeadingElement(level);
@@ -4332,9 +4342,19 @@ var Heading = ({
   return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
     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
     }
   );
@@ -4413,14 +4433,26 @@ var Legend = ({
   style,
   htmlProps,
   typographyType = "headingLarge",
+  withMarginsOverInput,
+  withMargins,
   ...rest
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
     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)
     }
   );
 };
@@ -4820,6 +4852,7 @@ var texts2 = createTexts({
 
 // src/components/OverflowMenu/OverflowMenu.tsx
 var import_react21 = require("react");
+var import_react_dom2 = require("react-dom");
 
 // src/components/OverflowMenu/OverflowMenu.context.tsx
 var import_react20 = require("react");
@@ -4869,6 +4902,8 @@ var import_jsx_runtime210 = require("react/jsx-runtime");
 var OverflowMenu = ({
   placement = "bottom-end",
   offset = 2,
+  parentElement,
+  portal = true,
   className,
   htmlProps = {},
   ref,
@@ -4876,11 +4911,16 @@ var OverflowMenu = ({
   ...rest
 }) => {
   const { isOpen, floatStyling, setFloatOptions, menuRef, menuId } = useOverflowMenuContext();
+  const themeContext = (0, import_react21.useContext)(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;
   (0, import_react21.useEffect)(() => {
     setFloatOptions == null ? void 0 : setFloatOptions({ placement, offset });
   }, [placement, offset]);
   const openCn = isOpen ? "open" : "closed";
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+  const menu = /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
     Paper,
     {
       overflowY: "auto",
@@ -4907,6 +4947,7 @@ var OverflowMenu = ({
       border: "border-default"
     }
   );
+  return portal && portalTarget ? (0, import_react_dom2.createPortal)(menu, portalTarget) : menu;
 };
 OverflowMenu.displayName = "OverflowMenu";
 
@@ -5394,7 +5435,7 @@ var Breadcrumbs = ({
             "aria-label": bChildrenTruncated.length > 1 ? t(texts3.showHiddenTo(bChildren.length - 1)) : t(texts3.showHidden)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(OverflowMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(OverflowMenuList, { children: bChildrenTruncated }) })
+        /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(OverflowMenu, { portal: false, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(OverflowMenuList, { children: bChildrenTruncated }) })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(HStack, { ...responsiveLiProps, children: [
@@ -6778,7 +6819,7 @@ function isLeapYear(date) {
 
 // src/components/date-inputs/DatePicker/CalendarPopover.tsx
 var import_react41 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 var import_jsx_runtime242 = require("react/jsx-runtime");
 var CalendarPopoverContext = (0, import_react41.createContext)({
   anchorRef: null,
@@ -6860,7 +6901,7 @@ var CalendarPopoverContent = ({
     padding: "x0.75"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(import_jsx_runtime242.Fragment, { children: [
-    portalTarget && hasBreakpoint && (0, import_react_dom2.createPortal)(
+    portalTarget && hasBreakpoint && (0, import_react_dom3.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ShowHide, { showBelow: smallScreenBreakpoint, children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Backdrop, { zIndex: "modal", isMounted, children: /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
         Paper,
         {
@@ -8091,7 +8132,7 @@ DetailListTerm.displayName = "DetailListTerm";
 
 // src/components/Drawer/Drawer.tsx
 var import_react53 = require("react");
-var import_react_dom3 = require("react-dom");
+var import_react_dom4 = require("react-dom");
 
 // src/components/Drawer/Drawer.module.css
 var Drawer_default = {
@@ -8259,7 +8300,7 @@ var Drawer = ({
       children: drawer
     }
   ) : drawer;
-  return (isOpen || hasTransitionedIn) && portalTarget ? (0, import_react_dom3.createPortal)(component, portalTarget) : null;
+  return (isOpen || hasTransitionedIn) && portalTarget ? (0, import_react_dom4.createPortal)(component, portalTarget) : null;
 };
 Drawer.displayName = "Drawer";
 
@@ -10853,7 +10894,7 @@ LocalMessage.displayName = "LocalMessage";
 
 // src/components/Modal/Modal.tsx
 var import_react72 = require("react");
-var import_react_dom4 = require("react-dom");
+var import_react_dom5 = require("react-dom");
 
 // src/components/Modal/Modal.module.css
 var Modal_default = {
@@ -10917,7 +10958,7 @@ var Modal = ({
   };
   useOnKeyDown(["Escape", "Esc"], () => handleClose());
   const hasTransitionedIn = useMountTransition(isOpen, 200);
-  return (isOpen || hasTransitionedIn) && portalTarget ? (0, import_react_dom4.createPortal)(
+  return (isOpen || hasTransitionedIn) && portalTarget ? (0, import_react_dom5.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
       Backdrop,
       {
@@ -12817,7 +12858,7 @@ var texts23 = createTexts({
 
 // src/components/Popover/Popover.tsx
 var import_react79 = require("react");
-var import_react_dom5 = require("react-dom");
+var import_react_dom6 = require("react-dom");
 
 // src/components/Popover/Popover.module.css
 var Popover_default = {
@@ -12975,7 +13016,7 @@ var Popover = ({
       ]
     }
   );
-  return isOpen || hasTransitionedIn ? portal && portalTarget ? (0, import_react_dom5.createPortal)(popover, portalTarget) : popover : null;
+  return isOpen || hasTransitionedIn ? portal && portalTarget ? (0, import_react_dom6.createPortal)(popover, portalTarget) : popover : null;
 };
 Popover.displayName = "Popover";