Version Packages (#1703)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-codemod
 
+## 1.4.0
+
 ## 1.3.39
 
 ### Patch Changes

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "1.3.39",
+  "version": "1.4.0",
   "description": "NAV designsystem codemods",
   "author": "NAV Designsystem team",
   "license": "MIT",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 1.4.0
+
 ## 1.3.39
 
 ### Patch Changes

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "1.3.39",
+  "version": "1.4.0",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.3.39",
+    "@navikt/ds-tokens": "^1.4.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @navikt/ds-react
 
+## 1.4.0
+
+### Minor Changes
+
+- [`1bdb7e377`](https://github.com/navikt/Designsystemet/commit/1bdb7e3777ece28d153991b78dbdd289366fca57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - [#1702](https://github.com/navikt/Designsystemet/pull/1702) [`20bcc28cb`](https://github.com/navikt/Designsystemet/commit/20bcc28cb0a886aa40d2c1b042fb2706a144c014) Thanks [@andnorda](https://github.com/andnorda)! - Global Provider komponent for håndtering av global config
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.4.0
+
 ## 1.3.39
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.3.39",
+  "version": "1.4.0",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.3.39",
+    "@navikt/ds-icons": "^1.4.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./accordion";
 export * from "./alert";
+export * from "./provider";
 export * from "./button";
 export * from "./date";
 export * from "./form";

@navikt/core/react/src/modal/Modal.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, useMemo, useRef } from "react";
+import React, { forwardRef, useEffect, useMemo, useRef } from "react";
 import cl from "clsx";
 import ReactModal from "react-modal";
 import { Close } from "@navikt/ds-icons";
-import { Button, mergeRefs } from "..";
+import { Button, mergeRefs, useProvider } from "..";
 import ModalContent, { ModalContentType } from "./ModalContent";
 
 export interface ModalProps {
@@ -63,7 +63,7 @@ interface ModalComponent
 }
 
 type ModalLifecycle = {
-  setAppElement?: (element: any) => void;
+  setAppElement: (element: any) => void;
 };
 
 export const Modal = forwardRef<ReactModal, ModalProps>(
@@ -81,6 +81,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
       "aria-modal": ariaModal,
       "aria-label": contentLabel,
       style,
+      parentSelector,
       ...rest
     },
     ref
@@ -88,6 +89,12 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
     const modalRef = useRef<ReactModal | null>(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
     const buttonRef = useRef<HTMLButtonElement>(null);
+    const rootElement = useProvider()?.rootElement;
+    const appElement = useProvider()?.appElement;
+
+    useEffect(() => {
+      appElement && Modal.setAppElement(appElement);
+    }, [appElement]);
 
     const onModalCloseRequest = (e) => {
       if (shouldCloseOnOverlayClick || e.type === "keydown") {
@@ -100,6 +107,11 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
     return (
       <ReactModal
         {...rest}
+        parentSelector={
+          parentSelector ?? rootElement !== undefined
+            ? () => rootElement as HTMLElement
+            : undefined
+        }
         style={style}
         isOpen={open}
         ref={mergedRef}

@navikt/core/react/src/provider/Provider.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from "react";
+
+export interface ProviderContextType {
+  /**
+   * Global root-element to attach portals to (Modal, Tooltip)
+   */
+  rootElement?: HTMLElement;
+  /**
+   * Global config for appElement (Modal)
+   */
+  appElement?: HTMLElement;
+}
+
+export const ProviderContext = createContext<ProviderContextType | undefined>(
+  undefined
+);
+
+export interface ProviderProps {
+  children?: React.ReactNode;
+  rootElement?: HTMLElement;
+  appElement?: HTMLElement;
+}
+
+export const useProvider = () => useContext(ProviderContext);
+
+export const Provider = ({ children, ...rest }: ProviderProps) => {
+  return (
+    <ProviderContext.Provider value={rest}>{children}</ProviderContext.Provider>
+  );
+};
+
+export default Provider;

@navikt/core/react/src/provider/index.ts

@@ -0,0 +1 @@
+export { default as Provider, useProvider } from "./Provider";

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -21,7 +21,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Detail } from "..";
+import { Detail, useProvider } from "..";
 import { mergeRefs, useId } from "../util";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
@@ -96,6 +96,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ) => {
     const [open, setOpen] = useState(defaultOpen);
     const arrowRef = useRef<HTMLDivElement | null>(null);
+    const rootElement = useProvider()?.rootElement;
 
     const {
       x,
@@ -170,7 +171,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 : children?.props["aria-describedby"],
           })
         )}
-        <FloatingPortal>
+        <FloatingPortal root={rootElement}>
           {(userOpen ?? open) && (
             <div
               {...getFloatingProps({

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 1.4.0
+
 ## 1.3.39
 
 ### Patch Changes

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "1.3.39",
+  "version": "1.4.0",
   "description": "Auto-generated tailwind config based on @navikt/ds-tokens",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.3.39",
+    "@navikt/ds-tokens": "^1.4.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^17.0.35",
     "jest": "^27.2.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 1.4.0
+
 ## 1.3.39
 
 ### Patch Changes

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "1.3.39",
+  "version": "1.4.0",
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-icons
 
+## 1.4.0
+
 ## 1.3.39
 
 ### Patch Changes

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "1.3.39",
+  "version": "1.4.0",
   "description": "Aksel icons",
   "repository": {
     "type": "git",

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal
 
+## 1.4.0
+
 ## 1.3.39
 
 ### Patch Changes

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "1.3.39",
+  "version": "1.4.0",
   "description": "Css for NAV internal Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-react-internal
 
+## 1.4.0
+
+### Patch Changes
+
+- Updated dependencies [[`1bdb7e377`](https://github.com/navikt/Designsystemet/commit/1bdb7e3777ece28d153991b78dbdd289366fca57)]:
+  - @navikt/ds-react@1.4.0
+  - @navikt/ds-icons@1.4.0
+
 ## 1.3.39
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "1.3.39",
+  "version": "1.4.0",
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -34,8 +34,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^1.3.39",
-    "@navikt/ds-react": "^1.3.39",
+    "@navikt/ds-icons": "^1.4.0",
+    "@navikt/ds-react": "^1.4.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

examples/next/package.json

@@ -9,16 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@navikt/ds-css": "^1.3.39",
-    "@navikt/ds-icons": "^1.3.39",
-    "@navikt/ds-react": "^1.3.39",
-    "@navikt/ds-react-internal": "^1.3.39",
+    "@navikt/ds-css": "^1.4.0",
+    "@navikt/ds-icons": "^1.4.0",
+    "@navikt/ds-react": "^1.4.0",
+    "@navikt/ds-react-internal": "^1.4.0",
     "next": "12.1.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@navikt/ds-tailwind": "^1.3.39",
+    "@navikt/ds-tailwind": "^1.4.0",
     "@types/node": "17.0.23",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

examples/shadow-dom/main.tsx

@@ -1,24 +1,50 @@
 import ReactDOM from "react-dom/client";
-import { Button, Checkbox, CheckboxGroup } from "@navikt/ds-react";
+import {
+  Provider,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Modal,
+  Tooltip,
+} from "@navikt/ds-react";
 import styles from "@navikt/ds-css/dist/index.css?inline";
-import React from "react";
+import React, { useState } from "react";
 
 class CustomComponent extends HTMLElement {
   connectedCallback() {
-    const mountPoint = document.createElement("span");
-    this.attachShadow({ mode: "closed" }).appendChild(mountPoint);
+    const rootElement = document.createElement("div");
+    const appElement = document.createElement("div");
+    rootElement.appendChild(appElement);
+    this.attachShadow({ mode: "closed" }).appendChild(rootElement);
 
-    ReactDOM.createRoot(mountPoint).render(
-      <>
+    ReactDOM.createRoot(rootElement).render(
+      <Provider rootElement={rootElement} appElement={appElement}>
         <style>{styles}</style>
         <Button>Click me!</Button>
         <CheckboxGroup legend="Legend" defaultValue={["tekst2"]}>
           <Checkbox value="tekst">Checkboxtekst</Checkbox>
           <Checkbox value="tekst2">Checkboxtekst</Checkbox>
         </CheckboxGroup>
-      </>
+        <ModalWrapper />
+        <Tooltip content="Skriv ut dokument">
+          <Button>yo!</Button>
+        </Tooltip>
+      </Provider>
     );
   }
 }
 
+const ModalWrapper = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+        <Modal.Content>modal content</Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
 window.customElements.define("custom-component", CustomComponent);