@equinor/eds-core-react 0.42.1 → 0.42.3

package/dist/eds-core-react.cjs

@@ -5,6 +5,7 @@ var styled = require('styled-components');
 var edsTokens = require('@equinor/eds-tokens');
 var edsUtils = require('@equinor/eds-utils');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var react$1 = require('@floating-ui/react');
 var edsIcons = require('@equinor/eds-icons');
 var downshift = require('downshift');
@@ -1151,7 +1152,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
 }, ref) {
   const arrowRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  const shouldOpen = title !== '';
+  const shouldOpen = title !== '' && typeof document !== 'undefined';
   const {
     x,
     y,
@@ -1255,7 +1256,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [shouldOpen && open && TooltipEl, updatedChildren]
+    children: [shouldOpen && open && /*#__PURE__*/reactDom.createPortal(TooltipEl, document.body), updatedChildren]
   });
 });
 
@@ -7772,6 +7773,7 @@ const MenuItem$1 = /*#__PURE__*/react.forwardRef(function MenuItem({
   return /*#__PURE__*/jsxRuntime.jsx(Item, {
     ...props,
     $active: active,
+    type: "button",
     ref: edsUtils.mergeRefs(ref, el => {
       if (isFocused) {
         requestAnimationFrame(() => {
@@ -10436,9 +10438,13 @@ const initalState = {
 };
 const SideBarContext = /*#__PURE__*/react.createContext(initalState);
 const SideBarProvider = ({
-  children
+  children,
+  isOpen: isOpenProp = false
 }) => {
-  const [state, setState] = react.useState(initalState);
+  const [state, setState] = react.useState({
+    onToggle: null,
+    isOpen: isOpenProp
+  });
   const {
     isOpen,
     onToggle
@@ -10471,13 +10477,11 @@ const useSideBar = () => react.useContext(SideBarContext);
 
 const SideBarContainer = /*#__PURE__*/react.forwardRef(function SideBarContainer({
   onToggle: onToggleCallback,
-  open = false,
   children,
   ...rest
 }, ref) {
   const {
     isOpen,
-    setIsOpen,
     onToggle,
     setOnToggle
   } = useSideBar();
@@ -10486,10 +10490,6 @@ const SideBarContainer = /*#__PURE__*/react.forwardRef(function SideBarContainer
       setOnToggle(onToggleCallback);
     }
   }, [onToggle, onToggleCallback, setOnToggle]);
-  react.useEffect(() => {
-    setIsOpen(open);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
   return /*#__PURE__*/jsxRuntime.jsx(GridContainer, {
     ...rest,
     open: isOpen,
@@ -10527,6 +10527,7 @@ const SideBar$1 = /*#__PURE__*/react.forwardRef(({
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsx(SideBarProvider, {
+      isOpen: open,
       children: /*#__PURE__*/jsxRuntime.jsx(SideBarContainer, {
         ...props,
         ref: ref
@@ -11169,7 +11170,9 @@ SideBar.AccordionItem.displayName = 'SideBar.AccordionItem';
 const StyledCell = styled__default.default(Typography).withConfig({
   displayName: "CalendarCell__StyledCell",
   componentId: "sc-y5ycmg-0"
-})(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}&:focus{outline:2px dashed rgba(0,112,121,1);}", " ", " ", " ", " ", " ", ""], edsTokens.tokens.colors.interactive.table__cell__fill_hover.rgba, ({
+})(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}", " ", " ", " ", " ", " ", " ", ""], edsTokens.tokens.colors.interactive.table__cell__fill_hover.rgba, ({
+  $focused
+}) => $focused && `outline: 2px dashed rgba(0, 112, 121, 1);`, ({
   $selected
 }) => $selected && `background-color: ${edsTokens.tokens.colors.interactive.primary__selected_highlight.rgba};`, ({
   $hidden
@@ -11248,7 +11251,8 @@ function CalendarCell({
     isOutsideVisibleRange,
     isDisabled,
     isUnavailable,
-    formattedDate
+    formattedDate,
+    isFocused
   } = reactAria.useCalendarCell({
     date
   }, state, ref);
@@ -11296,6 +11300,7 @@ function CalendarCell({
       $highlight: isHighlight,
       $disabled: isDisabled || isUnavailable,
       $density: density,
+      $focused: isFocused,
       children: formattedDate
     })
   });

package/dist/esm/components/Datepicker/calendars/CalendarCell.js

@@ -9,7 +9,9 @@ import { useEds } from '../../EdsProvider/eds.context.js';
 const StyledCell = styled(Typography).withConfig({
   displayName: "CalendarCell__StyledCell",
   componentId: "sc-y5ycmg-0"
-})(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}&:focus{outline:2px dashed rgba(0,112,121,1);}", " ", " ", " ", " ", " ", ""], tokens.colors.interactive.table__cell__fill_hover.rgba, ({
+})(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}", " ", " ", " ", " ", " ", " ", ""], tokens.colors.interactive.table__cell__fill_hover.rgba, ({
+  $focused
+}) => $focused && `outline: 2px dashed rgba(0, 112, 121, 1);`, ({
   $selected
 }) => $selected && `background-color: ${tokens.colors.interactive.primary__selected_highlight.rgba};`, ({
   $hidden
@@ -88,7 +90,8 @@ function CalendarCell({
     isOutsideVisibleRange,
     isDisabled,
     isUnavailable,
-    formattedDate
+    formattedDate,
+    isFocused
   } = useCalendarCell({
     date
   }, state, ref);
@@ -136,6 +139,7 @@ function CalendarCell({
       $highlight: isHighlight,
       $disabled: isDisabled || isUnavailable,
       $density: density,
+      $focused: isFocused,
       children: formattedDate
     })
   });

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

@@ -68,6 +68,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
   return /*#__PURE__*/jsx(Item, {
     ...props,
     $active: active,
+    type: "button",
     ref: mergeRefs(ref, el => {
       if (isFocused) {
         requestAnimationFrame(() => {

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

@@ -7,9 +7,13 @@ const initalState = {
 };
 const SideBarContext = /*#__PURE__*/createContext(initalState);
 const SideBarProvider = ({
-  children
+  children,
+  isOpen: isOpenProp = false
 }) => {
-  const [state, setState] = useState(initalState);
+  const [state, setState] = useState({
+    onToggle: null,
+    isOpen: isOpenProp
+  });
   const {
     isOpen,
     onToggle

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

@@ -8,13 +8,11 @@ import { useEds } from '../EdsProvider/eds.context.js';
 
 const SideBarContainer = /*#__PURE__*/forwardRef(function SideBarContainer({
   onToggle: onToggleCallback,
-  open = false,
   children,
   ...rest
 }, ref) {
   const {
     isOpen,
-    setIsOpen,
     onToggle,
     setOnToggle
   } = useSideBar();
@@ -23,10 +21,6 @@ const SideBarContainer = /*#__PURE__*/forwardRef(function SideBarContainer({
       setOnToggle(onToggleCallback);
     }
   }, [onToggle, onToggleCallback, setOnToggle]);
-  useEffect(() => {
-    setIsOpen(open);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
   return /*#__PURE__*/jsx(GridContainer, {
     ...rest,
     open: isOpen,
@@ -64,6 +58,7 @@ const SideBar = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsx(SideBarProvider, {
+      isOpen: open,
       children: /*#__PURE__*/jsx(SideBarContainer, {
         ...props,
         ref: ref

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

@@ -1,4 +1,5 @@
 import { forwardRef, useRef, useState, useMemo, useEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
 import { tooltip } from './Tooltip.tokens.js';
@@ -29,7 +30,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
 }, ref) {
   const arrowRef = useRef(null);
   const [open, setOpen] = useState(false);
-  const shouldOpen = title !== '';
+  const shouldOpen = title !== '' && typeof document !== 'undefined';
   const {
     x,
     y,
@@ -133,7 +134,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [shouldOpen && open && TooltipEl, updatedChildren]
+    children: [shouldOpen && open && /*#__PURE__*/createPortal(TooltipEl, document.body), updatedChildren]
   });
 });
 

package/dist/types/components/SideBar/SideBar.context.d.ts

@@ -9,7 +9,8 @@ type UseSidebarProps<T> = T & {
 };
 type ProviderProps = {
     children: ReactNode;
+    isOpen: boolean;
 };
-export declare const SideBarProvider: ({ children }: ProviderProps) => JSX.Element;
+export declare const SideBarProvider: ({ children, isOpen: isOpenProp, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useSideBar: () => UseSidebarProps<State>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.42.1",
+  "version": "0.42.3",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -52,7 +52,6 @@
     "@types/ramda": "^0.30.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",