@equinor/eds-core-react 0.42.6-dev-11212024 → 0.43.0-dev-12102024

package/dist/eds-core-react.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('react');
@@ -912,7 +913,8 @@ const initalState$2 = {
 const EdsContext = /*#__PURE__*/react.createContext(initalState$2);
 const EdsProvider = ({
   children,
-  density
+  density,
+  rootElement
 }) => {
   const [state, setState] = react.useState({
     ...initalState$2,
@@ -929,6 +931,7 @@ const EdsProvider = ({
   }, [density, state.density]);
   const value = {
     density: state.density,
+    rootElement,
     setDensity
   };
   return /*#__PURE__*/jsxRuntime.jsx(EdsContext.Provider, {
@@ -1148,11 +1151,15 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
   children,
   style,
   enterDelay = 100,
+  portalContainer,
   ...rest
 }, ref) {
   const arrowRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const shouldOpen = title !== '' && typeof document !== 'undefined';
+  const {
+    rootElement
+  } = useEds();
   const {
     x,
     y,
@@ -1240,6 +1247,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
     ...rest,
     ...getFloatingProps({
       ref: tooltipRef,
+      className: `eds-tooltip ${rest.className ?? ''}`,
       style: {
         ...style,
         position: strategy,
@@ -1258,7 +1266,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [shouldOpen && open && /*#__PURE__*/reactDom.createPortal(TooltipEl, document.body), updatedChildren]
+    children: [shouldOpen && open && /*#__PURE__*/reactDom.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
   });
 });
 

package/dist/esm/components/EdsProvider/eds.context.js

@@ -8,7 +8,8 @@ const initalState = {
 const EdsContext = /*#__PURE__*/createContext(initalState);
 const EdsProvider = ({
   children,
-  density
+  density,
+  rootElement
 }) => {
   const [state, setState] = useState({
     ...initalState,
@@ -25,6 +26,7 @@ const EdsProvider = ({
   }, [density, state.density]);
   const value = {
     density: state.density,
+    rootElement,
     setDensity
   };
   return /*#__PURE__*/jsx(EdsContext.Provider, {

package/dist/esm/components/Tooltip/Tooltip.js

@@ -5,6 +5,7 @@ import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs } from
 import { tooltip } from './Tooltip.tokens.js';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss } from '@floating-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const StyledTooltip = styled('div').withConfig({
   shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
@@ -26,11 +27,15 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
   children,
   style,
   enterDelay = 100,
+  portalContainer,
   ...rest
 }, ref) {
   const arrowRef = useRef(null);
   const [open, setOpen] = useState(false);
   const shouldOpen = title !== '' && typeof document !== 'undefined';
+  const {
+    rootElement
+  } = useEds();
   const {
     x,
     y,
@@ -118,6 +123,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
     ...rest,
     ...getFloatingProps({
       ref: tooltipRef,
+      className: `eds-tooltip ${rest.className ?? ''}`,
       style: {
         ...style,
         position: strategy,
@@ -136,7 +142,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [shouldOpen && open && /*#__PURE__*/createPortal(TooltipEl, document.body), updatedChildren]
+    children: [shouldOpen && open && /*#__PURE__*/createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
   });
 });
 

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+'use client';
 export { Button } from './components/Button/index.js';
 export { Table } from './components/Table/index.js';
 export { Icon } from './components/Icon/index.js';

package/dist/types/components/EdsProvider/eds.context.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type Density = 'compact' | 'comfortable';
 type State = {
     density: Density;
+    rootElement?: HTMLElement | null;
 };
 type UseEdsProps<T> = {
     /** Use this to update the `density` from nested components in `EdsProvider` */
@@ -9,6 +10,7 @@ type UseEdsProps<T> = {
 } & T;
 export type EdsProviderProps = {
     density?: Density;
+    rootElement?: HTMLElement | null;
     children: ReactNode;
 };
 export declare const EdsProvider: React.FC<EdsProviderProps>;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -9,6 +9,10 @@ export type TooltipProps = {
     children: React.ReactElement & React.RefAttributes<HTMLElement>;
     /** Delay in ms, default 100 */
     enterDelay?: number;
+    /** Portal container
+     * @default document.body
+     * */
+    portalContainer?: HTMLElement;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     /** Tooltip placement relative to anchor */
@@ -19,4 +23,8 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     children: React.ReactElement & React.RefAttributes<HTMLElement>;
     /** Delay in ms, default 100 */
     enterDelay?: number;
+    /** Portal container
+     * @default document.body
+     * */
+    portalContainer?: HTMLElement;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.42.6-dev-11212024",
+  "version": "0.43.0-dev-12102024",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -66,6 +66,7 @@
     "rollup": "^4.22.5",
     "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.3.4",
     "styled-components": "6.1.12",
     "tsc-watch": "^6.2.0",
@@ -84,11 +85,11 @@
     "@react-stately/calendar": "^3.5.3",
     "@react-stately/datepicker": "^3.10.1",
     "@react-types/shared": "^3.24.1",
-    "@tanstack/react-virtual": "3.10.8",
+    "@tanstack/react-virtual": "3.11.1",
     "downshift": "9.0.8",
     "react-aria": "^3.34.1",
-    "@equinor/eds-tokens": "0.9.2",
     "@equinor/eds-icons": "^0.21.0",
+    "@equinor/eds-tokens": "0.9.2",
     "@equinor/eds-utils": "0.8.5"
   },
   "scripts": {