@equinor/eds-core-react 0.42.2 → 0.42.3

package/dist/eds-core-react.cjs

@@ -10438,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
@@ -10473,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();
@@ -10488,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,
@@ -10529,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
@@ -11171,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
@@ -11250,7 +11251,8 @@ function CalendarCell({
     isOutsideVisibleRange,
     isDisabled,
     isUnavailable,
-    formattedDate
+    formattedDate,
+    isFocused
   } = reactAria.useCalendarCell({
     date
   }, state, ref);
@@ -11298,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/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/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.2",
+  "version": "0.42.3",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -88,8 +88,8 @@
     "downshift": "9.0.8",
     "react-aria": "^3.34.1",
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-utils": "0.8.5",
-    "@equinor/eds-tokens": "0.9.2"
+    "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-utils": "0.8.5"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",