@equinor/eds-core-react 0.20.3 → 0.21.0-dev.20220905

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

@@ -1,12 +1,12 @@
-import { forwardRef, useState, useEffect } from 'react';
-import * as ReactDom from 'react-dom';
+import { forwardRef, useLayoutEffect, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { MenuProvider, useMenu } from './Menu.context.js';
 import { Paper } from '../Paper/Paper.js';
 import { MenuList } from './MenuList.js';
-import { bordersTemplate, useIsMounted, useToken, usePopper, useOutsideClick, useGlobalKeyPress } from '@equinor/eds-utils';
+import { bordersTemplate, useToken, mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 const {
@@ -29,7 +29,6 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref)
     anchorEl,
     onClose: onCloseCallback,
     open,
-    containerEl,
     ...rest
   } = _ref2;
   const {
@@ -73,11 +72,6 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref)
       if (anchorEl) anchorEl.removeEventListener('keydown', openWithKey);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [anchorEl]);
-  useOutsideClick(containerEl, e => {
-    if (open && onClose !== null && !anchorEl.contains(e.target)) {
-      onClose();
-    }
-  });
   useGlobalKeyPress('Escape', () => {
     if (open && onClose !== null) {
       onClose();
@@ -102,60 +96,82 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
   let {
     anchorEl,
     open,
-    placement = 'auto',
+    placement = 'bottom',
+    onClose,
     style,
     className,
     ...rest
   } = _ref3;
-  const [containerEl, setContainerEl] = useState(null);
-  const [storedAnchorEl, setStoredAnchorEl] = useState(null);
-  const isMounted = useIsMounted();
   const {
     density
   } = useEds();
   const token = useToken({
     density
   }, menu);
-  useEffect(() => {
-    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
-    return () => setStoredAnchorEl(null);
-  }, [anchorEl, open]);
   const {
-    styles,
-    attributes
-  } = usePopper({
-    anchorEl: storedAnchorEl,
-    popperEl: containerEl,
+    x,
+    y,
+    reference,
+    floating,
+    refs,
+    update,
+    strategy,
+    context
+  } = useFloating({
     placement,
-    offset: 4
+    open,
+    onOpenChange: onClose,
+    middleware: [offset(4), flip(), shift({
+      padding: 8
+    })]
   });
+  useLayoutEffect(() => {
+    reference(anchorEl);
+  }, [anchorEl, reference]);
+  const popoverRef = useMemo(() => mergeRefs(floating, ref), [floating, ref]);
+  useEffect(() => {
+    if (refs.reference.current && refs.floating.current && open) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [refs.reference, refs.floating, update, open]);
+  const {
+    getFloatingProps
+  } = useInteractions([useDismiss(context, {
+    escapeKey: false
+  })]);
   const props = {
     open,
-    style: { ...styles.popper,
-      ...style
-    },
-    className,
-    ...attributes.popper
+    className
   };
   const menuProps = { ...rest,
+    onClose,
     anchorEl,
-    open,
-    containerEl
+    open
   };
   return /*#__PURE__*/jsx(Fragment, {
-    children: isMounted && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/jsx(ThemeProvider, {
-      theme: token,
-      children: /*#__PURE__*/jsx(MenuPaper, {
-        elevation: "raised",
-        ref: setContainerEl,
-        ...props,
-        children: /*#__PURE__*/jsx(MenuProvider, {
-          children: /*#__PURE__*/jsx(MenuContainer, { ...menuProps,
-            ref: ref
+    children: /*#__PURE__*/jsx(FloatingPortal, {
+      id: "eds-menu-container",
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        theme: token,
+        children: /*#__PURE__*/jsx(MenuPaper, {
+          elevation: "raised",
+          ...props,
+          ...getFloatingProps({
+            ref: popoverRef,
+            style: { ...style,
+              position: strategy,
+              top: y !== null && y !== void 0 ? y : 0,
+              left: x !== null && x !== void 0 ? x : 0
+            }
+          }),
+          children: /*#__PURE__*/jsx(MenuProvider, {
+            children: /*#__PURE__*/jsx(MenuContainer, { ...menuProps,
+              ref: ref
+            })
           })
         })
       })
-    }), document.body)
+    })
   });
 });
 

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { menu } from './Menu.tokens.js';
-import { typographyTemplate, spacingsTemplate, outlineTemplate, useCombinedRefs } from '@equinor/eds-utils';
+import { typographyTemplate, spacingsTemplate, outlineTemplate, mergeRefs } from '@equinor/eds-utils';
 import { useMenu } from './Menu.context.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -76,7 +76,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
     isFocused
   };
   return /*#__PURE__*/jsx(Item, { ...props,
-    ref: useCombinedRefs(ref, el => {
+    ref: mergeRefs(ref, el => {
       if (isFocused) {
         requestAnimationFrame(() => {
           if (el !== null) el.focus();

package/dist/esm/components/Pagination/Pagination.js

@@ -1,7 +1,7 @@
 import { forwardRef, useState, useLayoutEffect } from 'react';
 import styled from 'styled-components';
 import { useIsMounted } from '@equinor/eds-utils';
-import { Button } from '../Button/Button.js';
+import { Button } from '../Button/index.js';
 import { Icon } from '../Icon/index.js';
 import { Typography } from '../Typography/Typography.js';
 import { PaginationItem } from './PaginationItem.js';

package/dist/esm/components/Pagination/PaginationItem.js

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { Button } from '../Button/Button.js';
+import { Button } from '../Button/index.js';
 import { pagination } from './Pagination.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/esm/components/Popover/Popover.js

@@ -1,9 +1,10 @@
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { Paper } from '../Paper/Paper.js';
-import { typographyTemplate, bordersTemplate, useCombinedRefs, useOutsideClick, useGlobalKeyPress, usePopper, useToken } from '@equinor/eds-utils';
+import { typographyTemplate, bordersTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss } from '@floating-ui/react-dom-interactions';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const PopoverPaper = styled(Paper).withConfig({
@@ -14,9 +15,9 @@ const PopoverPaper = styled(Paper).withConfig({
     theme,
     open
   } = _ref;
-  return css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:1400;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], {
+  return css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:1400;overflow:auto;"], {
     visibility: open ? null : 'hidden'
-  }, typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, bordersTemplate(theme.border), theme.entities.arrow.width, theme.entities.arrow.height, theme.entities.arrow.spacings.bottom, theme.entities.arrow.spacings.top, theme.entities.arrow.spacings.right, theme.entities.arrow.spacings.left);
+  }, typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, bordersTemplate(theme.border));
 });
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
@@ -25,7 +26,7 @@ const ArrowWrapper = styled.div.withConfig({
   let {
     theme
   } = _ref2;
-  return css(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], theme.entities.arrow.width, theme.entities.arrow.height);
+  return css(["position:absolute;width:", ";height:", ";z-index:-1;"], theme.entities.arrow.width, theme.entities.arrow.height);
 });
 const InnerWrapper = styled.div.withConfig({
   displayName: "Popover__InnerWrapper",
@@ -50,41 +51,90 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
     children,
     placement = 'bottom',
     anchorEl,
+    style,
     open,
     onClose,
     ...rest
   } = _ref5;
-  const [popperEl, setPopperEl] = useState(null);
-  const [storedAnchorEl, setStoredAnchorEl] = useState(null);
-  const [arrowRef, setArrowRef] = useState(null);
-  const popoverRef = useCombinedRefs(ref, setPopperEl);
-  useOutsideClick(popperEl, e => {
-    if (open && onClose && anchorEl && !anchorEl.contains(e.target)) {
-      onClose();
-    }
-  });
-  useGlobalKeyPress('Escape', () => {
-    if (onClose && open) {
-      onClose();
-    }
+  const arrowRef = useRef(null);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    refs,
+    update,
+    strategy,
+    context,
+    middlewareData: {
+      arrow: {
+        x: arrowX,
+        y: arrowY
+      } = {}
+    },
+    placement: finalPlacement
+  } = useFloating({
+    placement,
+    open,
+    onOpenChange: onClose,
+    middleware: [offset(14), flip(), shift({
+      padding: 8
+    }), arrow({
+      element: arrowRef
+    })]
   });
+  useLayoutEffect(() => {
+    reference(anchorEl);
+  }, [anchorEl, reference]);
+  const popoverRef = useMemo(() => mergeRefs(floating, ref), [floating, ref]);
   useEffect(() => {
-    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
-    return () => setStoredAnchorEl(null);
-  }, [anchorEl, open]);
+    if (refs.reference.current && refs.floating.current && open) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [refs.reference, refs.floating, update, open]);
   const {
-    styles,
-    attributes
-  } = usePopper({
-    anchorEl: storedAnchorEl,
-    popperEl,
-    arrowRef,
-    placement
-  });
+    getFloatingProps
+  } = useInteractions([useDismiss(context)]);
+  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 ? "".concat(arrowX, "px") : '',
+      top: arrowY != null ? "".concat(arrowY, "px") : '',
+      right: '',
+      bottom: '',
+      [staticSide]: '-6px',
+      transform: arrowTransform
+    });
+  }
+
   const props = {
     open,
-    ...rest,
-    ...attributes.popper
+    ...rest
   };
   const {
     density
@@ -95,13 +145,18 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(PopoverPaper, {
-      ref: popoverRef,
       elevation: "overlay",
-      style: styles.popper,
       ...props,
+      ...getFloatingProps({
+        ref: popoverRef,
+        style: { ...style,
+          position: strategy,
+          top: y !== null && y !== void 0 ? y : 0,
+          left: x !== null && x !== void 0 ? x : 0
+        }
+      }),
       children: [/*#__PURE__*/jsx(ArrowWrapper, {
-        ref: setArrowRef,
-        style: styles.arrow,
+        ref: arrowRef,
         className: "arrow",
         children: /*#__PURE__*/jsx(PopoverArrow, {
           className: "arrowSvg",

package/dist/esm/components/Radio/Radio.js

@@ -106,6 +106,7 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
     label,
     disabled = false,
     className,
+    style,
     ...rest
   } = _ref12;
   const {
@@ -137,6 +138,7 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
     children: label ? /*#__PURE__*/jsxs(StyledLabel, {
       disabled: disabled,
       className: className,
+      style: style,
       children: [/*#__PURE__*/jsxs(InputWrapper, {
         disabled: disabled,
         children: [/*#__PURE__*/jsx(Input, { ...rest,
@@ -149,6 +151,8 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
       })]
     }) : /*#__PURE__*/jsxs(InputWrapper, {
       disabled: disabled,
+      className: className,
+      style: style,
       children: [/*#__PURE__*/jsx(Input, { ...rest,
         ref: ref,
         disabled: disabled,

package/dist/esm/components/Scrim/Scrim.js

@@ -1,7 +1,7 @@
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
-import { useCombinedRefs, useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
+import { mergeRefs, useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
 const {
@@ -26,7 +26,7 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
     ...rest
   } = _ref;
   const scrimRef = useRef(null);
-  const combinedScrimRef = useCombinedRefs(scrimRef, ref);
+  const combinedScrimRef = useMemo(() => mergeRefs(scrimRef, ref), [scrimRef, ref]);
   const props = { ...rest,
     open,
     isDismissable

package/dist/esm/components/Search/Search.js

@@ -1,12 +1,12 @@
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { search as search$1, close } from '@equinor/eds-icons';
 import { search } from './Search.tokens.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { Button } from '../Button/Button.js';
+import { Button } from '../Button/index.js';
 import { Icon } from '../Icon/index.js';
 import { Input } from '../Input/Input.js';
-import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken, useCombinedRefs, setReactInputValue } from '@equinor/eds-utils';
+import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken, mergeRefs, setReactInputValue } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const Container = styled.span.withConfig({
@@ -63,6 +63,7 @@ const Search = /*#__PURE__*/forwardRef(function Search(_ref4, ref) {
     defaultValue = '',
     value,
     className = '',
+    style,
     disabled = false,
     onBlur,
     onFocus,
@@ -138,14 +139,16 @@ const Search = /*#__PURE__*/forwardRef(function Search(_ref4, ref) {
   const containerProps = {
     isFocused,
     className,
+    style,
     disabled,
     role: 'search',
     'aria-label': rest['aria-label'],
     onClick: handleOnClick
   };
+  const combinedRef = useMemo(() => mergeRefs(inputRef, ref), [inputRef, ref]);
   const inputProps = applyControllingProps({ ...rest,
     disabled,
-    ref: useCombinedRefs(inputRef, ref),
+    ref: combinedRef,
     type: 'search',
     role: 'searchbox',
     'aria-label': 'search input',

package/dist/esm/components/Select/NativeSelect/NativeSelect.js

@@ -24,6 +24,7 @@ const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
     label,
     children,
     className,
+    style,
     selectRef,
     id,
     meta,
@@ -39,7 +40,8 @@ const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
   }, nativeselect);
   const containerProps = {
     ref,
-    className
+    className,
+    style
   };
   const selectProps = {
     ref: selectRef,

package/dist/esm/components/Select/commonStyles.js

@@ -1,6 +1,6 @@
 import { Input } from '../Input/Input.js';
 import { List } from '../List/index.js';
-import { Button } from '../Button/Button.js';
+import { Button } from '../Button/index.js';
 import styled, { css } from 'styled-components';
 import { select } from './Select.tokens.js';
 import { bordersTemplate, typographyTemplate } from '@equinor/eds-utils';

package/dist/esm/components/SideSheet/SideSheet.js

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { clear } from '@equinor/eds-icons';
-import { bordersTemplate, spacingsTemplate } from '@equinor/eds-utils';
+import { bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { Typography } from '../Typography/Typography.js';
-import { Button } from '../Button/Button.js';
+import { Button } from '../Button/index.js';
 import { Icon } from '../Icon/index.js';
 import { comfortable, variants } from './SideSheet.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -11,17 +11,18 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 const {
   background,
   spacings,
-  border
+  border,
+  typography
 } = comfortable;
 const StyledSideSheet = styled.div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background, _ref => {
+})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background, _ref => {
   let {
     width
   } = _ref;
   return width;
-}, bordersTemplate(border), spacingsTemplate(spacings));
+}, bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography));
 const Header = styled.div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
@@ -29,6 +30,7 @@ const Header = styled.div.withConfig({
 const SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
   let {
     variant = 'medium',
+    width,
     title = '',
     children,
     open = true,
@@ -37,7 +39,7 @@ const SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
   } = _ref2;
   const props = { ...rest,
     ref,
-    width: variants[variant]
+    width: width || variants[variant]
   }; // Controller must set open={false} when pressing the close button
 
   return open && /*#__PURE__*/jsxs(StyledSideSheet, { ...props,

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

@@ -16,6 +16,11 @@ const {
       xx_small: spacingXXS,
       medium: spacingMedium
     }
+  },
+  typography: {
+    paragraph: {
+      body_short
+    }
   }
 } = tokens;
 const comfortable = {
@@ -33,6 +38,8 @@ const comfortable = {
       width: spacingXXS,
       style: 'solid'
     }
+  },
+  typography: { ...body_short
   }
 };
 const variants = {

package/dist/esm/components/Switch/Switch.js

@@ -31,6 +31,7 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(_ref3, ref) {
     disabled,
     label,
     className,
+    style,
     ...rest
   } = _ref3;
   const {
@@ -46,6 +47,7 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(_ref3, ref) {
     children: label ? /*#__PURE__*/jsxs(StyledLabel, {
       isDisabled: disabled,
       className: className,
+      style: style,
       children: [size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, {
         disabled: disabled,
         ...rest,
@@ -59,10 +61,14 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(_ref3, ref) {
       })]
     }) : size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, {
       disabled: disabled,
+      className: className,
+      style: style,
       ...rest,
       ref: ref
     }) : /*#__PURE__*/jsx(SwitchDefault, {
       disabled: disabled,
+      className: className,
+      style: style,
       ...rest,
       ref: ref
     })

package/dist/esm/components/Switch/SwitchDefault.js

@@ -51,9 +51,13 @@ const Handle = styled.span.withConfig({
 const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault(_ref4, ref) {
   let {
     disabled,
+    className,
+    style,
     ...rest
   } = _ref4;
   return /*#__PURE__*/jsxs(GridWrapper, {
+    className: className,
+    style: style,
     children: [/*#__PURE__*/jsx(Input, { ...rest,
       ref: ref,
       disabled: disabled

package/dist/esm/components/Switch/SwitchSmall.js

@@ -51,9 +51,13 @@ const Handle = styled.span.withConfig({
 const SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall(_ref4, ref) {
   let {
     disabled,
+    className,
+    style,
     ...rest
   } = _ref4;
   return /*#__PURE__*/jsxs(GridWrapper, {
+    className: className,
+    style: style,
     children: [/*#__PURE__*/jsx(Input, { ...rest,
       ref: ref,
       disabled: disabled

package/dist/esm/components/Tabs/TabList.js

@@ -1,6 +1,6 @@
 import { forwardRef, useContext, useRef, useState, useCallback, useEffect, Children, cloneElement } from 'react';
 import styled from 'styled-components';
-import { useCombinedRefs } from '@equinor/eds-utils';
+import { mergeRefs } from '@equinor/eds-utils';
 import { TabsContext } from './Tabs.context.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -49,8 +49,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
     currentTab.current = activeTab;
   }, [activeTab]);
   const Tabs = Children.map(children, (child, index) => {
-    const tabRef = index === activeTab ? // eslint-disable-next-line react-hooks/rules-of-hooks
-    useCombinedRefs(child.ref, selectedTabRef) : child.ref;
+    const tabRef = index === activeTab ? mergeRefs(child.ref, selectedTabRef) : child.ref;
     return /*#__PURE__*/cloneElement(child, {
       id: "".concat(tabsId, "-tab-").concat(index + 1),
       'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),

package/dist/esm/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
 import { TabsProvider } from './Tabs.context.js';
 import { token } from './Tabs.tokens.js';
-import { useId, useCombinedRefs, useToken } from '@equinor/eds-utils';
+import { useId, mergeRefs, useToken } from '@equinor/eds-utils';
 import { ThemeProvider } from 'styled-components';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx } from 'react/jsx-runtime';
@@ -19,7 +19,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
   } = _ref;
   const tabsId = useId(id, 'tabs');
   const tabsRef = useRef(null);
-  const combinedTabsRef = useCombinedRefs(tabsRef, ref);
+  const combinedTabsRef = useMemo(() => mergeRefs(tabsRef, ref), [tabsRef, ref]);
   const [tabsFocused, setTabsFocused] = useState(false);
   const [listenerAttached, setListenerAttached] = useState(false);
   let blurTimer;

package/dist/esm/components/TextField/TextField.js

@@ -29,6 +29,7 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     inputIcon,
     helperIcon,
     rowsMax,
+    style,
     ...other
   } = _ref;
   const helperTextId = useId(null, 'helpertext');
@@ -55,7 +56,7 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   const containerProps = {
     ref,
     className,
-    style: other.style
+    style
   };
   const labelProps = {
     htmlFor: id,