@equinor/eds-core-react 2.3.1 → 2.3.2-beta.0

package/dist/esm/components/Autocomplete/AddNewOption.js

@@ -40,7 +40,7 @@ function AddNewOption({
       ref: rowVirtualizer.measureElement
     }),
     item,
-    index: index
+    index
   });
   return /*#__PURE__*/jsxs(StyledListItem, {
     $highlighted: highlighted,

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -1,5 +1,5 @@
 import { useFloating, offset, flip, size } from '@floating-ui/react';
-import styled, { css, ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider, css } from 'styled-components';
 import { Button } from '../Button/index.js';
 import { AutocompleteContext } from './AutocompleteContext.js';
 import { MultipleInput } from './MultipleInput.js';

package/dist/esm/components/Autocomplete/MultipleInput.js

@@ -4,6 +4,7 @@ import { useAutocompleteContext } from './AutocompleteContext.js';
 import { RightAdornments } from './RightAdornments.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Chip } from '../Chip/Chip.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 import { Input } from '../Input/Input.js';
 
 const UnstyledInput = styled.input.withConfig({
@@ -13,8 +14,15 @@ const UnstyledInput = styled.input.withConfig({
 const ChipContainer = styled.div.withConfig({
   displayName: "MultipleInput__ChipContainer",
   componentId: "sc-1evc1aa-1"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;height:100%;"]);
+})(["display:flex;flex-wrap:wrap;align-items:center;align-content:center;min-height:100%;gap:", ";margin:", ";"], ({
+  $density
+}) => $density === 'compact' ? '2px' : '0.5rem', ({
+  $density
+}) => $density === 'compact' ? '-2px 0' : '0');
 const MultipleInput = () => {
+  const {
+    density
+  } = useEds();
   const {
     selectedItems,
     selectionDisplay,
@@ -49,23 +57,31 @@ const MultipleInput = () => {
     e.stopPropagation();
     handleChipRemove(item, index, false);
   };
+  const minHeight = density === 'compact' ? '24px' : '36px';
   return /*#__PURE__*/jsx(Input, {
     as: 'div',
     variant: variant,
     rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
     rightAdornments: /*#__PURE__*/jsx(RightAdornments, {}),
     readOnly: readOnly,
-    style: {
+    style: selectionDisplay === 'chips' ? {
       height: 'auto',
-      minHeight: '36px'
-    },
+      minHeight
+    } : undefined,
+    "data-density": density,
     children: /*#__PURE__*/jsxs(ChipContainer, {
+      $density: density,
       children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsx(Chip, {
         ref: el => {
           if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
         style: {
-          outline: '1px solid var(--eds-color-accent-12)'
+          outline: '1px solid var(--eds-color-accent-12)',
+          ...(density === 'compact' && {
+            height: '16px',
+            fontSize: '12px',
+            gridGap: '0px'
+          })
         },
         onDelete: handleChipDelete(item, index),
         onClick: handleChipClick(item, index),

package/dist/esm/components/Autocomplete/Option.js

@@ -48,7 +48,9 @@ function Option({
   const isSelected = selectedItemsLabels.includes(label);
   const optionComponent = _optionComponent?.(item, isSelected);
   const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
-  const itemProps = getItemProps({
+
+  // Guard: downshift 9.x validates that item exists in the items array
+  const itemProps = item !== undefined ? getItemProps({
     ...(multiline && {
       ref: rowVirtualizer.measureElement
     }),
@@ -60,7 +62,14 @@ function Option({
         height: `${virtualItem.size}px`
       })
     }
-  });
+  }) : {
+    style: {
+      transform: `translateY(${virtualItem.start}px)`,
+      ...(!multiline && {
+        height: `${virtualItem.size}px`
+      })
+    }
+  };
   return /*#__PURE__*/jsxs(StyledListItem, {
     $isdisabled: isDisabled ? 'true' : 'false',
     $highlighted: highlighted,

package/dist/esm/components/Autocomplete/SelectAllOption.js

@@ -27,7 +27,7 @@ function SelectAllOption({
       ref: rowVirtualizer.measureElement
     }),
     item,
-    index: index
+    index
   });
   return /*#__PURE__*/jsxs(StyledListItem, {
     ref: ref,

package/dist/esm/components/Autocomplete/useAutocomplete.js

@@ -112,7 +112,13 @@ const useAutocomplete = ({
       ...multipleSelectionProps,
       onSelectedItemsChange: changes => {
         if (onOptionsChange) {
-          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol || item !== AddSymbol);
+          // AddSymbol/AllSymbol are handled manually in onStateChange,
+          // so skip propagating when they appear in selectedItems
+          // (downshift 9.x propagates selectedItem to useMultipleSelection)
+          if (changes.selectedItems.some(item => item === AllSymbol || item === AddSymbol)) {
+            return;
+          }
+          let selectedItems = changes.selectedItems;
           if (itemCompare) {
             selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
           }
@@ -269,6 +275,9 @@ const useAutocomplete = ({
               toggleAllSelected();
             } else if (selectedItem === AddSymbol && typedInputValue.trim()) {
               onAddNewOption?.(typedInputValue);
+              if (clearSearchOnChange) {
+                setTypedInputValue('');
+              }
             } else if (multiple) {
               const shouldRemove = itemCompare ? selectedItems.some(i => itemCompare(selectedItem, i)) : selectedItems.includes(selectedItem);
               if (shouldRemove) {
@@ -494,7 +503,9 @@ const useAutocomplete = ({
             };
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
           case useCombobox.stateChangeTypes.ItemClick:
-            if (clearSearchOnChange) {
+            // Don't clear typedInputValue for AddSymbol — onStateChange needs
+            // it to call onAddNewOption (downshift 9.x runs onStateChange after re-render)
+            if (clearSearchOnChange && changes.selectedItem !== AddSymbol) {
               setTypedInputValue('');
             }
             return {

package/dist/esm/components/Banner/Banner.tokens.js

@@ -74,11 +74,7 @@ const info = {
         color: infoColor
       }
     }
-  },
-  modes: {
-    compact: {}
-  }
-};
+  }};
 const warning = {
   entities: {
     icon: {
@@ -87,10 +83,6 @@ const warning = {
         color: warningColor
       }
     }
-  },
-  modes: {
-    compact: {}
-  }
-};
+  }};
 
 export { enabled, info, warning };

package/dist/esm/components/Chip/Chip.js

@@ -85,7 +85,7 @@ const Chip = /*#__PURE__*/forwardRef(function Chip({
   };
   const resizedChildren = Children.map(children, child => {
     // We force size on Icon & Avatar component
-    if (child.props) {
+    if (child?.props) {
       return /*#__PURE__*/cloneElement(child, {
         size: 16,
         disabled

package/dist/esm/components/Chip/Chip.tokens.js

@@ -107,8 +107,6 @@ const enabled = {
   },
   entities: {
     icon: {
-      height: medium,
-      width: medium,
       border: {
         radius: borderRadius,
         type: 'border',

package/dist/esm/components/Datepicker/utils/get-calendar-date.js

@@ -1,4 +1,4 @@
-import { toCalendarDateTime, toCalendarDate, fromDate } from '@internationalized/date';
+import { toCalendarDateTime, fromDate, toCalendarDate } from '@internationalized/date';
 
 const getCalendarDate = (value, timezone, showTimeInput = false) => {
   if (!value) return null;

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

@@ -1,11 +1,39 @@
-import { useContext, createContext } from 'react';
-import 'react/jsx-runtime';
+import { useState, useEffect, useContext, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
 const initalState = {
   /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
 const EdsContext = /*#__PURE__*/createContext(initalState);
+const EdsProvider = ({
+  children,
+  density,
+  rootElement
+}) => {
+  const [state, setState] = useState({
+    ...initalState,
+    density: density || 'comfortable'
+  });
+  const setDensity = density => setState(prevState => ({
+    ...prevState,
+    density
+  }));
+  useEffect(() => {
+    if (typeof density !== 'undefined' && density !== state.density) {
+      setDensity(density);
+    }
+  }, [density, state.density]);
+  const value = {
+    density: state.density,
+    rootElement,
+    setDensity
+  };
+  return /*#__PURE__*/jsx(EdsContext.Provider, {
+    value: value,
+    children: children
+  });
+};
 const useEds = () => useContext(EdsContext);
 
-export { useEds };
+export { EdsProvider, useEds };

package/dist/esm/components/Menu/Menu.context.js

@@ -1,4 +1,4 @@
-import { useContext, useState, createContext } from 'react';
+import { useState, useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {

package/dist/esm/components/SideBar/SideBar.context.js

@@ -1,4 +1,4 @@
-import { useContext, createContext, useState, useCallback } from 'react';
+import { useContext, useState, useCallback, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {

package/dist/esm/components/Typography/Typography.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
-import { quickVariants, typography, colors, link } from './Typography.tokens.js';
+import { quickVariants, typography, link, colors } from './Typography.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
 const getElementType = (variant, link) => {

package/dist/esm/index.js

@@ -16,85 +16,85 @@ export { Progress } from './components/Progress/index.js';
 export { Breadcrumbs } from './components/Breadcrumbs/index.js';
 export { Menu } from './components/Menu/index.js';
 export { SideBar } from './components/SideBar/index.js';
-export { ButtonGroup } from './components/Button/ButtonGroup/ButtonGroup.js';
-export { ToggleButton } from './components/Button/ToggleButton/ToggleButton.js';
-export { TypographyNext } from './components/Typography/Typography.new.js';
-export { Heading } from './components/Typography/Heading.js';
-export { Paragraph } from './components/Typography/Paragraph.js';
-export { Typography } from './components/Typography/Typography.js';
-export { Body as TableBody } from './components/Table/Body.js';
-export { Cell as TableCell } from './components/Table/Cell.js';
-export { Head as TableHead } from './components/Table/Head/Head.js';
-export { Foot as TableFoot } from './components/Table/Foot/Foot.js';
-export { Row as TableRow } from './components/Table/Row/Row.js';
-export { Caption as TableCaption } from './components/Table/Caption.js';
-export { Divider } from './components/Divider/Divider.js';
-export { TextField } from './components/TextField/TextField.js';
-export { Textarea } from './components/Textarea/Textarea.js';
-export { ListItem } from './components/List/ListItem.js';
-export { AccordionItem } from './components/Accordion/AccordionItem.js';
 export { AccordionHeader } from './components/Accordion/AccordionHeader.js';
-export { AccordionHeaderTitle } from './components/Accordion/AccordionHeaderTitle.js';
 export { AccordionHeaderActions } from './components/Accordion/AccordionHeaderActions.js';
+export { AccordionHeaderTitle } from './components/Accordion/AccordionHeaderTitle.js';
+export { AccordionItem } from './components/Accordion/AccordionItem.js';
 export { AccordionPanel } from './components/Accordion/AccordionPanel.js';
-export { Tab } from './components/Tabs/Tab.js';
-export { TabPanels } from './components/Tabs/TabPanels.js';
-export { TabPanel } from './components/Tabs/TabPanel.js';
-export { TabList } from './components/Tabs/TabList.js';
+export { AddSymbol, AllSymbol, Autocomplete, StyledButton, defaultOptionDisabled } from './components/Autocomplete/Autocomplete.js';
+export { Avatar } from './components/Avatar/Avatar.js';
+export { BannerActions } from './components/Banner/BannerActions.js';
+export { BannerIcon } from './components/Banner/BannerIcon.js';
+export { BannerMessage } from './components/Banner/BannerMessage.js';
+export { Breadcrumb } from './components/Breadcrumbs/Breadcrumb.js';
+export { ButtonGroup } from './components/Button/ButtonGroup/ButtonGroup.js';
 export { CardActions } from './components/Card/CardActions.js';
 export { CardContent } from './components/Card/CardContent.js';
 export { CardHeader } from './components/Card/CardHeader.js';
-export { CardMedia } from './components/Card/CardMedia.js';
 export { CardHeaderTitle } from './components/Card/CardHeaderTitle.js';
-export { Actions as TopbarActions } from './components/TopBar/Actions.js';
-export { Header as TopbarHeader } from './components/TopBar/Header.js';
-export { CustomContent as TopbarCustomContent } from './components/TopBar/CustomContent.js';
+export { CardMedia } from './components/Card/CardMedia.js';
+export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { Chip } from './components/Chip/Chip.js';
+export { CircularProgress } from './components/Progress/Circular/CircularProgress.js';
+export { DatePicker } from './components/Datepicker/DatePicker.js';
+export { DateRangePicker } from './components/Datepicker/DateRangePicker.js';
 export { DialogActions } from './components/Dialog/DialogActions.js';
-export { DialogTitle } from './components/Dialog/DialogTitle.js';
 export { DialogContent } from './components/Dialog/DialogContent.js';
 export { DialogHeader } from './components/Dialog/DialogHeader.js';
-export { Scrim } from './components/Scrim/Scrim.js';
-export { LinkItem as TableOfContentsLinkItem } from './components/TableOfContents/LinkItem.js';
-export { SideSheet } from './components/SideSheet/SideSheet.js';
-export { Chip } from './components/Chip/Chip.js';
-export { Avatar } from './components/Avatar/Avatar.js';
-export { Search } from './components/Search/Search.js';
-export { Slider } from './components/Slider/Slider.js';
-export { Tooltip } from './components/Tooltip/Tooltip.js';
-export { SnackbarAction } from './components/Snackbar/SnackbarAction.js';
-export { PopoverTitle } from './components/Popover/PopoverTitle.js';
-export { PopoverContent } from './components/Popover/PopoverContent.js';
-export { PopoverHeader } from './components/Popover/PopoverHeader.js';
-export { PopoverActions } from './components/Popover/PopoverActions.js';
-export { BannerIcon } from './components/Banner/BannerIcon.js';
-export { BannerMessage } from './components/Banner/BannerMessage.js';
-export { BannerActions } from './components/Banner/BannerActions.js';
-export { LinearProgress } from './components/Progress/Linear/LinearProgress.js';
-export { CircularProgress } from './components/Progress/Circular/CircularProgress.js';
-export { StarProgress } from './components/Progress/Star/StarProgress.js';
+export { DialogTitle } from './components/Dialog/DialogTitle.js';
+export { Divider } from './components/Divider/Divider.js';
 export { DotProgress } from './components/Progress/Dots/DotProgress.js';
-export { Breadcrumb } from './components/Breadcrumbs/Breadcrumb.js';
+export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
+export { Heading } from './components/Typography/Heading.js';
+export { Input } from './components/Input/Input.js';
+export { InputWrapper } from './components/InputWrapper/InputWrapper.js';
+export { Label } from './components/Label/Label.js';
+export { LinearProgress } from './components/Progress/Linear/LinearProgress.js';
+export { ListItem } from './components/List/ListItem.js';
 export { MenuItem } from './components/Menu/MenuItem.js';
 export { MenuSection } from './components/Menu/MenuSection.js';
-export { Pagination } from './components/Pagination/Pagination.js';
 export { NativeSelect } from './components/Select/NativeSelect.js';
-export { Label } from './components/Label/Label.js';
-export { Input } from './components/Input/Input.js';
-export { Checkbox } from './components/Checkbox/Checkbox.js';
-export { Radio } from './components/Radio/Radio.js';
-export { Switch } from './components/Switch/Switch.js';
-export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
+export { Pagination } from './components/Pagination/Pagination.js';
 export { Paper } from './components/Paper/Paper.js';
-export { AddSymbol, AllSymbol, Autocomplete, StyledButton, defaultOptionDisabled } from './components/Autocomplete/Autocomplete.js';
-export { InputWrapper } from './components/InputWrapper/InputWrapper.js';
-export { useInputField } from './components/InputWrapper/useInputField.js';
-export { useSideBar } from './components/SideBar/SideBar.context.js';
-export { SidebarLink } from './components/SideBar/SidebarLink/index.js';
+export { Paragraph } from './components/Typography/Paragraph.js';
+export { PopoverActions } from './components/Popover/PopoverActions.js';
+export { PopoverContent } from './components/Popover/PopoverContent.js';
+export { PopoverHeader } from './components/Popover/PopoverHeader.js';
+export { PopoverTitle } from './components/Popover/PopoverTitle.js';
+export { Radio } from './components/Radio/Radio.js';
+export { Scrim } from './components/Scrim/Scrim.js';
+export { Search } from './components/Search/Search.js';
+export { SideBarAccordion } from './components/SideBar/SideBarAccordion/index.js';
+export { SideBarAccordionItem } from './components/SideBar/SideBarAccordionItem/index.js';
+export { SideBarButton } from './components/SideBar/SideBarButton/index.js';
 export { SideBarContent } from './components/SideBar/SideBarContent.js';
 export { SideBarFooter } from './components/SideBar/SideBarFooter.js';
 export { SideBarToggle } from './components/SideBar/SideBarToggle.js';
-export { SideBarButton } from './components/SideBar/SideBarButton/index.js';
-export { SideBarAccordion } from './components/SideBar/SideBarAccordion/index.js';
-export { SideBarAccordionItem } from './components/SideBar/SideBarAccordionItem/index.js';
-export { DatePicker } from './components/Datepicker/DatePicker.js';
-export { DateRangePicker } from './components/Datepicker/DateRangePicker.js';
+export { SideSheet } from './components/SideSheet/SideSheet.js';
+export { SidebarLink } from './components/SideBar/SidebarLink/index.js';
+export { Slider } from './components/Slider/Slider.js';
+export { SnackbarAction } from './components/Snackbar/SnackbarAction.js';
+export { StarProgress } from './components/Progress/Star/StarProgress.js';
+export { Switch } from './components/Switch/Switch.js';
+export { Tab } from './components/Tabs/Tab.js';
+export { TabList } from './components/Tabs/TabList.js';
+export { TabPanel } from './components/Tabs/TabPanel.js';
+export { TabPanels } from './components/Tabs/TabPanels.js';
+export { Body as TableBody } from './components/Table/Body.js';
+export { Caption as TableCaption } from './components/Table/Caption.js';
+export { Cell as TableCell } from './components/Table/Cell.js';
+export { Foot as TableFoot } from './components/Table/Foot/Foot.js';
+export { Head as TableHead } from './components/Table/Head/Head.js';
+export { LinkItem as TableOfContentsLinkItem } from './components/TableOfContents/LinkItem.js';
+export { Row as TableRow } from './components/Table/Row/Row.js';
+export { TextField } from './components/TextField/TextField.js';
+export { Textarea } from './components/Textarea/Textarea.js';
+export { ToggleButton } from './components/Button/ToggleButton/ToggleButton.js';
+export { Tooltip } from './components/Tooltip/Tooltip.js';
+export { Actions as TopbarActions } from './components/TopBar/Actions.js';
+export { CustomContent as TopbarCustomContent } from './components/TopBar/CustomContent.js';
+export { Header as TopbarHeader } from './components/TopBar/Header.js';
+export { Typography } from './components/Typography/Typography.js';
+export { TypographyNext } from './components/Typography/Typography.new.js';
+export { useInputField } from './components/InputWrapper/useInputField.js';
+export { useSideBar } from './components/SideBar/SideBar.context.js';

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

@@ -0,0 +1,11 @@
+import { useContext, createContext } from 'react';
+import 'react/jsx-runtime';
+
+const initalState = {
+  /** Density for all components inside `EdsProvider` */
+  density: 'comfortable'
+};
+const EdsContext = /*#__PURE__*/createContext(initalState);
+const useEds = () => useContext(EdsContext);
+
+export { useEds };

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

@@ -0,0 +1,152 @@
+import { forwardRef, useRef, useState, useMemo, useEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import { mergeRefs, typographyTemplate, spacingsTemplate, bordersTemplate } from '@equinor/eds-utils';
+import { tooltip } from './Tooltip.tokens.js';
+import { useFloating, autoUpdate, offset, flip, shift, arrow, 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
+}).withConfig({
+  displayName: "Tooltip__StyledTooltip",
+  componentId: "sc-m2im2p-0"
+})(["inset:unset;border:0;overflow:visible;", " ", " ", " background:", ";white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}&::backdrop{background-color:transparent;}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background);
+const ArrowWrapper = styled.div.withConfig({
+  displayName: "Tooltip__ArrowWrapper",
+  componentId: "sc-m2im2p-1"
+})(["position:absolute;width:", ";height:", ";z-index:-1;"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
+const TooltipArrow = styled.svg.withConfig({
+  displayName: "Tooltip__TooltipArrow",
+  componentId: "sc-m2im2p-2"
+})(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
+  title,
+  placement = 'bottom',
+  children,
+  style,
+  enterDelay = 100,
+  disabled = false,
+  portalContainer,
+  ...rest
+}, ref) {
+  const arrowRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const {
+    rootElement
+  } = useEds();
+  const shouldOpen = Boolean(title) && typeof document !== 'undefined';
+  const {
+    x,
+    y,
+    refs,
+    strategy,
+    context,
+    middlewareData: {
+      arrow: {
+        x: arrowX,
+        y: arrowY
+      } = {}
+    },
+    placement: finalPlacement,
+    elements
+  } = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    middleware: [offset(14), flip(), shift({
+      padding: 8
+    }), arrow({
+      element: arrowRef
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const mergedAnchorRef = useMemo(() => mergeRefs(refs.setReference), [refs.setReference]);
+  const tooltipRef = useMemo(() => mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useHover(context, {
+    delay: {
+      open: enterDelay
+    }
+  }), useFocus(context), useRole(context, {
+    role: 'tooltip'
+  }), useDismiss(context)]);
+  useEffect(() => {
+    const staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right'
+    }[finalPlacement.split('-')[0]];
+    let arrowTransform = 'none';
+    switch (staticSide) {
+      case 'right':
+        arrowTransform = 'rotateY(180deg)';
+        break;
+      case 'left':
+        arrowTransform = 'none';
+        break;
+      case 'top':
+        arrowTransform = 'rotate(90deg)';
+        break;
+      case 'bottom':
+        arrowTransform = 'rotate(-90deg)';
+        break;
+    }
+    if (arrowRef.current) {
+      Object.assign(arrowRef.current.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [staticSide]: '-6px',
+        transform: arrowTransform
+      });
+    }
+  });
+  const updatedChildren = /*#__PURE__*/cloneElement(children,
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+  {
+    ...getReferenceProps(children.props),
+    ref: mergeRefs(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+    children.props.ref, mergedAnchorRef)
+  });
+  useEffect(() => {
+    if (!elements.floating) return;
+    if (elements.floating.isConnected && shouldOpen && open) {
+      elements.floating.showPopover();
+    }
+  }, [open, shouldOpen, elements.floating]);
+  const TooltipEl = /*#__PURE__*/jsxs(StyledTooltip, {
+    popover: "manual",
+    ...rest,
+    ...getFloatingProps({
+      ref: tooltipRef,
+      className: `eds-tooltip ${rest.className ?? ''}`,
+      style: {
+        ...style,
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      }
+    }),
+    children: [title, /*#__PURE__*/jsx(ArrowWrapper, {
+      ref: arrowRef,
+      children: /*#__PURE__*/jsx(TooltipArrow, {
+        className: "arrowSvg",
+        children: /*#__PURE__*/jsx("path", {
+          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+        })
+      })
+    })]
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [updatedChildren, shouldOpen && open && !disabled && /*#__PURE__*/createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body)]
+  });
+});
+
+export { Tooltip };

package/dist/esm-next/components/Tooltip/Tooltip.tokens.js

@@ -0,0 +1,54 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    text: {
+      static_icons__primary_white: {
+        rgba: white
+      }
+    },
+    ui: {
+      background__overlay: {
+        rgba: background
+      }
+    }
+  },
+  typography: {
+    ui
+  },
+  spacings: {
+    comfortable: {
+      x_large: spacingXlarge,
+      small: spacingSmall
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const tooltip = {
+  typography: {
+    ...ui.tooltip,
+    color: white
+  },
+  background,
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  entities: {
+    arrow: {
+      width: '6px',
+      height: spacingSmall}
+  },
+  spacings: {
+    left: spacingSmall,
+    right: spacingSmall,
+    top: spacingSmall,
+    bottom: spacingSmall
+  }
+};
+
+export { tooltip };